Upload 2 files

app.py

@@ -0,0 +1,258 @@
+from flask import Flask, render_template, request
+import pandas as pd
+import folium
+from folium.plugins import HeatMap, MarkerCluster, Fullscreen, MiniMap
+from folium.raster_layers import TileLayer
+from datetime import datetime, timedelta, timezone
+import re
+import google.generativeai as genai
+import os
+import requests # <--- CORRECTED: Added requests import
+import toml # For potentially reading secrets.toml
+from datetime import datetime, timezone # Make sure timezone is imported
+
+# --- Configuration ---
+DEFAULT_MIN_LAT_INDIA = 6.0
+DEFAULT_MAX_LAT_INDIA = 38.0
+DEFAULT_MIN_LON_INDIA = 68.0
+DEFAULT_MAX_LON_INDIA = 98.0
+DEFAULT_REGION_NAME_INDIA = "India & Surrounding"
+TSUNAMI_MAG_THRESHOLD = 6.8
+TSUNAMI_DEPTH_THRESHOLD = 70
+OFFSHORE_KEYWORDS = ["sea", "ocean", "off the coast", "ridge", "trench", "gulf", "bay", "islands region", "strait"]
+TECTONIC_PLATES_URL = "https://raw.githubusercontent.com/fraxen/tectonicplates/master/GeoJSON/PB2002_boundaries.json"
+USGS_API_URL = "https://earthquake.usgs.gov/fdsnws/event/1/query"
+
+# --- Load API Key ---
+GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")
+if not GEMINI_API_KEY:
+    try:
+        secrets_path = os.path.join(os.path.dirname(__file__), '.streamlit', 'secrets.toml')
+        if os.path.exists(secrets_path):
+            secrets = toml.load(secrets_path)
+            GEMINI_API_KEY = secrets.get("GEMINI_API_KEY")
+    except Exception as e:
+        print(f"Could not load secrets.toml: {e}")
+        GEMINI_API_KEY = None
+
+if not GEMINI_API_KEY:
+    print("WARNING: GEMINI_API_KEY not found. AI features will be disabled.")
+
+# --- API Functions ---
+def fetch_earthquake_data(starttime, endtime, min_mag, min_lat, max_lat, min_lon, max_lon, source="USGS"):
+    print(f"Fetching data from {source} from {starttime.strftime('%Y-%m-%d %H:%M')} to {endtime.strftime('%Y-%m-%d %H:%M')} for Mag >= {min_mag}...")
+    params = {
+        'format': 'geojson',
+        'starttime': starttime.strftime('%Y-%m-%dT%H:%M:%S'),
+        'endtime': endtime.strftime('%Y-%m-%dT%H:%M:%S'),
+        'minlatitude': min_lat,
+        'maxlatitude': max_lat,
+        'minlongitude': min_lon,
+        'maxlongitude': max_lon,
+        'minmagnitude': min_mag,
+        'orderby': 'time'
+    }
+    try:
+        response = requests.get(USGS_API_URL, params=params, timeout=30)
+        response.raise_for_status()
+        data = response.json()
+        features = data.get('features', [])
+        earthquakes = []
+        for feature in features:
+            properties = feature.get('properties', {})
+            geometry = feature.get('geometry', {})
+            coordinates = geometry.get('coordinates', [None, None, None])
+            earthquakes.append({
+                'id': feature.get('id'),
+                'magnitude': properties.get('mag'),
+                'place': properties.get('place'),
+                'time': pd.to_datetime(properties.get('time'), unit='ms', utc=True),
+                'url': properties.get('url'),
+                'longitude': coordinates[0],
+                'latitude': coordinates[1],
+                'depth': coordinates[2]
+            })
+        df = pd.DataFrame(earthquakes)
+        if not df.empty:
+            df = df.sort_values(by='time', ascending=False)
+        print(f"Fetched {len(df)} earthquakes from {source}.")
+        return df
+    except requests.exceptions.RequestException as e:
+        print(f"Error fetching data from {source}: {e}")
+        return pd.DataFrame()
+    except Exception as e:
+        print(f"An unexpected error occurred during data fetching: {e}")
+        return pd.DataFrame()
+
+def fetch_tectonic_plates_data(url):
+    print("Fetching tectonic plate boundaries data...")
+    try:
+        response = requests.get(url, timeout=30)
+        response.raise_for_status()
+        print("Tectonic plate data fetched.")
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        print(f"Error fetching tectonic plate data: {e}")
+        return None
+
+# --- Helper Functions ---
+def is_offshore(place_description, depth_km):
+    if place_description is None or depth_km is None: return False
+    place_lower = str(place_description).lower()
+    for keyword in OFFSHORE_KEYWORDS:
+        if keyword in place_lower: return True
+    return False
+
+def get_marker_color_by_magnitude(magnitude):
+    if magnitude is None: return 'gray'
+    if magnitude < 4.0: return 'green'
+    elif magnitude < 5.0: return 'blue'
+    elif magnitude < 6.0: return 'orange'
+    elif magnitude < 7.0: return 'red'
+    else: return 'darkred'
+
+# --- Gemini LLM Function ---
+def get_gemini_interpretation(api_key, data_summary_prompt):
+    if not api_key:
+        return "API Key not configured for Gemini."
+    try:
+        genai.configure(api_key=api_key)
+        model = genai.GenerativeModel('gemini-1.5-flash-latest')
+        response = model.generate_content(data_summary_prompt)
+        return response.text
+    except Exception as e:
+        print(f"Error communicating with Gemini API: {e}")
+        return "Could not retrieve interpretation from AI model."
+
+app = Flask(__name__)
+
+predefined_regions_dict = {
+    "India & Surrounding": (DEFAULT_MIN_LAT_INDIA, DEFAULT_MAX_LAT_INDIA, DEFAULT_MIN_LON_INDIA, DEFAULT_MAX_LON_INDIA),
+    "Indian Ocean Region (Tsunami Focus)": (-20, 35, 40, 120),
+    "Northern India (Himalayan Belt)": (25, 38, 70, 98),
+    "Andaman & Nicobar Region": (5, 15, 90, 95),
+    "Global (Significant Quakes)": (-60, 60, -180, 180)
+}
+
+def get_default_configs_for_region(region_name):
+    if region_name == "Global (Significant Quakes)":
+        return {"days_historical": 730, "min_magnitude_historical": 4.5, "days_recent": 7, "min_magnitude_recent": 4.0, "alert_threshold_magnitude": 5.0, "show_tectonic_plates": True, "enable_ai_interpretation": bool(GEMINI_API_KEY)}
+    elif region_name == "Indian Ocean Region (Tsunami Focus)":
+        return {"days_historical": 730, "min_magnitude_historical": 4.0, "days_recent": 7, "min_magnitude_recent": 3.5, "alert_threshold_magnitude": 4.5, "show_tectonic_plates": True, "enable_ai_interpretation": bool(GEMINI_API_KEY)}
+    else:
+        return {"days_historical": 730, "min_magnitude_historical": 3.0, "days_recent": 7, "min_magnitude_recent": 2.5, "alert_threshold_magnitude": 3.5, "show_tectonic_plates": True, "enable_ai_interpretation": bool(GEMINI_API_KEY)}
+
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    map_html = None
+    historical_df = pd.DataFrame()
+    recent_df = pd.DataFrame()
+    significant_quakes = []
+    tsunami_potential_events = []
+    ai_interpretation = None
+    initial_load = True
+
+    current_config = {}
+    if request.method == 'POST':
+        initial_load = False
+        current_config['selected_region_name'] = request.form.get('selected_region_name', DEFAULT_REGION_NAME_INDIA)
+        # Load defaults for selected region first, then override with form values
+        defaults = get_default_configs_for_region(current_config['selected_region_name'])
+        current_config.update(defaults)
+
+        current_config['days_historical'] = int(request.form.get('days_historical', defaults['days_historical']))
+        current_config['min_magnitude_historical'] = float(request.form.get('min_magnitude_historical', defaults['min_magnitude_historical']))
+        current_config['days_recent'] = int(request.form.get('days_recent', defaults['days_recent']))
+        current_config['min_magnitude_recent'] = float(request.form.get('min_magnitude_recent', defaults['min_magnitude_recent']))
+        current_config['alert_threshold_magnitude'] = float(request.form.get('alert_threshold_magnitude', defaults['alert_threshold_magnitude']))
+        current_config['show_tectonic_plates'] = request.form.get('show_tectonic_plates') == 'True'
+        current_config['enable_ai_interpretation'] = request.form.get('enable_ai_interpretation') == 'True'
+    else: # GET
+        initial_load = True
+        current_config['selected_region_name'] = DEFAULT_REGION_NAME_INDIA
+        defaults = get_default_configs_for_region(DEFAULT_REGION_NAME_INDIA)
+        current_config.update(defaults)
+
+    if request.method == 'POST': # Process data only on POST
+        min_lat, max_lat, min_lon, max_lon = predefined_regions_dict[current_config['selected_region_name']]
+        end_time_global = datetime.now(timezone.utc)
+        start_time_historical = end_time_global - timedelta(days=current_config['days_historical'])
+        start_time_recent = end_time_global - timedelta(days=current_config['days_recent'])
+
+        historical_df = fetch_earthquake_data(start_time_historical, end_time_global, current_config['min_magnitude_historical'], min_lat, max_lat, min_lon, max_lon)
+        recent_df = fetch_earthquake_data(start_time_recent, end_time_global, current_config['min_magnitude_recent'], min_lat, max_lat, min_lon, max_lon)
+
+        map_center_lat = (min_lat + max_lat) / 2; map_center_lon = (min_lon + max_lon) / 2
+        if current_config['selected_region_name'] == "Global (Significant Quakes)": initial_zoom = 2
+        elif abs(max_lat - min_lat) > 30 or abs(max_lon - min_lon) > 30: initial_zoom = 3
+        else: initial_zoom = 4 if abs(max_lat - min_lat) > 15 or abs(max_lon - min_lon) > 15 else 5
+
+        m = folium.Map(location=[map_center_lat, map_center_lon], zoom_start=initial_zoom, tiles=None)
+        TileLayer(tiles='https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', attr='OpenTopoMap', name='OpenTopoMap (Terrain)', show=True).add_to(m)
+        TileLayer("OpenStreetMap", name="OpenStreetMap", show=False).add_to(m)
+
+        if current_config['show_tectonic_plates']:
+            plate_data = fetch_tectonic_plates_data(TECTONIC_PLATES_URL)
+            if plate_data:
+                folium.GeoJson(plate_data, name="Tectonic Plates", style_function=lambda x: {'color': '#E04A00', 'weight': 3, 'opacity': 0.9}, tooltip=folium.GeoJsonTooltip(fields=['Name'], aliases=['Plate Name:'], localize=True)).add_to(m)
+
+        if not historical_df.empty:
+            heat_data_list = [[row_h['latitude'], row_h['longitude'], row_h['magnitude']] if pd.notnull(row_h['magnitude']) else [row_h['latitude'], row_h['longitude']] for _, row_h in historical_df.iterrows() if pd.notnull(row_h['latitude']) and pd.notnull(row_h['longitude'])]
+            if heat_data_list: HeatMap(heat_data_list, name="Historical Heatmap").add_to(m)
+
+        if not recent_df.empty:
+            mc = MarkerCluster(name="Recent Earthquakes").add_to(m)
+            for _, row_r in recent_df.iterrows():
+                if pd.notnull(row_r['latitude']) and pd.notnull(row_r['longitude']) and pd.notnull(row_r['magnitude']):
+                    mag = f"{row_r['magnitude']:.1f}"; depth = f"{row_r['depth']:.1f} km" if pd.notnull(row_r['depth']) else "N/A"; color = get_marker_color_by_magnitude(row_r['magnitude'])
+                    popup = f"<b>RECENT</b><br>M{mag} at {row_r['place']}<br>{row_r['time'].strftime('%Y-%m-%d %H:%M')}<br>Depth: {depth}<br><a href='{row_r['url']}' target='_blank'>USGS</a>"
+                    folium.CircleMarker(location=[row_r['latitude'], row_r['longitude']], radius=max(3, (row_r['magnitude'] * 1.8)), popup=folium.Popup(popup, max_width=300), color=color, fill=True, fill_color=color, fill_opacity=0.7, tooltip=f"M{mag}").add_to(mc)
+        folium.LayerControl().add_to(m)
+        Fullscreen().add_to(m)
+        map_html = m._repr_html_()
+
+        if not recent_df.empty:
+            recent_alerts = recent_df.copy()
+            recent_alerts['magnitude'] = pd.to_numeric(recent_alerts['magnitude'], errors='coerce').dropna()
+            temp_sig_q = recent_alerts[recent_alerts['magnitude'] >= current_config['alert_threshold_magnitude']]
+            for _, sq_row in temp_sig_q.iterrows():
+                q_info = sq_row.to_dict(); q_info['tsunami_risk_info'] = ""
+                if pd.notnull(sq_row.get('magnitude')) and pd.notnull(sq_row.get('depth')) and pd.notnull(sq_row.get('place')):
+                    if sq_row['magnitude'] >= TSUNAMI_MAG_THRESHOLD and sq_row['depth'] <= TSUNAMI_DEPTH_THRESHOLD and is_offshore(sq_row['place'], sq_row['depth']):
+                        q_info['tsunami_risk_info'] = "🌊 POTENTIAL TSUNAMI RISK"; tsunami_potential_events.append(q_info)
+                significant_quakes.append(q_info)
+
+        if current_config['enable_ai_interpretation'] and GEMINI_API_KEY:
+            summary_ai = f"Region: {current_config['selected_region_name']}\nHist: {current_config['days_historical']}d, M>={current_config['min_magnitude_historical']}, Tot:{len(historical_df)}\n"
+            if not historical_df.empty and 'magnitude' in historical_df and not historical_df['magnitude'].dropna().empty: summary_ai += f"Lgst hist.M: {historical_df['magnitude'].dropna().max():.1f}\n"
+            summary_ai += f"Recent: {current_config['days_recent']}d, M>={current_config['min_magnitude_recent']}, Tot:{len(recent_df)}\n"
+            if not recent_df.empty and 'magnitude' in recent_df and not recent_df['magnitude'].dropna().empty: summary_ai += f"Lgst rec.M: {recent_df['magnitude'].dropna().max():.1f}, Avg rec.M: {recent_df['magnitude'].dropna().mean():.1f}\n"
+            summary_ai += f"Alerts (M>={current_config['alert_threshold_magnitude']}): {len(significant_quakes)}\n"
+            if significant_quakes:
+                summary_ai += "Top sig. quakes:\n"
+                for r_s in significant_quakes[:2]: summary_ai += f"  - M {r_s.get('magnitude',0.0):.1f} at {r_s.get('place','N/A')} on {r_s.get('time').strftime('%Y-%m-%d')}\n"
+            summary_ai += f"Tsunami risk events: {len(tsunami_potential_events)}\n"
+            full_prompt_ai = f"""You are a seismic data analyst. Based on this summary for '{current_config['selected_region_name']}', give a concise interpretation (max 3-4 paragraphs):
+1.  Overall seismic activity (recent vs. hist.).
+2.  Notable patterns/clusters in recent data.
+3.  Areas more active recently.
+4.  General outlook (NO PREDICTIONS).
+IMPORTANT: Start with a disclaimer.
+Data: {summary_ai}Interpretation:"""
+            ai_interpretation = get_gemini_interpretation(GEMINI_API_KEY, full_prompt_ai)
+    current_time_for_render = datetime.now(timezone.utc)
+
+    return render_template('index.html',
+                           map_html=map_html,
+                           historical_df=historical_df, # For potential future use in template
+                           recent_df=recent_df, # For Top 5 table
+                           significant_quakes=significant_quakes,
+                           tsunami_potential_events=tsunami_potential_events,
+                           ai_interpretation=ai_interpretation,
+                           predefined_regions_list=predefined_regions_dict.keys(),
+                           now= current_time_for_render,
+                           current_config=current_config,
+                           initial_load=initial_load)
+
+if __name__ == '__main__':
+    app.run(debug=True)

