use whitenoise

Dockerfile

@@ -2,10 +2,16 @@ FROM python:3.11-slim
 
 WORKDIR /app
 
-COPY . /app
-
 RUN pip install --upgrade pip
-RUN pip install --upgrade gunicorn
+
+COPY requirements.txt /app
 RUN pip install --no-cache-dir -r requirements.txt
 
+RUN pip install --upgrade gunicorn
+
+COPY . /app
+
+# Collect static files for WhiteNoise
+RUN python manage.py collectstatic --noinput
+
 CMD ["gunicorn", "seduttomachineworks_project.wsgi:application", "--bind", "0.0.0.0:8000"]

README.md

@@ -8,11 +8,19 @@ simple-ish!
 
 uses sqlite3 stored alongside the customer files.
 
+## Development
+
+```shell
+pipenv run python manage.py runserver
+```
+
+
 ## Compose Example
 
 ```yaml
 services:
   web_upload:
+    image: git.kitsunehosting.net/kenwood/smw-upload:latest
     volumes:
       - /var/seduttomachineworks/data:/app/store
     ports:
@@ -22,3 +30,12 @@ services:
       - ALLOWED_HOSTS=yourdomain.com,localhost,127.0.0.1
     restart: always
 ```
+
+## Building and pushing notes
+
+```
+docker build -t git.kitsunehosting.net/kenwood/smw-upload:latest . --load
+docker push git.kitsunehosting.net/kenwood/smw-upload:latest
+```
+
+(obviously you have to be me to do this)

requirements.txt

@@ -1,2 +1,3 @@
 Django>=4.2,<5.0
+whitenoise>=6.0,<7.0
 

seduttomachineworks_project/settings.py

@@ -16,7 +16,7 @@ BASE_DIR = Path(__file__).resolve().parent.parent
 SECRET_KEY = os.environ.get("SECRET_KEY", "django-insecure-change-this-in-production")
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = os.environ.get("DEBUG", "True") == "True"
+DEBUG = os.environ.get("DEBUG", "False") == "True"
 
 ALLOWED_HOSTS = os.environ.get("ALLOWED_HOSTS", "*").split(",")
 
