Begin migration to new Cards component

src/lib/cards/Card.svelte

@@ -61,13 +61,14 @@
     .actions {
         display: flex;
         position: absolute;
+        top: 5px;
         right: 0;
         display: flex;
-        gap: 1px
+        gap: 0px
     }
 
     .content {
-        margin-top: 16px;
+        margin-top: 5px;
     }
 
     button {
@@ -75,5 +76,10 @@
         color: white;
         background: none;
         border: none;
+        transition: all 0.3s ease;
+    }
+
+    button:hover {
+        color: var(--island-header-color);
     }
 </style>

src/lib/cards/NearToMeCard.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { getCurrentLocation } from "$lib/scripts/getLocation";
+    import toast from "svelte-french-toast";
+    import Card from "./Card.svelte";
+    import type { CardConfig } from "./Card.types";
+    import type { NearestStationResponse } from "@owlboard/ts-types";
+    import { uuid } from "$lib/stores/uuid";
+    import { location } from "$lib/stores/location";
+
+    let stations: NearestStationResponse[];
+
+    let config: CardConfig = {
+        title: "Near to Me",
+        showHelp: true,
+        showRefresh: true,
+        helpText: "Your location may not be accurate, particularly on desktop and laptop devices.",
+        onRefresh: refresh
+    }
+
+    function turnOnLocation() {
+        location.set(true)
+        getCurrentLocation();
+        toast.success("Done\nTo disable location, go to settings")
+    }
+
+    function refresh() {getNearestStations()}
+
+    async function getNearestStations() {
+        // Get location, then fetch nearest stations and push to `stations` variable
+    }
+</script>
+
+<Card {config}>
+    {#if !$uuid || $uuid === "null"}
+        <p><a href="/more/reg">Register to use this feature</a></p>
+    {:else}
+        {#if $location}
+            {#if !stations}
+                <p>Fetching locations...</p>
+            {:else}
+                {#each stations as station}
+                    <a href="/ldb?station={station["3ALPHA"]}">{station.NLCDESC} - {station.miles}mi</a>
+                {/each}
+            {/if}
+        {:else}
+            <p><button on:click={turnOnLocation}>Turn on Location</button></p>
+        {/if}
+    {/if}
+</Card>
+
+<style>
+    a, button {
+        color: aliceblue;
+        text-decoration: none;
+        margin: auto;
+        padding: 5px 10px;
+        background-color: var(--island-button-color);
+        border: none;
+        border-radius: 20px;
+        box-shadow: var(--box-shadow);
+        transition: all 0.3s ease;
+    }
+
+    a:hover, button:hover {
+        background-color: rgb(45, 45, 45);
+        box-shadow: var(--box-shadow-dark);
+    }
+</style>

src/lib/navigation/header.svelte

@@ -46,6 +46,7 @@
         margin-top: 7px;
         margin-left: 20px;
         font-size: 15pt;
+        text-shadow: 0 3px 3px var(--box-shadow-color);
     }
 
     .headerBlock {

src/routes/test/+page.svelte

@@ -2,6 +2,7 @@
     import Card from "$lib/cards/Card.svelte";
     import type { LookupCardConfig } from "$lib/cards/Card.types";
     import LookupCard from "$lib/cards/LookupCard.svelte";
+    import NearToMeCard from "$lib/cards/NearToMeCard.svelte";
 
     let CardConfig = {
         title: "Near to Me",
@@ -34,9 +35,6 @@
     }
 </script>
 
-<Card config={CardConfig}>
-    <p>content</p>
-</Card>
-
 <LookupCard config={LookupConfig} />
 <LookupCard config={TimetableConfig} />
+<NearToMeCard />