2026-08-05 22:29:01 +00:00 · 2026-08-05 22:29:01 +00:00 · f2d53a573f
commit f2d53a573f
15 changed files with 826 additions and 0 deletions
--- a/templates/base.html
+++ b/templates/base.html
@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{% block title %}Dionysis Media Video{% endblock %}</title>
+    <style>
+        :root {
+            --bg: #0d0d0f;
+            --card: #16161a;
+            --text: #e8e8ec;
+            --muted: #9a9aa4;
+            --accent: #6c5ce7;
+            --accent-2: #00cec9;
+            --good: #00b894;
+            --warn: #fdcb6e;
+            --bad: #d63031;
+            --border: #2a2a30;
+        }
+        * { box-sizing: border-box; }
+        body {
+            margin: 0;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: var(--bg);
+            color: var(--text);
+            line-height: 1.5;
+        }
+        .container { max-width: 1100px; margin: 0 auto; padding: 24px; }
+        h1, h2, h3 { margin-top: 0; }
+        a { color: var(--accent-2); }
+        .card {
+            background: var(--card);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+        .flash {
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin-bottom: 16px;
+        }
+        .flash.success { background: rgba(0,184,148,0.15); color: var(--good); border: 1px solid rgba(0,184,148,0.3); }
+        .flash.error { background: rgba(214,48,49,0.15); color: var(--bad); border: 1px solid rgba(214,48,49,0.3); }
+        label { display: block; margin: 12px 0 4px; font-weight: 600; }
+        input[type="text"], input[type="file"] {
+            width: 100%;
+            padding: 10px;
+            background: var(--bg);
+            color: var(--text);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+        }
+        button, .button {
+            display: inline-block;
+            padding: 10px 18px;
+            border: none;
+            border-radius: 8px;
+            background: var(--accent);
+            color: #fff;
+            font-weight: 600;
+            cursor: pointer;
+            text-decoration: none;
+        }
+        button:hover, .button:hover { opacity: 0.9; }
+        button.secondary { background: #2d3436; }
+        button.danger { background: var(--bad); }
+        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+        @media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }
+        .status {
+            display: inline-block;
+            padding: 4px 10px;
+            border-radius: 999px;
+            font-size: 0.85rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.03em;
+        }
+        .status.waiting { background: rgba(253,203,110,0.15); color: var(--warn); }
+        .status.processing { background: rgba(108,92,231,0.2); color: var(--accent); }
+        .status.complete { background: rgba(0,184,148,0.15); color: var(--good); }
+        .status.error { background: rgba(214,48,49,0.15); color: var(--bad); cursor: pointer; }
+        table { width: 100%; border-collapse: collapse; }
+        th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); }
+        th { color: var(--muted); font-weight: 600; }
+        td { vertical-align: middle; }
+        .actions form { display: inline; }
+        .error-detail {
+            background: rgba(214,48,49,0.1);
+            border-left: 3px solid var(--bad);
+            padding: 10px 14px;
+            margin-top: 8px;
+            border-radius: 0 8px 8px 0;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+            font-size: 0.85rem;
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
+        .empty { color: var(--muted); text-align: center; padding: 40px; }
+        .small { font-size: 0.85rem; color: var(--muted); }
+    </style>
+</head>
+<body>
+    <div class="container">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="flash {{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        {% block content %}{% endblock %}
+    </div>
+</body>
+</html>