105 lines
2.3 KiB
Svelte
105 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import logo from '$lib/assets/round-logo.svg';
|
|
|
|
let isSpinning = $state(false);
|
|
|
|
function handleLogoTap() {
|
|
if (isSpinning) return;
|
|
isSpinning = true;
|
|
setTimeout(() => (isSpinning = false), 800);
|
|
}
|
|
</script>
|
|
|
|
<div class="logo-container">
|
|
<img
|
|
class="logo"
|
|
src={logo}
|
|
alt="OwlBoard Logo"
|
|
onclick={handleLogoTap}
|
|
class:animate={isSpinning}
|
|
/>
|
|
</div>
|
|
|
|
<section class="about">
|
|
<p class="copy">© 2022-2026 Frederick Boniface</p>
|
|
<p class="tagline">Created by train crew, for train crew</p>
|
|
<p class="amble">
|
|
OwlBoard was created in 2022, evolving from 'Athena' which just provided 'Quick Links' to Tiger
|
|
departure boards. The aim was to provide fast and easy access to the information we need on a
|
|
daily basis.
|
|
</p>
|
|
<p class="amble">
|
|
Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are
|
|
associated with the Roman Goddess as well as with wisdom. The name also links to Bath, where the
|
|
app has been built and is run, representing the 'Minerva Owl' sculpture trail in the city, with
|
|
many of the sculptures still in the area.
|
|
</p>
|
|
<p class="opensource">
|
|
Some components that combine to form OwlBoard are open-source, see the <a
|
|
href="https://git.fjla.uk"
|
|
target="_blank"
|
|
rel="noopener">Git reposititories</a
|
|
> for more info.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="data-sourcing">
|
|
<p>
|
|
Data is sourced from multiple providers, including <a
|
|
href="https://nationalrail.co.uk"
|
|
target="_blank"
|
|
rel="noopener noreferrer">National Rail Enquiries</a
|
|
> and Network Rail along side OwlBoard's own data
|
|
</p>
|
|
</section>
|
|
|
|
<style>
|
|
.logo-container {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
@keyframes owl-spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
15% {
|
|
transform: rotate(-20deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
padding-top: 25px;
|
|
margin: auto;
|
|
height: auto;
|
|
width: clamp(80px, 20vw, 200px);
|
|
}
|
|
|
|
.logo.animate {
|
|
animation: owl-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
}
|
|
|
|
section {
|
|
margin: auto;
|
|
width: 90%;
|
|
max-width: 650px;
|
|
font-family: 'URW Gothic', sans-serif;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
section:last-child {
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.tagline {
|
|
font-weight: 600;
|
|
font-style: italic;
|
|
}
|
|
</style>
|