@@ -32,6 +32,7 @@ INSTALLED_APPS = [
 
 MIDDLEWARE = [
     "django.middleware.security.SecurityMiddleware",
+    "whitenoise.middleware.WhiteNoiseMiddleware",
     "django.contrib.sessions.middleware.SessionMiddleware",
     "django.middleware.common.CommonMiddleware",
     "django.middleware.csrf.CsrfViewMiddleware",
@@ -87,6 +88,10 @@ USE_TZ = True
 
 STATIC_URL = "static/"
 STATIC_ROOT = BASE_DIR / "staticfiles"
+STATICFILES_DIRS = [BASE_DIR / "static"]
+
+# WhiteNoise configuration for serving static files
+STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
 
 MEDIA_URL = "media/"
 MEDIA_ROOT = BASE_DIR / "media"

seduttomachineworks_project/urls.py

@@ -1,16 +1,19 @@
 """
 URL configuration for seduttomotorsports project.
 """
+
 from django.urls import path
 from . import views
 from django.conf import settings
 from django.conf.urls.static import static
 
 urlpatterns = [
-    path('', views.quote_upload, name='quote_upload'),
+    path("", views.quote_upload, name="quote_upload"),
 ]
 
 if settings.DEBUG:
+    urlpatterns += [
+        path("test-iframe/", views.test_iframe, name="test_iframe"),
+    ]
     urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
     urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
-

seduttomachineworks_project/views.py

@@ -1,5 +1,7 @@
 from django.shortcuts import render
 from django.views.decorators.clickjacking import xframe_options_exempt
+from django.http import Http404
+from django.conf import settings
 
 
 @xframe_options_exempt
@@ -8,4 +10,10 @@ def quote_upload(request):
     Simple embeddable quote upload box.
     TODO: Implement file upload and email integration
     """
-    return render(request, 'quote_upload.html')
+    return render(request, "quote_upload.html")
+
+
+def test_iframe(request):
+    if not settings.DEBUG:
+        raise Http404("Not available in production")
+    return render(request, "test_iframe.html")

static/css/quote_upload.css

@@ -0,0 +1,124 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+}
+
+.upload-box {
+    width: 100%;
+    min-height: 100vh;
+    background: white;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+}
+
+h2 {
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.drop-area {
+    border: 2px dashed #ccc;
+    border-radius: 4px;
+    padding: 24px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.drop-area:hover {
+    border-color: #666;
+    background: #f9f9f9;
+}
+
+.drop-area.dragover {
+    border-color: #0066cc;
+    background: #e6f2ff;
+}
+
+.drop-area p + p {
+    font-size: 14px;
+    color: #666;
+    margin-top: 10px;
+}
+
+input[type="file"] {
+    display: none;
+}
+
+.file-list {
+    margin-top: 20px;
+    display: none;
+}
+
+.file-list.show {
+    display: block;
+}
+
+.file-item {
+    padding: 10px;
+    background: #f9f9f9;
+    margin-bottom: 5px;
+    border-radius: 4px;
+}
+
+button {
+    margin-top: 20px;
+    padding: 12px 24px;
+    background: #0066cc;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    width: 100%;
+}
+
+button:hover {
+    background: #0052a3;
+}
+
+button:disabled {
+    background: #ccc;
+    cursor: not-allowed;
+}
+
+.todo {
+    margin-top: 20px;
+    padding: 10px;
+    background: #fff3cd;
+    border: 1px solid #ffc107;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #856404;
+}
+
+footer {
+    margin-top: auto;
+    text-align: right;
+    font-size: 12px;
+    color: #888;
+}
+
+footer a {
+    color: #666;
+    text-decoration: none;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+

static/css/test_iframe.css

@@ -0,0 +1,122 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background: #f5f5f5;
+    padding: 20px;
+}
+
+.test-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+h1 {
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.test-info {
+    background: #e3f2fd;
+    border-left: 4px solid #2196f3;
+    padding: 15px;
+    margin-bottom: 20px;
+    border-radius: 4px;
+}
+
+.test-info p {
+    margin: 5px 0;
+    color: #1976d2;
+}
+
+.iframe-wrapper {
+    background: white;
+    border: 2px solid #ddd;
+    border-radius: 8px;
+    padding: 10px;
+    margin-bottom: 30px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.iframe-wrapper h2 {
+    margin-bottom: 10px;
+    color: #555;
+    font-size: 18px;
+}
+
+.iframe-container {
+    width: 100%;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    overflow: hidden;
+    background: white;
+}
+
+iframe {
+    width: 100%;
+    border: none;
+    display: block;
+}
+
+.size-controls {
+    margin-top: 10px;
+    padding: 10px;
+    background: #f9f9f9;
+    border-radius: 4px;
+}
+
+.size-controls label {
+    margin-right: 15px;
+    color: #666;
+}
+
+.size-controls input[type="number"] {
+    width: 80px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin: 0 5px;
+}
+
+.size-presets {
+    margin-top: 10px;
+}
+
+.size-presets button {
+    padding: 5px 15px;
+    margin-right: 10px;
+    background: #2196f3;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.size-presets button:hover {
+    background: #1976d2;
+}
+
+.full-width {
+    width: 100%;
+}
+
+.mobile {
+    max-width: 375px;
+    margin: 0 auto;
+}
+
+.tablet {
+    max-width: 768px;
+    margin: 0 auto;
+}
+
+.desktop {
+    max-width: 1024px;
+    margin: 0 auto;
+}
+

templates/quote_upload.html

@@ -1,3 +1,4 @@
+{% load static %}
 <!DOCTYPE html>
 <html lang="en">
 
@@ -5,125 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Request a Quote</title>
-    <style>
+    <link rel="stylesheet" href="{% static 'css/quote_upload.css' %}">
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        html,
-        body {
-            height: 100%;
-        }
-
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            background: transparent;
-        }
-
-        .upload-box {
-            width: 100%;
-            min-height: 100vh;
-            background: white;
-            padding: 16px;
-            display: flex;
-            flex-direction: column;
-        }
-
-        h2 {
-            margin-bottom: 20px;
-            color: #333;
-        }
-
-        .drop-area {
-            border: 2px dashed #ccc;
-            border-radius: 4px;
-            padding: 24px;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-
-        .drop-area:hover {
-            border-color: #666;
-            background: #f9f9f9;
-        }
-
-        .drop-area.dragover {
-            border-color: #0066cc;
-            background: #e6f2ff;
-        }
-
-        input[type="file"] {
-            display: none;
-        }
-
-        .file-list {
-            margin-top: 20px;
-            display: none;
-        }
-
-        .file-list.show {
-            display: block;
-        }
-
-        .file-item {
-            padding: 10px;
-            background: #f9f9f9;
-            margin-bottom: 5px;
-            border-radius: 4px;
-        }
-
-        button {
-            margin-top: 20px;
-            padding: 12px 24px;
-            background: #0066cc;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 16px;
-            width: 100%;
-        }
-
-        button:hover {
-            background: #0052a3;
-        }
-
-        button:disabled {
-            background: #ccc;
-            cursor: not-allowed;
-        }
-
-        .todo {
-            margin-top: 20px;
-            padding: 10px;
-            background: #fff3cd;
-            border: 1px solid #ffc107;
-            border-radius: 4px;
-            font-size: 14px;
-            color: #856404;
-        }
-
-        footer {
-            margin-top: auto;
-            text-align: center;
-            font-size: 12px;
-            color: #888;
-        }
-
-        footer a {
-            color: #666;
-            text-decoration: none;
-        }
-
-        footer a:hover {
-            text-decoration: underline;
-        }
-    </style>
 </head>
 
 <body>
@@ -131,7 +14,7 @@
         <h2>Request a Quote</h2>
         <div class="drop-area" id="dropArea">
             <p>Drag & drop files here</p>
-            <p style="font-size: 14px; color: #666; margin-top: 10px;">or click to browse</p>
+            <p>or click to browse</p>
             <input type="file" id="fileInput" multiple>
         </div>
         <div class="file-list" id="fileList"></div>

templates/test_iframe.html

@@ -0,0 +1,103 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Iframe Test - Quote Upload</title>
+    <link rel="stylesheet" href="{% static 'css/test_iframe.css' %}">
+</head>
+
+<body>
+    <div class="test-container">
+        <h1>Iframe Embedding Test</h1>
+        <div class="test-info">
+            <p><strong>Purpose:</strong> Test how the quote upload page appears when embedded in an iframe</p>
+            <p><strong>URL:</strong> <span id="iframeUrl"></span></p>
+        </div>
+
+        <div class="iframe-wrapper">
+            <h2>Responsive Iframe (Auto Height)</h2>
+            <div class="iframe-container" id="iframeContainer">
+                <iframe id="testIframe" src="/" title="Quote Upload Test"></iframe>
+            </div>
+            <div class="size-controls">
+                <label>Width: <input type="number" id="widthInput" value="100" min="300" max="2000"> px</label>
+                <label>Height: <input type="number" id="heightInput" value="800" min="400" max="3000"> px</label>
+                <div class="size-presets">
+                    <button onclick="setSize('mobile')">Mobile (375px)</button>
+                    <button onclick="setSize('tablet')">Tablet (768px)</button>
+                    <button onclick="setSize('desktop')">Desktop (1024px)</button>
+                    <button onclick="setSize('full')">Full Width</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Display the iframe URL
+        document.getElementById('iframeUrl').textContent = window.location.origin + '/';
+
+        const iframe = document.getElementById('testIframe');
+        const iframeContainer = document.getElementById('iframeContainer');
+        const widthInput = document.getElementById('widthInput');
+        const heightInput = document.getElementById('heightInput');
+
+        // Listen for height messages from the iframe
+        window.addEventListener('message', function (event) {
+            if (event.data && event.data.type === 'sedutto-ifr-height') {
+                iframe.style.height = event.data.height + 'px';
+                heightInput.value = event.data.height;
+            }
+        });
+
+        // Update iframe size when inputs change
+        widthInput.addEventListener('input', function () {
+            iframeContainer.style.width = this.value + 'px';
+        });
+
+        heightInput.addEventListener('input', function () {
+            iframe.style.height = this.value + 'px';
+        });
+
+        // Size presets
+        function setSize(preset) {
+            const sizes = {
+                mobile: 375,
+                tablet: 768,
+                desktop: 1024,
+                full: '100%'
+            };
+
+            if (preset === 'full') {
+                iframeContainer.style.width = '100%';
+                iframeContainer.classList.remove('mobile', 'tablet', 'desktop');
+                widthInput.value = window.innerWidth - 60; // Account for padding
+            } else {
+                const width = sizes[preset];
+                iframeContainer.style.width = width + 'px';
+                iframeContainer.className = 'iframe-container ' + preset;
+                widthInput.value = width;
+            }
+        }
+
+        // Initial auto-height setup
+        iframe.addEventListener('load', function () {
+            // Try to get initial height
+            setTimeout(() => {
+                try {
+                    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+                    const height = iframeDoc.documentElement.scrollHeight;
+                    iframe.style.height = height + 'px';
+                    heightInput.value = height;
+                } catch (e) {
+                    // Cross-origin restrictions - rely on postMessage
+                    console.log('Cannot access iframe content directly, using postMessage');
+                }
+            }, 100);
+        });
+    </script>
+</body>
+
+</html>