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>GeoTools Hub - All-in-One GIS Calculation Tool</title> | |
| <!-- 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/landing.css"> | |
| </head> | |
| <body> | |
| <div class="map-background"></div> | |
| <div class="background-text">MAP</div> | |
| <div class="hero-container"> | |
| <header> | |
| <div class="logo"> | |
| <i class="fas fa-globe-americas"></i> | |
| <h1>GeoTools Hub</h1> | |
| </div> | |
| </header> | |
| <main> | |
| <div class="hero-content"> | |
| <h1 class="main-title">All-in-One GIS Calculation Tool</h1> | |
| <p class="subtitle">Powerful geospatial analysis tools for professionals and enthusiasts</p> | |
| <button id="open-drawer" class="btn-primary"> | |
| <i class="fas fa-th-large"></i> Explore Tools | |
| </button> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- App Drawer Overlay --> | |
| <div id="app-drawer" class="app-drawer"> | |
| <div class="drawer-content"> | |
| <div class="drawer-header"> | |
| <h2>GIS Tools</h2> | |
| <button id="close-drawer" class="btn-close"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="tools-grid"> | |
| <!-- Elevation Tool --> | |
| <a href="/frontend/elevation.html" class="tool-card"> | |
| <div class="tool-icon"> | |
| <i class="fas fa-mountain"></i> | |
| </div> | |
| <div class="tool-info"> | |
| <h3>Ground Elevation Finder</h3> | |
| <p>Get precise elevation data for any location on Earth</p> | |
| </div> | |
| </a> | |
| <!-- Distance Calculator Tool --> | |
| <a href="/frontend/distance.html" class="tool-card"> | |
| <div class="tool-icon"> | |
| <i class="fas fa-ruler-combined"></i> | |
| </div> | |
| <div class="tool-info"> | |
| <h3>Distance Calculator</h3> | |
| <p>Calculate the distance between two points on the map</p> | |
| </div> | |
| </a> | |
| <!-- Area Calculator Tool --> | |
| <a href="/frontend/area.html" class="tool-card"> | |
| <div class="tool-icon"> | |
| <i class="fas fa-draw-polygon"></i> | |
| </div> | |
| <div class="tool-info"> | |
| <h3>Area Calculator</h3> | |
| <p>Calculate the area of a polygon defined by coordinates</p> | |
| </div> | |
| </a> | |
| <!-- Coordinate Converter Tool --> | |
| <a href="/frontend/coordinate_converter.html" class="tool-card"> | |
| <div class="tool-icon"> | |
| <i class="fas fa-exchange-alt"></i> | |
| </div> | |
| <div class="tool-info"> | |
| <h3>Coordinate Converter</h3> | |
| <p>Convert coordinates between different reference systems</p> | |
| </div> | |
| </a> | |
| <!-- Terrain Data Extractor Tool --> | |
| <a href="/frontend/terrain.html" class="tool-card"> | |
| <div class="tool-icon"> | |
| <i class="fas fa-mountain"></i> | |
| </div> | |
| <div class="tool-info"> | |
| <h3>Terrain Data Extractor</h3> | |
| <p>Extract terrain data such as slope and aspect</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>© 2025 GeoTools Hub | Made with <i class="fas fa-heart"></i> for GIS professionals</p> | |
| </footer> | |
| <script> | |
| // Simple script for app drawer functionality | |
| document.getElementById('open-drawer').addEventListener('click', function() { | |
| document.getElementById('app-drawer').classList.add('open'); | |
| document.body.style.overflow = 'hidden'; // Prevent scrolling when drawer is open | |
| }); | |
| document.getElementById('close-drawer').addEventListener('click', function() { | |
| document.getElementById('app-drawer').classList.remove('open'); | |
| document.body.style.overflow = ''; // Restore scrolling | |
| }); | |
| </script> | |
| </body> | |
| </html> |