Final3

api/update_theme.php

@@ -0,0 +1,21 @@
+<?php
+require_once '../auth_helper.php';
+require_login();
+
+header('Content-Type: application/json');
+
+$input = json_decode(file_get_contents('php://input'), true);
+$theme = $input['theme'] ?? 'light';
+
+if (!in_array($theme, ['light', 'dark'])) {
+    echo json_encode(['success' => false, 'error' => 'Invalid theme']);
+    exit;
+}
+
+try {
+    $stmt = db()->prepare("UPDATE users SET theme = ? WHERE id = ?");
+    $stmt->execute([$theme, $_SESSION['user_id']]);
+    echo json_encode(['success' => true]);
+} catch (Exception $e) {
+    echo json_encode(['success' => false, 'error' => $e->getMessage()]);
+}

assets/css/dashboard.css

@@ -415,3 +415,142 @@ body.dashboard-body {
     gap: 8px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
+
+/* Dark Theme Variables */
+body.dark-theme {
+    --bg-light: #0f172a;
+    --sidebar-bg: #1e293b;
+    --sidebar-text: #94a3b8;
+    --border-color: #334155;
+    --sidebar-active-bg: #334155;
+    --sidebar-active-text: #6366f1;
+    color: #f1f5f9;
+}
+
+body.dark-theme .top-header {
+    background: #1e293b;
+    border-color: #334155;
+}
+
+body.dark-theme .stat-card,
+body.dark-theme .analytics-card,
+body.dark-theme .content-section,
+body.dark-theme .settings-card,
+body.dark-theme .modal-content {
+    background: #1e293b;
+    border-color: #334155;
+}
+
+body.dark-theme .sidebar-brand,
+body.dark-theme .user-name,
+body.dark-theme .stat-value,
+body.dark-theme .card-title,
+body.dark-theme .section-title,
+body.dark-theme .settings-info h3,
+body.dark-theme .modal-title,
+body.dark-theme h1 {
+    color: #f1f5f9 !important;
+}
+
+body.dark-theme .welcome-msg,
+body.dark-theme .user-role,
+body.dark-theme .stat-label,
+body.dark-theme .settings-info p {
+    color: #94a3b8;
+}
+
+body.dark-theme .search-bar {
+    background: #334155;
+}
+
+body.dark-theme .search-bar input {
+    color: #f1f5f9;
+}
+
+body.dark-theme .election-table th {
+    background: #334155;
+    color: #94a3b8;
+    border-color: #475569;
+}
+
+body.dark-theme .election-table td {
+    border-color: #334155;
+    color: #cbd5e1;
+}
+
+body.dark-theme .nav-item:hover {
+    background: #334155;
+}
+
+body.dark-theme .flatlogic-badge {
+    background: #1e293b;
+    color: #f1f5f9;
+}
+
+/* Global Dark Theme Overrides */
+body.dark-theme .audit-table,
+body.dark-theme .audit-table th,
+body.dark-theme .table-container,
+body.dark-theme .content-section,
+body.dark-theme .settings-card {
+    background: #1e293b !important;
+    border-color: #334155 !important;
+}
+
+body.dark-theme .audit-table td,
+body.dark-theme .election-table td {
+    color: #cbd5e1 !important;
+    border-color: #334155 !important;
+}
+
+body.dark-theme .audit-table th,
+body.dark-theme .election-table th {
+    background: #334155 !important;
+    color: #94a3b8 !important;
+    border-color: #475569 !important;
+}
+
+body.dark-theme .action-badge {
+    background: #334155;
+    color: #94a3b8;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+}
+
+body.dark-theme input, 
+body.dark-theme select, 
+body.dark-theme textarea {
+    background-color: #334155 !important;
+    border-color: #475569 !important;
+    color: #f1f5f9 !important;
+}
+
+body.dark-theme .sidebar-brand,
+body.dark-theme .user-name,
+body.dark-theme .stat-value,
+body.dark-theme .card-title,
+body.dark-theme .section-title,
+body.dark-theme .settings-info h3,
+body.dark-theme .modal-title,
+body.dark-theme h1,
+body.dark-theme h2,
+body.dark-theme h3 {
+    color: #f1f5f9 !important;
+}
+
+body.dark-theme .nav-item {
+    color: #94a3b8;
+}
+
+body.dark-theme .nav-item:hover {
+    background: #334155;
+    color: #f1f5f9;
+}
+
+body.dark-theme .nav-item.active {
+    background: #334155;
+    color: #6366f1;
+}
+
+

assets/css/style.css

@@ -156,3 +156,45 @@ body {
 .col-12 { flex: 0 0 100%; max-width: 100%; padding: 0.75rem; }
 .col-md-6 { flex: 0 0 50%; max-width: 50%; padding: 0.75rem; }
 .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; padding: 0.75rem; }
+
+/* Dark Mode */
+body.dark-theme {
+    --bg-color: #0f172a;
+    --surface-color: #1e293b;
+    --border-color: #334155;
+    --text-main: #f1f5f9;
+    --text-muted: #94a3b8;
+}
+
+body.dark-theme .navbar {
+    background: #1e293b;
+    border-color: #334155;
+}
+
+body.dark-theme .brand {
+    color: #f1f5f9;
+}
+
+body.dark-theme .btn-outline {
+    border-color: #475569;
+    color: #f1f5f9;
+}
+
+body.dark-theme .btn-outline:hover {
+    background: #334155;
+}
+
+body.dark-theme .table th {
+    border-color: #475569;
+}
+
+body.dark-theme .table td {
+    border-color: #334155;
+}
+
+body.dark-theme .form-control {
+    background-color: #334155;
+    border-color: #475569;
+    color: #f1f5f9;
+}
+

ballot.php

@@ -23,7 +23,7 @@ if (!$election || $election['status'] !== 'Ongoing') {
 $check = $pdo->prepare("SELECT COUNT(*) FROM votes WHERE election_id = ? AND voter_id = ?");
 $check->execute([$id, $user['id']]);
 if ($check->fetchColumn() > 0) {
-    header("Location: view_results.php?id=$id&error=AlreadyVoted");
+    header("Location: index.php?error=already_voted");
     exit;
 }
 
@@ -44,6 +44,7 @@ $endTime = strtotime($election['end_date_and_time']) * 1000;
   <style>
     :root {
         --primary: #4f46e5;
+        --primary-hover: #4338ca;
         --primary-light: #eef2ff;
         --bg: #f8fafc;
         --text: #1e293b;
@@ -54,11 +55,31 @@ $endTime = strtotime($election['end_date_and_time']) * 1000;
     body { 
         background-color: var(--bg);
         color: var(--text);
-        font-family: 'Inter', sans-serif;
+        font-family: 'Plus Jakarta Sans', sans-serif;
         margin: 0;
         line-height: 1.5;
     }
 
+    .navbar {
+        background: white;
+        padding: 1rem 2rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid var(--border);
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+    }
+
+    .brand {
+        font-weight: 800;
+        font-size: 1.25rem;
+        color: var(--primary);
+        text-decoration: none;
+        letter-spacing: -0.025em;
+    }
+
     .ballot-container { 
         max-width: 900px; 
         margin: 0 auto; 
@@ -171,8 +192,10 @@ $endTime = strtotime($election['end_date_and_time']) * 1000;
     }
 
     .candidate-card:hover { 
-        border-color: #cbd5e1;
+        border-color: var(--primary);
-        background: #f8fafc;
+        background: #fcfdff;
+        transform: translateY(-2px);
+        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
     }
     
     input[type="radio"]:checked + .candidate-card {
@@ -242,28 +265,158 @@ $endTime = strtotime($election['end_date_and_time']) * 1000;
         left: 0;
         right: 0;
         background: white;
-        padding: 20px;
+        padding: 16px 40px;
         border-top: 1px solid var(--border);
         display: flex;
         justify-content: center;
         z-index: 100;
-        box-shadow: 0 -4px 6px -1px rgba(0,0,0,0.05);
+        box-shadow: 0 -10px 15px -3px rgba(0,0,0,0.05);
+    }
+
+    .submit-container {
+        max-width: 900px;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .submit-text p {
+        margin: 0;
+        font-size: 0.75rem;
+        font-weight: 800;
+        color: var(--text-muted);
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+    }
+
+    .submit-text h4 {
+        margin: 0;
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--text);
     }
 
     .btn-submit {
         background: var(--primary);
         color: white;
         border: none;
-        padding: 12px 48px;
+        padding: 14px 40px;
-        border-radius: 8px;
+        border-radius: 12px;
         font-size: 1rem;
         font-weight: 700;
         cursor: pointer;
-        transition: background 0.2s;
+        transition: all 0.2s;
+        box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
     }
 
     .btn-submit:hover { 
         background: var(--primary-hover);
+        transform: translateY(-1px);
+        box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3);
+    }
+
+    .btn-submit:active {
+        transform: translateY(0);
+    }
+
+    /* Modal Styles */
+    .modal-overlay {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(15, 23, 42, 0.6);
+        backdrop-filter: blur(4px);
+        z-index: 2000;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+    }
+
+    .modal-overlay.active {
+        display: flex;
+    }
+
+    .confirm-modal {
+        background: white;
+        border-radius: 20px;
+        max-width: 450px;
+        width: 100%;
+        padding: 32px;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    @keyframes modalIn {
+        from { transform: scale(0.9) translateY(20px); opacity: 0; }
+        to { transform: scale(1) translateY(0); opacity: 1; }
+    }
+
+    .modal-icon {
+        width: 64px;
+        height: 64px;
+        background: #eef2ff;
+        color: #4f46e5;
+        border-radius: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 24px;
+    }
+
+    .confirm-modal h2 {
+        margin: 0 0 12px 0;
+        font-size: 1.5rem;
+        font-weight: 800;
+        color: #1e293b;
+    }
+
+    .confirm-modal p {
+        margin: 0 0 32px 0;
+        color: #64748b;
+        font-size: 1rem;
+        line-height: 1.6;
+    }
+
+    .modal-actions {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+    }
+
+    .btn-modal {
+        padding: 12px 24px;
+        border-radius: 12px;
+        font-size: 0.875rem;
+        font-weight: 700;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: none;
+        text-align: center;
+    }
+
+    .btn-modal-cancel {
+        background: #f1f5f9;
+        color: #64748b;
+    }
+
+    .btn-modal-cancel:hover {
+        background: #e2e8f0;
+        color: #1e293b;
+    }
+
+    .btn-modal-confirm {
+        background: #4f46e5;
+        color: white;
+        box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
+    }
+
+    .btn-modal-confirm:hover {
+        background: #4338ca;
+        box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3);
     }
 
     input[type="radio"] { display: none; }
@@ -275,11 +428,19 @@ $endTime = strtotime($election['end_date_and_time']) * 1000;
     }
   </style>
 </head>
-<body>
+<body class="<?= ($user['theme'] ?? 'light') === 'dark' ? 'dark-theme' : '' ?>">
+  <nav class="navbar">
+    <a href="index.php" class="brand">Click to Vote</a>
+    <div>
+      <span style="margin-right: 1rem; color: var(--text-muted); font-size: 0.875rem; font-weight: 600;"><?= htmlspecialchars($user['name']) ?></span>
+      <a href="logout.php" style="color: #ef4444; font-size: 0.875rem; font-weight: 700; text-decoration: none;">Logout</a>
+    </div>
+  </nav>
+
   <div class="ballot-container">
     <div class="ballot-title-area">
-        <h1>Cast Your Vote</h1>
+        <h1><?= htmlspecialchars($election['title']) ?></h1>
-        <p>Select one candidate for each position</p>
+        <p>Review the candidates carefully and cast your secure vote below.</p>
     </div>
 
     <div class="voter-info-card">
@@ -360,86 +521,59 @@ $endTime = strtotime($election['end_date_and_time']) * 1000;
         <?php endforeach; ?>
 
         <div class="submit-bar">
-            <button type="submit" class="btn-submit">
+            <div class="submit-container">
-                Cast My Vote
+                <div class="submit-text">
-            </button>
+                    <p>Ready to submit?</p>
-        </div>
+                    <h4>Review your selections</h4>
-    </form>
-  </div>
-    </div>
-
-    <div class="ballot-header">
-        <h1><?= htmlspecialchars($election['title']) ?></h1>
-        <p>Your choice matters. Review the candidates carefully and cast your secure vote below.</p>
-    </div>
-
-    <form id="ballotForm" action="api/submit_vote.php" method="POST">
-        <input type="hidden" name="election_id" value="<?= $id ?>">
-        
-        <?php foreach ($positions as $index => $pos): ?>
-            <div class="position-group">
-                <div class="position-title">
-                    <i data-lucide="shield-check"></i>
-                    <?= htmlspecialchars($pos['name']) ?>
                 </div>
-                
+                <button type="button" class="btn-submit" onclick="openConfirmModal()">
-                <?php
+                    Cast My Vote
-                    $sql = "SELECT c.*, u.name, u.track FROM candidates c JOIN users u ON c.user_id = u.id WHERE c.position_id = ? AND c.approved = TRUE";
+                </button>
-                    $params = [$pos['id']];
-                    
-                    if ($pos['type'] === 'Track Specific') {
-                        $sql .= " AND u.track = ?";
-                        $params[] = $user['track'];
-                    }
-                    
-                    $cStmt = $pdo->prepare($sql);
-                    $cStmt->execute($params);
-                    $candidates = $cStmt->fetchAll();
-                ?>
-                
-                <?php if (empty($candidates)): ?>
-                    <div style="padding: 32px; background: white; border-radius: 20px; text-align: center; border: 2px dashed #e2e8f0;">
-                        <p style="margin: 0; color: var(--text-muted); font-weight: 600;">No candidates available for your track.</p>
-                    </div>
-                <?php else: ?>
-                    <div class="candidates-grid">
-                        <?php foreach ($candidates as $cand): ?>
-                            <label class="candidate-label">
-                                <input type="radio" name="votes[<?= $pos['id'] ?>]" value="<?= $cand['id'] ?>" required>
-                                <div class="candidate-card">
-                                    <div class="avatar-placeholder">
-                                        <?= substr($cand['name'], 0, 1) ?>
-                                    </div>
-                                    <div class="candidate-info">
-                                        <h3><?= htmlspecialchars($cand['name']) ?></h3>
-                                        <p><?= htmlspecialchars($cand['party_name'] ?: 'Independent') ?></p>
-                                    </div>
-                                    <div class="check-icon">
-                                        <i data-lucide="check" style="width: 16px;"></i>
-                                    </div>
-                                </div>
-                            </label>
-                        <?php endforeach; ?>
-                    </div>
-                <?php endif; ?>
             </div>
-        <?php endforeach; ?>
-
-        <div class="submit-bar">
-            <div>
-                <p>READY TO SUBMIT?</p>
-                <h4>Review your selections</h4>
-            </div>
-            <button type="submit" class="btn-submit">
-                Cast My Vote
-            </button>
         </div>
     </form>
   </div>
 
+  <!-- Confirmation Modal -->
+  <div id="confirmModal" class="modal-overlay">
+    <div class="confirm-modal">
+        <div class="modal-icon">
+            <i data-lucide="shield-check" style="width: 32px; height: 32px;"></i>
+        </div>
+        <h2>Cast your vote?</h2>
+        <p>You are about to submit your choices. This action is permanent and cannot be undone. Are you sure you want to proceed?</p>
+        <div class="modal-actions">
+            <button type="button" class="btn-modal btn-modal-cancel" onclick="closeConfirmModal()">Review Choices</button>
+            <button type="button" class="btn-modal btn-modal-confirm" onclick="submitBallot()">Yes, Cast My Vote</button>
+        </div>
+    </div>
+  </div>
+
+  <footer style="text-align: center; color: var(--text-muted); padding: 4rem 2rem; background: white; border-top: 1px solid var(--border);">
+    &copy; <?= date('Y') ?> Click to Vote | High School Online Election System
+  </footer>
+
   <script>
     lucide.createIcons();
 
+    function openConfirmModal() {
+        // Basic validation: check if all required radios are checked
+        const form = document.getElementById('ballotForm');
+        if (!form.checkValidity()) {
+            form.reportValidity();
+            return;
+        }
+        document.getElementById('confirmModal').classList.add('active');
+    }
+
+    function closeConfirmModal() {
+        document.getElementById('confirmModal').classList.remove('active');
+    }
+
+    function submitBallot() {
+        document.getElementById('ballotForm').submit();
+    }
+
     // Countdown Timer
     const endTime = <?= $endTime ?>;
     
@@ -466,10 +600,6 @@ $endTime = strtotime($election['end_date_and_time']) * 1000;
 
     setInterval(updateCountdown, 1000);
     updateCountdown();
-
-    document.getElementById('ballotForm').onsubmit = function() {
-        return confirm('Are you sure you want to cast your vote? This action is permanent.');
-    };
   </script>
 </body>
 </html>

candidate_management.php

@@ -175,7 +175,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
         }
     </style>
 </head>
-<body class="dashboard-body">
+<body class="dashboard-body <?= ($user['theme'] ?? 'light') === 'dark' ? 'dark-theme' : '' ?>">
 
     <?php require_once 'includes/sidebar.php'; ?>
 

create_election.php

@@ -19,7 +19,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
 </head>
 <body>
   <nav class="navbar">
-    <a href="index.php" class="brand">E-Vote Pro</a>
+    <a href="index.php" class="brand">Click to Vote</a>
     <div>
       <a href="index.php" class="btn btn-outline">Back to Dashboard</a>
     </div>

dashboard.php

@@ -147,7 +147,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
         }
     </style>
 </head>
-<body class="dashboard-body">
+<body class="dashboard-body <?= ($user['theme'] ?? 'light') === 'dark' ? 'dark-theme' : '' ?>">
 
     <?php require_once 'includes/sidebar.php'; ?>
 

election_history.php

@@ -190,7 +190,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
         }
     </style>
 </head>
-<body class="dashboard-body">
+<body class="dashboard-body <?= ($user['theme'] ?? 'light') === 'dark' ? 'dark-theme' : '' ?>">
 
     <?php require_once 'includes/sidebar.php'; ?>
 

includes/sidebar.php

@@ -49,6 +49,10 @@ $currentPage = basename($_SERVER['PHP_SELF']);
             <i data-lucide="file-text"></i>
             Reports & Audit
         </a>
+        <a href="settings.php" class="nav-item <?= $currentPage === 'settings.php' ? 'active' : '' ?>">
+            <i data-lucide="settings"></i>
+            Settings
+        </a>
     </nav>
 
     <div class="sidebar-footer">

index.php

@@ -42,6 +42,14 @@ if ($user['role'] === 'Voter') {
         header("Location: ballot.php?id=" . $singleElection['id']);
         exit;
     }
+
+    // If no eligible elections but they were assigned to some active ones, they've already voted
+    if (count($eligibleElections) === 0 && count($activeElections) > 0) {
+        if (!isset($_GET['success']) && !isset($_GET['error'])) {
+            header("Location: index.php?error=already_voted");
+            exit;
+        }
+    }
     
     // For voters, only show their assigned elections in the list
     $elections = $activeElections;
@@ -63,17 +71,18 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="assets/css/style.css?v=<?= time() ?>">
 </head>
-<body>
+<?php $isVotedModalActive = (isset($_GET['success']) && $_GET['success'] === 'voted') || (isset($_GET['error']) && $_GET['error'] === 'already_voted'); ?>
-  <nav class="navbar">
+<body class="<?= ($user['theme'] ?? 'light') === 'dark' ? 'dark-theme' : '' ?>">
-    <a href="index.php" class="brand">E-Vote Pro</a>
+  <nav class="navbar" <?= $isVotedModalActive ? 'style="display: none;"' : '' ?>>
+    <a href="index.php" class="brand">Click to Vote</a>
     <div>
       <span style="margin-right: 1rem; color: var(--text-muted);"><?= htmlspecialchars($user['name']) ?> (<?= $user['role'] ?>)</span>
       <a href="logout.php" class="btn btn-outline">Logout</a>
     </div>
   </nav>
 
-  <div class="container">
+  <div class="container" <?= $isVotedModalActive ? 'style="display: none;"' : '' ?>>
-    <?php if (isset($_GET['success'])): ?>
+    <?php if (isset($_GET['success']) && $_GET['success'] !== 'voted'): ?>
       <div style="background: #dcfce7; color: #166534; padding: 1rem; border-radius: var(--radius); border: 1px solid #bbf7d0; margin-bottom: 1.5rem; font-size: 0.875rem;">
         Action completed successfully.
       </div>
