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

modified: templates/quiz.html

Browse Source
This commit is contained in:
Simon
2025-10-31 19:56:05 +01:00
parent fd8e1e99e6
commit 2bee85a8fe
1 changed files with 79 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
templates/quiz.html
View File

@@ -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;
max-width: 800px;
margin: 0 auto;
padding: 20px;
margin:0;
padding:24px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
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;
margin: 5px;
background-color: #1DB954;
color: white;
border: none;
border-radius: 20px;
cursor: pointer;
/* header area */
.quiz-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.quiz-header .left{display:flex;align-items:center;gap:12px}
.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}
.back-link:hover{border-color:rgba(255,255,255,0.12);color:#fff}
/* 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;
}
.btn-secondary {
background-color: #535353;
}
.btn-secondary:hover {
background-color: #7b7b7b;
}
.btn-success {
background-color: #4CAF50;
}
.btn-danger {
background-color: #f44336;
}
.game-modes {
margin: 20px 0;
display: flex;
justify-content: center;
}
.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;
.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}
.search-item:hover{background:rgba(255,255,255,0.02)}
.result-container{margin:18px auto;padding:16px;border-radius:12px;text-align:center;display:none;max-width:720px}
.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)}
.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)}
.result-container img{width:84px;border-radius:8px;margin-top:10px}
.result-container a{color:var(--accent);text-decoration:none;font-weight:600}
.hint-container{color:var(--muted);text-align:center;margin-top:16px}
/* responsive */
@media (max-width:700px){
.quiz-viewport{padding:16px}
input[type="text"]{width:92%}
.game-modes{gap:8px}
}
</style>
<script>