Spaces:

Quivara
/

alisto-project

Running

App Files Files Community

Quivara commited on 12 days ago

Commit

75aa02d

verified ·

1 Parent(s): 54c71e0

Upload 10 files

Browse files

Files changed (10) hide show

alisto_project/backend/alisto.db +0 -0
alisto_project/backend/index.html +261 -0
alisto_project/backend/ingest_reddit.py +429 -0
alisto_project/backend/map.html +61 -0
alisto_project/backend/map_script.js +345 -0
alisto_project/backend/models.py +67 -0
alisto_project/backend/ner_extractor.py +194 -0
alisto_project/backend/script.js +640 -0
alisto_project/backend/style.css +800 -0
alisto_project/backend/templates.py +62 -0

alisto_project/backend/alisto.db ADDED Viewed

Binary file (36.9 kB). View file

alisto_project/backend/index.html ADDED Viewed

	@@ -0,0 +1,261 @@

+<!DOCTYPE html>
+<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 class="detail-text" id="detail-assistance" style="color: #ed4801; font-weight: bold; text-transform: uppercase;">-</div>
+                    </div>
+                    <div>
+                        <div class="detail-label">Location / Address</div>
+                        <span class="detail-text" id="detail-location">-</span>
+                    </div>
+                    <div class="detail-row1-col2-r">
+                        <div class="contact-c">
+                            <div class="detail-label">Contact Person</div>
+                            <span class="detail-text" id="detail-contact-name">-</span>
+                        </div>
+                        <div class="contact-c">
+                            <div class="detail-label">Contact Number</div>
+                            <span class="detail-text" id="detail-contact-number">-</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 class="detail-text" id="detail-urgency" style="color: white;">-</div>
+                    <div id="detail-status" class="status-badge">New</div>
+                </div>
+            </div>
+            <hr style="margin: 30px 0 20px 0; border: 0; border-top: 1px dashed #444;">
+            <div class="detail-label">Post content</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>

alisto_project/backend/ingest_reddit.py ADDED Viewed

	@@ -0,0 +1,429 @@

+import asyncpraw
+import asyncio
+import os
+import torch
+import pickle
+import numpy as np
+import torch.nn.functional as F
+from datetime import datetime
+from dotenv import load_dotenv
+from flask import Flask
+from models import db, DisasterPost
+from transformers import AutoTokenizer, AutoModelForSequenceClassification
+from ner_extractor import extract_entities
+# 1. Config & Setup
+# defines the subreddits to be monitored by the scraper
+SUBREDDITS = "AlistoSimulation"
+# SUBREDDITS = "Philippines+NaturalDisasters+DisasterUpdatePH+Assistance+Typhoon+AlistoSimulation"
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+# loads environment variables from .env file
+load_dotenv(os.path.join(BASE_DIR, '../.env'))
+# initializes the Flask application context for database access
+app = Flask(__name__)
+DB_PATH = os.path.join(BASE_DIR, 'alisto.db')
+app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{DB_PATH}'
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+# sets a timeout for stable database connection
+app.config['SQLALCHEMY_ENGINE_OPTIONS'] = {'connect_args': {'timeout': 15}}
+db.init_app(app)
+# 2. Load Models
+print("Loading ALISTO Brains...")
+MODEL_DIR = os.path.join(BASE_DIR, 'models')
+ROBERTA_DIR = os.path.join(MODEL_DIR, 'roberta_model')
+TFIDF_PATH = os.path.join(MODEL_DIR, 'tfidf_ensemble.pkl')
+# A. RoBERTa (XLM-R Multilingual)
+# loads the RoBERTa tokenizer and sequence classification model (Context Expert)
+try:
+    tokenizer = AutoTokenizer.from_pretrained(ROBERTA_DIR)
+    roberta_model = AutoModelForSequenceClassification.from_pretrained(ROBERTA_DIR)
+    device = torch.device("cpu") # determines the device (CPU/GPU) for model execution
+    roberta_model.to(device)
+    roberta_model.eval()
+    print("✅ Context Expert (XLM-R) loaded")
+except Exception as e:
+    print(f"❌ Error loading RoBERTa: {e}")
+    exit()
+# B. TF-IDF (The Gatekeeper)
+# loads the pre-trained TF-IDF vectorizer and ensemble model (Gatekeeper)
+try:
+    with open(TFIDF_PATH, 'rb') as f:
+        tfidf_model = pickle.load(f)
+    print("✅ Gatekeeper (TF-IDF) loaded")
+except Exception as e:
+    print(f"❌ Error loading TF-IDF: {e}")
+    tfidf_model = None
+# 3. Reference Lists (Kept from your original)
+# list of Philippine locations used for basic geo-validation
+PHILIPPINE_LOCATIONS = [
+    "Philippines", "PH", "Luzon", "Visayas", "Mindanao", "Metro Manila", "NCR",
+    "Manila", "Quezon City", "Makati", "Taguig", "Pasig", "Mandaluyong",
+    "Marikina", "Las Pinas", "Las Piñas", "Muntinlupa", "Caloocan",
+    "Paranaque", "Parañaque", "Valenzuela", "Pasay", "Malabon",
+    "Navotas", "San Juan", "Pateros",
+    "Cavite", "Naic", "Bacoor", "Imus", "Dasmarinas", "Dasmariñas",
+    "General Trias", "Tagaytay", "Kawit", "Noveleta", "Rosario", "Tanza",
+    "Silang", "Trece Martires", "Laguna", "Calamba", "Santa Rosa", "Binan",
+    "Biñan", "San Pedro", "Cabuyao", "Los Banos", "Los Baños", "Rizal",
+    "Antipolo", "Cainta", "Taytay", "San Mateo", "Binangonan", "Batangas",
+    "Bulacan", "Pampanga", "Tarlac", "Cebu", "Iloilo", "Tacloban",
+    "Davao", "Cagayan", "Bicol", "Albay", "Isabela"
+]
+# function to process a single Reddit submission through all filters and save it
+async def process_post(post):
+    """handles logic for a single Reddit submission (filtering, AI, saving)"""
+    try:
+        full_text = f"{post.title} {post.selftext}"
+        # A. Check for Duplicates & Credibility (Unchanged logic)
+        # checks for existing post ID in the database
+        with app.app_context():
+            exists = DisasterPost.query.filter_by(reddit_id=post.id).first()
+            if exists: return
+            # blocks posts from suspicious new/low-karma accounts
+            if not is_credible_user(post):
+                print(f"\n------------------- DEBUG REJECTION -------------------")
+                print(f"❌ REJECTED POST ID: {post.id} (Title: {post.title[:30]})")
+                print(f"REASON: Credibility Check (Account too new/Low Karma)")
+                print(f"---------------------------------------------------------\n")
+                return
+        # B. Logic Filter (First Defense) (Unchanged logic)
+        # runs simple keyword checks to filter news/financial/irrelevant content
+        is_bad, reason = is_news_or_irrelevant(full_text)
+        if is_bad:
+            print(f"\n------------------- DEBUG REJECTION -------------------")
+            print(f"❌ REJECTED POST ID: {post.id} (Title: {post.title[:30]})")
+            print(f"REASON: Logic Filter (Common Sense Layer) Categorized as: {reason}")
+            print(f"---------------------------------------------------------\n")
+            return
+        # C. AI Analysis (Unchanged logic)
+        # runs the cascade AI check (TF-IDF then RoBERTa)
+        is_urgent, score, source = predict_urgency(full_text)
+        if not is_urgent:
+            print(f"\n------------------- DEBUG REJECTION -------------------")
+            print(f"❌ REJECTED POST ID: {post.id} (Title: {post.title[:30]})")
+            print(f"REASON: AI Confidence too low Score: {score:.2%} (Source: {source})")
+            print(f"---------------------------------------------------------\n")
+            return
+        # D. Entity Extraction
+        # extracts location, contact number, and contact person name
+        ner_results = extract_entities(full_text)
+        city_location = ner_results.get('location', "Unknown Location")
+        full_raw_address = ner_results.get('full_address', "Check Post")
+        contact_num = ner_results.get('contact', None)
+        contact_person_name = ner_results.get('contact_person_name', None)
+        # E. Final Triage and Data Preparation
+        # assigns location and determines disaster/assistance type
+        if isinstance(city_location, list):
+            location = city_location[0] if city_location else "Unknown Location"
+        else:
+            location = city_location
+        disaster_type = get_disaster_type(full_text)
+        assistance_type = get_assistance_type(full_text)
+        # 1. Calculate Dynamic Urgency (NEW)
+        # assigns High, Medium, or Low urgency based on severity keywords
+        dynamic_urgency = assign_dynamic_urgency(full_text)
+        # 2. Finalize Author (Fallback Logic)
+        # defaults to Reddit username if no contact name is explicitly extracted
+        reddit_username = str(post.author) if post.author else "Unknown"
+        final_author = contact_person_name if contact_person_name else reddit_username
+        # 3. Print Final Alert Confirmation
+        print(f"""------------------- ALERT SAVED -------------------\n🚨 ALERT ({score:.2%}): {disaster_type} in {location} Urgency: {dynamic_urgency} \n---------------------------------------------------------""")
+        # F. Single Database Creation and Commit
+        # creates and commits the final DisasterPost object to the database
+        new_post = DisasterPost(
+            reddit_id=post.id,
+            title=post.title,
+            content=post.selftext or post.title,
+            author=final_author,
+            location=location,
+            full_address=full_raw_address,
+            contact_number=contact_num,
+            disaster_type=disaster_type,
+            assistance_type=assistance_type,
+            urgency_level=dynamic_urgency,
+            is_help_request=True,
+            timestamp=datetime.utcfromtimestamp(post.created_utc)
+        )
+        with app.app_context():
+            db.session.add(new_post)
+            db.session.commit()
+    except Exception as e:
+        print(f"Post Processing Error for {post.id}: {e}")
+# validates if the extracted location is relevant to the Philippines
+def check_for_philippine_location(location_list):
+    if not location_list: return False
+    ph_locations = [loc.lower() for loc in PHILIPPINE_LOCATIONS]
+    for extracted_loc in location_list:
+        # Check partial match (e.g., "Marikina City" matches "Marikina")
+        for known_loc in ph_locations:
+            if known_loc in extracted_loc.lower() or extracted_loc.lower() in known_loc:
+                return True
+    return False
+# classifies the type of disaster based on severity keywords
+def get_disaster_type(text):
+    text_lower = text.lower()
+    mapping = {
+        "Earthquake": ["quake", "lindol", "shake", "aftershock"],
+        "Landslide": ["landslide", "guho", "mudslide", "natabunan"],
+        "Volcano": ["volcano", "lava", "ash", "magma", "taal", "mayon"],
+        "Fire": ["fire", "sunog", "burn", "smoke"],
+        "Typhoon": ["typhoon", "bagyo", "storm", "wind", "signal", "ulysses", "odette"],
+        "Flood": ["flood", "baha", "water", "river", "drown", "lubog", "taas ng tubig"]
+    }
+    for dtype, keywords in mapping.items():
+        if any(k in text_lower for k in keywords):
+            return dtype
+    return "General Emergency"
+# classifies the specific type of assistance needed (e.g., Medical, Rescue, Food)
+def get_assistance_type(text):
+    """determines the specific help needed using Nested Priority"""
+    text = text.lower()
+    # --- 1. IMMEDIATE RESCUE (Life Threatening) ---
+    rescue_kw = [
+        "rescue", "saklolo", "trapped", "stuck", "stranded",
+        "bubong", "roof", "boat", "bangka", "drowning", "lunod",
+        "di makalabas", "unable to leave"
+    ]
+    if any(k in text for k in rescue_kw):
+        critical_medical_override_kw = [
+            "bleeding", "unconscious", "head injury", "head wound",
+            "severely bleeding", "stroke", "heart attack", "trauma"
+        ]
+        if any(k in text for k in critical_medical_override_kw):
+            return "Medical"
+        return "Rescue" # if no critical medical keywords found
+    # --- 2. MEDICAL (Specific Needs/Ambulance) ---
+    # handles standalone medical needs if no rescue keywords were found
+    medical_kw = [
+        "medical", "doctor", "gamot", "medicine", "insulin", "dialysis",
+        "hospital", "oxygen", "pregnant", "labor", "manganganak", "ambulance",
+        "first aid", "pills", "medication"
+    ]
+    if any(k in text for k in medical_kw):
+        return "Medical"
+    # --- 3. EVACUATION (Shelter/Transport) ---
+    # classifies the need for temporary shelter or transport
+    evac_kw = [
+        "evacuate", "evacuation", "shelter", "center", "likas", "tents",
+        "matutuluyan", "alis", "transportation", "walang matutuluyan"
+    ]
+    if any(k in text for k in evac_kw):
+        return "Evacuation"
+    # --- 4. FOOD & WATER (Logistics) ---
+    # classifies the need for essential supplies (food, water, formula)
+    food_kw = [
+        "food", "pagkain", "water", "tubig", "gutom", "hungry", "relief",
+        "goods", "makakain", "inumin", "groceries", "supplies", "supply", "wala ng stock",
+        "gatas", "milk", "formula", "baby supplies", "ubos na", "wala na", "stock", "stock ng"
+    ]
+    if any(k in text for k in food_kw):
+        return "Food/Water"
+    return "General Assistance"
+# --- LOGIC FILTERS (The "Common Sense" Layer) ---
+# runs simple logic checks to filter out news reports and non-urgent context
+def is_news_or_irrelevant(text):
+    text_lower = text.lower()
+    # 1. NEWS & REPORTS
+    news_indicators = [
+        "breaking:", "just in:", "news:", "update:", "report:",
+        "casualties", "death toll", "according to", "reported that",
+        "suspension", "declared", "signal no", "public advisory",
+        "weather update", "volcano alert", "mmda", "pagasa"
+    ]
+    # 2. MONEY / SELLING
+    financial_indicators = [
+        "gcash", "paypal", "budget", "loan", "selling",
+        "fundraising", "donate", "send funds"
+    ]
+    # 3. IRRELEVANT CONTEXT
+    irrelevant_contexts = [
+        "how can i help", "where to donate", "thoughts and prayers",
+        "keep safe", "god bless", "praying for", "discussion:", "opinion:"
+    ]
+    # Logic Checks
+    if any(ind in text_lower for ind in news_indicators):
+        return True, "News/Report"
+    # blocks financial requests unless life-threatening keywords are also present
+    has_financial = any(ind in text_lower for ind in financial_indicators)
+    is_life_death = any(k in text_lower for k in ["trapped", "lubog", "roof", "rescue", "drowning", "stuck"])
+    if has_financial and not is_life_death:
+        return True, "Financial/Non-Urgent"
+    # blocks posts containing non-urgent discussion or commentary
+    if any(ctx in text_lower for ctx in irrelevant_contexts):
+        return True, "Context/NotUrgent"
+    return False, None
+# runs the two-stage AI classification check (TF-IDF then RoBERTa)
+def predict_urgency(text):
+    # 1. Gatekeeper (TF-IDF)
+    # quickly rejects posts with extremely low urgency confidence (below 10%)
+    if tfidf_model:
+        tfidf_probs = tfidf_model.predict_proba([text])[0]
+        tfidf_conf = tfidf_probs[1]
+        # If the fast model is sure it's junk, skip the heavy lifting
+        if tfidf_conf < 0.20:
+            return False, tfidf_conf, "TF-IDF Reject"
+    # 2. Context Expert (RoBERTa)
+    # runs the slower, context-aware model for final classification
+    inputs = tokenizer(text, return_tensors="pt", truncation=True, padding=True, max_length=128)
+    with torch.no_grad():
+        outputs = roberta_model(**inputs)
+        probs = F.softmax(outputs.logits, dim=-1)
+        roberta_conf = probs[0][1].item() # Probability of 'Rescue Request'
+    # final acceptance threshold (40%) for the RoBERTa model
+    return (roberta_conf > 0.4), roberta_conf, "RoBERTa"
+# assigns the final severity level (High, Medium, Low) based on severity keywords
+def assign_dynamic_urgency(text):
+    text_lower = text.lower()
+    # 1. HIGH URGENCY (Immediate Life-Threatening Event or Critical Medical Need)
+    high_keywords = [
+        "bleeding", "unconscious", "severely injured", "severe injury", "life threatening",
+        "insulin", "oxygen", "ambulance", "urgent medicine", "doctor", "hospital",
+        "trap", "trapped", "bubong", "collapsed", "di mapigilan", "drowning",
+        "lampas tao", "lubog", "delikado", "baha na", "mamatay"
+    ]
+    if any(k in text_lower for k in high_keywords):
+        return "High"
+    # 2. MEDIUM URGENCY (Time-Sensitive, Logistical Crisis)
+    medium_keywords = [
+        "stranded", "running out", "evacuate", "kailangan agad", "lowbat",
+        "paubos", "senior", "bedridden", "disabled", "gatas", "formula"
+    ]
+    if any(k in text_lower for k in medium_keywords):
+        return "Medium"
+    # 3. LOW URGENCY (General Supplies/Warning)
+    # posts that pass the AI but lack the above severity indicators fall here
+    return "Low"
+# blocks posts from accounts created less than 2 days ago or with negative karma
+def is_credible_user(post):
+    try:
+        author = post.author
+        # checks if author is deleted or unknown
+        if not author:
+            return False
+        # 1. Check Account Age (Must be older than 2 days)
+        created_time = datetime.utcfromtimestamp(author.created_utc)
+        account_age = datetime.utcnow() - created_time
+        if account_age.days < 2:
+            print(f"   ⚠️ Blocked: Account too new ({account_age.days} days)")
+            return False
+        # 2. Check Karma (Must not be negative)
+        total_karma = author.comment_karma + author.link_karma
+        if total_karma < -5:
+            print(f"   ⚠️ Blocked: Negative Karma ({total_karma})")
+            return False
+        return True
+    except Exception as e:
+        # allows posts to pass if Reddit API fails to get user info
+        return True
+# 4. Main Scraper Loop
+# orchestrates the entire scraping process (historical scan + real-time stream)
+async def scrape_reddit():
+    print("Connecting to Reddit API...")
+    client_id = os.getenv("REDDIT_CLIENT_ID")
+    client_secret = os.getenv("REDDIT_CLIENT_SECRET")
+    if not client_id or not client_secret:
+        print("❌ Error: Client ID or Secret missing in .env")
+        return
+    # initializes PRAW using the secure Client Credentials Flow (read-only)
+    reddit = asyncpraw.Reddit(
+        client_id=client_id,
+        client_secret=client_secret,
+        user_agent=os.getenv("REDDIT_USER_AGENT", "script:alisto_bot:v3.0")
+    )
+    try:
+        subreddit = await reddit.subreddit(SUBREDDITS)
+        print(f"👁️  ALISTO ACTIVE: Monitoring r/{SUBREDDITS}...")
+        # --- PHASE 1: FETCH LATEST EXISTING POSTS (e.g., last 500) ---
+        print("🔍 Scanning last 500 posts for missed alerts...")
+        # iterates over the last 500 posts asynchronously
+        async for post in subreddit.new(limit=500):
+            await process_post(post)
+        print("✅ Historical scan complete")
+        # --- PHASE 2: START REAL-TIME STREAM (Forever Loop) ---
+        print("📡 Starting real-time stream for new submissions...")
+        # starts the continuous loop to monitor for new submissions
+        async for post in subreddit.stream.submissions(skip_existing=False):
+            await process_post(post)
+    except Exception as e:
+        print(f"Global Scraper Error: {e}")
+    finally:
+        await reddit.close()
+        print("Scraper stopped")
+# executes the main scraping loop when the script is run
+if __name__ == "__main__":
+    try:
+        loop = asyncio.new_event_loop()
+        asyncio.set_event_loop(loop)
+        loop.run_until_complete(scrape_reddit())
+    except KeyboardInterrupt:
+        print("\n🛑 Stopped by user")

