redirect to bibdle.dev and components

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>