redirect to bibdle.dev and components

src/lib/components/Feedback.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+</script>
+
+<div
+	class="mt-12 p-4 bg-linear-to-r from-blue-50 to-indigo-50 rounded-2xl shadow-md text-center text-sm md:text-base text-gray-600"
+	in:fade={{ delay: 1500, duration: 1000 }}
+>
+	Thank you so much for playing! Feel free to email me directly with feedback:
+	<a
+		href="mailto:george@snail.city"
+		class="font-semibold text-blue-600 hover:text-blue-800 underline"
+		>george@snail.city</a
+	>
+</div>

src/lib/components/GuessesTable.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	interface Guess {
+		book: {
+			id: string;
+			name: string;
+			testament: string;
+			section: string;
+		};
+		testamentMatch: boolean;
+		sectionMatch: boolean;
+		adjacent: boolean;
+	}
+
+	let {
+		guesses,
+		correctBookId,
+	}: { guesses: Guess[]; correctBookId: string } = $props();
+</script>
+
+<div class="bg-white rounded-2xl shadow-xl overflow-x-auto">
+	<table class="w-full">
+		<thead>
+			<tr class="bg-linear-to-r from-gray-50 to-gray-300">
+				<th
+					class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
+					>Book</th
+				>
+				<th
+					class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
+					>Testament</th
+				>
+				<th
+					class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
+					>Section</th
+				>
+			</tr>
+		</thead>
+		<tbody>
+			{#each guesses as guess (guess.book.id)}
+				<tr
+					class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
+				>
+					<td
+						class="p-3 sm:p-4 md:p-6 text-sm sm:text-base font-bold md:text-lg"
+					>
+						{guess.book.id === correctBookId ? "✅" : "❌"}
+						{guess.book.name}
+					</td>
+					<td
+						class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
+					>
+						{guess.testamentMatch ? "✅" : "🟥"}
+						{guess.book.testament.charAt(0).toUpperCase() +
+							guess.book.testament.slice(1).toLowerCase()}
+					</td>
+					<td
+						class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
+					>
+						{guess.sectionMatch ? "✅" : "🟥"}
+						{guess.adjacent ? "‼️ " : ""}{guess.book.section}
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>

src/lib/components/SearchInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { bibleBooks, type BibleBook } from "$lib/types/bible";
+
+	let { searchQuery = $bindable(""), guessedIds, submitGuess } = $props();
+
+	let filteredBooks = $derived(
+		bibleBooks.filter((book) =>
+			book.name.toLowerCase().includes(searchQuery.toLowerCase()),
+		),
+	);
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === "Enter" && filteredBooks.length > 0) {
+			submitGuess(filteredBooks[0].id);
+		}
+	}
+</script>
+
+<div class="mb-12">
+	<input
+		bind:value={searchQuery}
+		placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
+		class="w-full p-4 sm:p-6 border-2 border-gray-200 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all shadow-lg"
+		onkeydown={handleKeydown}
+	/>
+	{#if searchQuery && filteredBooks.length > 0}
+		<ul
+			class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white border border-gray-200 rounded-2xl shadow-lg"
+		>
+			{#each filteredBooks as book (book.id)}
+				<li>
+					<button
+						class="w-full p-4 sm:p-5 text-left {guessedIds.has(
+							book.id,
+						)
+							? 'opacity-60 cursor-not-allowed pointer-events-none hover:bg-gray-100 hover:text-gray-600'
+							: 'hover:bg-blue-50 hover:text-blue-700'} transition-all border-b border-gray-100 last:border-b-0 flex items-center"
+						onclick={() => submitGuess(book.id)}
+					>
+						<span
+							class="font-semibold {guessedIds.has(book.id)
+								? 'line-through text-gray-500'
+								: ''}">{book.name}</span
+						>
+						<span class="ml-auto text-sm opacity-75"
+							>({book.testament.toUpperCase()})</span
+						>
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{:else if searchQuery}
+		<p class="mt-4 text-center text-gray-500 p-8">No books found</p>
+	{/if}
+</div>

