css

server/templates/home.html

@@ -1,22 +1,48 @@
 <!DOCTYPE html>
-<html lang="pl">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Strona domowa</title>
-    <style>
-        body { font-family: sans-serif; max-width: 600px; margin: 2rem auto; padding: 0 1rem; }
-        nav a { margin-right: 1rem; }
-    </style>
+    <title>Yggdrasil — Home</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='retro.css') }}">
 </head>
 <body>
     <nav>
-        <a href="{{ url_for('home') }}">Dom</a>
-        <a href="{{ url_for('sensors_page') }}">Sensory</a>
+        <a href="{{ url_for('home') }}">Home</a>
+        <a href="{{ url_for('sensors_page') }}">Sensors</a>
         <a href="{{ url_for('api_docs') }}">API</a>
-        <a href="{{ url_for('logout') }}">Wyloguj</a>
+        <a href="{{ url_for('logout') }}">Log out</a>
     </nav>
-    <h1>Witaj, {{ user.username }}!</h1>
-    <p>Jesteś zalogowany{% if user.is_admin %} jako administrator{% endif %}.</p>
+    <h1>Yggdrasil</h1>
+    <div class="panel">
+        <p>Welcome, <span class="hl">{{ user.username }}</span>! You are logged in{% if user.is_admin %} as <b class="hl">administrator</b>{% endif %}.</p>
+        <p>Select an item from the menu:</p>
+        <ul class="mc-menu">
+            <li><a href="{{ url_for('sensors_page') }}"><span class="mc-key">1</span>Sensors — charts and readouts</a></li>
+            <li><a href="{{ url_for('api_docs') }}"><span class="mc-key">2</span>API — documentation</a></li>
+            <li><a href="{{ url_for('logout') }}"><span class="mc-key">0</span>Log out</a></li>
+        </ul>
+        <p class="hint">Tip: press <b>1</b>, <b>2</b> or <b>0</b> to navigate.</p>
+    </div>
+    <footer class="statusbar">
+        <span>{{ user.username }}@yggdrasil:~$</span>
+    </footer>
+    <script>
+        // Numbered menu hotkeys, Midnight Commander style.
+        // Ignored while typing in a form field.
+        document.addEventListener('keydown', (e) => {
+            if (e.ctrlKey || e.metaKey || e.altKey) return;
+            const tag = (document.activeElement && document.activeElement.tagName) || '';
+            if (/^(INPUT|TEXTAREA|SELECT)$/.test(tag)) return;
+            const targets = {
+                '1': "{{ url_for('sensors_page') }}",
+                '2': "{{ url_for('api_docs') }}",
+                '0': "{{ url_for('logout') }}"
+            };
+            if (targets[e.key]) window.location.href = targets[e.key];
+        });
+    </script>
 </body>
 </html>