george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-06-25 08:45:22 -04:00
Code Issues Packages Projects Releases Wiki Activity

Working fan mockup

Browse Source
This commit is contained in:
George Powell
2026-04-14 00:43:31 -04:00
parent 1c2f214963
commit a372db9b2c
3 changed files with 79 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/cards/+page.svelte
+18 -5
View File
@@ -1,22 +1,35 @@
<script lang="ts">
import FrontBack from "$lib/components/cards/FrontBack.svelte";
import CardFan from "$lib/components/cards/CardFan.svelte";
const sampleCards = [
{ front: "/cards/1_Corinthians_13_front.png", back: "/cards/1_Corinthians_13_back.png" },
{ front: "/cards/Esther_4_front.png", back: "/cards/Esther_4_back.png" },
{ front: "/cards/Psalms_front.png", back: "/cards/Psalms_back.png" },
{ front: "/cards/Revelation_12_13_15_front.png", back: "/cards/Revelation_12_13_15_back.png" }
];
</script>
<svelte:head>
<title>BIBDLE Cards</title>
</svelte:head>
<div class="text-center pb-72">Collectible Bible Verse Trading Cards</div>
<div class="min-h-dvh py-10 px-4">
<div class="text-center pb-96">Collectible Bible Verse Trading Cards</div>
<div class="min-h-dvh py-10 px-4 overflow-x-hidden">
<div class="max-w-3xl mx-auto">
<div class="flex justify-center">
<h2 class="text-xl font-semibold mb-6">Card Fan Demo</h2>
<p class="text-gray-400 mb-4">Cards will fan out after a few seconds...</p>
<div class="flex justify-center mb-96">
<CardFan cards={sampleCards} />
</div>
<div class="flex justify-center mb-96">
<FrontBack
front="/cards/Esther_4_front.png"
back="/cards/Esther_4_back.png"
/>
</div>
</div>
</div>