cjdenio/trax-accidents
1
0
Fork 0
mirror of https://github.com/cjdenio/trax-accidents.git synced 2026-08-05 02:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

nav

Browse Source
This commit is contained in:
Caleb Denio
2026-07-05 16:30:11 -06:00
parent b3ecc15c1b
commit c0e7a65ac5
1 changed files with 64 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/home.handlebars
+64 -33
View File
@@ -5,44 +5,75 @@
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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> </head>
<body class="py-10 px-5"> <body class="">
<div <div class="nav">
class="max-w-96 bg-blue-950 text-white mx-auto rounded-lg p-8 space-y-4 mb-10" <a title="UTA Vehicle Tracker" href="https://uta.clb.li">🚆</a>
> <a title="TRAXcidents" href="https://traxcidents.clb.li" class="nav__item--selected">💥</a>
<p class="text-center text-4xl">IT HAS BEEN</p> <a title="GreenBike Firehose" href="https://greenbike.clb.li">🚲</a>
<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>
<div class="max-w-96 mx-auto font-sans overflow-hidden mb-10"> <div class="py-10 px-5">
<div class="bg-gray-200 border border-gray-500 rounded-t-lg px-2">{{ latestCollision.formattedDate }}</div> <div
<pre class="font-sans text-wrap border border-gray-500 border-t-0 rounded-b-lg p-2">{{ latestCollision.content }}</pre> class="max-w-96 bg-blue-950 text-white mx-auto rounded-lg p-8 space-y-4 mb-10"
</div> >
<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="flex justify-between max-w-96 mx-auto h-8" id="the-box"> <div class="max-w-96 mx-auto font-sans overflow-hidden mb-10">
{{#each last90Days }} <div class="bg-gray-200 border border-gray-500 rounded-t-lg px-2">{{ latestCollision.formattedDate }}</div>
{{#if collision}} <pre class="font-sans text-wrap border border-gray-500 border-t-0 rounded-b-lg p-2">{{ latestCollision.content }}</pre>
<div class="h-full w-0.5 sm:w-1 bg-red-400" data-date="{{ renderedDate }}"></div> </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="flex justify-between max-w-96 mx-auto h-8" id="the-box">
<div class="text-gray-400 text-sm basis-0 grow">60 days ago</div> {{#each last90Days }}
<div class="text-sm basis-0 grow text-center" id="selected-date"></div> {{#if collision}}
<div class="text-gray-400 text-sm basis-0 grow text-end">Today</div> <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> </div>
<script> <script>