Begin front-end board work
|
|
@ -1,5 +1,11 @@
|
|||
<html lang="en">
|
||||
<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>
|
||||
<script src="./js/ldb.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./styles/style.css"/>
|
||||
|
|
@ -9,6 +15,11 @@
|
|||
</head>
|
||||
<body>
|
||||
<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 class="spinner">
|
||||
|
||||
|
|
@ -19,6 +30,12 @@
|
|||
<div id="output">
|
||||
|
||||
</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>
|
||||
</body>
|
||||
</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 {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: auto;
|
||||
background-color: var(--overlay-color);
|
||||
border-radius: 45px;
|
||||
|
|
@ -34,4 +36,41 @@
|
|||
}
|
||||
#loading p {
|
||||
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;
|
||||
}
|
||||