feat: shift pages to bottom toolbar on mobile

web/admin.html

@@ -16,46 +16,8 @@
 
   <!-- ─── Mobile top bar ─── -->
   <div class="topbar">
-        <button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
-            <i class="fa-solid fa-bars"></i>
-        </button>
     <span style="font-weight:600;font-size:0.95rem;">Admin</span>
-    </div>
+    <span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
-
-    <!-- ─── Mobile offcanvas sidebar ─── -->
-    <div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
-        <div class="offcanvas-header">
-            <div class="brand"
-                style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
-                <span>SMS Dashboard</span>
-            </div>
-            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
-                aria-label="Close"></button>
-        </div>
-        <div class="offcanvas-body p-3">
-            <nav class="d-flex flex-column gap-1">
-                <a href="index.html" class="nav-link-custom">
-                    <i class="fa-solid fa-house fa-fw"></i>
-                    Home
-                </a>
-                <a href="attendees.html" class="nav-link-custom">
-                    <i class="fa-solid fa-users fa-fw"></i>
-                    Attendees
-                </a>
-                <a href="templates.html" class="nav-link-custom">
-                    <i class="fa-solid fa-comment-sms fa-fw"></i>
-                    SMS Templates
-                </a>
-                <a href="schedule.html" class="nav-link-custom">
-                    <i class="fa-solid fa-calendar-days fa-fw"></i>
-                    Schedule
-                </a>
-                <a href="delivery-log.html" class="nav-link-custom">
-                    <i class="fa-solid fa-list-check fa-fw"></i>
-                    Delivery Log
-                </a>
-            </nav>
-        </div>
   </div>
 
   <!-- ─── Desktop sidebar ─── -->
@@ -375,6 +337,32 @@
         loadAdmin();
         document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') loadAdmin(); });
     </script>
+  <nav class="bottom-nav" aria-label="Navigation">
+    <a href="index.html" class="bottom-nav-item">
+      <i class="fa-solid fa-house"></i>
+      <span>Home</span>
+    </a>
+    <a href="attendees.html" class="bottom-nav-item">
+      <i class="fa-solid fa-users"></i>
+      <span>Attendees</span>
+    </a>
+    <a href="templates.html" class="bottom-nav-item">
+      <i class="fa-solid fa-comment-sms"></i>
+      <span>Templates</span>
+    </a>
+    <a href="schedule.html" class="bottom-nav-item">
+      <i class="fa-solid fa-calendar-days"></i>
+      <span>Schedule</span>
+    </a>
+    <a href="delivery-log.html" class="bottom-nav-item">
+      <i class="fa-solid fa-list-check"></i>
+      <span>Log</span>
+    </a>
+    <a href="admin.html" class="bottom-nav-item active admin-nav-link d-none">
+      <i class="fa-solid fa-user-shield"></i>
+      <span>Admin</span>
+    </a>
+  </nav>
 </body>
 
 </html>

web/assets/css/dashboard.css

@@ -112,6 +112,41 @@ body {
   opacity: 1;
 }
 
