mirror of
https://github.com/cjdenio/uta-trax-api.git
synced 2026-08-04 22:06:34 +00:00
124 lines
2.6 KiB
HTML
124 lines
2.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;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div style="display: flex">
|
|
<div id="map" style="height: 100vh; flex-grow: 1"></div>
|
|
<div id="sidebar">
|
|
<h1>Every Transit Vehicle in Salt Lake City*</h1>
|
|
<small>*with a tracker</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>
|
|
last updated: <span id="last-updated">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/js/main.js"></script>
|
|
</body>
|
|
</html>
|