templates/index.html

@@ -0,0 +1,654 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Seismic Monitor Pro - India</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #2b6cb0;
+            --secondary-color: #3182ce;
+            --warning-color: #dd6b20;
+            --danger-color: #e53e3e;
+            --light-bg: #f7fafc;
+            --dark-bg: #1a202c;
+            --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+        }
+        
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background-color: var(--light-bg);
+            color: #2d3748;
+            padding-top: 0;
+        }
+        
+        .navbar-custom {
+            background-color: var(--primary-color);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        
+        .logo-text {
+            font-weight: 700;
+            letter-spacing: -0.5px;
+            font-size: 1.5rem;
+            color: white;
+        }
+        
+        .container-fluid {
+            padding: 0;
+        }
+        
+        .main-container {
+            padding: 0 20px 20px 20px;
+        }
+        
+        .card {
+            border: none;
+            border-radius: 8px;
+            box-shadow: var(--card-shadow);
+            margin-bottom: 20px;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        
+        .card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        .card-header {
+            background-color: white;
+            border-bottom: 1px solid rgba(0,0,0,0.05);
+            font-weight: 600;
+            padding: 15px 20px;
+            font-size: 1.1rem;
+            border-radius: 8px 8px 0 0 !important;
+        }
+        
+        .card-header i {
+            margin-right: 8px;
+            color: var(--primary-color);
+        }
+        
+        .card-body {
+            padding: 20px;
+        }
+        
+        .map-container {
+            width: 100%;
+            height: 550px;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        
+        .config-form {
+            max-height: 550px;
+            overflow-y: auto;
+        }
+        
+        .kpi-card {
+            border-radius: 8px;
+            padding: 15px;
+            height: 100%;
+            text-align: center;
+            position: relative;
+        }
+        
+        .kpi-card .kpi-icon {
+            position: absolute;
+            right: 15px;
+            top: 15px;
+            opacity: 0.2;
+            font-size: 2rem;
+        }
+        
+        .kpi-value {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 5px;
+            line-height: 1;
+        }
+        
+        .kpi-label {
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            opacity: 0.8;
+        }
+        
+        .kpi-small {
+            font-size: 0.75rem;
+            opacity: 0.7;
+        }
+        
+        .btn-primary {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+            box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+        }
+        
+        .btn-primary:hover {
+            background-color: var(--secondary-color);
+            border-color: var(--secondary-color);
+        }
+        
+        .form-control, .form-select {
+            border-radius: 6px;
+            padding: 10px 12px;
+            border: 1px solid #e2e8f0;
+        }
+        
+        .form-label {
+            font-weight: 500;
+            font-size: 0.9rem;
+            margin-bottom: 5px;
+        }
+        
+        .alert-custom {
+            border-radius: 6px;
+            padding: 15px;
+            margin-bottom: 15px;
+            position: relative;
+        }
+        
+        .alert-warning-custom {
+            background-color: #fffaf0;
+            border-left: 4px solid var(--warning-color);
+            color: #7b341e;
+        }
+        
+        .alert-info-custom {
+            background-color: #ebf8ff;
+            border-left: 4px solid var(--primary-color);
+            color: #2c5282;
+        }
+        
+        .alert-danger-custom {
+            background-color: #fff5f5;
+            border-left: 4px solid var(--danger-color);
+            color: #c53030;
+        }
+        
+        .recent-quake {
+            border-radius: 6px;
+            border-left: 4px solid var(--primary-color);
+            background-color: white;
+            padding: 12px;
+            margin-bottom: 12px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+        }
+        
+        .tsunami-risk {
+            border-left-color: var(--danger-color);
+        }
+        
+        .tsunami-badge {
+            background-color: var(--danger-color);
+            color: white;
+            padding: 3px 8px;
+            border-radius: 12px;
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            font-weight: 700;
+        }
+        
+        .magnitude-badge {
+            display: inline-block;
+            width: 40px;
+            height: 40px;
+            line-height: 40px;
+            border-radius: 50%;
+            background-color: #3182ce;
+            color: white;
+            font-weight: 700;
+            text-align: center;
+            margin-right: 10px;
+            font-size: 1rem;
+        }
+        
+        .magnitude-high {
+            background-color: var(--danger-color);
+        }
+        
+        .magnitude-med {
+            background-color: var(--warning-color);
+        }
+        
+        .ai-interpretation {
+            background-color: #f0f4f8;
+            border-radius: 8px;
+            padding: 20px;
+            position: relative;
+        }
+        
+        .ai-interpretation:before {
+            content: '\201C'; /* Corrected: Unicode for left double quotation mark */
+            position: absolute;
+            top: 5px;
+            left: 10px;
+            font-size: 3rem;
+            color: rgba(0,0,0,0.1);
+            line-height: 1;
+        }
+        
+        .table-recent {
+            border-collapse: separate;
+            border-spacing: 0;
+            width: 100%;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        
+        .table-recent th {
+            background-color: #f7fafc;
+            font-weight: 600;
+            text-transform: uppercase;
+            font-size: 0.75rem;
+            letter-spacing: 0.5px;
+            color: #4a5568;
+        }
+        
+        .table-recent td, .table-recent th {
+            padding: 12px;
+            border-bottom: 1px solid #edf2f7;
+        }
+        
+        .table-recent tr:last-child td {
+            border-bottom: none;
+        }
+        
+        @media (max-width: 768px) {
+            .map-container {
+                height: 400px;
+            }
+            
+            .kpi-value {
+                font-size: 1.5rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation Bar -->
+    <nav class="navbar navbar-expand-lg navbar-dark navbar-custom mb-4">
+        <div class="container-fluid px-4">
+            <span class="logo-text"><i class="fas fa-map-marked-alt me-2"></i>Seismic Monitor Pro - India</span>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#aboutModal">
+                            <i class="fas fa-info-circle me-1"></i> About
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://www.incois.gov.in/portal/TsunamiEarlyWarning.jsp" target="_blank">
+                            <i class="fas fa-external-link-alt me-1"></i> INCOIS
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://ndma.gov.in/" target="_blank">
+                            <i class="fas fa-external-link-alt me-1"></i> NDMA
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container-fluid main-container">
+        <!-- Disclaimer Alert -->
+        <div class="alert alert-warning-custom mb-4" role="alert">
+            <div class="d-flex align-items-center">
+                <i class="fas fa-exclamation-triangle fa-2x me-3 text-warning"></i>
+                <div>
+                    <strong>Important Disclaimer:</strong> True earthquake prediction is NOT currently possible. 
+                    This dashboard provides historical data visualization and analysis only. Always refer to official sources for warnings and advisories.
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <!-- Configuration Sidebar -->
+            <div class="col-lg-3 col-md-12 mb-4">
+                <div class="card">
+                    <div class="card-header">
+                        <i class="fas fa-sliders-h"></i> Analysis Configuration
+                    </div>
+                    <div class="card-body config-form">
+                        <form method="POST" id="analysisForm"> {# Added id="analysisForm" #}
+                            <div class="mb-3">
+                                <label for="selected_region_name" class="form-label">Region</label>
+                                <select class="form-select" id="selected_region_name" name="selected_region_name">
+                                    {% for region in predefined_regions_list %}
+                                        <option value="{{ region }}" {% if region == current_config.selected_region_name %}selected{% endif %}>{{ region }}</option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                            
+                            <div class="row mb-3">
+                                <div class="col-6">
+                                    <label for="days_recent" class="form-label">Recent Days</label>
+                                    <input type="number" class="form-control" id="days_recent" name="days_recent" value="{{ request.form.get('days_recent', current_config.days_recent) }}" min="1" max="30">
+                                </div>
+                                <div class="col-6">
+                                    <label for="min_magnitude_recent" class="form-label">Min Magnitude</label>
+                                    <input type="number" step="0.1" class="form-control" id="min_magnitude_recent" name="min_magnitude_recent" value="{{ request.form.get('min_magnitude_recent', current_config.min_magnitude_recent) }}" min="1.0" max="7.0">
+                                </div>
+                            </div>
+                            
+                            <div class="row mb-3">
+                                <div class="col-6">
+                                    <label for="days_historical" class="form-label">Historical Days</label>
+                                    <input type="number" class="form-control" id="days_historical" name="days_historical" value="{{ request.form.get('days_historical', current_config.days_historical) }}" min="7" max="1825">
+                                </div>
+                                <div class="col-6">
+                                    <label for="min_magnitude_historical" class="form-label">Min Magnitude</label>
+                                    <input type="number" step="0.1" class="form-control" id="min_magnitude_historical" name="min_magnitude_historical" value="{{ request.form.get('min_magnitude_historical', current_config.min_magnitude_historical) }}" min="1.0" max="7.0">
+                                </div>
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="alert_threshold_magnitude" class="form-label">Alert Threshold (M ≥)</label>
+                                <input type="number" step="0.1" class="form-control" id="alert_threshold_magnitude" name="alert_threshold_magnitude" value="{{ request.form.get('alert_threshold_magnitude', current_config.alert_threshold_magnitude) }}" min="2.0" max="7.0">
+                            </div>
+
+                            <div class="form-check form-switch mb-3">
+                                <input class="form-check-input" type="checkbox" id="show_tectonic_plates" name="show_tectonic_plates" value="True" {% if current_config.show_tectonic_plates %}checked{% endif %}>
+                                <label class="form-check-label" for="show_tectonic_plates">Show Tectonic Plates</label>
+                            </div>
+                             
+                            <div class="form-check form-switch mb-4">
+                                <input class="form-check-input" type="checkbox" id="enable_ai_interpretation" name="enable_ai_interpretation" value="True" {% if current_config.enable_ai_interpretation %}checked{% endif %}>
+                                <label class="form-check-label" for="enable_ai_interpretation">Enable AI Interpretation</label>
+                            </div>
+
+                            <button type="submit" class="btn btn-primary w-100 py-2" id="runAnalysisBtn"> {# Added id="runAnalysisBtn" #}
+                                <i class="fas fa-sync-alt me-2"></i> Run Analysis
+                            </button>
+                        </form>
+                    </div>
+                </div>
+
+                <!-- Recent Activity Card - Adjusted Structure -->
+                <div class="card">
+                    <div class="card-header">
+                        <i class="fas fa-chart-line"></i> Recent Activity (Last {{ current_config.days_recent }} days)
+                    </div>
+                    <div class="card-body {% if recent_df is defined and not recent_df.empty %}p-0{% else %}py-3{% endif %}">
+                        {% if recent_df is defined and not recent_df.empty %}
+                            <table class="table table-recent mb-0">
+                                <thead>
+                                    <tr>
+                                        <th>Time</th>
+                                        <th>Mag</th>
+                                        <th>Location</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                {% for index, row in recent_df.head(5).iterrows() %}
+                                    <tr>
+                                        <td class="small">{{ row.time.strftime('%m/%d %H:%M') }}</td>
+                                        <td class="fw-bold {% if row.magnitude >= 5.0 %}text-danger{% elif row.magnitude >= 4.0 %}text-warning{% endif %}">{{ "%.1f"|format(row.magnitude) }}</td>
+                                        <td class="small text-truncate" style="max-width: 120px;">{{ row.place }}</td>
+                                    </tr>
+                                {% endfor %}
+                                </tbody>
+                            </table>
+                        {% elif not initial_load %}
+                            <p class="text-center text-muted mb-0">
+                                <small>No recent quakes (M ≥ {{ "%.1f"|format(current_config.min_magnitude_recent) }}) found in the selected region and period.</small>
+                            </p>
+                        {% else %}
+                            <p class="text-center text-muted mb-0">
+                                <small>Run analysis to see recent activity.</small>
+                            </p>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+
+            <!-- Main Content -->
+            <div class="col-lg-9 col-md-12">
+                {% if map_html %}
+                <!-- Map Card -->
+                <div class="card">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <div><i class="fas fa-map-marked-alt"></i> {{ current_config.selected_region_name }}</div>
+                        {# Ensure 'now' is passed from Flask to the template #}
+                        <div class="text-muted small">Updated: {{ now.strftime('%Y-%m-%d %H:%M %Z') if now else 'N/A' }}</div>
+                    </div>
+                    <div class="card-body p-0">
+                        <div class="map-container">
+                            {{ map_html|safe }}
+                        </div>
+                    </div>
+                </div>
+                {% endif %}
+                
+                {% if recent_df is defined and not recent_df.empty %}
+                <!-- KPI Cards -->
+                <div class="row">
+                    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">
+                        <div class="card kpi-card bg-primary bg-opacity-10 text-primary">
+                            <i class="fas fa-chart-bar kpi-icon"></i>
+                            <span class="kpi-value">{{ recent_df|length }}</span>
+                            <div class="kpi-label">Recent Quakes</div>
+                            <div class="kpi-small">Past {{ current_config.days_recent }} days</div>
+                        </div>
+                    </div>
+                    
+                    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">
+                        <div class="card kpi-card {% if recent_df['magnitude'].max() >= 6.0 %}bg-danger bg-opacity-10 text-danger{% elif recent_df['magnitude'].max() >= 5.0 %}bg-warning bg-opacity-10 text-warning{% else %}bg-success bg-opacity-10 text-success{% endif %}">
+                            <i class="fas fa-ruler kpi-icon"></i>
+                            <span class="kpi-value">{{ "%.1f"|format(recent_df['magnitude'].max()) if recent_df['magnitude'].max() else 'N/A' }}</span>
+                            <div class="kpi-label">Largest Magnitude</div>
+                            <div class="kpi-small">Recent period</div>
+                        </div>
+                    </div>
+                    
+                    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">
+                        <div class="card kpi-card {% if significant_quakes|length > 0 %}bg-warning bg-opacity-10 text-warning{% else %}bg-success bg-opacity-10 text-success{% endif %}">
+                            <i class="fas fa-exclamation-triangle kpi-icon"></i>
+                            <span class="kpi-value">{{ significant_quakes|length }}</span>
+                            <div class="kpi-label">Significant Alerts</div>
+                            <div class="kpi-small">M ≥ {{ current_config.alert_threshold_magnitude }}</div>
+                        </div>
+                    </div>
+                    
+                    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">
+                        <div class="card kpi-card {% if tsunami_potential_events|length > 0 %}bg-danger bg-opacity-10 text-danger{% else %}bg-success bg-opacity-10 text-success{% endif %}">
+                            <i class="fas fa-water kpi-icon"></i>
+                            <span class="kpi-value">{{ tsunami_potential_events|length }}</span>
+                            <div class="kpi-label">Tsunami Potential</div>
+                            <div class="kpi-small">Recent period</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="row">
+                    <!-- Significant Alerts -->
+                    <div class="col-lg-7 col-md-12 mb-4">
+                        <div class="card">
+                            <div class="card-header">
+                                <i class="fas fa-exclamation-circle"></i> Significant Alerts
+                            </div>
+                            <div class="card-body">
+                                {% if significant_quakes %}
+                                    {% for quake in significant_quakes[:5] %}
+                                    <div class="recent-quake {% if quake.tsunami_risk_info %}tsunami-risk{% endif %}">
+                                        <div class="d-flex align-items-center mb-2">
+                                            <span class="magnitude-badge {% if quake.magnitude >= 6.0 %}magnitude-high{% elif quake.magnitude >= 5.0 %}magnitude-med{% endif %}">
+                                                {{ "%.1f"|format(quake.magnitude) }}
+                                            </span>
+                                            <div>
+                                                <div class="fw-bold">{{ quake.place }}</div>
+                                                <div class="small text-muted">{{ quake.time.strftime('%Y-%m-%d %H:%M:%S %Z') }}</div>
+                                            </div>
+                                        </div>
+                                        <div class="d-flex justify-content-between align-items-center">
+                                            <span class="small text-muted">Depth: {{ "%.1f"|format(quake.depth) }} km</span>
+                                            <div>
+                                                {% if quake.tsunami_risk_info %}
+                                                <span class="tsunami-badge me-2">
+                                                    <i class="fas fa-water me-1"></i> Tsunami Risk
+                                                </span>
+                                                {% endif %}
+                                                <a href="{{ quake.url }}" target="_blank" class="btn btn-sm btn-outline-primary">
+                                                    <i class="fas fa-external-link-alt me-1"></i> Details
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    {% endfor %}
+                                    {% if significant_quakes|length > 5 %}
+                                    <div class="text-center mt-2">
+                                        <small class="text-muted">+ {{ significant_quakes|length - 5 }} more alerts</small>
+                                    </div>
+                                    {% endif %}
+                                {% else %}
+                                    <div class="text-center py-4">
+                                        <i class="fas fa-check-circle fa-3x text-muted mb-3"></i>
+                                        <p>No significant alerts for the current criteria</p>
+                                    </div>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- AI Interpretation -->
+                    <div class="col-lg-5 col-md-12 mb-4">
+                        <div class="card">
+                            <div class="card-header">
+                                <i class="fas fa-robot"></i> AI Analysis
+                            </div>
+                            <div class="card-body">
+                                {% if ai_interpretation %}
+                                    <div class="ai-interpretation">
+                                        {{ ai_interpretation|replace('\n', '<br>')|safe }}
+                                    </div>
+                                    <div class="text-center mt-2">
+                                        <small class="text-muted"><i class="fas fa-info-circle me-1"></i> AI interpretation is based on limited data and is experimental</small>
+                                    </div>
+                                {% elif current_config.enable_ai_interpretation and not initial_load %}
+                                    <div class="text-center py-4">
+                                        <i class="fas fa-exclamation-circle fa-3x text-warning mb-3"></i>
+                                        <p>AI Interpretation was enabled, but could not be generated</p>
+                                        <small class="text-muted">Check API key configuration or data availability</small>
+                                    </div>
+                                {% else %}
+                                    <div class="text-center py-4">
+                                        <i class="fas fa-toggle-off fa-3x text-muted mb-3"></i>
+                                        <p>AI Interpretation is disabled</p>
+                                        <small class="text-muted">Enable it in configuration settings</small>
+                                    </div>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% elif not initial_load %}
+                <!-- No Data Message -->
+                <div class="card mb-4">
+                    <div class="card-body text-center py-5">
+                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
+                        <h3>No Earthquake Data Found</h3>
+                        <p class="text-muted">No data matches your current filter criteria. Try adjusting your parameters and run the analysis again.</p>
+                    </div>
+                </div>
+                {% else %}
+                <!-- Initial Welcome Screen -->
+                <div class="card">
+                    <div class="card-body text-center py-5">
+                        <i class="fas fa-globe-asia fa-4x text-primary mb-4"></i>
+                        <h2>Welcome to Seismic Monitor Pro</h2>
+                        <p class="lead mb-4">Configure your analysis parameters and click "Run Analysis" to begin exploring earthquake data.</p>
+                        <div class="text-start mx-auto" style="max-width: 500px;">
+                            <h5><i class="fas fa-check-circle text-success me-2"></i> Features</h5>
+                            <ul class="text-muted">
+                                <li>Interactive earthquake map with historical heatmap</li>
+                                <li>Real-time seismic alerts and potential tsunami warnings</li>
+                                <li>AI-powered data interpretation and risk assessment</li>
+                                <li>Customizable analysis parameters for specific regions</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+    <!-- About Modal -->
+    <div class="modal fade" id="aboutModal" tabindex="-1" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"><i class="fas fa-info-circle me-2"></i>About This Dashboard</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p><strong>Seismic Monitor Pro</strong> is an advanced earthquake monitoring tool focused on the Indian subcontinent and surrounding regions.</p>
+                    <p>The data is sourced directly from USGS earthquake feeds and refreshed each time you run an analysis.</p>
+                    <h6 class="mt-4 mb-2">Key Features:</h6>
+                    <ul>
+                        <li>Interactive mapping with tectonic plate visualization</li>
+                        <li>Historical and recent earthquake data analysis</li>
+                        <li>Automated tsunami potential detection</li>
+                        <li>AI-powered seismic activity interpretation</li>
+                    </ul>
+                    <div class="alert alert-warning-custom mt-3">
+                        <strong>Disclaimer:</strong> This tool is for informational purposes only. Always refer to official government sources for emergency information.
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Make KPI cards responsive on smaller screens
+            const resizeKpiCards = () => {
+                const windowWidth = window.innerWidth;
+                if (windowWidth < 768) {
+                    document.querySelectorAll('.kpi-value').forEach(el => {
+                        el.style.fontSize = '1.5rem';
+                    });
+                } else {
+                    document.querySelectorAll('.kpi-value').forEach(el => {
+                        el.style.fontSize = '2rem';
+                    });
+                }
+            };
+            
+            // Run on initial load and when window is resized
+            resizeKpiCards();
+            window.addEventListener('resize', resizeKpiCards);
+
+            // Handle "Run Analysis" button loading state
+            const analysisForm = document.getElementById('analysisForm');
+            if (analysisForm) {
+                analysisForm.addEventListener('submit', function() {
+                    const btn = document.getElementById('runAnalysisBtn');
+                    if (btn) {
+                        btn.disabled = true;
+                        btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Analyzing...';
+                    }
+                });
+            }
+        });
+    </script>
+</body>
+</html>