FEAT: Added barebones input form

.prettierrc

@@ -1,5 +1,6 @@
 {
-	"useTabs": true,
+	"useTabs": false,
+	"tabWidth": 4,
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,

package.json

@@ -39,5 +39,8 @@
 		"onlyBuiltDependencies": [
 			"esbuild"
 		]
+	},
+	"dependencies": {
+		"svelte-toasts": "^1.1.2"
 	}
 }

pnpm-lock.yaml

@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      svelte-toasts:
+        specifier: ^1.1.2
+        version: 1.1.2
     devDependencies:
       '@sveltejs/adapter-node':
         specifier: ^5.2.12
@@ -1170,6 +1174,9 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       typescript: '>=5.0.0'
 
+  svelte-toasts@1.1.2:
+    resolution: {integrity: sha512-m+yL4eEKXyJoyjTYaH1j1GFwF0Pi8YDqnVfwWPDmwi4712iZesv+TNCmToSNlav3R5Vkmc8ZBRkT8DOcu3sywQ==}
+
   svelte@5.34.6:
     resolution: {integrity: sha512-dNhOyaHEHXItGojz2e6aCeoU0FUD+teDcbqJkPI/iMBMKwP9MyHtXYRKIzN4ehlBnLB6Do0pUY0RUSZQ/Zpcog==}
     engines: {node: '>=18'}
@@ -2277,6 +2284,8 @@ snapshots:
     transitivePeerDependencies:
       - picomatch
 
+  svelte-toasts@1.1.2: {}
+
   svelte@5.34.6:
     dependencies:
       '@ampproject/remapping': 2.3.0

src/lib/components/Cards/Card.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    // Allows additional styling to be applied to the Card component's outer wrapping
+    export let containerStyle: string = "";
+</script>
+
+<div class={containerStyle}>
+    <div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
+        <div class="text-red-400 font-bold flex flex-row justify-between items-center mb-4">
+            <slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
+            <slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
+        </div>
+        <hr class="border-1" />
+        <div class="flex-1 flex flex-col justify-center mt-4 mb-8">
+            <slot name="content"/>
+        </div>
+        
+        <hr class="border-1" />
+        <div class="flex flex-row justify-between items-center mt-4 text-base opacity-90">
+            <slot name="footerLeft"/>
+            <slot name="footerRight"/>
+        </div>
+    </div>
+</div>

src/lib/components/Collapsible.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    export let open = false;
+</script>
+
+<div class="w-full">
+    <button
+        type="button"
+        class="flex items-center justify-between w-full px-2 py-2 text-left rounded hover:font-bold transition group"
+        on:click={() => open = !open}
+        aria-expanded={open}
+    >
+        <span><slot name="label"/></span>
+        <svg
+            class="w-5 h-5 ml-2 transition-transform duration-200"
+            style="transform: rotate({open ? 90 : 0}deg)"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+        >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+        </svg>
+    </button>
+    <div
+        class="overflow-hidden transition-all duration-300"
+        style="max-height: {open ? '1000px' : '0'}"
+        aria-hidden={!open}
+    >
+        <div class="pt-2">
+            <slot name="content"/>
+        </div>
+    </div>
+</div>

src/lib/components/GridGallery.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+</script>
+
+<!-- GridGallery.svelte -->
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
+    <slot />
+</div>

src/lib/components/Loading.svelte

@@ -0,0 +1,73 @@
+<style>
+    .loader {
+        position: absolute;
+        top: calc(50% - 32px);
+        left: calc(50% - 32px);
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        perspective: 800px;
+    }
+
+    .inner {
+        position: absolute;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+    }
+
+    .inner.one {
+        left: 0%;
+        top: 0%;
+        animation: rotate-one 1s linear infinite;
+        border-bottom: 3px solid gray;
+    }
+
+    .inner.two {
+        right: 0%;
+        top: 0%;
+        animation: rotate-two 1s linear infinite;
+        border-right: 3px solid gray;
+    }
+
+    .inner.three {
+        right: 0%;
+        bottom: 0%;
+        animation: rotate-three 1s linear infinite;
+        border-top: 3px solid gray;
+    }
+
+    @keyframes rotate-one {
+        0% {
+            transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+        }
+        100% {
+            transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+        }
+    }
+
+    @keyframes rotate-two {
+        0% {
+            transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+        }
+        100% {
+            transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+        }
+    }
+
+    @keyframes rotate-three {
+        0% {
+            transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+        }
+        100% {
+            transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+        }
+    }
+</style>
+
+<div class="loader">
+    <div class="inner one"></div>
+    <div class="inner two"></div>
+    <div class="inner three"></div>
+</div>

