Spaces:
Build error
Build error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Terrain Data Extractor - GeoTools Hub</title> | |
| <!-- Leaflet CSS --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" /> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" /> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet"> | |
| <!-- Custom CSS --> | |
| <link rel="stylesheet" href="/frontend/styles.css"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Header --> | |
| <header> | |
| <div class="header-content"> | |
| <div class="title-section"> | |
| <h1 class="main-title">Terrain Data Extractor</h1> | |
| <p class="subtitle">Extract terrain data such as slope and aspect</p> | |
| </div> | |
| <a href="index.html" class="nav-link home-btn"><i class="fas fa-home"></i> Home</a> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <div class="content-wrapper"> | |
| <div class="input-panel"> | |
| <div class="coordinates-section"> | |
| <h2 class="section-title">Coordinates</h2> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="latitude">Latitude</label> | |
| <input type="number" id="latitude" class="latitude-input" step="any" placeholder="e.g. 37.7749"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="longitude">Longitude</label> | |
| <input type="number" id="longitude" class="longitude-input" step="any" placeholder="e.g. -122.4194"> | |
| </div> | |
| </div> | |
| <button id="extract-terrain" class="btn-primary"> | |
| <i class="fas fa-extract"></i> Extract Terrain Data | |
| </button> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="terrain-results" class="hidden"> | |
| <h2 class="section-title">Terrain Data</h2> | |
| <div id="terrain-data"> | |
| <!-- Results will be populated here by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer> | |
| <p>© 2025 GeoTools Hub | <a href="index.html">Back to Tools</a></p> | |
| </footer> | |
| </div> | |
| <!-- Loading Overlay --> | |
| <div id="loading-overlay" class="hidden"> | |
| <div class="loader"></div> | |
| </div> | |
| <!-- Leaflet JS --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script> | |
| <!-- Custom JS --> | |
| <script src="/frontend/script.js"></script> | |
| </body> | |
| </html> |