<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hill Valley Shropshire - Crushers v Fireballs</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Firebase SDKs -->
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-database-compat.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
golf: {
dark: '#1b4332',
DEFAULT: '#2d6a4f',
light: '#52b788',
accent: '#d8f3dc'
}
}
}
}
}
</script>
</head>
<body class="bg-gray-100 text-gray-800 font-sans antialiased pb-24">
<!-- Header -->
<header class="bg-golf-dark text-white shadow-md sticky top-0 z-50">
<div class="max-w-4xl mx-auto px-4 py-3 flex justify-between items-center">
<div>
<h1 class="text-base sm:text-lg font-bold tracking-wide"><i class="fa-solid fa-flag-checkered mr-2"></i>Hill Valley Shropshire</h1>
<p class="text-xs text-golf-accent">April 17-18 • Crushers v Fireballs</p>
</div>
<div class="flex items-center space-x-2">
<span id="syncStatus" class="text-xs bg-amber-600 px-2 py-1 rounded text-white"><i class="fa-solid fa-spinner fa-spin"></i> Connecting...</span>
<button onclick="shareApp()" class="bg-golf hover:bg-golf-light text-white px-3 py-1.5 rounded text-xs font-semibold shadow">
<i class="fa-solid fa-share-nodes mr-1"></i> Share
</button>
</div>
</div>
</header>
<!-- Navigation Tabs -->
<nav class="bg-white border-b border-gray-200 shadow-sm sticky top-[57px] z-40">
<div class="max-w-4xl mx-auto flex overflow-x-auto">
<button onclick="switchTab('live')" id="tab-live" class="flex-1 min-w-[100px] py-3 px-4 text-center text-xs sm:text-sm font-bold text-golf border-b-2 border-golf bg-golf-accent/20">Live Scoring</button>
<button onclick="switchTab('history')" id="tab-history" class="flex-1 min-w-[100px] py-3 px-4 text-center text-xs sm:text-sm font-semibold text-gray-600 hover:text-golf">History & Archives</button>
<button onclick="switchTab('rules')" id="tab-rules" class="flex-1 min-w-[100px] py-3 px-4 text-center text-xs sm:text-sm font-semibold text-gray-600 hover:text-golf">Rules & Format</button>
<button onclick="switchTab('gallery')" id="tab-gallery" class="flex-1 min-w-[100px] py-3 px-4 text-center text-xs sm:text-sm font-semibold text-gray-600 hover:text-golf">Photo Gallery</button>
</div>
</nav>
<!-- Main Container -->
<main class="max-w-4xl mx-auto p-4 space-y-6">
<!-- TAB 1: LIVE SCORING -->
<div id="section-live" class="space-y-6">
<!-- Team Score Banner (Average Scoring per Player due to 4v3 split) -->
<section class="bg-gradient-to-r from-golf-dark to-golf text-white rounded-2xl shadow-xl p-6 text-center border-2 border-golf-light">
<h2 class="text-xs uppercase tracking-widest text-golf-accent font-semibold mb-1"><i class="fa-solid fa-shield-halved mr-1"></i> Team Championship Battle (Average per Player)</h2>
<p class="text-[11px] text-gray-200 mb-3">Crushers (4 players) vs Fireballs (3 players) — Ranked by Team Average</p>
<div class="grid grid-cols-2 gap-4 items-center">
<div class="bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/20">
<div class="text-sm sm:text-base font-bold text-blue-300 uppercase tracking-wide mb-1">Crushers (4)</div>
<div id="crushersAvgScore" class="text-3xl sm:text-5xl font-black tracking-tight text-white">0.0</div>
<div class="text-[11px] text-gray-200 mt-1">Avg Stableford (Total: <span id="crushersTotal">0</span>)</div>
</div>
<div class="bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/20">
<div class="text-sm sm:text-base font-bold text-orange-300 uppercase tracking-wide mb-1">Fireballs (3)</div>
<div id="fireballsAvgScore" class="text-3xl sm:text-5xl font-black tracking-tight text-white">0.0</div>
<div class="text-[11px] text-gray-200 mt-1">Avg Stableford (Total: <span id="fireballsTotal">0</span>)</div>
</div>
</div>
<div id="teamStatusText" class="mt-4 text-xs sm:text-sm font-semibold text-golf-accent">Match is currently tied</div>
</section>
<!-- Individual Standings -->
<section class="bg-white rounded-xl shadow-md p-4 overflow-hidden border border-gray-200">
<div class="flex justify-between items-center mb-3">
<h2 class="text-md font-bold text-golf-dark"><i class="fa-solid fa-trophy mr-1 text-yellow-500"></i> Individual Standings</h2>
<span class="text-xs text-gray-500">Form: <span class="text-red-700 font-bold">Darker red = hot streak over last 3 holes</span></span>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse text-sm">
<thead>
<tr class="bg-golf-accent text-golf-dark border-b border-gray-200 text-xs">
<th class="p-2">Pos</th>
<th class="p-2">Player</th>
<th class="p-2">Team</th>
<th class="p-2 text-center">Gross</th>
<th class="p-2 text-center font-bold">Stableford</th>
</tr>
</thead>
<tbody id="leaderboardTableBody" class="divide-y divide-gray-100">
<!-- Populated via JavaScript -->
</tbody>
</table>
</div>
</section>
<!-- Course Rotation, Tees & Group Controls -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 bg-white p-4 rounded-xl shadow-md border border-gray-200">
<div>
<label class="block text-xs font-semibold text-gray-600 mb-1">Select Round / Course:</label>
<select id="roundSelector" onchange="changeRound()" class="w-full border border-gray-300 rounded-lg p-2 text-sm bg-gray-50 focus:ring-2 focus:ring-golf">
<option value="1">Round 1 - Emerald Course</option>
<option value="2">Round 2 - Sapphire Course</option>
</select>
</div>
<div>
<label class="block text-xs font-semibold text-gray-600 mb-1">Select Tees:</label>
<select id="teeSelector" onchange="changeTees()" class="w-full border border-gray-300 rounded-lg p-2 text-sm bg-gray-50 focus:ring-2 focus:ring-golf">
<option value="white">White Tees (Par 72)</option>
<option value="yellow" selected>Yellow Tees (Par 72)</option>
<option value="red">Red Tees (Par 73)</option>
</select>
</div>
<div>
<label class="block text-xs font-semibold text-gray-600 mb-1">Playing Group:</label>
<select id="groupSelector" onchange="renderScorecard()" class="w-full border border-gray-300 rounded-lg p-2 text-sm bg-gray-50 focus:ring-2 focus:ring-golf">
<option value="all">All Players (All Groups)</option>
<option value="1">Group 1 (Top 4 Day 1 Leaders)</option>
<option value="2">Group 2</option>
</select>
</div>
</div>
<!-- Scorecard Entry -->
<section class="bg-white rounded-xl shadow-md p-4 border border-gray-200">
<div class="flex justify-between items-center mb-4">
<h2 class="text-md font-bold text-golf-dark"><i class="fa-solid fa-pen-to-square mr-1"></i> Scorecard</h2>
<div class="flex items-center space-x-2">
<button onclick="changeHole(-1)" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1 rounded text-xs font-bold"><i class="fa-solid fa-chevron-left"></i> Prev</button>
<span id="currentHoleIndicator" class="text-xs font-bold bg-golf text-white px-2.5 py-1 rounded">Hole 1</span>
<button onclick="changeHole(1)" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1 rounded text-xs font-bold">Next <i class="fa-solid fa-chevron-right"></i></button>
</div>
</div>
<div id="holeDetailCard" class="bg-golf-accent/50 p-3 rounded-lg mb-4 flex justify-between items-center text-xs sm:text-sm">
<div>
<span class="font-bold text-golf-dark text-base" id="hdHoleNum">Hole 1</span>:
<span class="font-semibold" id="hdHoleName">Emerald 1</span>
</div>
<div class="space-x-3">
<span>Par: <strong id="hdPar">4</strong></span>
<span>SI: <strong id="hdSI">10</strong></span>
<span>Yards: <strong id="hdYards">380</strong></span>
</div>
</div>
<div id="playerScoreInputs" class="space-y-3">
<!-- Populated via JavaScript -->
</div>
</section>
</div>
<!-- TAB 2: HISTORY & ARCHIVES -->
<div id="section-history" class="space-y-6 hidden">
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200 space-y-6">
<h2 class="text-lg font-bold text-golf-dark border-b pb-2"><i class="fa-solid fa-clock-rotate-left mr-2"></i> Tournament History & Archives</h2>
<!-- St Pierre -->
<div class="space-y-2">
<h3 class="font-bold text-golf text-md">St Pierre (18-19th April 2026)</h3>
<p class="text-xs text-gray-600"><strong>Team Competition:</strong> Crushers 34.25 vs Fireballs 33.83</p>
<p class="text-xs text-gray-600"><strong>Individual Top 3:</strong> Jonah (44), Dan (37.5), Timmi (34)</p>
<p class="text-xs text-gray-600"><strong>Closest to Pin Winners:</strong> Timmi, Toby</p>
</div>
<hr>
<!-- Tewkesbury -->
<div class="space-y-2">
<h3 class="font-bold text-golf text-md">Tewkesbury (October 10-11th 2026)</h3>
<p class="text-xs text-gray-600"><strong>Team Competition:</strong> Fireballs 41.5 vs Crushers 39.33</p>
<p class="text-xs text-gray-600"><strong>Individual Top 3:</strong> Dan (46), Jon (44.5), Andy B (43)</p>
<p class="text-xs text-gray-600"><strong>Closest to Pin Winners:</strong> Toby, Andy B</p>
</div>
</section>
</div>
<!-- TAB 3: RULES & FORMAT -->
<div id="section-rules" class="space-y-6 hidden">
<section class="bg-white rounded-xl shadow-md p-6 border border-gray-200 space-y-4 text-xs sm:text-sm text-gray-700">
<h2 class="text-lg font-bold text-golf-dark border-b pb-2"><i class="fa-solid fa-book-open mr-2"></i> Tournament Rules & Formats</h2>
<div>
<h3 class="font-bold text-golf text-base mb-1">Competitions & Team Scoring</h3>
<ul class="list-disc pl-5 space-y-1">
<li><strong>Individual