Login Page for now

2026-02-04 20:07:56 +00:00 · 2026-02-04 20:07:56 +00:00 · fc68bec63b
commit fc68bec63b
parent a946a1ebab
16 changed files with 760 additions and 149 deletions
--- a/Design/Style.css
+++ b/Design/Style.css
@ -0,0 +1,388 @@
+:root {
+    --Primary_Color: #2563EB;
+    --Secondary_Color: #64748B;
+    --Background_Color: #F8FAFC;
+    --Surface_Color: #FFFFFF;
+    --Text_Primary: #1E293B;
+    --Text_Secondary: #475569;
+    --Border_Color: #E2E8F0;
+    --Success_Color: #10B981;
+    --Error_Color: #EF4444;
+    --Overlay_Color: rgba(0, 0, 0, 0.65);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body, html {
+    height: 100%;
+    width: 100%;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    color: var(--Text_Primary);
+    line-height: 1.5;
+    overflow-x: hidden;
+}
+
+/* Landing Page Styles */
+.Landing_Wrapper {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    background: url('../assets/pasted-20260204-200305-388a4105.jpg') no-repeat center center;
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    text-align: center;
+    overflow: hidden; /* Prevent overflow */
+}
+
+.Landing_Wrapper::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--Overlay_Color);
+    z-index: 1;
+}
+
+.Landing_Header {
+    position: absolute;
+    top: 30px;
+    left: 30px;
+    z-index: 10;
+}
+
+.Logo_Pill {
+    background: white;
+    padding: 8px 24px 8px 10px;
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.Logo_Circle {
+    width: 40px;
+    height: 40px;
+    background: #fff;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.Logo_Circle img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.Logo_Text {
+    text-align: left;
+}
+
+.Logo_Title {
+    color: #0F172A;
+    font-weight: 700;
+    font-size: 0.8rem;
+    line-height: 1.2;
+    text-transform: uppercase;
+}
+
+.Logo_Subtitle {
+    color: #64748B;
+    font-size: 0.65rem;
+    font-weight: 500;
+}
+
+.Landing_Content {
+    position: relative;
+    z-index: 2;
+    max-width: 800px;
+    padding: 20px;
+    animation: fadeInScale 0.8s ease-out;
+}
+
+@keyframes fadeInScale {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+}
+
+.Landing_Title {
+    font-size: clamp(2.5rem, 8vw, 4rem);
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 24px;
+}
+
+.Landing_Description {
+    font-size: clamp(0.9rem, 2.5vw, 1.15rem);
+    line-height: 1.6;
+    margin-bottom: 40px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.Landing_Description strong {
+    font-weight: 700;
+}
+
+.Btn_Landing_Login {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    background: white;
+    color: var(--Primary_Color);
+    padding: 16px 45px;
+    border-radius: 40px;
+    text-decoration: none;
+    font-weight: 700;
+    font-size: 1rem;
+    text-transform: uppercase;
+    transition: all 0.3s ease;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
+}
+
+.Btn_Landing_Login:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.4);
+    background: #f8fafc;
+}
+
+.Landing_Footer {
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    font-size: 0.7rem;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 0 20px;
+}
+
+/* Modal Styles */
+.Modal_Overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(15, 23, 42, 0.85);
+    backdrop-filter: blur(8px);
+    z-index: 100;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.Modal_Overlay.Active {
+    display: flex;
+}
+
+.Login_Card {
+    background: var(--Surface_Color);
+    border-radius: 12px;
+    width: 100%;
+    max-width: 440px;
+    padding: 40px;
+    position: relative;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes slideIn {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.Btn_Close_Modal {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: #f1f5f9;
+    border: none;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    font-size: 1.2rem;
+    color: var(--Secondary_Color);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s;
+}
+
+.Btn_Close_Modal:hover {
+    background: #e2e8f0;
+    color: var(--Text_Primary);
+}
+
+.Login_Card .Title_Large {
+    font-size: 1.85rem;
+    color: var(--Text_Primary);
+    margin-bottom: 8px;
+    text-align: left;
+    font-weight: 800;
+}
+
+.Login_Card .Text_Muted {
+    text-align: left;
+    margin-bottom: 32px;
+    color: var(--Text_Secondary);
+}
+
+/* Form Styles */
+.Form_Group {
+    margin-bottom: 20px;
+}
+
+.Label {
+    display: block;
+    font-size: 0.8rem;
+    font-weight: 700;
+    margin-bottom: 8px;
+    color: var(--Text_Primary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.Input {
+    width: 100%;
+    padding: 14px 16px;
+    border: 1px solid var(--Border_Color);
+    border-radius: 8px;
+    font-size: 0.95rem;
+    background: #F8FAFC;
+    transition: all 0.2s;
+    font-family: inherit;
+}
+
+.Input:focus {
+    outline: none;
+    border-color: var(--Primary_Color);
+    background: white;
+    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
+}
+
+.Button_Primary {
+    width: 100%;
+    padding: 16px;
+    background-color: var(--Primary_Color);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-weight: 700;
+    cursor: pointer;
+    font-size: 1rem;
+    margin-top: 10px;
+    transition: all 0.2s;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.Button_Primary:hover {
+    background-color: #1D4ED8;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+}
+
+.Password_Toggle_Wrapper {
+    position: relative;
+}
+
+.Toggle_Button {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--Primary_Color);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .Landing_Header {
+        top: 20px;
+        left: 20px;
+    }
+
+    .Logo_Pill {
+        padding: 6px 16px 6px 8px;
+    }
+
+    .Logo_Circle {
+        width: 32px;
+        height: 32px;
+    }
+
+    .Logo_Title {
+        font-size: 0.7rem;
+    }
+
+    .Logo_Subtitle {
+        display: none;
+    }
+
+    .Landing_Content {
+        padding: 30px;
+    }
+
+    .Login_Card {
+        padding: 30px 20px;
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 480px) {
+    .Landing_Title {
+        margin-bottom: 16px;
+    }
+
+    .Landing_Description {
+        margin-bottom: 30px;
+    }
+
+    .Btn_Landing_Login {
+        width: 100%;
+        justify-content: center;
+        padding: 14px 20px;
+    }
+
+    .Login_Card .Title_Large {
+        font-size: 1.5rem;
+    }
+}
+
+/* Common Utilities */
+.Alert {
+    padding: 16px;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    margin-bottom: 24px;
+    font-weight: 500;
+}
+
+.Alert_Error {
+    background-color: #FEF2F2;
+    color: var(--Error_Color);
+    border: 1px solid #FEE2E2;
+}
--- a/Logic/Backend/Authentication_Handler.php
+++ b/Logic/Backend/Authentication_Handler.php
@ -0,0 +1,55 @@
+<?php
+session_start();
+require_once __DIR__ . '/../../db/config.php';
+
+class Authentication_Handler {
+    private $pdo;
+
+    public function __construct() {
+        $this->pdo = db();
+    }
+
+    public function Login($User_Type, $Email, $Password, $User_ID) {
+        $Table = ($User_Type === 'Voter') ? 'Voters' : 'Officers';
+        
+        $sql = "SELECT * FROM $Table WHERE Email = ? AND User_ID = ?";
+        $stmt = $this->pdo->prepare($sql);
+        $stmt->execute([$Email, $User_ID]);
+        $User = $stmt->fetch();
+
+        if ($User && password_verify($Password, $User['Password'])) {
+            $_SESSION['User_ID'] = $User['User_ID'];
+            $_SESSION['User_Role'] = ($User_Type === 'Voter') ? 'Voter' : $User['Role'];
+            $_SESSION['Access_Level'] = ($User_Type === 'Voter') ? 0 : $User['Access_Level'];
+            $_SESSION['User_Name'] = $User['Name'] ?? 'Voter';
+
+            // Log to Audit_Trail if Access_Level >= 1
+            if ($_SESSION['Access_Level'] >= 1) {
+                $this->Log_Action($User['User_ID'], $_SESSION['User_Role'], 'Login', 'Successful login to the system');
+            }
+
+            return ['success' => true];
+        }
+
+        return ['success' => false, 'error' => 'Invalid credentials'];
+    }
+
+    public function Log_Action($User_ID, $User_Role, $Action_Type, $Action_Details) {
+        $sql = "INSERT INTO Audit_Trail (User_ID, User_Role, Action_Type, Action_Details) VALUES (?, ?, ?, ?)";
+        $stmt = $this->pdo->prepare($sql);
+        $stmt->execute([$User_ID, $User_Role, $Action_Type, $Action_Details]);
+    }
+
+    public function Check_Auth() {
+        if (!isset($_SESSION['User_ID'])) {
+            header('Location: ../../Screens/Login.php');
+            exit;
+        }
+    }
+
+    public function Logout() {
+        session_destroy();
+        header('Location: ../../Screens/Login.php');
+        exit;
+    }
+}
--- a/Logic/Frontend/Frontend_Script.js
+++ b/Logic/Frontend/Frontend_Script.js
--- a/Screens/Audit_Trail.html
+++ b/Screens/Audit_Trail.html
--- a/Screens/Election_Dashboard.php
+++ b/Screens/Election_Dashboard.php
@ -0,0 +1,52 @@
+<?php
+require_once __DIR__ . '/../Logic/Backend/Authentication_Handler.php';
+$Auth = new Authentication_Handler();
+$Auth->Check_Auth();
+
+if ($_SESSION['Access_Level'] < 1) {
+    header('Location: Voting_Screen.php');
+    exit;
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Election Dashboard - Online School Election System</title>
+    <link rel="stylesheet" href="../Design/Style.css">
+</head>
+<body>
+    <nav class="Dashboard_Navbar">
+        <div class="Logo"><strong>ElectionSystem</strong></div>
+        <div class="User_Info">
+            <span><?php echo $_SESSION['User_Name']; ?> (<?php echo $_SESSION['User_Role']; ?>)</span>
+            <a href="Logout.php" style="margin-left: 20px; font-size: 0.875rem;">Logout</a>
+        </div>
+    </nav>
+
+    <div class="Tab_Navigation">
+        <a href="Election_History.html" class="Tab_Item">Election History</a>
+        <a href="Election_Dashboard.php" class="Tab_Item Active">Election Dashboard</a>
+        <a href="Officers.html" class="Tab_Item">Officers</a>
+        <a href="Voters.html" class="Tab_Item">Voters</a>
+        <a href="Audit_Trail.html" class="Tab_Item">Audit Trail</a>
+    </div>
+
+    <main style="padding: 40px 24px;">
+        <h2 style="margin-bottom: 24px;">Election Dashboard</h2>
+        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;">
+            <div class="Card">
+                <h3 style="font-size: 1rem; margin-bottom: 12px;">Active Election</h3>
+                <p class="Text_Muted">No active election currently running.</p>
+                <button class="Button_Primary" style="margin-top: 16px;">Start New Election</button>
+            </div>
+            <div class="Card">
+                <h3 style="font-size: 1rem; margin-bottom: 12px;">Voter Participation</h3>
+                <div style="font-size: 2rem; font-weight: 700;">0%</div>
+                <p class="Text_Muted">0 of 0 voters have cast their ballots.</p>
+            </div>
+        </div>
+    </main>
+</body>
+</html>
--- a/Screens/Election_History.html
+++ b/Screens/Election_History.html
--- a/Screens/Login.php
+++ b/Screens/Login.php
@ -0,0 +1,155 @@
+<?php
+session_start();
+require_once __DIR__ . '/../Logic/Backend/Authentication_Handler.php';
+
+$Error = '';
+$ShowModal = false;
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $ShowModal = true;
+    $Handler = new Authentication_Handler();
+    $Result = $Handler->Login(
+        $_POST['User_Type'],
+        $_POST['Email'],
+        $_POST['Password'],
+        $_POST['User_ID']
+    );
+
+    if ($Result['success']) {
+        if ($_SESSION['Access_Level'] >= 1) {
+            header('Location: Election_Dashboard.php');
+        } else {
+            header('Location: Voting_Screen.php');
+        }
+        exit;
+    } else {
+        $Error = $Result['error'];
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Click to Vote - School Election System</title>
+    <link rel="stylesheet" href="../Design/Style.css?v=<?php echo time(); ?>">
+    <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;800&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="Landing_Wrapper">
+        <div class="Landing_Header">
+            <div class="Logo_Pill">
+                <div class="Logo_Circle">
+                    <img src="../assets/pasted-20260204-200612-dffb96f0.png" alt="INHS Logo">
+                </div>
+                <div class="Logo_Text">
+                    <div class="Logo_Title">Iloilo National High School</div>
+                    <div class="Logo_Subtitle">Luna St., La Paz, Iloilo City</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="Landing_Content">
+            <h1 class="Landing_Title">Click to Vote</h1>
+            <p class="Landing_Description">
+                This portal is currently a <strong>PROTOTYPE MODEL</strong> under active development to demonstrate the digital election process. 
+                Please be aware that all features are in a testing phase and interactions are for demonstration purposes only. 
+                We are continuously refining the system to ensure a seamless experience for the final implementation.
+            </p>
+            <button class="Btn_Landing_Login" onclick="ToggleModal(true)">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
+                    <polyline points="10 17 15 12 10 7"></polyline>
+                    <line x1="15" y1="12" x2="3" y2="12"></line>
+                </svg>
+                Login
+            </button>
+        </div>
+
+        <div class="Landing_Footer">
+            © 2026 Click to Vote System [PROTOTYPE]. All Rights Reserved.
+        </div>
+    </div>
+
+    <!-- Login Modal -->
+    <div id="Login_Modal" class="Modal_Overlay <?php echo $ShowModal ? 'Active' : ''; ?>">
+        <div class="Login_Card">
+            <button class="Btn_Close_Modal" onclick="ToggleModal(false)">&times;</button>
+            <h2 class="Title_Large">Sign In</h2>
+            <p class="Text_Muted">Access the election management system</p>
+
+            <?php if ($Error): ?>
+                <div class="Alert Alert_Error"><?php echo $Error; ?></div>
+            <?php endif; ?>
+
+            <form action="Login.php" method="POST">
+                <div class="Form_Group">
+                    <label class="Label" for="User_Type">User Type</label>
+                    <select class="Input" name="User_Type" id="User_Type" required>
+                        <option value="Admin">Admin</option>
+                        <option value="COMEA Adviser">COMEA Adviser</option>
+                        <option value="COMEA Officer">COMEA Officer</option>
+                        <option value="Voter">Voter</option>
+                    </select>
+                </div>
+
+                <div class="Form_Group">
+                    <label class="Label" for="User_ID">User ID</label>
+                    <input class="Input" type="text" name="User_ID" id="User_ID" placeholder="e.g. ADMIN-001" required>
+                </div>
+
+                <div class="Form_Group">
+                    <label class="Label" for="Email">Email Address</label>
+                    <input class="Input" type="email" name="Email" id="Email" placeholder="name@school.edu" required>
+                </div>
+
+                <div class="Form_Group">
+                    <label class="Label" for="Password">Password</label>
+                    <div class="Password_Toggle_Wrapper">
+                        <input class="Input" type="password" name="Password" id="Password" required>
+                        <button type="button" class="Toggle_Button" onclick="TogglePassword()">SHOW</button>
+                    </div>
+                </div>
+
+                <button type="submit" class="Button_Primary">Login to System</button>
+            </form>
+        </div>
+    </div>
+
+    <script>
+        function ToggleModal(show) {
+            const modal = document.getElementById('Login_Modal');
+            if (show) {
+                modal.classList.add('Active');
+            } else {
+                modal.classList.remove('Active');
+            }
+        }
+
+        function TogglePassword() {
+            const passwordInput = document.getElementById('Password');
+            const toggleBtn = event.currentTarget;
+            if (passwordInput.type === 'password') {
+                passwordInput.type = 'text';
+                toggleBtn.textContent = 'HIDE';
+            } else {
+                passwordInput.type = 'password';
+                toggleBtn.textContent = 'SHOW';
+            }
+        }
+
+        // Close modal on escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') ToggleModal(false);
+        });
+
+        // Close modal on clicking outside the card
+        document.getElementById('Login_Modal').addEventListener('click', (e) => {
+            if (e.target.id === 'Login_Modal') ToggleModal(false);
+        });
+    </script>
+</body>
+</html>
--- a/Screens/Logout.php
+++ b/Screens/Logout.php
@ -0,0 +1,4 @@
+<?php
+require_once __DIR__ . '/../Logic/Backend/Authentication_Handler.php';
+$Auth = new Authentication_Handler();
+$Auth->Logout();
--- a/Screens/Officers.html
+++ b/Screens/Officers.html
--- a/Screens/Voters.html
+++ b/Screens/Voters.html
--- a/Screens/Voting_Screen.php
+++ b/Screens/Voting_Screen.php
@ -0,0 +1,33 @@
+<?php
+require_once __DIR__ . '/../Logic/Backend/Authentication_Handler.php';
+$Auth = new Authentication_Handler();
+$Auth->Check_Auth();
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Voting Screen - Online School Election System</title>
+    <link rel="stylesheet" href="../Design/Style.css">
+</head>
+<body>
+    <nav class="Dashboard_Navbar">
+        <div class="Logo"><strong>ElectionSystem</strong></div>
+        <div class="User_Info">
+            <span><?php echo $_SESSION['User_Name']; ?> (Voter)</span>
+            <a href="Logout.php" style="margin-left: 20px; font-size: 0.875rem;">Logout</a>
+        </div>
+    </nav>
+
+    <main style="padding: 40px 24px; max-width: 800px; margin: 0 auto;">
+        <h2 style="margin-bottom: 24px; text-align: center;">Welcome, <?php echo $_SESSION['User_Name']; ?></h2>
+        
+        <div class="Card" style="max-width: 100%; text-align: center;">
+            <div style="font-size: 3rem; margin-bottom: 20px;">🗳️</div>
+            <h3 style="margin-bottom: 12px;">Election Status</h3>
+            <p class="Text_Muted">There is no active election at the moment. Please check back later during the scheduled voting period.</p>
+        </div>
+    </main>
+</body>
+</html>
--- a/assets/pasted-20260204-200027-bc93fd52.png
+++ b/assets/pasted-20260204-200027-bc93fd52.png
--- a/assets/pasted-20260204-200305-388a4105.jpg
+++ b/assets/pasted-20260204-200305-388a4105.jpg
--- a/assets/pasted-20260204-200612-dffb96f0.png
+++ b/assets/pasted-20260204-200612-dffb96f0.png
--- a/index.php
+++ b/index.php
@ -1,150 +1,3 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
-
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
-?>
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
-  <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;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
-</head>
-<body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
-      </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
-    </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
-</body>
-</html>
+header('Location: Screens/Login.php');
+exit;
--- a/init_db.php
+++ b/init_db.php
@ -0,0 +1,71 @@
+<?php
+require_once __DIR__ . '/db/config.php';
+
+try {
+    $pdo = db();
+    
+    $queries = [
+        "CREATE TABLE IF NOT EXISTS Officers (
+            User_ID VARCHAR(255) PRIMARY KEY,
+            Role VARCHAR(100),
+            Access_Level INT DEFAULT 0,
+            Email VARCHAR(255) UNIQUE,
+            Password VARCHAR(255),
+            Name VARCHAR(255),
+            Photo VARCHAR(255)
+        )",
+        "CREATE TABLE IF NOT EXISTS Voters (
+            User_ID VARCHAR(255) PRIMARY KEY,
+            Email VARCHAR(255) UNIQUE,
+            Password VARCHAR(255),
+            Track_Cluster VARCHAR(100),
+            Grade_Level INT,
+            Section VARCHAR(100),
+            Has_Voted BOOLEAN DEFAULT FALSE
+        )",
+        "CREATE TABLE IF NOT EXISTS Candidates (
+            User_ID VARCHAR(255) PRIMARY KEY,
+            Email VARCHAR(255) UNIQUE,
+            Password VARCHAR(255),
+            Track_Cluster VARCHAR(100),
+            Grade_Level INT,
+            Section VARCHAR(100),
+            Name VARCHAR(255),
+            Position VARCHAR(255),
+            Party VARCHAR(255),
+            Photo VARCHAR(255)
+        )",
+        "CREATE TABLE IF NOT EXISTS Election_History (
+            Election_ID INT AUTO_INCREMENT PRIMARY KEY,
+            Year INT,
+            Parties TEXT,
+            Candidates TEXT,
+            Results TEXT,
+            Total_Voters INT,
+            Status VARCHAR(50),
+            Start_Date DATETIME,
+            End_Date DATETIME
+        )",
+        "CREATE TABLE IF NOT EXISTS Audit_Trail (
+            Log_ID INT AUTO_INCREMENT PRIMARY KEY,
+            User_ID VARCHAR(255),
+            User_Role VARCHAR(100),
+            Action_Type VARCHAR(100),
+            Action_Details TEXT,
+            Timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        )"
+    ];
+
+    foreach ($queries as $query) {
+        $pdo->exec($query);
+    }
+
+    // Insert default admin (Password: Admin123)
+    $stmt = $pdo->prepare("INSERT IGNORE INTO Officers (User_ID, Role, Access_Level, Email, Password, Name) VALUES (?, ?, ?, ?, ?, ?)");
+    $stmt->execute(['ADMIN-001', 'Admin', 3, 'admin@school.edu', password_hash('Admin123', PASSWORD_DEFAULT), 'System Administrator']);
+
+    echo "Database initialized successfully.\n";
+
+} catch (Exception $e) {
+    die("Error initializing database: " . $e->getMessage());
+}