Miyaka/alertify-system2
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8" />5 <title>Alertify – Citizen Feed</title>6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />7 8 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Orbitron:wght@600;800&display=swap" rel="stylesheet" />9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />10 11 <style>12 /* --- MODERN SOCIAL THEME VARIABLES --- */13 :root {14 --bg-body: #101112; /* Ultra dark background */15 --bg-nav: #1c1d1e; /* Sticky headers */16 --bg-card: #242526; /* Card background */17 --bg-hover: #3a3b3c; /* Hover states */18 --bg-input: #3a3b3c; /* Input fields */19 20 --text-main: #e4e6eb; /* Primary text */21 --text-muted: #b0b3b8; /* Secondary text */22 23 --accent: #ff2e4d; /* Alertify Red */24 --accent-dim: rgba(255, 46, 77, 0.15);25 26 --border: #393a3b;27 --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);28 --radius: 12px;29 30 --nav-height: 60px;31 --bottom-nav-height: 60px;32 }33 34 * { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }35 36 body {37 margin: 0;38 background-color: var(--bg-body);39 color: var(--text-main);40 font-family: "Inter", system-ui, -apple-system, sans-serif;41 padding-top: var(--nav-height);42 /* Prevent horizontal scroll on mobile */43 overflow-x: hidden; 44 }45 46 /* --- SCROLLBAR --- */47 ::-webkit-scrollbar { width: 8px; }48 ::-webkit-scrollbar-track { background: var(--bg-body); }49 ::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 4px; }50 ::-webkit-scrollbar-thumb:hover { background: #555; }51 52 /* --- RESPONSIVE LAYOUT GRID --- */53 .app-layout {54 display: grid;55 /* Default Desktop: Sidebar (280px) | Feed (600px) | Widgets (300px) */56 grid-template-columns: 280px minmax(0, 600px) 300px;57 gap: 32px;58 max-width: 1250px;59 margin: 0 auto;60 padding: 24px;61 justify-content: center;62 }63 64 /* Tablet View (Hide Right Sidebar, Collapse Left Sidebar) */65 @media (max-width: 1100px) {66 .app-layout { 67 grid-template-columns: 80px minmax(0, 1fr); 68 gap: 20px; 69 padding: 20px;70 }71 /* Hide Widgets */72 .right-sidebar { display: none; }73 74 /* Collapse Navigation to Icons */75 .left-sidebar .nav-btn span { display: none; } 76 .left-sidebar .nav-btn { justify-content: center; padding: 12px 0; }77 .left-sidebar hr { margin: 8px 0; }78 }79 80 /* Mobile View (Bottom Nav, Full Width Feed) */81 @media (max-width: 768px) {82 body { padding-bottom: var(--bottom-nav-height); } /* Space for bottom nav */83 84 .app-layout { 85 display: block; 86 padding: 12px; 87 max-width: 100%;88 }89 90 /* Move Sidebar to Bottom */91 .left-sidebar { 92 position: fixed;93 bottom: 0; left: 0; right: 0; top: auto;94 height: var(--bottom-nav-height);95 width: 100%;96 background: var(--bg-nav);97 border-right: none;98 border-top: 1px solid var(--border);99 flex-direction: row;100 justify-content: space-around;101 align-items: center;102 padding: 0;103 z-index: 900;104 box-shadow: 0 -4px 10px rgba(0,0,0,0.2);105 }106 107 .left-sidebar .nav-btn {108 flex-direction: column;109 gap: 4px;110 font-size: 0.65rem;111 border-radius: 0;112 margin: 0;113 height: 100%;114 background: transparent !important; /* Remove hover bg on mobile */115 color: var(--text-muted);116 }117 118 .left-sidebar .nav-btn span { display: block; font-weight: 500; }119 .left-sidebar .nav-btn i { font-size: 1.2rem; margin: 0; width: auto; }120 121 .left-sidebar .nav-btn.active { color: var(--accent); }122 .left-sidebar hr { display: none; }123 124 /* Adjust Top Nav */125 .top-nav { padding: 0 16px; }126 .brand-text { display: none; } /* Hide brand text on tiny screens */127 .user-pill { padding: 4px; background: transparent; }128 .user-pill span { display: none; } /* Hide user name on mobile */129 130 /* Composer Adjustments */131 .composer { padding: 12px; margin-bottom: 16px; }132 .chips-wrapper { margin-left: 0; margin-top: 10px; }133 134 .modal-card { width: 90%; }135 }136 137 /* --- TOP NAVIGATION BAR --- */138 .top-nav {139 position: fixed;140 top: 0; left: 0; right: 0;141 height: var(--nav-height);142 background: rgba(28, 29, 30, 0.95);143 backdrop-filter: blur(12px);144 border-bottom: 1px solid var(--border);145 z-index: 1000;146 display: flex;147 align-items: center;148 justify-content: space-between;149 padding: 0 24px;150 box-shadow: 0 2px 10px rgba(0,0,0,0.2);151 }152 153 .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }154 .brand-logo {155 width: 36px; height: 36px;156 background: linear-gradient(135deg, var(--accent), #99001e);157 border-radius: 10px; display: grid; place-items: center;158 color: #fff; font-size: 18px;159 }160 .brand-text {161 font-family: "Orbitron", sans-serif; font-weight: 800;162 font-size: 1.2rem; letter-spacing: 0.1em; color: #fff;163 }164 .brand-text span { color: var(--accent); }165 166 .user-menu { display: flex; align-items: center; gap: 12px; }167 .user-pill {168 background: var(--bg-hover); padding: 6px 14px 6px 6px;169 border-radius: 30px; display: flex; align-items: center;170 gap: 10px; font-size: 0.9rem; font-weight: 600;171 border: 1px solid transparent; transition: 0.2s;172 }173 .user-pill:hover { border-color: var(--border); background: #404040; }174 .avatar-small {175 width: 28px; height: 28px; border-radius: 50%; background: #555;176 background-image: url('https://api.dicebear.com/7.x/micah/svg?seed=Citizen'); 177 }178 .btn-icon {179 width: 40px; height: 40px; border-radius: 50%;180 background: var(--bg-hover); border: none; color: var(--text-main);181 display: grid; place-items: center; cursor: pointer;182 font-size: 1.1rem; transition: 0.2s;183 }184 .btn-icon:hover { background: #4e4f50; color: var(--accent); }185 186 /* --- SIDEBARS --- */187 .left-sidebar { position: sticky; top: 84px; height: fit-content; display: flex; flex-direction: column; }188 .right-sidebar { position: sticky; top: 84px; height: fit-content; }189 190 .nav-btn {191 display: flex; align-items: center; gap: 16px; width: 100%;192 padding: 12px 16px; margin-bottom: 4px; border-radius: 8px;193 color: var(--text-main); text-decoration: none;194 font-weight: 600; font-size: 0.95rem; transition: 0.2s;195 }196 .nav-btn:hover { background: var(--bg-hover); }197 .nav-btn i { font-size: 1.4rem; color: var(--accent); width: 24px; text-align: center; }198 .nav-btn.active { background: var(--accent-dim); color: var(--accent); }199 200 /* --- FEED & COMPOSER --- */201 .feed-container { display: flex; flex-direction: column; gap: 20px; width: 100%; }202 203 .composer {204 background: var(--bg-card); border-radius: var(--radius);205 padding: 16px; box-shadow: var(--shadow); border: 1px solid var(--border);206 }207 .composer-top { display: flex; gap: 12px; margin-bottom: 12px; }208 .avatar-large {209 width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;210 background: #555; background-image: url('https://api.dicebear.com/7.x/micah/svg?seed=Citizen');211 }212 #postContent {213 width: 100%; background: var(--bg-input); border: none;214 border-radius: 20px; padding: 12px 16px; color: #fff;215 font-size: 1rem; font-family: inherit; resize: none;216 min-height: 50px; transition: 0.2s;217 }218 #postContent:focus { background: #4e4f50; min-height: 80px; }219 220 .chips-wrapper { margin-left: 56px; margin-bottom: 16px; }221 .chips-label {222 font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted);223 letter-spacing: 0.05em; margin-bottom: 8px;224 }225 #quickButtons {226 display: flex; gap: 8px; overflow-x: auto;227 padding-bottom: 4px; scrollbar-width: none;228 }229 #quickButtons::-webkit-scrollbar { display: none; }230 231 .quick-btn {232 background: var(--bg-body); border: 1px solid var(--border);233 color: var(--text-muted); padding: 6px 14px; border-radius: 100px;234 font-size: 0.85rem; font-weight: 500; cursor: pointer;235 white-space: nowrap; display: flex; align-items: center; gap: 6px;236 transition: all 0.2s ease;237 }238 .quick-btn:hover { background: var(--bg-hover); color: var(--text-main); border-color: #555; }239 .quick-btn.active {240 background: var(--accent-dim); color: var(--accent);241 border-color: var(--accent); box-shadow: 0 0 10px rgba(255, 46, 77, 0.2);242 }243 244 .composer-actions {245 border-top: 1px solid var(--border); padding-top: 12px;246 display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;247 }248 .location-picker select {249 background: transparent; color: var(--text-muted); border: none;250 font-weight: 600; cursor: pointer; font-size: 0.9rem;251 padding: 4px; border-radius: 6px; max-width: 150px;252 }253 .btn-group { display: flex; gap: 10px; }254 255 #postBtn {256 background: var(--text-main); color: #000; border: none;257 padding: 8px 24px; border-radius: 6px; font-weight: 700;258 cursor: pointer; transition: 0.2s;259 }260 #postBtn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,255,255,0.2); }261 262 #panicBtn {263 background: rgba(255, 46, 77, 0.1); color: var(--accent);264 border: 1px solid transparent; padding: 8px 16px; border-radius: 6px;265 font-weight: 600; cursor: pointer; transition: 0.2s;266 }267 #panicBtn:hover { background: var(--accent); color: #fff; box-shadow: 0 0 15px var(--accent); }268 269 /* --- POST CARDS --- */270 .post-card {271 background: var(--bg-card); border-radius: var(--radius);272 border: 1px solid var(--border); padding: 16px;273 box-shadow: var(--shadow); animation: slideUp 0.3s ease-out;274 }275 @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }276 277 .post-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }278 .post-meta { display: flex; flex-direction: column; }279 .post-user { font-weight: 700; font-size: 1rem; color: var(--text-main); }280 .post-time { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }281 .post-badges { display: flex; gap: 6px; flex-wrap: wrap; }282 283 .badge {284 font-size: 0.7rem; padding: 4px 8px; border-radius: 4px;285 background: var(--bg-hover); color: var(--text-muted);286 border: 1px solid var(--border); text-transform: uppercase;287 font-weight: 600; letter-spacing: 0.05em;288 }289 290 .post-text {291 font-size: 1rem; line-height: 1.5; color: var(--text-main);292 margin-bottom: 16px; white-space: pre-wrap;293 }294 295 .post-ai {296 background: linear-gradient(90deg, rgba(255, 46, 77, 0.1), transparent);297 border-left: 3px solid var(--accent); padding: 10px 14px;298 border-radius: 0 8px 8px 0; font-size: 0.85rem; color: var(--text-muted);299 }300 .ai-row { margin-bottom: 4px; }301 .ai-row b { color: var(--text-main); font-weight: 600; }302 303 /* --- WIDGETS --- */304 .widget-card {305 background: var(--bg-card); border-radius: var(--radius);306 padding: 16px; border: 1px solid var(--border); margin-bottom: 16px;307 }308 .widget-header {309 font-family: "Orbitron", sans-serif; font-weight: 700;310 font-size: 0.9rem; color: var(--text-muted);311 margin-bottom: 16px; letter-spacing: 0.05em; text-transform: uppercase;312 }313 .contact-item {314 display: flex; align-items: center; gap: 12px;315 margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border);316 }317 .contact-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }318 .icon-box {319 width: 36px; height: 36px; border-radius: 8px;320 background: var(--bg-hover); color: var(--accent);321 display: grid; place-items: center; font-size: 1rem;322 }323 .contact-info div:first-child { font-weight: 600; font-size: 0.9rem; }324 .contact-info div:last-child { color: var(--text-muted); font-size: 0.8rem; }325 326 /* --- PANIC MODAL --- */327 .hidden { display: none !important; }328 #panicModal {329 position: fixed; top: 0; left: 0; width: 100%; height: 100%;330 background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px);331 z-index: 2000; display: flex; justify-content: center; align-items: center;332 padding: 20px;333 }334 .modal-card {335 background: #18191a; border: 2px solid var(--accent);336 width: 100%; max-width: 480px; border-radius: 16px; padding: 24px;337 text-align: center; box-shadow: 0 0 50px rgba(255, 46, 77, 0.2);338 animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);339 }340 @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }341 .modal-card h3 { font-family: "Orbitron", sans-serif; color: var(--accent); margin: 10px 0 6px; font-size: 1.5rem; }342 .modal-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 24px; }343 344 #panicBarangay {345 width: 100%; padding: 12px; background: var(--bg-hover);346 border: 1px solid var(--border); border-radius: 8px; color: #fff;347 font-size: 1rem; margin-bottom: 20px; outline: none;348 }349 .modal-card #panicButtons {350 display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; overflow-x: visible;351 }352 .modal-card .panic-btn {353 background: #2a0a0a; border: 1px solid #501010; color: #ff5050;354 padding: 12px; border-radius: 8px; font-weight: 700; cursor: pointer;355 display: flex; flex-direction: column; align-items: center; gap: 4px; transition: 0.2s;356 }357 .modal-card .panic-btn:hover, .modal-card .panic-btn.active { background: var(--accent); color: #000; }358 359 #panicError, #postError {360 color: #ff8080; background: rgba(255, 0, 0, 0.15);361 border: 1px solid rgba(255, 0, 0, 0.3); padding: 10px;362 border-radius: 8px; margin-top: 10px; font-size: 0.85rem; display: none;363 }364 .modal-actions { display: flex; flex-direction: column; gap: 10px; }365 #panicSend {366 background: var(--accent); color: #000; border: none; width: 100%;367 padding: 12px; font-weight: 800; font-size: 1rem; border-radius: 8px;368 cursor: pointer; text-transform: uppercase; letter-spacing: 0.1em; transition: 0.2s;369 }370 #panicSend:hover { box-shadow: 0 0 20px rgba(255, 46, 77, 0.6); }371 #panicClose { background: transparent; border: none; color: var(--text-muted); cursor: pointer; text-decoration: underline; font-size: 0.9rem; }372 .empty { padding: 40px; text-align: center; color: var(--text-muted); font-style: italic; }373 374 </style>375</head>376<body>377 378 <header class="top-nav">379 <a href="/" class="brand">380 <div class="brand-logo"><i class="fa-solid fa-triangle-exclamation"></i></div>381 <div class="brand-text">ALERTI<span>FY</span></div>382 </a>383 384 <div class="user-menu">385 <div class="user-pill">386 <div class="avatar-small"></div>387 <span id="meLabel">Citizen</span> </div>388 <button id="logoutBtn" class="btn-icon" title="Log Out">389 <i class="fa-solid fa-power-off"></i>390 </button>391 </div>392 </header>393 394 <div class="app-layout">395 396 <aside class="left-sidebar">397 <a href="#" class="nav-btn active">398 <i class="fa-solid fa-house-signal"></i> <span>Live Feed</span>399 </a>400 <a href="#" class="nav-btn">401 <i class="fa-solid fa-user-shield"></i> <span>My Reports</span>402 </a>403 <a href="#" class="nav-btn" onclick="document.getElementById('panicBtn').click()">404 <i class="fa-solid fa-bullhorn"></i> <span>Emergency SOS</span>405 </a>406 <hr style="border:0; border-top:1px solid var(--border); margin:12px 0;">407 <a href="#" class="nav-btn" style="opacity:0.6">408 <i class="fa-solid fa-gear"></i> <span>Settings</span>409 </a>410 </aside>411 412 <main class="feed-container">413 414 <div class="composer">415 <div class="composer-top">416 <div class="avatar-large"></div>417 <textarea id="postContent" placeholder="What's happening in your area? Type report..."></textarea>418 </div>419 420 <div class="chips-wrapper">421 <div class="chips-label">Quick Tags:</div>422 <div id="quickButtons"></div>423 </div>424 425 <div id="postError"></div>426 427 <div class="composer-actions">428 <div class="location-picker">429 <i class="fa-solid fa-location-dot" style="color:var(--accent)"></i>430 <select id="barangaySelect">431 <option value="">Add Location...</option>432 </select>433 </div>434 435 <div class="btn-group">436 <button id="panicBtn"><i class="fa-solid fa-circle-exclamation"></i> PANIC</button>437 <button id="postBtn">Post Report</button>438 </div>439 </div>440 </div>441 442 <div id="posts">443 <div style="text-align:center; padding:20px; color:var(--text-muted);">444 <i class="fa-solid fa-circle-notch fa-spin"></i> Loading live feed...445 </div>446 </div>447 448 </main>449 450 <aside class="right-sidebar">451 452 <div class="widget-card">453 <div class="widget-header">Lipa City Emergency</div>454 455 <div class="contact-item">456 <div class="icon-box"><i class="fa-solid fa-phone-volume"></i></div>457 <div class="contact-info">458 <div>CDRRMO Command</div>459 <div>(043) 123-4567</div>460 </div>461 </div>462 463 <div class="contact-item">464 <div class="icon-box"><i class="fa-solid fa-user-nurse"></i></div>465 <div class="contact-info">466 <div>Red Cross / Medic</div>467 <div>(043) 555-1000</div>468 </div>469 </div>470 471 <div class="contact-item">472 <div class="icon-box"><i class="fa-solid fa-shield-cat"></i></div>473 <div class="contact-info">474 <div>PNP Lipa Station</div>475 <div>117 / (043) 987-6543</div>476 </div>477 </div>478 479 </div>480 481 <div class="widget-card" style="border-color:var(--accent-dim);">482 <div class="widget-header" style="color:var(--accent)">Safety Tip</div>483 <p style="font-size:0.9rem; color:var(--text-muted); line-height:1.5;">484 <i class="fa-solid fa-circle-info"></i> 485 In case of <b>flooding</b>, switch off your main power breaker and move to higher ground immediately. Do not walk through moving water.486 </p>487 </div>488 489 </aside>490 491 </div>492 493 <div id="panicModal" class="hidden">494 <div class="modal-card">495 <div style="font-size:3rem;">🚨</div>496 <h3>CRITICAL ALERT</h3>497 <p>This will send an immediate SOS signal to the LGU Command Center. Use only for life-threatening emergencies.</p>498 499 <select id="panicBarangay">500 <option value="">Select Your Location</option>501 </select>502 503 <div style="text-align:left; color:var(--text-muted); font-size:0.8rem; margin-bottom:8px;">Nature of Emergency:</div>504 <div id="panicButtons"></div>505 506 <div id="panicError"></div>507 508 <div class="modal-actions">509 <button id="panicSend" style="display:none">CONFIRM SOS</button> 510 <button id="panicClose">Cancel</button>511 </div>512 </div>513 </div>514 515 <script src="/assets/js/user_feed.js"></script>516 517 <script>518 document.addEventListener('DOMContentLoaded', () => {519 const pBtn = document.getElementById('panicBtn');520 const pModal = document.getElementById('panicModal');521 const pClose = document.getElementById('panicClose');522 523 if(pBtn && pModal) {524 pBtn.addEventListener('click', (e) => {525 e.preventDefault(); // Stop form submit if any526 pModal.classList.remove('hidden');527 });528 }529 if(pClose && pModal) {530 pClose.addEventListener('click', (e) => {531 e.preventDefault();532 pModal.classList.add('hidden');533 });534 }535 });536 </script>537 538</body>539</html>