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'; @import 'tailwindcss';
.syne-mono-regular {
font-family: "Syne Mono", monospace;
font-weight: 400;
font-style: normal;
}

View File

@@ -1,12 +1,18 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <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% %sveltekit.head%
</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> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

View File

View File

View File

View File

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

View File