Add user management and a settings page

hbd/server/templates/head.html

@@ -3,5 +3,59 @@
     <link rel="stylesheet" href="/static/style.css" type="text/css" />
     <link rel="icon" href="/static/images/favicon.ico" sizes="32x32" />
     <title>{{ title }}</title>
-    <script src="{{ extra_scripts }}"></script>
+    {% if extra_scripts %}<script src="{{ extra_scripts }}"></script>{% endif %}
+    <style>
+      /* Navigation bar — shared across all pages */
+      .nav {
+        background: #fff;
+        padding: 10px 15px;
+        margin-bottom: 10px;
+        box-shadow: 0 2px 4px rgba(0,0,0,.1);
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .nav-links { display: flex; align-items: center; }
+      .nav a {
+        margin-right: 20px;
+        text-decoration: none;
+        color: #0066cc;
+        font-weight: 500;
+        font-size: 0.9em;
+      }
+      .nav a:hover { text-decoration: underline; }
+      .nav a.active { color: #333; font-weight: bold; }
+      .nav-user {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        text-decoration: none;
+        color: #333;
+        font-size: 0.9em;
+        font-weight: 500;
+        padding: 4px 8px;
+        border-radius: 20px;
+        transition: background 0.15s;
+      }
+      .nav-user:hover { background: #f0f4ff; text-decoration: none; }
+      .nav-avatar {
+        width: 28px; height: 28px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+      }
+      .nav-initials {
+        width: 28px; height: 28px;
+        border-radius: 50%;
+        background: #0066cc;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.75em;
+        font-weight: 700;
+        flex-shrink: 0;
+      }
+    </style>
 </head>