68 lines
2.6 KiB
HTML
68 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Welcome to {{ tenant.name }}</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
|
<style>
|
|
body { background: #f8f9fa; }
|
|
.kiosk-card { max-width: 540px; margin: 60px auto; }
|
|
.kiosk-title { font-size: 2rem; font-weight: 700; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="kiosk-card">
|
|
{% if confirmed %}
|
|
<div class="card shadow text-center p-5" id="confirmation">
|
|
<div class="display-1 mb-3">✅</div>
|
|
<h2 class="kiosk-title">You're checked in!</h2>
|
|
<p class="text-muted mt-2">A staff member will be right with you.</p>
|
|
<p class="text-muted small" id="reset-countdown">Resetting in <span id="countdown">10</span>s…</p>
|
|
</div>
|
|
<script>
|
|
let n = 10;
|
|
const el = document.getElementById("countdown");
|
|
const timer = setInterval(() => {
|
|
n--;
|
|
el.textContent = n;
|
|
if (n <= 0) { clearInterval(timer); window.location.reload(); }
|
|
}, 1000);
|
|
</script>
|
|
{% else %}
|
|
<div class="card shadow p-4">
|
|
<h2 class="kiosk-title text-center mb-4">Welcome to {{ tenant.name }}</h2>
|
|
{% if error %}
|
|
<div class="alert alert-danger">{{ error }}</div>
|
|
{% endif %}
|
|
<form method="POST">
|
|
<div class="mb-3">
|
|
<label class="form-label fs-5">Your Name</label>
|
|
<input type="text" name="customer_name" class="form-control form-control-lg"
|
|
placeholder="First and last name" required autofocus>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fs-5">Phone Number</label>
|
|
<input type="tel" name="customer_phone" class="form-control form-control-lg"
|
|
placeholder="e.g. 5551234567" inputmode="numeric" required>
|
|
</div>
|
|
{% if services %}
|
|
<div class="mb-3">
|
|
<label class="form-label fs-5">Service (optional)</label>
|
|
<select name="service_requested" class="form-select form-select-lg">
|
|
<option value="">— Select a service —</option>
|
|
{% for svc in services %}
|
|
<option value="{{ svc.name }}">{{ svc.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
{% endif %}
|
|
<button type="submit" class="btn btn-primary btn-lg w-100 mt-2">Check In</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|