alisto_project/backend/map.html ADDED Viewed

	@@ -0,0 +1,61 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ALISTO | Live Map</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <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.5.1/css/all.min.css" />
+    <link rel="stylesheet" href="style.css">
+    <style>
+        /* Specific Map Page Styles */
+        body { overflow: hidden; }
+        #map {
+            width: 100%;
+            height: 100vh;
+            z-index: 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="map-sidebar">
+        <a href="index.html" class="back-btn">← Back to Dashboard</a>
+        <hr style="border: 0; border-top: 1px solid #555; margin: -2px 0 10px 0;">
+        <h1 style="font-family: Montserrat; color: #ed4801; margin-bottom: 0px;">LIVE MAP</h1>
+        <p style="font-size: 0.85em; color: #ccc; margin-bottom: 15px;">Real-time disaster tracking</p>
+        <div id="status-text">Connecting to Alisto...</div>
+        <div class="stat-item">
+            <span class="stat-highlight" id="alert-count">0</span> Active Alerts
+        </div>
+    </div>
+    <!-- <div class="sidebar" id="map-incident-feed">
+        <p style="color: white; padding: 20px; text-align: center;">Loading alerts...</p>
+    </div> -->
+    <div class="map-collapse-sidebar" id="map-sidebar-wrap">
+        <div class="map-sidebar-content">
+            <div id="map-incident-feed">
+                <p style="color:#ccc; font-size: 0.8em; padding: 10px;">Loading active alerts...</p>
+            </div>
+        </div>
+    </div>
+    <button class="sidebar-toggle-btn" id="sidebar-toggle">
+        <i class="fa-solid fa-bars"></i>
+    </button>
+    <div id="map"></div>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script src="map_script.js"></script>
+</body>
+</html>

alisto_project/backend/map_script.js ADDED Viewed

	@@ -0,0 +1,345 @@

+// 1. EXTENDED COORDINATE DATABASE
+// defines a static database of coordinates for Philippine cities and provinces
+const cityCoords = {
+    // --- NCR ---
+    "Manila": [14.5995, 120.9842],
+    "Quezon City": [14.6760, 121.0437],
+    "Makati": [14.5547, 121.0244],
+    "Taguig": [14.5176, 121.0509],
+    "Pasig": [14.5763, 121.0851],
+    "Mandaluyong": [14.5794, 121.0359],
+    "Marikina": [14.6333, 121.0980],
+    "Las Pinas": [14.4445, 120.9939],
+    "Muntinlupa": [14.4081, 121.0415],
+    "Caloocan": [14.6401, 120.9745],
+    "Parañaque": [14.4793, 121.0198],
+    "Valenzuela": [14.7011, 120.9830],
+    "Pasay": [14.5378, 121.0014],
+    "Malabon": [14.6625, 120.9512],
+    "Navotas": [14.6732, 120.9350],
+    "San Juan": [14.6019, 121.0355],
+    "Pateros": [14.5454, 121.0687],
+    // --- CAVITE ---
+    "Cavite": [14.2831, 120.9168],
+    "Naic": [14.3168, 120.7628],
+    "Bacoor": [14.4624, 120.9645],
+    "Imus": [14.4297, 120.9367],
+    "Dasmarinas": [14.3294, 120.9367],
+    "General Trias": [14.3876, 120.8842],
+    "Tagaytay": [14.1153, 120.9621],
+    "Kawit": [14.4448, 120.9022],
+    "Noveleta": [14.4263, 120.8820],
+    "Rosario": [14.4153, 120.8532],
+    "Tanza": [14.3949, 120.8532],
+    "Silang": [14.2312, 120.9746],
+    "Trece Martires": [14.2883, 120.8677],
+    // --- LAGUNA ---
+    "Laguna": [14.2166, 121.1667],
+    "Calamba": [14.2142, 121.1553],
+    "Santa Rosa": [14.3121, 121.1132],
+    "Binan": [14.3400, 121.0827],
+    "San Pedro": [14.3644, 121.0370],
+    "Cabuyao": [14.2796, 121.1219],
+    "Los Banos": [14.1708, 121.2413],
+    // --- RIZAL ---
+    "Rizal": [14.5906, 121.2236],
+    "Antipolo": [14.5844, 121.1763],
+    "Cainta": [14.5760, 121.1213],
+    "Taytay": [14.5623, 121.1376],
+    "San Mateo": [14.6963, 121.1215],
+    "Binangonan": [14.4759, 121.1893],
+    // --- BULACAN ---
+    "Bulacan": [14.8524, 120.8228],
+    "Malolos": [14.8527, 120.8160],
+    "Meycauayan": [14.7356, 120.9622],
+    "San Jose del Monte": [14.8143, 121.0427],
+    "Bocaue": [14.8066, 120.9256],
+    // --- MAJOR PROVINCES / CITIES ---
+    "Pampanga": [15.0359, 120.6924],
+    "Tarlac": [15.4802, 120.5979],
+    "Batangas": [13.7565, 121.0583],
+    "Baguio": [16.4023, 120.5960],
+    "Cebu": [10.3157, 123.8854],
+    "Iloilo": [10.7202, 122.5621],
+    "Davao": [7.1907, 125.4553],
+    "Cagayan": [17.6133, 121.7302],
+    "Bicol": [13.4350, 123.4100],
+    "Albay": [13.1391, 123.7438],
+    "Tacloban": [11.2442, 125.0039],
+    "Zamboanga": [6.9214, 122.0790],
+    "Palawan": [9.8349, 118.7384],
+    "Mindoro": [13.0264, 121.2227],
+    "Isabela": [16.9754, 121.8107],
+    "Pangasinan": [15.9236, 120.3392],
+    "Philippines": [12.8797, 121.7740] // CENTER OF PH
+};
+let map;
+let markers = [];
+// initializes the map view and starts fetching data
+document.addEventListener("DOMContentLoaded", () => {
+    // sets the initial map center on the CALABARZON/NCR area
+    map = L.map('map', {zoomControl: false}).setView([14.40, 121.00], 10); // Pass options object
+    // adds the dark-themed tile layer to the map
+//     L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+//         attribution: '&copy; OpenStreetMap &copy; CARTO',
+//         subdomains: 'abcd',
+//         maxZoom: 19
+//     }).addTo(map);
+    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
+        attribution: '&copy; OpenStreetMap &copy; CARTO',
+        subdomains: 'abcd',
+        maxZoom: 19
+    }).addTo(map);
+    L.control.zoom({
+        position: 'bottomright' // Choose your new position here
+    }).addTo(map);
+    console.log("ALISTO Map: Loaded");
+    // fetches the first set of post data
+    fetchDataAndPlot();
+    // sets a timer to refresh data every 30 seconds
+    setInterval(fetchDataAndPlot, 30000);
+    const sidebar = document.getElementById('map-sidebar-wrap');
+    const toggleBtn = document.getElementById('sidebar-toggle');
+    const toggleIcon = toggleBtn ? toggleBtn.querySelector('i') : null;
+    if (sidebar && toggleBtn && toggleIcon) {
+        // Use Font Awesome icons for clarity
+        const iconOpen = 'fa-bars';
+        const iconClose = 'fa-times'; // X icon
+        toggleBtn.addEventListener('click', () => {
+            sidebar.classList.toggle('collapsed');
+            // Toggle the icon for visual feedback (Corrected UX Logic)
+            if (sidebar.classList.contains('collapsed')) {
+                // If NOW collapsed (hidden), show the OPEN icon (fa-bars)
+                toggleIcon.classList.remove(iconClose);
+                toggleIcon.classList.add(iconOpen); // Show bars to open
+            } else {
+      ��         // If NOW open (visible), show the CLOSE icon (fa-times)
+                toggleIcon.classList.remove(iconOpen);
+                toggleIcon.classList.add(iconClose); // Show X to close
+            }
+        });
+        // Ensure the sidebar is not initially collapsed (optional, depends on default CSS)
+        // sidebar.classList.remove('collapsed');
+    }
+});
+// fetches the list of active disaster posts from the API
+function fetchDataAndPlot() {
+    fetch('/api/posts')
+        .then(response => response.json())
+        .then(data => {
+            // updates the alert count in the map sidebar
+            updateSidebar(data);
+            // --- CRITICAL INTEGRATION POINT ---
+            // 1. Plot the markers on the map
+            plotMarkers(data);
+            // 2. Render the alert list inside the sidebar
+            renderMapSidebarFeed(data);
+            // --- END INTEGRATION POINT ---
+        })
+        .catch(err => console.error("Map Fetch Error:", err));
+}
+// updates the displayed alert count and system status in the floating sidebar
+function updateSidebar(data) {
+    const countEl = document.getElementById('alert-count');
+    const statusEl = document.getElementById('status-text');
+    if(countEl) countEl.innerText = data.length;
+    if(statusEl) statusEl.innerText = "System Active";
+}
+// clears existing markers and plots new circular markers for each post
+function plotMarkers(posts) {
+    // removes all existing markers from the map
+    markers.forEach(m => map.removeLayer(m));
+    markers = [];
+    // iterates through all posts to find coordinates and draw markers
+    posts.forEach(async post => {
+        // asynchronously finds the latitude and longitude for the location
+        let coords = await getCoordinatesSmart(post.location);
+        if (coords) {
+            // sets color and size based on post urgency level
+            const urgencyColor = post.urgency_level === 'High' ? '#ff4444' : '#ed4801';
+            const radius = post.urgency_level === 'High' ? 14 : 8;
+            // creates and adds a circular marker (L.circleMarker) to the map
+            const circle = L.circleMarker(coords, {
+                color: urgencyColor,
+                fillColor: urgencyColor,
+                fillOpacity: 0.7,
+                radius: radius
+            }).addTo(map);
+            const timeStr = new Date(post.timestamp).toLocaleTimeString();
+            // binds a detailed pop-up box to the circular marker
+//             circle.bindPopup(`
+//                 <div style="font-family: 'Roboto', sans-serif; color: #333; min-width: 200px;">
+//                     <strong style="text-transform:uppercase; color: #d32f2f; font-size: 1.1em;">
+//                         ${post.disaster_type}
+//                     </strong>
+//
+//                     <div style="color: #ed4801; font-weight: 700; font-size: 0.9em; margin-bottom: 4px; text-transform: uppercase;">
+//                         ⚠ ${post.assistance_type || "General Help"}
+//                     </div>
+//                     <span style="font-size: 0.9em; color: #555;">📍 ${post.location}</span>
+//
+//                     <hr style="margin:8px 0; border:0; border-top:1px solid #ccc;">
+//
+//                     <div style="font-size: 0.9em; margin-bottom: 5px; font-weight: 500;">
+//                         "${post.title}"
+//                     </div>
+//
+//                     <small style="color: #888;">${timeStr}</small>
+//                 </div>
+//             `);
+            // adds the new marker to the global array
+            markers.push(circle);
+        }
+    });
+}
+// --- NEW SMART FINDER (Hybrid: Static List + API) ---
+// function to look up coordinates, prioritizing the static list then Nominatim API
+async function getCoordinatesSmart(locationStr) {
+    if (!locationStr) return cityCoords["Philippines"];
+    // 1. Try Static List (Instant)
+    // direct match check
+    const exactMatch = Object.keys(cityCoords).find(k => k.toLowerCase() === locationStr.toLowerCase());
+    if (exactMatch) return cityCoords[exactMatch];
+    // fuzzy match check
+    const fuzzyKey = Object.keys(cityCoords).find(city => locationStr.toLowerCase().includes(city.toLowerCase()));
+    if (fuzzyKey) return cityCoords[fuzzyKey];
+    // 2. Try OpenStreetMap API (Dynamic)
+    // checks local cache before making a network request
+    if (!window.coordCache) window.coordCache = {};
+    if (window.coordCache[locationStr]) return window.coordCache[locationStr];
+    try {
+        console.log(`Fetching coords for: ${locationStr}...`);
+        // fetches coordinates from the Nominatim API
+        const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${locationStr}, Philippines`);
+        const data = await response.json();
+        // processes and caches the result
+        if (data && data.length > 0) {
+            const lat = parseFloat(data[0].lat);
+            const lon = parseFloat(data[0].lon);
+            const result = [lat, lon];
+            window.coordCache[locationStr] = result;
+            return result;
+        }
+    } catch (e) {
+        console.error("Geocoding failed:", e);
+    }
+    // 3. Fallback
+    // returns the center of the Philippines if geocoding fails
+    return cityCoords["Philippines"];
+}
+function formatRelativeTime(timestamp) {
+    const now = new Date();
+    const posted = new Date(timestamp);
+    const diffMs = now - posted;
+    const diffMins = Math.floor(diffMs / 60000);
+    if (isNaN(diffMins)) return "Unknown time";
+    if (diffMins < 1) return "Just now";
+    if (diffMins < 60) return diffMins + " mins ago";
+    if (diffMins < 1440) {
+        const hours = Math.floor(diffMins / 60);
+        return hours + (hours === 1 ? " hr ago" : " hrs ago");
+    }
+    const days = Math.floor(diffMins / 1440);
+    return days + (days === 1 ? " day ago" : " days ago");
+}
+function formatAbsoluteDateTime(timestamp) {
+    const posted = new Date(timestamp);
+    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+    const formattedDate = posted.toLocaleDateString('en-US', dateOptions);
+    const timeOptions = { hour: '2-digit', minute: '2-digit', hour12: true };
+    const formattedTime = posted.toLocaleTimeString('en-US', timeOptions);
+    return `${formattedDate}\n${formattedTime}`;
+}
+// Function to render the list of posts inside the map's collapsible sidebar
+function renderMapSidebarFeed(posts) {
+    const feedContainer = document.getElementById('map-incident-feed');
+    if (!feedContainer) return;
+    feedContainer.innerHTML = ''; // Clear previous content
+    if (posts.length === 0) {
+        feedContainer.innerHTML = `<p style="color: #ccc; padding: 10px; text-align: center;">No active alerts to display.</p>`;
+        return;
+    }
+    posts.forEach(post => {
+        // Use the CSS classes from index.html: alert-box, box-title, box-subtitle, etc.
+        const box = document.createElement('div');
+        box.className = 'alert-box'; // This class is defined in style.css for the dashboard look
+        const relativeTimeStr = formatRelativeTime(post.timestamp);
+        let statusColor = '#ed4801';
+        if (post.status === 'Verified') statusColor = '#ffc107';
+        if (post.status === 'Resolved') statusColor = '#00C851';
+        // Use the CLEAN location for the display
+        const locationName = post.location || 'Unknown Area';
+        // Note: The structure inside here matches index.html's alert boxes now
+        box.innerHTML = `
+            <div class="alert-icon" style="background-color: ${statusColor}"></div>
+            <div class="box-text">
+                <div class="box-title">
+                    ${post.disaster_type} • ${locationName}
+                    <span style="font-size:0.7em; opacity:0.7">(${post.urgency_level.toUpperCase()})</span>
+                </div>
+                <div style="font-size: 0.8em; color: #ccc; margin-top: 3px;">
+                     ${relativeTimeStr}
+                </div>
+            </div>
+        `; //📍
+        // Add click listener to zoom map to the marker location
+        box.addEventListener('click', async () => {
+            let coords = await getCoordinatesSmart(locationName);
+            if (coords) {
+                map.setView(coords, 14); // Zoom to the location with a zoom level of 14
+                // // Optional: Collapse sidebar after clicking an alert
+                // document.getElementById('map-sidebar-wrap').classList.add('collapsed');
+                // // You may need to manually update the icon here too
+            }
+        });
+        feedContainer.appendChild(box);
+    });
+}

alisto_project/backend/models.py ADDED Viewed

	@@ -0,0 +1,67 @@

+from flask_sqlalchemy import SQLAlchemy
+from datetime import datetime
+# initializes the SQLAlchemy object for the application
+db = SQLAlchemy()
+# defines the main data model for a scraped disaster post
+class DisasterPost(db.Model):
+    # sets the name of the database table
+    __tablename__ = 'posts'
+    # primary key for the table
+    id = db.Column(db.Integer, primary_key=True)
+    # unique ID from Reddit to prevent duplicates
+    reddit_id = db.Column(db.String(50), unique=True, nullable=False)
+    # title of the Reddit post
+    title = db.Column(db.String(300), nullable=False)
+    # full body content of the post
+    content = db.Column(db.Text, nullable=True)
+    # stores the contact person's name or Reddit username
+    author = db.Column(db.String(50), nullable=True)
+    # timestamp when the post was created (UTC)
+    timestamp = db.Column(db.DateTime, default=datetime.utcnow)
+    # Intelligence Fields
+    # extracted location or address of the incident
+    location = db.Column(db.String(100), nullable=True)
+    full_address = db.Column(db.String(300), nullable=True)
+    # extracted mobile or contact number
+    contact_number = db.Column(db.String(50), nullable=True)
+    # AI-classified type of disaster (e.g., Flood, Fire)
+    disaster_type = db.Column(db.String(50), nullable=True)
+    # AI-classified specific assistance needed (e.g., Medical, Rescue)
+    assistance_type = db.Column(db.String(50), nullable=True)
+    # dynamically assigned severity level (High, Medium, Low)
+    urgency_level = db.Column(db.String(20), nullable=True)
+    # boolean flag indicating if the post is a help request
+    is_help_request = db.Column(db.Boolean, default=False)
+    # Metadata
+    # operational status of the post (New, Verified, Resolved)
+    status = db.Column(db.String(20), default="New")
+    # converts the model object into a dictionary format for API responses
+    def to_dict(self):
+        # converts the timestamp to ISO 8601 format
+        iso_time = self.timestamp.isoformat()
+        # ensures the time string ends with 'Z' for standardized UTC representation
+        if not iso_time.endswith("Z"):
+            iso_time += "Z"
+        return {
+            "id": self.id,
+            "reddit_id": self.reddit_id,
+            "title": self.title,
+            "content": self.content,
+            "author": self.author,
+            "timestamp": iso_time,
+            "location": self.location,
+            "full_address": self.full_address or "Check Post",
+            "contact_number": self.contact_number or "Check Post",
+            "disaster_type": self.disaster_type,
+            "assistance_type": self.assistance_type,
+            "urgency_level": self.urgency_level,
+            "status": self.status
+        }

alisto_project/backend/ner_extractor.py ADDED Viewed

	@@ -0,0 +1,194 @@

+from transformers import AutoTokenizer, AutoModelForTokenClassification, pipeline
+import re
+from templates import LOCATIONS
+SUFFIXES_TO_REMOVE = [" City", " Province", " Region", " Cty", " Prov"]
+SEPARATORS = [",", "(", "\n", " - "]
+# Load NER model once
+model_name = "Davlan/xlm-roberta-base-ner-hrl"
+# loads the tokenizer for the multilingual NER model
+tokenizer = AutoTokenizer.from_pretrained(model_name, force_download=True, use_fast=False)
+# loads the pre-trained token classification model (the NER engine)
+model = AutoModelForTokenClassification.from_pretrained(model_name, force_download=True)
+# creates a Hugging Face pipeline for easy entity recognition
+nlp = pipeline("ner", model=model, tokenizer=tokenizer, aggregation_strategy="simple")
+# list of keywords often incorrectly classified as locations by the NER model
+NON_LOC_KEYWORDS = ["S.O.S", "PLS", "HELP", "URGENT", "ALERT", "LOCATION", "ADDRESS", "ASAP"]
+def clean_location_string(location_str):
+    """Cleans a raw location string to prioritize and return the main City/Province name."""
+    if not location_str:
+        return "Unknown Location"
+    # 1. Strip common suffixes and trim whitespace
+    working_str = location_str.strip()
+    for suffix in SUFFIXES_TO_REMOVE:
+        if working_str.lower().endswith(suffix.lower()):
+            working_str = working_str[:-len(suffix)]
+            break
+    # --- 2. Primary Check: Prioritize Known Locations on the full (or suffix-stripped) string ---
+    working_lower = working_str.lower()
+    # Check the working_str directly
+    for city in sorted(LOCATIONS, key=len, reverse=True):
+        if city.lower() == working_lower:
+            return city
+        if city.lower() in working_lower:
+             return city
+    # --- 3. Simplification Fallback: Get the last segment based on separators ---
+    if ',' in working_str:
+        cleaned_segment = working_str.split(',')[-1].strip()
+    else:
+        cleaned_segment = working_str
+        for sep in SEPARATORS:
+            if sep in cleaned_segment:
+                cleaned_segment = cleaned_segment.split(sep)[-1].strip()
+    # 4. Re-strip Suffixes from the simplified segment
+    for suffix in SUFFIXES_TO_REMOVE:
+        if cleaned_segment.lower().endswith(suffix.lower()):
+            cleaned_segment = cleaned_segment[:-len(suffix)]
+            break
+    # 5. Re-run the known location check on the simplified segment
+    cleaned_segment_lower = cleaned_segment.lower()
+    for city in sorted(LOCATIONS, key=len, reverse=True):
+        if city.lower() == cleaned_segment_lower:
+            return city
+    # --- 6. Aggressive Check (If all else fails, use the last 1-2 words) ---
+    words = cleaned_segment.split()
+    if len(words) > 2:
+        return " ".join(words[-2:])
+    # Final Guarantee
+    return cleaned_segment or location_str.strip()
+# --- END: Robust clean_location_string ---
+# function to extract the contact person's name using Regex
+def extract_contact_person_name(text):
+    # regex pattern to find name following contact/name keywords
+    name_pattern = re.compile(
+        # Look for: contact person, icontact si, or contact name (Filipino and English)
+        r'(?:contact\s*person|contact\s*name|icontact\s*si|contact|pangalan)\s*[:\s]*(.*?)\s*'
+        # Stop capturing when the mobile number, needs, or next paragraph starts
+        r'(?=\s*(?:Mobile|Number|Needs|09\d{2}|[A-Z]{3,}:|\n|$))',
+        # r'(?:contact\s*person|contact\s*name|contact|icontact|si|pangalan|name):\s*(.*?)(?=\s*(?:Mobile|Number|Needs|09\d{2}|[A-Z]{3,}:|\n|$))',
+        re.IGNORECASE | re.DOTALL
+    )
+    match = name_pattern.search(text)
+    if match:
+        # returns the captured name after removing parenthetical nicknames and periods
+        name = match.group(1).strip()
+        return re.sub(r'\s*\(.*\)\s*$', '', name).strip().rstrip('.')
+    return None
+# function to extract mobile or landline phone numbers using Regex
+def extract_contact_number(text):
+    # regex for common Philippine mobile and landline patterns
+    phone_pattern = re.compile(r'(09\d{2}\s?-?\s?\d{3}\s?-?\s?\d{4}|(?:\+63|63)?\d{10})')
+    match = phone_pattern.search(text)
+    if match:
+        # returns the captured phone number
+        return match.group(0).strip()
+    return None
+# function to extract the detailed address line by prioritizing explicit labels
+def extract_address_line(text):
+    # regex pattern to capture address text following keywords, stopping at noise or new lines
+    address_pattern = re.compile(
+        # Look for: location, lokasyon, nandito, address, loc, near (Filipino and English)
+        r'(?:location|lokasyon|nandito|address|loc|near)\s*'
+        # Possible separators: colon, space, or Filipino polite particles
+        r'(?:[:\s]|ay|sa|po\s*namin\s*ay|po\s*ay)\s*'
+        # Capture the address until a noise pattern or new line
+        r'(.*?)\s*'
+        # Stop capturing when a new line, parenthesis, contact/mobile keywords, or common Filipino phrases appear
+        r'(?=\s*\n|\s*\(|\s*Contact|\s*Mobile|\s*Number|\s*icontact\s*si|\s*kami|\s*yung|\s*bahay|$)',
+        # r'(?:location|lokasyon|nandito|address|loc|near):\s*(.*?)(?=\s*\n|\s*\(|\s*Contact|\s*Mobile|\s*Number|\s*kami|\s*yung|\s*bahay|\s*kmi|\s*near\s|$)',
+        re.IGNORECASE
+    )
+    match = address_pattern.search(text)
+    if match:
+        # returns the cleaned address line
+        return match.group(1).strip().rstrip('.')
+    return None
+# main function that orchestrates all entity extraction and filtering
+def extract_entities(text):
+    # 1. Get explicit address via Regex (This is a candidate for full_address)
+    explicit_address_candidate = extract_address_line(text)
+    # 2. Run general NER extraction
+    results = nlp(text)
+    # Stores ALL potential location strings (Explicit, NER, etc.)
+    potential_locations = []
+    # 3. Add Explicit Address as the *first* candidate
+    if explicit_address_candidate:
+        potential_locations.append(explicit_address_candidate)
+    # 4. Process NER results and add them as candidates
+    for entity in results:
+        if entity['entity_group'] == 'LOC':
+            clean_loc = entity['word'].replace("##", "").strip()
+            # CRITICAL NEW FILTER: If the NER tag is too long (more than 5 words), skip it.
+            # This prevents a full address recognized by NER from polluting the results.
+            if len(clean_loc.split()) > 5:
+                 continue
+            # Standard Filters
+            if len(clean_loc) <= 2: continue
+            if clean_loc.upper().replace('.', '') in NON_LOC_KEYWORDS: continue
+            if clean_loc not in potential_locations:
+                potential_locations.append(clean_loc)
+    # --- CORE LOGIC: Find the best city match from ALL candidates ---
+    best_city_name = None
+    best_full_address = explicit_address_candidate # Default to the full Regex address
+    # Go through every candidate found, prioritizing the one that leads to a known city
+    for raw_loc_candidate in potential_locations:
+        # 5. Use the highly reliable cleaning logic
+        cleaned_city = clean_location_string(raw_loc_candidate)
+        # 6. Check if the result of cleaning is a recognized city name (from LOCATIONS)
+        if cleaned_city in LOCATIONS:
+            best_city_name = cleaned_city
+            best_full_address = raw_loc_candidate
+            # We found the perfect city match! STOP IMMEDIATELY.
+            break
+    # 7. Final Fallbacks (Only if no canonical city was found in the loop)
+    city_location = best_city_name or clean_location_string(best_full_address or text)
+    # 8. Extract Contacts
+    contact_number = extract_contact_number(text)
+    contact_name = extract_contact_person_name(text)
+    # 9. Return final result
+    return {
+        "location": city_location if city_location != "Unknown Location" else "Unknown City",
+        "full_address": best_full_address or "Check Post",
+        "contact": contact_number,
+        "contact_person_name": contact_name,
+        "raw": results
+    }

alisto_project/backend/script.js ADDED Viewed

	@@ -0,0 +1,640 @@

+// GLOBAL VARIABLES
+let typeChart = null;
+let urgencyChart = null;
+let lastClickedId = null;
+let knownPostIds = new Set();
+let readPostIds = new Set();
+let isLoggedIn = false; // track login state
+let isInitialLoadComplete = false; // flag to prevent false alerts on page load
+let currentUsername = ''; // stores the logged-in user's username
+document.addEventListener("DOMContentLoaded", function() {
+    console.log("ALISTO Dashboard Loaded");
+    // 1. Check Login Status Immediately
+    checkLoginStatus();
+    // 2. Init Data
+    initCharts();
+    fetchPosts();
+    fetchStats();
+    setInterval(() => { fetchPosts(); fetchStats(); }, 30000);
+    // 3. Filter Listeners
+    document.getElementById('sort-select').addEventListener('change', () => fetchPosts());
+    document.getElementById('view-select').addEventListener('change', () => fetchPosts());
+    document.getElementById('urgency-select').addEventListener('change', () => fetchPosts());
+    document.getElementById('type-select').addEventListener('change', () => fetchPosts());
+    document.getElementById('assist-select').addEventListener('change', () => fetchPosts());
+    // 4. Export (Check login first)
+    document.getElementById('export-btn').addEventListener('click', () => {
+        if(!isLoggedIn) { alert("Responders Only. Please Log In."); return; }
+        window.location.href = '/api/export';
+    });
+    // 5. Stats Modal
+    const statsModal = document.getElementById('stats-modal');
+    document.getElementById('show-stats-btn').addEventListener('click', () => {
+        statsModal.classList.remove('hidden');
+        fetchStats();
+    });
+    document.getElementById('close-stats-btn').addEventListener('click', () => statsModal.classList.add('hidden'));
+    // 6. Login Modal Logic
+    setupLoginLogic();
+    setupSearch();
+    setupProfileDropdown();
+    // 🚨 The manual button listeners were correctly removed from here in the previous step.
+});
+// ----------------------------------------------------------------------
+// ACTION BUTTON VISUAL SYNC LOGIC
+// ----------------------------------------------------------------------
+function updateActionButtons(postStatus) {
+    const verifyBtn = document.getElementById('verify-btn');
+    const resolveBtn = document.getElementById('resolve-btn');
+    if (!verifyBtn || !resolveBtn) return; // Safety check
+    // 1. Reset all active states first (CRITICAL STEP)
+    verifyBtn.classList.remove('is-verified');
+    resolveBtn.classList.remove('is-resolved');
+    // Reset button text
+    document.querySelector('#verify-btn .btn-text').textContent = 'Verify';
+    document.querySelector('#resolve-btn .btn-text').textContent = 'Resolve';
+    // 2. Apply Active State Classes based *only* on the current status
+    if (postStatus === 'Verified') {
+        // If Verified, apply the 'is-verified' style
+        verifyBtn.classList.add('is-verified');
+        document.querySelector('#verify-btn .btn-text').textContent = 'Verified';
+    } else if (postStatus === 'Resolved') {
+        // If Resolved, apply the 'is-resolved' style
+        resolveBtn.classList.add('is-resolved');
+        document.querySelector('#resolve-btn .btn-text').textContent = 'Resolved';
+    }
+}
+// ----------------------------------------------------------------------
+// AUTHENTICATION LOGIC
+// ----------------------------------------------------------------------
+// checks the user's current login status via API
+function checkLoginStatus() {
+    fetch('/api/user_status')
+        .then(res => res.json())
+        .then(data => {
+            isLoggedIn = data.is_logged_in;
+            currentUsername = data.username || '';
+            updateUIForAuth();
+        });
+}
+// toggles the visibility of login links, profile dropdown, and action buttons
+function updateUIForAuth() {
+    const navBtn = document.getElementById('nav-login-btn');
+    const profileWrap = document.getElementById('profile-container-wrap');
+    const dropdownUsername = document.getElementById('dropdown-username');
+    const actionButtonsContainer = document.querySelector('.action-buttons');
+    if (isLoggedIn) {
+        // LOGGED IN: Show Profile Icon, Update Name, Hide Login Link
+        if (navBtn) navBtn.style.display = 'none';
+        if (profileWrap) profileWrap.style.display = 'flex'; // Show the profile icon container
+        if (dropdownUsername) dropdownUsername.innerText = currentUsername;
+        if (actionButtonsContainer) actionButtonsContainer.style.visibility = 'visible';
+    } else {
+        // LOGGED OUT: Show Login Link, Hide Profile Icon
+        if (navBtn) navBtn.style.display = 'inline-block';
+        if (profileWrap) profileWrap.style.display = 'none'; // Hide the profile icon container
+        if (actionButtonsContainer) actionButtonsContainer.style.visibility = 'hidden';
+    }
+}
+// handles click events for the new profile icon and logout button inside the dropdown
+function setupProfileDropdown() {
+    const profileToggle = document.getElementById('profile-toggle');
+    const profileDropdown = document.getElementById('profile-dropdown');
+    const logoutBtn = document.getElementById('dropdown-logout-btn');
+    // Get the reference to the existing logout modal element
+    const logoutModal = document.getElementById('logout-modal');
+    // 1. Toggle visibility when clicking the icon (Unchanged)
+    if (profileToggle) {
+        profileToggle.addEventListener('click', (e) => {
+            e.stopPropagation();
+            profileDropdown.classList.toggle('hidden');
+        });
+    }
+    // 2. Logout button handler (MODIFIED BLOCK)
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            // Action: Show the confirmation modal instead of redirecting
+            if (logoutModal) {
+                logoutModal.classList.remove('hidden');
+            } else {
+                // Fallback, should not happen if index.html is correct
+                window.location.href = '/api/logout';
+            }
+        });
+    }
+    // 3. Close when clicking outside (Unchanged)
+    document.addEventListener('click', (e) => {
+        if (profileToggle && profileDropdown && !profileToggle.contains(e.target) && !profileDropdown.contains(e.target)) {
+            if (!profileDropdown.classList.contains('hidden')) {
+                profileDropdown.classList.add('hidden');
+            }
+        }
+    });
+}
+// sets up handlers for the login and logout modals
+function setupLoginLogic() {
+    const loginModal = document.getElementById('login-modal');
+    const logoutModal = document.getElementById('logout-modal');
+    const navBtn = document.getElementById('nav-login-btn');
+    const closeBtn = document.getElementById('close-login-btn');
+    const submitBtn = document.getElementById('login-submit-btn');
+    // 1. NAV BUTTON CLICK HANDLER
+    navBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        if (isLoggedIn) {
+            logoutModal.classList.remove('hidden');
+        } else {
+            loginModal.classList.remove('hidden');
+        }
+    });
+    // 2. LOGOUT MODAL HANDLERS
+    document.getElementById('confirm-logout-btn').addEventListener('click', () => {
+        window.location.href = '/api/logout';
+    });
+    document.getElementById('cancel-logout-btn').addEventListener('click', () => {
+        logoutModal.classList.add('hidden');
+    });
+    // 3. LOGIN MODAL HANDLERS
+    closeBtn.addEventListener('click', () => loginModal.classList.add('hidden'));
+    submitBtn.addEventListener('click', () => {
+        const u = document.getElementById('username').value;
+        const p = document.getElementById('password').value;
+        fetch('/api/login', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({username: u, password: p})
+        })
+        .then(res => {
+            if(res.ok) return res.json();
+            throw new Error('Invalid credentials');
+        })
+        .then(data => {
+            isLoggedIn = true;
+            updateUIForAuth();
+            loginModal.classList.add('hidden');
+            document.getElementById('username').value = '';
+            document.getElementById('password').value = '';
+            document.getElementById('login-error').innerText = '';
+        })
+        .catch(err => {
+            document.getElementById('login-error').innerText = "Invalid Username or Password";
+        });
+    });
+}
+// calculates and formats the time difference for 'X hrs ago'
+function formatRelativeTime(timestamp) {
+    const now = new Date();
+    const posted = new Date(timestamp);
+    const diffMs = now - posted;
+    const diffMins = Math.floor(diffMs / 60000);
+    if (isNaN(diffMins)) return "Unknown time";
+    if (diffMins < 1) return "Just now";
+    if (diffMins < 60) return diffMins + " mins ago";
+    if (diffMins < 1440) {
+        const hours = Math.floor(diffMins / 60);
+        return hours + (hours === 1 ? " hr ago" : " hrs ago");
+    }
+    const days = Math.floor(diffMins / 1440);
+    return days + (days === 1 ? " day ago" : " days ago");
+}
+// formats the absolute date and time in the specified multi-line format
+function formatAbsoluteDateTime(timestamp) {
+    const posted = new Date(timestamp);
+    // 1. Set options for the full date (e.g., "December 12, 2025")
+    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+    const formattedDate = posted.toLocaleDateString('en-US', dateOptions);
+    // 2. Set options for the time (e.g., "08:52 PM")
+    const timeOptions = { hour: '2-digit', minute: '2-digit', hour12: true };
+    const formattedTime = posted.toLocaleTimeString('en-US', timeOptions);
+    // Combine them as requested
+    return `${formattedDate}\n${formattedTime}`;
+}
+// ----------------------------------------------------------------------
+// RENDER LOGIC
+// ----------------------------------------------------------------------
+// renders the list of incident posts in the sidebar feed
+function renderSidebar(data) {
+    const sidebar = document.getElementById('incident-feed');
+    if (!sidebar) return;
+    sidebar.innerHTML = '';
+    const countEl = document.getElementById('dashboard-alert-count');
+    if (countEl) {
+        countEl.innerText = data.length;
+    }
+    if (data.length === 0) {
+        sidebar.innerHTML = `<p style="color: #ccc; padding: 20px; text-align: center;">No alerts found.</p>`;
+        return;
+    }
+    data.forEach(post => {
+        const box = document.createElement('div');
+        box.className = 'alert-box';
+        if (post.id === lastClickedId) box.classList.add('selected');
+        else if (post.status === 'New' && !readPostIds.has(post.id)) box.classList.add('unread');
+        const relativeTimeStr = formatRelativeTime(post.timestamp);
+        // const timeStr = new Date(post.timestamp).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+        let statusColor = '#ed4801'; /*ed4801*/
+        if (post.status === 'Verified') statusColor = '#ffc107'; /*00C851*/
+        if (post.status === 'Resolved') statusColor = '#00C851'; /*33b5e5*/
+        let statusText = `(${post.status})`;
+        if (post.status === 'New' && readPostIds.has(post.id)) statusText = "";
+        // Determine Badge Color Class
+        let assistClass = 'assist-badge'; // Default
+        const type = (post.assistance_type || "").toLowerCase();
+        if (type.includes('medical')) assistClass += ' assist-medical';
+        else if (type.includes('rescue')) assistClass += ' assist-rescue';
+        else if (type.includes('food')) assistClass += ' assist-food';
+        else if (type.includes('evac')) assistClass += ' assist-evac';
+        box.innerHTML = `
+            <div class="alert-icon" style="background-color: ${statusColor}"></div>
+            <div class="box-text">
+                <div class="box-title">
+                    ${post.disaster_type} • ${post.location}
+                    <span style="font-size:0.7em; opacity:0.7">${statusText}</span>
+                </div>
+                <div style="display: flex; align-items: center; margin-top: 4px; gap: 5px;">
+                    <span class="${assistClass}">${post.assistance_type || "General"}</span>
+                    <div class="box-subtitle" style="margin-top:0;">${relativeTimeStr}</div>
+                </div>
+            </div>
+        `; // removed ${post.full_address} •
+        box.addEventListener('click', () => {
+            const detailBox = document.getElementById('postInfo');
+            if (lastClickedId === post.id) {
+                detailBox.classList.remove('active');
+                box.classList.remove('selected');
+                lastClickedId = null;
+                renderSidebar(data);
+            } else {
+                document.querySelectorAll('.alert-box').forEach(el => el.classList.remove('selected'));
+                box.classList.add('selected');
+                lastClickedId = post.id;
+                readPostIds.add(post.id);
+                updateDetailView(post);
+                detailBox.classList.add('active');
+                // CRITICAL: Check auth again to show/hide buttons for this specific detail view
+                updateUIForAuth();
+                renderSidebar(data);
+            }
+        });
+        sidebar.appendChild(box);
+    });
+}
+// updates the detail panel with the selected post's information
+function updateDetailView(post) {
+    const setText = (id, text) => {
+        const el = document.getElementById(id);
+        if (el) el.innerText = text;
+    };
+    // setText('detail-title', post.title);
+    const titleEl = document.getElementById('detail-title');
+    if (titleEl) {
+        // Safely extract and capitalize the disaster type
+        const disaster = (post.disaster_type || 'INCIDENT').toUpperCase();
+        // Safely extract and capitalize the location (City)
+        const locationName = (post.location || 'UNKNOWN LOCATION').toUpperCase();
+        // Set the new title format
+        titleEl.textContent = `${disaster} in ${locationName}`;
+    }
+    setText('detail-location', post.full_address || "Unknown Address");
+    setText('detail-assistance', post.assistance_type || "General");
+    setText('detail-contact-name', post.author ? (
+    // Check if the name contains a space (suggests a full name)
+    // If no space is found, assume it is a username and prepend 'u/'
+    post.author.includes(' ') ? post.author : `u/${post.author}`
+) : "Unknown");
+    setText('detail-contact-number', post.contact_number || "Check Post");
+    // setText('detail-body', post.content);
+    const bodyEl = document.getElementById('detail-body');
+    if (bodyEl) {
+        const postTitle = post.title || 'No Original Title Provided';
+        const postBody = post.content || 'No Body Text Provided';
+        // Use HTML structure to clearly present both original title and body.
+        bodyEl.innerHTML = `
+            <div>
+                <p style="font-weight: bold; margin-bottom: 5px; color: #ddd; font-size: 1.15em;">${postTitle}</p>
+            </div>
+            <p style="font-size: 1.05em; line-height: 1.5;">${postBody}</p>
+        `; // <p style="font-size: 0.75em; line-height: 1.5;">Post content: </p>
+    }
+    setText('detail-status', post.status);
+    const statusBadge = document.getElementById('detail-status');
+    if (statusBadge) {
+        // Clear all previous status classes
+        statusBadge.classList.remove('status-new', 'status-verified', 'status-resolved');
+        // Apply the correct new class
+        if (post.status) {
+            statusBadge.classList.add(`status-${post.status.toLowerCase()}`);
+        }
+    }
+    const link = document.getElementById('detail-link');
+    if (link) {
+        const isSimulated = typeof post.reddit_id === 'string' && (post.reddit_id.startsWith('fake') || post.reddit_id.startsWith('sim'));
+        link.href = isSimulated ? '#' : `https://reddit.com/comments/${post.reddit_id.replace('t3_', '')}`;
+    }
+    const urgEl = document.getElementById('detail-urgency');
+    if (urgEl) {
+        urgEl.innerText = post.urgency_level;
+        urgEl.style.color = post.urgency_level === 'High' ? '#ff4444' : '#00C851';
+    }
+    const timeEl = document.getElementById('detail-time');
+    if (timeEl) {
+        // 1. Get the Date object from the post timestamp
+        const posted = new Date(post.timestamp);
+        // 2. Format the Date part (e.g., December 12, 2025)
+        const dateStr = posted.toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+        });
+        // 3. Format the Time part (e.g., 08:52 PM)
+        const exactTimeStr = posted.toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: true
+        });
+        // 4. Generate the new HTML structure
+        timeEl.innerHTML = `
+            <div style="font-size: 1.3em; color: white; line-height: 1.2;">${dateStr}</div>
+            <div style="font-size: 1.1em; color: #ed4801; margin-top: 2px;">${exactTimeStr}</div>
+        `;
+    }
+    // Synchronize buttons with the loaded post status
+    updateActionButtons(post.status);
+}
+// ----------------------------------------------------------------------
+// STANDARD FUNCTIONS (FINAL WORKING VERSION)
+// ----------------------------------------------------------------------
+// handles the logic for updating the post status (Verify/Resolve)
+function updateStatus(intendedStatus) {
+    if (!lastClickedId) return;
+    const badge = document.getElementById('detail-status');
+    // FIX: Read status and clean it by converting to lowercase and trimming whitespace
+    const currentStatus = badge ? badge.innerText.trim() : 'New';
+    let finalStatus;
+    if (intendedStatus === 'Verified') {
+        // ... (rest of the logic)
+        // Check against the current, clean status
+        if (currentStatus.toLowerCase() === 'verified') {
+            finalStatus = 'New';
+        } else {
+            finalStatus = 'Verified';
+        }
+    } else if (intendedStatus === 'Resolved') {
+        // ... (rest of the logic)
+        // Check against the current, clean status
+        if (currentStatus.toLowerCase() === 'resolved') {
+            finalStatus = 'New';
+        } else {
+            finalStatus = 'Resolved';
+        }
+    } else {
+        return;
+    }
+    // Safety check: ensure we are actually changing the status
+    if (finalStatus === currentStatus) {
+        return;
+    }
+    // --- API CALL AND UI UPDATE ---
+    fetch(`/api/posts/${lastClickedId}/status`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: finalStatus })
+    })
+    .then(res => {
+        if(res.status === 401) { alert("Unauthorized. Please log in."); return; }
+        // If the API call returns success (200), proceed with UI updates based on the finalStatus.
+        return res.json();
+    })
+    .then(data => {
+        if(data) {
+            fetchPosts();
+            fetchStats();
+            if (badge) {
+                // 1. Update text
+                badge.innerText = finalStatus;
+                // 2. Apply color class (visual sync fix)
+                badge.classList.remove('status-new', 'status-verified', 'status-resolved');
+                badge.classList.add(`status-${finalStatus.toLowerCase()}`);
+            }
+            // 3. Update buttons' appearance
+            updateActionButtons(finalStatus);
+        }
+    })
+    .catch(error => {
+        console.error("Status Update Failed:", error);
+        alert("Failed to update status due to network error.");
+    });
+}
+// pop up notificaiton for new alerts
+function showNotification(message) {
+    const popup = document.getElementById('new-alert-notification');
+    const msgEl = document.getElementById('notification-message');
+    if (!popup || !msgEl) return;
+    msgEl.innerText = message;
+    // 1. Prepare for animation (ensure it's visible but off-screen)
+    popup.classList.remove('hidden');
+    // 2. Force reflow to ensure CSS animation starts correctly
+    void popup.offsetWidth;
+    // 3. Trigger slide-in animation
+    popup.classList.add('visible');
+    // 4. Set timeout to slide out after 6 seconds
+    setTimeout(() => {
+        popup.classList.remove('visible');
+        // 5. Hide completely after animation finishes (0.5s transition time in CSS)
+        setTimeout(() => {
+            popup.classList.add('hidden');
+        }, 500);
+    }, 6000); // Display for 6 seconds
+}
+// initializes and draws the chart.js graphs for stats modal
+function initCharts() {
+    const ctxType = document.getElementById('typeChart');
+    const ctxUrg = document.getElementById('urgencyChart');
+    if (!ctxType || !ctxUrg) return;
+    typeChart = new Chart(ctxType.getContext('2d'), {
+        type: 'doughnut',
+        data: { labels: [], datasets: [{ data: [], backgroundColor: ['#ed4801', '#33b5e5', '#00C851', '#ffbb33', '#aa66cc'], borderWidth: 0 }] },
+        options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right', labels: { color: 'white' } } } }
+    });
+    urgencyChart = new Chart(ctxUrg.getContext('2d'), {
+        type: 'bar',
+        data: { labels: ['High', 'Low/Med'], datasets: [{ label: 'Count', data: [0, 0], backgroundColor: ['#ff4444', '#00C851'], borderRadius: 5 }] },
+        options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.1)' }, ticks: { color: 'white' } }, x: { ticks: { color: 'white' } } }, plugins: { legend: { display: false } } }
+    });
+}
+// fetches statistical data from the API
+function fetchStats() { fetch('/api/stats').then(res=>res.json()).then(data=>updateCharts(data)).catch(err=>console.error(err)); }
+// updates the chart data and redraws the graphs
+function updateCharts(data) { if(!typeChart || !urgencyChart) return; const types = data.disaster_types || {}; typeChart.data.labels = Object.keys(types); typeChart.data.datasets[0].data = Object.values(types); typeChart.update(); const levels = data.urgency_levels || {}; urgencyChart.data.datasets[0].data = [levels['High']||0, (levels['Low']||0)+(levels['Medium']||0)]; urgencyChart.update(); }
+// fetches post data from the API based on current filter selections
+function fetchPosts(q='') {
+    const sort = document.getElementById('sort-select')?.value||'newest';
+    const view = document.getElementById('view-select')?.value||'active';
+    const urgency = document.getElementById('urgency-select')?.value||'all';
+    const type = document.getElementById('type-select')?.value||'all';
+    const assist = document.getElementById('assist-select')?.value||'all';
+    const searchVal = document.querySelector('.search-input')?.value||'';
+    let url = `/api/posts?sort=${sort}&view=${view}&urgency=${urgency}&type=${type}&assist=${assist}`;
+    if(searchVal) url += `&query=${encodeURIComponent(searchVal)}`;
+    url += `&_=${new Date().getTime()}`;
+    fetch(url).then(r=>r.json()).then(d=>{renderSidebar(d); checkAudioAlert(d);}).catch(e=>console.error(e));
+}
+// checks for new high-urgency alerts and plays sound + shows notification
+function checkAudioAlert(p){
+    const a=document.getElementById('alert-sound');
+    if(!a)return;
+    a.volume = 0.1;
+    let newAlertFound = false;
+    if (!isInitialLoadComplete) {
+        // 1. On the very first load after page navigation/refresh:
+        // Populate the known set with ALL current IDs and skip the alert.
+        p.forEach(x => knownPostIds.add(x.id));
+        isInitialLoadComplete = true;
+        return;
+    }
+    p.forEach(x => {
+        if(x.urgency_level === 'High' && !knownPostIds.has(x.id) && x.status !== 'Resolved') {
+            newAlertFound = true;
+        }
+    });
+    if(newAlertFound) {
+        a.play().catch(e=>{});
+        showNotification("NEW HIGH PRIORITY ALERT: Check Feed");
+    }
+    p.forEach(x => {
+        knownPostIds.add(x.id);
+    });
+}
+// sets up the search input logic with clear button
+function setupSearch(){ const i=document.querySelector('.search-input'), c=document.querySelector('.clear-icon'); if(!i)return; i.addEventListener('input',()=>{if(i.value)c?.classList.remove('hidden');else{c?.classList.add('hidden');fetchPosts();}}); i.addEventListener('keydown',e=>{if(e.key==='Enter')fetchPosts();}); c?.addEventListener('click',()=>{i.value='';c.classList.add('hidden');fetchPosts();}); }
+  // Attach listeners once DOM is ready
+  (function () {
+    // Select all elements with data_tooltip attribute
+    const tooltipElements = document.querySelectorAll('[data_tooltip]');
+    tooltipElements.forEach(el => {
+      // When clicked: hide tooltip immediately by adding class
+      el.addEventListener('mousedown', (e) => {
+        // Add class so CSS hides tooltip; use mousedown for immediate feedback
+        el.classList.add('tooltip-hidden');
+        // Also remove focus so :focus doesn't keep hiding/showing unpredictably
+        if (typeof el.blur === 'function') {
+          el.blur();
+        }
+      });
+      // When mouse leaves the element: remove the hiding class so future hovers work
+      el.addEventListener('mouseleave', (e) => {
+        el.classList.remove('tooltip-hidden');
+      });
+      // Also remove hidden class on touchend for touch devices (optional)
+      el.addEventListener('touchend', () => {
+        el.classList.remove('tooltip-hidden');
+      });
+    });
+  })();

