mirror of
https://github.com/cjdenio/trax-accidents.git
synced 2026-08-05 02:46:34 +00:00
93 lines
3.5 KiB
Handlebars
93 lines
3.5 KiB
Handlebars
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>IT HAS BEEN {{ daysSince }} DAYS SINCE A CAR HIT A UTA TRAIN</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<style>
|
|
.nav {
|
|
grid-column: span 2;
|
|
background-color: #e5e7eb;
|
|
display: flex;
|
|
gap: 10px;
|
|
box-sizing: border-box;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.nav a {
|
|
display: block;
|
|
font-size: 30px;
|
|
padding: 0 20px;
|
|
text-decoration: none;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.nav__item--selected {
|
|
background-color: white;
|
|
border-bottom: 3px solid #93c5fd;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="">
|
|
<div class="nav">
|
|
<a title="UTA Vehicle Tracker" href="https://uta.clb.li">🚆</a>
|
|
<a title="TRAXcidents" href="https://traxcidents.clb.li" class="nav__item--selected">💥</a>
|
|
<a title="GreenBike Firehose" href="https://greenbike.clb.li">🚲</a>
|
|
</div>
|
|
|
|
<div class="py-10 px-5">
|
|
<div
|
|
class="max-w-96 bg-blue-950 text-white mx-auto rounded-lg p-8 space-y-4 mb-10"
|
|
>
|
|
<p class="text-center text-4xl">IT HAS BEEN</p>
|
|
<div
|
|
class="bg-white text-black text-9xl w-fit mx-auto p-4 rounded-lg"
|
|
>
|
|
{{ daysSince }}
|
|
</div>
|
|
<p class="text-center text-5xl">DAYS</p>
|
|
<p class="text-center text-2xl">
|
|
SINCE A CAR HIT A
|
|
<img src="/uta-logo.svg" alt="UTA logo" class="w-32 mx-auto" />
|
|
TRAIN
|
|
</p>
|
|
</div>
|
|
|
|
<div class="max-w-96 mx-auto font-sans overflow-hidden mb-10">
|
|
<div class="bg-gray-200 border border-gray-500 rounded-t-lg px-2">{{ latestCollision.formattedDate }}</div>
|
|
<pre class="font-sans text-wrap border border-gray-500 border-t-0 rounded-b-lg p-2">{{ latestCollision.content }}</pre>
|
|
</div>
|
|
|
|
<div class="flex justify-between max-w-96 mx-auto h-8" id="the-box">
|
|
{{#each last90Days }}
|
|
{{#if collision}}
|
|
<div class="h-full w-0.5 sm:w-1 bg-red-400" data-date="{{ renderedDate }}"></div>
|
|
{{else}}
|
|
<div class="h-full w-0.5 sm:w-1 bg-green-400" data-date="{{ renderedDate }}"></div>
|
|
{{/if}}
|
|
{{/each}}
|
|
</div>
|
|
|
|
<div class="max-w-96 mx-auto flex justify-between">
|
|
<div class="text-gray-400 text-sm basis-0 grow">60 days ago</div>
|
|
<div class="text-sm basis-0 grow text-center" id="selected-date"></div>
|
|
<div class="text-gray-400 text-sm basis-0 grow text-end">Today</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
for (const bar of document.querySelectorAll("[data-date]")) {
|
|
bar.addEventListener("mouseenter", function () {
|
|
document.getElementById("selected-date").innerText = this.dataset["date"];
|
|
});
|
|
}
|
|
|
|
document.getElementById("the-box").addEventListener("mouseleave", function () {
|
|
document.getElementById("selected-date").innerText = "";
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|