Christian Krakau-Louis
90 lines
4.9 KiB
HTML
90 lines
4.9 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Music Quizzes - Quizzical Beats{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-7xl mx-auto px-4 py-8">
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-navy-800 font-montserrat mb-2">Your Music Quizzes</h1>
|
|
<p class="text-gray-600">Browse and manage all your created music quizzes.</p>
|
|
</div>
|
|
|
|
<div class="bg-white shadow-md rounded-lg overflow-hidden">
|
|
<div class="p-4 bg-navy-50 border-b">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="text-xl font-semibold text-navy-800">Saved Quizzes</h2>
|
|
<a href="{{ url_for('generate.build_music_round') }}" class="bg-orange-500 hover:bg-orange-600 text-white py-2 px-4 rounded-md transition-colors text-sm font-semibold">
|
|
<i class="fas fa-plus mr-1"></i> Create New Quiz
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full table-auto">
|
|
<thead class="bg-gray-100 text-gray-700">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left font-semibold">ID</th>
|
|
<th class="px-4 py-3 text-left font-semibold">Name</th>
|
|
<th class="px-4 py-3 text-left font-semibold">Type</th>
|
|
<th class="px-4 py-3 text-left font-semibold">Criteria</th>
|
|
<th class="px-4 py-3 text-left font-semibold">Created</th>
|
|
<th class="px-4 py-3 text-left font-semibold">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
{% for round in rounds %}
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3">{{ round.id }}</td>
|
|
<td class="px-4 py-3 font-medium">{{ round.name or 'Quiz #' + round.id|string }}</td>
|
|
<td class="px-4 py-3">
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full
|
|
{% if round.round_type == 'Random' %}bg-navy-100 text-navy-800
|
|
{% elif round.round_type == 'Decade' %}bg-teal-100 text-teal-800
|
|
{% elif round.round_type == 'Genre' %}bg-orange-100 text-orange-800
|
|
{% elif round.round_type == 'Tag' %}bg-purple-100 text-purple-800
|
|
{% else %}bg-gray-100 text-gray-800{% endif %}">
|
|
{{ round.round_type }}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3">{{ round.round_criteria_used }}</td>
|
|
<td class="px-4 py-3 text-gray-600 text-sm">{{ round.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
|
|
<td class="px-4 py-3">
|
|
<a href="{{ url_for('rounds.round_detail', round_id=round.id) }}"
|
|
class="bg-teal-500 hover:bg-teal-600 text-white py-1.5 px-3 rounded text-sm transition-colors">
|
|
<i class="fas fa-eye mr-1"></i> View
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="6" class="px-4 py-8 text-center text-gray-500">
|
|
<p class="mb-3">You haven't created any music quizzes yet.</p>
|
|
<a href="{{ url_for('generate.build_music_round') }}" class="inline-block bg-orange-500 hover:bg-orange-600 text-white py-2 px-4 rounded transition-colors text-sm">
|
|
<i class="fas fa-plus-circle mr-1"></i> Create Your First Quiz
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 bg-navy-50 rounded-lg p-6 border border-navy-100">
|
|
<h3 class="text-xl font-semibold text-navy-800 mb-3 font-montserrat">Quiz Tips</h3>
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700">
|
|
<li>Export your quizzes to PDF for easy printing of answer sheets</li>
|
|
<li>Generate MP3s to play your music round with consistent timing</li>
|
|
<li>Mix different decades and genres for a balanced challenge</li>
|
|
<li>Keep track of which rounds you've used to avoid repeating songs</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mt-4 flex gap-4 justify-center">
|
|
<a href="{{ url_for('generate.import_playlist') }}" class="inline-block bg-orange-500 hover:bg-orange-600 text-white py-2 px-4 rounded-md transition-colors text-sm font-semibold">
|
|
<i class="fas fa-cloud-download-alt mr-1"></i> Import Playlist
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|