+/* ── Bottom nav (mobile) ── */
+.bottom-nav {
+  display: none;
+  position: fixed;
+  bottom: 0; left: 0; right: 0;
+  background: var(--bg-surface);
+  border-top: 1px solid var(--border);
+  z-index: 1040;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.bottom-nav a {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+  padding: 0.55rem 0.25rem;
+  color: var(--text-muted);
+  text-decoration: none;
+  font-size: 0.68rem;
+  min-width: 0;
+  transition: color 0.15s;
+}
+
+.bottom-nav a i {
+  font-size: 1.15rem;
+}
+
+.bottom-nav a.active,
+.bottom-nav a:hover {
+  color: var(--accent);
+}
+
 /* ── Top bar (mobile) ── */
 .topbar {
   display: none;
@@ -409,12 +444,13 @@ body {
 /* ── Responsive ── */
 @media (max-width: 767.98px) {
   .sidebar     { display: none; }
+  .bottom-nav  { display: flex; }
   .topbar      { display: flex; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
   .main        {
     margin-left: 0;
     padding-top:    1rem;
     padding-left:   max(1rem, env(safe-area-inset-left));
     padding-right:  max(1rem, env(safe-area-inset-right));
-    padding-bottom: max(2rem, env(safe-area-inset-bottom));
+    padding-bottom: calc(4rem + max(0.5rem, env(safe-area-inset-bottom)));
   }
 }

web/attendees.html

@@ -18,47 +18,8 @@
 
   <!-- ─── Mobile top bar ─── -->
   <div class="topbar">
-        <button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
-            <i class="fa-solid fa-bars"></i>
-        </button>
     <span style="font-weight:600;font-size:0.95rem;">Attendees</span>
-    </div>
+    <span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
-
-    <!-- ─── Mobile offcanvas sidebar ─── -->
-    <div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
-        <div class="offcanvas-header">
-            <div class="brand"
-                style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
-                <img src="assets/img/logo.png" alt="Logo" style="width:120px;height:auto;">
-                <span>SMS Dashboard</span>
-            </div>
-            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
-                aria-label="Close"></button>
-        </div>
-        <div class="offcanvas-body p-3">
-            <nav class="d-flex flex-column gap-1">
-                <a href="index.html" class="nav-link-custom">
-                    <i class="fa-solid fa-house fa-fw"></i>
-                    Home
-                </a>
-                <a href="attendees.html" class="nav-link-custom active">
-                    <i class="fa-solid fa-users fa-fw"></i>
-                    Attendees
-                </a>
-                <a href="templates.html" class="nav-link-custom">
-                    <i class="fa-solid fa-comment-sms fa-fw"></i>
-                    SMS Templates
-                </a>
-                <a href="schedule.html" class="nav-link-custom">
-                    <i class="fa-solid fa-calendar-days fa-fw"></i>
-                    Schedule
-                </a>
-                <a href="delivery-log.html" class="nav-link-custom">
-                    <i class="fa-solid fa-list-check fa-fw"></i>
-                    Delivery Log
-                </a>
-            </nav>
-        </div>
   </div>
 
   <!-- ─── Desktop sidebar ─── -->
@@ -765,6 +726,32 @@
         checkAuth();
         document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') checkAuth(); });
     </script>
+  <nav class="bottom-nav" aria-label="Navigation">
+    <a href="index.html" class="bottom-nav-item">
+      <i class="fa-solid fa-house"></i>
+      <span>Home</span>
+    </a>
+    <a href="attendees.html" class="bottom-nav-item active">
+      <i class="fa-solid fa-users"></i>
+      <span>Attendees</span>
+    </a>
+    <a href="templates.html" class="bottom-nav-item">
+      <i class="fa-solid fa-comment-sms"></i>
+      <span>Templates</span>
+    </a>
+    <a href="schedule.html" class="bottom-nav-item">
+      <i class="fa-solid fa-calendar-days"></i>
+      <span>Schedule</span>
+    </a>
+    <a href="delivery-log.html" class="bottom-nav-item">
+      <i class="fa-solid fa-list-check"></i>
+      <span>Log</span>
+    </a>
+    <a href="admin.html" class="bottom-nav-item admin-nav-link d-none">
+      <i class="fa-solid fa-user-shield"></i>
+      <span>Admin</span>
+    </a>
+  </nav>
 </body>
 
 </html>

web/delivery-log.html

@@ -17,45 +17,8 @@
 
   <!-- ─── Mobile top bar ─── -->
   <div class="topbar">
-    <button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
-      <i class="fa-solid fa-bars"></i>
-    </button>
     <span style="font-weight:600;font-size:0.95rem;">Delivery Log</span>
-  </div>
+    <span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
-
-  <!-- ─── Mobile offcanvas sidebar ─── -->
-  <div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
-    <div class="offcanvas-header">
-      <div class="brand"
-        style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
-        <span>IMFestival SMS Dashboard</span>
-      </div>
-      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-    </div>
-    <div class="offcanvas-body p-3">
-      <nav class="d-flex flex-column gap-1">
-        <a href="index.html" class="nav-link-custom">
-          <i class="fa-solid fa-house fa-fw"></i>
-          Home
-        </a>
-        <a href="attendees.html" class="nav-link-custom">
-          <i class="fa-solid fa-users fa-fw"></i>
-          Attendees
-        </a>
-        <a href="templates.html" class="nav-link-custom">
-          <i class="fa-solid fa-comment-sms fa-fw"></i>
-          SMS Templates
-        </a>
-        <a href="schedule.html" class="nav-link-custom">
-          <i class="fa-solid fa-calendar-days fa-fw"></i>
-          Schedule
-        </a>
-        <a href="delivery-log.html" class="nav-link-custom active">
-          <i class="fa-solid fa-list-check fa-fw"></i>
-          Delivery Log
-        </a>
-      </nav>
-    </div>
   </div>
 
   <!-- ─── Desktop sidebar ─── -->
@@ -274,6 +237,32 @@
     checkAuth();
     document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') checkAuth(); });
   </script>
+  <nav class="bottom-nav" aria-label="Navigation">
+    <a href="index.html" class="bottom-nav-item">
+      <i class="fa-solid fa-house"></i>
+      <span>Home</span>
+    </a>
+    <a href="attendees.html" class="bottom-nav-item">
+      <i class="fa-solid fa-users"></i>
+      <span>Attendees</span>
+    </a>
+    <a href="templates.html" class="bottom-nav-item">
+      <i class="fa-solid fa-comment-sms"></i>
+      <span>Templates</span>
+    </a>
+    <a href="schedule.html" class="bottom-nav-item">
+      <i class="fa-solid fa-calendar-days"></i>
+      <span>Schedule</span>
+    </a>
+    <a href="delivery-log.html" class="bottom-nav-item active">
+      <i class="fa-solid fa-list-check"></i>
+      <span>Log</span>
+    </a>
+    <a href="admin.html" class="bottom-nav-item admin-nav-link d-none">
+      <i class="fa-solid fa-user-shield"></i>
+      <span>Admin</span>
+    </a>
+  </nav>
 </body>
 
 </html>

web/index.html

@@ -16,45 +16,8 @@
 
   <!-- ─── Mobile top bar ─── -->
   <div class="topbar">
-    <button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
-      <i class="fa-solid fa-bars"></i>
-    </button>
     <span style="font-weight:600;font-size:0.95rem;">SMS Dashboard</span>
-  </div>
+    <span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
-
-  <!-- ─── Mobile offcanvas sidebar ─── -->
-  <div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
-    <div class="offcanvas-header">
-      <div class="brand"
-        style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
-        <span>IMFestival SMS Dashboard</span>
-      </div>
-      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-    </div>
-    <div class="offcanvas-body p-3">
-      <nav class="d-flex flex-column gap-1">
-        <a href="index.html" class="nav-link-custom active">
-          <i class="fa-solid fa-house fa-fw"></i>
-          Home
-        </a>
-        <a href="attendees.html" class="nav-link-custom">
-          <i class="fa-solid fa-users fa-fw"></i>
-          Attendees
-        </a>
-        <a href="templates.html" class="nav-link-custom">
-          <i class="fa-solid fa-comment-sms fa-fw"></i>
-          SMS Templates
-        </a>
-        <a href="schedule.html" class="nav-link-custom">
-          <i class="fa-solid fa-calendar-days fa-fw"></i>
-          Schedule
-        </a>
-        <a href="delivery-log.html" class="nav-link-custom">
-          <i class="fa-solid fa-list-check fa-fw"></i>
-          Delivery Log
-        </a>
-      </nav>
-    </div>
   </div>
 
   <!-- ─── Desktop sidebar ─── -->
@@ -355,6 +318,32 @@
     checkAuth();
     document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') checkAuth(); });
   </script>
+  <nav class="bottom-nav" aria-label="Navigation">
+    <a href="index.html" class="bottom-nav-item active">
+      <i class="fa-solid fa-house"></i>
+      <span>Home</span>
+    </a>
+    <a href="attendees.html" class="bottom-nav-item">
+      <i class="fa-solid fa-users"></i>
+      <span>Attendees</span>
+    </a>
+    <a href="templates.html" class="bottom-nav-item">
+      <i class="fa-solid fa-comment-sms"></i>
+      <span>Templates</span>
+    </a>
+    <a href="schedule.html" class="bottom-nav-item">
+      <i class="fa-solid fa-calendar-days"></i>
+      <span>Schedule</span>
+    </a>
+    <a href="delivery-log.html" class="bottom-nav-item">
+      <i class="fa-solid fa-list-check"></i>
+      <span>Log</span>
+    </a>
+    <a href="admin.html" class="bottom-nav-item admin-nav-link d-none">
+      <i class="fa-solid fa-user-shield"></i>
+      <span>Admin</span>
+    </a>
+  </nav>
 </body>
 
 </html>

web/schedule.html

@@ -31,45 +31,8 @@
 
   <!-- ─── Mobile top bar ─── -->
   <div class="topbar">
-    <button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
-      <i class="fa-solid fa-bars"></i>
-    </button>
     <span style="font-weight:600;font-size:0.95rem;">Schedule</span>
-  </div>
+    <span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
-
-  <!-- ─── Mobile offcanvas sidebar ─── -->
-  <div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
-    <div class="offcanvas-header">
-      <div class="brand"
-        style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
-        <span>IMFestival SMS Dashboard</span>
-      </div>
-      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-    </div>
-    <div class="offcanvas-body p-3">
-      <nav class="d-flex flex-column gap-1">
-        <a href="index.html" class="nav-link-custom">
-          <i class="fa-solid fa-house fa-fw"></i>
-          Home
-        </a>
-        <a href="attendees.html" class="nav-link-custom">
-          <i class="fa-solid fa-users fa-fw"></i>
-          Attendees
-        </a>
-        <a href="templates.html" class="nav-link-custom">
-          <i class="fa-solid fa-comment-sms fa-fw"></i>
-          SMS Templates
-        </a>
-        <a href="schedule.html" class="nav-link-custom active">
-          <i class="fa-solid fa-calendar-days fa-fw"></i>
-          Schedule
-        </a>
-        <a href="delivery-log.html" class="nav-link-custom">
-          <i class="fa-solid fa-list-check fa-fw"></i>
-          Delivery Log
-        </a>
-      </nav>
-    </div>
   </div>
 
   <!-- ─── Desktop sidebar ─── -->
@@ -532,6 +495,32 @@
     }
     checkApiKey();
   </script>
+  <nav class="bottom-nav" aria-label="Navigation">
+    <a href="index.html" class="bottom-nav-item">
+      <i class="fa-solid fa-house"></i>
+      <span>Home</span>
+    </a>
+    <a href="attendees.html" class="bottom-nav-item">
+      <i class="fa-solid fa-users"></i>
+      <span>Attendees</span>
+    </a>
+    <a href="templates.html" class="bottom-nav-item">
+      <i class="fa-solid fa-comment-sms"></i>
+      <span>Templates</span>
+    </a>
+    <a href="schedule.html" class="bottom-nav-item active">
+      <i class="fa-solid fa-calendar-days"></i>
+      <span>Schedule</span>
+    </a>
+    <a href="delivery-log.html" class="bottom-nav-item">
+      <i class="fa-solid fa-list-check"></i>
+      <span>Log</span>
+    </a>
+    <a href="admin.html" class="bottom-nav-item admin-nav-link d-none">
+      <i class="fa-solid fa-user-shield"></i>
+      <span>Admin</span>
+    </a>
+  </nav>
 </body>
 
 </html>

web/send-now.html

@@ -17,45 +17,8 @@
 
   <!-- ─── Mobile top bar ─── -->
   <div class="topbar">
-    <button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
+    <span style="font-weight:600;font-size:0.95rem;">Send SMS Now</span>
-      <i class="fa-solid fa-bars"></i>
+    <span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
-    </button>
-    <span style="font-weight:600;font-size:0.95rem;">SMS Dashboard</span>
-  </div>
-
-  <!-- ─── Mobile offcanvas sidebar ─── -->
-  <div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
-    <div class="offcanvas-header">
-      <div class="brand"
-        style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
-        <span>IMFestival SMS Dashboard</span>
-      </div>
-      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-    </div>
-    <div class="offcanvas-body p-3">
-      <nav class="d-flex flex-column gap-1">
-        <a href="index.html" class="nav-link-custom">
-          <i class="fa-solid fa-house fa-fw"></i>
-          Home
-        </a>
-        <a href="attendees.html" class="nav-link-custom">
-          <i class="fa-solid fa-users fa-fw"></i>
-          Attendees
-        </a>
-        <a href="templates.html" class="nav-link-custom">
-          <i class="fa-solid fa-comment-sms fa-fw"></i>
-          SMS Templates
-        </a>
-        <a href="schedule.html" class="nav-link-custom">
-          <i class="fa-solid fa-calendar-days fa-fw"></i>
-          Schedule
-        </a>
-        <a href="delivery-log.html" class="nav-link-custom">
-          <i class="fa-solid fa-list-check fa-fw"></i>
-          Delivery Log
-        </a>
-      </nav>
-    </div>
   </div>
 
   <!-- ─── Desktop sidebar ─── -->
@@ -401,6 +364,32 @@
     }
     checkApiKey();
   </script>
+  <nav class="bottom-nav" aria-label="Navigation">
+    <a href="index.html" class="bottom-nav-item">
+      <i class="fa-solid fa-house"></i>
+      <span>Home</span>
+    </a>
+    <a href="attendees.html" class="bottom-nav-item">
+      <i class="fa-solid fa-users"></i>
+      <span>Attendees</span>
+    </a>
+    <a href="templates.html" class="bottom-nav-item">
+      <i class="fa-solid fa-comment-sms"></i>
+      <span>Templates</span>
+    </a>
+    <a href="schedule.html" class="bottom-nav-item">
+      <i class="fa-solid fa-calendar-days"></i>
+      <span>Schedule</span>
+    </a>
+    <a href="delivery-log.html" class="bottom-nav-item">
+      <i class="fa-solid fa-list-check"></i>
+      <span>Log</span>
+    </a>
+    <a href="admin.html" class="bottom-nav-item admin-nav-link d-none">
+      <i class="fa-solid fa-user-shield"></i>
+      <span>Admin</span>
+    </a>
+  </nav>
 </body>
 
 </html>

web/templates.html

@@ -17,45 +17,8 @@
 
   <!-- ─── Mobile top bar ─── -->
   <div class="topbar">
-    <button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
-      <i class="fa-solid fa-bars"></i>
-    </button>
     <span style="font-weight:600;font-size:0.95rem;">SMS Templates</span>
-  </div>
+    <span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
-
-  <!-- ─── Mobile offcanvas sidebar ─── -->
-  <div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
-    <div class="offcanvas-header">
-      <div class="brand"
-        style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
-        <span>SMS Dashboard</span>
-      </div>
-      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-    </div>
-    <div class="offcanvas-body p-3">
-      <nav class="d-flex flex-column gap-1">
-        <a href="index.html" class="nav-link-custom">
-          <i class="fa-solid fa-house fa-fw"></i>
-          Home
-        </a>
-        <a href="attendees.html" class="nav-link-custom">
-          <i class="fa-solid fa-users fa-fw"></i>
-          Attendees
-        </a>
-        <a href="templates.html" class="nav-link-custom active">
-          <i class="fa-solid fa-comment-sms fa-fw"></i>
-          SMS Templates
-        </a>
-        <a href="schedule.html" class="nav-link-custom">
-          <i class="fa-solid fa-calendar-days fa-fw"></i>
-          Schedule
-        </a>
-        <a href="delivery-log.html" class="nav-link-custom">
-          <i class="fa-solid fa-list-check fa-fw"></i>
-          Delivery Log
-        </a>
-      </nav>
-    </div>
   </div>
 
   <!-- ─── Desktop sidebar ─── -->
@@ -312,6 +275,32 @@
     checkAuth();
     document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') checkAuth(); });
   </script>
+  <nav class="bottom-nav" aria-label="Navigation">
+    <a href="index.html" class="bottom-nav-item">
+      <i class="fa-solid fa-house"></i>
+      <span>Home</span>
+    </a>
+    <a href="attendees.html" class="bottom-nav-item">
+      <i class="fa-solid fa-users"></i>
+      <span>Attendees</span>
+    </a>
+    <a href="templates.html" class="bottom-nav-item active">
+      <i class="fa-solid fa-comment-sms"></i>
+      <span>Templates</span>
+    </a>
+    <a href="schedule.html" class="bottom-nav-item">
+      <i class="fa-solid fa-calendar-days"></i>
+      <span>Schedule</span>
+    </a>
+    <a href="delivery-log.html" class="bottom-nav-item">
+      <i class="fa-solid fa-list-check"></i>
+      <span>Log</span>
+    </a>
+    <a href="admin.html" class="bottom-nav-item admin-nav-link d-none">
+      <i class="fa-solid fa-user-shield"></i>
+      <span>Admin</span>
+    </a>
+  </nav>
 </body>
 
 </html>