alisto_project/backend/style.css ADDED Viewed

	@@ -0,0 +1,800 @@

+/* --- GLOBAL RESET & FONTS --- */
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+    font-family: 'Roboto', sans-serif;
+    color: #fff;
+    background: #28282B;
+    overflow: hidden;
+    height: 100vh;
+}
+h1, h2, h3 { font-family: 'Montserrat', sans-serif; }
+/* --- HEADER --- */
+/* --- HEADER STYLES --- */
+.main-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    padding: 0 2vw;
+    background: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(8px);
+    z-index: 999;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    /* FIX: Prevent layout breaking on very small screens */
+    min-width: 600px;
+}
+/* 1. LOGO (Locked) */
+.logo {
+    display: flex;
+    flex-direction: column;
+    line-height: 1;
+    flex-shrink: 0; /* Never shrink */
+    margin-right: 20px;
+}
+.logo-main { font-family: 'Montserrat', sans-serif; font-size: 1.8em; font-weight: 900; color: #ed4801; }
+.logo-sub { font-size: 0.65em; font-weight: 400; color: #ccc; letter-spacing: 2px; text-transform: uppercase; margin-top: 2px; }
+/* 2. NAVIGATION (Locked) */
+.main-nav {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0; /* Never shrink */
+    margin-left: 20px;
+}
+.main-nav .nav-link {
+    color: #ccc;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 0.9em;
+    padding: 8px 15px;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+    margin-left: 10px;
+    /* FIX: Keep text on one line */
+    white-space: nowrap;
+}
+.main-nav .nav-link {
+    color: #ccc;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 0.9em;
+    padding: 8px 15px;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+    margin-left: 10px;
+    /* FIX: Keep text on one line */
+    white-space: nowrap;
+    /* FIX: Add invisible border so it doesn't jump when active */
+    border: 1px solid transparent;
+}
+.main-nav .nav-link:hover {
+    color: white;
+    background-color: rgba(255, 255, 255, 0.1);
+}
+.main-nav .nav-link.active {
+    color: #ed4801;
+    border: 1px solid #ed4801;
+}
+/* --- SEARCH BAR (Stabilized) --- */
+.search-container {
+    display: flex;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    padding: 8px 15px;
+    /* FIX: Remove 'clamp'. Use standard width so it stops jittering. */
+    width: 100%;
+    max-width: 400px;
+    transition: background 0.3s ease;
+}
+.search-container:hover {
+    background: rgba(255, 255, 255, 0.15);
+}
+.search-input {
+    flex-grow: 1;
+    border: none;
+    background: transparent;
+    color: white;
+    font-size: 0.9em;
+    padding: 0;
+    outline: none;
+}
+.search-icon {
+    color: #ed4801;
+    margin-left: 5px;
+    cursor: pointer;
+}
+.clear-icon {
+    color: #ccc;
+    margin-right: 10px;
+    cursor: pointer;
+}
+.clear-icon.hidden {
+    display: none;
+}
+/* --- HERO --- */
+.hero {
+    margin-top: 60px;
+    height: calc(100vh - 60px);
+    width: 100%;
+    background: url('images/bg2-logan.jpg') center/cover no-repeat fixed;
+    /* FLEXBOX MAGIC */
+    display: flex;
+    align-items: stretch; /* Make both columns full height */
+    flex-wrap: nowrap;    /* Desktop: Side-by-side. Mobile: We change this via media query */
+    padding: 0;
+    gap: 0;
+}
+/* --- SIDEBAR WRAPPER --- */
+.sidebar-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 400px;
+    width: 400px;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    border-right: 1px solid rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(5px);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
+    /* overflow: hidden; */
+    z-index: 10;
+}
+/* --- FILTER BAR --- */
+.filter-bar {
+    display: flex; gap: 8px; padding: 15px;
+    background: rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.1);
+    align-items: center;
+}
+.filter-bar-c {
+    display: flex; gap: 8px; width: 100%;
+    justify-content: center; align-items: center; flex-direction: column;
+}
+.filter-bar-r {
+    display: flex; gap: 8px; width: 100%;
+    justify-content: space-between; align-items: center; flex-direction: row;
+}
+.filter-select { background: rgba(99, 97, 97, 0.1); color: #acabab; border: 1px solid #555; border-radius: 4px; padding: 5px; font-size: 0.8rem; outline: none; cursor: pointer; flex-grow: 1; min-width: 0; }
+.pulse-btn, .icon-btn { flex-shrink: 0; }
+.icon-btn { background: #ed4801; color: white; border: none; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+.pulse-btn { background: linear-gradient(135deg, #ed4801, #ff7e42); color: white; border: none; border-radius: 50%; width: 35px; height: 35px; cursor: pointer; box-shadow: 0 0 10px rgba(237, 72, 1, 0.5); display: flex; align-items: center; justify-content: center; animation: pulse-glow 2s infinite; }
+@keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(237, 72, 1, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(237, 72, 1, 0); } }
+.separator { width: 1px; background: rgba(255,255,255,0.2); margin: 0 5px; height: 20px; }
+/* --- SIDEBAR LIST --- */
+.sidebar {
+    width: 100%; height: 100%;
+    background: transparent; border: none; box-shadow: none;
+    padding: 10px; overflow-y: auto; overflow-x: hidden;
+}
+.sidebar::-webkit-scrollbar { width: 6px; }
+.sidebar::-webkit-scrollbar-thumb { background: rgba(237, 72, 1, 0.5); border-radius: 10px; }
+/* --- ALERT BOXES --- */
+.alert-box { display: flex; align-items: center; background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 16px; margin-bottom: 10px; cursor: pointer; transition: transform 0.2s ease, background 0.2s; border-left: 4px solid transparent; }
+.alert-box:hover { background: rgba(255, 255, 255, 0.2); transform: translateX(5px); }
+.alert-box.selected { background: rgba(237, 72, 1, 0.3); border-left: 4px solid #ed4801; }
+.alert-box.unread { background: rgba(255, 255, 255, 0.15); border-left: 3px solid #ed4801; opacity: 1; }
+.alert-icon { width: 12px; height: 12px; background-color: #ed4801; border-radius: 50%; margin-right: 15px; flex-shrink: 0; }
+.box-text { display: flex; flex-direction: column; }
+.box-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 4px; color: #fff; text-transform: uppercase; }
+.box-subtitle { font-size: 0.8rem; color: #ccc; }
+.active-alert-counter{ padding: 5px 10px 5px 10px; text-align: left; }
+/* --- DETAIL BOX (ANIMATED) --- */
+.detail-box {
+    display: flex;
+    flex-direction: column;
+    /* FIX: Take up all remaining space */
+    flex: 1;
+    /* FIX: Prevents the box from forcing the screen wider if text is long */
+    min-width: 0;
+    /* Keep it floating */
+    height: calc(100% - 40px); /* Full height minus margins */
+    margin: 20px;
+    background: rgba(0,0,0,0.9);
+    padding: 30px;
+    border-radius: 15px;
+    color: #fff;
+    border: 1px solid #ed4801;
+    z-index: 20;
+    /* Animation: Hidden by default */
+    opacity: 0;
+    transform-origin: top right;
+    transform: scale(0.9) translateX(0);
+    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    pointer-events: none;
+    backdrop-filter: blur(5px);
+}
+/* Animation: Visible state */
+.detail-box.active {
+    opacity: 1;
+    transform: scale(1) translateX(0);
+    pointer-events: auto;
+    box-shadow: -10px 10px 30px rgba(0,0,0,0.5);
+}
+/* --- DETAIL CONTENT --- */
+.detail-header-r { display: flex; flex-direction: row; justify-content: space-between; margin: 0 0 10px; align-items: center; }
+.detail-title { font-size: 1.8rem; font-weight: 700; margin: 0; width: 70%; }
+.detail-redirect { font-size: 14px; color: #f6510a; text-decoration: none; border: 1px solid #f6510a; padding: 5px 10px; border-radius: 4px; transition: 0.3s; }
+.detail-redirect:hover { background: #f6510a; color: white; }
+.detail-line { border: none; border-top: 1px solid #ed4801; margin-bottom: 20px; }
+.detail-important-r { display: flex; flex-direction: row; justify-content: space-between; margin-top: 10px; }
+.detail-row1-c { display: flex; flex-direction: column; gap: 15px; flex: 1; }
+.detail-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 5px; }
+.detail-text { font-size: 1.3rem; color: #ddd;}
+.detail-content { margin-top: 0px; line-height: 1.6; font-size: 1.1rem; max-height: 400px; overflow-y: auto; color: #ddd; }
+.detail-row1-col2-r { display: flex; flex-direction: row;  gap: 20px; align-items: flex-start; }
+.detail-content::-webkit-scrollbar { width: 6px; }
+.detail-content::-webkit-scrollbar-track { background: transparent; }
+.detail-content::-webkit-scrollbar-thumb { background: rgba(237, 72, 1, 0.5); border-radius: 10px; }
+.detail-content::-webkit-scrollbar-thumb:hover { background: rgba(237, 72, 1, 1); }
+/* Buttons */
+.action-buttons { display: flex; gap: 10px; }
+.action-btn { border: none; padding: 5px 12px; border-radius: 4px; color: white; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 5px; }
+.verify-btn { background: #00C851; } .verify-btn:hover { background: #00e25b; }
+.resolve-btn { background: #33b5e5; } .resolve-btn:hover { background: #4ec2ec; }
+.detail-redirect { border: 1px solid #ed4801; color: #ed4801; padding: 5px 12px; border-radius: 4px; text-decoration: none; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
+.detail-redirect:hover { background: #ed4801; color: white; }
+/* .status-badge { margin-top: 5px; font-size: 0.8rem; padding: 2px 8px; border-radius: 4px; background: #555; display: inline-block; } */
+.confirm-btn { background: #ed4801; } .resolve-btn:hover { background: #4ec2ec; }
+/* --- STATUS BADGE COLOR CLASSES --- */
+/* These classes are applied via JavaScript to synchronize with button clicks */
+.status-badge {
+    margin-top: 5px;
+    font-size: 0.8rem;
+    padding: 2px 8px;
+    border-radius: 4px;
+    background: #555;
+    display: inline-block;
+    font-weight: bold; /* Added for clarity */
+    text-transform: uppercase;
+    transition: background-color 0.2s; /* Added transition */
+    color: white; /* Base text color */
+}
+/* Status: NEW (Default State/Unverified) */
+.status-new {
+    background-color: #555; /* Amber/Yellow ffc107 333 */
+    color: #ffffff;
+}
+/* Status: VERIFIED */
+.status-verified {
+    background-color: #ffc107; /* Green */
+    color: #ffffff;
+}
+/* Status: RESOLVED */
+.status-resolved {
+    background-color: #28a745; /* Gray 28a745*/
+    color: #ffffff;
+}
+/* Base Style for all action buttons (like 'Post' or 'Verify') */
+.action-btn1 {
+    /* Basic button styling (adjust padding, font, etc., as needed) */
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+    /* Ensure icon and text are aligned */
+    display: inline-flex;
+    align-items: center;
+    gap: 5px; /* Spacing between icon and text */
+}
+/* 1. Default (Unverified) State: Green Outline only */
+#verify-btn {
+    background-color: transparent;
+    color: #ffc107; /* Green text color */
+    border: 1px solid #ffc107; /* Green border (outline) */
+}
+/* 2. Verified State: Entirely Green */
+#verify-btn.is-verified {
+    background-color: #ffc107; /* Solid Green background */
+    color: #ffffff; /* White text/icon */
+    border-color: #ffc107; /* Maintain border color */
+}
+/* 3. Hover States */
+#verify-btn:hover:not(.is-verified) {
+    background-color: rgba(40, 167, 69, 0.1); /* Light green background on hover */
+}
+#verify-btn.is-verified:hover {
+    /* Make the button slightly darker green on hover when it's already verified */
+    background-color: #c77f0c;
+}
+/* --- RESOLVE BUTTON --- */
+/* 1. Default (Unresolved) State: Blue Outline only */
+#resolve-btn {
+    background-color: transparent;
+    color: #28a745; /* Blue text color */
+    border: 1px solid #28a745; /* Blue border (outline) */
+}
+/* 2. Resolved State: Entirely Blue */
+#resolve-btn.is-resolved {
+    background-color: #28a745; /* Solid Blue background */
+    color: #ffffff; /* White text/icon */
+    border-color: #28a745;
+}
+/* 3. Hover States (When Unresolved) */
+#resolve-btn:hover:not(.is-resolved) {
+    background-color: rgba(0, 123, 255, 0.1); /* Light blue background on hover */
+}
+/* 4. Hover States (When Already Resolved) */
+#resolve-btn.is-resolved:hover {
+    /* Make the button slightly darker blue on hover when it's already resolved */
+    background-color: #157349;
+}
+/* --- MODAL --- */
+.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.3s ease; }
+.modal-overlay.hidden { opacity: 0; pointer-events: none; display: none !important; }
+.modal-content { background: #1a1a1a; border: 1px solid #444; padding: 30px; border-radius: 12px; width: 90%; max-width: 900px; }
+.modal-header { display: flex; justify-content: space-between; margin-bottom: 20px; }
+.charts-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 20px; }
+.chart-wrapper { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 20px; flex: 1; min-width: 300px; max-height: 400px; display: flex; flex-direction: column; align-items: center; }
+canvas { max-width: 100%; max-height: 300px; }
+.icon-btn-ghost { background: transparent; border: none; color: #888; font-size: 1.5rem; cursor: pointer; }
+.hidden { display: none !important; }
+/* --- RESPONSIVE ADJUSTMENT --- */
+@media (max-width: 850px) {
+    /* Unlock the body scrolling for small screens */
+    body {
+        overflow: auto;
+        height: auto;
+    }
+    .hero {
+        /* Stack vertically instead of side-by-side */
+        flex-direction: column;
+        height: auto;
+        min-height: 100vh;
+    }
+    .sidebar-wrapper {
+        /* Sidebar becomes full width banner at the top */
+        width: 100%;
+        flex: none; /* Turn off the fixed 350px logic */
+        height: 300px; /* Fixed height for list */
+    }
+    .detail-box {
+        /* Box sits below sidebar */
+        width: 95%; /* Almost full width */
+        margin: 10px auto; /* Center it */
+        height: 500px; /* Fixed height for content */
+        flex: none;
+        /* Reset transform for mobile so it doesn't fly in weirdly */
+        transform: none;
+    }
+    /* Ensure active state just shows opacity on mobile */
+    .detail-box.active {
+        transform: none;
+    }
+}
+/* --- LOGIN MODAL STYLES --- */
+.small-modal { max-width: 400px; }
+.login-form {
+    display: flex; flex-direction: column; gap: 15px;
+}
+.login-input {
+    background: rgba(255,255,255,0.1);
+    border: 1px solid #444;
+    color: white;
+    padding: 12px;
+    border-radius: 6px;
+    font-size: 1rem;
+    outline: none;
+}
+.login-input:focus { border-color: #ed4801; }
+.full-width {
+    width: 100%;
+    justify-content: center;
+    padding: 12px;
+    font-size: 1rem;
+}
+/* --- SIDEBAR ASSISTANCE BADGE --- */
+.assist-badge {
+    display: inline-block;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    padding: 2px 6px;
+    border-radius: 4px;
+    margin-right: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    color: #ccc;
+    border: 1px solid #555;
+}
+/* Specific Colors */
+.assist-medical { color: #ff4444; border-color: #ff4444; background: rgba(255, 68, 68, 0.1); }
+.assist-rescue { color: #ffbb33; border-color: #ffbb33; background: rgba(255, 187, 51, 0.1); }
+.assist-food { color: #00C851; border-color: #00C851; background: rgba(0, 200, 81, 0.1); }
+.assist-evac { color: #33b5e5; border-color: #33b5e5; background: rgba(51, 181, 229, 0.1); }
+/* --- CUSTOM TOOLTIP STYLES --- */
+/* 1. Base style for any element that has a tooltip */
+[data_tooltip] {
+    position: relative;
+    cursor: pointer;
+}
+/* 2. Create the tooltip content (::after) ALWAYS, but invisible */
+[data_tooltip]::after {
+    content: attr(data_tooltip);
+    position: absolute;
+    top: calc(100% + 15px);
+    /* DEFAULT POSITIONING: Centered over parent */
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+    margin: 0;
+    /* Appearance & Visibility */
+    background-color: #ed4801;
+    color: #fff;
+    white-space: nowrap;
+    padding: 6px 10px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    transition-delay: 0s; /* Instant disappearance */
+    z-index: 9999;
+}
+/* 4a. LEFT EDGE OVERRIDE */
+[data_tooltip_align="left"]::after {
+    left: 0;
+    right: auto;
+    transform: none;
+    margin-left: 10px;
+}
+/* 4b. RIGHT EDGE OVERRIDE */
+[data_tooltip_align="right"]::after {
+    right: 0;
+    left: auto;
+    transform: none;
+    margin-left: 0;
+    margin-right: 10px;
+}
+/* 5. ON HOVER — animate in (Fade only) */
+[data_tooltip]:hover::after {
+    opacity: 1;
+    transition-delay: 0.5s !important;
+}
+/* Add this to your existing CSS */
+[data_tooltip].tooltip-hidden:hover::after {
+    opacity: 0 !important;
+    transition-delay: 0s !important;
+}
+/* 5. Tooltip visibility on hover */
+/* [data_tooltip]:hover::after,
+[data_tooltip]:hover::before {
+    opacity: 1;
+} */
+/* Arrow — ALSO always created */
+/* [data_tooltip]::before {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #ed4801;
+    opacity: 0;
+    transition: opacity 0.2s;
+    transition-delay: 0s;
+    z-index: 9999;
+} */
+/* Floating Sidebar for Map Page */
+.map-sidebar {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 250px;
+    background: rgba(0, 0, 0, 0.85);
+    padding: 20px;
+    border-radius: 12px;
+    border: 1px solid #ed4801;
+    z-index: 1000; /* Sit on top of map */
+    color: white;
+    backdrop-filter: blur(5px);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+}
+.back-btn {
+    display: inline-block;
+    color: #ccc;
+    text-decoration: none;
+    margin-bottom: 15px;
+    font-size: 0.9em;
+    transition: color 0.2s;
+}
+.back-btn:hover { color: #ed4801; }
+.stat-item {
+    margin-top: 5px;
+    font-size: 0.85rem;
+    color: #aaa;
+}
+.stat-highlight {
+    color: white;
+    font-weight: bold;
+    font-size: 1.1rem;
+}
+.profile-container {
+    position: relative;
+    margin-left: 10px;
+    height: 35px;
+}
+.profile-icon {
+    width: 35px;
+    height: 35px;
+    background: #ed4801; /* Orange profile background */
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.1em;
+    cursor: pointer;
+    transition: box-shadow 0.2s;
+}
+.profile-icon:hover {
+    box-shadow: 0 0 0 4px rgba(237, 72, 1, 0.3);
+}
+/* Dropdown Menu Box */
+.profile-dropdown {
+    position: absolute;
+    top: 45px;
+    right: 0;
+    width: 250px;
+    background: #1a1a1a;
+    border: 1px solid #333;
+    border-radius: 8px;
+    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
+    z-index: 1000;
+    padding: 15px;
+    transform: translateY(10px);
+    transition: opacity 0.2s, transform 0.2s;
+}
+.profile-dropdown.hidden {
+    display: none;
+}
+/* Dropdown Header Info */
+.profile-info-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-bottom: 10px;
+}
+.profile-icon-large {
+    width: 50px;
+    height: 50px;
+    background: #ff7e42;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.8em;
+    margin-bottom: 8px;
+}
+.dropdown-username {
+    font-weight: bold;
+    color: white;
+    font-size: 1.1em;
+}
+/* Logout Button */
+.dropdown-separator {
+    border: none;
+    border-top: 1px solid #333;
+    margin: 10px 0;
+}
+.dropdown-logout-btn {
+    width: 100%;
+    background: #ed4801;
+    color: white;
+    border: none;
+    padding: 8px;
+    border-radius: 4px;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+@media (max-width: 1200px) {
+    .detail-header-r .action-buttons {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 8px;
+    }
+    .detail-redirect {
+        justify-content: center;
+    }
+    .action-btn1 {
+        width: 100%;
+    }
+}
+.alert-popup {
+    position: fixed;
+    top: 70px;
+    right: 20px;
+    color: white;
+    padding: 15px 25px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
+    z-index: 1000;
+    opacity: 0;
+    transform: translateX(100%);
+    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
+}
+.alert-popup.visible {
+    opacity: 1;
+    transform: translateX(0);
+}
+.hidden {
+    display: none !important;
+}
+/* --- MAP COLLAPSIBLE SIDEBAR STYLES --- */
+/* 1. Base style for the sidebar container */
+.map-collapse-sidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 300px;
+    background: rgba(0, 0, 0, 0.85);
+    padding: 20px;
+    border-right: 2px solid #ed4801;
+    z-index: 1000;
+    color: white;
+    backdrop-filter: blur(5px);
+    box-shadow: 4px 0 15px rgba(0,0,0,0.5);
+    transform: translateX(0);
+    transition: transform 0.3s ease-out;
+    overflow-y: auto;
+}
+.map-collapse-sidebar::-webkit-scrollbar { width: 6px; }
+.map-collapse-sidebar::-webkit-scrollbar-thumb { background: rgba(237, 72, 1, 0.5); border-radius: 10px; }
+/* 2. Collapsed State: Move the sidebar off-screen */
+.map-collapse-sidebar.collapsed {
+    transform: translateX(-300px);
+}
+/* 3. Toggle Button Style */
+.sidebar-toggle-btn {
+    position: absolute;
+    top: 20px;
+    left: 320px;
+    width: 40px;
+    height: 40px;
+    background: #ed4801;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
+    z-index: 1001;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease-out;
+}
+/* 4. Reposition the button when sidebar is collapsed */
+.map-collapse-sidebar.collapsed + .sidebar-toggle-btn {
+    left: 20px;
+    transform: rotate(180deg);
+}
+/* 5. Content within the sidebar (just for reset) */
+.map-sidebar-content {
+    opacity: 1;
+    transition: opacity 0.3s;
+}

alisto_project/backend/templates.py ADDED Viewed

	@@ -0,0 +1,62 @@

+# templates.py
+# LOCATIONS = [
+#     "Marikina", "Quezon City", "Manila", "Pasig", "Cainta", "Antipolo",
+#     "Batangas", "Tagaytay", "Davao", "Cebu", "Bicol", "Albay",
+#     "Pampanga", "Bulacan", "Laguna", "Cavite", "Tacloban", "Iligan",
+#     "Navotas", "Malabon", "San Mateo", "Rizal", "Valenzuela", "Muntinlupa",
+#     "Las Pinas", "Makati", "Mandaluyong", "San Juan", "Catanduanes",
+#     "Isabela", "Cagayan", "Iloilo", "Samar", "Leyte", "Mindoro",
+#     "General Trias", "Dasmarinas", "Bacoor", "Imus", "Tondo"
+# ]
+LOCATIONS = [
+    "Ilocos Norte", "Ilocos Sur", "La Union", "Pangasinan",
+    "Batanes", "Cagayan", "Isabela", "Nueva Vizcaya", "Quirino",
+    "Aurora", "Bataan", "Bulacan", "Nueva Ecija", "Pampanga", "Tarlac", "Zambales",
+    "Batangas", "Cavite", "Laguna", "Quezon", "Rizal",
+    "Marinduque", "Occidental Mindoro", "Oriental Mindoro", "Palawan", "Romblon",
+    "Albay", "Camarines Norte", "Camarines Sur", "Catanduanes", "Masbate", "Sorsogon",
+    "Abra", "Apayao", "Benguet", "Ifugao", "Kalinga", "Mountain Province",
+    "Aklan", "Antique", "Capiz", "Guimaras", "Iloilo", "Negros Occidental",
+    "Bohol", "Cebu", "Negros Oriental", "Siquijor",
+    "Biliran", "Eastern Samar", "Leyte", "Northern Samar", "Samar", "Southern Leyte",
+    "Zamboanga del Norte", "Zamboanga del Sur", "Zamboanga Sibugay",
+    "Bukidnon", "Camiguin", "Lanao del Norte", "Misamis Occidental", "Misamis Oriental",
+    "Davao de Oro", "Davao del Norte", "Davao del Sur", "Davao Oriental", "Davao Occidental",
+    "Cotabato", "Sarangani", "South Cotabato", "Sultan Kudarat",
+    "Agusan del Norte", "Agusan del Sur", "Dinagat Islands", "Surigao del Norte", "Surigao del Sur",
+    "Basilan", "Lanao del Sur", "Maguindanao del Norte", "Maguindanao del Sur", "Sulu", "Tawi-Tawi"
+]
+DISASTERS = [
+    "baha", "flood", "flooding", "flash flood", "taas ng tubig",
+    "lindol", "earthquake", "quake", "aftershock", "yanig", "uga",
+    "bagyo", "typhoon", "storm", "winds", "malakas na hangin",
+    "sunog", "fire", "nasusunog", "apoy", "fire alert",
+    "landslide", "guho", "mudslide", "falling rocks",
+    "volcano", "ashfall", "eruption", "asupre", "smog"
+]
+NEEDS = [
+    "rescue", "tulong", "help", "saklolo", "assist", "save us",
+    "food", "pagkain", "water", "tubig", "relief goods", "makakain",
+    "medical", "gamot", "medic", "doctor", "ambulance", "oxygen", "first aid",
+    "shelter", "evacuation", "matutuluyan", "tents", "bubong", "trapal",
+    "boat", "bangka", "firetruck", "bumbero", "rescuers"
+]
+# POSITIVE FRAGMENTS
+POS_INTROS = ["EMERGENCY!", "HELP!", "S.O.S.", "URGENT:", "Please help,", "Tulong po,", "Saklolo,", "Rescue needed!"]
+POS_SITUATIONS = ["trapped kami sa loob", "stuck sa bubong", "water is rising fast", "nasusunog ang bahay", "injured ang kasama ko", "stranded kami", "collapsed ang pader", "lubog na ang first floor"]
+POS_REQUESTS = ["we need {need} immediately", "send {need} ASAP", "paki-dala ng {need}", "kailangan namin ng {need}", "need {need} now!"]
+# NEGATIVE FRAGMENTS
+NEG_NEWS_INTROS = ["BREAKING:", "Just in:", "News Update:", "Report:", "FYI:", "Advisory:", "Headlines:", "According to news,"]
+NEG_NEWS_BODIES = ["{disaster} hits {loc}", "death toll in {loc} rises", "classes suspended in {loc}", "state of calamity declared in {loc}"]
+NEG_ACT_INTROS = ["I want to donate", "Looking for volunteers", "Donation drive for", "Salute to", "Praying for", "Condolence to"]
+NEG_ACT_BODIES = ["victims of {disaster} in {loc}", "our heroes in {loc}", "the brave rescuers in {loc}", "{disaster} survivors in {loc}"]
+NEG_DISCUSS_INTROS = ["Why is the mayor", "The corruption in", "Remembering the", "Throwback to", "Discussion:", "Opinion:", "Is it safe in"]
+NEG_DISCUSS_BODIES = ["response to {disaster} in {loc} is slow", "1990 {disaster} in {loc}", "{loc} politicians are useless", "road to {loc} is passable"]