From 0c2a39584be5c21ffbb1122fc8bdb204973242bb Mon Sep 17 00:00:00 2001
From: Simon <Simon@vp-server.eu>
Date: Sat, 17 May 2025 09:09:27 +0200
Subject: [PATCH] 	modified:   templates/login.html 	modified:  
 templates/playlists.html 	modified:   templates/quiz.html

---
 templates/login.html     | 50 +++++++++++++++++++++++++++--
 templates/playlists.html | 68 +++++++++++++++++++++++++++++++++++-----
 templates/quiz.html      |  3 ++
 3 files changed, 111 insertions(+), 10 deletions(-)
diff --git a/templates/login.html b/templates/login.html
index f19ca64..e58dfdd 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,8 +1,52 @@
 <!DOCTYPE html>
 <html>
-<head><title>Login mit Spotify</title></head>
+<head>
+  <title>Login mit Spotify</title>
+  <style>
+    body {
+      background: linear-gradient(135deg, #1DB954 0%, #191414 100%);
+      color: #fff;
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      margin: 0;
+    }
+    .login-container {
+      background: rgba(25, 20, 20, 0.85);
+      padding: 40px 50px;
+      border-radius: 20px;
+      box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
+      text-align: center;
+    }
+    h1 {
+      margin-bottom: 30px;
+      font-size: 2.5em;
+      letter-spacing: 2px;
+    }
+    a.button {
+      display: inline-block;
+      padding: 15px 35px;
+      background-color: #1DB954;
+      color: #fff;
+      font-weight: bold;
+      text-decoration: none;
+      border-radius: 50px;
+      font-size: 1.2em;
+      transition: background 0.2s;
+      margin-top: 20px;
+    }
+    a.button:hover {
+      background-color: #1ed760;
+    }
+  </style>
+</head>
 <body>
-  <h1>Musik Quiz</h1>
-  <a href="/login">Mit Spotify einloggen</a>
+  <div class="login-container">
+    <h1>Quizify Musik Quiz</h1>
+    <a href="/login" class="button">Mit Spotify einloggen</a>
+  </div>
 </body>
 </html>
diff --git a/templates/playlists.html b/templates/playlists.html
index 9aa17e1..6a1222d 100644
--- a/templates/playlists.html
+++ b/templates/playlists.html
@@ -1,12 +1,66 @@
 <!DOCTYPE html>
 <html>
-<head><title>Deine Playlists</title></head>
+<head>
+  <title>Deine Playlists</title>
+  <style>
+    body {
+      background: linear-gradient(135deg, #191414 0%, #1DB954 100%);
+      color: #fff;
+      font-family: Arial, sans-serif;
+      min-height: 100vh;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .playlist-container {
+      background: rgba(25, 20, 20, 0.85);
+      padding: 40px 50px;
+      border-radius: 20px;
+      margin-top: 60px;
+      box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
+      min-width: 350px;
+    }
+    h2 {
+      margin-bottom: 30px;
+      font-size: 2em;
+      letter-spacing: 1px;
+      text-align: center;
+    }
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    li {
+      margin: 15px 0;
+    }
+    a.playlist-link {
+      display: block;
+      padding: 15px 25px;
+      background-color: #1DB954;
+      color: #fff;
+      border-radius: 30px;
+      text-decoration: none;
+      font-size: 1.1em;
+      font-weight: bold;
+      transition: background 0.2s, transform 0.2s;
+      text-align: center;
+    }
+    a.playlist-link:hover {
+      background-color: #1ed760;
+      transform: scale(1.04);
+    }
+  </style>
+</head>
 <body>
-  <h2>Wähle eine Playlist:</h2>
-  <ul>
-    {% for pl in playlists %}
-      <li><a href="/quiz/{{ pl.id }}">{{ pl.name }}</a></li>
-    {% endfor %}
-  </ul>
+  <div class="playlist-container">
+    <h2>Wähle eine Playlist:</h2>
+    <ul>
+      {% for pl in playlists %}
+        <li><a class="playlist-link" href="/quiz/{{ pl.id }}">{{ pl.name }}</a></li>
+      {% endfor %}
+    </ul>
+  </div>
 </body>
 </html>
diff --git a/templates/quiz.html b/templates/quiz.html
index 96ec735..6b0022a 100644
--- a/templates/quiz.html
+++ b/templates/quiz.html
@@ -276,6 +276,9 @@
   </script>
 </head>
 <body>
+  <div style="text-align:center; margin-bottom: 20px;">
+  <a href="/playlists" class="btn btn-secondary" style="text-decoration:none;">⬅️ Zurück zur Playlist-Auswahl</a>
+</div>
   <h2 id="question-text">Wer ist der Künstler dieses Songs?</h2>
   
   <!-- Verstecktes Feld für device_id -->
