Apply shared design system to remaining public pages (closed/status/faq/thanks)
This commit is contained in:
Troll (Hermes Agent)
parent
cc27c5db48
commit
f3b5bc637b
4 changed files with 40 additions and 261 deletions
|
|
@ -4,43 +4,16 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Trollgorithm Theme Song Booth — Closed</title>
|
||||
<style>
|
||||
/*
|
||||
Closed booth page.
|
||||
Friendly message shown when the booth is temporarily not taking requests.
|
||||
*/
|
||||
*{box-sizing:border-box;}
|
||||
body{
|
||||
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
|
||||
background:linear-gradient(135deg,#111827 0%,#1e3a8a 50%,#111827 100%);
|
||||
color:#f3f4f6;
|
||||
margin:0;
|
||||
padding:1rem;
|
||||
line-height:1.6;
|
||||
min-height:100vh;
|
||||
}
|
||||
.container{max-width:680px;margin:0 auto;text-align:center;}
|
||||
.banner{
|
||||
width:100%;
|
||||
border-radius:1rem;
|
||||
box-shadow:0 10px 40px rgba(0,0,0,.4);
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
.card{
|
||||
background:rgba(31,41,55,.9);
|
||||
padding:1.5rem;
|
||||
border-radius:1rem;
|
||||
box-shadow:0 10px 25px rgba(0,0,0,.3);
|
||||
border:1px solid rgba(96,165,250,.2);
|
||||
}
|
||||
h1{margin-top:0;color:#60a5fa;font-size:1.7rem;}
|
||||
p{font-size:1.1rem;color:#d1d5db;}
|
||||
</style>
|
||||
<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') }}">
|
||||
</head>
|
||||
<body>
|
||||
<body class="booth-page">
|
||||
<div class="container">
|
||||
<img src="{{ url_for('static', filename='Booth_closed.png') }}" alt="Trollgorithm booth is closed" class="banner">
|
||||
<div class="card">
|
||||
<img src="{{ url_for('static', filename='Booth_closed.png') }}" alt="Trollgorithm booth is closed" class="hero-banner">
|
||||
|
||||
<div class="card text-center">
|
||||
<h1>Trollgorithm and the goblin engineers are on a break.</h1>
|
||||
<p>Please come back in a while and they should be back to work!</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,58 +4,15 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>FAQ — Trollgorithm Theme Song Booth</title>
|
||||
<style>
|
||||
/*
|
||||
Customer FAQ page.
|
||||
Simple, readable dark layout matching the request page style.
|
||||
*/
|
||||
*{box-sizing:border-box;}
|
||||
body{
|
||||
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
|
||||
background:linear-gradient(135deg,#111827 0%,#1e3a8a 50%,#111827 100%);
|
||||
color:#f3f4f6;
|
||||
margin:0;
|
||||
padding:1rem;
|
||||
line-height:1.6;
|
||||
min-height:100vh;
|
||||
}
|
||||
.container{max-width:760px;margin:0 auto;}
|
||||
.card{
|
||||
background:rgba(31,41,55,.95);
|
||||
padding:1.5rem;
|
||||
border-radius:1rem;
|
||||
box-shadow:0 10px 25px rgba(0,0,0,.3);
|
||||
border:1px solid rgba(96,165,250,.2);
|
||||
}
|
||||
h1{
|
||||
margin-top:0;
|
||||
color:#60a5fa;
|
||||
text-align:center;
|
||||
font-size:1.9rem;
|
||||
}
|
||||
h2{
|
||||
color:#93c5fd;
|
||||
margin-top:2rem;
|
||||
font-size:1.25rem;
|
||||
border-bottom:1px solid #374151;
|
||||
padding-bottom:.4rem;
|
||||
}
|
||||
h2:first-of-type{margin-top:0;}
|
||||
p{margin:.6rem 0;}
|
||||
strong{color:#fbbf24;}
|
||||
a{color:#93c5fd;text-decoration:none;}
|
||||
a:hover{text-decoration:underline;}
|
||||
.back{
|
||||
display:block;
|
||||
text-align:center;
|
||||
margin-top:1.5rem;
|
||||
}
|
||||
</style>
|
||||
<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') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<body class="booth-page">
|
||||
<div class="container container-reading">
|
||||
<div class="card">
|
||||
<h1>❓ Frequently Asked Questions</h1>
|
||||
<h1 class="text-center">Frequently Asked Questions</h1>
|
||||
|
||||
<h2>The basics</h2>
|
||||
<p><strong>What is the Trollgorithm Song Booth?</strong></p>
|
||||
|
|
@ -168,7 +125,7 @@
|
|||
<p><strong>Who do I talk to for help?</strong></p>
|
||||
<p>The booth operator is your best point of contact for any questions or issues.</p>
|
||||
|
||||
<a class="back" href="{{ url_for('request_form') }}" target="_blank" rel="noopener noreferrer">← Back to the request form</a>
|
||||
<a class="back-link text-center" href="{{ url_for('request_form') }}" target="_blank" rel="noopener noreferrer">← Back to the request form</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -4,147 +4,18 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Check Your Order Status — Trollgorithm Theme Song Booth</title>
|
||||
<style>
|
||||
/*
|
||||
Public order status lookup page.
|
||||
Customers enter their email to see request status, approval choice,
|
||||
and the private player link once two songs have been uploaded.
|
||||
*/
|
||||
*{box-sizing:border-box;}
|
||||
body{
|
||||
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
|
||||
background:linear-gradient(135deg,#111827 0%,#1e3a8a 50%,#111827 100%);
|
||||
color:#f3f4f6;
|
||||
margin:0;
|
||||
padding:1rem;
|
||||
line-height:1.5;
|
||||
min-height:100vh;
|
||||
}
|
||||
.container{max-width:680px;margin:0 auto;}
|
||||
.banner{
|
||||
width:100%;
|
||||
border-radius:1rem;
|
||||
box-shadow:0 10px 40px rgba(0,0,0,.4);
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
.card{
|
||||
background:rgba(31,41,55,.9);
|
||||
padding:1.5rem;
|
||||
border-radius:1rem;
|
||||
box-shadow:0 10px 25px rgba(0,0,0,.3);
|
||||
border:1px solid rgba(96,165,250,.2);
|
||||
}
|
||||
h1{
|
||||
margin-top:0;
|
||||
color:#60a5fa;
|
||||
text-align:center;
|
||||
font-size:1.7rem;
|
||||
}
|
||||
.subtitle{
|
||||
text-align:center;
|
||||
color:#9ca3af;
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
label{
|
||||
display:block;
|
||||
margin-top:1rem;
|
||||
font-weight:600;
|
||||
color:#93c5fd;
|
||||
}
|
||||
input{
|
||||
width:100%;
|
||||
padding:.7rem;
|
||||
border-radius:.5rem;
|
||||
border:1px solid #374151;
|
||||
background:#111827;
|
||||
color:#f3f4f6;
|
||||
font:inherit;
|
||||
margin-top:.25rem;
|
||||
}
|
||||
input:focus{
|
||||
outline:none;
|
||||
border-color:#60a5fa;
|
||||
box-shadow:0 0 0 3px rgba(96,165,250,.2);
|
||||
}
|
||||
button{
|
||||
margin-top:1.5rem;
|
||||
width:100%;
|
||||
padding:1rem;
|
||||
border:none;
|
||||
border-radius:.5rem;
|
||||
background:linear-gradient(90deg,#3b82f6,#8b5cf6);
|
||||
color:#fff;
|
||||
font-weight:700;
|
||||
font-size:1.1rem;
|
||||
cursor:pointer;
|
||||
box-shadow:0 4px 15px rgba(59,130,246,.4);
|
||||
transition:transform .1s,box-shadow .1s;
|
||||
}
|
||||
button:hover{
|
||||
transform:translateY(-2px);
|
||||
box-shadow:0 6px 20px rgba(139,92,246,.5);
|
||||
}
|
||||
.flash{
|
||||
padding:.8rem;
|
||||
background:#064e3b;
|
||||
border-radius:.5rem;
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
.flash.error{background:#450a0a;}
|
||||
.result{
|
||||
margin-top:1.5rem;
|
||||
}
|
||||
.request{
|
||||
background:#111827;
|
||||
border:1px solid #374151;
|
||||
border-radius:.75rem;
|
||||
padding:1rem;
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
.request h3{margin-top:0;color:#93c5fd;}
|
||||
.status{
|
||||
display:inline-block;
|
||||
padding:.25rem .6rem;
|
||||
border-radius:9999px;
|
||||
font-size:.85rem;
|
||||
font-weight:600;
|
||||
background:#374151;
|
||||
color:#f3f4f6;
|
||||
margin:.3rem 0;
|
||||
}
|
||||
.status.pending,.status.prompt_ready{background:#60a5fa;color:#000;}
|
||||
.status.songs_uploaded{background:#a78bfa;color:#000;}
|
||||
.status.awaiting_payment{background:#f59e0b;color:#000;}
|
||||
.status.paid,.status.delivered{background:#10b981;color:#000;}
|
||||
.status.revisions_requested{background:#f87171;color:#000;}
|
||||
.link-button{
|
||||
display:inline-block;
|
||||
margin-top:.5rem;
|
||||
padding:.6rem 1rem;
|
||||
background:#3b82f6;
|
||||
border-radius:.5rem;
|
||||
color:#fff;
|
||||
text-decoration:none;
|
||||
font-weight:600;
|
||||
}
|
||||
.approved{font-weight:600;color:#fbbf24;}
|
||||
.back{
|
||||
display:block;
|
||||
text-align:center;
|
||||
margin-top:1.5rem;
|
||||
color:#93c5fd;
|
||||
text-decoration:none;
|
||||
}
|
||||
.back:hover{text-decoration:underline;}
|
||||
</style>
|
||||
<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') }}">
|
||||
</head>
|
||||
<body>
|
||||
<body class="booth-page">
|
||||
<div class="container">
|
||||
<img src="{{ url_for('static', filename='Trollgorithm_booth.jpg') }}" alt="Trollgorithm Theme Song Booth" class="banner">
|
||||
<img src="{{ url_for('static', filename='Trollgorithm_booth.jpg') }}" alt="Trollgorithm Theme Song Booth" class="hero-banner">
|
||||
|
||||
<div class="card">
|
||||
<h1>🔍 Check Your Order Status</h1>
|
||||
<p class="subtitle">Enter the email address you used when you requested your song.</p>
|
||||
<h1 class="text-center">Check Your Order Status</h1>
|
||||
<p class="subtitle text-center">Enter the email address you used when you requested your song.</p>
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
|
|
@ -164,17 +35,17 @@
|
|||
<div class="result">
|
||||
{% if requests %}
|
||||
{% for req in requests %}
|
||||
<div class="request">
|
||||
<div class="status-card">
|
||||
<h3>Request #{{ req.id }} — {{ req.name }}</h3>
|
||||
<p><strong>Status:</strong> <span class="status {{ req.status }}">{{ statuses[req.status] }}</span></p>
|
||||
<p><strong>Status:</strong> <span class="status-pill status-{{ req.status }}">{{ statuses[req.status] }}</span></p>
|
||||
|
||||
{% if req.customer_approved and req.customer_approved != 'none' %}
|
||||
<p class="approved">You selected: {% if req.customer_approved == 'both' %}Both Versions{% else %}Version {{ (req.customer_approved or 'none').upper() }}{% endif %}</p>
|
||||
<p class="approved-text">You selected: {% if req.customer_approved == 'both' %}Both Versions{% else %}Version {{ (req.customer_approved or 'none').upper() }}{% endif %}</p>
|
||||
{% endif %}
|
||||
|
||||
{% if req.song_a_path and req.song_b_path %}
|
||||
<p><strong>Your preview link:</strong></p>
|
||||
<a class="link-button" href="{{ url_for('play', token=req.player_token) }}" target="_blank" rel="noopener noreferrer">🎧 Listen & Pick Your Version</a>
|
||||
<a class="button" href="{{ url_for('play', token=req.player_token) }}" target="_blank" rel="noopener noreferrer">Listen & Pick Your Version</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
@ -184,7 +55,7 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
<a class="back" href="{{ url_for('request_form') }}">← Back to the request form</a>
|
||||
<a class="back-link text-center" href="{{ url_for('request_form') }}">← Back to the request form</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -4,41 +4,19 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Request Received</title>
|
||||
<style>
|
||||
/*
|
||||
Simple confirmation page shown after a customer submits a request.
|
||||
Gives them a request number they can reference at the booth.
|
||||
*/
|
||||
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;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
min-height:100vh;
|
||||
}
|
||||
.container{
|
||||
max-width:640px;
|
||||
margin:0 auto;
|
||||
background:#1f2937;
|
||||
padding:1.5rem;
|
||||
border-radius:1rem;
|
||||
text-align:center;
|
||||
}
|
||||
h1{color:#34d399;}
|
||||
.note{font-size:.9rem;color:#9ca3af;}
|
||||
</style>
|
||||
<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') }}">
|
||||
</head>
|
||||
<body>
|
||||
<body class="booth-page center-content">
|
||||
<div class="container">
|
||||
<h1>✅ Request Received</h1>
|
||||
<div class="card text-center">
|
||||
<h1 class="success">Request Received</h1>
|
||||
<p>Thanks, {{ req.name }}! We'll craft your song and email you a link when it's ready.</p>
|
||||
<p><strong>Your request number:</strong> #{{ req.id }}</p>
|
||||
<p class="note">Bring this number to the booth if you want to check on progress.</p>
|
||||
<p class="copy-hint">Bring this number to the booth if you want to check on progress.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue