Add comprehensive comments to all source files and expand documentation
This commit is contained in:
parent
9e532a1920
commit
b4f0222bd5
16 changed files with 1230 additions and 552 deletions
|
|
@ -1,68 +1,125 @@
|
|||
<!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>
|
||||
<style>
|
||||
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#111827;color:#f3f4f6;margin:0;padding:1rem;line-height:1.5}
|
||||
.container{max-width:640px;margin:0 auto;background:#1f2937;padding:1.5rem;border-radius:1rem}
|
||||
h1{color:#60a5fa}
|
||||
.player{background:#111827;padding:1rem;border-radius:.5rem;margin:1rem 0}
|
||||
audio{width:100%;margin-top:.5rem}
|
||||
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
|
||||
button{flex:1;min-width:120px;padding:.8rem;border:none;border-radius:.5rem;background:#3b82f6;color:#fff;font-weight:700;cursor:pointer}
|
||||
button.selected{background:#10b981}
|
||||
button.both{background:#8b5cf6}
|
||||
button.revision{background:#f59e0b;color:#000}
|
||||
form{margin-top:1rem}
|
||||
textarea{width:100%;padding:.6rem;border-radius:.5rem;border:1px solid #374151;background:#111827;color:#f3f4f6;box-sizing:border-box;min-height:80px}
|
||||
.status{padding:.8rem;background:#064e3b;border-radius:.5rem;margin-top:1rem}
|
||||
.status.waiting{background:#3f3f46}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Your Theme Song</title>
|
||||
<style>
|
||||
/*
|
||||
Private customer player page.
|
||||
Shows two audio players for Version A and Version B,
|
||||
plus approval buttons and a revision note form.
|
||||
*/
|
||||
body{
|
||||
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
|
||||
background:#111827;
|
||||
color:#f3f4f6;
|
||||
margin:0;
|
||||
padding:1rem;
|
||||
line-height:1.5;
|
||||
}
|
||||
.container{
|
||||
max-width:640px;
|
||||
margin:0 auto;
|
||||
background:#1f2937;
|
||||
padding:1.5rem;
|
||||
border-radius:1rem;
|
||||
}
|
||||
h1{color:#60a5fa;}
|
||||
.player{
|
||||
background:#111827;
|
||||
padding:1rem;
|
||||
border-radius:.5rem;
|
||||
margin:1rem 0;
|
||||
}
|
||||
audio{width:100%;margin-top:.5rem;}
|
||||
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;}
|
||||
button{
|
||||
flex:1;
|
||||
min-width:120px;
|
||||
padding:.8rem;
|
||||
border:none;
|
||||
border-radius:.5rem;
|
||||
background:#3b82f6;
|
||||
color:#fff;
|
||||
font-weight:700;
|
||||
cursor:pointer;
|
||||
}
|
||||
button.selected{background:#10b981;}
|
||||
button.both{background:#8b5cf6;}
|
||||
button.revision{background:#f59e0b;color:#000;}
|
||||
form{margin-top:1rem;}
|
||||
textarea{
|
||||
width:100%;
|
||||
padding:.6rem;
|
||||
border-radius:.5rem;
|
||||
border:1px solid #374151;
|
||||
background:#111827;
|
||||
color:#f3f4f6;
|
||||
box-sizing:border-box;
|
||||
min-height:80px;
|
||||
}
|
||||
.status{
|
||||
padding:.8rem;
|
||||
background:#064e3b;
|
||||
border-radius:.5rem;
|
||||
margin-top:1rem;
|
||||
}
|
||||
.status.waiting{background:#3f3f46;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎧 Your Custom Theme Song</h1>
|
||||
<p>Hi {{ req.name }}! Listen to both versions and pick the one you want.</p>
|
||||
<div class="container">
|
||||
<h1>🎧 Your Custom Theme Song</h1>
|
||||
<p>Hi {{ req.name }}! Listen to both versions and pick the one you want.</p>
|
||||
|
||||
<div class="player">
|
||||
<h3>Version A</h3>
|
||||
<audio controls src="{{ url_for('audio', token=req.player_token, version='a') }}"></audio>
|
||||
</div>
|
||||
<!-- Version A player -->
|
||||
<div class="player">
|
||||
<h3>Version A</h3>
|
||||
<audio controls src="{{ url_for('audio', token=req.player_token, version='a') }}"></audio>
|
||||
</div>
|
||||
|
||||
<div class="player">
|
||||
<h3>Version B</h3>
|
||||
<audio controls src="{{ url_for('audio', token=req.player_token, version='b') }}"></audio>
|
||||
</div>
|
||||
<!-- Version B player -->
|
||||
<div class="player">
|
||||
<h3>Version B</h3>
|
||||
<audio controls src="{{ url_for('audio', token=req.player_token, version='b') }}"></audio>
|
||||
</div>
|
||||
|
||||
{% if req.status in ['songs_uploaded','awaiting_payment','paid','delivered'] %}
|
||||
<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="{% if req.customer_approved == 'a' %}selected{% endif %}" onclick="document.getElementById('choice').value='a'">I want Version A</button>
|
||||
<button type="submit" class="{% if req.customer_approved == 'b' %}selected{% endif %}" onclick="document.getElementById('choice').value='b'">I want Version B</button>
|
||||
<button type="submit" class="both {% if req.customer_approved == 'both' %}selected{% endif %}" onclick="document.getElementById('choice').value='both'">I want both</button>
|
||||
</div>
|
||||
</form>
|
||||
{% if req.status in ['songs_uploaded','awaiting_payment','paid','delivered'] %}
|
||||
<!-- Approval form: customer picks A, B, or both -->
|
||||
<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="{% if req.customer_approved == 'a' %}selected{% endif %}" onclick="document.getElementById('choice').value='a'">I want Version A</button>
|
||||
<button type="submit" class="{% if req.customer_approved == 'b' %}selected{% endif %}" onclick="document.getElementById('choice').value='b'">I want Version B</button>
|
||||
<button type="submit" class="both {% if req.customer_approved == 'both' %}selected{% endif %}" onclick="document.getElementById('choice').value='both'">I want both</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form method="POST" action="{{ url_for('revise', token=req.player_token) }}">
|
||||
<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="revision">Request Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
<!-- Revision form: customer asks for changes -->
|
||||
<form method="POST" action="{{ url_for('revise', token=req.player_token) }}">
|
||||
<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="revision">Request Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
{% if req.status == 'awaiting_payment' %}
|
||||
<div class="status waiting"><strong>Thanks for choosing {{ req.customer_approved.upper() }}!</strong> Please head to the booth to finalize payment and collect your files.</div>
|
||||
{% endif %}
|
||||
{% if req.status == 'awaiting_payment' %}
|
||||
<!-- Shown after customer approves a version -->
|
||||
<div class="status waiting">
|
||||
<strong>Thanks for choosing {{ req.customer_approved.upper() }}!</strong> Please head to the booth to finalize payment and collect your files.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if req.status == 'delivered' %}
|
||||
<div class="status"><strong>Delivered! ✅</strong> Check your email for the MP3 attachment(s).</div>
|
||||
{% endif %}
|
||||
{% if req.status == 'delivered' %}
|
||||
<!-- Shown after operator marks paid and delivers -->
|
||||
<div class="status">
|
||||
<strong>Delivered! ✅</strong> Check your email for the MP3 attachment(s).
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Reference in a new issue