Christian Krakau-Louis
113 lines
7.4 KiB
HTML
113 lines
7.4 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Build Music Quiz - Quizzical Beats{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-6xl mx-auto px-4 py-8">
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-3xl md:text-4xl font-bold text-navy-800 font-montserrat mb-3">Create Your Music Quiz</h1>
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Choose your preferred method to generate the perfect music round for your trivia night.</p>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ url_for('generate.build_music_round') }}">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
|
|
<div class="mb-6 bg-white shadow-md rounded-lg p-6">
|
|
<h3 class="text-xl font-semibold text-navy-800 font-montserrat mb-4">Round Details</h3>
|
|
<div class="mb-4">
|
|
<label for="round_name" class="block text-gray-700 text-sm font-bold mb-2">Round Name (Optional)</label>
|
|
<input type="text" name="round_name" id="round_name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Enter a name for this round">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
|
<!-- Random Selection Card -->
|
|
<div class="bg-white shadow-md rounded-lg overflow-hidden border border-gray-200 transition-transform hover:transform hover:scale-[1.02]">
|
|
<div class="h-24 bg-gradient-to-r from-navy-700 to-navy-900 flex items-center justify-center text-white">
|
|
<i class="fas fa-random text-4xl"></i>
|
|
</div>
|
|
<div class="p-6">
|
|
<h5 class="text-xl font-semibold text-navy-800 font-montserrat mb-3">Random Selection</h5>
|
|
<p class="text-gray-600 mb-5 h-20">Create a music quiz with randomly selected songs from different artists and decades for a diverse challenge.</p>
|
|
<button type="submit" name="round_type" value="Random" class="bg-orange-500 hover:bg-orange-600 text-white py-3 px-4 rounded-md transition-colors w-full font-semibold">
|
|
<i class="fas fa-dice mr-2"></i> Generate Random Round
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Decade Card -->
|
|
<div class="bg-white shadow-md rounded-lg overflow-hidden border border-gray-200 transition-transform hover:transform hover:scale-[1.02]">
|
|
<div class="h-24 bg-gradient-to-r from-teal-500 to-teal-700 flex items-center justify-center text-white">
|
|
<i class="fas fa-calendar-alt text-4xl"></i>
|
|
</div>
|
|
<div class="p-6">
|
|
<h5 class="text-xl font-semibold text-navy-800 font-montserrat mb-3">By Decade</h5>
|
|
<p class="text-gray-600 mb-5 h-20">Create a themed music quiz with songs from a specific decade that has been used the least in your quizzes.</p>
|
|
<button type="submit" name="round_type" value="Decade" class="bg-orange-500 hover:bg-orange-600 text-white py-3 px-4 rounded-md transition-colors w-full font-semibold">
|
|
<i class="fas fa-hourglass-half mr-2"></i> Generate Decade Round
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Genre Card -->
|
|
<div class="bg-white shadow-md rounded-lg overflow-hidden border border-gray-200 transition-transform hover:transform hover:scale-[1.02]">
|
|
<div class="h-24 bg-gradient-to-r from-orange-500 to-orange-700 flex items-center justify-center text-white">
|
|
<i class="fas fa-guitar text-4xl"></i>
|
|
</div>
|
|
<div class="p-6">
|
|
<h5 class="text-xl font-semibold text-navy-800 font-montserrat mb-3">By Genre</h5>
|
|
<p class="text-gray-600 mb-5 h-20">Create a themed music quiz with songs from a specific genre that has been used the least in your quizzes.</p>
|
|
<button type="submit" name="round_type" value="Genre" class="bg-orange-500 hover:bg-orange-600 text-white py-3 px-4 rounded-md transition-colors w-full font-semibold">
|
|
<i class="fas fa-music mr-2"></i> Generate Genre Round
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tag Card -->
|
|
<div class="bg-white shadow-md rounded-lg overflow-hidden border border-gray-200 transition-transform hover:transform hover:scale-[1.02]">
|
|
<div class="h-24 bg-gradient-to-r from-purple-500 to-purple-700 flex items-center justify-center text-white">
|
|
<i class="fas fa-tags text-4xl"></i>
|
|
</div>
|
|
<div class="p-6">
|
|
<h5 class="text-xl font-semibold text-navy-800 font-montserrat mb-3">By Tag</h5>
|
|
<p class="text-gray-600 mb-3 h-20">Create a music quiz with songs that share a specific tag from your collection.</p>
|
|
<select name="tag_name" class="shadow border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline">
|
|
<option value="">Select a Tag</option>
|
|
{% for tag in tags %}
|
|
<option value="{{ tag }}">{{ tag }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button type="submit" name="round_type" value="Tag" class="bg-orange-500 hover:bg-orange-600 text-white py-3 px-4 rounded-md transition-colors w-full font-semibold">
|
|
<i class="fas fa-tag mr-2"></i> Generate Tag Round
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="mt-10 flex flex-col md:flex-row gap-6">
|
|
<div class="flex-1 bg-navy-50 rounded-lg p-6 border border-navy-100 text-center">
|
|
<h3 class="text-xl font-semibold text-navy-800 mb-2 font-montserrat">Need more songs?</h3>
|
|
<p class="text-gray-600 mb-4">Import more songs from Spotify or Deezer to create even better music quizzes.</p>
|
|
<div class="flex flex-wrap justify-center gap-4">
|
|
<a href="{{ url_for('core.search') }}" class="bg-[#1DB954] hover:bg-[#1AA346] text-white py-2 px-4 rounded-md transition-colors inline-flex items-center">
|
|
<i class="fab fa-spotify mr-2"></i> Import from Spotify
|
|
</a>
|
|
<a href="{{ url_for('deezer.deezer_search') }}" class="bg-[#a238ff] hover:bg-[#8a30d8] text-white py-2 px-4 rounded-md transition-colors inline-flex items-center">
|
|
<i class="fab fa-deezer mr-2"></i> Import from Deezer
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 bg-orange-50 rounded-lg p-6 border border-orange-100 text-center">
|
|
<h3 class="text-xl font-semibold text-navy-800 mb-2 font-montserrat">Import a Playlist</h3>
|
|
<p class="text-gray-600 mb-4">Quickly create a music quiz from an existing Spotify or Deezer playlist.</p>
|
|
<a href="{{ url_for('generate.import_playlist') }}" class="bg-orange-500 hover:bg-orange-600 text-white py-2 px-4 rounded-md transition-colors inline-flex items-center">
|
|
<i class="fas fa-cloud-download-alt mr-2"></i> Import from Playlist
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|