79 lines
2.3 KiB
Svelte
79 lines
2.3 KiB
Svelte
<script>
|
|
import Menu from '../components/header.svelte'
|
|
import Footer from '../components/footer.svelte'
|
|
const title = "Svelte"
|
|
const page = "/"
|
|
</script>
|
|
<svelte:head>
|
|
<title>OwlBoard - {title}</title>
|
|
</svelte:head>
|
|
|
|
|
|
<Menu {title} />
|
|
<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> |