Spaces:

gauthamnairy
/

TerrainExplorer

Sleeping

App Files Files Community

gauthamnairy commited on Jun 10, 2025

Commit

ef388b3

verified ·

1 Parent(s): c93b11e

Upload index.html

Browse files

Files changed (1) hide show

index.html +640 -0

index.html ADDED Viewed

	@@ -0,0 +1,640 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Terrain Analysis Explorer</title>
+    <!-- Esri ArcGIS Maps SDK for JavaScript -->
+    <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/dark/main.css">
+    <script src="https://js.arcgis.com/4.28/"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: #1a1a1a;
+            color: #ffffff;
+            overflow: hidden;
+        }
+        .app-container {
+            display: flex;
+            height: 100vh;
+            width: 100vw;
+        }
+        /* Left Panel Styling */
+        .left-panel {
+            width: 350px;
+            background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
+            border-right: 1px solid #333;
+        }
+        .app-header {
+            margin-bottom: 30px;
+        }
+        .app-title {
+            font-size: 24px;
+            font-weight: 600;
+            color: #00d4ff;
+            margin-bottom: 8px;
+            background: linear-gradient(45deg, #00d4ff, #0099cc);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -moz-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .app-subtitle {
+            font-size: 14px;
+            color: #aaa;
+            font-weight: 300;
+        }
+        /* Input Section */
+        .input-section {
+            margin-bottom: 30px;
+        }
+        .input-label {
+            display: block;
+            font-size: 14px;
+            font-weight: 500;
+            color: #ddd;
+            margin-bottom: 10px;
+        }
+        .location-input {
+            width: 100%;
+            padding: 12px 16px;
+            font-size: 14px;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid #444;
+            border-radius: 8px;
+            color: #fff;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+        .location-input:focus {
+            outline: none;
+            border-color: #00d4ff;
+            box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+            background: rgba(255, 255, 255, 0.15);
+        }
+        .location-input::placeholder {
+            color: #888;
+        }
+        .analyze-btn {
+            width: 100%;
+            padding: 12px;
+            margin-top: 15px;
+            background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .analyze-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
+        }
+        .analyze-btn:disabled {
+            background: #555;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        /* Results Section */
+        .results-section {
+            flex-grow: 1;
+        }
+        .results-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: #fff;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #333;
+        }
+        .result-item {
+            background: rgba(255, 255, 255, 0.05);
+            padding: 15px;
+            margin-bottom: 15px;
+            border-radius: 8px;
+            border-left: 4px solid #00d4ff;
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+        }
+        .result-item:hover {
+            background: rgba(255, 255, 255, 0.08);
+            transform: translateX(5px);
+        }
+        .result-label {
+            font-size: 12px;
+            color: #aaa;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 5px;
+        }
+        .result-value {
+            font-size: 16px;
+            font-weight: 600;
+            color: #fff;
+        }
+        .coordinates {
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+        }
+        /* Map Container */
+        .map-container {
+            flex-grow: 1;
+            position: relative;
+        }
+        #mapView {
+            width: 100%;
+            height: 100%;
+        }
+        /* Loading Animation */
+        .loading {
+            display: none;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            color: #00d4ff;
+        }
+        .loading.active {
+            display: flex;
+        }
+        .spinner {
+            width: 20px;
+            height: 20px;
+            border: 2px solid #333;
+            border-top: 2px solid #00d4ff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        /* Error/Status Messages */
+        .message {
+            padding: 10px 15px;
+            margin: 15px 0;
+            border-radius: 6px;
+            font-size: 14px;
+            display: none;
+        }
+        .message.error {
+            background: rgba(255, 99, 99, 0.2);
+            border: 1px solid #ff6363;
+            color: #ff6363;
+        }
+        .message.success {
+            background: rgba(99, 255, 99, 0.2);
+            border: 1px solid #63ff63;
+            color: #63ff63;
+        }
+        .message.show {
+            display: block;
+        }
+        /* Helper Text */
+        .helper-text {
+            font-size: 12px;
+            color: #888;
+            margin-top: 10px;
+            line-height: 1.4;
+        }
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .app-container {
+                flex-direction: column;
+            }
+            .left-panel {
+                width: 100%;
+                height: auto;
+                max-height: 40vh;
+                overflow-y: auto;
+            }
+            .map-container {
+                height: 60vh;
+            }
+        }
+        /* Custom Scrollbar */
+        .left-panel::-webkit-scrollbar {
+            width: 6px;
+        }
+        .left-panel::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 3px;
+        }
+        .left-panel::-webkit-scrollbar-thumb {
+            background: #00d4ff;
+            border-radius: 3px;
+        }
+        .left-panel::-webkit-scrollbar-thumb:hover {
+            background: #0099cc;
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <!-- Left Panel for Input and Results -->
+        <div class="left-panel">
+            <div class="app-header">
+                <h1 class="app-title">Terrain Explorer</h1>
+                <p class="app-subtitle">Analyze elevation and land cover data worldwide</p>
+            </div>
+            <!-- Input Section -->
+            <div class="input-section">
+                <label class="input-label" for="locationInput">Enter Coordinates or Place Name</label>
+                <input
+                    type="text"
+                    id="locationInput"
+                    class="location-input"
+                    placeholder="e.g., 40.7128, -74.0060 or New York City"
+                >
+                <div class="helper-text">
+                    Supported formats:<br>
+                    • Decimal: 40.7128, -74.0060<br>
+                    • DMS: 40°42'46"N 74°0'21"W<br>
+                    • Place names: New York City
+                </div>
+                <button id="analyzeBtn" class="analyze-btn">Analyze Location</button>
+            </div>
+            <!-- Loading Indicator -->
+            <div id="loadingIndicator" class="loading">
+                <div class="spinner"></div>
+                <span>Analyzing terrain...</span>
+            </div>
+            <!-- Status Messages -->
+            <div id="statusMessage" class="message"></div>
+            <!-- Results Section -->
+            <div class="results-section">
+                <h2 class="results-title">Analysis Results</h2>
+                <div class="result-item">
+                    <div class="result-label">Coordinates</div>
+                    <div id="coordinatesResult" class="result-value coordinates">
+                        Click "Analyze Location" to get started
+                    </div>
+                </div>
+                <div class="result-item">
+                    <div class="result-label">Elevation</div>
+                    <div id="elevationResult" class="result-value">
+                        --
+                    </div>
+                </div>
+                <div class="result-item">
+                    <div class="result-label">Terrain Type</div>
+                    <div id="terrainResult" class="result-value">
+                        --
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Map Container -->
+        <div class="map-container">
+            <div id="mapView"></div>
+        </div>
+    </div>
+    <script>
+        // Global variables
+        let map, view, currentMarker;
+        const API_BASE_URL = window.location.origin;
+        // Initialize the map when the page loads
+        require([
+            "esri/Map",
+            "esri/views/MapView",
+            "esri/Graphic",
+            "esri/geometry/Point",
+            "esri/symbols/SimpleMarkerSymbol",
+            "esri/layers/ImageryTileLayer"
+        ], function(Map, MapView, Graphic, Point, SimpleMarkerSymbol, ImageryTileLayer) {
+            // Create imagery layer (satellite view)
+            const imageryLayer = new ImageryTileLayer({
+                url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+                title: "World Imagery"
+            });
+            // Create the map with satellite imagery
+            map = new Map({
+                basemap: "satellite",
+                layers: [imageryLayer]
+            });
+            // Create the map view
+            view = new MapView({
+                container: "mapView",
+                map: map,
+                center: [0, 20], // Longitude, Latitude
+                zoom: 2,
+                ui: {
+                    components: ["zoom", "compass"]
+                }
+            });
+            // Set up event listeners after map is loaded
+            view.when(() => {
+                console.log("Map loaded successfully");
+                setupEventListeners();
+            });
+            // Handle map click events to get coordinates
+            view.on("click", function(event) {
+                const lat = event.mapPoint.latitude;
+                const lon = event.mapPoint.longitude;
+                // Update input field with clicked coordinates
+                document.getElementById('locationInput').value = `${lat.toFixed(6)}, ${lon.toFixed(6)}`;
+                // Automatically analyze the clicked location
+                analyzeLocation();
+            });
+        });
+        function setupEventListeners() {
+            const analyzeBtn = document.getElementById('analyzeBtn');
+            const locationInput = document.getElementById('locationInput');
+            // Set up button click handler
+            analyzeBtn.addEventListener('click', analyzeLocation);
+            // Set up Enter key handler for input field
+            locationInput.addEventListener('keypress', function(event) {
+                if (event.key === 'Enter') {
+                    analyzeLocation();
+                }
+            });
+        }
+        async function analyzeLocation() {
+            const locationInput = document.getElementById('locationInput');
+            const inputValue = locationInput.value.trim();
+            if (!inputValue) {
+                showMessage('Please enter a location or coordinates', 'error');
+                return;
+            }
+            // Show loading state
+            setLoadingState(true);
+            clearMessage();
+            try {
+                // Make API request to backend
+                const response = await fetch(`${API_BASE_URL}/api/analyze`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        input: inputValue
+                    })
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.detail || 'Failed to analyze location');
+                }
+                const data = await response.json();
+                // Update results display
+                updateResults(data);
+                // Update map with marker
+                updateMapMarker(data.latitude, data.longitude);
+                // Show success message
+                showMessage('Analysis completed successfully!', 'success');
+            } catch (error) {
+                console.error('Error analyzing location:', error);
+                showMessage(`Error: ${error.message}`, 'error');
+            } finally {
+                setLoadingState(false);
+            }
+        }
+        function updateResults(data) {
+            // Update coordinates display
+            const coordsElement = document.getElementById('coordinatesResult');
+            coordsElement.textContent = `${data.latitude.toFixed(6)}, ${data.longitude.toFixed(6)}`;
+            // Update elevation display
+            const elevationElement = document.getElementById('elevationResult');
+            const elevationValue = data.elevation !== null ? `${data.elevation.toFixed(1)} m` : 'No data available';
+            elevationElement.textContent = elevationValue;
+            // Update terrain type display
+            const terrainElement = document.getElementById('terrainResult');
+            terrainElement.textContent = data.terrain_type || 'Unknown';
+        }
+        function updateMapMarker(latitude, longitude) {
+            require([
+                "esri/Graphic",
+                "esri/geometry/Point",
+                "esri/symbols/SimpleMarkerSymbol"
+            ], function(Graphic, Point, SimpleMarkerSymbol) {
+                // Remove existing marker if present
+                if (currentMarker) {
+                    view.graphics.remove(currentMarker);
+                }
+                // Create new marker
+                const point = new Point({
+                    longitude: longitude,
+                    latitude: latitude
+                });
+                const markerSymbol = new SimpleMarkerSymbol({
+                    color: [0, 212, 255],
+                    size: 12,
+                    outline: {
+                        color: [255, 255, 255],
+                        width: 2
+                    }
+                });
+                currentMarker = new Graphic({
+                    geometry: point,
+                    symbol: markerSymbol
+                });
+                // Add marker to map
+                view.graphics.add(currentMarker);
+                // Center map on the marker
+                view.goTo({
+                    center: [longitude, latitude],
+                    zoom: 10
+                }, {
+                    duration: 2000
+                });
+            });
+        }
+        function setLoadingState(isLoading) {
+            const loadingIndicator = document.getElementById('loadingIndicator');
+            const analyzeBtn = document.getElementById('analyzeBtn');
+            if (isLoading) {
+                loadingIndicator.classList.add('active');
+                analyzeBtn.disabled = true;
+                analyzeBtn.textContent = 'Analyzing...';
+            } else {
+                loadingIndicator.classList.remove('active');
+                analyzeBtn.disabled = false;
+                analyzeBtn.textContent = 'Analyze Location';
+            }
+        }
+        function showMessage(message, type) {
+            const messageElement = document.getElementById('statusMessage');
+            messageElement.textContent = message;
+            messageElement.className = `message ${type} show`;
+            // Auto-hide success messages after 3 seconds
+            if (type === 'success') {
+                setTimeout(() => {
+                    clearMessage();
+                }, 3000);
+            }
+        }
+        function clearMessage() {
+            const messageElement = document.getElementById('statusMessage');
+            messageElement.className = 'message';
+        }
+        // Example locations for demonstration
+        const exampleLocations = [
+            { name: 'Mount Everest', coords: '27.9881, 86.9250' },
+            { name: 'Death Valley', coords: '36.5323, -117.0143' },
+            { name: 'Amazon Rainforest', coords: '-3.4653, -62.2159' },
+            { name: 'Sahara Desert', coords: '23.8859, 11.0167' },
+            { name: 'New York City', coords: '40.7128, -74.0060' }
+        ];
+        // Add some sample locations to help users get started
+        function addExampleLocations() {
+            const inputSection = document.querySelector('.input-section');
+            const examplesDiv = document.createElement('div');
+            examplesDiv.className = 'examples-section';
+            examplesDiv.innerHTML = `
+                <div class="helper-text" style="margin-top: 20px; margin-bottom: 10px;">
+                    <strong>Try these examples:</strong>
+                </div>
+            `;
+            exampleLocations.forEach(location => {
+                const exampleBtn = document.createElement('button');
+                exampleBtn.className = 'example-btn';
+                exampleBtn.textContent = location.name;
+                exampleBtn.style.cssText = `
+                    display: inline-block;
+                    margin: 2px 5px 2px 0;
+                    padding: 4px 8px;
+                    background: rgba(0, 212, 255, 0.2);
+                    border: 1px solid rgba(0, 212, 255, 0.5);
+                    border-radius: 4px;
+                    color: #00d4ff;
+                    font-size: 11px;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                `;
+                exampleBtn.addEventListener('click', () => {
+                    document.getElementById('locationInput').value = location.coords;
+                    analyzeLocation();
+                });
+                exampleBtn.addEventListener('mouseenter', () => {
+                    exampleBtn.style.background = 'rgba(0, 212, 255, 0.3)';
+                });
+                exampleBtn.addEventListener('mouseleave', () => {
+                    exampleBtn.style.background = 'rgba(0, 212, 255, 0.2)';
+                });
+                examplesDiv.appendChild(exampleBtn);
+            });
+            inputSection.appendChild(examplesDiv);
+        }
+        // Initialize example locations when page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            addExampleLocations();
+        });
+        // Handle window resize to maintain map responsiveness
+        window.addEventListener('resize', () => {
+            if (view) {
+                view.when(() => {
+                    view.resize();
+                });
+            }
+        });
+    </script>
+</body>
+</html>