Simon/quizify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: templates/login.html

Browse Source 
modified:   templates/playlists.html
	modified:   templates/quiz.html
This commit is contained in:
Simon
2025-05-17 09:09:27 +02:00
parent f0e176a026
commit 0c2a39584b
3 changed files with 111 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
templates/login.html
View File

@@ -1,8 +1,52 @@
<!DOCTYPE html> <!DOCTYPE html>
<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> <body>
<h1>Musik Quiz</h1> <div class="login-container">
<a href="/login">Mit Spotify einloggen</a> <h1>Quizify Musik Quiz</h1>
<a href="/login" class="button">Mit Spotify einloggen</a>
</div>
</body> </body>
</html> </html>

68
templates/playlists.html
View File

@@ -1,12 +1,66 @@
<!DOCTYPE html> <!DOCTYPE html>
<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> <body>
<h2>Wähle eine Playlist:</h2> <div class="playlist-container">
<ul> <h2>Wähle eine Playlist:</h2>
{% for pl in playlists %} <ul>
<li><a href="/quiz/{{ pl.id }}">{{ pl.name }}</a></li> {% for pl in playlists %}
{% endfor %} <li><a class="playlist-link" href="/quiz/{{ pl.id }}">{{ pl.name }}</a></li>
</ul> {% endfor %}
</ul>
</div>
</body> </body>
</html> </html>

3
templates/quiz.html
View File

@@ -276,6 +276,9 @@
</script> </script>
</head> </head>
<body> <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> <h2 id="question-text">Wer ist der Künstler dieses Songs?</h2>
<!-- Verstecktes Feld für device_id --> <!-- Verstecktes Feld für device_id -->