Further componentisation and advancements to homepage

src/lib/islands/input-island.svelte

@@ -8,22 +8,26 @@
     };
 </script>
 
+<Island {variables}>
 <form action={variables.action}>
     <input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder}>
     <br>
     <button class="form-button" type="submit">Submit</button>
 </form>
+</Island>
 
 <style>
     .form-input {
         width: 75%;
-        height: 30px;
+        height: 32px;
         margin-top: 5px;
         margin-bottom: 5px;
         border-radius: 50px;
         border: none;
         text-align: center;
         font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        text-transform: uppercase;
+        font-size: 15px;
     }
     .form-button {
         width: 50%;

src/lib/islands/island.svelte

@@ -1,9 +1,9 @@
 <script>
-    export const title = "Uninitialised"
+    export let variables = {title:"UNDEF"}
 </script>
 
 <div>
-    <span>{title}</span>
+    <span>{variables.title}</span>
     <slot />
 </div>
 
@@ -14,7 +14,7 @@ span {
     font-size: 20px;
 }
 div {
-    width: 75%;
+    width: 85%;
     max-width: 400px;
     margin: auto;
     margin-top: 25px;

src/lib/islands/quick-link-island.svelte

@@ -1,4 +1,57 @@
 <script>
+    import Island from "$lib/islands/island.svelte";
+    export let variables = {
+        title: "Quick Links",
+    };
 
+    let quicklinks = ['avn','1f21','2c98','bru','bri','bth','olf']
 </script>
 
+<Island {variables}>
+
+    {#if !quicklinks.length}
+    <p>Go to <a href="/null">settings</a> to add your Quick Links</p>
+    {/if}
+    <div class="buttons">
+        {#each quicklinks as link}
+            {#if link.length === 3}
+                <a class="link" href="/ldb?station={link}">
+                   {link.toUpperCase()}
+                </a>
+            {:else if link.length === 4}
+                <a class="link" href="/result-timetable?headcode={link}">
+                    {link.toUpperCase()}
+                </a>
+            {/if}
+        {/each}
+    </div>
+
+</Island>
+
+<style>
+    .buttons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        width: 90%;
+        margin: auto;
+        padding-top: 5px;
+    }
+    .link {
+        flex: 1;
+        width: 20%;
+        min-width: 50px;
+        margin: 5px;
+        border: none;
+        border-radius: 20px;
+        padding: 5px;
+        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        text-decoration: none;
+        background-color: var(--main-bg-color);
+        color: var(--link-color);
+    }
+</style>
+

src/routes/+page.svelte

@@ -1,7 +1,8 @@
 <script>
-import Header from '$lib/header.svelte'
+    import Header from '$lib/navigation/header.svelte'
-import Nav from '$lib/navigation/nav.svelte'
+    import Nav from '$lib/navigation/nav.svelte'
-import InputIsland from '$lib/islands/input-island.svelte'
+    import InputIsland from '$lib/islands/input-island.svelte'
+	import QuickLinkIsland from '$lib/islands/quick-link-island.svelte';
 
 const title = "Home"
 const inputIslands = [
@@ -32,8 +33,6 @@ const variables = {title: "test",action:"/", placeholder:"test",queryName:"test"
     <InputIsland {variables} />
 {/each}
 
+<QuickLinkIsland />
+
 <Nav />
-
-<style>
-
-</style>

src/routes/ldb/+page.svelte

@@ -1,11 +1,10 @@
 <script>
-   import Header from '$lib/header.svelte'
+   import Header from '$lib/navigation/header.svelte'
    import Nav from '$lib/navigation/nav.svelte'
    
    import {onMount} from 'svelte'
 
    const title = "Public Board"
-   const page = "ldb"
 
    async function getHeadcode() {
         return new URLSearchParams(window.location.search).get('station');
@@ -20,7 +19,7 @@
         const station = await getHeadcode();
         document.getElementById('station').textContent = station;
         const data = await fetch(`https://owlboard.info/api/v1/ldb/${station}`);
-        const jsonData = await data.json();
+        const jsonData = await data.json()['GetStationBoardResult'];
         //document.getElementById('data_raw').textContent = JSON.stringify(await data.json());
     })
 
@@ -29,9 +28,9 @@
 <Header {title} />
 
 <p>Station: <span id="station"></span></p>
-{#each jsonData as item}
+{#each jsonData.trainServices.service as item}
-<p>{item.GetStationBoardResult.trainServices.service.operator}</p>
+<p>{item.operator}</p>
 {/each}
 
 
-<Nav {page} />
+<Nav />

src/routes/more/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-    import Header from '$lib/header.svelte'
+    import Header from '$lib/navigation/header.svelte'
     import Nav from '$lib/navigation/nav.svelte'
     const title = "More"   
     

src/routes/pis/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-    import Header from '$lib/header.svelte'
+    import Header from '$lib/navigation/header.svelte'
     import Nav from '$lib/navigation/nav.svelte'
     
     const title = "PIS"

src/routes/result-timetable/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-    import Header from '$lib/header.svelte'
+    import Header from '$lib/navigation/header.svelte'
     import Nav from '$lib/navigation/nav.svelte'
     
     import { onMount } from 'svelte'