modified: templates/quiz.html

templates/quiz.html

@@ -5,97 +5,89 @@
   <!-- Spotify Web Playback SDK -->
   <script src="https://sdk.scdn.co/spotify-player.js"></script>
   <style>
+    /* Dark, modern theme for the quiz page */
+    :root{
+      --bg:#0f1113;
+      --card:#121416;
+      --muted:#9aa3a8;
+      --accent:#1DB954;
+      --accent-strong:#17c24a;
+      --danger:#f44336;
+      --success:#4CAF50;
+      --glass: rgba(255,255,255,0.03);
+      --radius:14px;
+    }
+
+    html,body{height:100%;}
     body {
-      font-family: Arial, sans-serif;
+      margin:0;
-      max-width: 800px;
+      padding:24px;
-      margin: 0 auto;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
-      padding: 20px;
+      background: linear-gradient(180deg, #070708 0%, #0b0c0e 100%);
+      color:#e6eef1;
+      display:flex;
+      align-items:flex-start;
+      justify-content:center;
     }
-    .controls {
+
-      margin: 20px 0;
+    .quiz-viewport{
+      width:100%;
+      max-width:980px;
+      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
+      border-radius:18px;
+      padding:28px;
+      box-shadow: 0 6px 30px rgba(2,6,23,0.6);
+      backdrop-filter: blur(6px);
     }
-    .btn {
+
-      padding: 10px 15px;
+    /* header area */
-      margin: 5px;
+    .quiz-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
-      background-color: #1DB954;
+    .quiz-header .left{display:flex;align-items:center;gap:12px}
-      color: white;
+    .back-link{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:8px 12px;border-radius:10px;text-decoration:none}
-      border: none;
+    .back-link:hover{border-color:rgba(255,255,255,0.12);color:#fff}
-      border-radius: 20px;
+
-      cursor: pointer;
+    /* progress and score */
+    .meta{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:0.95rem}
+
+    /* question */
+    h2#question-text{font-size:1.7rem;margin:6px 0 14px;color:#fff}
+
+    .game-modes{display:flex;gap:10px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
+    .btn{padding:10px 16px;border-radius:12px;border:none;cursor:pointer;font-weight:600}
+    .btn:not(.btn-danger){background:var(--glass);color:#dff3e6;border:1px solid rgba(255,255,255,0.04)}
+    .btn:hover{transform:translateY(-1px)}
+    .btn-success{background:linear-gradient(180deg,var(--accent),var(--accent-strong));color:#08120a}
+    .btn-secondary{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.04)}
+    .btn-danger{background:transparent;color:var(--danger);border:1px solid rgba(244,67,54,0.12)}
+
+    .game-options{display:flex;gap:12px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
+    select{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.04);padding:8px 10px;border-radius:10px}
+
+    .controls{text-align:center;margin:18px 0}
+
+    input[type="text"], input[type="number"]{
+      width:min(72%,520px);
+      padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:#e6eef1;font-size:1rem;outline:none
     }
-    .btn:hover {
+
-      background-color: #1ed760;
+    .search-results{margin-top:8px;max-height:260px;overflow:auto;border-radius:10px;background:var(--card);border:1px solid rgba(255,255,255,0.03);display:none}
-    }
+    .search-item{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.02);cursor:pointer;color:#dbe7e9}
-    .btn-secondary {
+    .search-item:hover{background:rgba(255,255,255,0.02)}
-      background-color: #535353;
+
-    }
+    .result-container{margin:18px auto;padding:16px;border-radius:12px;text-align:center;display:none;max-width:720px}
-    .btn-secondary:hover {
+    .result-container.correct{background:linear-gradient(180deg, rgba(6,58,6,0.6), rgba(6,58,6,0.45));border:1px solid rgba(76,175,80,0.18)}
-      background-color: #7b7b7b;
+    .result-container.incorrect{background:linear-gradient(180deg, rgba(58,6,6,0.6), rgba(58,6,6,0.45));border:1px solid rgba(244,67,54,0.12)}
-    }
+
-    .btn-success {
+    .result-container img{width:84px;border-radius:8px;margin-top:10px}
-      background-color: #4CAF50;
+    .result-container a{color:var(--accent);text-decoration:none;font-weight:600}
-    }
+
-    .btn-danger {
+    .hint-container{color:var(--muted);text-align:center;margin-top:16px}
-      background-color: #f44336;
+
-    }
+    /* responsive */
-    .game-modes {
+    @media (max-width:700px){
-      margin: 20px 0;
+      .quiz-viewport{padding:16px}
-      display: flex;
+      input[type="text"]{width:92%}
-      justify-content: center;
+      .game-modes{gap:8px}
-    }
-    .search-results {
-      margin-top: 15px;
-      max-height: 200px;
-      overflow-y: auto;
-      border: 1px solid #ddd;
-      border-radius: 5px;
-      display: none;
-    }
-    .search-item {
-      padding: 8px 10px;
-      border-bottom: 1px solid #eee;
-      cursor: pointer;
-    }
-    .search-item:hover {
-      background-color: #f5f5f5;
-    }
-    .result-container {
-      margin: 20px 0;
-      padding: 15px;
-      border-radius: 5px;
-      text-align: center;
-      display: none;
-    }
-    .correct {
-      background-color: #e8f5e9;
-      border: 1px solid #4CAF50;
-    }
-    .incorrect {
-      background-color: #ffebee;
-      border: 1px solid #f44336;
-    }
-    input[type="text"], input[type="number"] {
-      padding: 10px;
-      width: 300px;
-      border: 1px solid #ddd;
-      border-radius: 20px;
-      font-size: 16px;
-    }
-    h2 {
-      color: #333;
-      text-align: center;
-    }
-    .hint-container {
-      margin: 15px 0;
-      font-style: italic;
-      color: #666;
-    }
-    .game-options {
-      text-align: center;
-      margin-bottom: 20px;
-    }
-    .game-options label {
-      margin-right: 20px;
     }
   </style>
   <script>