Begin front-end board work
|
|
@ -1,5 +1,11 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<meta name="description" content="OwlBoard - Live train departures for traincrew."/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="application-name" content="OwlBoard">
|
||||||
|
<meta name="author" content="Frederick Boniface">
|
||||||
|
<meta name="theme-color" content="#155bb7">
|
||||||
<title id="pgTitle">OwlBoard - Loading</title>
|
<title id="pgTitle">OwlBoard - Loading</title>
|
||||||
<script src="./js/ldb.js"></script>
|
<script src="./js/ldb.js"></script>
|
||||||
<link rel="stylesheet" type="text/css" href="./styles/style.css"/>
|
<link rel="stylesheet" type="text/css" href="./styles/style.css"/>
|
||||||
|
|
@ -9,6 +15,11 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="content">
|
<div id="content">
|
||||||
|
<div id="header">
|
||||||
|
<h1 id="station_name">SVRNBCH</h1>
|
||||||
|
<p id="fetch_date" class="header-right">19/12/2022</p>
|
||||||
|
<p id="fetch_time" class="header-right">23:45:01</p>
|
||||||
|
</div>
|
||||||
<div id="loading">
|
<div id="loading">
|
||||||
<div class="spinner">
|
<div class="spinner">
|
||||||
|
|
||||||
|
|
@ -19,6 +30,12 @@
|
||||||
<div id="output">
|
<div id="output">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div id="footer">
|
||||||
|
<picture>
|
||||||
|
<source srcset="./images/nre/nre-powered_200w.webp" type="image/webp">
|
||||||
|
<img id="nre_logo" src="./images/nre/nre-powered_200w.webp" alt="Powered by National Rail Enquiries">
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
After Width: | Height: | Size: 73 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 146 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
|
@ -0,0 +1,12 @@
|
||||||
|
async function getStation(search){
|
||||||
|
var params = new URLSearchParams(search);
|
||||||
|
var stn = params.get('stn')
|
||||||
|
console.log(`Searching for ${stn}`)
|
||||||
|
return stn;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getStaff(search){
|
||||||
|
var params = new URLSearchParams(search);
|
||||||
|
var sv = params.get('sv')
|
||||||
|
return sv;
|
||||||
|
}
|
||||||
|
|
@ -24,7 +24,9 @@
|
||||||
}
|
}
|
||||||
#loading {
|
#loading {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 45%;
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
margin: auto;
|
margin: auto;
|
||||||
background-color: var(--overlay-color);
|
background-color: var(--overlay-color);
|
||||||
border-radius: 45px;
|
border-radius: 45px;
|
||||||
|
|
@ -34,4 +36,41 @@
|
||||||
}
|
}
|
||||||
#loading p {
|
#loading p {
|
||||||
padding-top: 50px;
|
padding-top: 50px;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content: */
|
||||||
|
#header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
background-color: var(--overlay-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#station_name {
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: -15px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 5px;
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
background-color: var(--overlay-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer img {
|
||||||
|
height: 35px;
|
||||||
}
|
}
|
||||||