More TEsting

src/routes/+page.svelte

@@ -1,7 +1,8 @@
 <script>
 import Menu from '../components/header.svelte'
-export const prerender = true;
-const title = "owlboard-svelte"
+import Footer from '../components/footer.svelte'
+const title = "Svelte"
+const page = "/"
 </script>
 <svelte:head>
     <title>OwlBoard - {title}</title>
@@ -9,4 +10,70 @@ const title = "owlboard-svelte"
 
 
 <Menu {title} />
-<p><a href="/public-board?zzz">public-board</a></p>
+<div class="form-box">
+    <form action="/ldb">
+        <span class="input-title">Live Departure Boards</span>
+        <br>
+        <input class="form-input" type="text" id="input-station" name="station" placeholder="Enter CRS/TIPLOC">
+        <br>
+        <button class="form-button" type="submit">Submit</button>
+    </form>
+</div>
+<div class="form-box">
+    <form action="/result-timetable">
+        <span class="input-title">Find Train</span>
+        <br>
+        <input class="form-input" type="text" id="input-headcode" name="headcode" placeholder="Enter Headcode">
+        <br>
+        <button class="form-button" type="submit">Submit</button>
+    </form>
+</div>
+<div class="form-box">
+    <span class="input-title">Quick Links</span>
+    <div class="quick-links">
+    </div>
+</div>
+<Footer {page} />
+
+<style>
+    .input-title {
+        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        font-weight: 600;
+        font-size: 20px;
+    }
+    .form-box {
+        width: 75%;
+        max-width: 400px;
+        margin: auto;
+        margin-top: 25px;
+        padding: 10px;
+        background-color: var(--overlay-color);
+        border-radius: 10px;
+    }
+    .form-input {
+        width: 75%;
+        height: 30px;
+        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;
+    }
+    .form-button {
+        width: 50%;
+        margin-bottom: 5px;
+        margin-top: 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;
+        background-color: var(--main-bg-color);
+        color: var(--link-color);
+    }
+    .quick-links {
+        display: flex;
+    }
+</style>

src/routes/ldb/+page.svelte

@@ -0,0 +1,25 @@
+<script>
+   import Menu from '../../components/header.svelte'
+   import Footer from '../../components/footer.svelte'
+   
+   import {onMount} from 'svelte'
+
+   const title = "Public Board"
+   const page = "ldb"
+
+   async function getHeadcode() {
+        return new URLSearchParams(window.location.search).get('station');
+    }
+
+    onMount(async () => {
+        const headcode = await getHeadcode();
+        document.getElementById('station').textContent = headcode;
+    })
+
+</script>
+
+<Menu {title} />
+
+<p>Station: <span id="station"></span></p>
+
+<Footer {page} />

src/routes/more/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+    import Menu from '../../components/header.svelte'
+    import Footer from '../../components/footer.svelte'
+    
+    const title = "More"
+    const page = "more"
+ </script>
+ 
+ <Menu {title} />
+ 
+ <p></p>
+ 
+ <Footer {page} />

src/routes/pis/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+    import Menu from '../../components/header.svelte'
+    import Footer from '../../components/footer.svelte'
+    
+    const title = "PIS"
+    const page = "more"
+ </script>
+ 
+ <Menu {title} />
+ 
+ <p></p>
+ 
+ <Footer {page} />

src/routes/public-board/+page.svelte

@@ -1,9 +0,0 @@
-<script>
-   import Menu from '../../components/header.svelte'
-   const testText = "This should not appear in markup"
-   const title = "Public Board"
-</script>
-
-<Menu {title} />
-
-<p>{testText}</p>

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

@@ -0,0 +1,33 @@
+<script>
+    import Menu from '../../components/header.svelte'
+    import Footer from '../../components/footer.svelte'
+    
+    import { onMount } from 'svelte'
+
+    const title = "Timetable Results"
+    const page = "more"
+
+    async function getHeadcode() {
+        return new URLSearchParams(window.location.search).get('headcode');
+    }
+
+    onMount(async () => {
+        const headcode = await getHeadcode();
+        document.getElementById('headcode').textContent = headcode;
+        const data = await fetch(`https://owlboard.info/api/v1/train/headcode/today/${headcode}`)
+        document.getElementById('data_raw').textContent = data.text;
+    })
+
+ </script>
+ 
+ <svelte:head>
+    <title>OwlBoard {title}</title>
+ </svelte:head>
+
+ <Menu {title} />
+ 
+ <p>Headcode: <span id="headcode"></span></p>
+
+ <p id="data_raw"></p>
+ 
+ <Footer {page} />