modified: app.py
new file: templates/quiz_base.html new file: templates/quiz_multiplayer.html new file: templates/quiz_single.html
This commit is contained in:
SimolZimol
67
templates/quiz_base.html
Normal file
67
templates/quiz_base.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{ translations['quiz_title'] }}</title>
|
||||
<script src="https://sdk.scdn.co/spotify-player.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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;
|
||||
justify-content: center;
|
||||
}
|
||||
.quiz-container {
|
||||
background: rgba(25, 20, 20, 0.92);
|
||||
padding: 40px 30px 30px 30px;
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 15px;
|
||||
margin: 5px;
|
||||
background-color: #1DB954;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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; }
|
||||
.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;
|
||||
}
|
||||
.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: 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; }
|
||||
</style>
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<div class="quiz-container">
|
||||
{% block quiz_content %}{% endblock %}
|
||||
</div>
|
||||
{% block extra_body %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
97
templates/quiz_multiplayer.html
Normal file
97
templates/quiz_multiplayer.html
Normal file
@@ -0,0 +1,97 @@
|
||||
{% extends "quiz_base.html" %}
|
||||
{% block quiz_content %}
|
||||
<div id="multiplayerBar" style="display:none;margin-bottom:15px;text-align:center;">
|
||||
<span id="multiplayerPlayers"></span>
|
||||
</div>
|
||||
<div style="text-align:center; margin-bottom: 10px;">
|
||||
<span id="progressInfo">{{ translations['songs_in_playlist'] }} {{ total_questions }}</span>
|
||||
</div>
|
||||
<div style="text-align:center; margin-bottom: 20px;">
|
||||
<a href="/reset_quiz/{{ playlist_id }}?local_multiplayer=1" class="btn btn-danger" style="margin-top:10px;">{{ translations['end_quiz'] }}</a>
|
||||
</div>
|
||||
<h2 id="question-text" style="color:#fff;">{{ translations['question_artist'] }}</h2>
|
||||
<input type="hidden" id="device_id" value="">
|
||||
<div class="game-modes" style="margin-bottom:20px;">
|
||||
<button class="btn {{ 'btn-success' if game_mode == 'artist' else 'btn-secondary' }}" onclick="switchGameMode('artist')">{{ translations['guess_artist'] }}</button>
|
||||
<button class="btn {{ 'btn-success' if game_mode == 'title' else 'btn-secondary' }}" onclick="switchGameMode('title')">{{ translations['guess_title'] }}</button>
|
||||
<button class="btn {{ 'btn-success' if game_mode == 'year' else 'btn-secondary' }}" onclick="switchGameMode('year')">{{ translations['guess_year'] }}</button>
|
||||
</div>
|
||||
<div class="game-options" style="margin-bottom:20px;">
|
||||
<label>{{ translations['play_duration'] }}:
|
||||
<select id="playDuration" onchange="onPlayDurationChange()">
|
||||
<option value="10">10s</option>
|
||||
<option value="15">15s</option>
|
||||
<option value="30">30s</option>
|
||||
<option value="0" selected>{{ translations['unlimited'] }}</option>
|
||||
<option value="custom">{{ translations['custom'] }}</option>
|
||||
</select>
|
||||
<input type="number" id="customDuration" min="1" max="600" style="width:60px;display:none;" placeholder="Sek." onchange="setOption('playDuration', this.value)">
|
||||
<span id="customDurationLabel" style="display:none;">s</span>
|
||||
</label>
|
||||
<label style="margin-left:20px;">{{ translations['start_position'] }}:
|
||||
<select id="startPosition" onchange="setOption('startPosition', this.value)">
|
||||
<option value="start" selected>{{ translations['start'] }}</option>
|
||||
<option value="random">{{ translations['random'] }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="controls" style="text-align: center; margin-bottom:20px;">
|
||||
<button id="replayBtn" class="btn" onclick="replayDuration()">{{ translations['play_duration'] }} +</button>
|
||||
</div>
|
||||
<div style="text-align: center; margin-top: 10px;">
|
||||
<input type="text" id="answerInput" placeholder="{{ translations['input_artist'] }}" oninput="searchTracks()" style="background:#222; color:#fff;">
|
||||
<button class="btn" onclick="checkAnswer()">{{ translations['answer_button'] }}</button>
|
||||
<div id="searchResults" class="search-results"></div>
|
||||
<div id="resultContainer" class="result-container" style="background:#222; color:#fff; border:1px solid #444;"></div>
|
||||
<a id="nextQuestionBtn" href="/quiz/{{ playlist_id }}?mode={{ game_mode }}&local_multiplayer=1" class="btn" style="display: none;">{{ translations['next_question'] }}</a>
|
||||
</div>
|
||||
<div class="hint-container" style="color:#bdbdbd;">
|
||||
{% if game_mode == 'artist' %}
|
||||
<p>{{ translations['tip_artist'] }}</p>
|
||||
{% elif game_mode == 'title' %}
|
||||
<p>{{ translations['tip_title'] }}</p>
|
||||
{% elif game_mode == 'year' %}
|
||||
<p>{{ translations['tip_year'] }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block extra_body %}
|
||||
{% raw %}
|
||||
{% if request.args.get('local_multiplayer') %}
|
||||
<div id="multiplayerPopup" style="position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:2000;">
|
||||
<div style="background:#191414;padding:30px 40px;border-radius:18px;box-shadow:0 8px 32px 0 rgba(0,0,0,0.37);min-width:320px;text-align:center;">
|
||||
<h3>Lokaler Multiplayer</h3>
|
||||
<p>Gib bis zu 4 Spielernamen ein:</p>
|
||||
<form id="multiplayerForm" onsubmit="startMultiplayer(event)">
|
||||
<input type="text" id="player1" placeholder="Spieler 1" required style="margin:5px;width:80%"><br>
|
||||
<input type="text" id="player2" placeholder="Spieler 2" style="margin:5px;width:80%"><br>
|
||||
<input type="text" id="player3" placeholder="Spieler 3" style="margin:5px;width:80%"><br>
|
||||
<input type="text" id="player4" placeholder="Spieler 4" style="margin:5px;width:80%"><br>
|
||||
<button class="btn" type="submit" style="margin-top:10px;">Starten</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function startMultiplayer(e) {
|
||||
e.preventDefault();
|
||||
const names = [];
|
||||
for(let i=1;i<=4;i++) {
|
||||
const val = document.getElementById('player'+i).value.trim();
|
||||
if(val) names.push(val);
|
||||
}
|
||||
if(names.length < 2) {
|
||||
alert("Bitte mindestens 2 Namen eingeben!");
|
||||
return;
|
||||
}
|
||||
localStorage.setItem('quizify_multiplayer_names', JSON.stringify(names));
|
||||
localStorage.setItem('quizify_multiplayer_scores', JSON.stringify(Array(names.length).fill(0)));
|
||||
localStorage.setItem('quizify_multiplayer_current', 0);
|
||||
document.getElementById('multiplayerPopup').style.display = 'none';
|
||||
updateMultiplayerUI();
|
||||
quizifyReady();
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
<!-- Hier dein gesamtes Multiplayer-JS aus quiz.html -->
|
||||
{% endblock %}
|
||||
67
templates/quiz_single.html
Normal file
67
templates/quiz_single.html
Normal file
@@ -0,0 +1,67 @@
|
||||
{% extends "quiz_base.html" %}
|
||||
{% block quiz_content %}
|
||||
<div style="text-align:center; margin-bottom: 10px;">
|
||||
<span id="progressInfo">{{ translations['songs_in_playlist'] }} {{ total_questions }}</span>
|
||||
<span id="scoreInfo" style="margin-left:20px;">
|
||||
{{ translations['score'] }}: {{ score }} / {{ answered if answered > 0 else 1 }}
|
||||
({{ ((score / (answered if answered > 0 else 1)) * 100) | round(0) if answered > 0 else 0 }}{{ translations['percent'] }})
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align:center; margin-bottom: 20px;">
|
||||
<a href="/reset_quiz/{{ playlist_id }}" class="btn btn-danger" style="margin-top:10px;">{{ translations['end_quiz'] }}</a>
|
||||
</div>
|
||||
<h2 id="question-text" style="color:#fff;">{{ translations['question_artist'] }}</h2>
|
||||
<input type="hidden" id="device_id" value="">
|
||||
<div class="game-modes" style="margin-bottom:20px;">
|
||||
<button class="btn {{ 'btn-success' if game_mode == 'artist' else 'btn-secondary' }}" onclick="switchGameMode('artist')">{{ translations['guess_artist'] }}</button>
|
||||
<button class="btn {{ 'btn-success' if game_mode == 'title' else 'btn-secondary' }}" onclick="switchGameMode('title')">{{ translations['guess_title'] }}</button>
|
||||
<button class="btn {{ 'btn-success' if game_mode == 'year' else 'btn-secondary' }}" onclick="switchGameMode('year')">{{ translations['guess_year'] }}</button>
|
||||
</div>
|
||||
<div class="game-options" style="margin-bottom:20px;">
|
||||
<label>{{ translations['play_duration'] }}:
|
||||
<select id="playDuration" onchange="onPlayDurationChange()">
|
||||
<option value="10">10s</option>
|
||||
<option value="15">15s</option>
|
||||
<option value="30">30s</option>
|
||||
<option value="0" selected>{{ translations['unlimited'] }}</option>
|
||||
<option value="custom">{{ translations['custom'] }}</option>
|
||||
</select>
|
||||
<input type="number" id="customDuration" min="1" max="600" style="width:60px;display:none;" placeholder="Sek." onchange="setOption('playDuration', this.value)">
|
||||
<span id="customDurationLabel" style="display:none;">s</span>
|
||||
</label>
|
||||
<label style="margin-left:20px;">{{ translations['start_position'] }}:
|
||||
<select id="startPosition" onchange="setOption('startPosition', this.value)">
|
||||
<option value="start" selected>{{ translations['start'] }}</option>
|
||||
<option value="random">{{ translations['random'] }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="controls" style="text-align: center; margin-bottom:20px;">
|
||||
<button id="replayBtn" class="btn" onclick="replayDuration()">{{ translations['play_duration'] }} +</button>
|
||||
</div>
|
||||
<div style="text-align: center; margin-top: 10px;">
|
||||
<input type="text" id="answerInput" placeholder="{{ translations['input_artist'] }}" oninput="searchTracks()" style="background:#222; color:#fff;">
|
||||
<button class="btn" onclick="checkAnswer()">{{ translations['answer_button'] }}</button>
|
||||
<div id="searchResults" class="search-results"></div>
|
||||
<div id="resultContainer" class="result-container" style="background:#222; color:#fff; border:1px solid #444;"></div>
|
||||
<a id="nextQuestionBtn" href="/quiz/{{ playlist_id }}?mode={{ game_mode }}" class="btn" style="display: none;">{{ translations['next_question'] }}</a>
|
||||
</div>
|
||||
<div class="hint-container" style="color:#bdbdbd;">
|
||||
{% if game_mode == 'artist' %}
|
||||
<p>{{ translations['tip_artist'] }}</p>
|
||||
{% elif game_mode == 'title' %}
|
||||
<p>{{ translations['tip_title'] }}</p>
|
||||
{% elif game_mode == 'year' %}
|
||||
<p>{{ translations['tip_year'] }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block extra_body %}
|
||||
<script>
|
||||
// Entferne Multiplayer-Daten, falls vorhanden
|
||||
localStorage.removeItem('quizify_multiplayer_names');
|
||||
localStorage.removeItem('quizify_multiplayer_scores');
|
||||
localStorage.removeItem('quizify_multiplayer_current');
|
||||
</script>
|
||||
<!-- Hier dein gesamtes JS aus quiz.html, aber OHNE Multiplayer-Logik -->
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user