src/lib/components/VerseDisplay.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { PageData } from "../../routes/$types.js"; // Approximate type; adjust if needed
+
+	let { data, isWon }: { data: PageData; isWon: boolean } = $props();
+	let dailyVerse = $derived(data.dailyVerse);
+</script>
+
+<div class="bg-white rounded-2xl shadow-xl p-8 sm:p-12 mb-8 sm:mb-12 w-full">
+	<blockquote
+		class="text-xl sm:text-2xl leading-relaxed text-gray-700 italic text-center"
+	>
+		{dailyVerse.verseText}
+	</blockquote>
+	{#if isWon}
+		<p class="text-center text-lg text-green-600 font-bold mt-4">
+			{dailyVerse.reference}
+		</p>
+	{/if}
+</div>

src/lib/components/WinScreen.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import { getBookById, toOrdinal } from "$lib/utils/game";
+
+	interface StatsData {
+		solveRank: number;
+		guessRank: number;
+		totalSolves: number;
+		averageGuesses: number;
+	}
+
+	let {
+		grade,
+		statsData,
+		correctBookId,
+		handleShare,
+		copied = $bindable(false),
+		statsSubmitted,
+	} = $props();
+
+	let bookName = $derived(getBookById(correctBookId)?.name ?? "");
+</script>
+
+<div
+	class="mb-12 p-8 sm:p-12 w-full bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center"
+	in:fade={{ delay: 500 }}
+>
+	<h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
+		🎉 Congratulations! 🎉
+	</h2>
+	<p class="text-lg sm:text-xl md:text-2xl">
+		The verse is from <span
+			class="font-black text-xl sm:text-2xl md:text-3xl">{bookName}</span
+		>
+	</p>
+	<p
+		class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
+	>
+		Your grade: {grade}
+	</p>
+
+	<button
+		onclick={handleShare}
+		data-umami-event="Share"
+		class={`mt-4 text-2xl font-bold p-2 ${
+			copied
+				? "bg-green-400/50 hover:bg-green-500/60"
+				: "bg-white/20 hover:bg-white/30"
+		} rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
+	>
+		{copied ? "Copied to clipboard!" : "📤 Share"}
+	</button>
+
+	<!-- Statistics Display -->
+	{#if statsData}
+		<div class="mt-6 space-y-2 text-lg" in:fade={{ delay: 800 }}>
+			<p class="font-semibold">
+				You were the {toOrdinal(statsData.solveRank)} person to solve today.
+			</p>
+			<p class="font-semibold">
+				You rank <span class="text-2xl font-black"
+					>{toOrdinal(statsData.guessRank)}</span
+				> in guesses.
+			</p>
+			<p class="opacity-90">
+				Average: <span class="font-semibold"
+					>{statsData.averageGuesses.toFixed(1)}</span
+				> guesses
+			</p>
+		</div>
+	{:else if !statsSubmitted}
+		<div class="mt-6 text-sm opacity-80">Submitting stats...</div>
+	{/if}
+</div>

src/lib/index.ts

@@ -1 +1,8 @@
 // place files you want to import through the `$lib` alias in this folder.
+
+export * from './utils/game';
+export { default as VerseDisplay } from './components/VerseDisplay.svelte';
+export { default as SearchInput } from './components/SearchInput.svelte';
+export { default as GuessesTable } from './components/GuessesTable.svelte';
+export { default as WinScreen } from './components/WinScreen.svelte';
+export { default as Feedback } from './components/Feedback.svelte';

src/lib/utils/game.ts

@@ -0,0 +1,43 @@
+import { bibleBooks, type BibleBook } from '$lib/types/bible';
+
+export function getBookById(id: string): BibleBook | undefined {
+	return bibleBooks.find((b) => b.id === id);
+}
+
+export function isAdjacent(id1: string, id2: string): boolean {
+	const b1 = getBookById(id1);
+	const b2 = getBookById(id2);
+	return !!(b1 && b2 && Math.abs(b1.order - b2.order) === 1);
+}
+
+export function getGrade(numGuesses: number, popularity: number): string {
+	const difficulty = 14 - popularity;
+	const performanceScore = Math.max(0, 10 - numGuesses);
+	const totalScore = performanceScore + difficulty * 0.8;
+	if (totalScore >= 14) return "🟢 S";
+	if (totalScore >= 11) return "🟢 A";
+	if (totalScore >= 8) return "🟡 B";
+	if (totalScore >= 5) return "🟠 C";
+	return "🔴 C-";
+}
+
+export function toOrdinal(n: number): string {
+	if (n >= 11 && n <= 13) {
+		return `${n}th`;
+	}
+	const mod = n % 10;
+	const suffix = mod === 1 ? "st" : mod === 2 ? "nd" : mod === 3 ? "rd" : "th";
+	return `${n}${suffix}`;
+}
+
+export function generateUUID(): string {
+	if (typeof window !== 'undefined' && typeof (window as any).crypto?.randomUUID === "function") {
+		return (window as any).crypto.randomUUID();
+	}
+	// Fallback
+	return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+		const r = ((window as any).crypto.getRandomValues(new Uint8Array(1))[0] % 16) | 0;
+		const v = c === "x" ? r : (r & 0x3) | 0x8;
+		return v.toString(16);
+	});
+}

src/routes/+page.server.ts

@@ -6,13 +6,10 @@ import { fail } from '@sveltejs/kit';
 import { fetchRandomVerse } from '$lib/server/bible-api';
 import { getBookById } from '$lib/server/bible';
 import type { DailyVerse } from '$lib/server/db/schema';
-import type { BibleBook } from '$lib/types/bible';
 import crypto from 'node:crypto';
 
 async function getTodayVerse(): Promise<DailyVerse> {
-	const today = new Date();
-	today.setUTCHours(0, 0, 0, 0);
-	const dateStr = today.toISOString().slice(0, 10);
+	const dateStr = new Date().toLocaleDateString('en-CA', { timeZone: 'America/New_York' });
 
 	const existing = await db.select().from(dailyVerses).where(eq(dailyVerses.date, dateStr)).limit(1);
 	if (existing.length > 0) {

src/routes/+page.svelte

@@ -12,6 +12,13 @@
 	import { browser } from "$app/environment";
 	import { fade } from "svelte/transition";
 
+	import VerseDisplay from "$lib/components/VerseDisplay.svelte";
+	import SearchInput from "$lib/components/SearchInput.svelte";
+	import GuessesTable from "$lib/components/GuessesTable.svelte";
+	import WinScreen from "$lib/components/WinScreen.svelte";
+	import Feedback from "$lib/components/Feedback.svelte";
+	import { getGrade } from "$lib/utils/game";
+
 	let { data }: PageProps = $props();
 
 	let dailyVerse = $derived(data.dailyVerse);
@@ -22,6 +29,7 @@
 	let searchQuery = $state("");
 
 	let copied = $state(false);
+	let isDev = $state(false);
 
 	let anonymousId = $state("");
 	let statsSubmitted = $state(false);
@@ -32,12 +40,6 @@
 		averageGuesses: number;
 	} | null>(null);
 
-	let filteredBooks = $derived(
-		bibleBooks.filter((book) =>
-			book.name.toLowerCase().includes(searchQuery.toLowerCase()),
-		),
-	);
-
 	let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
 
 	let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
@@ -90,27 +92,6 @@
 		searchQuery = "";
 	}
 
-	function getGrade(numGuesses: number, popularity: number): string {
-		const difficulty = 14 - popularity;
-		const performanceScore = Math.max(0, 10 - numGuesses);
-		const totalScore = performanceScore + difficulty * 0.8;
-		if (totalScore >= 14) return "🟢 S";
-		if (totalScore >= 11) return "🟢 A";
-		if (totalScore >= 8) return "🟡 B";
-		if (totalScore >= 5) return "🟠 C";
-		return "🔴 C-";
-	}
-
-	function toOrdinal(n: number): string {
-		if (n >= 11 && n <= 13) {
-			return `${n}th`;
-		}
-		const mod = n % 10;
-		const suffix =
-			mod === 1 ? "st" : mod === 2 ? "nd" : mod === 3 ? "rd" : "th";
-		return `${n}${suffix}`;
-	}
-
 	function generateUUID(): string {
 		// Try native randomUUID if available
 		if (typeof window.crypto.randomUUID === "function") {
@@ -145,6 +126,11 @@
 		statsSubmitted = localStorage.getItem(statsKey) === "true";
 	});
 
+	$effect(() => {
+		if (!browser) return;
+		isDev = window.location.host === "192.168.0.42:5174";
+	});
+
 	// Load saved guesses
 	$effect(() => {
 		if (!browser) return;
@@ -334,212 +320,37 @@
 </script>
 
 <svelte:head>
-	<title>Bibdle</title>
+	<title>Bibdle{isDev ? " dev" : ""}</title>
 </svelte:head>
 
 <div class="min-h-dvh bg-linear-to-br from-blue-50 to-indigo-100 py-8">
 	<div
-		class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] max-w-md sm:max-w-lg md:max-w-2xl lg:max-w-4xl mx-auto px-2 sm:px-4"
+		class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] w-full max-w-3xl mx-auto px-4"
 	>
 		<h1
 			class="text-3xl md:text-4xl font-bold text-center text-gray-800 p-8 sm:p-12 drop-shadow-lg"
 		>
-			Bibdle
+			Bibdle <span class="font-normal">{isDev ? "dev" : ""}</span>
 		</h1>
 
-		<!-- Verse Display -->
-		<div
-			class="bg-white rounded-2xl shadow-xl p-8 sm:p-12 mb-8 sm:mb-12 max-w-full sm:max-w-2xl md:max-w-3xl mx-auto"
-		>
-			<blockquote
-				class="text-xl sm:text-2xl leading-relaxed text-gray-700 italic text-center"
-			>
-				{dailyVerse.verseText}
-			</blockquote>
-			{#if isWon}
-				<p class="text-center text-lg text-green-600 font-bold mt-4">
-					{dailyVerse.reference}
-				</p>
-			{/if}
-		</div>
+		<VerseDisplay {data} {isWon} />
 
 		{#if !isWon}
-			<!-- Book Search -->
-			<div class="mb-12">
-				<input
-					bind:value={searchQuery}
-					placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
-					class="w-full p-4 sm:p-6 border-2 border-gray-200 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all shadow-lg"
-					onkeydown={(e) => {
-						if (e.key === "Enter" && filteredBooks.length > 0) {
-							submitGuess(filteredBooks[0].id);
-						}
-					}}
-				/>
-				{#if searchQuery && filteredBooks.length > 0}
-					<ul
-						class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white border border-gray-200 rounded-2xl shadow-lg"
-					>
-						{#each filteredBooks as book}
-							<li>
-								<button
-									class="w-full p-4 sm:p-5 text-left {guessedIds.has(
-										book.id,
-									)
-										? 'opacity-60 cursor-not-allowed pointer-events-none hover:bg-gray-100 hover:text-gray-600'
-										: 'hover:bg-blue-50 hover:text-blue-700'} transition-all border-b border-gray-100 last:border-b-0 flex items-center"
-									onclick={() => submitGuess(book.id)}
-								>
-									<span
-										class="font-semibold {guessedIds.has(
-											book.id,
-										)
-											? 'line-through text-gray-500'
-											: ''}">{book.name}</span
-									>
-									<span class="ml-auto text-sm opacity-75"
-										>({book.testament.toUpperCase()})</span
-									>
-								</button>
-							</li>
-						{/each}
-					</ul>
-				{:else if searchQuery}
-					<p class="mt-4 text-center text-gray-500 p-8">
-						No books found
-					</p>
-				{/if}
-			</div>
+			<SearchInput bind:searchQuery {guessedIds} {submitGuess} />
 		{:else}
-			<div
-				class="mb-12 p-8 sm:p-12 max-w-full sm:max-w-2xl md:max-w-3xl mx-auto bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center"
-				in:fade={{ delay: 500 }}
-			>
-				<h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
-					🎉 Congratulations! 🎉
-				</h2>
-				<p class="text-lg sm:text-xl md:text-2xl">
-					The verse is from <span
-						class="font-black text-xl sm:text-2xl md:text-3xl"
-						>{getBookById(correctBookId)?.name}</span
-					>
-				</p>
-				<!-- <p class="text-xl opacity-90">{dailyVerse.reference}</p> -->
-				<p
-					class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
-				>
-					Your grade: {grade}
-				</p>
-
-				<button
-					onclick={handleShare}
-					data-umami-event="Share"
-					class={`mt-4 text-2xl font-bold p-2 ${
-						copied
-							? "bg-green-400/50 hover:bg-green-500/60"
-							: "bg-white/20 hover:bg-white/30"
-					} rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
-				>
-					{copied ? "Copied to clipboard!" : "📤 Share"}
-				</button>
-
-				<!-- Statistics Display -->
-				{#if statsData}
-					<div
-						class="mt-6 space-y-2 text-lg"
-						in:fade={{ delay: 800 }}
-					>
-						<p class="font-semibold">
-							You were the {toOrdinal(statsData.solveRank)} person
-							to solve today.
-						</p>
-						<p class="font-semibold">
-							You rank <span class="text-2xl font-black"
-								>{toOrdinal(statsData.guessRank)}</span
-							> in guesses.
-						</p>
-						<!-- <p class="opacity-90">
-							{statsData.totalSolves}
-							{statsData.totalSolves === 1
-								? "person has"
-								: "people have"} solved today
-						</p> -->
-						<p class="opacity-90">
-							Average: <span class="font-semibold"
-								>{statsData.averageGuesses.toFixed(1)}</span
-							> guesses
-						</p>
-					</div>
-				{:else if !statsSubmitted}
-					<div class="mt-6 text-sm opacity-80">
-						Submitting stats...
-					</div>
-				{/if}
-			</div>
+			<WinScreen
+				{grade}
+				{statsData}
+				{correctBookId}
+				{handleShare}
+				bind:copied
+				{statsSubmitted}
+			/>
 		{/if}
 
-		<!-- Guesses Grid -->
-		<div class="bg-white rounded-2xl shadow-xl overflow-x-auto">
-			<table class="w-full">
-				<thead>
-					<tr class="bg-linear-to-r from-gray-50 to-gray-300">
-						<th
-							class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
-							>Book</th
-						>
-						<th
-							class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
-							>Testament</th
-						>
-						<th
-							class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
-							>Section</th
-						>
-					</tr>
-				</thead>
-				<tbody>
-					{#each guesses as guess (guess.book.id)}
-						<tr
-							class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
-						>
-							<td
-								class="p-3 sm:p-4 md:p-6 text-sm sm:text-base font-bold md:text-lg"
-							>
-								{guess.book.id === correctBookId ? "✅" : "❌"}
-								{guess.book.name}
-							</td>
-							<td
-								class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
-							>
-								{guess.testamentMatch ? "✅" : "🟥"}
-								{guess.book.testament.charAt(0).toUpperCase() +
-									guess.book.testament.slice(1).toLowerCase()}
-							</td>
-							<td
-								class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
-							>
-								{guess.sectionMatch ? "✅" : "🟥"}
-								{guess.adjacent ? "‼️ " : ""}{guess.book
-									.section}
-							</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-		</div>
+		<GuessesTable {guesses} {correctBookId} />
 		{#if isWon}
-			<div
-				class="mt-12 p-4 bg-linear-to-r from-blue-50 to-indigo-50 rounded-2xl shadow-md text-center text-sm md:text-base text-gray-600"
-				in:fade={{ delay: 1500, duration: 1000 }}
-			>
-				Thank you so much for playing! Feel free to email me directly
-				with feedback:
-				<a
-					href="mailto:george@snail.city"
-					class="font-semibold text-blue-600 hover:text-blue-800 underline"
-					>george@snail.city</a
-				>
-			</div>
+			<Feedback />
 		{/if}
 	</div>
 </div>

src/routes/dev/+page.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+
+	let localTime = $state("");
+	let utcTime = $state("");
+	let countdown = $state("00:00:00");
+	let todayDate = $state("");
+	let nextDate = $state("");
+
+	let interval: NodeJS.Timeout | undefined;
+
+	$effect(() => {
+		if (!browser) return;
+
+		function update() {
+			const now = new Date();
+
+			localTime = now.toLocaleString();
+			utcTime = now.toISOString().slice(0, -5); // without ms
+			todayDate = now.toLocaleDateString("en-US");
+
+			const nextMidnight = new Date(
+				now.getFullYear(),
+				now.getMonth(),
+				now.getDate() + 1,
+				0,
+				0,
+				0,
+				0,
+			);
+			nextDate = nextMidnight.toLocaleDateString("en-US");
+
+			const diff = nextMidnight.getTime() - now.getTime();
+			const hours = Math.floor(diff / (1000 * 60 * 60));
+			const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+			const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+			countdown = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+		}
+
+		update();
+		interval = setInterval(update, 1000);
+
+		return () => {
+			if (interval) clearInterval(interval);
+		};
+	});
+</script>
+
+<svelte:head>
+	<title>Bibdle Dev Debug</title>
+</svelte:head>
+
+<div class="min-h-dvh bg-linear-to-br from-blue-50 to-indigo-100 py-8">
+	<div
+		class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] max-w-md sm:max-w-lg md:max-w-2xl lg:max-w-4xl mx-auto px-2 sm:px-4"
+	>
+		<h1
+			class="text-3xl md:text-4xl font-bold text-center text-gray-800 p-8 sm:p-12 drop-shadow-lg"
+		>
+			Bibdle <span class="font-normal text-blue-600">Dev Debug</span>
+		</h1>
+
+		<div
+			class="bg-white rounded-2xl shadow-xl p-8 sm:p-12 mb-8 sm:mb-12 max-w-full sm:max-w-2xl md:max-w-3xl mx-auto space-y-8"
+		>
+			<div class="text-center">
+				<h2 class="text-xl font-bold mb-4">Browser Local Time</h2>
+				<p class="text-2xl font-mono bg-gray-100 p-4 rounded-xl">
+					{localTime}
+				</p>
+			</div>
+
+			<div class="text-center">
+				<h2 class="text-xl font-bold mb-4">UTC Time</h2>
+				<p class="text-2xl font-mono bg-gray-100 p-4 rounded-xl">
+					{utcTime}
+				</p>
+			</div>
+
+			<div class="text-center">
+				<h2 class="text-xl font-bold mb-4">Today (Browser Local)</h2>
+				<p class="text-xl font-mono bg-gray-100 p-4 rounded-xl">
+					{todayDate}
+				</p>
+			</div>
+
+			<div>
+				<h2
+					class="text-2xl md:text-3xl font-bold text-center mb-8 drop-shadow-lg"
+				>
+					Countdown to Next Bible Verse (Midnight, local browser time)
+				</h2>
+				<div
+					class="bg-linear-to-r from-indigo-500 to-purple-600 text-black p-8 sm:p-12 rounded-2xl shadow-2xl text-center"
+				>
+					<p
+						class="text-5xl md:text-6xl font-black mb-4 tracking-wider"
+					>
+						{countdown}
+					</p>
+					<p class="text-lg opacity-90">Next date: {nextDate}</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>