Maurice/mausenpeet.nl
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Maurice
2024-05-02 21:23:18 +02:00
commit 7ca31b9b2c
26 changed files with 3445 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app.css Normal file
View File

@@ -0,0 +1,10 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'GreatVibes';
src: url('/fonts/GreatVibes-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

13
src/app.d.ts vendored Normal file
View File

@@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

12
src/app.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

84
src/lib/components/Counter.svelte Normal file
View File

@@ -0,0 +1,84 @@
<script lang="ts">
let { date }: {date: Date} = $props();
function getTimeDifference(date1: Date, date2: Date) {
// Calculate the difference in milliseconds
const diff = Math.abs(date2.getTime() - date1.getTime());
// Time constants
const msPerSecond = 1000;
const msPerMinute = msPerSecond * 60;
const msPerHour = msPerMinute * 60;
const msPerDay = msPerHour * 24;
const msPerWeek = msPerDay * 7;
const msPerYear = msPerDay * 365;
// Calculate each component
const years = Math.floor(diff / msPerYear);
const weeks = Math.floor((diff % msPerYear) / msPerWeek);
const days = Math.floor((diff % msPerWeek) / msPerDay);
const hours = Math.floor((diff % msPerDay) / msPerHour);
const minutes = Math.floor((diff % msPerHour) / msPerMinute);
const seconds = Math.floor((diff % msPerMinute) / msPerSecond);
return {
years: years,
weeks: weeks,
days: days,
hours: hours,
minutes: minutes,
seconds: seconds
};
}
let timeDifference = $state(getTimeDifference(new Date(), date));
setInterval(() => {
timeDifference = getTimeDifference(new Date(), date);
}, 1000);
</script>
<div class="flex justify-center gap-2 flex-wrap font-['GreatVibes']">
{#if timeDifference.years > 0}
<div class="flex flex-col p-5 bg-secondary rounded-box text-secondary-content text-center">
<span class="countdown font-mono text-5xl">
<span style="--value:{timeDifference.years};"></span>
</span>
<span class="text-xl">{timeDifference.years <= 1 ? 'jaar' : 'jaren'}</span>
</div>
{/if}
{#if timeDifference.weeks > 0}
<div class="flex flex-col p-5 bg-primary rounded-box text-primary-content text-center">
<span class="countdown font-mono text-5xl">
<span style="--value:{timeDifference.weeks};"></span>
</span>
<span class="text-xl">{timeDifference.weeks <= 1 ? 'week' : 'weken'}</span>
</div>
{/if}
{#if timeDifference.days > 0}
<div class="flex flex-col p-5 bg-neutral rounded-box text-neutral-content text-center">
<span class="countdown font-mono text-5xl">
<span style="--value:{timeDifference.days};"></span>
</span>
<span class="text-xl">{timeDifference.days <= 1 ? 'dag' : 'dagen'}</span>
</div>
{/if}
<div class="flex flex-col p-5 bg-primary rounded-box text-primary-content text-center">
<span class="countdown font-mono text-5xl">
<span style="--value:{timeDifference.hours};"></span>
</span>
<span class="text-xl">{timeDifference.hours <= 1 ? 'uur' : 'uren'}</span>
</div>
<div class="flex flex-col p-5 bg-neutral rounded-box text-neutral-content text-center">
<span class="countdown font-mono text-5xl">
<span style="--value:{timeDifference.minutes};"></span>
</span>
<span class="text-xl">{timeDifference.minutes <= 1 ? 'minuut' : 'minuten'}</span>
</div>
<div class="flex flex-col p-5 bg-secondary rounded-box text-secondary-content text-center">
<span class="countdown font-mono text-5xl">
<span style="--value:{timeDifference.seconds};"></span>
</span>
<span class="text-xl">seconde</span>
</div>
</div>

5
src/lib/index.ts Normal file
View File

@@ -0,0 +1,5 @@
import Counter from "./components/Counter.svelte";
export { Counter };
// place files you want to import through the `$lib` alias in this folder.

5
src/routes/+layout.svelte Normal file
View File

@@ -0,0 +1,5 @@
<script>
import '../app.css';
</script>
<slot />

23
src/routes/+page.svelte Normal file
View File

@@ -0,0 +1,23 @@
<script>
import Counter from "$lib/components/Counter.svelte";
const date = new Date('2025-05-15T12:00:00');
const msPerDay = 60000 * 60 * 24;
const diff = Math.abs(date.getTime() - Date.now());
let daysLeft = Math.floor(diff / msPerDay);
</script>
<main class="m-5">
<article class="prose mx-auto pt-5">
<div class="text-center font-['GreatVibes']">
<h1 class="md:text-7xl text-5xl font-thin mb-0 pb-0">Maurice & Petra</h1>
<h2 class="mt-0 pt-0 md:text-5xl text-3xl font-thin text-primary">trouwen {date.toLocaleDateString()}</h2>
<Counter {date} />
<p class="text-2xl">Dus nog <span class="text-primary">{daysLeft}</span> nachtjes slapen</p>
</div>
</article>
</main>