feat: Overhauled base template

view/_partials/footer.ejs

@@ -1,5 +1,5 @@
 <div>
-  <span>&copy; <%= (new Date()).getFullYear() %> Cyper</span>
+  <span>&copy; <%= (new Date()).getFullYear() %> AppName</span>
   <span style="color: var(--border)">|</span>
   <span>All rights reserved</span>
 </div>

view/_partials/header.ejs

@@ -1,4 +1,7 @@
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<script src="/js/theme.js"></script> <!-- Load before CSS to prevent page flashing -->
+<link rel="icon" href="/img/favicon.ico" type="image/x-icon">
+<link rel="stylesheet" href="/css/site.css">
 
-<title><%= typeof(title) !== "undefined" ? title + ' - ' : "" %>Template</title>
+<title><%= typeof(title) !== "undefined" ? title + ' - ' : "" %>AppName</title>

view/_partials/navbar.ejs

@@ -1,29 +1,40 @@
 <nav>
-  <a href="/" class="nav-brand">Cyper</a>
+  <a href="/" class="nav-brand">AppName</a>
 
-  <% if (typeof(account) !== "undefined" && account.authenticated) { %>
-    <div class="nav-avatar-wrap">
-      <button class="nav-avatar" id="navAvatarBtn" aria-haspopup="true" aria-expanded="false">
-        <% if (account.avatarUrl) { %>
-          <img src="<%= account.avatarUrl %>" alt="<%= account.username %>" />
-        <% } else { %>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/>
-          </svg>
-        <% } %>
-      </button>
+  <div class="nav-right">
+    <button class="nav-theme-toggle" id="themeToggle" aria-label="Toggle theme">
+      <svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"/>
+      </svg>
+      <svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/>
+      </svg>
+    </button>
 
-      <div class="nav-dropdown" id="navDropdown" aria-hidden="true">
-        <div class="nav-dropdown-header">
-          <span class="nav-dropdown-username"><%= account.username %></span>
+    <% if (typeof(account) !== "undefined") { %>
+      <div class="nav-avatar-wrap">
+        <button class="nav-avatar" id="navAvatarBtn" aria-haspopup="true" aria-expanded="false">
+          <% if (account.avatarUrl) { %>
+            <img src="<%= account.avatarUrl %>" alt="<%= account.username %>" />
+          <% } else { %>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/>
+            </svg>
+          <% } %>
+        </button>
+
+        <div class="nav-dropdown" id="navDropdown" aria-hidden="true">
+          <div class="nav-dropdown-header">
+            <span class="nav-dropdown-username"><%= account.username %></span>
+          </div>
+          <a href="/profile" class="nav-dropdown-item">Profile</a>
+          <a href="/settings" class="nav-dropdown-item">Settings</a>
+          <div class="nav-dropdown-divider"></div>
+          <form method="post" action="/logout">
+            <button class="nav-dropdown-item nav-dropdown-signout" type="submit">Sign out</button>
+          </form>
         </div>
-        <a href="/profile" class="nav-dropdown-item">Profile</a>
-        <a href="/settings" class="nav-dropdown-item">Settings</a>
-        <div class="nav-dropdown-divider"></div>
-        <form method="post" action="/logout">
-          <button class="nav-dropdown-item nav-dropdown-signout" type="submit">Sign out</button>
-        </form>
       </div>
-    </div>
-  <% } %>
+    <% } %>
+  </div>
 </nav>