src/lib/components/Section.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    export let label: string = "";
+</script>
+
+<div id={label} class="relative flex flex-row w-full min-h-[300px] mt-5 mb-25">
+    <!-- Sticky/Sliding Label -->
+    <div class="hidden md:flex flex-col items-center mr-6">
+        <div class="sticky top-24 left-0 z-10">
+            <span class="text-2xl font-bold text-blue-400 tracking-widest"
+                  style="writing-mode: vertical-rl; text-orientation: mixed;">
+                {label}
+            </span>
+        </div>
+    </div>
+    <!-- Main Content -->
+    <div class="flex-1 flex flex-col">
+        <!-- Label for mobile -->
+        <div class="md:hidden mb-2">
+            <span class="text-2xl font-bold text-blue-400">{label}</span>
+        </div>
+        <hr class="border-blue-400 mb-6" />
+        <div>
+            <slot />
+        </div>
+    </div>
+</div>

src/lib/components/Timeline.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import Collapsible from "./Collapsible.svelte";
+
+    export let timelineData: Array<{
+        title: string;
+        description: string;
+        duration: string;
+    }>;
+</script>
+
+<div class="flex flex-col items-center justify-center">
+  <div class="max-w-4xl w-full">
+    {#each timelineData as entry, i}
+      <div class="relative border-l border-gray-700 pl-8 pb-12">
+        {#if i == 0}
+          <div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">&diams;</div>
+        {:else}
+          <div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">&diam;</div>
+        {/if}
+        <p class="text-sm opacity-70">{entry.duration}</p>
+
+        <Collapsible open={i==0}>
+          <span slot="label" class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition">{entry.title}</span>
+          <span slot="content">{@html entry.description}</span>
+        </Collapsible>
+      </div>
+    {/each}
+  </div>
+</div>

src/routes/+layout.svelte

@@ -1,7 +1,60 @@
 <script lang="ts">
-	import '../app.css';
+    import { ToastContainer, FlatToast } from 'svelte-toasts';
+    import '../app.css';
 
-	let { children } = $props();
+    import Section from '$lib/components/Section.svelte';
+    import Card from '$lib/components/Cards/Card.svelte';
+
+    let { children } = $props();
 </script>
 
-{@render children()}
+<div
+    class="sm:text-md flex min-h-screen flex-col gap-5 bg-white px-8 py-4 font-mono text-slate-600 transition duration-1000 ease-in-out md:text-2xl dark:bg-slate-900/90 dark:text-slate-200/60"
+>
+    <nav
+        class="text-xxl flex w-full items-center justify-center gap-10 px-8 py-4 font-semibold text-green-600"
+    >
+        <a href="/" class="hover:underline">METAR &#9925;</a>
+		<a href="/taf" class="hover:underline">TAF &#9748;</a>
+    </nav>
+
+    <div class="container mx-auto flex flex-col items-center justify-center">
+        <!-- Input Form -->
+        <Section label="[Input]">
+            <Card>
+                <h2 slot="headerLeft">METARIUS</h2>
+                <h2 slot="headerRight">Start Here</h2>
+                <form
+                    slot="content"
+                    class="mx-auto flex w-full max-w-3xl flex-col gap-4 text-lg"
+                    action="https://api.staticforms.xyz/submit"
+                    method="post"
+                >
+                    <div class="flex-space-between flex flex-col gap-10 md:flex-row">
+                        <div class="flex-1">
+                            <p>
+                                Enter a valid ICAO code in the box to the right and await magic...
+                            </p>
+                        </div>
+                        <div class="flex-1">
+                            <label class="mb-1 block text-xs font-medium" for="ICAO">ICAO</label>
+                            <input
+                                id="ICAO"
+                                name="ICAO"
+                                type="ICAO"
+                                class="w-full rounded-lg border border-gray-400 px-3 py-1.5 placeholder-gray-400 transition focus:ring-2 focus:ring-blue-600 focus:outline-none"
+                                maxlength="4"
+                                required
+                                placeholder="EGKK"
+                            />
+                        </div>
+                    </div>
+                </form>
+            </Card>
+        </Section>
+        {@render children()}
+        <ToastContainer let:data>
+            <FlatToast {data} />
+        </ToastContainer>
+    </div>
+</div>

src/routes/+page.svelte

@@ -1,2 +1,27 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+    import Section from '$lib/components/Section.svelte';
+    import Card from '$lib/components/Cards/Card.svelte';
+    import { toasts } from 'svelte-toasts';
+    import Loading from '$lib/components/Loading.svelte';
+</script>
+
+
+<div style="display: none;">
+    {toasts.add({
+        title: 'Welcome',
+        duration: 5000,
+        type: 'success',
+        placement: 'bottom-center',
+        showProgress: true
+    })}
+</div>
+
+<Section label="[Output]">
+    <Card>
+        <h2 slot="headerLeft">METAR</h2>
+        <h2 slot="headerRight">Results</h2>
+        <div slot="content" class="flex h-96 w-full items-center justify-center">
+            <Loading></Loading>
+        </div>
+    </Card>
+</Section>