mirror of
https://github.com/cjdenio/trax-accidents.git
synced 2026-08-05 02:46:34 +00:00
62 lines
2.5 KiB
Handlebars
62 lines
2.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" />
|
|
</head>
|
|
<body 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>
|
|
|
|
<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>
|