Spaces:
Sleeping
Sleeping
| <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/[email protected]/dist/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/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 ; | |
| } | |
| .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/[email protected]/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/[email protected]/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> |