initial styles, layout, folder structure

This commit is contained in:
2025-06-25 01:23:01 +03:00
parent c9a67204e3
commit 9292911008
10 changed files with 40 additions and 20 deletions

View File

@@ -1 +1,7 @@
@import 'tailwindcss';
.syne-mono-regular {
font-family: "Syne Mono", monospace;
font-weight: 400;
font-style: normal;
}

View File

@@ -1,12 +1,18 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap" rel="stylesheet">
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<body data-sveltekit-preload-data="hover" class="bg-black text-white syne-mono-regular">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

View File

View File

View File

View File

@@ -17,15 +17,23 @@
}
</script>
<div class="flex min-h-screen flex-col items-center justify-center">
{#if !getPosition}
<button onclick={flipGetPosition}> Find yourself </button>
<button class="animate-pulse cursor-crosshair text-xl" onclick={flipGetPosition}>
Let me show you...
</button>
{:else if loading}
<p>Loading...</p>
<p class="text-xl">Loading...</p>
{:else if error}
<p>We can't seem to find you.</p>
<p class="text-xl">We can't seem to find you.</p>
{:else}
<p>Your Position is set as: {position?.coords?.latitude}, {position?.coords?.longitude}</p>
<button onclick={goToPlayer}>Ok, on-out with it</button>
<p class="mb-5 text-xl">
Your Position is set as: {position?.coords?.latitude}, {position?.coords?.longitude}
</p>
<button class="animate-pulse cursor-crosshair text-lg" onclick={goToPlayer}
>Ok, on-out with it</button
>
{/if}
</div>
<Geolocation {getPosition} bind:position bind:loading bind:error />

View File