Upload 3 files

app.py

@@ -0,0 +1,307 @@
+from flask import Flask, request, jsonify, render_template
+import json
+import requests
+import random
+import math
+import os
+from dotenv import load_dotenv
+
+load_dotenv()  # Load environment variables from .env file
+
+app = Flask(__name__)
+
+GEMINI_API_KEY = "AIzaSyDkiYr-eSkqIXpZ1fHlik_YFsFtfQoFi0w"
+NOMINATIM_USER_AGENT = "GeoSafeConstruct/1.0 ([email protected])"  # IMPORTANT: Change to your app name and contact email
+
+
+# --- Nominatim API Functions ---
+def get_location_name_from_coords(lat, lon):
+    """Fetches a location name/address from coordinates using Nominatim."""
+    headers = {"User-Agent": NOMINATIM_USER_AGENT}
+    url = f"https://nominatim.openstreetmap.org/reverse?format=json&lat={lat}&lon={lon}&zoom=16&addressdetails=1"
+    try:
+        response = requests.get(url, headers=headers, timeout=10)
+        response.raise_for_status()
+        data = response.json()
+        # Construct a readable address, prioritizing certain fields
+        address = data.get('address', {})
+        parts = [
+            address.get('road'), address.get('neighbourhood'), address.get('suburb'),
+            address.get('city_district'), address.get('city'), address.get('town'),
+            address.get('village'), address.get('county'), address.get('state'),
+            address.get('postcode'), address.get('country')
+        ]
+        # Filter out None values and join
+        display_name = data.get('display_name', "Unknown Location")
+        filtered_parts = [part for part in parts if part]
+        if len(filtered_parts) > 3:  # If many parts, use display_name for brevity
+            return display_name
+        elif filtered_parts:
+            return ", ".join(filtered_parts[:3])  # Take first few relevant parts
+        return display_name  # Fallback to full display_name
+    except requests.exceptions.RequestException as e:
+        print(f"Nominatim reverse geocoding error: {e}")
+        return f"Area around {lat:.3f}, {lon:.3f}"
+    except (json.JSONDecodeError, KeyError) as e:
+        print(f"Nominatim response parsing error: {e}")
+        return f"Area around {lat:.3f}, {lon:.3f}"
+
+
+def get_coords_from_location_name(query):
+    """Fetches coordinates from a location name/address using Nominatim."""
+    headers = {"User-Agent": NOMINATIM_USER_AGENT}
+    url = f"https://nominatim.openstreetmap.org/search?q={requests.utils.quote(query)}&format=json&limit=1"
+    try:
+        response = requests.get(url, headers=headers, timeout=10)
+        response.raise_for_status()
+        data = response.json()
+        if data and isinstance(data, list) and len(data) > 0:
+            return {
+                "latitude": float(data[0].get("lat")),
+                "longitude": float(data[0].get("lon")),
+                "display_name": data[0].get("display_name")
+            }
+        return None
+    except requests.exceptions.RequestException as e:
+        print(f"Nominatim geocoding error: {e}")
+        return None
+    except (json.JSONDecodeError, KeyError, IndexError) as e:
+        print(f"Nominatim geocoding response parsing error: {e}")
+        return None
+
+
+# --- Gemini API Functions ---
+def call_gemini_api(prompt_text):
+    """Generic function to call Gemini API."""
+    if not GEMINI_API_KEY:
+        print("GEMINI_API_KEY not found in environment variables.")
+        return None, "Gemini API key not configured."
+
+    url = "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent"
+    headers = {
+        "Content-Type": "application/json",
+        "x-goog-api-key": GEMINI_API_KEY
+    }
+    payload = {
+        "contents": [{"parts": [{"text": prompt_text}]}],
+        "generationConfig": {
+            "response_mime_type": "application/json",
+            "temperature": 0.6,  # Adjust for creativity vs. factuality
+            "topP": 0.9,
+            "topK": 40
+        },
+        "safetySettings": [  # Add safety settings if needed
+            {"category": "HARM_CATEGORY_HARASSMENT", "threshold": "BLOCK_MEDIUM_AND_ABOVE"},
+            {"category": "HARM_CATEGORY_HATE_SPEECH", "threshold": "BLOCK_MEDIUM_AND_ABOVE"},
+            {"category": "HARM_CATEGORY_SEXUALLY_EXPLICIT", "threshold": "BLOCK_MEDIUM_AND_ABOVE"},
+            {"category": "HARM_CATEGORY_DANGEROUS_CONTENT", "threshold": "BLOCK_MEDIUM_AND_ABOVE"}
+        ]
+    }
+
+    try:
+        response = requests.post(url, json=payload, headers=headers, timeout=60)  # Increased timeout
+        response.raise_for_status()
+        gemini_response_data = response.json()
+
+        if 'candidates' not in gemini_response_data or not gemini_response_data['candidates']:
+            print("Gemini API Error: No candidates in response.")
+            print("Full Gemini Response:", gemini_response_data)
+            if 'promptFeedback' in gemini_response_data and 'blockReason' in gemini_response_data['promptFeedback']:
+                return None, f"Content blocked by API: {gemini_response_data['promptFeedback']['blockReason']}"
+            return None, "Gemini API returned no content."
+
+        json_text_content = gemini_response_data['candidates'][0]['content']['parts'][0]['text']
+
+        # Attempt to clean JSON string if it's wrapped in markdown
+        if json_text_content.strip().startswith("```json"):
+            json_text_content = json_text_content.strip()[7:]
+        if json_text_content.strip().endswith("```"):
+            json_text_content = json_text_content.strip()[:-3]
+
+        return json.loads(json_text_content.strip()), None
+    except requests.exceptions.Timeout:
+        print("Gemini API call timed out.")
+        return None, "Analysis request timed out. Please try again."
+    except requests.exceptions.RequestException as e:
+        print(f"Error calling Gemini API (RequestException): {e}")
+        return None, f"Could not connect to analysis service: {e}"
+    except json.JSONDecodeError as e:
+        print(f"Error decoding JSON from Gemini API: {e}")
+        print(f"Received text for JSON parsing: {json_text_content if 'json_text_content' in locals() else 'N/A'}")
+        return None, "AI returned an invalid response format. Please try again."
+    except (KeyError, IndexError) as e:
+        print(f"Error parsing Gemini API response structure: {e}")
+        print(f"Gemini response: {gemini_response_data if 'gemini_response_data' in locals() else 'N/A'}")
+        return None, "AI returned an unexpected response structure."
+    except Exception as e:
+        print(f"An unexpected error occurred during Gemini call: {e}")
+        return None, f"An unexpected error occurred: {e}"
+
+
+def get_safety_analysis_with_gemini(latitude, longitude, location_address):
+    """
+    Calls Gemini API to analyze construction safety.
+    """
+    prompt = f"""
+    **Objective:** Provide a detailed and realistic construction site safety analysis for the location: {location_address} (Latitude: {latitude}, Longitude: {longitude}).
+
+    **Output Format:** STRICTLY JSON. Do NOT include any text outside the JSON structure (e.g., no '```json' or '```' wrappers).
+
+    **JSON Structure:**
+    {{
+        "location_name": "{location_address}", // Use the provided address
+        "safety_score": "integer (0-100, overall safety score, be critical and realistic)",
+        "suitability_statement": "string (e.g., 'Generally Suitable with Mitigations', 'High Caution Advised', 'Not Recommended without Major Intervention')",
+        "summary_assessment": "string (3-4 sentences summarizing key findings, suitability, and major concerns. Be specific.)",
+        "geological_risks": {{
+            "earthquake_risk": {{
+                "level": "string ('Low', 'Medium', 'High', 'Very High', 'Not Assessed')",
+                "details": "string (Specifics like proximity to faults, historical activity, soil liquefaction potential if known. If not assessed, state why.)"
+            }},
+            "landslide_risk": {{
+                "level": "string ('Low', 'Medium', 'High', 'Very High', 'Not Assessed')",
+                "details": "string (Slope stability, soil type, vegetation, historical incidents. If not assessed, state why.)"
+            }},
+            "soil_stability": {{
+                "type": "string ('Stable', 'Moderately Stable', 'Unstable', 'Variable', 'Requires Investigation')",
+                "concerns": ["string array (e.g., 'Expansive clays present', 'High water table', 'Poor drainage', 'Subsidence risk')"]
+            }}
+        }},
+        "hydrological_risks": {{
+            "flood_risk": {{
+                "level": "string ('Low', 'Medium', 'High', 'Very High', 'Not Assessed')",
+                "details": "string (Proximity to water bodies, floodplain maps, historical flooding, drainage issues. If not assessed, state why.)"
+            }},
+            "tsunami_risk": {{ // Only include if geographically relevant (coastal)
+                "level": "string ('Negligible', 'Low', 'Medium', 'High')",
+                "details": "string (Distance from coast, elevation, historical data.)"
+            }}
+        }},
+        "other_environmental_risks": [ // Array of objects, include if relevant
+            {{ "type": "Wildfire", "level": "string ('Low', 'Medium', 'High')", "details": "string (Vegetation, climate, fire history)" }},
+            {{ "type": "Extreme Weather (Hurricanes/Tornadoes/High Winds)", "level": "string ('Low', 'Medium', 'High')", "details": "string (Regional patterns, building code requirements)" }},
+            {{ "type": "Industrial Hazards", "level": "string ('Low', 'Medium', 'High')", "details": "string (Proximity to industrial plants, pipelines, hazardous material routes)" }}
+        ],
+        "key_risk_factors_summary": ["string array (Bulleted list of 3-5 most critical risk factors for this specific site)"],
+        "mitigation_recommendations": ["string array (Actionable, specific recommendations, e.g., 'Conduct Level 2 Geotechnical Survey focusing on shear strength', 'Implement earthquake-resistant design to Zone IV standards', 'Elevate foundation by 1.5m above base flood elevation')"],
+        "further_investigations_needed": ["string array (e.g., 'Detailed hydrological study', 'Environmental Impact Assessment', 'Traffic impact study')"],
+        "alternative_locations_analysis": [ // Up to 2-3 alternatives. If none are significantly better, state that.
+            {{
+                "name_suggestion": "string (Suggest a conceptual name like 'North Ridge Site' or 'Valley View Plot')",
+                "latitude": "float (as string, e.g., '18.5234')",
+                "longitude": "float (as string, e.g., '73.8567')",
+                "estimated_distance_km": "float (as string, e.g., '8.5')",
+                "brief_justification": "string (Why is this a potential alternative? E.g., 'Appears to be on more stable ground', 'Further from flood plain')",
+                "potential_pros": ["string array"],
+                "potential_cons": ["string array"],
+                "comparative_safety_score_estimate": "integer (0-100, relative to primary site)"
+            }}
+        ],
+        "data_confidence_level": "string ('Low', 'Medium', 'High' - based on assumed availability of public data for this general region, not specific site data which is unknown to you)",
+        "disclaimer": "This AI-generated analysis is for preliminary informational purposes only and not a substitute for professional engineering, geological, and environmental assessments. On-site investigations are crucial."
+    }}
+
+    **Guidelines for Content:**
+    - make sumre rnaodmness in score generation not same view ppijn t everytime
+    - Be realistic. If data for a specific risk is unlikely to be publicly available for a random coordinate, mark it 'Not Assessed' and explain.
+    - Focus on actionable insights.
+    - For alternative locations, provide *different* lat/lon coordinates that are plausibly nearby (within 5-20km).
+    - Ensure all string values are properly quoted. Ensure latitudes and longitudes for alternatives are strings representing floats.
+    - The safety_score should reflect a comprehensive evaluation of all risks.
+    - proper spacing and upo down margins shoudl be there
+    """
+    return call_gemini_api(prompt)
+
+
+# --- Flask Routes ---
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+@app.route('/api/geocode', methods=['POST'])
+def geocode_location():
+    data = request.json
+    query = data.get('query')
+    if not query:
+        return jsonify({"error": "Query parameter is required."}), 400
+
+    coords_data = get_coords_from_location_name(query)
+    if coords_data:
+        return jsonify(coords_data), 200
+    else:
+        return jsonify({"error": "Location not found or geocoding failed."}), 404
+
+
+@app.route('/api/analyze_location', methods=['POST'])
+def analyze_location_route():
+    data = request.json
+    try:
+        latitude = float(data.get('latitude'))
+        longitude = float(data.get('longitude'))
+    except (TypeError, ValueError):
+        return jsonify({"error": "Invalid latitude or longitude provided."}), 400
+
+    # Get a human-readable name for the primary location
+    primary_location_address = get_location_name_from_coords(latitude, longitude)
+
+    # Call Gemini for the main analysis
+    analysis_data, error = get_safety_analysis_with_gemini(latitude, longitude, primary_location_address)
+
+    if error:
+        # Fallback to a simpler mock-like structure if Gemini fails critically
+        return jsonify({
+            "error_message": error,
+            "location_name": primary_location_address,
+            "safety_score": random.randint(20, 50),  # Low score to indicate issue
+            "summary_assessment": f"Could not perform detailed analysis due to: {error}. Basic location: {primary_location_address}.",
+            "suitability_statement": "Analysis Incomplete",
+            "geological_risks": {"earthquake_risk": {"level": "Not Assessed", "details": error}},
+            "hydrological_risks": {"flood_risk": {"level": "Not Assessed", "details": error}},
+            "disclaimer": "A technical issue prevented full analysis."
+        }), 500
+
+    # Post-process alternative locations to get their names
+    if analysis_data.get("alternative_locations_analysis"):
+        for alt_loc in analysis_data["alternative_locations_analysis"]:
+            try:
+                alt_lat = float(alt_loc.get("latitude"))
+                alt_lon = float(alt_loc.get("longitude"))
+                alt_loc["actual_name"] = get_location_name_from_coords(alt_lat, alt_lon)
+                # Ensure distance is calculated if not provided by Gemini or if it's nonsensical
+                if not alt_loc.get("estimated_distance_km") or float(alt_loc.get("estimated_distance_km", 0)) == 0:
+                    alt_loc["estimated_distance_km"] = str(
+                        calculate_haversine_distance(latitude, longitude, alt_lat, alt_lon))
+
+            except (TypeError, ValueError, KeyError) as e:
+                print(f"Error processing alternative location coords: {e}, data: {alt_loc}")
+                alt_loc["actual_name"] = "Nearby Area (details unavailable)"
+                # Fallback if lat/lon are missing or invalid for an alternative
+                if "latitude" not in alt_loc or "longitude" not in alt_loc:
+                    alt_loc["latitude"] = str(latitude + (random.random() - 0.5) * 0.05)  # Small offset
+                    alt_loc["longitude"] = str(longitude + (random.random() - 0.5) * 0.05)
+
+    return jsonify(analysis_data), 200
+
+
+def calculate_haversine_distance(lat1, lon1, lat2, lon2):
+    R = 6371  # Radius of Earth in kilometers
+    try:
+        lat1_rad, lon1_rad = math.radians(float(lat1)), math.radians(float(lon1))
+        lat2_rad, lon2_rad = math.radians(float(lat2)), math.radians(float(lon2))
+    except (ValueError, TypeError):
+        print(f"Error converting lat/lon to float for Haversine: {lat1}, {lon1}, {lat2}, {lon2}")
+        return 0.0  # Fallback
+    dlon = lon2_rad - lon1_rad
+    dlat = lat2_rad - lat1_rad
+    a = math.sin(dlat / 2) ** 2 + math.cos(lat1_rad) * math.cos(lat2_rad) * math.sin(dlon / 2) ** 2
+    c = 2 * math.atan2(math.sqrt(a), math.sqrt(1 - a))
+    distance = R * c
+    return round(distance, 1)
+
+
+if __name__ == '__main__':
+    if not GEMINI_API_KEY:
+        print("CRITICAL ERROR: GEMINI_API_KEY is not set in the environment.")
+        print("Please create a .env file with GEMINI_API_KEY=YOUR_API_KEY or set it as an environment variable.")
+    app.run(debug=True, port=5000)

