new things

templates/home.handlebars

@@ -4,8 +4,9 @@
         <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">
+    <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"
         >
@@ -23,9 +24,25 @@
             </p>
         </div>
 
-        <div class="max-w-96 mx-auto font-sans overflow-hidden">
+        <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">
+            {{#each last90Days }}
+                {{#if this}}
+                    <div class="h-full w-0.5 sm:w-1 bg-red-400"></div>
+                {{else}}
+                    <div class="h-full w-0.5 sm:w-1 bg-green-400"></div>
+                {{/if}}
+            {{/each}}
+        </div>
+
+        <div class="max-w-96 mx-auto flex justify-between">
+            <div class="text-gray-600 text-sm">60 days ago</div>
+            <div class="text-gray-600 text-sm">Today</div>
+        </div>
+
     </body>
 </html>