diff --git a/templates/quiz_buzzer_multiplayer.html b/templates/quiz_buzzer_multiplayer.html index 57ac9ba..4466ba0 100644 --- a/templates/quiz_buzzer_multiplayer.html +++ b/templates/quiz_buzzer_multiplayer.html @@ -98,10 +98,20 @@ } .buzzer-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 15px; margin: 30px 0; } + @media (min-width: 768px) { + .buzzer-grid { + grid-template-columns: repeat(3, 1fr); + } + } + @media (min-width: 1024px) { + .buzzer-grid { + grid-template-columns: repeat(4, 1fr); + } + } .player-buzzer { height: 150px; border-radius: 20px; @@ -132,10 +142,11 @@ opacity: 0.5; } .player-buzzer.start { - grid-column: 1 / -1; background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%); border-color: rgba(29, 185, 84, 0.3); box-shadow: 0 10px 40px rgba(29, 185, 84, 0.5); + width: 100%; + grid-column: 1 / -1; } .player-buzzer.start:hover { box-shadow: 0 15px 50px rgba(29, 185, 84, 0.7); @@ -281,8 +292,13 @@ console.log('Ready with Device ID', device_id); document.getElementById('device_id').value = device_id; window.deviceId = device_id; + setCorrectAnswer(); - updateScoreboard(); + + // Aktualisiere Scoreboard falls schon initialisiert + if (players.length > 0) { + updateScoreboard(); + } }); player.addListener('player_state_changed', state => {