mirror of
https://github.com/cjdenio/uta-trax-api.git
synced 2026-08-04 22:06:34 +00:00
166 lines
3.6 KiB
HTML
166 lines
3.6 KiB
HTML
<!-- i SWEAR i write good code sometimes -->
|
|
|
|
<!doctype html>
|
|
|
|
<html>
|
|
<head>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
crossorigin=""
|
|
/>
|
|
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
#sidebar {
|
|
flex-basis: 300px;
|
|
flex-shrink: 0;
|
|
padding: 10px;
|
|
}
|
|
|
|
.vehicle {
|
|
border-radius: 999px;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: -10px;
|
|
margin-top: -10px;
|
|
padding: 8px;
|
|
fill: white;
|
|
/* box-shadow: 0px 0px 10px black; */
|
|
border: 1px solid black;
|
|
position: relative;
|
|
background-color: var(--color);
|
|
}
|
|
|
|
.vehicle-plain {
|
|
/* bus */
|
|
background-color: white;
|
|
border-color: var(--color);
|
|
fill: var(--color);
|
|
}
|
|
.vehicle-small {
|
|
width: 15px;
|
|
height: 15px;
|
|
margin-left: -7px;
|
|
margin-top: -7px;
|
|
}
|
|
|
|
#banner {
|
|
grid-column: span 2;
|
|
background-color: #ef4444;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 40px;
|
|
}
|
|
|
|
#banner.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#map, #sidebar {
|
|
grid-row: 2 / 3;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div
|
|
style="
|
|
display: grid;
|
|
grid-template-columns: auto 300px;
|
|
grid-template-rows: auto 1fr;
|
|
height: 100vh;
|
|
"
|
|
>
|
|
<div id="banner" class="hidden">
|
|
There are currently no vehicles running. Either service has ended for
|
|
the day, or UTA's tracker isn't working. Come back later!
|
|
</div>
|
|
|
|
<div id="map"></div>
|
|
<div id="sidebar">
|
|
<h1>Every Transit Vehicle in Salt Lake City*</h1>
|
|
<small>*or at least most of them</small>
|
|
|
|
<hr />
|
|
|
|
<div>
|
|
<label for="bus">
|
|
Regular Bus
|
|
<input
|
|
type="checkbox"
|
|
name="bus"
|
|
id="bus"
|
|
checked
|
|
class="layer-toggle"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label for="brt">
|
|
BRT
|
|
<input
|
|
type="checkbox"
|
|
name="brt"
|
|
id="brt"
|
|
checked
|
|
class="layer-toggle"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label for="trax">
|
|
TRAX + S-Line (light rail)
|
|
<input
|
|
type="checkbox"
|
|
name="trax"
|
|
id="trax"
|
|
checked
|
|
class="layer-toggle"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label for="frontrunner">
|
|
FrontRunner (commuter rail)
|
|
<input
|
|
type="checkbox"
|
|
name="frontrunner"
|
|
id="frontrunner"
|
|
checked
|
|
class="layer-toggle"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div>
|
|
<p>There are...</p>
|
|
<ul>
|
|
<li><strong id="count-bus">-</strong> bus(es)</li>
|
|
<li><strong id="count-trax">-</strong> TRAX train(s)</li>
|
|
<li>
|
|
<strong id="count-frontrunner">-</strong> FrontRunner train(s)
|
|
</li>
|
|
</ul>
|
|
<p>...out and about</p>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div>last updated: <span id="last-updated">-</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/js/main.js"></script>
|
|
</body>
|
|
</html>
|