240 lines
6.7 KiB
HTML
240 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Trollgorithm Booth — Kiosk</title>
|
|
{% if refresh_seconds and refresh_seconds > 0 %}
|
|
<meta http-equiv="refresh" content="{{ refresh_seconds }}">
|
|
{% endif %}
|
|
<style>
|
|
*{box-sizing:border-box;}
|
|
html,body{
|
|
margin:0;
|
|
padding:0;
|
|
height:100%;
|
|
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
|
|
background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 50%,#0f172a 100%);
|
|
color:#f3f4f6;
|
|
overflow:hidden;
|
|
}
|
|
.kiosk{
|
|
height:100%;
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
padding:2vh 3vw;
|
|
text-align:center;
|
|
}
|
|
.banner{
|
|
width:100%;
|
|
max-height:22vh;
|
|
object-fit:contain;
|
|
border-radius:1rem;
|
|
box-shadow:0 10px 40px rgba(0,0,0,.4);
|
|
}
|
|
.status-pill{
|
|
display:inline-block;
|
|
margin-top:1.5vh;
|
|
padding:.6rem 1.4rem;
|
|
border-radius:9999px;
|
|
font-weight:700;
|
|
font-size:1.2rem;
|
|
text-transform:uppercase;
|
|
letter-spacing:.05em;
|
|
}
|
|
.status-open{background:#10b981;color:#000;}
|
|
.status-closed{background:#ef4444;color:#000;}
|
|
.stage{
|
|
flex:1;
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items:center;
|
|
justify-content:center;
|
|
width:100%;
|
|
max-width:900px;
|
|
margin:2vh 0;
|
|
}
|
|
.slide{
|
|
width:100%;
|
|
animation:fadeIn .8s ease;
|
|
}
|
|
@keyframes fadeIn{
|
|
from{opacity:0;transform:translateY(20px);}
|
|
to{opacity:1;transform:translateY(0);}
|
|
}
|
|
.slide.hidden{display:none;}
|
|
h1{
|
|
margin:0 0 1.5vh 0;
|
|
font-size:clamp(2rem,5vw,3.5rem);
|
|
color:#60a5fa;
|
|
}
|
|
.qr-code{
|
|
max-height:44vh;
|
|
max-width:44vh;
|
|
width:auto;
|
|
border-radius:1rem;
|
|
box-shadow:0 10px 40px rgba(0,0,0,.4);
|
|
background:#fff;
|
|
padding:.6rem;
|
|
}
|
|
.qr-caption{
|
|
margin-top:1.5vh;
|
|
font-size:clamp(1.1rem,2.5vw,1.6rem);
|
|
color:#93c5fd;
|
|
}
|
|
.price-card{
|
|
background:rgba(31,41,55,.85);
|
|
border:1px solid rgba(96,165,250,.25);
|
|
border-radius:1.2rem;
|
|
padding:3vh 4vw;
|
|
box-shadow:0 15px 50px rgba(0,0,0,.35);
|
|
width:100%;
|
|
}
|
|
.price-card h2{
|
|
margin:0 0 2vh 0;
|
|
font-size:clamp(1.6rem,4vw,2.6rem);
|
|
color:#fbbf24;
|
|
}
|
|
.price-list{
|
|
list-style:none;
|
|
margin:0;
|
|
padding:0;
|
|
text-align:left;
|
|
}
|
|
.price-list li{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
border-bottom:1px solid rgba(147,197,253,.2);
|
|
padding:1.2vh 0;
|
|
font-size:clamp(1.2rem,3vw,1.8rem);
|
|
}
|
|
.price-list li:last-child{border-bottom:none;}
|
|
.price-list .label{color:#e5e7eb;}
|
|
.price-list .amount{font-weight:700;color:#fbbf24;}
|
|
.price-empty{
|
|
font-size:1.3rem;
|
|
color:#9ca3af;
|
|
}
|
|
.footer{
|
|
font-size:1rem;
|
|
color:#9ca3af;
|
|
}
|
|
.dots{
|
|
display:flex;
|
|
gap:.6rem;
|
|
justify-content:center;
|
|
margin-top:1vh;
|
|
}
|
|
.dot{
|
|
width:12px;
|
|
height:12px;
|
|
border-radius:50%;
|
|
background:#374151;
|
|
transition:background .3s;
|
|
}
|
|
.dot.active{background:#60a5fa;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="kiosk">
|
|
<div class="header">
|
|
{% if booth_open %}
|
|
<img src="{{ url_for('static', filename='Trollgorithm_booth.jpg') }}" alt="Trollgorithm Theme Song Booth" class="banner">
|
|
<div class="status-pill status-open">Booth is Open ✅</div>
|
|
{% else %}
|
|
<img src="{{ url_for('static', filename='Booth_closed.png') }}" alt="Booth Closed" class="banner">
|
|
<div class="status-pill status-closed">Booth is Closed ❌</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="stage" id="stage">
|
|
{% if mode == 'qr' %}
|
|
<div class="slide">
|
|
<h1>Scan to Order</h1>
|
|
<img src="{{ url_for('static', filename='qr-code.png') }}" alt="Scan to order" class="qr-code">
|
|
<p class="qr-caption">Point your camera at the code to start your request.</p>
|
|
</div>
|
|
{% elif mode == 'prices' %}
|
|
<div class="slide">
|
|
<div class="price-card">
|
|
<h2>Pricing</h2>
|
|
{% if price_items %}
|
|
<ul class="price-list">
|
|
{% for item in price_items %}
|
|
<li>
|
|
<span class="label">{{ item.label }}</span>
|
|
<span class="amount">{{ item.price }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p class="price-empty">Pricing coming soon. Ask the booth operator!</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="slide" id="slide-qr">
|
|
<h1>Scan to Order</h1>
|
|
<img src="{{ url_for('static', filename='qr-code.png') }}" alt="Scan to order" class="qr-code">
|
|
<p class="qr-caption">Point your camera at the code to start your request.</p>
|
|
</div>
|
|
<div class="slide hidden" id="slide-prices">
|
|
<div class="price-card">
|
|
<h2>Pricing</h2>
|
|
{% if price_items %}
|
|
<ul class="price-list">
|
|
{% for item in price_items %}
|
|
<li>
|
|
<span class="label">{{ item.label }}</span>
|
|
<span class="amount">{{ item.price }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p class="price-empty">Pricing coming soon. Ask the booth operator!</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if mode == 'cycle' %}
|
|
<div class="footer">
|
|
<div class="dots">
|
|
<div class="dot active" id="dot-qr"></div>
|
|
<div class="dot" id="dot-prices"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
const qr = document.getElementById('slide-qr');
|
|
const prices = document.getElementById('slide-prices');
|
|
const dotQr = document.getElementById('dot-qr');
|
|
const dotPrices = document.getElementById('dot-prices');
|
|
const seconds = {{ cycle_seconds }};
|
|
if (seconds > 0 && qr && prices) {
|
|
let showingQr = true;
|
|
setInterval(function(){
|
|
showingQr = !showingQr;
|
|
if (showingQr) {
|
|
qr.classList.remove('hidden');
|
|
prices.classList.add('hidden');
|
|
dotQr.classList.add('active');
|
|
dotPrices.classList.remove('active');
|
|
} else {
|
|
qr.classList.add('hidden');
|
|
prices.classList.remove('hidden');
|
|
dotQr.classList.remove('active');
|
|
dotPrices.classList.add('active');
|
|
}
|
|
}, seconds * 1000);
|
|
}
|
|
})();
|
|
</script>
|
|
{% endif %}
|
|
</div>
|
|
</body>
|
|
</html>
|