Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>ALISTO</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Roboto:wght@400;500&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div id="login-modal" class="modal-overlay hidden"> | |
| <div class="modal-content small-modal"> | |
| <div class="modal-header"> | |
| <h2>Responder Login</h2> | |
| <button id="close-login-btn" class="icon-btn-ghost"><i class="fa-solid fa-xmark"></i></button> | |
| </div> | |
| <div class="login-form"> | |
| <input type="text" id="username" placeholder="Username" class="login-input"> | |
| <input type="password" id="password" placeholder="Password" class="login-input"> | |
| <button id="login-submit-btn" class="action-btn resolve-btn full-width">Log In</button> | |
| <p id="login-error" style="color: #ff4444; margin-top: 10px; font-size: 0.9em;"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="logout-modal" class="modal-overlay hidden"> | |
| <div class="modal-content" style="max-width: 400px; text-align: center;"> | |
| <div class="modal-header" style="justify-content: center; margin-bottom: 10px;"> | |
| <h2 style="color: #ed4801;">Confirm Logout</h2> | |
| </div> | |
| <p style="color: #ccc; margin-bottom: 30px;">Are you sure you want to end your session?</p> | |
| <div class="action-buttons" style="justify-content: center; gap: 15px;"> | |
| <button id="cancel-logout-btn" class="action-btn" style="background: #444; padding: 10px 20px;">Cancel</button> | |
| <button id="confirm-logout-btn" class="action-btn confirm-btn" style="padding: 10px 20px;">Yes, Logout</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="new-alert-notification" class="alert-popup hidden"> | |
| <i class="fa-solid fa-bell"></i> | |
| <span id="notification-message">New URGENT Alert Received!</span> | |
| </div> | |
| <audio id="alert-sound" src="https://assets.mixkit.co/active_storage/sfx/2869/2869-preview.mp3" preload="auto"></audio> | |
| <div id="stats-modal" class="modal-overlay hidden"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2>Situation Report</h2> | |
| <button id="close-stats-btn" class="icon-btn-ghost"><i class="fa-solid fa-xmark"></i></button> | |
| </div> | |
| <div class="charts-container"> | |
| <div class="chart-wrapper"> | |
| <h3>Active Incidents by Type</h3> | |
| <canvas id="typeChart"></canvas> | |
| </div> | |
| <div class="chart-wrapper"> | |
| <h3>Urgency Breakdown</h3> | |
| <canvas id="urgencyChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <header class="main-header"> | |
| <div class="logo"> | |
| <span class="logo-main">ALISTO</span> | |
| <span class="logo-sub">Alert System</span> | |
| </div> | |
| <div class="search-container"> | |
| <i class="fa-solid fa-xmark clear-icon hidden"></i> | |
| <input type="text" placeholder="Search incidents..." class="search-input"> | |
| <i class="fa-solid fa-magnifying-glass search-icon clickable" data_tooltip="Search"></i> | |
| </div> | |
| <nav class="main-nav"> | |
| <a href="index.html" class="nav-link active" data_tooltip="Go to Posts">Dashboard</a> | |
| <a href="map.html" class="nav-link" data_tooltip="Go to Live Map">Live Map</a> | |
| <a href="#" id="nav-login-btn" class="nav-link" style="color: #ed4801;">Login</a> | |
| <div class="profile-container" id="profile-container-wrap" style="display: none;"> | |
| <div id="profile-toggle" class="profile-icon"> | |
| <i class="fa-solid fa-user"></i> | |
| </div> | |
| <div id="profile-dropdown" class="profile-dropdown hidden"> | |
| <div class="profile-info-header"> | |
| <div class="profile-icon-large"> | |
| <i class="fa-solid fa-user"></i> | |
| </div> | |
| <div id="dropdown-username" class="dropdown-username">Officer ID</div> | |
| </div> | |
| <hr class="dropdown-separator"> | |
| <button id="dropdown-logout-btn" class="dropdown-logout-btn"> | |
| <i class="fa-solid fa-right-from-bracket"></i> Logout | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| </header> | |
| <section class="hero"> | |
| <div class="sidebar-wrapper"> | |
| <div class="filter-bar"> | |
| <button id="show-stats-btn" class="pulse-btn" data_tooltip="View Real-time Alert Statistics" data_tooltip_align="left"> | |
| <i class="fa-solid fa-chart-pie"></i> | |
| </button> | |
| <div class="separator"></div> | |
| <div class="filter-bar-c"> | |
| <div class="filter-bar-r"> | |
| <div class="filter-wrap1" data_tooltip="Sort alerts by Time"> | |
| <select id="sort-select" class="filter-select"> | |
| <option value="newest" title="Hi">Newest</option> | |
| <option value="oldest">Oldest</option> | |
| </select> | |
| </div> | |
| <div class="filter-wrap2" data_tooltip="Filter by Urgency Level"> | |
| <select id="urgency-select" class="filter-select"> | |
| <option value="all">All Levels</option> | |
| <option value="High">High</option> | |
| <option value="Medium">Medium</option> | |
| <option value="Low">Low</option> | |
| </select> | |
| </div> | |
| <div class="filter-wrap3" data_tooltip="Filter alerts by status"> | |
| <select id="view-select" class="filter-select"> | |
| <option value="all">All Status</option> | |
| <option value="active">Active</option> | |
| <!-- <option value="active">Verified</option> --> | |
| <option value="archived">Resolved</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="filter-bar-r"> | |
| <div class="filter-wrap4" data_tooltip="Filter by Disaster Type"> | |
| <select id="type-select" class="filter-select"> | |
| <option value="all">All Disaster Types</option> | |
| <option value="Flood">Flood</option> | |
| <option value="Typhoon">Typhoon</option> | |
| <option value="Earthquake">Earthquake</option> | |
| <option value="Fire">Fire</option> | |
| <option value="Volcano">Volcano</option> | |
| <option value="Landslide">Landslide</option> | |
| <option value="General Emergency">General</option> | |
| </select> | |
| </div> | |
| <div class="filter-wrap5" data_tooltip="Filter by Assistance Needed"> | |
| <select id="assist-select" class="filter-select"> | |
| <option value="all">All Assistances</option> | |
| <option value="Rescue">Rescue</option> | |
| <option value="Medical">Medical</option> | |
| <option value="Evacuation">Evacuation</option> | |
| <option value="Food/Water">Food/Water</option> | |
| <option value="General Assistance">General</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="export-btn" class="icon-btn" data_tooltip="Download Report (CSV)"> | |
| <i class="fa-solid fa-download"></i> | |
| </button> | |
| </div> | |
| <div class="sidebar" id="incident-feed"> | |
| <p style="color: white; padding: 20px; text-align: center;">Loading alerts...</p> | |
| </div> | |
| <div class="active-alert-counter"> | |
| <span style="font-size: 0.9em; color: #ccc;">Active Alerts: </span> | |
| <span id="dashboard-alert-count" style="font-weight: 700; color: #ffc107;">0</span> | |
| </div> | |
| </div> | |
| <div class="detail-box" id="postInfo"> | |
| <div class="detail-header-r"> | |
| <h2 class="detail-title" id="detail-title">Select an Alert</h2> | |
| <div class="action-buttons"> | |
| <button id="verify-btn" class="action-btn1 verify-btn" onclick="updateStatus('Verified')" data_tooltip="Mark this alert as Verified (Confirmed)"> | |
| <i class="fa-solid fa-check"></i> | |
| <span class="btn-text">Verify</span> | |
| </button> | |
| <button id="resolve-btn" class="action-btn1 resolve-btn" onclick="updateStatus('Resolved')" data_tooltip="Mark this alert as Resolved and dismiss"> | |
| <i class="fa-solid fa-box-archive"></i> | |
| <span class="btn-text">Resolve</span> | |
| </button> | |
| <a href="#" id="detail-link" target="_blank" class="detail-redirect" data_tooltip="Go to Reddit Post"> | |
| <i class="fa-brands fa-reddit-alien"></i> Post | |
| </a> | |
| </div> | |
| </div> | |
| <hr class="detail-line"> | |
| <div class="detail-important-r"> | |
| <div class="detail-row1-c"> | |
| <div> | |
| <div class="detail-label" style="margin-top: 10px;">Assistance Needed</div> | |
| <div id="detail-assistance" style="color: #ed4801; font-weight: bold; text-transform: uppercase;">-</div> | |
| </div> | |
| <div> | |
| <div class="detail-label">Location / Address</div> | |
| <span id="detail-location" style="color: white;">-</span> | |
| </div> | |
| <div class="detail-row1-col2-r"> | |
| <div class="contact-c"> | |
| <div class="detail-label">Contact Person</div> | |
| <span id="detail-contact-name" style="color: white;">-</span> | |
| </div> | |
| <div class="contact-c"> | |
| <div class="detail-label">Contact Number</div> | |
| <span id="detail-contact-number" style="color: white;">-</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="text-align: right;"> | |
| <div class="detail-label">Posted</div> | |
| <div class="time" id="detail-time">_ mins ago at __:__ __</div> | |
| <!-- <div class="detail-label" style="margin-top: 10px;">Assistance Needed</div> | |
| <div id="detail-assistance" style="color: #ed4801; font-weight: bold; text-transform: uppercase;">-</div> -moved above --> | |
| <div class="detail-label" style="margin-top: 10px;">Status</div> | |
| <div id="detail-urgency" style="color: white;">-</div> | |
| <div id="detail-status" class="status-badge">New</div> | |
| </div> | |
| </div> | |
| <div class="detail-content" id="detail-body"> | |
| Click on an alert from the sidebar to view full details here. | |
| </div> | |
| </div> | |
| </section> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |