122 lines
5 KiB
HTML
122 lines
5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Your Theme Song</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@500;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/booth.css') }}">
|
|
<style>
|
|
.verse + .verse { margin-top: var(--space-5); }
|
|
</style>
|
|
</head>
|
|
<body class="booth-page">
|
|
<div class="container">
|
|
<h1>Your Custom Theme Song</h1>
|
|
<p>Hi {{ req.name }}! Listen to both versions and pick the one you want.</p>
|
|
|
|
{% if req.suno_lyrics %}
|
|
<div class="lyrics">
|
|
<h2>Song Lyrics</h2>
|
|
{% set current_verse = namespace(lines=[]) %}
|
|
{% for line in req.suno_lyrics.splitlines() %}
|
|
{% set line = line.strip() %}
|
|
{% if line and not (line.startswith('[') and line.endswith(']')) %}
|
|
{% set _ = current_verse.lines.append(line) %}
|
|
{% elif not line and current_verse.lines %}
|
|
<div class="verse">
|
|
{% for l in current_verse.lines %}
|
|
<span class="lyric-line">{{ l }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% set current_verse.lines = [] %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if current_verse.lines %}
|
|
<div class="verse">
|
|
{% for l in current_verse.lines %}
|
|
<span class="lyric-line">{{ l }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if req.album_cover_url and deliver_album_cover %}
|
|
<div class="text-center mt-4 mb-4">
|
|
<img src="{{ req.album_cover_url }}" alt="Album cover" style="max-width:160px;border-radius:var(--radius-md)">
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="player">
|
|
<h3>Version A</h3>
|
|
<audio controls controlsList="nodownload" id="player-a"></audio>
|
|
</div>
|
|
|
|
<div class="player">
|
|
<h3>Version B</h3>
|
|
<audio controls controlsList="nodownload" id="player-b"></audio>
|
|
</div>
|
|
|
|
<script>
|
|
(function(){
|
|
document.getElementById('player-a').src = "{{ url_for('stream_audio', token=req.player_token, version='a') }}";
|
|
document.getElementById('player-b').src = "{{ url_for('stream_audio', token=req.player_token, version='b') }}";
|
|
})();
|
|
</script>
|
|
|
|
{% if req.status == 'revisions_requested' %}
|
|
<div class="locked waiting">
|
|
<h2>Revision Requested</h2>
|
|
<p>You asked for changes. We will generate a new version and update this page.</p>
|
|
<p><strong>Your note:</strong> {{ req.revision_note }}</p>
|
|
</div>
|
|
|
|
{% elif req.status in ['awaiting_payment','paid','delivered'] %}
|
|
<div class="locked">
|
|
<h2>Choice Received</h2>
|
|
<p>You selected: <strong>{% if req.customer_approved == 'both' %}Both Versions{% else %}Version {{ (req.customer_approved or 'none').upper() }}{% endif %}</strong></p>
|
|
{% if req.status == 'awaiting_payment' %}
|
|
<p>Please return to the booth to finalize payment and collect your files.</p>
|
|
{% elif req.status == 'paid' %}
|
|
<p>Payment recorded. Your files are being prepared.</p>
|
|
{% elif req.status == 'delivered' %}
|
|
<p>Delivered! Check your email for the MP3 attachment(s).</p>
|
|
{% if req.stems_link %}
|
|
<p class="mt-4">
|
|
<a href="{{ req.stems_link }}" target="_blank" rel="noopener noreferrer" class="button">Download stems / extras</a>
|
|
</p>
|
|
<p class="text-muted" style="font-size:0.9rem">This link expires 3 months after delivery. Download soon.</p>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% else %}
|
|
<form method="POST" action="{{ url_for('approve', token=req.player_token) }}">
|
|
<input type="hidden" name="choice" id="choice">
|
|
<div class="actions">
|
|
<button type="submit" class="button-secondary" onclick="document.getElementById('choice').value='a'">I want Version A</button>
|
|
<button type="submit" class="button-secondary" onclick="document.getElementById('choice').value='b'">I want Version B</button>
|
|
<button type="submit" onclick="document.getElementById('choice').value='both'">I want both</button>
|
|
</div>
|
|
</form>
|
|
|
|
{% if revisions_left > 0 %}
|
|
<form method="POST" action="{{ url_for('revise', token=req.player_token) }}">
|
|
<p class="text-accent" style="font-weight:600">Revisions remaining: {{ revisions_left }}</p>
|
|
<label for="revision_note">Or ask for changes:</label>
|
|
<textarea id="revision_note" name="revision_note" placeholder="e.g. make the chorus louder, swap a lyric..."></textarea>
|
|
<div class="actions">
|
|
<button type="submit" class="button-secondary">Request Changes</button>
|
|
</div>
|
|
</form>
|
|
{% else %}
|
|
<p class="text-danger" style="margin-top:var(--space-4);font-weight:600">No revisions remaining. Please speak to the booth operator if you need further changes.</p>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|