nav

2026-08-05 02:46:34 +00:00 · 2026-07-05 16:30:11 -06:00
parent b3ecc15c1b
commit c0e7a65ac5
1 changed files with 64 additions and 33 deletions
@@ -5,8 +5,38 @@
        <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="py-10 px-5">
+    <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"
          >
@@ -44,6 +74,7 @@
              <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]")) {