Update templates/index.html

templates/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
@@ -7,20 +7,20 @@
   <title>{{ app_title }}</title>
   <style>
     :root {
-      --bg: #f4efe5;
-      --panel: #fffaf2;
-      --panel-2: #efe4d2;
-      --line: #d1bfa3;
-      --text: #2c2218;
-      --muted: #75624e;
-      --accent: #a44d2f;
-      --accent-soft: #f2d6c7;
-      --good: #3f6b3a;
-      --good-soft: #dcebd8;
-      --warn: #b07a17;
-      --warn-soft: #f9e8b9;
-      --bad: #8e3b2f;
-      --shadow: 0 18px 40px rgba(92, 62, 34, 0.14);
+      --bg: #0b1020;
+      --panel: #121a2f;
+      --panel-2: #1a2440;
+      --line: #2d3a5f;
+      --text: #edf2ff;
+      --muted: #9aa7c7;
+      --accent: #ff875b;
+      --accent-soft: #40211a;
+      --good: #7ad79a;
+      --good-soft: #163326;
+      --warn: #ffcb6b;
+      --warn-soft: #3a2f14;
+      --bad: #ff8f8f;
+      --shadow: 0 22px 48px rgba(0, 0, 0, 0.38);
       --radius: 18px;
       --font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
       --mono: Consolas, "SFMono-Regular", monospace;
@@ -32,9 +32,9 @@
       font-family: var(--font);
       color: var(--text);
       background:
-        radial-gradient(circle at top right, rgba(164, 77, 47, 0.10), transparent 22%),
-        radial-gradient(circle at top left, rgba(176, 122, 23, 0.10), transparent 18%),
-        linear-gradient(180deg, #fbf6ee 0%, var(--bg) 100%);
+        radial-gradient(circle at top right, rgba(255, 135, 91, 0.16), transparent 22%),
+        radial-gradient(circle at top left, rgba(89, 122, 255, 0.16), transparent 18%),
+        linear-gradient(180deg, #11182c 0%, var(--bg) 100%);
     }
 
     a { color: inherit; }
@@ -54,7 +54,7 @@
       padding: 18px 20px;
       border: 1px solid var(--line);
       border-radius: 24px;
-      background: rgba(255, 250, 242, 0.88);
+      background: rgba(18, 26, 47, 0.88);
       backdrop-filter: blur(12px);
       box-shadow: var(--shadow);
     }
@@ -72,7 +72,7 @@
       border-radius: 12px;
       border: 1px solid var(--line);
       object-fit: cover;
-      background: #fff;
+      background: #0f1628;
     }
 
     .brand h1 {
@@ -96,7 +96,7 @@
       padding: 7px 12px;
       font-size: 0.82rem;
       color: var(--muted);
-      background: rgba(255,255,255,0.66);
+      background: rgba(26, 36, 64, 0.78);
       white-space: nowrap;
     }
 
@@ -141,7 +141,7 @@
 
     .pill {
       border: 1px solid var(--line);
-      background: #fff;
+      background: #18233d;
       color: var(--muted);
       border-radius: 999px;
       padding: 9px 14px;
@@ -166,13 +166,20 @@
       border: 1px solid var(--line);
       border-radius: 14px;
       padding: 12px 14px;
-      background: #fff;
+      background: #0e1528;
+      color: var(--text);
       min-width: 0;
     }
 
+    .search-form input::placeholder,
+    .answer-form textarea::placeholder,
+    .proposal-form textarea::placeholder {
+      color: #7381a6;
+    }
+
     .btn {
       border: 1px solid var(--line);
-      background: #fff;
+      background: #18233d;
       color: var(--text);
       border-radius: 14px;
       padding: 11px 16px;
@@ -204,7 +211,7 @@
       padding: 16px;
       border: 1px solid var(--line);
       border-radius: 16px;
-      background: #fff;
+      background: #161f37;
       text-decoration: none;
       transition: border-color 120ms ease, transform 120ms ease;
     }
@@ -241,19 +248,19 @@
       font-size: 0.78rem;
       border: 1px solid var(--line);
       color: var(--muted);
-      background: #fffaf6;
+      background: #18233d;
     }
 
     .tag.unanswered {
-      border-color: #d7bf70;
+      border-color: #7c6321;
       background: var(--warn-soft);
-      color: #7c5b12;
+      color: var(--warn);
     }
 
     .tag.answered {
-      border-color: #9cc199;
+      border-color: #2e6846;
       background: var(--good-soft);
-      color: #30502d;
+      color: var(--good);
     }
 
     .preview {
@@ -304,7 +311,7 @@
       padding: 20px;
       border: 1px solid var(--line);
       border-radius: 18px;
-      background: #fff;
+      background: #161f37;
     }
 
     .question-box h2 {
@@ -319,7 +326,7 @@
       padding: 18px;
       border: 1px solid var(--line);
       border-radius: 18px;
-      background: #fff;
+      background: #161f37;
     }
 
     .answer-form textarea,
@@ -330,7 +337,7 @@
       border-radius: 14px;
       padding: 12px 14px;
       resize: vertical;
-      background: #fffdf9;
+      background: #0e1528;
       color: var(--text);
     }
 
@@ -379,21 +386,22 @@
 
     .vote-btn {
       border: 1px solid var(--line);
-      background: #fffaf6;
+      background: #18233d;
       border-radius: 12px;
       padding: 8px 12px;
       cursor: pointer;
+      color: var(--text);
     }
 
     .vote-btn.active-up {
-      border-color: #709c6c;
+      border-color: #469966;
       background: var(--good-soft);
       color: var(--good);
     }
 
     .vote-btn.active-down {
-      border-color: #c79488;
-      background: #f8ddd8;
+      border-color: #a45454;
+      background: #3e2023;
       color: var(--bad);
     }
 
@@ -422,7 +430,7 @@
       padding: 12px 14px;
       border-radius: 14px;
       color: #fff;
-      background: rgba(44, 34, 24, 0.92);
+      background: rgba(10, 14, 26, 0.95);
       box-shadow: var(--shadow);
       opacity: 0;
       transform: translateY(10px);
@@ -459,7 +467,7 @@
         <img src="/templates/logo.png" alt="Logo" />
         <div>
           <h1>{{ app_title }} Queue</h1>
-          <p>Minimal project B for unanswered questions, answer versions, and voting.</p>
+          <p>For unanswered questions, answer versions, and voting.</p>
         </div>
       </div>
       <div class="badge" id="statusBadge">Queue workspace</div>
@@ -964,4 +972,4 @@
     })();
   </script>
 </body>
-</html>
+</html>