Update templates/index.html
Browse files- templates/index.html +727 -727
templates/index.html
CHANGED
@@ -1,728 +1,728 @@
|
|
1 |
-
<!DOCTYPE html>
|
2 |
-
<html lang="en">
|
3 |
-
<head>
|
4 |
-
<meta charset="UTF-8">
|
5 |
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
-
<title>GeoSafe Construct | Professional AI Safety Analyzer</title>
|
7 |
-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
|
8 |
-
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
|
9 |
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
10 |
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.css">
|
11 |
-
|
12 |
-
<style>
|
13 |
-
:root {
|
14 |
-
--primary-blue: #0072ff;
|
15 |
-
--primary-blue-dark: #005fcc;
|
16 |
-
--secondary-blue: #00c6ff;
|
17 |
-
--text-dark: #1f2937;
|
18 |
-
--text-medium: #4b5563;
|
19 |
-
--text-light: #6b7280;
|
20 |
-
--card-bg: #ffffff;
|
21 |
-
--body-bg: #f8f9fa;
|
22 |
-
--border-color: #dee2e6;
|
23 |
-
--success-bg: #e6f7f0; --success-text: #0a6847; --success-border: #b3e0c8; /* Softer Greens */
|
24 |
-
--warning-bg: #fff8e1; --warning-text: #795502; --warning-border: #ffecb3; /* Softer Yellows */
|
25 |
-
--danger-bg: #fdecea; --danger-text: #8c1c13; --danger-border: #f9c1ba; /* Softer Reds */
|
26 |
-
--info-bg: #e0f7fa; --info-text: #006064; --info-border: #b2ebf2; /* Softer Cyans/Blues */
|
27 |
-
--neutral-bg: #f1f3f5; --neutral-text: #495057; --neutral-border: #ced4da; /* Softer Grays */
|
28 |
-
}
|
29 |
-
|
30 |
-
body { font-family: 'Inter', sans-serif; background-color: var(--body-bg); color: var(--text-dark); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
31 |
-
.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); }
|
32 |
-
.app-header h1 { text-shadow: 0 1px 2px rgba(0,0,0,0.15); font-weight: 800; }
|
33 |
-
.app-header p { opacity: 0.9; }
|
34 |
-
|
35 |
-
.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; /* Important for border radius on map */ }
|
36 |
-
#input-map { height: 280px; cursor: crosshair; }
|
37 |
-
#results-map { height: 400px; }
|
38 |
-
|
39 |
-
.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); }
|
40 |
-
.leaflet-popup-content { margin: 15px !important; font-size: 0.875rem; color: var(--text-dark); }
|
41 |
-
|
42 |
-
.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; }
|
43 |
-
.risk-low, .risk-negligible, .risk-stable { background-color: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
|
44 |
-
.risk-medium, .risk-moderately_stable { background-color: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
|
45 |
-
.risk-high, .risk-very_high, .risk-unstable { background-color: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
|
46 |
-
.risk-not_assessed, .risk-requires_investigation, .risk-variable { background-color: var(--neutral-bg); color: var(--neutral-text); border-color: var(--neutral-border); }
|
47 |
-
|
48 |
-
.score-gauge-container { text-align: center; margin-bottom: 1.5rem; }
|
49 |
-
.score-gauge { position: relative; width: 200px; height: 100px; overflow: hidden; margin: 0 auto 0.75rem auto; }
|
50 |
-
.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; }
|
51 |
-
.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); }
|
52 |
-
.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; }
|
53 |
-
.safety-score-value-display { font-size: 3.25rem; font-weight: 800; line-height: 1; margin-top: 0.25rem; transition: color 0.5s; }
|
54 |
-
.safety-score-label-display { font-size: 0.8rem; color: var(--text-medium); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
|
55 |
-
|
56 |
-
.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; }
|
57 |
-
.card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); transform: translateY(-3px); }
|
58 |
-
.card h2 { font-size: 1.5rem; font-weight: 700; } .card h3 { font-size: 1.2rem; font-weight: 600; }
|
59 |
-
.card p, .card li, .card span { color: var(--text-medium); line-height: 1.65; }
|
60 |
-
.card strong { color: var(--text-dark); font-weight: 600; } .card .text-xs { color: var(--text-light); }
|
61 |
-
|
62 |
-
.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; }
|
63 |
-
.btn-primary { background-color: var(--primary-blue); color: white; box-shadow: 0 2px 5px rgba(0,114,255,0.2); }
|
64 |
-
.btn-primary:hover { background-color: var(--primary-blue-dark); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,114,255,0.3); }
|
65 |
-
.btn-primary:disabled { background-color: #a0cfff; box-shadow: none; transform: none; cursor: not-allowed; }
|
66 |
-
.btn-secondary { background-color: var(--card-bg); border-color: var(--border-color); color: var(--primary-blue); }
|
67 |
-
.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); }
|
68 |
-
|
69 |
-
.icon-style { width: 1.125rem; height: 1.125rem; margin-right: 0.75rem; vertical-align: middle; }
|
70 |
-
.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; }
|
71 |
-
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
72 |
-
|
73 |
-
#analysis-overlay {
|
74 |
-
position: fixed; inset: 0;
|
75 |
-
background-color: rgba(0,0,0,0.35); /* Darker overlay */
|
76 |
-
backdrop-filter: blur(8px); /* Stronger blur */
|
77 |
-
display: flex; align-items: center; justify-content: center;
|
78 |
-
z-index: 10000; /* Higher z-index */
|
79 |
-
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
|
80 |
-
visibility: hidden; opacity: 0;
|
81 |
-
}
|
82 |
-
#analysis-overlay.visible { visibility: visible; opacity: 1; }
|
83 |
-
|
84 |
-
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; }
|
85 |
-
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; }
|
86 |
-
label { color: var(--text-medium); font-weight: 500; margin-bottom: 0.5rem; display: block; font-size: 0.875rem; }
|
87 |
-
.input-group { position: relative; }
|
88 |
-
.input-group .btn { position: absolute; right: 0.375rem; top: 50%; transform: translateY(-50%); padding: 0.625rem 1rem; font-size: 0.8rem; }
|
89 |
-
|
90 |
-
.accordion-item { border-bottom: 1px solid var(--border-color); }
|
91 |
-
.accordion-item:last-child { border-bottom: none; }
|
92 |
-
.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; }
|
93 |
-
.accordion-header:hover { background-color: #eef2ff; /* Light indigo for hover */ color: var(--primary-blue-dark); }
|
94 |
-
.accordion-header.open { background-color: #e0e7ff; /* Slightly darker for open */ color: var(--primary-blue-dark); }
|
95 |
-
.accordion-header h3 { margin-bottom: 0; transition: color 0.25s; }
|
96 |
-
.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; }
|
97 |
-
/* .accordion-content.open is handled by JS by setting max-height to scrollHeight */
|
98 |
-
.accordion-arrow { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); font-size: 1.2rem; color: var(--primary-blue); }
|
99 |
-
.accordion-header.open .accordion-arrow { transform: rotate(90deg); }
|
100 |
-
|
101 |
-
.custom-list li { padding-left: 1.75em; position: relative; margin-bottom: 0.625em; }
|
102 |
-
.custom-list li::before { font-family: 'simple-line-icons'; position: absolute; left: 0; top: 2px; font-size: 1em; transition: color 0.2s; }
|
103 |
-
#mitigation-recommendations-list li::before { content: "\e080"; color: var(--success-text); } /* Check */
|
104 |
-
#key-risk-factors-summary li::before { content: "\e090"; color: var(--danger-text); } /* Exclamation */
|
105 |
-
#further-investigations-list li::before { content: "\e003"; color: var(--warning-text); } /* Magnifying glass */
|
106 |
-
|
107 |
-
/* Styling for risk detail items inside accordion */
|
108 |
-
.risk-detail-item { padding: 0.75rem 0; border-bottom: 1px dashed #e5e7eb; }
|
109 |
-
.risk-detail-item:last-child { border-bottom: none; }
|
110 |
-
.risk-detail-item strong { display: block; margin-bottom: 0.25rem; }
|
111 |
-
.risk-detail-item .text-xs { margin-top: 0.25rem; }
|
112 |
-
|
113 |
-
</style>
|
114 |
-
</head>
|
115 |
-
<body class="antialiased">
|
116 |
-
|
117 |
-
<header class="app-header">
|
118 |
-
<div class="container mx-auto px-4 text-center">
|
119 |
-
<div class="inline-flex items-center p-2 rounded-lg">
|
120 |
-
<i class="icon-shield text-4xl mr-3"></i>
|
121 |
-
<h1 class="text-4xl sm:text-5xl tracking-tight">GeoSafe Construct</h1>
|
122 |
-
</div>
|
123 |
-
<p class="mt-2 text-lg">Professional AI-Powered Construction Site Safety Analysis</p>
|
124 |
-
</div>
|
125 |
-
</header>
|
126 |
-
|
127 |
-
<div class="container mx-auto px-4 w-full max-w-3xl pb-16">
|
128 |
-
|
129 |
-
<section id="input-section" class="card !pt-8">
|
130 |
-
<h2 class="text-2xl font-bold mb-8 text-center text-gray-700">Define Site for Analysis</h2>
|
131 |
-
|
132 |
-
<div class="mb-6">
|
133 |
-
<label for="location-query">Search Location (e.g., "Eiffel Tower, Paris" or Address):</label>
|
134 |
-
<div class="input-group">
|
135 |
-
<input type="text" id="location-query" placeholder="Enter address or place name...">
|
136 |
-
<button id="search-location-button" class="btn btn-secondary !py-3">
|
137 |
-
<i class="icon-magnifier mr-1"></i> Search
|
138 |
-
</button>
|
139 |
-
</div>
|
140 |
-
</div>
|
141 |
-
<p class="text-center text-sm text-gray-500 my-4">OR ENTER COORDINATES / CLICK MAP</p>
|
142 |
-
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-5 mb-5">
|
143 |
-
<div>
|
144 |
-
<label for="latitude">Latitude:</label>
|
145 |
-
<input type="number" id="latitude" name="latitude" step="any" value="18.520962" placeholder="e.g., 18.520962">
|
146 |
-
</div>
|
147 |
-
<div>
|
148 |
-
<label for="longitude">Longitude:</label>
|
149 |
-
<input type="number" id="longitude" name="longitude" step="any" value="73.857672" placeholder="e.g., 73.857672">
|
150 |
-
</div>
|
151 |
-
</div>
|
152 |
-
|
153 |
-
<div class="mb-6">
|
154 |
-
<label>Select precise location by clicking on the map:</label>
|
155 |
-
<div class="map-container">
|
156 |
-
<div id="input-map"></div>
|
157 |
-
</div>
|
158 |
-
</div>
|
159 |
-
|
160 |
-
<div class="flex flex-col sm:flex-row justify-center items-center gap-4 mt-8">
|
161 |
-
<button id="analyze-button" class="btn btn-primary w-full sm:w-auto">
|
162 |
-
<span id="button-text">Analyze Location</span>
|
163 |
-
<i id="analyze-icon" class="icon-paper-plane ml-2"></i>
|
164 |
-
<div id="button-spinner" class="btn-spinner hidden"></div>
|
165 |
-
</button>
|
166 |
-
<button id="use-my-location" class="btn btn-secondary w-full sm:w-auto">
|
167 |
-
<i class="icon-location-pin mr-2"></i>
|
168 |
-
Use My Current Location
|
169 |
-
</button>
|
170 |
-
</div>
|
171 |
-
</section>
|
172 |
-
|
173 |
-
<div id="analysis-overlay" class="fixed inset-0 flex items-center justify-start px-10">
|
174 |
-
<div class="bg-white p-10 rounded-xl shadow-2xl text-left">
|
175 |
-
<div class="w-16 h-16 border-6 border-blue-500 border-t-transparent rounded-full animate-spin mb-6"></div>
|
176 |
-
<p class="text-2xl font-semibold text-gray-700">Analyzing Location Data...</p>
|
177 |
-
<p class="text-lg text-gray-500 mt-2">This may take a few moments.</p>
|
178 |
-
</div>
|
179 |
-
</div>
|
180 |
-
|
181 |
-
|
182 |
-
<div id="error-message-container" class="hidden my-6 p-5 border-l-4 rounded-md shadow-md"> {/* Base classes, specific colors in JS */}
|
183 |
-
<div class="flex">
|
184 |
-
<div class="flex-shrink-0">
|
185 |
-
<i class="icon-info text-2xl"></i> {/* Icon class will be set by JS */}
|
186 |
-
</div>
|
187 |
-
<div class="ml-4">
|
188 |
-
<h3 class="text-lg font-bold">Notice</h3> {/* Title will be set by JS */}
|
189 |
-
<div class="mt-2 text-md">
|
190 |
-
<p id="error-text"></p>
|
191 |
-
</div>
|
192 |
-
</div>
|
193 |
-
</div>
|
194 |
-
</div>
|
195 |
-
|
196 |
-
<section id="results-section" class="hidden">
|
197 |
-
|
198 |
-
<div class="card">
|
199 |
-
<div class="flex flex-col sm:flex-row justify-between items-start mb-4">
|
200 |
-
<div>
|
201 |
-
<h2 class="text-2xl font-bold" id="location-name-display">Site Assessment</h2>
|
202 |
-
<p class="text-md text-gray-500" id="current-coords-display">Lat: N/A, Lon: N/A</p>
|
203 |
-
</div>
|
204 |
-
<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>
|
205 |
-
</div>
|
206 |
-
|
207 |
-
<div class="score-gauge-container mt-4 mb-5">
|
208 |
-
<div class="score-gauge">
|
209 |
-
<div class="score-gauge-bg"></div>
|
210 |
-
<div id="score-gauge-meter-dynamic" class="score-gauge-meter"></div>
|
211 |
-
<div class="score-gauge-overlay"></div>
|
212 |
-
</div>
|
213 |
-
<div id="safety-score-value-display" class="safety-score-value-display">N/A</div>
|
214 |
-
<div class="safety-score-label-display">Overall Safety Score</div>
|
215 |
-
</div>
|
216 |
-
|
217 |
-
<div class="mt-6">
|
218 |
-
<h3 class="text-xl font-semibold mb-2">Assessment Summary:</h3>
|
219 |
-
<p id="summary-assessment" class="text-md leading-relaxed">Loading assessment...</p>
|
220 |
-
</div>
|
221 |
-
<div class="mt-4">
|
222 |
-
<h3 class="text-xl font-semibold mb-1">Suitability:</h3>
|
223 |
-
<p id="suitability-statement" class="text-md font-bold">N/A</p>
|
224 |
-
</div>
|
225 |
-
</div>
|
226 |
-
|
227 |
-
<div class="card">
|
228 |
-
<h2 class="text-2xl font-bold mb-6">Detailed Risk Analysis</h2>
|
229 |
-
|
230 |
-
<div class="accordion-item">
|
231 |
-
<div class="accordion-header">
|
232 |
-
<h3 class="text-xl flex items-center text-red-700"><i class="icon-layers mr-3"></i>Geological Risks</h3>
|
233 |
-
<i class="icon-arrow-right accordion-arrow"></i>
|
234 |
-
</div>
|
235 |
-
<div class="accordion-content">
|
236 |
-
<div class="space-y-5 p-3">
|
237 |
-
<div id="earthquake-risk-details" class="risk-detail-item"></div>
|
238 |
-
<div id="landslide-risk-details" class="risk-detail-item"></div>
|
239 |
-
<div id="soil-stability-details" class="risk-detail-item"></div>
|
240 |
-
</div>
|
241 |
-
</div>
|
242 |
-
</div>
|
243 |
-
|
244 |
-
<div class="accordion-item">
|
245 |
-
<div class="accordion-header">
|
246 |
-
<h3 class="text-xl flex items-center text-blue-700"><i class="icon-drop mr-3"></i>Hydrological Risks</h3>
|
247 |
-
<i class="icon-arrow-right accordion-arrow"></i>
|
248 |
-
</div>
|
249 |
-
<div class="accordion-content">
|
250 |
-
<div class="space-y-5 p-3">
|
251 |
-
<div id="flood-risk-details" class="risk-detail-item"></div>
|
252 |
-
<div id="tsunami-risk-details" class="hidden risk-detail-item"></div>
|
253 |
-
</div>
|
254 |
-
</div>
|
255 |
-
</div>
|
256 |
-
|
257 |
-
<div id="other-environmental-risks-accordion" class="accordion-item hidden">
|
258 |
-
<div class="accordion-header">
|
259 |
-
<h3 class="text-xl flex items-center text-purple-700"><i class="icon-globe-alt mr-3"></i>Other Environmental Risks</h3>
|
260 |
-
<i class="icon-arrow-right accordion-arrow"></i>
|
261 |
-
</div>
|
262 |
-
<div class="accordion-content">
|
263 |
-
<div id="other-environmental-risks-list" class="space-y-5 p-3"></div>
|
264 |
-
</div>
|
265 |
-
</div>
|
266 |
-
<hr class="my-8 border-gray-200">
|
267 |
-
<div>
|
268 |
-
<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>
|
269 |
-
<ul id="key-risk-factors-summary" class="custom-list space-y-2 text-md"></ul>
|
270 |
-
</div>
|
271 |
-
</div>
|
272 |
-
|
273 |
-
<div class="card">
|
274 |
-
<h2 class="text-2xl font-bold mb-6">Recommendations & Further Actions</h2>
|
275 |
-
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-8">
|
276 |
-
<div>
|
277 |
-
<h3 class="text-xl font-semibold mb-4 flex items-center text-green-700">
|
278 |
-
<i class="icon-check mr-3"></i>Mitigation Recommendations
|
279 |
-
</h3>
|
280 |
-
<ul id="mitigation-recommendations-list" class="custom-list space-y-2 text-md"></ul>
|
281 |
-
</div>
|
282 |
-
<div>
|
283 |
-
<h3 class="text-xl font-semibold mb-4 flex items-center text-yellow-700">
|
284 |
-
<i class="icon-magnifier-add mr-3"></i>Further Investigations Needed
|
285 |
-
</h3>
|
286 |
-
<ul id="further-investigations-list" class="custom-list space-y-2 text-md"></ul>
|
287 |
-
</div>
|
288 |
-
</div>
|
289 |
-
</div>
|
290 |
-
|
291 |
-
<div class="card">
|
292 |
-
<h2 class="text-2xl font-bold mb-5">Site Map & Alternatives Overview</h2>
|
293 |
-
<div class="map-container">
|
294 |
-
<div id="results-map"></div>
|
295 |
-
</div>
|
296 |
-
</div>
|
297 |
-
|
298 |
-
<div id="alternative-locations-section" class="card hidden">
|
299 |
-
<h2 class="text-2xl font-bold mb-5 flex items-center">
|
300 |
-
<i class="icon-directions mr-3 text-blue-600"></i>Alternative Location Analysis
|
301 |
-
</h2>
|
302 |
-
<div id="alternative-locations-container" class="space-y-6">
|
303 |
-
<p class="text-md text-gray-500">No significantly better alternatives identified or loading...</p>
|
304 |
-
</div>
|
305 |
-
</div>
|
306 |
-
|
307 |
-
<div class="card text-md">
|
308 |
-
<p><strong>Data Confidence:</strong> <span id="data-confidence" class="font-semibold">N/A</span></p>
|
309 |
-
<p id="disclaimer-text" class="mt-3 text-sm text-gray-500 italic">Disclaimer will be loaded here.</p>
|
310 |
-
</div>
|
311 |
-
</section>
|
312 |
-
</div>
|
313 |
-
|
314 |
-
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
315 |
-
|
316 |
-
<script>
|
317 |
-
// --- Leaflet Icons ---
|
318 |
-
const createIcon = (color) => L.icon({
|
319 |
-
iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${color}.png`,
|
320 |
-
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
|
321 |
-
iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]
|
322 |
-
});
|
323 |
-
const primaryLocationIcon = createIcon('blue');
|
324 |
-
const saferAlternativeIcon = createIcon('green');
|
325 |
-
const otherAlternativeIcon = createIcon('orange');
|
326 |
-
const selectionIcon = createIcon('red');
|
327 |
-
|
328 |
-
// --- DOM Element References (ensure all are captured) ---
|
329 |
-
let inputMap, resultsMap, inputMarker, currentResultMarker;
|
330 |
-
const alternativeMarkers = [];
|
331 |
-
|
332 |
-
const latitudeInput = document.getElementById('latitude');
|
333 |
-
const longitudeInput = document.getElementById('longitude');
|
334 |
-
const locationQueryInput = document.getElementById('location-query');
|
335 |
-
const searchLocationButton = document.getElementById('search-location-button');
|
336 |
-
const analyzeButton = document.getElementById('analyze-button');
|
337 |
-
const buttonText = document.getElementById('button-text');
|
338 |
-
const buttonSpinner = document.getElementById('button-spinner');
|
339 |
-
const analyzeIcon = document.getElementById('analyze-icon');
|
340 |
-
const useMyLocationButton = document.getElementById('use-my-location');
|
341 |
-
|
342 |
-
const resultsSection = document.getElementById('results-section');
|
343 |
-
const analysisOverlay = document.getElementById('analysis-overlay');
|
344 |
-
const errorMessageContainer = document.getElementById('error-message-container');
|
345 |
-
const errorText = document.getElementById('error-text');
|
346 |
-
|
347 |
-
const locationNameDisplay = document.getElementById('location-name-display');
|
348 |
-
const currentCoordsDisplay = document.getElementById('current-coords-display');
|
349 |
-
const suitabilityBadge = document.getElementById('suitability-badge');
|
350 |
-
const scoreValueDisplay = document.getElementById('safety-score-value-display');
|
351 |
-
const summaryAssessmentP = document.getElementById('summary-assessment');
|
352 |
-
const suitabilityStatementP = document.getElementById('suitability-statement');
|
353 |
-
|
354 |
-
const earthquakeRiskDetailsDiv = document.getElementById('earthquake-risk-details');
|
355 |
-
const landslideRiskDetailsDiv = document.getElementById('landslide-risk-details');
|
356 |
-
const soilStabilityDetailsDiv = document.getElementById('soil-stability-details');
|
357 |
-
const floodRiskDetailsDiv = document.getElementById('flood-risk-details');
|
358 |
-
const tsunamiRiskDetailsDiv = document.getElementById('tsunami-risk-details');
|
359 |
-
const otherEnvRisksAccordion = document.getElementById('other-environmental-risks-accordion');
|
360 |
-
const otherEnvRisksList = document.getElementById('other-environmental-risks-list');
|
361 |
-
const keyRiskFactorsUl = document.getElementById('key-risk-factors-summary');
|
362 |
-
const mitigationRecommendationsUl = document.getElementById('mitigation-recommendations-list');
|
363 |
-
const furtherInvestigationsUl = document.getElementById('further-investigations-list');
|
364 |
-
const altLocationsSection = document.getElementById('alternative-locations-section');
|
365 |
-
const altLocationsContainer = document.getElementById('alternative-locations-container');
|
366 |
-
const dataConfidenceSpan = document.getElementById('data-confidence');
|
367 |
-
const disclaimerP = document.getElementById('disclaimer-text');
|
368 |
-
|
369 |
-
// --- Initialization ---
|
370 |
-
document.addEventListener('DOMContentLoaded', () => {
|
371 |
-
analysisOverlay.classList.remove('visible');
|
372 |
-
|
373 |
-
inputMap = L.map('input-map', { scrollWheelZoom: true, attributionControl: false }).setView([18.520962, 73.857672], 12); // Default to Pune
|
374 |
-
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, opacity: 0.9 }).addTo(inputMap);
|
375 |
-
L.control.attribution({prefix: false}).addTo(inputMap);
|
376 |
-
updateInputMarker(18.520962, 73.857672);
|
377 |
-
|
378 |
-
inputMap.on('click', function(e) {
|
379 |
-
const lat = e.latlng.lat;
|
380 |
-
const lon = e.latlng.lng;
|
381 |
-
latitudeInput.value = lat.toFixed(6);
|
382 |
-
longitudeInput.value = lon.toFixed(6);
|
383 |
-
updateInputMarker(lat, lon);
|
384 |
-
locationQueryInput.value = '';
|
385 |
-
});
|
386 |
-
|
387 |
-
resultsMap = L.map('results-map', { scrollWheelZoom: false, attributionControl: false }).setView([20.5937, 78.9629], 5); // Default to India view
|
388 |
-
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, opacity: 0.9 }).addTo(resultsMap);
|
389 |
-
L.control.attribution({prefix: false}).addTo(resultsMap);
|
390 |
-
|
391 |
-
searchLocationButton.addEventListener('click', handleLocationSearch);
|
392 |
-
locationQueryInput.addEventListener('keypress', e => { if (e.key === 'Enter') handleLocationSearch(); });
|
393 |
-
analyzeButton.addEventListener('click', handleAnalysis);
|
394 |
-
useMyLocationButton.addEventListener('click', getUserLocationAndAnalyze);
|
395 |
-
|
396 |
-
document.querySelectorAll('.accordion-header').forEach(header => {
|
397 |
-
header.addEventListener('click', () => {
|
398 |
-
const content = header.nextElementSibling;
|
399 |
-
header.classList.toggle('open');
|
400 |
-
// content.classList.toggle('open'); // Replaced with direct style manipulation
|
401 |
-
if (content.style.maxHeight && content.style.maxHeight !== "0px") {
|
402 |
-
content.style.maxHeight = "0px";
|
403 |
-
content.style.paddingTop = "0px";
|
404 |
-
content.style.paddingBottom = "0px";
|
405 |
-
} else {
|
406 |
-
content.style.maxHeight = content.scrollHeight + "px";
|
407 |
-
content.style.paddingTop = "1rem"; // Or your desired padding
|
408 |
-
content.style.paddingBottom = "1rem";
|
409 |
-
}
|
410 |
-
});
|
411 |
-
});
|
412 |
-
});
|
413 |
-
|
414 |
-
// --- Core Functions ---
|
415 |
-
function updateInputMarker(lat, lon, zoomLevel = 13) {
|
416 |
-
if (inputMarker) inputMap.removeLayer(inputMarker);
|
417 |
-
inputMarker = L.marker([lat, lon], {icon: selectionIcon}).addTo(inputMap);
|
418 |
-
inputMap.setView([lat, lon], zoomLevel, {animate: true});
|
419 |
-
}
|
420 |
-
|
421 |
-
async function handleLocationSearch() {
|
422 |
-
const query = locationQueryInput.value.trim();
|
423 |
-
if (!query) { displayError("Please enter a location to search."); return; }
|
424 |
-
|
425 |
-
searchLocationButton.disabled = true;
|
426 |
-
const originalSearchHTML = searchLocationButton.innerHTML;
|
427 |
-
searchLocationButton.innerHTML = `<div class="btn-spinner !ml-0 !mr-0 !w-4 !h-4"></div>`;
|
428 |
-
|
429 |
-
try {
|
430 |
-
const response = await fetch('/api/geocode', {
|
431 |
-
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query })
|
432 |
-
});
|
433 |
-
const data = await response.json();
|
434 |
-
if (!response.ok || data.error) throw new Error(data.error || "Location not found.");
|
435 |
-
|
436 |
-
latitudeInput.value = parseFloat(data.latitude).toFixed(6);
|
437 |
-
longitudeInput.value = parseFloat(data.longitude).toFixed(6);
|
438 |
-
updateInputMarker(data.latitude, data.longitude, 15);
|
439 |
-
locationQueryInput.value = data.display_name;
|
440 |
-
hideError();
|
441 |
-
} catch (error) {
|
442 |
-
console.error("Geocoding error:", error);
|
443 |
-
displayError(error.message);
|
444 |
-
} finally {
|
445 |
-
searchLocationButton.disabled = false;
|
446 |
-
searchLocationButton.innerHTML = originalSearchHTML;
|
447 |
-
}
|
448 |
-
}
|
449 |
-
|
450 |
-
function showLoadingState(isLoading) {
|
451 |
-
if (isLoading) {
|
452 |
-
analysisOverlay.classList.add('visible');
|
453 |
-
buttonText.textContent = 'Analyzing...';
|
454 |
-
analyzeIcon.classList.add('hidden');
|
455 |
-
buttonSpinner.classList.remove('hidden');
|
456 |
-
analyzeButton.disabled = true;
|
457 |
-
} else {
|
458 |
-
analysisOverlay.classList.remove('visible');
|
459 |
-
buttonText.textContent = 'Analyze Location';
|
460 |
-
analyzeIcon.classList.remove('hidden');
|
461 |
-
buttonSpinner.classList.add('hidden');
|
462 |
-
analyzeButton.disabled = false;
|
463 |
-
}
|
464 |
-
}
|
465 |
-
|
466 |
-
function displayError(message, isWarning = false) {
|
467 |
-
errorText.innerHTML = message;
|
468 |
-
errorMessageContainer.classList.remove('hidden');
|
469 |
-
const errorIconEl = errorMessageContainer.querySelector('i');
|
470 |
-
const errorTitleEl = errorMessageContainer.querySelector('h3');
|
471 |
-
|
472 |
-
if (isWarning) {
|
473 |
-
errorMessageContainer.className = 'my-6 p-5 bg-yellow-50 border-l-4 border-yellow-500 text-yellow-700 rounded-md shadow-md flex';
|
474 |
-
if(errorIconEl) errorIconEl.className = 'icon-info text-2xl text-yellow-500';
|
475 |
-
if(errorTitleEl) errorTitleEl.textContent = "Notice";
|
476 |
-
} else {
|
477 |
-
errorMessageContainer.className = 'my-6 p-5 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-md shadow-md flex';
|
478 |
-
if(errorIconEl) errorIconEl.className = 'icon-close text-2xl text-red-500';
|
479 |
-
if(errorTitleEl) errorTitleEl.textContent = "Analysis Error";
|
480 |
-
}
|
481 |
-
resultsSection.classList.add('hidden');
|
482 |
-
}
|
483 |
-
function hideError() { errorMessageContainer.classList.add('hidden'); }
|
484 |
-
|
485 |
-
async function handleAnalysis() {
|
486 |
-
const latitude = parseFloat(latitudeInput.value);
|
487 |
-
const longitude = parseFloat(longitudeInput.value);
|
488 |
-
|
489 |
-
if (isNaN(latitude) || isNaN(longitude) || latitude < -90 || latitude > 90 || longitude < -180 || longitude > 180) {
|
490 |
-
displayError("Valid latitude (-90 to 90) & longitude (-180 to 180) required."); return;
|
491 |
-
}
|
492 |
-
|
493 |
-
hideError(); showLoadingState(true); resultsSection.classList.add('hidden');
|
494 |
-
|
495 |
-
try {
|
496 |
-
const response = await fetch('/api/analyze_location', {
|
497 |
-
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ latitude, longitude })
|
498 |
-
});
|
499 |
-
const data = await response.json();
|
500 |
-
|
501 |
-
if (!response.ok) throw new Error(data.error_message || data.error || `Analysis failed: ${response.status}`);
|
502 |
-
if (data.error_message && response.ok && !data.safety_score) { // Check if it's a fallback error from backend
|
503 |
-
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);
|
504 |
-
}
|
505 |
-
|
506 |
-
resultsSection.classList.remove('hidden');
|
507 |
-
if (resultsMap) resultsMap.invalidateSize();
|
508 |
-
|
509 |
-
displayDetailedResults(data, latitude, longitude);
|
510 |
-
updateResultsMap(data, latitude, longitude);
|
511 |
-
setTimeout(() => {
|
512 |
-
const firstResultCard = resultsSection.querySelector('.card');
|
513 |
-
if (firstResultCard) {
|
514 |
-
firstResultCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
515 |
-
}
|
516 |
-
}, 300);
|
517 |
-
|
518 |
-
} catch (error) {
|
519 |
-
console.error('Analysis error:', error);
|
520 |
-
displayError(error.message || "Unexpected error during analysis.");
|
521 |
-
} finally {
|
522 |
-
showLoadingState(false);
|
523 |
-
}
|
524 |
-
}
|
525 |
-
|
526 |
-
function getUserLocationAndAnalyze() {
|
527 |
-
if (!navigator.geolocation) { displayError("Geolocation not supported by this browser."); return; }
|
528 |
-
|
529 |
-
const originalButtonHTML = useMyLocationButton.innerHTML;
|
530 |
-
useMyLocationButton.innerHTML = `<div class="btn-spinner !ml-0 !mr-2"></div> Locating...`;
|
531 |
-
useMyLocationButton.disabled = true;
|
532 |
-
|
533 |
-
navigator.geolocation.getCurrentPosition(
|
534 |
-
position => {
|
535 |
-
const { latitude: lat, longitude: lon } = position.coords;
|
536 |
-
latitudeInput.value = lat.toFixed(6);
|
537 |
-
longitudeInput.value = lon.toFixed(6);
|
538 |
-
updateInputMarker(lat, lon);
|
539 |
-
locationQueryInput.value = '';
|
540 |
-
useMyLocationButton.innerHTML = originalButtonHTML;
|
541 |
-
useMyLocationButton.disabled = false;
|
542 |
-
handleAnalysis();
|
543 |
-
},
|
544 |
-
error => {
|
545 |
-
console.error("Geolocation error:", error);
|
546 |
-
displayError("Could not get current location. Check browser permissions.");
|
547 |
-
useMyLocationButton.innerHTML = originalButtonHTML;
|
548 |
-
useMyLocationButton.disabled = false;
|
549 |
-
},
|
550 |
-
{ timeout: 10000, enableHighAccuracy: true }
|
551 |
-
);
|
552 |
-
}
|
553 |
-
|
554 |
-
function getRiskBadgeClasses(riskLevel) {
|
555 |
-
riskLevel = riskLevel ? String(riskLevel).toLowerCase().replace(/[\s-]+/g, "_") : 'not_assessed';
|
556 |
-
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' };
|
557 |
-
return classMap[riskLevel] || 'risk-not_assessed';
|
558 |
-
}
|
559 |
-
|
560 |
-
function formatRiskDetail(container, title, riskData) {
|
561 |
-
container.innerHTML = '';
|
562 |
-
if (!riskData || (riskData.level === undefined && riskData.type === undefined)) {
|
563 |
-
container.innerHTML = `<p class="text-sm text-gray-500">${title}: Data unavailable or not applicable.</p>`; return;
|
564 |
-
}
|
565 |
-
const level = riskData.level || riskData.type;
|
566 |
-
let detailsHTML = `<p class="text-sm text-gray-600 leading-relaxed">${riskData.details || 'No specific details provided.'}</p>`;
|
567 |
-
if (riskData.concerns && riskData.concerns.length > 0) {
|
568 |
-
detailsHTML += `<ul class="list-disc list-inside text-xs text-gray-500 mt-2 pl-3 space-y-1">`;
|
569 |
-
riskData.concerns.forEach(concern => detailsHTML += `<li>${concern}</li>`);
|
570 |
-
detailsHTML += `</ul>`;
|
571 |
-
}
|
572 |
-
container.innerHTML = `
|
573 |
-
<div class="flex justify-between items-center mb-1.5">
|
574 |
-
<strong class="text-md font-medium text-gray-700">${title}</strong>
|
575 |
-
<span class="risk-badge ${getRiskBadgeClasses(level)}">${String(level).replace(/_/g, ' ')}</span>
|
576 |
-
</div>
|
577 |
-
${detailsHTML}
|
578 |
-
`;
|
579 |
-
}
|
580 |
-
|
581 |
-
function updateSafetyGauge(score) {
|
582 |
-
const meter = document.getElementById('score-gauge-meter-dynamic');
|
583 |
-
score = Math.max(0, Math.min(100, parseInt(score) || 0));
|
584 |
-
scoreValueDisplay.textContent = score;
|
585 |
-
const rotation = (score / 100) * 180;
|
586 |
-
meter.style.transform = `rotate(${rotation}deg)`;
|
587 |
-
if (score >= 70) scoreValueDisplay.style.color = '#047857';
|
588 |
-
else if (score >= 40) scoreValueDisplay.style.color = '#CA8A04';
|
589 |
-
else scoreValueDisplay.style.color = '#B91C1C';
|
590 |
-
}
|
591 |
-
|
592 |
-
function displayDetailedResults(data, lat, lon) {
|
593 |
-
locationNameDisplay.textContent = data.location_name || "Site Assessment";
|
594 |
-
currentCoordsDisplay.textContent = `Lat: ${lat.toFixed(4)}, Lon: ${lon.toFixed(4)}`;
|
595 |
-
|
596 |
-
updateSafetyGauge(data.safety_score || 0);
|
597 |
-
summaryAssessmentP.innerHTML = data.summary_assessment ? data.summary_assessment.replace(/\n/g, '<br>') : 'No summary provided.'; // Allow line breaks
|
598 |
-
suitabilityStatementP.textContent = data.suitability_statement || 'Suitability not determined.';
|
599 |
-
|
600 |
-
const suitability = String(data.suitability_statement || "").toLowerCase();
|
601 |
-
let badgeClass = "px-4 py-2 text-md font-semibold rounded-full self-start sm:self-center transition-all duration-300 ";
|
602 |
-
if (suitability.includes("suitable") || suitability.includes("recommended")) badgeClass += "bg-green-100 text-green-700 border border-green-300";
|
603 |
-
else if (suitability.includes("caution") || suitability.includes("concerns") || suitability.includes("mitigation")) badgeClass += "bg-yellow-100 text-yellow-700 border border-yellow-300";
|
604 |
-
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";
|
605 |
-
else badgeClass += "bg-gray-100 text-gray-700 border border-gray-300";
|
606 |
-
suitabilityBadge.className = badgeClass;
|
607 |
-
suitabilityBadge.textContent = data.suitability_statement ? (data.suitability_statement.split(' ')[0] + (data.suitability_statement.split(' ')[1] ? ' ' + data.suitability_statement.split(' ')[1] : '')) : "Pending";
|
608 |
-
|
609 |
-
|
610 |
-
formatRiskDetail(earthquakeRiskDetailsDiv, 'Earthquake', data.geological_risks?.earthquake_risk);
|
611 |
-
formatRiskDetail(landslideRiskDetailsDiv, 'Landslide', data.geological_risks?.landslide_risk);
|
612 |
-
formatRiskDetail(soilStabilityDetailsDiv, 'Soil Stability', data.geological_risks?.soil_stability);
|
613 |
-
|
614 |
-
formatRiskDetail(floodRiskDetailsDiv, 'Flood', data.hydrological_risks?.flood_risk);
|
615 |
-
if (data.hydrological_risks?.tsunami_risk && data.hydrological_risks.tsunami_risk.level && data.hydrological_risks.tsunami_risk.level.toLowerCase() !== 'negligible') {
|
616 |
-
formatRiskDetail(tsunamiRiskDetailsDiv, 'Tsunami', data.hydrological_risks.tsunami_risk);
|
617 |
-
tsunamiRiskDetailsDiv.classList.remove('hidden');
|
618 |
-
} else { tsunamiRiskDetailsDiv.classList.add('hidden'); }
|
619 |
-
|
620 |
-
otherEnvRisksList.innerHTML = '';
|
621 |
-
if (data.other_environmental_risks && data.other_environmental_risks.length > 0) {
|
622 |
-
data.other_environmental_risks.forEach(risk => {
|
623 |
-
const riskDiv = document.createElement('div');
|
624 |
-
riskDiv.className = 'risk-detail-item';
|
625 |
-
formatRiskDetail(riskDiv, risk.type, risk);
|
626 |
-
otherEnvRisksList.appendChild(riskDiv);
|
627 |
-
});
|
628 |
-
otherEnvRisksAccordion.classList.remove('hidden');
|
629 |
-
} else { otherEnvRisksAccordion.classList.add('hidden'); }
|
630 |
-
|
631 |
-
updateList(keyRiskFactorsUl, data.key_risk_factors_summary, 'No specific key risk factors highlighted.');
|
632 |
-
updateList(mitigationRecommendationsUl, data.mitigation_recommendations, 'No specific mitigation strategies provided.');
|
633 |
-
updateList(furtherInvestigationsUl, data.further_investigations_needed, 'No specific further investigations suggested.');
|
634 |
-
|
635 |
-
altLocationsContainer.innerHTML = '';
|
636 |
-
if (data.alternative_locations_analysis && data.alternative_locations_analysis.length > 0) {
|
637 |
-
data.alternative_locations_analysis.forEach(alt => {
|
638 |
-
const card = document.createElement('div');
|
639 |
-
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';
|
640 |
-
let prosConsHTML = '';
|
641 |
-
if ((alt.potential_pros && alt.potential_pros.length > 0) || (alt.potential_cons && alt.potential_cons.length > 0)) {
|
642 |
-
prosConsHTML += '<div class="text-xs mt-3 pt-3 border-t border-gray-200 space-y-1.5">';
|
643 |
-
if (alt.potential_pros && alt.potential_pros.length) prosConsHTML += `<div><strong class="text-green-600">Pros:</strong> ${alt.potential_pros.join('; ')}</div>`;
|
644 |
-
if (alt.potential_cons && alt.potential_cons.length) prosConsHTML += `<div><strong class="text-red-600">Cons:</strong> ${alt.potential_cons.join('; ')}</div>`;
|
645 |
-
prosConsHTML += '</div>';
|
646 |
-
}
|
647 |
-
card.innerHTML = `
|
648 |
-
<div class="flex justify-between items-start mb-2">
|
649 |
-
<div>
|
650 |
-
<h4 class="font-semibold text-blue-600 text-lg">${alt.name_suggestion || 'Alternative Site'}</h4>
|
651 |
-
<p class="text-xs text-gray-500">${alt.actual_name || `Lat: ${parseFloat(alt.latitude).toFixed(3)}, Lon: ${parseFloat(alt.longitude).toFixed(3)}`}</p>
|
652 |
-
</div>
|
653 |
-
<span class="text-sm text-gray-500 whitespace-nowrap font-medium">${alt.estimated_distance_km} km</span>
|
654 |
-
</div>
|
655 |
-
<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>
|
656 |
-
<p class="text-sm text-gray-600 mb-2">${alt.brief_justification || 'General alternative suggestion.'}</p>
|
657 |
-
${prosConsHTML}
|
658 |
-
`;
|
659 |
-
card.addEventListener('click', () => {
|
660 |
-
resultsMap.setView([parseFloat(alt.latitude), parseFloat(alt.longitude)], 14, {animate: true});
|
661 |
-
alternativeMarkers.forEach(m => {
|
662 |
-
const markerLatLng = m.getLatLng();
|
663 |
-
if (markerLatLng.lat.toFixed(4) === parseFloat(alt.latitude).toFixed(4) && markerLatLng.lng.toFixed(4) === parseFloat(alt.longitude).toFixed(4)) {
|
664 |
-
m.openPopup();
|
665 |
-
}
|
666 |
-
});
|
667 |
-
});
|
668 |
-
altLocationsContainer.appendChild(card);
|
669 |
-
});
|
670 |
-
altLocationsSection.classList.remove('hidden');
|
671 |
-
} else {
|
672 |
-
altLocationsContainer.innerHTML = '<p class="text-md text-gray-500">No significantly better alternative locations were identified based on the current analysis.</p>';
|
673 |
-
altLocationsSection.classList.remove('hidden');
|
674 |
-
}
|
675 |
-
|
676 |
-
dataConfidenceSpan.textContent = data.data_confidence_level || 'N/A';
|
677 |
-
disclaimerP.textContent = data.disclaimer || 'Standard disclaimers apply. Consult professionals.';
|
678 |
-
}
|
679 |
-
|
680 |
-
function updateList(listElement, items, emptyMessage) {
|
681 |
-
listElement.innerHTML = '';
|
682 |
-
if (items && items.length > 0) {
|
683 |
-
items.forEach(item => {
|
684 |
-
const li = document.createElement('li');
|
685 |
-
li.textContent = item;
|
686 |
-
listElement.appendChild(li);
|
687 |
-
});
|
688 |
-
} else {
|
689 |
-
const li = document.createElement('li');
|
690 |
-
li.textContent = emptyMessage;
|
691 |
-
li.className = "text-gray-500 italic";
|
692 |
-
listElement.appendChild(li);
|
693 |
-
}
|
694 |
-
}
|
695 |
-
|
696 |
-
function updateResultsMap(data, currentLat, currentLng) {
|
697 |
-
if (currentResultMarker) resultsMap.removeLayer(currentResultMarker);
|
698 |
-
alternativeMarkers.forEach(marker => resultsMap.removeLayer(marker));
|
699 |
-
alternativeMarkers.length = 0;
|
700 |
-
|
701 |
-
currentResultMarker = L.marker([currentLat, currentLng], { icon: primaryLocationIcon, zIndexOffset: 1000 })
|
702 |
-
.addTo(resultsMap)
|
703 |
-
.bindPopup(`<b>${data.location_name || 'Analyzed Location'}</b><br>Score: ${data.safety_score || 'N/A'}<br>${data.suitability_statement || ''}`)
|
704 |
-
.openPopup();
|
705 |
-
|
706 |
-
const bounds = L.latLngBounds([[currentLat, currentLng]]);
|
707 |
-
|
708 |
-
if (data.alternative_locations_analysis && data.alternative_locations_analysis.length > 0) {
|
709 |
-
data.alternative_locations_analysis.forEach(alt => {
|
710 |
-
try {
|
711 |
-
const altLat = parseFloat(alt.latitude); const altLng = parseFloat(alt.longitude);
|
712 |
-
if (isNaN(altLat) || isNaN(altLng)) { console.warn("Invalid alt coords:", alt); return; }
|
713 |
-
const icon = (alt.comparative_safety_score_estimate || 0) > (data.safety_score || 0) + 5 ? saferAlternativeIcon : otherAlternativeIcon;
|
714 |
-
const altMarker = L.marker([altLat, altLng], { icon: icon })
|
715 |
-
.addTo(resultsMap)
|
716 |
-
.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`);
|
717 |
-
alternativeMarkers.push(altMarker); bounds.extend([altLat, altLng]);
|
718 |
-
} catch (e) { console.error("Error creating alt marker:", alt, e); }
|
719 |
-
});
|
720 |
-
}
|
721 |
-
|
722 |
-
if (bounds.isValid() && !bounds.getSouthWest().equals(bounds.getNorthEast())) {
|
723 |
-
resultsMap.fitBounds(bounds, { padding: [60, 60], maxZoom: 14, animate: true });
|
724 |
-
} else { resultsMap.setView([currentLat, currentLng], 13, {animate: true}); }
|
725 |
-
}
|
726 |
-
</script>
|
727 |
-
</body>
|
728 |
</html>
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="en">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
+
<title>GeoSafe Construct | Professional AI Safety Analyzer</title>
|
7 |
+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
|
8 |
+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
|
9 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
10 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.css">
|
11 |
+
|
12 |
+
<style>
|
13 |
+
:root {
|
14 |
+
--primary-blue: #0072ff;
|
15 |
+
--primary-blue-dark: #005fcc;
|
16 |
+
--secondary-blue: #00c6ff;
|
17 |
+
--text-dark: #1f2937;
|
18 |
+
--text-medium: #4b5563;
|
19 |
+
--text-light: #6b7280;
|
20 |
+
--card-bg: #ffffff;
|
21 |
+
--body-bg: #f8f9fa;
|
22 |
+
--border-color: #dee2e6;
|
23 |
+
--success-bg: #e6f7f0; --success-text: #0a6847; --success-border: #b3e0c8; /* Softer Greens */
|
24 |
+
--warning-bg: #fff8e1; --warning-text: #795502; --warning-border: #ffecb3; /* Softer Yellows */
|
25 |
+
--danger-bg: #fdecea; --danger-text: #8c1c13; --danger-border: #f9c1ba; /* Softer Reds */
|
26 |
+
--info-bg: #e0f7fa; --info-text: #006064; --info-border: #b2ebf2; /* Softer Cyans/Blues */
|
27 |
+
--neutral-bg: #f1f3f5; --neutral-text: #495057; --neutral-border: #ced4da; /* Softer Grays */
|
28 |
+
}
|
29 |
+
|
30 |
+
body { font-family: 'Inter', sans-serif; background-color: var(--body-bg); color: var(--text-dark); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
31 |
+
.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); }
|
32 |
+
.app-header h1 { text-shadow: 0 1px 2px rgba(0,0,0,0.15); font-weight: 800; }
|
33 |
+
.app-header p { opacity: 0.9; }
|
34 |
+
|
35 |
+
.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; /* Important for border radius on map */ }
|
36 |
+
#input-map { height: 280px; cursor: crosshair; }
|
37 |
+
#results-map { height: 400px; }
|
38 |
+
|
39 |
+
.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); }
|
40 |
+
.leaflet-popup-content { margin: 15px !important; font-size: 0.875rem; color: var(--text-dark); }
|
41 |
+
|
42 |
+
.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; }
|
43 |
+
.risk-low, .risk-negligible, .risk-stable { background-color: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
|
44 |
+
.risk-medium, .risk-moderately_stable { background-color: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
|
45 |
+
.risk-high, .risk-very_high, .risk-unstable { background-color: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
|
46 |
+
.risk-not_assessed, .risk-requires_investigation, .risk-variable { background-color: var(--neutral-bg); color: var(--neutral-text); border-color: var(--neutral-border); }
|
47 |
+
|
48 |
+
.score-gauge-container { text-align: center; margin-bottom: 1.5rem; }
|
49 |
+
.score-gauge { position: relative; width: 200px; height: 100px; overflow: hidden; margin: 0 auto 0.75rem auto; }
|
50 |
+
.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; }
|
51 |
+
.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); }
|
52 |
+
.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; }
|
53 |
+
.safety-score-value-display { font-size: 3.25rem; font-weight: 800; line-height: 1; margin-top: 0.25rem; transition: color 0.5s; }
|
54 |
+
.safety-score-label-display { font-size: 0.8rem; color: var(--text-medium); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
|
55 |
+
|
56 |
+
.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; }
|
57 |
+
.card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); transform: translateY(-3px); }
|
58 |
+
.card h2 { font-size: 1.5rem; font-weight: 700; } .card h3 { font-size: 1.2rem; font-weight: 600; }
|
59 |
+
.card p, .card li, .card span { color: var(--text-medium); line-height: 1.65; }
|
60 |
+
.card strong { color: var(--text-dark); font-weight: 600; } .card .text-xs { color: var(--text-light); }
|
61 |
+
|
62 |
+
.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; }
|
63 |
+
.btn-primary { background-color: var(--primary-blue); color: white; box-shadow: 0 2px 5px rgba(0,114,255,0.2); }
|
64 |
+
.btn-primary:hover { background-color: var(--primary-blue-dark); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,114,255,0.3); }
|
65 |
+
.btn-primary:disabled { background-color: #a0cfff; box-shadow: none; transform: none; cursor: not-allowed; }
|
66 |
+
.btn-secondary { background-color: var(--card-bg); border-color: var(--border-color); color: var(--primary-blue); }
|
67 |
+
.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); }
|
68 |
+
|
69 |
+
.icon-style { width: 1.125rem; height: 1.125rem; margin-right: 0.75rem; vertical-align: middle; }
|
70 |
+
.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; }
|
71 |
+
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
72 |
+
|
73 |
+
#analysis-overlay {
|
74 |
+
position: fixed; inset: 0;
|
75 |
+
background-color: rgba(0,0,0,0.35); /* Darker overlay */
|
76 |
+
backdrop-filter: blur(8px); /* Stronger blur */
|
77 |
+
display: flex; align-items: center; justify-content: center;
|
78 |
+
z-index: 10000; /* Higher z-index */
|
79 |
+
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
|
80 |
+
visibility: hidden; opacity: 0;
|
81 |
+
}
|
82 |
+
#analysis-overlay.visible { visibility: visible; opacity: 1; }
|
83 |
+
|
84 |
+
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; }
|
85 |
+
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; }
|
86 |
+
label { color: var(--text-medium); font-weight: 500; margin-bottom: 0.5rem; display: block; font-size: 0.875rem; }
|
87 |
+
.input-group { position: relative; }
|
88 |
+
.input-group .btn { position: absolute; right: 0.375rem; top: 50%; transform: translateY(-50%); padding: 0.625rem 1rem; font-size: 0.8rem; }
|
89 |
+
|
90 |
+
.accordion-item { border-bottom: 1px solid var(--border-color); }
|
91 |
+
.accordion-item:last-child { border-bottom: none; }
|
92 |
+
.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; }
|
93 |
+
.accordion-header:hover { background-color: #eef2ff; /* Light indigo for hover */ color: var(--primary-blue-dark); }
|
94 |
+
.accordion-header.open { background-color: #e0e7ff; /* Slightly darker for open */ color: var(--primary-blue-dark); }
|
95 |
+
.accordion-header h3 { margin-bottom: 0; transition: color 0.25s; }
|
96 |
+
.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; }
|
97 |
+
/* .accordion-content.open is handled by JS by setting max-height to scrollHeight */
|
98 |
+
.accordion-arrow { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); font-size: 1.2rem; color: var(--primary-blue); }
|
99 |
+
.accordion-header.open .accordion-arrow { transform: rotate(90deg); }
|
100 |
+
|
101 |
+
.custom-list li { padding-left: 1.75em; position: relative; margin-bottom: 0.625em; }
|
102 |
+
.custom-list li::before { font-family: 'simple-line-icons'; position: absolute; left: 0; top: 2px; font-size: 1em; transition: color 0.2s; }
|
103 |
+
#mitigation-recommendations-list li::before { content: "\e080"; color: var(--success-text); } /* Check */
|
104 |
+
#key-risk-factors-summary li::before { content: "\e090"; color: var(--danger-text); } /* Exclamation */
|
105 |
+
#further-investigations-list li::before { content: "\e003"; color: var(--warning-text); } /* Magnifying glass */
|
106 |
+
|
107 |
+
/* Styling for risk detail items inside accordion */
|
108 |
+
.risk-detail-item { padding: 0.75rem 0; border-bottom: 1px dashed #e5e7eb; }
|
109 |
+
.risk-detail-item:last-child { border-bottom: none; }
|
110 |
+
.risk-detail-item strong { display: block; margin-bottom: 0.25rem; }
|
111 |
+
.risk-detail-item .text-xs { margin-top: 0.25rem; }
|
112 |
+
|
113 |
+
</style>
|
114 |
+
</head>
|
115 |
+
<body class="antialiased">
|
116 |
+
|
117 |
+
<header class="app-header">
|
118 |
+
<div class="container mx-auto px-4 text-center">
|
119 |
+
<div class="inline-flex items-center p-2 rounded-lg">
|
120 |
+
<i class="icon-shield text-4xl mr-3"></i>
|
121 |
+
<h1 class="text-4xl sm:text-5xl tracking-tight">GeoSafe Construct</h1>
|
122 |
+
</div>
|
123 |
+
<p class="mt-2 text-lg">Professional AI-Powered Construction Site Safety Analysis</p>
|
124 |
+
</div>
|
125 |
+
</header>
|
126 |
+
|
127 |
+
<div class="container mx-auto px-4 w-full max-w-3xl pb-16">
|
128 |
+
|
129 |
+
<section id="input-section" class="card !pt-8">
|
130 |
+
<h2 class="text-2xl font-bold mb-8 text-center text-gray-700">Define Site for Analysis</h2>
|
131 |
+
|
132 |
+
<div class="mb-6">
|
133 |
+
<label for="location-query">Search Location (e.g., "Eiffel Tower, Paris" or Address):</label>
|
134 |
+
<div class="input-group">
|
135 |
+
<input type="text" id="location-query" placeholder="Enter address or place name...">
|
136 |
+
<button id="search-location-button" class="btn btn-secondary !py-3">
|
137 |
+
<i class="icon-magnifier mr-1"></i> Search
|
138 |
+
</button>
|
139 |
+
</div>
|
140 |
+
</div>
|
141 |
+
<p class="text-center text-sm text-gray-500 my-4">OR ENTER COORDINATES / CLICK MAP</p>
|
142 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-5 mb-5">
|
143 |
+
<div>
|
144 |
+
<label for="latitude">Latitude:</label>
|
145 |
+
<input type="number" id="latitude" name="latitude" step="any" value="18.520962" placeholder="e.g., 18.520962">
|
146 |
+
</div>
|
147 |
+
<div>
|
148 |
+
<label for="longitude">Longitude:</label>
|
149 |
+
<input type="number" id="longitude" name="longitude" step="any" value="73.857672" placeholder="e.g., 73.857672">
|
150 |
+
</div>
|
151 |
+
</div>
|
152 |
+
|
153 |
+
<div class="mb-6">
|
154 |
+
<label>Select precise location by clicking on the map:</label>
|
155 |
+
<div class="map-container">
|
156 |
+
<div id="input-map"></div>
|
157 |
+
</div>
|
158 |
+
</div>
|
159 |
+
|
160 |
+
<div class="flex flex-col sm:flex-row justify-center items-center gap-4 mt-8">
|
161 |
+
<button id="analyze-button" class="btn btn-primary w-full sm:w-auto">
|
162 |
+
<span id="button-text">Analyze Location</span>
|
163 |
+
<i id="analyze-icon" class="icon-paper-plane ml-2"></i>
|
164 |
+
<div id="button-spinner" class="btn-spinner hidden"></div>
|
165 |
+
</button>
|
166 |
+
<button id="use-my-location" class="btn btn-secondary w-full sm:w-auto">
|
167 |
+
<i class="icon-location-pin mr-2"></i>
|
168 |
+
Use My Current Location
|
169 |
+
</button>
|
170 |
+
</div>
|
171 |
+
</section>
|
172 |
+
|
173 |
+
<div id="analysis-overlay" class="fixed inset-0 flex items-center justify-start px-10">
|
174 |
+
<div class="bg-white p-10 rounded-xl shadow-2xl text-left">
|
175 |
+
<div class="w-16 h-16 border-6 border-blue-500 border-t-transparent rounded-full animate-spin mb-6"></div>
|
176 |
+
<p class="text-2xl font-semibold text-gray-700">Analyzing Location Data...</p>
|
177 |
+
<p class="text-lg text-gray-500 mt-2">This may take a few moments.</p>
|
178 |
+
</div>
|
179 |
+
</div>
|
180 |
+
|
181 |
+
|
182 |
+
<div id="error-message-container" class="hidden my-6 p-5 border-l-4 rounded-md shadow-md"> {/* Base classes, specific colors in JS */}
|
183 |
+
<div class="flex">
|
184 |
+
<div class="flex-shrink-0">
|
185 |
+
<i class="icon-info text-2xl"></i> {/* Icon class will be set by JS */}
|
186 |
+
</div>
|
187 |
+
<div class="ml-4">
|
188 |
+
<h3 class="text-lg font-bold">Notice</h3> {/* Title will be set by JS */}
|
189 |
+
<div class="mt-2 text-md">
|
190 |
+
<p id="error-text"></p>
|
191 |
+
</div>
|
192 |
+
</div>
|
193 |
+
</div>
|
194 |
+
</div>
|
195 |
+
|
196 |
+
<section id="results-section" class="hidden">
|
197 |
+
|
198 |
+
<div class="card">
|
199 |
+
<div class="flex flex-col sm:flex-row justify-between items-start mb-4">
|
200 |
+
<div>
|
201 |
+
<h2 class="text-2xl font-bold" id="location-name-display">Site Assessment</h2>
|
202 |
+
<p class="text-md text-gray-500" id="current-coords-display">Lat: N/A, Lon: N/A</p>
|
203 |
+
</div>
|
204 |
+
<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>
|
205 |
+
</div>
|
206 |
+
|
207 |
+
<div class="score-gauge-container mt-4 mb-5">
|
208 |
+
<div class="score-gauge">
|
209 |
+
<div class="score-gauge-bg"></div>
|
210 |
+
<div id="score-gauge-meter-dynamic" class="score-gauge-meter"></div>
|
211 |
+
<div class="score-gauge-overlay"></div>
|
212 |
+
</div>
|
213 |
+
<div id="safety-score-value-display" class="safety-score-value-display">N/A</div>
|
214 |
+
<div class="safety-score-label-display">Overall Safety Score</div>
|
215 |
+
</div>
|
216 |
+
|
217 |
+
<div class="mt-6">
|
218 |
+
<h3 class="text-xl font-semibold mb-2">Assessment Summary:</h3>
|
219 |
+
<p id="summary-assessment" class="text-md leading-relaxed">Loading assessment...</p>
|
220 |
+
</div>
|
221 |
+
<div class="mt-4">
|
222 |
+
<h3 class="text-xl font-semibold mb-1">Suitability:</h3>
|
223 |
+
<p id="suitability-statement" class="text-md font-bold">N/A</p>
|
224 |
+
</div>
|
225 |
+
</div>
|
226 |
+
|
227 |
+
<div class="card">
|
228 |
+
<h2 class="text-2xl font-bold mb-6">Detailed Risk Analysis</h2>
|
229 |
+
|
230 |
+
<div class="accordion-item">
|
231 |
+
<div class="accordion-header">
|
232 |
+
<h3 class="text-xl flex items-center text-red-700"><i class="icon-layers mr-3"></i>Geological Risks</h3>
|
233 |
+
<i class="icon-arrow-right accordion-arrow"></i>
|
234 |
+
</div>
|
235 |
+
<div class="accordion-content">
|
236 |
+
<div class="space-y-5 p-3">
|
237 |
+
<div id="earthquake-risk-details" class="risk-detail-item"></div>
|
238 |
+
<div id="landslide-risk-details" class="risk-detail-item"></div>
|
239 |
+
<div id="soil-stability-details" class="risk-detail-item"></div>
|
240 |
+
</div>
|
241 |
+
</div>
|
242 |
+
</div>
|
243 |
+
|
244 |
+
<div class="accordion-item">
|
245 |
+
<div class="accordion-header">
|
246 |
+
<h3 class="text-xl flex items-center text-blue-700"><i class="icon-drop mr-3"></i>Hydrological Risks</h3>
|
247 |
+
<i class="icon-arrow-right accordion-arrow"></i>
|
248 |
+
</div>
|
249 |
+
<div class="accordion-content">
|
250 |
+
<div class="space-y-5 p-3">
|
251 |
+
<div id="flood-risk-details" class="risk-detail-item"></div>
|
252 |
+
<div id="tsunami-risk-details" class="hidden risk-detail-item"></div>
|
253 |
+
</div>
|
254 |
+
</div>
|
255 |
+
</div>
|
256 |
+
|
257 |
+
<div id="other-environmental-risks-accordion" class="accordion-item hidden">
|
258 |
+
<div class="accordion-header">
|
259 |
+
<h3 class="text-xl flex items-center text-purple-700"><i class="icon-globe-alt mr-3"></i>Other Environmental Risks</h3>
|
260 |
+
<i class="icon-arrow-right accordion-arrow"></i>
|
261 |
+
</div>
|
262 |
+
<div class="accordion-content">
|
263 |
+
<div id="other-environmental-risks-list" class="space-y-5 p-3"></div>
|
264 |
+
</div>
|
265 |
+
</div>
|
266 |
+
<hr class="my-8 border-gray-200">
|
267 |
+
<div>
|
268 |
+
<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>
|
269 |
+
<ul id="key-risk-factors-summary" class="custom-list space-y-2 text-md"></ul>
|
270 |
+
</div>
|
271 |
+
</div>
|
272 |
+
|
273 |
+
<div class="card">
|
274 |
+
<h2 class="text-2xl font-bold mb-6">Recommendations & Further Actions</h2>
|
275 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-8">
|
276 |
+
<div>
|
277 |
+
<h3 class="text-xl font-semibold mb-4 flex items-center text-green-700">
|
278 |
+
<i class="icon-check mr-3"></i>Mitigation Recommendations
|
279 |
+
</h3>
|
280 |
+
<ul id="mitigation-recommendations-list" class="custom-list space-y-2 text-md"></ul>
|
281 |
+
</div>
|
282 |
+
<div>
|
283 |
+
<h3 class="text-xl font-semibold mb-4 flex items-center text-yellow-700">
|
284 |
+
<i class="icon-magnifier-add mr-3"></i>Further Investigations Needed
|
285 |
+
</h3>
|
286 |
+
<ul id="further-investigations-list" class="custom-list space-y-2 text-md"></ul>
|
287 |
+
</div>
|
288 |
+
</div>
|
289 |
+
</div>
|
290 |
+
|
291 |
+
<div class="card">
|
292 |
+
<h2 class="text-2xl font-bold mb-5">Site Map & Alternatives Overview</h2>
|
293 |
+
<div class="map-container">
|
294 |
+
<div id="results-map"></div>
|
295 |
+
</div>
|
296 |
+
</div>
|
297 |
+
|
298 |
+
<div id="alternative-locations-section" class="card hidden">
|
299 |
+
<h2 class="text-2xl font-bold mb-5 flex items-center">
|
300 |
+
<i class="icon-directions mr-3 text-blue-600"></i>Alternative Location Analysis
|
301 |
+
</h2>
|
302 |
+
<div id="alternative-locations-container" class="space-y-6">
|
303 |
+
<p class="text-md text-gray-500">No significantly better alternatives identified or loading...</p>
|
304 |
+
</div>
|
305 |
+
</div>
|
306 |
+
|
307 |
+
<div class="card text-md">
|
308 |
+
<p><strong>Data Confidence:</strong> <span id="data-confidence" class="font-semibold">N/A</span></p>
|
309 |
+
<p id="disclaimer-text" class="mt-3 text-sm text-gray-500 italic">Disclaimer will be loaded here.</p>
|
310 |
+
</div>
|
311 |
+
</section>
|
312 |
+
</div>
|
313 |
+
|
314 |
+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
315 |
+
|
316 |
+
<script>
|
317 |
+
// --- Leaflet Icons ---
|
318 |
+
const createIcon = (color) => L.icon({
|
319 |
+
iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${color}.png`,
|
320 |
+
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
|
321 |
+
iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]
|
322 |
+
});
|
323 |
+
const primaryLocationIcon = createIcon('blue');
|
324 |
+
const saferAlternativeIcon = createIcon('green');
|
325 |
+
const otherAlternativeIcon = createIcon('orange');
|
326 |
+
const selectionIcon = createIcon('red');
|
327 |
+
|
328 |
+
// --- DOM Element References (ensure all are captured) ---
|
329 |
+
let inputMap, resultsMap, inputMarker, currentResultMarker;
|
330 |
+
const alternativeMarkers = [];
|
331 |
+
|
332 |
+
const latitudeInput = document.getElementById('latitude');
|
333 |
+
const longitudeInput = document.getElementById('longitude');
|
334 |
+
const locationQueryInput = document.getElementById('location-query');
|
335 |
+
const searchLocationButton = document.getElementById('search-location-button');
|
336 |
+
const analyzeButton = document.getElementById('analyze-button');
|
337 |
+
const buttonText = document.getElementById('button-text');
|
338 |
+
const buttonSpinner = document.getElementById('button-spinner');
|
339 |
+
const analyzeIcon = document.getElementById('analyze-icon');
|
340 |
+
const useMyLocationButton = document.getElementById('use-my-location');
|
341 |
+
|
342 |
+
const resultsSection = document.getElementById('results-section');
|
343 |
+
const analysisOverlay = document.getElementById('analysis-overlay');
|
344 |
+
const errorMessageContainer = document.getElementById('error-message-container');
|
345 |
+
const errorText = document.getElementById('error-text');
|
346 |
+
|
347 |
+
const locationNameDisplay = document.getElementById('location-name-display');
|
348 |
+
const currentCoordsDisplay = document.getElementById('current-coords-display');
|
349 |
+
const suitabilityBadge = document.getElementById('suitability-badge');
|
350 |
+
const scoreValueDisplay = document.getElementById('safety-score-value-display');
|
351 |
+
const summaryAssessmentP = document.getElementById('summary-assessment');
|
352 |
+
const suitabilityStatementP = document.getElementById('suitability-statement');
|
353 |
+
|
354 |
+
const earthquakeRiskDetailsDiv = document.getElementById('earthquake-risk-details');
|
355 |
+
const landslideRiskDetailsDiv = document.getElementById('landslide-risk-details');
|
356 |
+
const soilStabilityDetailsDiv = document.getElementById('soil-stability-details');
|
357 |
+
const floodRiskDetailsDiv = document.getElementById('flood-risk-details');
|
358 |
+
const tsunamiRiskDetailsDiv = document.getElementById('tsunami-risk-details');
|
359 |
+
const otherEnvRisksAccordion = document.getElementById('other-environmental-risks-accordion');
|
360 |
+
const otherEnvRisksList = document.getElementById('other-environmental-risks-list');
|
361 |
+
const keyRiskFactorsUl = document.getElementById('key-risk-factors-summary');
|
362 |
+
const mitigationRecommendationsUl = document.getElementById('mitigation-recommendations-list');
|
363 |
+
const furtherInvestigationsUl = document.getElementById('further-investigations-list');
|
364 |
+
const altLocationsSection = document.getElementById('alternative-locations-section');
|
365 |
+
const altLocationsContainer = document.getElementById('alternative-locations-container');
|
366 |
+
const dataConfidenceSpan = document.getElementById('data-confidence');
|
367 |
+
const disclaimerP = document.getElementById('disclaimer-text');
|
368 |
+
|
369 |
+
// --- Initialization ---
|
370 |
+
document.addEventListener('DOMContentLoaded', () => {
|
371 |
+
analysisOverlay.classList.remove('visible');
|
372 |
+
|
373 |
+
inputMap = L.map('input-map', { scrollWheelZoom: true, attributionControl: false }).setView([18.520962, 73.857672], 12); // Default to Pune
|
374 |
+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, opacity: 0.9 }).addTo(inputMap);
|
375 |
+
L.control.attribution({prefix: false}).addTo(inputMap);
|
376 |
+
updateInputMarker(18.520962, 73.857672);
|
377 |
+
|
378 |
+
inputMap.on('click', function(e) {
|
379 |
+
const lat = e.latlng.lat;
|
380 |
+
const lon = e.latlng.lng;
|
381 |
+
latitudeInput.value = lat.toFixed(6);
|
382 |
+
longitudeInput.value = lon.toFixed(6);
|
383 |
+
updateInputMarker(lat, lon);
|
384 |
+
locationQueryInput.value = '';
|
385 |
+
});
|
386 |
+
|
387 |
+
resultsMap = L.map('results-map', { scrollWheelZoom: false, attributionControl: false }).setView([20.5937, 78.9629], 5); // Default to India view
|
388 |
+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, opacity: 0.9 }).addTo(resultsMap);
|
389 |
+
L.control.attribution({prefix: false}).addTo(resultsMap);
|
390 |
+
|
391 |
+
searchLocationButton.addEventListener('click', handleLocationSearch);
|
392 |
+
locationQueryInput.addEventListener('keypress', e => { if (e.key === 'Enter') handleLocationSearch(); });
|
393 |
+
analyzeButton.addEventListener('click', handleAnalysis);
|
394 |
+
useMyLocationButton.addEventListener('click', getUserLocationAndAnalyze);
|
395 |
+
|
396 |
+
document.querySelectorAll('.accordion-header').forEach(header => {
|
397 |
+
header.addEventListener('click', () => {
|
398 |
+
const content = header.nextElementSibling;
|
399 |
+
header.classList.toggle('open');
|
400 |
+
// content.classList.toggle('open'); // Replaced with direct style manipulation
|
401 |
+
if (content.style.maxHeight && content.style.maxHeight !== "0px") {
|
402 |
+
content.style.maxHeight = "0px";
|
403 |
+
content.style.paddingTop = "0px";
|
404 |
+
content.style.paddingBottom = "0px";
|
405 |
+
} else {
|
406 |
+
content.style.maxHeight = content.scrollHeight + "px";
|
407 |
+
content.style.paddingTop = "1rem"; // Or your desired padding
|
408 |
+
content.style.paddingBottom = "1rem";
|
409 |
+
}
|
410 |
+
});
|
411 |
+
});
|
412 |
+
});
|
413 |
+
|
414 |
+
// --- Core Functions ---
|
415 |
+
function updateInputMarker(lat, lon, zoomLevel = 13) {
|
416 |
+
if (inputMarker) inputMap.removeLayer(inputMarker);
|
417 |
+
inputMarker = L.marker([lat, lon], {icon: selectionIcon}).addTo(inputMap);
|
418 |
+
inputMap.setView([lat, lon], zoomLevel, {animate: true});
|
419 |
+
}
|
420 |
+
|
421 |
+
async function handleLocationSearch() {
|
422 |
+
const query = locationQueryInput.value.trim();
|
423 |
+
if (!query) { displayError("Please enter a location to search."); return; }
|
424 |
+
|
425 |
+
searchLocationButton.disabled = true;
|
426 |
+
const originalSearchHTML = searchLocationButton.innerHTML;
|
427 |
+
searchLocationButton.innerHTML = `<div class="btn-spinner !ml-0 !mr-0 !w-4 !h-4"></div>`;
|
428 |
+
|
429 |
+
try {
|
430 |
+
const response = await fetch('/api/geocode', {
|
431 |
+
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query })
|
432 |
+
});
|
433 |
+
const data = await response.json();
|
434 |
+
if (!response.ok || data.error) throw new Error(data.error || "Location not found.");
|
435 |
+
|
436 |
+
latitudeInput.value = parseFloat(data.latitude).toFixed(6);
|
437 |
+
longitudeInput.value = parseFloat(data.longitude).toFixed(6);
|
438 |
+
updateInputMarker(data.latitude, data.longitude, 15);
|
439 |
+
locationQueryInput.value = data.display_name;
|
440 |
+
hideError();
|
441 |
+
} catch (error) {
|
442 |
+
console.error("Geocoding error:", error);
|
443 |
+
displayError(error.message);
|
444 |
+
} finally {
|
445 |
+
searchLocationButton.disabled = false;
|
446 |
+
searchLocationButton.innerHTML = originalSearchHTML;
|
447 |
+
}
|
448 |
+
}
|
449 |
+
|
450 |
+
function showLoadingState(isLoading) {
|
451 |
+
if (isLoading) {
|
452 |
+
analysisOverlay.classList.add('visible');
|
453 |
+
buttonText.textContent = 'Analyzing...';
|
454 |
+
analyzeIcon.classList.add('hidden');
|
455 |
+
buttonSpinner.classList.remove('hidden');
|
456 |
+
analyzeButton.disabled = true;
|
457 |
+
} else {
|
458 |
+
analysisOverlay.classList.remove('visible');
|
459 |
+
buttonText.textContent = 'Analyze Location';
|
460 |
+
analyzeIcon.classList.remove('hidden');
|
461 |
+
buttonSpinner.classList.add('hidden');
|
462 |
+
analyzeButton.disabled = false;
|
463 |
+
}
|
464 |
+
}
|
465 |
+
|
466 |
+
function displayError(message, isWarning = false) {
|
467 |
+
errorText.innerHTML = message;
|
468 |
+
errorMessageContainer.classList.remove('hidden');
|
469 |
+
const errorIconEl = errorMessageContainer.querySelector('i');
|
470 |
+
const errorTitleEl = errorMessageContainer.querySelector('h3');
|
471 |
+
|
472 |
+
if (isWarning) {
|
473 |
+
errorMessageContainer.className = 'my-6 p-5 bg-yellow-50 border-l-4 border-yellow-500 text-yellow-700 rounded-md shadow-md flex';
|
474 |
+
if(errorIconEl) errorIconEl.className = 'icon-info text-2xl text-yellow-500';
|
475 |
+
if(errorTitleEl) errorTitleEl.textContent = "Notice";
|
476 |
+
} else {
|
477 |
+
errorMessageContainer.className = 'my-6 p-5 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-md shadow-md flex';
|
478 |
+
if(errorIconEl) errorIconEl.className = 'icon-close text-2xl text-red-500';
|
479 |
+
if(errorTitleEl) errorTitleEl.textContent = "Analysis Error";
|
480 |
+
}
|
481 |
+
resultsSection.classList.add('hidden');
|
482 |
+
}
|
483 |
+
function hideError() { errorMessageContainer.classList.add('hidden'); }
|
484 |
+
|
485 |
+
async function handleAnalysis() {
|
486 |
+
const latitude = parseFloat(latitudeInput.value);
|
487 |
+
const longitude = parseFloat(longitudeInput.value);
|
488 |
+
|
489 |
+
if (isNaN(latitude) || isNaN(longitude) || latitude < -90 || latitude > 90 || longitude < -180 || longitude > 180) {
|
490 |
+
displayError("Valid latitude (-90 to 90) & longitude (-180 to 180) required."); return;
|
491 |
+
}
|
492 |
+
|
493 |
+
hideError(); showLoadingState(true); resultsSection.classList.add('hidden');
|
494 |
+
|
495 |
+
try {
|
496 |
+
const response = await fetch('/api/analyze_location', {
|
497 |
+
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ latitude, longitude })
|
498 |
+
});
|
499 |
+
const data = await response.json();
|
500 |
+
|
501 |
+
if (!response.ok) throw new Error(data.error_message || data.error || `Analysis failed: ${response.status}`);
|
502 |
+
if (data.error_message && response.ok && !data.safety_score) { // Check if it's a fallback error from backend
|
503 |
+
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);
|
504 |
+
}
|
505 |
+
|
506 |
+
resultsSection.classList.remove('hidden');
|
507 |
+
if (resultsMap) resultsMap.invalidateSize();
|
508 |
+
|
509 |
+
displayDetailedResults(data, latitude, longitude);
|
510 |
+
updateResultsMap(data, latitude, longitude);
|
511 |
+
setTimeout(() => {
|
512 |
+
const firstResultCard = resultsSection.querySelector('.card');
|
513 |
+
if (firstResultCard) {
|
514 |
+
firstResultCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
515 |
+
}
|
516 |
+
}, 300);
|
517 |
+
|
518 |
+
} catch (error) {
|
519 |
+
console.error('Analysis error:', error);
|
520 |
+
displayError(error.message || "Unexpected error during analysis.");
|
521 |
+
} finally {
|
522 |
+
showLoadingState(false);
|
523 |
+
}
|
524 |
+
}
|
525 |
+
|
526 |
+
function getUserLocationAndAnalyze() {
|
527 |
+
if (!navigator.geolocation) { displayError("Geolocation not supported by this browser."); return; }
|
528 |
+
|
529 |
+
const originalButtonHTML = useMyLocationButton.innerHTML;
|
530 |
+
useMyLocationButton.innerHTML = `<div class="btn-spinner !ml-0 !mr-2"></div> Locating...`;
|
531 |
+
useMyLocationButton.disabled = true;
|
532 |
+
|
533 |
+
navigator.geolocation.getCurrentPosition(
|
534 |
+
position => {
|
535 |
+
const { latitude: lat, longitude: lon } = position.coords;
|
536 |
+
latitudeInput.value = lat.toFixed(6);
|
537 |
+
longitudeInput.value = lon.toFixed(6);
|
538 |
+
updateInputMarker(lat, lon);
|
539 |
+
locationQueryInput.value = '';
|
540 |
+
useMyLocationButton.innerHTML = originalButtonHTML;
|
541 |
+
useMyLocationButton.disabled = false;
|
542 |
+
handleAnalysis();
|
543 |
+
},
|
544 |
+
error => {
|
545 |
+
console.error("Geolocation error:", error);
|
546 |
+
displayError("Could not get current location. Check browser permissions.");
|
547 |
+
useMyLocationButton.innerHTML = originalButtonHTML;
|
548 |
+
useMyLocationButton.disabled = false;
|
549 |
+
},
|
550 |
+
{ timeout: 10000, enableHighAccuracy: true }
|
551 |
+
);
|
552 |
+
}
|
553 |
+
|
554 |
+
function getRiskBadgeClasses(riskLevel) {
|
555 |
+
riskLevel = riskLevel ? String(riskLevel).toLowerCase().replace(/[\s-]+/g, "_") : 'not_assessed';
|
556 |
+
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' };
|
557 |
+
return classMap[riskLevel] || 'risk-not_assessed';
|
558 |
+
}
|
559 |
+
|
560 |
+
function formatRiskDetail(container, title, riskData) {
|
561 |
+
container.innerHTML = '';
|
562 |
+
if (!riskData || (riskData.level === undefined && riskData.type === undefined)) {
|
563 |
+
container.innerHTML = `<p class="text-sm text-gray-500">${title}: Data unavailable or not applicable.</p>`; return;
|
564 |
+
}
|
565 |
+
const level = riskData.level || riskData.type;
|
566 |
+
let detailsHTML = `<p class="text-sm text-gray-600 leading-relaxed">${riskData.details || 'No specific details provided.'}</p>`;
|
567 |
+
if (riskData.concerns && riskData.concerns.length > 0) {
|
568 |
+
detailsHTML += `<ul class="list-disc list-inside text-xs text-gray-500 mt-2 pl-3 space-y-1">`;
|
569 |
+
riskData.concerns.forEach(concern => detailsHTML += `<li>${concern}</li>`);
|
570 |
+
detailsHTML += `</ul>`;
|
571 |
+
}
|
572 |
+
container.innerHTML = `
|
573 |
+
<div class="flex justify-between items-center mb-1.5">
|
574 |
+
<strong class="text-md font-medium text-gray-700">${title}</strong>
|
575 |
+
<span class="risk-badge ${getRiskBadgeClasses(level)}">${String(level).replace(/_/g, ' ')}</span>
|
576 |
+
</div>
|
577 |
+
${detailsHTML}
|
578 |
+
`;
|
579 |
+
}
|
580 |
+
|
581 |
+
function updateSafetyGauge(score) {
|
582 |
+
const meter = document.getElementById('score-gauge-meter-dynamic');
|
583 |
+
score = Math.max(0, Math.min(100, parseInt(score) || 0));
|
584 |
+
scoreValueDisplay.textContent = score;
|
585 |
+
const rotation = (score / 100) * 180;
|
586 |
+
meter.style.transform = `rotate(${rotation}deg)`;
|
587 |
+
if (score >= 70) scoreValueDisplay.style.color = '#047857';
|
588 |
+
else if (score >= 40) scoreValueDisplay.style.color = '#CA8A04';
|
589 |
+
else scoreValueDisplay.style.color = '#B91C1C';
|
590 |
+
}
|
591 |
+
|
592 |
+
function displayDetailedResults(data, lat, lon) {
|
593 |
+
locationNameDisplay.textContent = data.location_name || "Site Assessment";
|
594 |
+
currentCoordsDisplay.textContent = `Lat: ${lat.toFixed(4)}, Lon: ${lon.toFixed(4)}`;
|
595 |
+
|
596 |
+
updateSafetyGauge(data.safety_score || 0);
|
597 |
+
summaryAssessmentP.innerHTML = data.summary_assessment ? data.summary_assessment.replace(/\n/g, '<br>') : 'No summary provided.'; // Allow line breaks
|
598 |
+
suitabilityStatementP.textContent = data.suitability_statement || 'Suitability not determined.';
|
599 |
+
|
600 |
+
const suitability = String(data.suitability_statement || "").toLowerCase();
|
601 |
+
let badgeClass = "px-4 py-2 text-md font-semibold rounded-full self-start sm:self-center transition-all duration-300 ";
|
602 |
+
if (suitability.includes("suitable") || suitability.includes("recommended")) badgeClass += "bg-green-100 text-green-700 border border-green-300";
|
603 |
+
else if (suitability.includes("caution") || suitability.includes("concerns") || suitability.includes("mitigation")) badgeClass += "bg-yellow-100 text-yellow-700 border border-yellow-300";
|
604 |
+
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";
|
605 |
+
else badgeClass += "bg-gray-100 text-gray-700 border border-gray-300";
|
606 |
+
suitabilityBadge.className = badgeClass;
|
607 |
+
suitabilityBadge.textContent = data.suitability_statement ? (data.suitability_statement.split(' ')[0] + (data.suitability_statement.split(' ')[1] ? ' ' + data.suitability_statement.split(' ')[1] : '')) : "Pending";
|
608 |
+
|
609 |
+
|
610 |
+
formatRiskDetail(earthquakeRiskDetailsDiv, 'Earthquake', data.geological_risks?.earthquake_risk);
|
611 |
+
formatRiskDetail(landslideRiskDetailsDiv, 'Landslide', data.geological_risks?.landslide_risk);
|
612 |
+
formatRiskDetail(soilStabilityDetailsDiv, 'Soil Stability', data.geological_risks?.soil_stability);
|
613 |
+
|
614 |
+
formatRiskDetail(floodRiskDetailsDiv, 'Flood', data.hydrological_risks?.flood_risk);
|
615 |
+
if (data.hydrological_risks?.tsunami_risk && data.hydrological_risks.tsunami_risk.level && data.hydrological_risks.tsunami_risk.level.toLowerCase() !== 'negligible') {
|
616 |
+
formatRiskDetail(tsunamiRiskDetailsDiv, 'Tsunami', data.hydrological_risks.tsunami_risk);
|
617 |
+
tsunamiRiskDetailsDiv.classList.remove('hidden');
|
618 |
+
} else { tsunamiRiskDetailsDiv.classList.add('hidden'); }
|
619 |
+
|
620 |
+
otherEnvRisksList.innerHTML = '';
|
621 |
+
if (data.other_environmental_risks && data.other_environmental_risks.length > 0) {
|
622 |
+
data.other_environmental_risks.forEach(risk => {
|
623 |
+
const riskDiv = document.createElement('div');
|
624 |
+
riskDiv.className = 'risk-detail-item';
|
625 |
+
formatRiskDetail(riskDiv, risk.type, risk);
|
626 |
+
otherEnvRisksList.appendChild(riskDiv);
|
627 |
+
});
|
628 |
+
otherEnvRisksAccordion.classList.remove('hidden');
|
629 |
+
} else { otherEnvRisksAccordion.classList.add('hidden'); }
|
630 |
+
|
631 |
+
updateList(keyRiskFactorsUl, data.key_risk_factors_summary, 'No specific key risk factors highlighted.');
|
632 |
+
updateList(mitigationRecommendationsUl, data.mitigation_recommendations, 'No specific mitigation strategies provided.');
|
633 |
+
updateList(furtherInvestigationsUl, data.further_investigations_needed, 'No specific further investigations suggested.');
|
634 |
+
|
635 |
+
altLocationsContainer.innerHTML = '';
|
636 |
+
if (data.alternative_locations_analysis && data.alternative_locations_analysis.length > 0) {
|
637 |
+
data.alternative_locations_analysis.forEach(alt => {
|
638 |
+
const card = document.createElement('div');
|
639 |
+
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';
|
640 |
+
let prosConsHTML = '';
|
641 |
+
if ((alt.potential_pros && alt.potential_pros.length > 0) || (alt.potential_cons && alt.potential_cons.length > 0)) {
|
642 |
+
prosConsHTML += '<div class="text-xs mt-3 pt-3 border-t border-gray-200 space-y-1.5">';
|
643 |
+
if (alt.potential_pros && alt.potential_pros.length) prosConsHTML += `<div><strong class="text-green-600">Pros:</strong> ${alt.potential_pros.join('; ')}</div>`;
|
644 |
+
if (alt.potential_cons && alt.potential_cons.length) prosConsHTML += `<div><strong class="text-red-600">Cons:</strong> ${alt.potential_cons.join('; ')}</div>`;
|
645 |
+
prosConsHTML += '</div>';
|
646 |
+
}
|
647 |
+
card.innerHTML = `
|
648 |
+
<div class="flex justify-between items-start mb-2">
|
649 |
+
<div>
|
650 |
+
<h4 class="font-semibold text-blue-600 text-lg">${alt.name_suggestion || 'Alternative Site'}</h4>
|
651 |
+
<p class="text-xs text-gray-500">${alt.actual_name || `Lat: ${parseFloat(alt.latitude).toFixed(3)}, Lon: ${parseFloat(alt.longitude).toFixed(3)}`}</p>
|
652 |
+
</div>
|
653 |
+
<span class="text-sm text-gray-500 whitespace-nowrap font-medium">${alt.estimated_distance_km} km</span>
|
654 |
+
</div>
|
655 |
+
<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>
|
656 |
+
<p class="text-sm text-gray-600 mb-2">${alt.brief_justification || 'General alternative suggestion.'}</p>
|
657 |
+
${prosConsHTML}
|
658 |
+
`;
|
659 |
+
card.addEventListener('click', () => {
|
660 |
+
resultsMap.setView([parseFloat(alt.latitude), parseFloat(alt.longitude)], 14, {animate: true});
|
661 |
+
alternativeMarkers.forEach(m => {
|
662 |
+
const markerLatLng = m.getLatLng();
|
663 |
+
if (markerLatLng.lat.toFixed(4) === parseFloat(alt.latitude).toFixed(4) && markerLatLng.lng.toFixed(4) === parseFloat(alt.longitude).toFixed(4)) {
|
664 |
+
m.openPopup();
|
665 |
+
}
|
666 |
+
});
|
667 |
+
});
|
668 |
+
altLocationsContainer.appendChild(card);
|
669 |
+
});
|
670 |
+
altLocationsSection.classList.remove('hidden');
|
671 |
+
} else {
|
672 |
+
altLocationsContainer.innerHTML = '<p class="text-md text-gray-500">No significantly better alternative locations were identified based on the current analysis.</p>';
|
673 |
+
altLocationsSection.classList.remove('hidden');
|
674 |
+
}
|
675 |
+
|
676 |
+
dataConfidenceSpan.textContent = data.data_confidence_level || 'N/A';
|
677 |
+
disclaimerP.textContent = data.disclaimer || 'Standard disclaimers apply. Consult professionals.';
|
678 |
+
}
|
679 |
+
|
680 |
+
function updateList(listElement, items, emptyMessage) {
|
681 |
+
listElement.innerHTML = '';
|
682 |
+
if (items && items.length > 0) {
|
683 |
+
items.forEach(item => {
|
684 |
+
const li = document.createElement('li');
|
685 |
+
li.textContent = item;
|
686 |
+
listElement.appendChild(li);
|
687 |
+
});
|
688 |
+
} else {
|
689 |
+
const li = document.createElement('li');
|
690 |
+
li.textContent = emptyMessage;
|
691 |
+
li.className = "text-gray-500 italic";
|
692 |
+
listElement.appendChild(li);
|
693 |
+
}
|
694 |
+
}
|
695 |
+
|
696 |
+
function updateResultsMap(data, currentLat, currentLng) {
|
697 |
+
if (currentResultMarker) resultsMap.removeLayer(currentResultMarker);
|
698 |
+
alternativeMarkers.forEach(marker => resultsMap.removeLayer(marker));
|
699 |
+
alternativeMarkers.length = 0;
|
700 |
+
|
701 |
+
currentResultMarker = L.marker([currentLat, currentLng], { icon: primaryLocationIcon, zIndexOffset: 1000 })
|
702 |
+
.addTo(resultsMap)
|
703 |
+
.bindPopup(`<b>${data.location_name || 'Analyzed Location'}</b><br>Score: ${data.safety_score || 'N/A'}<br>${data.suitability_statement || ''}`)
|
704 |
+
.openPopup();
|
705 |
+
|
706 |
+
const bounds = L.latLngBounds([[currentLat, currentLng]]);
|
707 |
+
|
708 |
+
if (data.alternative_locations_analysis && data.alternative_locations_analysis.length > 0) {
|
709 |
+
data.alternative_locations_analysis.forEach(alt => {
|
710 |
+
try {
|
711 |
+
const altLat = parseFloat(alt.latitude); const altLng = parseFloat(alt.longitude);
|
712 |
+
if (isNaN(altLat) || isNaN(altLng)) { console.warn("Invalid alt coords:", alt); return; }
|
713 |
+
const icon = (alt.comparative_safety_score_estimate || 0) > (data.safety_score || 0) + 5 ? saferAlternativeIcon : otherAlternativeIcon;
|
714 |
+
const altMarker = L.marker([altLat, altLng], { icon: icon })
|
715 |
+
.addTo(resultsMap)
|
716 |
+
.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`);
|
717 |
+
alternativeMarkers.push(altMarker); bounds.extend([altLat, altLng]);
|
718 |
+
} catch (e) { console.error("Error creating alt marker:", alt, e); }
|
719 |
+
});
|
720 |
+
}
|
721 |
+
|
722 |
+
if (bounds.isValid() && !bounds.getSouthWest().equals(bounds.getNorthEast())) {
|
723 |
+
resultsMap.fitBounds(bounds, { padding: [60, 60], maxZoom: 14, animate: true });
|
724 |
+
} else { resultsMap.setView([currentLat, currentLng], 13, {animate: true}); }
|
725 |
+
}
|
726 |
+
</script>
|
727 |
+
</body>
|
728 |
</html>
|