|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>GeoSafe Construct | Professional AI Safety Analyzer</title> |
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.css"> |
|
|
|
|
|
<style> |
|
|
:root { |
|
|
--primary-blue: #0072ff; |
|
|
--primary-blue-dark: #005fcc; |
|
|
--secondary-blue: #00c6ff; |
|
|
--text-dark: #1f2937; |
|
|
--text-medium: #4b5563; |
|
|
--text-light: #6b7280; |
|
|
--card-bg: #ffffff; |
|
|
--body-bg: #f8f9fa; |
|
|
--border-color: #dee2e6; |
|
|
--success-bg: #e6f7f0; --success-text: #0a6847; --success-border: #b3e0c8; |
|
|
--warning-bg: #fff8e1; --warning-text: #795502; --warning-border: #ffecb3; |
|
|
--danger-bg: #fdecea; --danger-text: #8c1c13; --danger-border: #f9c1ba; |
|
|
--info-bg: #e0f7fa; --info-text: #006064; --info-border: #b2ebf2; |
|
|
--neutral-bg: #f1f3f5; --neutral-text: #495057; --neutral-border: #ced4da; |
|
|
} |
|
|
|
|
|
body { font-family: 'Inter', sans-serif; background-color: var(--body-bg); color: var(--text-dark); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } |
|
|
.app-header { background: linear-gradient(135deg, var(--secondary-blue) 0%, var(--primary-blue) 100%); color: white; padding: 2rem 0; margin-bottom: 2.5rem; box-shadow: 0 4px 12px rgba(0,114,255,0.2); } |
|
|
.app-header h1 { text-shadow: 0 1px 2px rgba(0,0,0,0.15); font-weight: 800; } |
|
|
.app-header p { opacity: 0.9; } |
|
|
|
|
|
.map-container { border-radius: 0.625rem; border: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; } |
|
|
#input-map { height: 280px; cursor: crosshair; } |
|
|
#results-map { height: 400px; } |
|
|
|
|
|
.leaflet-popup-content-wrapper { border-radius: 0.5rem; background: var(--card-bg); box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: 1px solid var(--border-color); } |
|
|
.leaflet-popup-content { margin: 15px !important; font-size: 0.875rem; color: var(--text-dark); } |
|
|
|
|
|
.risk-badge { padding: 0.3rem 0.8rem; border-radius: 9999px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.75px; display: inline-block; border: 1px solid; line-height: 1; } |
|
|
.risk-low, .risk-negligible, .risk-stable { background-color: var(--success-bg); color: var(--success-text); border-color: var(--success-border); } |
|
|
.risk-medium, .risk-moderately_stable { background-color: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); } |
|
|
.risk-high, .risk-very_high, .risk-unstable { background-color: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); } |
|
|
.risk-not_assessed, .risk-requires_investigation, .risk-variable { background-color: var(--neutral-bg); color: var(--neutral-text); border-color: var(--neutral-border); } |
|
|
|
|
|
.score-gauge-container { text-align: center; margin-bottom: 1.5rem; } |
|
|
.score-gauge { position: relative; width: 200px; height: 100px; overflow: hidden; margin: 0 auto 0.75rem auto; } |
|
|
.score-gauge-bg { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(from 180deg, #EF4444 0%, #EF4444 16.67%, #F59E0B 16.67%, #F59E0B 33.33%, #10B981 33.33%, #10B981 50%, var(--body-bg) 50.01%, var(--body-bg) 100%); position: absolute; top: 0; left: 0; } |
|
|
.score-gauge-meter { width: 200px; height: 200px; border-radius: 50%; background: var(--card-bg); position: absolute; top: 0; left: 0; transform-origin: center center; transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); transform: rotate(0deg); } |
|
|
.score-gauge-overlay { width: 160px; height: 80px; background: var(--card-bg); border-radius: 160px 160px 0 0 / 80px 80px 0 0; position: absolute; bottom: 0; left: 20px; } |
|
|
.safety-score-value-display { font-size: 3.25rem; font-weight: 800; line-height: 1; margin-top: 0.25rem; transition: color 0.5s; } |
|
|
.safety-score-label-display { font-size: 0.8rem; color: var(--text-medium); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; } |
|
|
|
|
|
.card { background-color: var(--card-bg); border-radius: 0.875rem; box-shadow: 0 5px 15px rgba(0,0,0,0.06); padding: 2rem; margin-bottom: 2.5rem; border: 1px solid var(--border-color); transition: all 0.3s ease-in-out; } |
|
|
.card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); transform: translateY(-3px); } |
|
|
.card h2 { font-size: 1.5rem; font-weight: 700; } .card h3 { font-size: 1.2rem; font-weight: 600; } |
|
|
.card p, .card li, .card span { color: var(--text-medium); line-height: 1.65; } |
|
|
.card strong { color: var(--text-dark); font-weight: 600; } .card .text-xs { color: var(--text-light); } |
|
|
|
|
|
.btn { padding: 0.875rem 1.75rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.25s ease-in-out; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.875rem; } |
|
|
.btn-primary { background-color: var(--primary-blue); color: white; box-shadow: 0 2px 5px rgba(0,114,255,0.2); } |
|
|
.btn-primary:hover { background-color: var(--primary-blue-dark); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,114,255,0.3); } |
|
|
.btn-primary:disabled { background-color: #a0cfff; box-shadow: none; transform: none; cursor: not-allowed; } |
|
|
.btn-secondary { background-color: var(--card-bg); border-color: var(--border-color); color: var(--primary-blue); } |
|
|
.btn-secondary:hover { background-color: #f0f6ff; border-color: var(--primary-blue); color: var(--primary-blue-dark); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); } |
|
|
|
|
|
.icon-style { width: 1.125rem; height: 1.125rem; margin-right: 0.75rem; vertical-align: middle; } |
|
|
.btn-spinner { width: 1.25em; height: 1.25em; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.65s linear infinite; margin-left: 0.75em; } |
|
|
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
|
|
|
|
|
#analysis-overlay { |
|
|
position: fixed; inset: 0; |
|
|
background-color: rgba(0,0,0,0.35); |
|
|
backdrop-filter: blur(8px); |
|
|
display: flex; align-items: center; justify-content: center; |
|
|
z-index: 10000; |
|
|
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; |
|
|
visibility: hidden; opacity: 0; |
|
|
} |
|
|
#analysis-overlay.visible { visibility: visible; opacity: 1; } |
|
|
|
|
|
input[type="number"], input[type="text"] { border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 0.875rem 1.125rem; color: var(--text-dark); width: 100%; background-color: #fff; transition: border-color 0.2s, box-shadow 0.2s; font-size: 0.9375rem; } |
|
|
input[type="number"]:focus, input[type="text"]:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(0, 114, 255, 0.2); outline: none; } |
|
|
label { color: var(--text-medium); font-weight: 500; margin-bottom: 0.5rem; display: block; font-size: 0.875rem; } |
|
|
.input-group { position: relative; } |
|
|
.input-group .btn { position: absolute; right: 0.375rem; top: 50%; transform: translateY(-50%); padding: 0.625rem 1rem; font-size: 0.8rem; } |
|
|
|
|
|
.accordion-item { border-bottom: 1px solid var(--border-color); } |
|
|
.accordion-item:last-child { border-bottom: none; } |
|
|
.accordion-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 0.75rem; cursor: pointer; transition: background-color 0.25s, color 0.25s; border-radius: 0.375rem; margin: 0.25rem 0; } |
|
|
.accordion-header:hover { background-color: #eef2ff; color: var(--primary-blue-dark); } |
|
|
.accordion-header.open { background-color: #e0e7ff; color: var(--primary-blue-dark); } |
|
|
.accordion-header h3 { margin-bottom: 0; transition: color 0.25s; } |
|
|
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s cubic-bezier(0.4, 0, 0.2, 1); padding: 0 0.75rem; } |
|
|
|
|
|
.accordion-arrow { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); font-size: 1.2rem; color: var(--primary-blue); } |
|
|
.accordion-header.open .accordion-arrow { transform: rotate(90deg); } |
|
|
|
|
|
.custom-list li { padding-left: 1.75em; position: relative; margin-bottom: 0.625em; } |
|
|
.custom-list li::before { font-family: 'simple-line-icons'; position: absolute; left: 0; top: 2px; font-size: 1em; transition: color 0.2s; } |
|
|
#mitigation-recommendations-list li::before { content: "\e080"; color: var(--success-text); } |
|
|
#key-risk-factors-summary li::before { content: "\e090"; color: var(--danger-text); } |
|
|
#further-investigations-list li::before { content: "\e003"; color: var(--warning-text); } |
|
|
|
|
|
|
|
|
.risk-detail-item { padding: 0.75rem 0; border-bottom: 1px dashed #e5e7eb; } |
|
|
.risk-detail-item:last-child { border-bottom: none; } |
|
|
.risk-detail-item strong { display: block; margin-bottom: 0.25rem; } |
|
|
.risk-detail-item .text-xs { margin-top: 0.25rem; } |
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body class="antialiased"> |
|
|
|
|
|
<header class="app-header"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<div class="inline-flex items-center p-2 rounded-lg"> |
|
|
<i class="icon-shield text-4xl mr-3"></i> |
|
|
<h1 class="text-4xl sm:text-5xl tracking-tight">GeoSafe Construct</h1> |
|
|
</div> |
|
|
<p class="mt-2 text-lg">Professional AI-Powered Construction Site Safety Analysis</p> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="container mx-auto px-4 w-full max-w-3xl pb-16"> |
|
|
|
|
|
<section id="input-section" class="card !pt-8"> |
|
|
<h2 class="text-2xl font-bold mb-8 text-center text-gray-700">Define Site for Analysis</h2> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="location-query">Search Location (e.g., "Eiffel Tower, Paris" or Address):</label> |
|
|
<div class="input-group"> |
|
|
<input type="text" id="location-query" placeholder="Enter address or place name..."> |
|
|
<button id="search-location-button" class="btn btn-secondary !py-3"> |
|
|
<i class="icon-magnifier mr-1"></i> Search |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-center text-sm text-gray-500 my-4">OR ENTER COORDINATES / CLICK MAP</p> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-5 mb-5"> |
|
|
<div> |
|
|
<label for="latitude">Latitude:</label> |
|
|
<input type="number" id="latitude" name="latitude" step="any" value="18.520962" placeholder="e.g., 18.520962"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="longitude">Longitude:</label> |
|
|
<input type="number" id="longitude" name="longitude" step="any" value="73.857672" placeholder="e.g., 73.857672"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label>Select precise location by clicking on the map:</label> |
|
|
<div class="map-container"> |
|
|
<div id="input-map"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row justify-center items-center gap-4 mt-8"> |
|
|
<button id="analyze-button" class="btn btn-primary w-full sm:w-auto"> |
|
|
<span id="button-text">Analyze Location</span> |
|
|
<i id="analyze-icon" class="icon-paper-plane ml-2"></i> |
|
|
<div id="button-spinner" class="btn-spinner hidden"></div> |
|
|
</button> |
|
|
<button id="use-my-location" class="btn btn-secondary w-full sm:w-auto"> |
|
|
<i class="icon-location-pin mr-2"></i> |
|
|
Use My Current Location |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<div id="analysis-overlay" class="fixed inset-0 flex items-center justify-start px-10"> |
|
|
<div class="bg-white p-10 rounded-xl shadow-2xl text-left"> |
|
|
<div class="w-16 h-16 border-6 border-blue-500 border-t-transparent rounded-full animate-spin mb-6"></div> |
|
|
<p class="text-2xl font-semibold text-gray-700">Analyzing Location Data...</p> |
|
|
<p class="text-lg text-gray-500 mt-2">This may take a few moments.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="error-message-container" class="hidden my-6 p-5 border-l-4 rounded-md shadow-md"> {/* Base classes, specific colors in JS */} |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="icon-info text-2xl"></i> {/* Icon class will be set by JS */} |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-bold">Notice</h3> {/* Title will be set by JS */} |
|
|
<div class="mt-2 text-md"> |
|
|
<p id="error-text"></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<section id="results-section" class="hidden"> |
|
|
|
|
|
<div class="card"> |
|
|
<div class="flex flex-col sm:flex-row justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold" id="location-name-display">Site Assessment</h2> |
|
|
<p class="text-md text-gray-500" id="current-coords-display">Lat: N/A, Lon: N/A</p> |
|
|
</div> |
|
|
<span id="suitability-badge" class="mt-2 sm:mt-0 px-4 py-2 text-md font-semibold rounded-full self-start sm:self-center">N/A</span> |
|
|
</div> |
|
|
|
|
|
<div class="score-gauge-container mt-4 mb-5"> |
|
|
<div class="score-gauge"> |
|
|
<div class="score-gauge-bg"></div> |
|
|
<div id="score-gauge-meter-dynamic" class="score-gauge-meter"></div> |
|
|
<div class="score-gauge-overlay"></div> |
|
|
</div> |
|
|
<div id="safety-score-value-display" class="safety-score-value-display">N/A</div> |
|
|
<div class="safety-score-label-display">Overall Safety Score</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Assessment Summary:</h3> |
|
|
<p id="summary-assessment" class="text-md leading-relaxed">Loading assessment...</p> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h3 class="text-xl font-semibold mb-1">Suitability:</h3> |
|
|
<p id="suitability-statement" class="text-md font-bold">N/A</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h2 class="text-2xl font-bold mb-6">Detailed Risk Analysis</h2> |
|
|
|
|
|
<div class="accordion-item"> |
|
|
<div class="accordion-header"> |
|
|
<h3 class="text-xl flex items-center text-red-700"><i class="icon-layers mr-3"></i>Geological Risks</h3> |
|
|
<i class="icon-arrow-right accordion-arrow"></i> |
|
|
</div> |
|
|
<div class="accordion-content"> |
|
|
<div class="space-y-5 p-3"> |
|
|
<div id="earthquake-risk-details" class="risk-detail-item"></div> |
|
|
<div id="landslide-risk-details" class="risk-detail-item"></div> |
|
|
<div id="soil-stability-details" class="risk-detail-item"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="accordion-item"> |
|
|
<div class="accordion-header"> |
|
|
<h3 class="text-xl flex items-center text-blue-700"><i class="icon-drop mr-3"></i>Hydrological Risks</h3> |
|
|
<i class="icon-arrow-right accordion-arrow"></i> |
|
|
</div> |
|
|
<div class="accordion-content"> |
|
|
<div class="space-y-5 p-3"> |
|
|
<div id="flood-risk-details" class="risk-detail-item"></div> |
|
|
<div id="tsunami-risk-details" class="hidden risk-detail-item"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="other-environmental-risks-accordion" class="accordion-item hidden"> |
|
|
<div class="accordion-header"> |
|
|
<h3 class="text-xl flex items-center text-purple-700"><i class="icon-globe-alt mr-3"></i>Other Environmental Risks</h3> |
|
|
<i class="icon-arrow-right accordion-arrow"></i> |
|
|
</div> |
|
|
<div class="accordion-content"> |
|
|
<div id="other-environmental-risks-list" class="space-y-5 p-3"></div> |
|
|
</div> |
|
|
</div> |
|
|
<hr class="my-8 border-gray-200"> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-3 flex items-center"><i class="icon-flag mr-3 text-red-600"></i>Key Risk Factors:</h3> |
|
|
<ul id="key-risk-factors-summary" class="custom-list space-y-2 text-md"></ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h2 class="text-2xl font-bold mb-6">Recommendations & Further Actions</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center text-green-700"> |
|
|
<i class="icon-check mr-3"></i>Mitigation Recommendations |
|
|
</h3> |
|
|
<ul id="mitigation-recommendations-list" class="custom-list space-y-2 text-md"></ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-4 flex items-center text-yellow-700"> |
|
|
<i class="icon-magnifier-add mr-3"></i>Further Investigations Needed |
|
|
</h3> |
|
|
<ul id="further-investigations-list" class="custom-list space-y-2 text-md"></ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h2 class="text-2xl font-bold mb-5">Site Map & Alternatives Overview</h2> |
|
|
<div class="map-container"> |
|
|
<div id="results-map"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="alternative-locations-section" class="card hidden"> |
|
|
<h2 class="text-2xl font-bold mb-5 flex items-center"> |
|
|
<i class="icon-directions mr-3 text-blue-600"></i>Alternative Location Analysis |
|
|
</h2> |
|
|
<div id="alternative-locations-container" class="space-y-6"> |
|
|
<p class="text-md text-gray-500">No significantly better alternatives identified or loading...</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card text-md"> |
|
|
<p><strong>Data Confidence:</strong> <span id="data-confidence" class="font-semibold">N/A</span></p> |
|
|
<p id="disclaimer-text" class="mt-3 text-sm text-gray-500 italic">Disclaimer will be loaded here.</p> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> |
|
|
|
|
|
<script> |
|
|
|
|
|
const createIcon = (color) => L.icon({ |
|
|
iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${color}.png`, |
|
|
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', |
|
|
iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] |
|
|
}); |
|
|
const primaryLocationIcon = createIcon('blue'); |
|
|
const saferAlternativeIcon = createIcon('green'); |
|
|
const otherAlternativeIcon = createIcon('orange'); |
|
|
const selectionIcon = createIcon('red'); |
|
|
|
|
|
|
|
|
let inputMap, resultsMap, inputMarker, currentResultMarker; |
|
|
const alternativeMarkers = []; |
|
|
|
|
|
const latitudeInput = document.getElementById('latitude'); |
|
|
const longitudeInput = document.getElementById('longitude'); |
|
|
const locationQueryInput = document.getElementById('location-query'); |
|
|
const searchLocationButton = document.getElementById('search-location-button'); |
|
|
const analyzeButton = document.getElementById('analyze-button'); |
|
|
const buttonText = document.getElementById('button-text'); |
|
|
const buttonSpinner = document.getElementById('button-spinner'); |
|
|
const analyzeIcon = document.getElementById('analyze-icon'); |
|
|
const useMyLocationButton = document.getElementById('use-my-location'); |
|
|
|
|
|
const resultsSection = document.getElementById('results-section'); |
|
|
const analysisOverlay = document.getElementById('analysis-overlay'); |
|
|
const errorMessageContainer = document.getElementById('error-message-container'); |
|
|
const errorText = document.getElementById('error-text'); |
|
|
|
|
|
const locationNameDisplay = document.getElementById('location-name-display'); |
|
|
const currentCoordsDisplay = document.getElementById('current-coords-display'); |
|
|
const suitabilityBadge = document.getElementById('suitability-badge'); |
|
|
const scoreValueDisplay = document.getElementById('safety-score-value-display'); |
|
|
const summaryAssessmentP = document.getElementById('summary-assessment'); |
|
|
const suitabilityStatementP = document.getElementById('suitability-statement'); |
|
|
|
|
|
const earthquakeRiskDetailsDiv = document.getElementById('earthquake-risk-details'); |
|
|
const landslideRiskDetailsDiv = document.getElementById('landslide-risk-details'); |
|
|
const soilStabilityDetailsDiv = document.getElementById('soil-stability-details'); |
|
|
const floodRiskDetailsDiv = document.getElementById('flood-risk-details'); |
|
|
const tsunamiRiskDetailsDiv = document.getElementById('tsunami-risk-details'); |
|
|
const otherEnvRisksAccordion = document.getElementById('other-environmental-risks-accordion'); |
|
|
const otherEnvRisksList = document.getElementById('other-environmental-risks-list'); |
|
|
const keyRiskFactorsUl = document.getElementById('key-risk-factors-summary'); |
|
|
const mitigationRecommendationsUl = document.getElementById('mitigation-recommendations-list'); |
|
|
const furtherInvestigationsUl = document.getElementById('further-investigations-list'); |
|
|
const altLocationsSection = document.getElementById('alternative-locations-section'); |
|
|
const altLocationsContainer = document.getElementById('alternative-locations-container'); |
|
|
const dataConfidenceSpan = document.getElementById('data-confidence'); |
|
|
const disclaimerP = document.getElementById('disclaimer-text'); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
analysisOverlay.classList.remove('visible'); |
|
|
|
|
|
inputMap = L.map('input-map', { scrollWheelZoom: true, attributionControl: false }).setView([18.520962, 73.857672], 12); |
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, opacity: 0.9 }).addTo(inputMap); |
|
|
L.control.attribution({prefix: false}).addTo(inputMap); |
|
|
updateInputMarker(18.520962, 73.857672); |
|
|
|
|
|
inputMap.on('click', function(e) { |
|
|
const lat = e.latlng.lat; |
|
|
const lon = e.latlng.lng; |
|
|
latitudeInput.value = lat.toFixed(6); |
|
|
longitudeInput.value = lon.toFixed(6); |
|
|
updateInputMarker(lat, lon); |
|
|
locationQueryInput.value = ''; |
|
|
}); |
|
|
|
|
|
resultsMap = L.map('results-map', { scrollWheelZoom: false, attributionControl: false }).setView([20.5937, 78.9629], 5); |
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, opacity: 0.9 }).addTo(resultsMap); |
|
|
L.control.attribution({prefix: false}).addTo(resultsMap); |
|
|
|
|
|
searchLocationButton.addEventListener('click', handleLocationSearch); |
|
|
locationQueryInput.addEventListener('keypress', e => { if (e.key === 'Enter') handleLocationSearch(); }); |
|
|
analyzeButton.addEventListener('click', handleAnalysis); |
|
|
useMyLocationButton.addEventListener('click', getUserLocationAndAnalyze); |
|
|
|
|
|
document.querySelectorAll('.accordion-header').forEach(header => { |
|
|
header.addEventListener('click', () => { |
|
|
const content = header.nextElementSibling; |
|
|
header.classList.toggle('open'); |
|
|
|
|
|
if (content.style.maxHeight && content.style.maxHeight !== "0px") { |
|
|
content.style.maxHeight = "0px"; |
|
|
content.style.paddingTop = "0px"; |
|
|
content.style.paddingBottom = "0px"; |
|
|
} else { |
|
|
content.style.maxHeight = content.scrollHeight + "px"; |
|
|
content.style.paddingTop = "1rem"; |
|
|
content.style.paddingBottom = "1rem"; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateInputMarker(lat, lon, zoomLevel = 13) { |
|
|
if (inputMarker) inputMap.removeLayer(inputMarker); |
|
|
inputMarker = L.marker([lat, lon], {icon: selectionIcon}).addTo(inputMap); |
|
|
inputMap.setView([lat, lon], zoomLevel, {animate: true}); |
|
|
} |
|
|
|
|
|
async function handleLocationSearch() { |
|
|
const query = locationQueryInput.value.trim(); |
|
|
if (!query) { displayError("Please enter a location to search."); return; } |
|
|
|
|
|
searchLocationButton.disabled = true; |
|
|
const originalSearchHTML = searchLocationButton.innerHTML; |
|
|
searchLocationButton.innerHTML = `<div class="btn-spinner !ml-0 !mr-0 !w-4 !h-4"></div>`; |
|
|
|
|
|
try { |
|
|
const response = await fetch('/api/geocode', { |
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query }) |
|
|
}); |
|
|
const data = await response.json(); |
|
|
if (!response.ok || data.error) throw new Error(data.error || "Location not found."); |
|
|
|
|
|
latitudeInput.value = parseFloat(data.latitude).toFixed(6); |
|
|
longitudeInput.value = parseFloat(data.longitude).toFixed(6); |
|
|
updateInputMarker(data.latitude, data.longitude, 15); |
|
|
locationQueryInput.value = data.display_name; |
|
|
hideError(); |
|
|
} catch (error) { |
|
|
console.error("Geocoding error:", error); |
|
|
displayError(error.message); |
|
|
} finally { |
|
|
searchLocationButton.disabled = false; |
|
|
searchLocationButton.innerHTML = originalSearchHTML; |
|
|
} |
|
|
} |
|
|
|
|
|
function showLoadingState(isLoading) { |
|
|
if (isLoading) { |
|
|
analysisOverlay.classList.add('visible'); |
|
|
buttonText.textContent = 'Analyzing...'; |
|
|
analyzeIcon.classList.add('hidden'); |
|
|
buttonSpinner.classList.remove('hidden'); |
|
|
analyzeButton.disabled = true; |
|
|
} else { |
|
|
analysisOverlay.classList.remove('visible'); |
|
|
buttonText.textContent = 'Analyze Location'; |
|
|
analyzeIcon.classList.remove('hidden'); |
|
|
buttonSpinner.classList.add('hidden'); |
|
|
analyzeButton.disabled = false; |
|
|
} |
|
|
} |
|
|
|
|
|
function displayError(message, isWarning = false) { |
|
|
errorText.innerHTML = message; |
|
|
errorMessageContainer.classList.remove('hidden'); |
|
|
const errorIconEl = errorMessageContainer.querySelector('i'); |
|
|
const errorTitleEl = errorMessageContainer.querySelector('h3'); |
|
|
|
|
|
if (isWarning) { |
|
|
errorMessageContainer.className = 'my-6 p-5 bg-yellow-50 border-l-4 border-yellow-500 text-yellow-700 rounded-md shadow-md flex'; |
|
|
if(errorIconEl) errorIconEl.className = 'icon-info text-2xl text-yellow-500'; |
|
|
if(errorTitleEl) errorTitleEl.textContent = "Notice"; |
|
|
} else { |
|
|
errorMessageContainer.className = 'my-6 p-5 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-md shadow-md flex'; |
|
|
if(errorIconEl) errorIconEl.className = 'icon-close text-2xl text-red-500'; |
|
|
if(errorTitleEl) errorTitleEl.textContent = "Analysis Error"; |
|
|
} |
|
|
resultsSection.classList.add('hidden'); |
|
|
} |
|
|
function hideError() { errorMessageContainer.classList.add('hidden'); } |
|
|
|
|
|
async function handleAnalysis() { |
|
|
const latitude = parseFloat(latitudeInput.value); |
|
|
const longitude = parseFloat(longitudeInput.value); |
|
|
|
|
|
if (isNaN(latitude) || isNaN(longitude) || latitude < -90 || latitude > 90 || longitude < -180 || longitude > 180) { |
|
|
displayError("Valid latitude (-90 to 90) & longitude (-180 to 180) required."); return; |
|
|
} |
|
|
|
|
|
hideError(); showLoadingState(true); resultsSection.classList.add('hidden'); |
|
|
|
|
|
try { |
|
|
const response = await fetch('/api/analyze_location', { |
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ latitude, longitude }) |
|
|
}); |
|
|
const data = await response.json(); |
|
|
|
|
|
if (!response.ok) throw new Error(data.error_message || data.error || `Analysis failed: ${response.status}`); |
|
|
if (data.error_message && response.ok && !data.safety_score) { |
|
|
displayError(`<strong>Analysis Incomplete:</strong> ${data.error_message}<br>Some information may be missing or generalized. Please try a different location or refine your query.`, true); |
|
|
} |
|
|
|
|
|
resultsSection.classList.remove('hidden'); |
|
|
if (resultsMap) resultsMap.invalidateSize(); |
|
|
|
|
|
displayDetailedResults(data, latitude, longitude); |
|
|
updateResultsMap(data, latitude, longitude); |
|
|
setTimeout(() => { |
|
|
const firstResultCard = resultsSection.querySelector('.card'); |
|
|
if (firstResultCard) { |
|
|
firstResultCard.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
|
|
} |
|
|
}, 300); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Analysis error:', error); |
|
|
displayError(error.message || "Unexpected error during analysis."); |
|
|
} finally { |
|
|
showLoadingState(false); |
|
|
} |
|
|
} |
|
|
|
|
|
function getUserLocationAndAnalyze() { |
|
|
if (!navigator.geolocation) { displayError("Geolocation not supported by this browser."); return; } |
|
|
|
|
|
const originalButtonHTML = useMyLocationButton.innerHTML; |
|
|
useMyLocationButton.innerHTML = `<div class="btn-spinner !ml-0 !mr-2"></div> Locating...`; |
|
|
useMyLocationButton.disabled = true; |
|
|
|
|
|
navigator.geolocation.getCurrentPosition( |
|
|
position => { |
|
|
const { latitude: lat, longitude: lon } = position.coords; |
|
|
latitudeInput.value = lat.toFixed(6); |
|
|
longitudeInput.value = lon.toFixed(6); |
|
|
updateInputMarker(lat, lon); |
|
|
locationQueryInput.value = ''; |
|
|
useMyLocationButton.innerHTML = originalButtonHTML; |
|
|
useMyLocationButton.disabled = false; |
|
|
handleAnalysis(); |
|
|
}, |
|
|
error => { |
|
|
console.error("Geolocation error:", error); |
|
|
displayError("Could not get current location. Check browser permissions."); |
|
|
useMyLocationButton.innerHTML = originalButtonHTML; |
|
|
useMyLocationButton.disabled = false; |
|
|
}, |
|
|
{ timeout: 10000, enableHighAccuracy: true } |
|
|
); |
|
|
} |
|
|
|
|
|
function getRiskBadgeClasses(riskLevel) { |
|
|
riskLevel = riskLevel ? String(riskLevel).toLowerCase().replace(/[\s-]+/g, "_") : 'not_assessed'; |
|
|
const classMap = { 'low': 'risk-low', 'negligible': 'risk-low', 'stable': 'risk-low', 'medium': 'risk-medium', 'moderately_stable': 'risk-medium', 'high': 'risk-high', 'very_high': 'risk-high', 'unstable': 'risk-high', 'not_assessed': 'risk-not_assessed', 'requires_investigation': 'risk-not_assessed', 'variable': 'risk-not_assessed' }; |
|
|
return classMap[riskLevel] || 'risk-not_assessed'; |
|
|
} |
|
|
|
|
|
function formatRiskDetail(container, title, riskData) { |
|
|
container.innerHTML = ''; |
|
|
if (!riskData || (riskData.level === undefined && riskData.type === undefined)) { |
|
|
container.innerHTML = `<p class="text-sm text-gray-500">${title}: Data unavailable or not applicable.</p>`; return; |
|
|
} |
|
|
const level = riskData.level || riskData.type; |
|
|
let detailsHTML = `<p class="text-sm text-gray-600 leading-relaxed">${riskData.details || 'No specific details provided.'}</p>`; |
|
|
if (riskData.concerns && riskData.concerns.length > 0) { |
|
|
detailsHTML += `<ul class="list-disc list-inside text-xs text-gray-500 mt-2 pl-3 space-y-1">`; |
|
|
riskData.concerns.forEach(concern => detailsHTML += `<li>${concern}</li>`); |
|
|
detailsHTML += `</ul>`; |
|
|
} |
|
|
container.innerHTML = ` |
|
|
<div class="flex justify-between items-center mb-1.5"> |
|
|
<strong class="text-md font-medium text-gray-700">${title}</strong> |
|
|
<span class="risk-badge ${getRiskBadgeClasses(level)}">${String(level).replace(/_/g, ' ')}</span> |
|
|
</div> |
|
|
${detailsHTML} |
|
|
`; |
|
|
} |
|
|
|
|
|
function updateSafetyGauge(score) { |
|
|
const meter = document.getElementById('score-gauge-meter-dynamic'); |
|
|
score = Math.max(0, Math.min(100, parseInt(score) || 0)); |
|
|
scoreValueDisplay.textContent = score; |
|
|
const rotation = (score / 100) * 180; |
|
|
meter.style.transform = `rotate(${rotation}deg)`; |
|
|
if (score >= 70) scoreValueDisplay.style.color = '#047857'; |
|
|
else if (score >= 40) scoreValueDisplay.style.color = '#CA8A04'; |
|
|
else scoreValueDisplay.style.color = '#B91C1C'; |
|
|
} |
|
|
|
|
|
function displayDetailedResults(data, lat, lon) { |
|
|
locationNameDisplay.textContent = data.location_name || "Site Assessment"; |
|
|
currentCoordsDisplay.textContent = `Lat: ${lat.toFixed(4)}, Lon: ${lon.toFixed(4)}`; |
|
|
|
|
|
updateSafetyGauge(data.safety_score || 0); |
|
|
summaryAssessmentP.innerHTML = data.summary_assessment ? data.summary_assessment.replace(/\n/g, '<br>') : 'No summary provided.'; |
|
|
suitabilityStatementP.textContent = data.suitability_statement || 'Suitability not determined.'; |
|
|
|
|
|
const suitability = String(data.suitability_statement || "").toLowerCase(); |
|
|
let badgeClass = "px-4 py-2 text-md font-semibold rounded-full self-start sm:self-center transition-all duration-300 "; |
|
|
if (suitability.includes("suitable") || suitability.includes("recommended")) badgeClass += "bg-green-100 text-green-700 border border-green-300"; |
|
|
else if (suitability.includes("caution") || suitability.includes("concerns") || suitability.includes("mitigation")) badgeClass += "bg-yellow-100 text-yellow-700 border border-yellow-300"; |
|
|
else if (suitability.includes("not recommended") || suitability.includes("unsuitable") || suitability.includes("incomplete") || suitability.includes("major intervention")) badgeClass += "bg-red-100 text-red-700 border border-red-300"; |
|
|
else badgeClass += "bg-gray-100 text-gray-700 border border-gray-300"; |
|
|
suitabilityBadge.className = badgeClass; |
|
|
suitabilityBadge.textContent = data.suitability_statement ? (data.suitability_statement.split(' ')[0] + (data.suitability_statement.split(' ')[1] ? ' ' + data.suitability_statement.split(' ')[1] : '')) : "Pending"; |
|
|
|
|
|
|
|
|
formatRiskDetail(earthquakeRiskDetailsDiv, 'Earthquake', data.geological_risks?.earthquake_risk); |
|
|
formatRiskDetail(landslideRiskDetailsDiv, 'Landslide', data.geological_risks?.landslide_risk); |
|
|
formatRiskDetail(soilStabilityDetailsDiv, 'Soil Stability', data.geological_risks?.soil_stability); |
|
|
|
|
|
formatRiskDetail(floodRiskDetailsDiv, 'Flood', data.hydrological_risks?.flood_risk); |
|
|
if (data.hydrological_risks?.tsunami_risk && data.hydrological_risks.tsunami_risk.level && data.hydrological_risks.tsunami_risk.level.toLowerCase() !== 'negligible') { |
|
|
formatRiskDetail(tsunamiRiskDetailsDiv, 'Tsunami', data.hydrological_risks.tsunami_risk); |
|
|
tsunamiRiskDetailsDiv.classList.remove('hidden'); |
|
|
} else { tsunamiRiskDetailsDiv.classList.add('hidden'); } |
|
|
|
|
|
otherEnvRisksList.innerHTML = ''; |
|
|
if (data.other_environmental_risks && data.other_environmental_risks.length > 0) { |
|
|
data.other_environmental_risks.forEach(risk => { |
|
|
const riskDiv = document.createElement('div'); |
|
|
riskDiv.className = 'risk-detail-item'; |
|
|
formatRiskDetail(riskDiv, risk.type, risk); |
|
|
otherEnvRisksList.appendChild(riskDiv); |
|
|
}); |
|
|
otherEnvRisksAccordion.classList.remove('hidden'); |
|
|
} else { otherEnvRisksAccordion.classList.add('hidden'); } |
|
|
|
|
|
updateList(keyRiskFactorsUl, data.key_risk_factors_summary, 'No specific key risk factors highlighted.'); |
|
|
updateList(mitigationRecommendationsUl, data.mitigation_recommendations, 'No specific mitigation strategies provided.'); |
|
|
updateList(furtherInvestigationsUl, data.further_investigations_needed, 'No specific further investigations suggested.'); |
|
|
|
|
|
altLocationsContainer.innerHTML = ''; |
|
|
if (data.alternative_locations_analysis && data.alternative_locations_analysis.length > 0) { |
|
|
data.alternative_locations_analysis.forEach(alt => { |
|
|
const card = document.createElement('div'); |
|
|
card.className = 'p-5 rounded-lg border border-gray-200 hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 cursor-pointer bg-white hover:border-blue-400'; |
|
|
let prosConsHTML = ''; |
|
|
if ((alt.potential_pros && alt.potential_pros.length > 0) || (alt.potential_cons && alt.potential_cons.length > 0)) { |
|
|
prosConsHTML += '<div class="text-xs mt-3 pt-3 border-t border-gray-200 space-y-1.5">'; |
|
|
if (alt.potential_pros && alt.potential_pros.length) prosConsHTML += `<div><strong class="text-green-600">Pros:</strong> ${alt.potential_pros.join('; ')}</div>`; |
|
|
if (alt.potential_cons && alt.potential_cons.length) prosConsHTML += `<div><strong class="text-red-600">Cons:</strong> ${alt.potential_cons.join('; ')}</div>`; |
|
|
prosConsHTML += '</div>'; |
|
|
} |
|
|
card.innerHTML = ` |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<div> |
|
|
<h4 class="font-semibold text-blue-600 text-lg">${alt.name_suggestion || 'Alternative Site'}</h4> |
|
|
<p class="text-xs text-gray-500">${alt.actual_name || `Lat: ${parseFloat(alt.latitude).toFixed(3)}, Lon: ${parseFloat(alt.longitude).toFixed(3)}`}</p> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500 whitespace-nowrap font-medium">${alt.estimated_distance_km} km</span> |
|
|
</div> |
|
|
<div class="text-md mb-2">Est. Safety Score: <strong class="${(alt.comparative_safety_score_estimate || 0) >= 70 ? 'text-green-700' : (alt.comparative_safety_score_estimate || 0) >= 40 ? 'text-yellow-700' : 'text-red-700'}">${alt.comparative_safety_score_estimate !== undefined ? alt.comparative_safety_score_estimate : 'N/A'}</strong></div> |
|
|
<p class="text-sm text-gray-600 mb-2">${alt.brief_justification || 'General alternative suggestion.'}</p> |
|
|
${prosConsHTML} |
|
|
`; |
|
|
card.addEventListener('click', () => { |
|
|
resultsMap.setView([parseFloat(alt.latitude), parseFloat(alt.longitude)], 14, {animate: true}); |
|
|
alternativeMarkers.forEach(m => { |
|
|
const markerLatLng = m.getLatLng(); |
|
|
if (markerLatLng.lat.toFixed(4) === parseFloat(alt.latitude).toFixed(4) && markerLatLng.lng.toFixed(4) === parseFloat(alt.longitude).toFixed(4)) { |
|
|
m.openPopup(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
altLocationsContainer.appendChild(card); |
|
|
}); |
|
|
altLocationsSection.classList.remove('hidden'); |
|
|
} else { |
|
|
altLocationsContainer.innerHTML = '<p class="text-md text-gray-500">No significantly better alternative locations were identified based on the current analysis.</p>'; |
|
|
altLocationsSection.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
dataConfidenceSpan.textContent = data.data_confidence_level || 'N/A'; |
|
|
disclaimerP.textContent = data.disclaimer || 'Standard disclaimers apply. Consult professionals.'; |
|
|
} |
|
|
|
|
|
function updateList(listElement, items, emptyMessage) { |
|
|
listElement.innerHTML = ''; |
|
|
if (items && items.length > 0) { |
|
|
items.forEach(item => { |
|
|
const li = document.createElement('li'); |
|
|
li.textContent = item; |
|
|
listElement.appendChild(li); |
|
|
}); |
|
|
} else { |
|
|
const li = document.createElement('li'); |
|
|
li.textContent = emptyMessage; |
|
|
li.className = "text-gray-500 italic"; |
|
|
listElement.appendChild(li); |
|
|
} |
|
|
} |
|
|
|
|
|
function updateResultsMap(data, currentLat, currentLng) { |
|
|
if (currentResultMarker) resultsMap.removeLayer(currentResultMarker); |
|
|
alternativeMarkers.forEach(marker => resultsMap.removeLayer(marker)); |
|
|
alternativeMarkers.length = 0; |
|
|
|
|
|
currentResultMarker = L.marker([currentLat, currentLng], { icon: primaryLocationIcon, zIndexOffset: 1000 }) |
|
|
.addTo(resultsMap) |
|
|
.bindPopup(`<b>${data.location_name || 'Analyzed Location'}</b><br>Score: ${data.safety_score || 'N/A'}<br>${data.suitability_statement || ''}`) |
|
|
.openPopup(); |
|
|
|
|
|
const bounds = L.latLngBounds([[currentLat, currentLng]]); |
|
|
|
|
|
if (data.alternative_locations_analysis && data.alternative_locations_analysis.length > 0) { |
|
|
data.alternative_locations_analysis.forEach(alt => { |
|
|
try { |
|
|
const altLat = parseFloat(alt.latitude); const altLng = parseFloat(alt.longitude); |
|
|
if (isNaN(altLat) || isNaN(altLng)) { console.warn("Invalid alt coords:", alt); return; } |
|
|
const icon = (alt.comparative_safety_score_estimate || 0) > (data.safety_score || 0) + 5 ? saferAlternativeIcon : otherAlternativeIcon; |
|
|
const altMarker = L.marker([altLat, altLng], { icon: icon }) |
|
|
.addTo(resultsMap) |
|
|
.bindPopup(`<b>${alt.name_suggestion || 'Alternative'}</b> (${alt.actual_name || ''})<br>Est. Score: ${alt.comparative_safety_score_estimate || 'N/A'}<br>${alt.estimated_distance_km} km away`); |
|
|
alternativeMarkers.push(altMarker); bounds.extend([altLat, altLng]); |
|
|
} catch (e) { console.error("Error creating alt marker:", alt, e); } |
|
|
}); |
|
|
} |
|
|
|
|
|
if (bounds.isValid() && !bounds.getSouthWest().equals(bounds.getNorthEast())) { |
|
|
resultsMap.fitBounds(bounds, { padding: [60, 60], maxZoom: 14, animate: true }); |
|
|
} else { resultsMap.setView([currentLat, currentLng], 13, {animate: true}); } |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
