Simon
a2bbca4ef1
modified: templates/playerselect.html modified: templates/quiz_buzzer_multiplayer.html new file: templates/team_setup.html
228 lines
6.0 KiB
HTML
228 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>{{ translations['quiz_title'] }} – Team Setup</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1419 100%);
|
||
color: #e0e0e0;
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.setup-container {
|
||
max-width: 700px;
|
||
width: 100%;
|
||
background: rgba(25, 30, 45, 0.95);
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
h2 {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
color: #1DB954;
|
||
font-size: 2em;
|
||
}
|
||
.team-count-section {
|
||
margin-bottom: 30px;
|
||
text-align: center;
|
||
}
|
||
.team-count-label {
|
||
font-size: 1.3em;
|
||
margin-bottom: 15px;
|
||
color: #e0e0e0;
|
||
font-weight: 600;
|
||
}
|
||
.team-count-display {
|
||
font-size: 3em;
|
||
font-weight: bold;
|
||
color: #1DB954;
|
||
margin: 20px 0;
|
||
}
|
||
.team-count-slider {
|
||
width: 100%;
|
||
height: 8px;
|
||
border-radius: 5px;
|
||
background: rgba(29, 185, 84, 0.2);
|
||
outline: none;
|
||
-webkit-appearance: none;
|
||
}
|
||
.team-count-slider::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 25px;
|
||
height: 25px;
|
||
border-radius: 50%;
|
||
background: #1DB954;
|
||
cursor: pointer;
|
||
box-shadow: 0 0 10px rgba(29, 185, 84, 0.5);
|
||
}
|
||
.team-count-slider::-moz-range-thumb {
|
||
width: 25px;
|
||
height: 25px;
|
||
border-radius: 50%;
|
||
background: #1DB954;
|
||
cursor: pointer;
|
||
box-shadow: 0 0 10px rgba(29, 185, 84, 0.5);
|
||
border: none;
|
||
}
|
||
.teams-list {
|
||
margin: 30px 0;
|
||
}
|
||
.team-input-group {
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
.team-number {
|
||
font-size: 1.5em;
|
||
font-weight: bold;
|
||
color: #1DB954;
|
||
min-width: 100px;
|
||
}
|
||
.team-name-input {
|
||
flex: 1;
|
||
padding: 12px 20px;
|
||
border-radius: 12px;
|
||
border: 2px solid rgba(29, 185, 84, 0.3);
|
||
background: rgba(15, 20, 25, 0.8);
|
||
color: #e0e0e0;
|
||
font-size: 1.1em;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.team-name-input:focus {
|
||
outline: none;
|
||
border-color: #1DB954;
|
||
box-shadow: 0 0 10px rgba(29, 185, 84, 0.3);
|
||
}
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 15px 30px;
|
||
margin: 10px 5px;
|
||
border-radius: 25px;
|
||
border: none;
|
||
font-size: 1.1em;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
text-decoration: none;
|
||
color: white;
|
||
}
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
|
||
box-shadow: 0 4px 15px rgba(29, 185, 84, 0.3);
|
||
}
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(29, 185, 84, 0.5);
|
||
}
|
||
.btn-secondary {
|
||
background: linear-gradient(135deg, #535353 0%, #666 100%);
|
||
}
|
||
.btn-secondary:hover {
|
||
transform: translateY(-2px);
|
||
background: linear-gradient(135deg, #666 0%, #777 100%);
|
||
}
|
||
.button-group {
|
||
text-align: center;
|
||
margin-top: 30px;
|
||
}
|
||
</style>
|
||
<script>
|
||
let teamCount = 4;
|
||
|
||
function updateTeamCount() {
|
||
teamCount = parseInt(document.getElementById('teamCountSlider').value);
|
||
document.getElementById('teamCountDisplay').textContent = teamCount;
|
||
updateTeamInputs();
|
||
}
|
||
|
||
function updateTeamInputs() {
|
||
const container = document.getElementById('teamInputs');
|
||
container.innerHTML = '';
|
||
|
||
for (let i = 1; i <= teamCount; i++) {
|
||
const savedName = localStorage.getItem(`team_${i}_name`) || `Team ${i}`;
|
||
|
||
const group = document.createElement('div');
|
||
group.className = 'team-input-group';
|
||
group.innerHTML = `
|
||
<div class="team-number">Team ${i}:</div>
|
||
<input type="text"
|
||
class="team-name-input"
|
||
id="team${i}Name"
|
||
value="${savedName}"
|
||
placeholder="Team ${i} Name"
|
||
maxlength="20">
|
||
`;
|
||
container.appendChild(group);
|
||
}
|
||
}
|
||
|
||
function saveTeams() {
|
||
// Speichere Anzahl
|
||
localStorage.setItem('team_count', teamCount);
|
||
|
||
// Speichere Namen
|
||
for (let i = 1; i <= teamCount; i++) {
|
||
const name = document.getElementById(`team${i}Name`).value || `Team ${i}`;
|
||
localStorage.setItem(`team_${i}_name`, name);
|
||
}
|
||
}
|
||
|
||
window.onload = function() {
|
||
// Lade gespeicherte Anzahl
|
||
const savedCount = localStorage.getItem('team_count') || '4';
|
||
document.getElementById('teamCountSlider').value = savedCount;
|
||
updateTeamCount();
|
||
};
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="setup-container">
|
||
<h2>👥 Team Setup</h2>
|
||
|
||
<div class="team-count-section">
|
||
<div class="team-count-label">Anzahl der Teams</div>
|
||
<div class="team-count-display" id="teamCountDisplay">4</div>
|
||
<input type="range"
|
||
class="team-count-slider"
|
||
id="teamCountSlider"
|
||
min="2"
|
||
max="6"
|
||
value="4"
|
||
oninput="updateTeamCount()">
|
||
</div>
|
||
|
||
<div class="teams-list">
|
||
<div id="teamInputs"></div>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<a href="{{ url_for('buzzer_settings', playlist_id=playlist_id) }}?mode={{ game_mode }}&local_multiplayer=1"
|
||
class="btn btn-primary"
|
||
onclick="saveTeams()">
|
||
✅ Weiter zu Einstellungen
|
||
</a>
|
||
<a href="{{ url_for('playerselect', playlist_id=playlist_id) }}?mode={{ game_mode }}&buzzer=1"
|
||
class="btn btn-secondary">
|
||
⬅️ Zurück
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|