feat: add date & time, tidy up styling

public/css/styles.css

@@ -3,7 +3,7 @@
 @import "./nav.css";
 
 body {
-    font-family: "Roboto", sans-serif;
+    font-family: "Noto Sans", sans-serif;
     font-size: 16px;
     line-height: 1.5;
     color: #fff;
@@ -40,3 +40,44 @@ a {
     text-align: center;
     transition: background-color 0.2s;
 }
+
+/*main-content is a div containing multiple elements, the div should be centered on the page an elements inside stacked on top of one another.*/
+#main-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+#clock {
+    font-size: 2.5rem;
+}
+
+#date {
+    font-size: 1rem;
+    margin-bottom: 1rem;
+}
+
+#status {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    padding: 0.5rem;
+    font-size: 0.75rem;
+    color: #999;
+}
+
+#search {
+    background-color: transparent;
+    text-align: center;
+    color: #fff;
+    outline: none;
+    border: none;
+    opacity: 0;
+    transition: all 0.2s ease-in-out;
+}
+
+#search:focus {
+    opacity: 1;
+}

public/js/input.js

@@ -40,10 +40,11 @@ document.addEventListener("keydown", (event) => {
         }
 
         const inputString = inputSequence.join("");
-        setStatus("Listening for key map... " + inputString);
+        setStatus(inputString);
 
         for (const mapping in keymaps) {
             if (inputString.endsWith(mapping)) {
+                setStatus(mapping + " → " + keymaps[mapping]);
                 window.location.href = keymaps[mapping];
                 inputSequence = [];
                 leaderMode = false;

views/home.templ

@@ -9,11 +9,32 @@ templ Home(user goth.User, settings *data.UserSettings, mappings []data.Mapping)
 	@templ.JSONScript("userSettings", settings)
 	@templ.JSONScript("mappings", mappings)
 	@Page(true, user) {
-		<h1>mnemstart</h1>
-		<form action={ templ.SafeURL(settings.SearchEngine) } method="get">
-			<input type="text" id="search" name="q" placeholder="Search..."/>
-		</form>
+		<div id="main-content">
+			@Clock()
+			<form action={ templ.SafeURL(settings.SearchEngine) } method="get">
+				<input type="text" id="search" name="q" placeholder="Search..."/>
+			</form>
+		</div>
 		<p id="status"></p>
 		<script src="/public/js/input.js"></script>
 	}
 }
+
+templ Clock() {
+	<div id="clock"></div>
+	<div id="date"></div>
+	<script>
+        function updateClock() {
+            const now = new Date();
+            const hours = now.getHours();
+            const minutes = now.getMinutes().toString().padStart(2, '0');
+            document.getElementById("clock").textContent = `${hours}:${minutes}`;
+
+            datestr = now.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+            document.getElementById("date").textContent = datestr;
+        }
+
+        setInterval(updateClock, 5000);
+        updateClock();
+    </script>
+}