v2.1: stylistic updates & countdown timer

.gitignore

@@ -24,5 +24,3 @@ vite.config.ts.timestamp-*
 
 # SQLite
 *.db
-
-*.txt

src/hooks.server.ts

@@ -1,12 +1,7 @@
 import type { Handle } from '@sveltejs/kit';
 import * as auth from '$lib/server/auth';
-import { redirect } from '@sveltejs/kit';
 
 const handleAuth: Handle = async ({ event, resolve }) => {
-	if (event.url.hostname === 'bibdle.orthodox.cafe') {
-		throw redirect(301, `https://bibdle.com${event.url.pathname}${event.url.search}${event.url.hash}`);
-	}
-
 	const sessionToken = event.cookies.get(auth.sessionCookieName);
 
 	if (!sessionToken) {

src/lib/components/CountdownTimer.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+
+	let timeUntilNext = $state("");
+	let intervalId: number | null = null;
+
+	function calculateTimeUntilFivePM(): string {
+		const now = new Date();
+		const target = new Date(now);
+
+		// Set target to 5:00 PM today
+		target.setHours(17, 0, 0, 0);
+
+		// If it's already past 5:00 PM, set target to tomorrow 5:00 PM
+		if (now.getTime() >= target.getTime()) {
+			target.setDate(target.getDate() + 1);
+		}
+
+		const diff = target.getTime() - now.getTime();
+
+		if (diff <= 0) {
+			return "00:00:00";
+		}
+
+		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);
+
+		return `${hours.toString().padStart(2, "0")}h ${minutes
+			.toString()
+			.padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
+	}
+
+	function calculateTimeUntilMidnight(): string {
+		const now = new Date();
+		const target = new Date(now);
+
+		// Set target to midnight today
+		target.setHours(0, 0, 0, 0);
+
+		// If it's already past midnight, set target to tomorrow midnight
+		if (now.getTime() >= target.getTime()) {
+			target.setDate(target.getDate() + 1);
+		}
+
+		const diff = target.getTime() - now.getTime();
+
+		if (diff <= 0) {
+			return "00:00:00";
+		}
+
+		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);
+
+		return `${hours.toString().padStart(2, "0")}h ${minutes
+			.toString()
+			.padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
+	}
+
+	function updateTimer() {
+		timeUntilNext = calculateTimeUntilMidnight();
+	}
+
+	onMount(() => {
+		updateTimer();
+		intervalId = window.setInterval(updateTimer, 1000);
+	});
+
+	onDestroy(() => {
+		if (intervalId) {
+			clearInterval(intervalId);
+		}
+	});
+</script>
+
+<div class="text-center py-12">
+	<div
+		class="inline-flex flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm"
+	>
+		<p
+			class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mb-2"
+		>
+			Next Verse In
+		</p>
+		<p class="text-4xl font-triodion font-black text-gray-800 tabular-nums">
+			{timeUntilNext}
+		</p>
+	</div>
+</div>

src/lib/components/Feedback.svelte

@@ -2,7 +2,7 @@
 	import { fade } from "svelte/transition";
 </script>
 
-<div
+<!-- <div
 	class="my-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 }}
 >
@@ -12,4 +12,17 @@
 		class="font-semibold text-blue-600 hover:text-blue-800 underline"
 		>george@snail.city</a
 	>
+</div> -->
+
+<div class="text-center py-12">
+	<div
+		class="inline-flex w-full flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm"
+	>
+		<p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold">
+			A project by George Powell & Silent Summit Co.
+		</p>
+		<!-- <p class="text-4xl font-triodion font-black text-gray-800 tabular-nums">
+			
+		</p> -->
+	</div>
 </div>

src/lib/components/GuessesTable.svelte

@@ -38,7 +38,10 @@
 		<tbody>
 			{#each guesses as guess (guess.book.id)}
 				<tr
-					class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
+					class="border-b border-gray-100 transition-colors {guess
+						.book.id === correctBookId
+						? 'bg-green-200 animate-shine'
+						: 'hover:bg-gray-50'}"
 				>
 					<td
 						class="p-3 sm:p-4 md:p-6 text-sm sm:text-base font-bold md:text-lg"
@@ -64,3 +67,25 @@
 		</tbody>
 	</table>
 </div>
+
+<style>
+	@keyframes shine {
+		0% {
+			background-position: -200% 0;
+		}
+		100% {
+			background-position: 200% 0;
+		}
+	}
+
+	.animate-shine {
+		background: linear-gradient(
+			110deg,
+			#dcffe7 45%,
+			#f1fff5 50%,
+			#dcffe7 55%
+		);
+		background-size: 200% 100%;
+		animation: shine 5s infinite;
+	}
+</style>

src/lib/components/VerseDisplay.svelte

@@ -5,9 +5,9 @@
 	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">
+<div class="bg-gray-50 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"
+		class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
 	>
 		{dailyVerse.verseText}
 	</blockquote>

src/lib/components/WinScreen.svelte

@@ -29,6 +29,7 @@
 	let hasWebShare = $derived(
 		typeof navigator !== "undefined" && "share" in navigator,
 	);
+	let copySuccess = $state(false);
 
 	// List of congratulations messages with weights
 	const congratulationsMessages: WeightedMessage[] = [
@@ -72,8 +73,7 @@
 </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"
+	class="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">
 		{congratulationsMessage}
@@ -98,11 +98,21 @@
 			📤 Share
 		</button>
 		<button
-			onclick={copyToClipboard}
+			onclick={() => {
+				copyToClipboard();
+				copySuccess = true;
+				setTimeout(() => {
+					copySuccess = false;
+				}, 3000);
+			}}
 			data-umami-event="Copy to Clipboard"
-			class="mt-4 text-2xl font-bold p-2 bg-white/20 hover:bg-white/30 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
+			class={`mt-4 text-2xl font-bold p-2 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
+				copySuccess
+					? "bg-green-400/50 hover:bg-green-500/60"
+					: "bg-white/20 hover:bg-white/30"
+			}`}
 		>
-			📋 Copy to clipboard
+			{copySuccess ? "✅ Copied!" : "📋 Copy to clipboard"}
 		</button>
 	{:else}
 		<button

src/routes/+page.server.ts

@@ -9,13 +9,16 @@ import type { DailyVerse } from '$lib/server/db/schema';
 import crypto from 'node:crypto';
 
 async function getTodayVerse(): Promise<DailyVerse> {
+	// Get the current date (server-side)
 	const dateStr = new Date().toLocaleDateString('en-CA', { timeZone: 'America/New_York' });
 
+	// If there's an existing verse for the current date, return it
 	const existing = await db.select().from(dailyVerses).where(eq(dailyVerses.date, dateStr)).limit(1);
 	if (existing.length > 0) {
 		return existing[0];
 	}
 
+	// Otherwise get a new random verse
 	const apiVerse = await fetchRandomVerse();
 	const createdAt = sql`${Math.floor(Date.now() / 1000)}`;
 

src/routes/+page.svelte

@@ -7,6 +7,7 @@
 	import VerseDisplay from "$lib/components/VerseDisplay.svelte";
 	import SearchInput from "$lib/components/SearchInput.svelte";
 	import GuessesTable from "$lib/components/GuessesTable.svelte";
+	import CountdownTimer from "$lib/components/CountdownTimer.svelte";
 	import WinScreen from "$lib/components/WinScreen.svelte";
 	import Feedback from "$lib/components/Feedback.svelte";
 	import { getGrade } from "$lib/utils/game";
@@ -348,7 +349,7 @@
 		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"
+			class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-8 sm:p-12"
 		>
 			Bibdle <span class="font-normal">{isDev ? "dev" : ""}</span>
 		</h1>
@@ -368,6 +369,7 @@
 				{statsSubmitted}
 				guessCount={guesses.length}
 			/>
+			<CountdownTimer />
 		{/if}
 
 		<GuessesTable {guesses} {correctBookId} />

src/routes/layout.css

@@ -1,2 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Triodion&family=Young+Serif&display=swap');
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
+
+@theme {  
+	--font-triodion: "PT Serif", serif; 
+}

static/fonts/Triodion/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2025 The Triodion Project Authors (https://github.com/slavonic/Triodion.git)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

todo.md

@@ -1,8 +1,8 @@
 # todo
 
-## v3
+- dark mode between sunset and sunrise
 
-- HH:MM until next verse (sundown local time)
+- light mode after sunrise
 
 	- https://github.com/GitSquared/node-geolite2-redist
 	  get approximate user location from IP
@@ -10,15 +10,33 @@
 	  get sunrise/sunset times by lat/longitude
 	
 - top XX% next to the "rank" stat on complete
-- 
+
+- click here for impossible mode (1894 scrivener new testament or some hebrew version)
+
+- hovering or tapping BIBDLE fades in and out to BIBLE DAILY
 
 # bibdle unlimited
 
 - pay for unlimited bible verses daily,
 - and extra features like multiple choice, custom groups, custom leaderboards, etc.
 
+
+# places to send
+
+- linkedin post
+- ocf discord server
+- 
+
 # done
 
+## december 21st
+- HH:MM until next verse 
+
+- triodion font for verse
+
+- custom verses for Christmas Eve and Christmas
+
+## before december 19th
 - improve design (uniform column widths on desktop)
 
 - moved to bibdle.com

vite.config.ts

@@ -5,6 +5,6 @@ import { defineConfig } from 'vite';
 export default defineConfig({
 	plugins: [tailwindcss(), sveltekit()],
 	server: {
-		allowedHosts: ['bibdle.orthodox.cafe']
+		allowedHosts: ['bibdle.com']
 	}
 });