147 lines
5.3 KiB
HTML
147 lines
5.3 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 %}
|
|
<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 class="booth-page kiosk-page">
|
|
<div class="kiosk">
|
|
<div class="header">
|
|
{% if booth_open %}
|
|
<img src="{{ url_for('static', filename='Trollgorithm_booth.jpg') }}" alt="Trollgorithm Theme Song Booth" class="kiosk-banner">
|
|
{% else %}
|
|
<img src="{{ url_for('static', filename='Booth_closed.png') }}" alt="Booth Closed" class="kiosk-banner">
|
|
{% 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>
|
|
{% elif mode == 'queue' %}
|
|
<div class="slide">
|
|
<div class="queue-card">
|
|
<h2>Live Queue</h2>
|
|
{% if queue %}
|
|
<ul class="queue-list">
|
|
{% for item in queue %}
|
|
<li>
|
|
<span class="customer">#{{ item.id }} {{ item.name }}</span>
|
|
<span class="status">{{ item.status }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<p class="queue-note">If your request isn't shown, visit the request page and use the status link to check your place.</p>
|
|
{% else %}
|
|
<p class="queue-empty">No active requests right now. Be the first!</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>
|
|
<div class="slide hidden" id="slide-queue">
|
|
<div class="queue-card">
|
|
<h2>Live Queue</h2>
|
|
{% if queue %}
|
|
<ul class="queue-list">
|
|
{% for item in queue %}
|
|
<li>
|
|
<span class="customer">#{{ item.id }} {{ item.name }}</span>
|
|
<span class="status">{{ item.status }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<p class="queue-note">If your request isn't shown, visit the request page and use the status link to check your place.</p>
|
|
{% else %}
|
|
<p class="queue-empty">No active requests right now. Be the first!</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 class="dot" id="dot-queue"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
const qr = document.getElementById('slide-qr');
|
|
const prices = document.getElementById('slide-prices');
|
|
const queue = document.getElementById('slide-queue');
|
|
const dotQr = document.getElementById('dot-qr');
|
|
const dotPrices = document.getElementById('dot-prices');
|
|
const dotQueue = document.getElementById('dot-queue');
|
|
const seconds = {{ cycle_seconds }};
|
|
const slides = [qr, prices, queue];
|
|
const dots = [dotQr, dotPrices, dotQueue];
|
|
if (seconds > 0) {
|
|
let idx = 0;
|
|
setInterval(function(){
|
|
slides[idx].classList.add('hidden');
|
|
dots[idx].classList.remove('active');
|
|
idx = (idx + 1) % slides.length;
|
|
slides[idx].classList.remove('hidden');
|
|
dots[idx].classList.add('active');
|
|
}, seconds * 1000);
|
|
}
|
|
})();
|
|
</script>
|
|
{% endif %}
|
|
</div>
|
|
</body>
|
|
</html>
|