@@ -138,8 +147,87 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
     </div>
   </div>
 
-  <footer style="text-align: center; color: var(--text-muted); padding: 2rem;">
+  <!-- Voted Modal -->
-    &copy; <?= date('Y') ?> E-Vote Pro | High School Online Election System
+  <div id="votedModal" class="modal-overlay <?= (isset($_GET['success']) && $_GET['success'] === 'voted') || (isset($_GET['error']) && $_GET['error'] === 'already_voted') ? 'active' : '' ?>">
+    <div class="confirm-modal" style="text-align: center;">
+        <div class="modal-icon" style="background: #f0fdf4; color: #10b981; margin: 0 auto 24px;">
+            <svg style="width: 32px; height: 32px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
+            </svg>
+        </div>
+        <h2>Already Voted</h2>
+        <p>You have already submitted your vote for this election. Thank you for participating!</p>
+        <div style="margin-top: 32px;">
+            <a href="logout.php" class="btn btn-primary" style="display: block; width: 100%; text-decoration: none; padding: 12px 0; background: #4f46e5; border-radius: 12px; font-weight: 700; color: white;">Back to Login</a>
+        </div>
+    </div>
+  </div>
+
+  <style>
+    /* Modal Styles */
+    .modal-overlay {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(15, 23, 42, 0.6);
+        backdrop-filter: blur(4px);
+        z-index: 2000;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+    }
+
+    .modal-overlay.active {
+        display: flex;
+    }
+
+    .confirm-modal {
+        background: white;
+        border-radius: 20px;
+        max-width: 450px;
+        width: 100%;
+        padding: 32px;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    @keyframes modalIn {
+        from { transform: scale(0.9) translateY(20px); opacity: 0; }
+        to { transform: scale(1) translateY(0); opacity: 1; }
+    }
+
+    .modal-icon {
+        width: 64px;
+        height: 64px;
+        background: #eef2ff;
+        color: #4f46e5;
+        border-radius: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 24px;
+    }
+
+    .confirm-modal h2 {
+        margin: 0 0 12px 0;
+        font-size: 1.5rem;
+        font-weight: 800;
+        color: #1e293b;
+    }
+
+    .confirm-modal p {
+        margin: 0 0 12px 0;
+        color: #64748b;
+        font-size: 1rem;
+        line-height: 1.6;
+    }
+  </style>
+
+  <footer style="text-align: center; color: var(--text-muted); padding: 2rem; <?= $isVotedModalActive ? 'display: none;' : '' ?>">
+    &copy; <?= date('Y') ?> Click to Vote | High School Online Election System
   </footer>
 </body>
 </html>

manage_candidates.php

@@ -32,7 +32,7 @@ $users = $pdo->query("SELECT id, name, student_id FROM users WHERE role = 'Voter
   <link rel="stylesheet" href="assets/css/dashboard.css?v=<?= time() ?>">
   <script src="https://unpkg.com/lucide@latest"></script>
 </head>
-<body class="dashboard-body">
+<body class="dashboard-body <?= ($user['theme'] ?? 'light') === 'dark' ? 'dark-theme' : '' ?>">
   <?php require_once 'includes/sidebar.php'; ?>
 
   <div class="main-wrapper">

officers_management.php

@@ -39,7 +39,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
     <link rel="stylesheet" href="assets/css/officers_management.css?v=<?= time() ?>">
     <script src="https://unpkg.com/lucide@latest"></script>
 </head>
-<body class="dashboard-body">
+<body class="dashboard-body <?= ($user['theme'] ?? 'light') === 'dark' ? 'dark-theme' : '' ?>">
 
     <?php require_once 'includes/sidebar.php'; ?>
 

reports_audit.php

@@ -47,7 +47,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
     <link rel="stylesheet" href="assets/css/reports_audit.css?v=<?= time() ?>">
     <script src="https://unpkg.com/lucide@latest"></script>
 </head>
-<body class="dashboard-body">
+<body class="dashboard-body <?= ($user['theme'] ?? 'light') === 'dark' ? 'dark-theme' : '' ?>">
 
     <?php require_once 'includes/sidebar.php'; ?>
 

search_results.php

@@ -64,7 +64,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
         .no-results { padding: 40px; text-align: center; color: #94a3b8; background: #f8fafc; border-radius: 12px; border: 2px dashed #e2e8f0; }
     </style>
 </head>
-<body class="dashboard-body">
+<body class="dashboard-body <?= ($user['theme'] ?? 'light') === 'dark' ? 'dark-theme' : '' ?>">
     <?php require_once 'includes/sidebar.php'; ?>
     <div class="main-wrapper">
         <?php require_once 'includes/header.php'; ?>

settings.php

@@ -0,0 +1,164 @@
+<?php
+require_once 'auth_helper.php';
+require_login();
+$user = get_user();
+
+$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System for Senior High School';
+?>
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Settings | <?= htmlspecialchars($projectDescription) ?></title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/dashboard.css?v=<?= time() ?>">
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        .settings-card {
+            background: white;
+            padding: 24px;
+            border-radius: 12px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            max-width: 600px;
+        }
+        .settings-group {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 0;
+            border-bottom: 1px solid #f1f5f9;
+        }
+        .settings-group:last-child {
+            border-bottom: none;
+        }
+        .settings-info h3 {
+            margin: 0 0 4px 0;
+            font-size: 1rem;
+            color: #1e293b;
+        }
+        .settings-info p {
+            margin: 0;
+            font-size: 0.875rem;
+            color: #64748b;
+        }
+        /* Toggle Switch */
+        .switch {
+            position: relative;
+            display: inline-block;
+            width: 50px;
+            height: 24px;
+        }
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #e2e8f0;
+            transition: .4s;
+            border-radius: 24px;
+        }
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: .4s;
+            border-radius: 50%;
+        }
+        input:checked + .slider {
+            background-color: #4f46e5;
+        }
+        input:checked + .slider:before {
+            transform: translateX(26px);
+        }
+        
+        /* Dark mode preview styles (optional, can be integrated into global CSS later) */
+        .dark-mode-preview {
+            margin-top: 20px;
+            padding: 12px;
+            background: #1e293b;
+            color: white;
+            border-radius: 8px;
+            display: none;
+        }
+    </style>
+</head>
+<body class="dashboard-body <?= ($user['theme'] ?? 'light') === 'dark' ? 'dark-theme' : '' ?>">
+
+    <?php require_once 'includes/sidebar.php'; ?>
+
+    <div class="main-wrapper">
+        <?php require_once 'includes/header.php'; ?>
+
+        <main class="dashboard-content animate-fade-in">
+            <div class="dashboard-header">
+                <div>
+                    <h1 style="margin: 0 0 4px 0; font-size: 1.5rem; color: #1e293b;">Settings</h1>
+                    <div class="welcome-msg">Manage your account preferences</div>
+                </div>
+            </div>
+
+            <div class="settings-card">
+                <div class="settings-group">
+                    <div class="settings-info">
+                        <h3>Theme Toggle</h3>
+                        <p>Switch between Light and Dark mode</p>
+                    </div>
+                    <div>
+                        <label class="switch">
+                            <input type="checkbox" id="themeToggle" <?= ($user['theme'] ?? 'light') === 'dark' ? 'checked' : '' ?>>
+                            <span class="slider"></span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        lucide.createIcons();
+
+        document.getElementById('themeToggle').addEventListener('change', function() {
+            const theme = this.checked ? 'dark' : 'light';
+            
+            // Apply theme immediately to body
+            if (theme === 'dark') {
+                document.body.classList.add('dark-theme');
+            } else {
+                document.body.classList.remove('dark-theme');
+            }
+
+            // Save to database
+            fetch('api/update_theme.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ theme: theme }),
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (!data.success) {
+                    console.error('Failed to update theme:', data.error);
+                }
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+            });
+        });
+    </script>
+</body>
+</html>

