rajkhanke commited on
Commit
35d7db6
·
verified ·
1 Parent(s): 5a6e9b5

Update templates/index.html

Browse files
Files changed (1) hide show
  1. 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"> {/* Increased padding and spacing */}
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>