454 lines
13 KiB
HTML
454 lines
13 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.2em;
|
||
margin-bottom: 15px;
|
||
color: #e0e0e0;
|
||
}
|
||
.team-count-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.count-btn {
|
||
padding: 15px 30px;
|
||
border-radius: 15px;
|
||
border: 2px solid rgba(29, 185, 84, 0.3);
|
||
background: rgba(15, 20, 25, 0.8);
|
||
color: #e0e0e0;
|
||
font-size: 1.2em;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.count-btn:hover {
|
||
border-color: #1DB954;
|
||
transform: translateY(-2px);
|
||
}
|
||
.count-btn.active {
|
||
background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
|
||
border-color: #1DB954;
|
||
color: white;
|
||
box-shadow: 0 4px 15px rgba(29, 185, 84, 0.5);
|
||
}
|
||
.teams-section {
|
||
margin-bottom: 30px;
|
||
}
|
||
.team-input-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
.team-label {
|
||
display: block;
|
||
font-size: 1.1em;
|
||
margin-bottom: 8px;
|
||
color: #1DB954;
|
||
font-weight: 600;
|
||
}
|
||
.team-input {
|
||
width: 100%;
|
||
padding: 15px;
|
||
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-input:focus {
|
||
outline: none;
|
||
border-color: #1DB954;
|
||
box-shadow: 0 0 10px rgba(29, 185, 84, 0.3);
|
||
}
|
||
.team-input.disabled {
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
}
|
||
.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;
|
||
}
|
||
.buzzer-mode-section {
|
||
margin-bottom: 30px;
|
||
padding: 20px;
|
||
background: rgba(15, 20, 25, 0.5);
|
||
border-radius: 15px;
|
||
border: 2px solid rgba(29, 185, 84, 0.2);
|
||
}
|
||
.mode-label {
|
||
font-size: 1.2em;
|
||
margin-bottom: 15px;
|
||
color: #e0e0e0;
|
||
text-align: center;
|
||
}
|
||
.mode-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 20px;
|
||
}
|
||
.mode-btn {
|
||
padding: 12px 25px;
|
||
border-radius: 12px;
|
||
border: 2px solid rgba(29, 185, 84, 0.3);
|
||
background: rgba(15, 20, 25, 0.8);
|
||
color: #e0e0e0;
|
||
font-size: 1em;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.mode-btn:hover {
|
||
border-color: #1DB954;
|
||
transform: translateY(-2px);
|
||
}
|
||
.mode-btn.active {
|
||
background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
|
||
border-color: #1DB954;
|
||
color: white;
|
||
box-shadow: 0 4px 15px rgba(29, 185, 84, 0.5);
|
||
}
|
||
.key-mapping-section {
|
||
display: none;
|
||
margin-top: 20px;
|
||
}
|
||
.key-mapping-section.active {
|
||
display: block;
|
||
}
|
||
.key-input-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
.key-label {
|
||
flex: 1;
|
||
font-size: 1em;
|
||
color: #e0e0e0;
|
||
}
|
||
.key-input {
|
||
flex: 1;
|
||
padding: 10px 15px;
|
||
border-radius: 8px;
|
||
border: 2px solid rgba(29, 185, 84, 0.3);
|
||
background: rgba(15, 20, 25, 0.9);
|
||
color: #1DB954;
|
||
font-size: 1.1em;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.key-input:focus {
|
||
outline: none;
|
||
border-color: #1DB954;
|
||
box-shadow: 0 0 10px rgba(29, 185, 84, 0.5);
|
||
}
|
||
.key-input.disabled {
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
}
|
||
.info-text {
|
||
font-size: 0.9em;
|
||
color: #999;
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
font-style: italic;
|
||
}
|
||
</style>
|
||
<script>
|
||
let teamCount = 2;
|
||
let buzzerMode = 'central'; // 'central' oder 'personal'
|
||
let keyMappings = {1: 'Q', 2: 'W', 3: 'E', 4: 'R'};
|
||
|
||
function setBuzzerMode(mode) {
|
||
buzzerMode = mode;
|
||
|
||
// Update aktive Button
|
||
document.querySelectorAll('.mode-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
document.getElementById(`mode-${mode}`).classList.add('active');
|
||
|
||
// Zeige/Verstecke Tastenauswahl
|
||
const keySection = document.getElementById('keyMappingSection');
|
||
if (mode === 'personal') {
|
||
keySection.classList.add('active');
|
||
} else {
|
||
keySection.classList.remove('active');
|
||
}
|
||
|
||
localStorage.setItem('buzzer_mode', mode);
|
||
}
|
||
|
||
function setKeyForPlayer(playerNum) {
|
||
const input = document.getElementById(`key${playerNum}`);
|
||
if (input.disabled) return;
|
||
|
||
input.value = 'Drücke eine Taste...';
|
||
input.focus();
|
||
|
||
const handleKeyPress = (e) => {
|
||
e.preventDefault();
|
||
const key = e.key.toUpperCase();
|
||
|
||
// Entferne Event-Listener sofort
|
||
document.removeEventListener('keydown', handleKeyPress);
|
||
|
||
// Prüfe ob Taste bereits vergeben
|
||
let isUsed = false;
|
||
for (let i = 1; i <= 4; i++) {
|
||
if (i !== playerNum && keyMappings[i] === key) {
|
||
isUsed = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (isUsed) {
|
||
alert(`Die Taste "${key}" ist bereits vergeben!`);
|
||
input.value = keyMappings[playerNum];
|
||
input.blur();
|
||
return;
|
||
}
|
||
|
||
keyMappings[playerNum] = key;
|
||
input.value = key;
|
||
input.blur();
|
||
};
|
||
|
||
document.addEventListener('keydown', handleKeyPress);
|
||
}
|
||
|
||
function setTeamCount(count) {
|
||
teamCount = count;
|
||
|
||
// Update aktive Button
|
||
document.querySelectorAll('.count-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
document.getElementById(`count${count}`).classList.add('active');
|
||
|
||
// Enable/Disable Inputs
|
||
for (let i = 1; i <= 4; i++) {
|
||
const input = document.getElementById(`team${i}`);
|
||
const keyInput = document.getElementById(`key${i}`);
|
||
|
||
if (i <= count) {
|
||
input.disabled = false;
|
||
input.classList.remove('disabled');
|
||
if (keyInput) {
|
||
keyInput.disabled = false;
|
||
keyInput.classList.remove('disabled');
|
||
}
|
||
} else {
|
||
input.disabled = true;
|
||
input.classList.add('disabled');
|
||
if (keyInput) {
|
||
keyInput.disabled = true;
|
||
keyInput.classList.add('disabled');
|
||
}
|
||
}
|
||
}
|
||
|
||
// Speichere in localStorage
|
||
localStorage.setItem('team_count', count);
|
||
}
|
||
|
||
function saveTeams() {
|
||
const teams = [];
|
||
for (let i = 1; i <= teamCount; i++) {
|
||
const name = document.getElementById(`team${i}`).value || `Spieler ${i}`;
|
||
teams.push(name);
|
||
}
|
||
|
||
// Speichere in localStorage
|
||
localStorage.setItem('team_names', JSON.stringify(teams));
|
||
localStorage.setItem('team_count', teamCount);
|
||
localStorage.setItem('buzzer_mode', buzzerMode);
|
||
localStorage.setItem('key_mappings', JSON.stringify(keyMappings));
|
||
}
|
||
|
||
window.onload = function() {
|
||
// Lade gespeicherte Werte
|
||
const savedCount = parseInt(localStorage.getItem('team_count')) || 2;
|
||
const savedNames = JSON.parse(localStorage.getItem('team_names') || '[]');
|
||
const savedMode = localStorage.getItem('buzzer_mode') || 'central';
|
||
const savedKeys = JSON.parse(localStorage.getItem('key_mappings') || '{"1":"Q","2":"W","3":"E","4":"R"}');
|
||
|
||
// Setze Team-Anzahl
|
||
setTeamCount(savedCount);
|
||
|
||
// Setze Team-Namen
|
||
savedNames.forEach((name, index) => {
|
||
if (index < 4) {
|
||
document.getElementById(`team${index + 1}`).value = name;
|
||
}
|
||
});
|
||
|
||
// Setze Buzzer-Modus
|
||
setBuzzerMode(savedMode);
|
||
|
||
// Setze Tasten
|
||
keyMappings = savedKeys;
|
||
for (let i = 1; i <= 4; i++) {
|
||
const keyInput = document.getElementById(`key${i}`);
|
||
if (keyInput) {
|
||
keyInput.value = keyMappings[i] || 'Q';
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="setup-container">
|
||
<h2>👥 Team Setup</h2>
|
||
|
||
<div class="team-count-section">
|
||
<div class="team-count-label">Wie viele Teams spielen mit?</div>
|
||
<div class="team-count-buttons">
|
||
<button class="count-btn active" id="count2" onclick="setTeamCount(2)">2 Teams</button>
|
||
<button class="count-btn" id="count3" onclick="setTeamCount(3)">3 Teams</button>
|
||
<button class="count-btn" id="count4" onclick="setTeamCount(4)">4 Teams</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="buzzer-mode-section">
|
||
<div class="mode-label">🎮 Buzzer-Modus</div>
|
||
<div class="mode-buttons">
|
||
<button class="mode-btn active" id="mode-central" onclick="setBuzzerMode('central')">
|
||
Zentraler Modus<br>
|
||
<span style="font-size:0.85em; font-weight:normal;">(Eine Taste für alle)</span>
|
||
</button>
|
||
<button class="mode-btn" id="mode-personal" onclick="setBuzzerMode('personal')">
|
||
Persönlicher Modus<br>
|
||
<span style="font-size:0.85em; font-weight:normal;">(Eigene Taste pro Spieler)</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="key-mapping-section" id="keyMappingSection">
|
||
<div class="info-text">Klicke auf ein Feld und drücke die gewünschte Taste</div>
|
||
|
||
<div class="key-input-group">
|
||
<div class="key-label">Team 1 Buzzer:</div>
|
||
<input type="text" class="key-input" id="key1" value="Q" readonly onclick="setKeyForPlayer(1)">
|
||
</div>
|
||
|
||
<div class="key-input-group">
|
||
<div class="key-label">Team 2 Buzzer:</div>
|
||
<input type="text" class="key-input" id="key2" value="W" readonly onclick="setKeyForPlayer(2)">
|
||
</div>
|
||
|
||
<div class="key-input-group">
|
||
<div class="key-label">Team 3 Buzzer:</div>
|
||
<input type="text" class="key-input disabled" id="key3" value="E" readonly onclick="setKeyForPlayer(3)" disabled>
|
||
</div>
|
||
|
||
<div class="key-input-group">
|
||
<div class="key-label">Team 4 Buzzer:</div>
|
||
<input type="text" class="key-input disabled" id="key4" value="R" readonly onclick="setKeyForPlayer(4)" disabled>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="teams-section">
|
||
<div class="team-input-group">
|
||
<label class="team-label" for="team1">Team 1</label>
|
||
<input type="text" class="team-input" id="team1" placeholder="Team 1 Name" value="Spieler 1">
|
||
</div>
|
||
|
||
<div class="team-input-group">
|
||
<label class="team-label" for="team2">Team 2</label>
|
||
<input type="text" class="team-input" id="team2" placeholder="Team 2 Name" value="Spieler 2">
|
||
</div>
|
||
|
||
<div class="team-input-group">
|
||
<label class="team-label" for="team3">Team 3</label>
|
||
<input type="text" class="team-input disabled" id="team3" placeholder="Team 3 Name" value="Spieler 3" disabled>
|
||
</div>
|
||
|
||
<div class="team-input-group">
|
||
<label class="team-label" for="team4">Team 4</label>
|
||
<input type="text" class="team-input disabled" id="team4" placeholder="Team 4 Name" value="Spieler 4" disabled>
|
||
</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
|
||
</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>
|