templates/index.html

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

templates/index1.html

@@ -0,0 +1,185 @@
+import os
+import json
+import requests
+from flask import Flask, request, jsonify, send_from_directory
+from flask_cors import CORS
+
+# Configure Flask app
+app = Flask(__name__, static_folder='.')
+CORS(app) # Enable CORS for all origins
+
+# --- Open-Meteo API Configuration ---
+OPENMETEO_BASE_URL = "https://api.open-meteo.com/v1/forecast"
+
+WEATHER_VARIABLES = [
+    "temperature_2m",
+    "relative_humidity_2m",
+    "precipitation",
+    "weathercode",
+    "windspeed_10m",
+    "windgusts_10m",
+    "pressure_msl"
+]
+
+DAILY_VARIABLES = [
+    "precipitation_sum",
+    "temperature_2m_max",
+    "temperature_2m_min"
+]
+
+# --- Data Fetching Functions ---
+
+def get_weather_data(lat, lon):
+    """Fetches current and recent weather data from Open-Meteo."""
+    try:
+        params = {
+            "latitude": lat,
+            "longitude": lon,
+            "current": ",".join(WEATHER_VARIABLES),
+            "daily": ",".join(DAILY_VARIABLES),
+            "past_days": 1,
+            "timezone": "auto",
+            "forecast_days": 1
+        }
+        print(f"Fetching weather data for ({lat}, {lon})...")
+        response = requests.get(OPENMETEO_BASE_URL, params=params)
+        response.raise_for_status() # Raise an HTTPError for bad responses
+        data = response.json()
+        print("Weather data fetched successfully.")
+
+        current = data.get('current', {})
+        daily = data.get('daily', {})
+
+        weather_info = {
+            "source": "Open-Meteo API",
+            "latitude": data.get('latitude'),
+            "longitude": data.get('longitude'),
+            "temperature_celsius_current": current.get('temperature_2m'),
+            "temperature_celsius_max_daily": daily.get('temperature_2m_max', [None])[0],
+            "temperature_celsius_min_daily": daily.get('temperature_2m_min', [None])[0],
+            "humidity_percent_current": current.get('relative_humidity_2m'),
+            "precipitation_mm_current": current.get('precipitation'),
+            "precipitation_mm_past_24h": daily.get('precipitation_sum', [None])[0],
+            "windspeed_kmh_current": current.get('windspeed_10m'),
+            "windgusts_kmh_current": current.get('windgusts_10m'),
+            "pressure_hpa_current": current.get('pressure_msl'),
+            "weathercode_current": current.get('weathercode')
+        }
+        return weather_info
+
+    except requests.exceptions.RequestException as e:
+        print(f"Error fetching weather data: {e}")
+        return {"error": "Could not fetch weather data", "details": str(e)}
+    except Exception as e:
+        print(f"An unexpected error occurred while processing weather data: {e}")
+        return {"error": "An unexpected error occurred with weather data", "details": str(e)}
+
+
+def get_non_weather_data_simulated(lat, lon):
+    """
+    Simulates getting non-weather data.
+    This is still simplified based on rough India geography.
+    """
+    lat = float(lat)
+    lon = float(lon)
+
+    data = {
+        "source": "Simulated/Inferred Data",
+        "latitude": lat,
+        "longitude": lon,
+        "elevation_meters": 50, # Base elevation
+        "proximity_to_coast_km": 800, # Base distance
+        "proximity_to_major_river_km": 200, # Base distance
+        "soil_type": "general",
+        "vegetation_density": "moderate",
+        "historical_disaster_frequency": "medium",
+        "population_density": "moderate"
+    }
+
+    # Adjust simulated data based on location approximations for India
+    if 8 <= lat <= 37 and 68 <= lon <= 97: # Basic India bounds
+        if lat > 28 or lon > 90: # Himalayan region, North East
+            data["elevation_meters"] = 1500 + max(0, lat - 28)*100 + max(0, lon - 90)*50
+            data["soil_type"] = "mountainous/hilly"
+            data["vegetation_density"] = "high"
+            data["historical_disaster_frequency"] = "high (Landslides, Earthquakes, Floods)"
+            data["proximity_to_major_river_km"] = min(data["proximity_to_major_river_km"], 10) if lat > 28 else data["proximity_to_major_river_km"]
+
+
+        if 15 <= lat <= 25 and 70 <= lon <= 85: # Central India, Deccan
+             data["elevation_meters"] = 500 + max(0, lat - 15)*30
+             data["soil_type"] = "black soil/plateau"
+             data["vegetation_density"] = "moderate to low"
+             data["historical_disaster_frequency"] = "medium (Droughts, Heatwaves, Wildfires)"
+             data["population_density"] = "moderate to high"
+
+        if lat < 22 and lon > 75: # South India, Coastal East/West
+             east_coast_dist = abs(lon - 82) * 111
+             west_coast_dist = abs(lon - 74) * 111
+             data["proximity_to_coast_km"] = min(east_coast_dist, west_coast_dist, data["proximity_to_coast_km"])
+             data["elevation_meters"] = 50 + max(0, (22-lat)*10)
+             data["soil_type"] = "coastal alluvial/laterite"
+             data["historical_disaster_frequency"] = "high (Cyclones, Floods, Heatwaves)"
+             data["population_density"] = "high"
+
+
+        if lat > 25 and lon < 80: # North India, Gangetic plains
+            data["elevation_meters"] = 50 + max(0, lat-25)*10
+            data["proximity_to_major_river_km"] = min(data["proximity_to_major_river_km"], 5)
+            data["soil_type"] = "alluvial"
+            data["historical_disaster_frequency"] = "high (Floods, Heatwaves, Droughts)"
+            data["population_density"] = "very high"
+
+    # Add some minor random variation
+    import random
+    data["elevation_meters"] = max(0, data["elevation_meters"] + random.randint(-10, 10))
+    data["proximity_to_coast_km"] = max(0, data["proximity_to_coast_km"] + random.randint(-20, 20))
+    data["proximity_to_major_river_km"] = max(0, data["proximity_to_major_river_km"] + random.randint(-5, 5))
+
+    return data
+
+# --- Flask Routes ---
+
+@app.route('/')
+def index():
+    return send_from_directory('.', 'index.html')
+
+# API endpoint to get location-based data (weather + simulated)
+@app.route('/get_location_data', methods=['POST'])
+def get_location_data():
+    data = request.get_json()
+    lat = data.get('lat')
+    lon = data.get('lon')
+
+    if lat is None or lon is None:
+        return jsonify({"error": "Latitude and Longitude are required"}), 400
+
+    try:
+        # Get real weather data
+        weather_data = get_weather_data(lat, lon)
+        if "error" in weather_data:
+             # If weather data fetch fails, return the error
+             return jsonify({"error": f"Failed to get weather data: {weather_data['details']}"}), 500
+
+        # Get simulated non-weather data
+        non_weather_data = get_non_weather_data_simulated(lat, lon)
+
+        # Combine all data
+        location_data = {
+            "latitude": lat,
+            "longitude": lon,
+            "weather_data": weather_data,
+            "non_weather_data": non_weather_data
+        }
+
+        # Return the combined data
+        return jsonify(location_data)
+
+    except Exception as e:
+        print(f"An error occurred while getting location data: {e}")
+        return jsonify({"error": f"An internal server error occurred: {str(e)}"}), 500
+
+if __name__ == '__main__':
+    # Run the Flask app
+    # Change port if 5000 is in use
+    app.run(debug=True, port=5000)