gitea-admin/gh-christianlouis-quizzicalbeats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial clean commit

Browse Source
This commit is contained in:
Christian Krakau-Louis
2025-05-13 08:59:02 +00:00
commit 03b982e7c2
113 changed files with 22973 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
musicround/templates/import_playlist.html
+132
View File
@@ -0,0 +1,132 @@
{% extends 'base.html' %}
{% block title %}Import Playlist - 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">Import Playlist</h1>
<p class="text-gray-600">Create a music quiz round from a Spotify or Deezer playlist.</p>
</div>
<div class="bg-white shadow-md rounded-lg p-6">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="mb-4 p-4 border-l-4 {% if category == 'error' %}border-red-500 bg-red-50 text-red-700{% else %}border-green-500 bg-green-50 text-green-700{% endif %}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<form method="POST" action="{{ url_for('generate.import_playlist') }}" id="importPlaylistForm">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="round_name">
Round Name (optional)
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="round_name" name="round_name" type="text" placeholder="Enter a name for this round">
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="platform">
Platform
</label>
<div class="flex space-x-4">
<label class="inline-flex items-center">
<input type="radio" class="form-radio" name="platform" value="spotify" checked>
<span class="ml-2">Spotify</span>
</label>
<label class="inline-flex items-center">
<input type="radio" class="form-radio" name="platform" value="deezer">
<span class="ml-2">Deezer</span>
</label>
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="playlist_url">
Playlist URL or ID
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="playlist_url" name="playlist_url" type="text" placeholder="Enter Spotify or Deezer playlist URL">
<p class="text-gray-600 text-xs italic mt-1">Example: https://open.spotify.com/playlist/37i9dQZF1DX0XUsuxWHRQd or https://www.deezer.com/en/playlist/1111111</p>
</div>
<div class="flex items-center justify-between">
<button class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition-colors"
type="submit" id="importButton">
<i class="fas fa-cloud-download-alt mr-2"></i>Import Playlist
</button>
<a class="inline-block align-baseline font-bold text-sm text-navy-700 hover:text-navy-800"
href="{{ url_for('generate.build_music_round') }}">
<i class="fas fa-arrow-left mr-1"></i>Back to Quiz Builder
</a>
</div>
</form>
</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">Import Tips</h3>
<ul class="list-disc pl-5 space-y-2 text-gray-700">
<li>Make sure your playlist is public or at least accessible via link</li>
<li>Only the first 8 songs from the playlist will be imported for the quiz</li>
<li>Preview URLs might not be available for all songs</li>
<li>Songs will be saved in our database for future use</li>
</ul>
</div>
</div>
<!-- Loading Modal -->
<div id="loadingModal" class="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50 hidden">
<div class="bg-white p-8 rounded-lg shadow-lg text-center max-w-md w-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-orange-500 mx-auto mb-4"></div>
<h3 class="text-xl font-bold text-navy-800 mb-2">Importing Playlist...</h3>
<p class="text-gray-600 mb-4">This might take a moment as we fetch and process each song.</p>
<div class="text-sm text-gray-500">
<p>We're working on:</p>
<ul id="importSteps" class="mt-2 space-y-2 text-left px-4">
<li><i class="fas fa-check-circle text-green-500 hidden step-complete"></i> <i class="fas fa-spinner fa-spin text-orange-500 step-in-progress"></i> <span class="ml-2">Fetching playlist data</span></li>
<li><i class="fas fa-check-circle text-green-500 hidden step-complete"></i> <i class="fas fa-spinner fa-spin text-orange-500 hidden step-in-progress"></i> <span class="ml-2">Importing songs to database</span></li>
<li><i class="fas fa-check-circle text-green-500 hidden step-complete"></i> <i class="fas fa-spinner fa-spin text-orange-500 hidden step-in-progress"></i> <span class="ml-2">Creating quiz round</span></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('importPlaylistForm');
const loadingModal = document.getElementById('loadingModal');
const importSteps = document.querySelectorAll('#importSteps li');
form.addEventListener('submit', function(e) {
// Show loading modal when form is submitted
loadingModal.classList.remove('hidden');
// Simulate progress updates (since we can't track actual backend progress)
setTimeout(() => {
// Mark first step as complete and start second step
importSteps[0].querySelector('.step-in-progress').classList.add('hidden');
importSteps[0].querySelector('.step-complete').classList.remove('hidden');
importSteps[1].querySelector('.step-in-progress').classList.remove('hidden');
}, 2000);
setTimeout(() => {
// Mark second step as complete and start third step
importSteps[1].querySelector('.step-in-progress').classList.add('hidden');
importSteps[1].querySelector('.step-complete').classList.remove('hidden');
importSteps[2].querySelector('.step-in-progress').classList.remove('hidden');
}, 4000);
// Let the form submission continue
return true;
});
});
</script>
{% endblock %}