From 57ccc7237d7ddd67354fa4c788fb8302c37c983d Mon Sep 17 00:00:00 2001
From: Dustin Pianalto <dustin@djpianalto.com>
Date: Thu, 6 Mar 2025 15:59:31 -0900
Subject: [PATCH] add bootstrap css

---
 web/templates/index.templ | 60 ++++++++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 26 deletions(-)
diff --git a/web/templates/index.templ b/web/templates/index.templ
index fbe4032..1ec0995 100644
--- a/web/templates/index.templ
+++ b/web/templates/index.templ
@@ -7,43 +7,46 @@ templ Index() {
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Derby Race Timer</title>
-		<link href="/static/css/tailwind.css" rel="stylesheet" />
+		<!-- Bootstrap CSS -->
+		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 		<script src="/static/js/htmx.min.js"></script>
+		<!-- Bootstrap JS Bundle with Popper -->
+		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 	</head>
-	<body class="bg-gray-100 min-h-screen">
-		<div class="container mx-auto px-4 py-8">
-			<header class="mb-8">
-				<h1 class="text-3xl font-bold text-center">Derby Race Timer</h1>
+	<body class="bg-light">
+		<div class="container py-4">
+			<header class="mb-4">
+				<h1 class="text-center">Derby Race Timer</h1>
 			</header>
 			
-			<div class="mb-6 flex justify-center">
-				<div id="race-status" class="px-4 py-2 rounded-full text-white bg-blue-600">Ready</div>
+			<div class="mb-4 text-center">
+				<div id="race-status" class="badge bg-primary fs-5 px-3 py-2">Ready</div>
 			</div>
 			
-			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+			<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mb-4">
 				@laneComponents()
 			</div>
 			
-			<div class="flex justify-center space-x-4">
+			<div class="d-flex justify-content-center gap-3">
 				<button 
 					hx-post="/api/reset" 
 					hx-swap="none"
-					class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+					class="btn btn-primary">
 					Reset Race
 				</button>
 				<button 
 					hx-post="/api/force-end" 
 					hx-swap="none"
-					class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
+					class="btn btn-danger">
 					Force End Race
 				</button>
 			</div>
 		</div>
 		
 		<script>
+			// Set up SSE connection
 			console.log("Setting up SSE connection...");
 			
-			// Set up SSE connection
 			const eventSource = new EventSource('/api/events');
 			
 			eventSource.onopen = function() {
@@ -65,12 +68,12 @@ templ Index() {
 					const lane = document.getElementById(`lane-${laneFinishData.lane}`);
 					if (lane) {
 						console.log(`Updating lane ${laneFinishData.lane} with time ${laneFinishData.time}`);
-						lane.classList.add('finished');
+						lane.classList.add('bg-success-subtle');
 						lane.querySelector('.time').textContent = laneFinishData.time.toFixed(4);
 						
 						const placeEl = lane.querySelector('.place');
 						placeEl.textContent = `${getOrdinal(laneFinishData.place)} Place`;
-						placeEl.classList.remove('hidden');
+						placeEl.classList.remove('d-none');
 					} else {
 						console.error(`Lane element not found for lane ${laneFinishData.lane}`);
 					}
@@ -84,28 +87,29 @@ templ Index() {
 				try {
 					const statusData = JSON.parse(event.data);
 					let statusText = 'Unknown';
-					let statusClass = 'bg-gray-500';
+					let statusClass = 'bg-secondary';
 					
 					if (statusData.status === 'idle') {
 						statusText = 'Ready';
-						statusClass = 'bg-blue-600';
+						statusClass = 'bg-primary';
 						
 						// Reset all lanes
 						document.querySelectorAll('.lane').forEach(lane => {
-							lane.classList.remove('finished');
+							lane.classList.remove('bg-success-subtle');
 							lane.querySelector('.time').textContent = '--.--.---';
-							lane.querySelector('.place').classList.add('hidden');
+							lane.querySelector('.place').classList.add('d-none');
 						});
 					} else if (statusData.status === 'running') {
 						statusText = 'Race Running';
-						statusClass = 'bg-green-600';
+						statusClass = 'bg-success';
 					} else if (statusData.status === 'finished') {
 						statusText = 'Race Complete';
-						statusClass = 'bg-purple-600';
+						statusClass = 'bg-info';
 					}
 					
-					document.getElementById('race-status').textContent = statusText;
-					document.getElementById('race-status').className = `px-4 py-2 rounded-full text-white ${statusClass}`;
+					const statusEl = document.getElementById('race-status');
+					statusEl.textContent = statusText;
+					statusEl.className = `badge fs-5 px-3 py-2 ${statusClass}`;
 				} catch (error) {
 					console.error("Error processing status event:", error);
 				}
@@ -128,9 +132,13 @@ templ laneComponents() {
 }
 
 templ laneComponent(lane int) {
-	<div id={ "lane-" + string(rune('0' + lane)) } class="lane bg-white p-4 rounded shadow">
-		<h2 class="text-xl font-semibold mb-2">Lane { string(rune('0' + lane)) }</h2>
-		<div class="text-3xl font-mono mb-2 time">--.--.---</div>
-		<div class="place text-lg font-bold text-green-600 hidden"></div>
+	<div class="col">
+		<div id={ "lane-" + string(rune('0' + lane)) } class="lane card h-100">
+			<div class="card-body text-center">
+				<h5 class="card-title">Lane { string(rune('0' + lane)) }</h5>
+				<div class="time display-6 font-monospace my-3">--.--.---</div>
+				<div class="place badge bg-success fs-6 d-none"></div>
+			</div>
+		</div>
 	</div>
 } 
\ No newline at end of file