view_election.php

@@ -37,7 +37,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
   <link rel="stylesheet" href="assets/css/dashboard.css?v=<?= time() ?>">
   <script src="https://unpkg.com/lucide@latest"></script>
 </head>
-<body class="dashboard-body">
+<body class="dashboard-body <?= ($user['theme'] ?? 'light') === 'dark' ? 'dark-theme' : '' ?>">
   <?php require_once 'includes/sidebar.php'; ?>
 
   <div class="main-wrapper">

view_results.php

@@ -43,7 +43,7 @@ $positions = $positions->fetchAll();
 </head>
 <body>
   <nav class="navbar">
-    <a href="index.php" class="brand">E-Vote Pro</a>
+    <a href="index.php" class="brand">Click to Vote</a>
     <div>
         <a href="index.php" class="btn btn-outline">Dashboard</a>
     </div>

voter_management.php

@@ -82,7 +82,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
     <link rel="stylesheet" href="assets/css/voter_management.css?v=<?= time() ?>">
     <script src="https://unpkg.com/lucide@latest"></script>
 </head>
-<body class="dashboard-body">
+<body class="dashboard-body <?= ($user['theme'] ?? 'light') === 'dark' ? 'dark-theme' : '' ?>">
 
     <?php require_once 'includes/sidebar.php'; ?>