<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strike - Secure Event Attendance</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<!-- QRCode Generator Library -->
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
<!-- Canvas Confetti -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<style>
/* Force breakout from parent website theme constraints */
.geocheck-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99999;
overflow-y: auto;
background-color: #f8fafc;
color: #0f172a;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
box-sizing: border-box;
}
.geocheck-wrapper *, .geocheck-wrapper *::before, .geocheck-wrapper *::after {
box-sizing: border-box;
}
</style>
</head>
<body class="h-full m-0 p-0">
<div class="geocheck-wrapper">
<div id="app" class="min-h-full flex flex-col bg-slate-50 text-slate-900">
<!-- Navigation Header -->
<header class="bg-indigo-900 text-white shadow-md">
<div class="max-w-7xl mx-auto px-4 py-4 flex flex-col sm:flex-row justify-between items-center gap-4">
<div class="flex items-center gap-3">
<div class="bg-indigo-700 p-2.5 rounded-xl shadow-inner">
<i data-lucide="shield-check" class="w-6 h-6 text-indigo-200"></i>
</div>
<div>
<h1 id="header-event-title" class="text-xl font-bold tracking-tight">Strike Check-In</h1>
<p class="text-xs text-indigo-300">GPS Geofenced & Roster Verified</p>
</div>
</div>
<div class="flex bg-indigo-950 p-1 rounded-xl border border-indigo-800">
<button onclick="switchView('attendee')" id="nav-attendee-btn" class="px-4 py-2 rounded-lg text-sm font-medium transition-all bg-indigo-600 text-white shadow">
Attendee View
</button>
<button onclick="switchView('host')" id="nav-host-btn" class="px-4 py-2 rounded-lg text-sm font-medium transition-all text-indigo-300 hover:text-white">
Host Dashboard
</button>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-grow max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8">
<!-- ATTENDEE VIEW -->
<div id="view-attendee" class="max-w-md mx-auto bg-white rounded-2xl shadow-xl border border-slate-100 overflow-hidden my-6">
<div class="bg-gradient-to-br from-indigo-600 to-indigo-800 p-6 text-white text-center relative">
<div class="absolute top-4 right-4 bg-indigo-500/30 backdrop-blur-md px-3 py-1 rounded-full text-xs font-medium border border-indigo-400/30 flex items-center gap-1.5">
<span id="gps-status-dot" class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span>
<span id="gps-status-text">Locating...</span>
</div>
<div class="w-16 h-16 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center mx-auto mb-3 border border-white/20 shadow-inner">
<i data-lucide="map-pin" class="w-8 h-8 text-white"></i>
</div>
<h2 id="attendee-event-title" class="text-2xl font-bold tracking-tight">Strike Check-In</h2>
<p class="text-indigo-200 text-sm mt-1">Verify your presence to check in</p>
</div>
<div class="p-6 space-y-6">
<!-- Status Alert Box -->
<div id="checkin-alert" class="p-4 rounded-xl text-sm flex items-start gap-3 bg-blue-50 text-blue-900 border border-blue-200">
<i data-lucide="info" class="w-5 h-5 text-blue-600 shrink-0 mt-0.5"></i>
<div>
<span class="font-semibold block mb-0.5">Location Check Required</span>
<span id="alert-message">Please allow browser location access when prompted so we can verify you are at the venue.</span>
</div>
</div>
<!-- Check-in Form -->
<form id="checkin-form" onsubmit="handleCheckIn(event)" class="space-y-4">
<div>
<label class="block text-xs font-semibold uppercase