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>Distance Calculator - GeoTools Hub</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/styles.css"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Header --> | |
| <header> | |
| <div class="header-content"> | |
| <div class="title-section"> | |
| <h1 class="main-title">Distance Calculator</h1> | |
| <p class="subtitle">Calculate the distance between two points on the Earth</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"> | |
| <h2 class="section-title">Input Coordinates</h2> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="latitude1">Latitude 1</label> | |
| <input type="number" id="latitude1" step="any" placeholder="e.g. 37.7749"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="longitude1">Longitude 1</label> | |
| <input type="number" id="longitude1" step="any" placeholder="e.g. -122.4194"> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="latitude2">Latitude 2</label> | |
| <input type="number" id="latitude2" step="any" placeholder="e.g. 34.0522"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="longitude2">Longitude 2</label> | |
| <input type="number" id="longitude2" step="any" placeholder="e.g. -118.2437"> | |
| </div> | |
| </div> | |
| <button id="calculate-distance" class="btn-primary"> | |
| <i class="fas fa-calculator"></i> Calculate Distance | |
| </button> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="results-container" class="hidden"> | |
| <h2 class="section-title">Results</h2> | |
| <div id="distance-result"> | |
| <p>The distance between the two points is <span id="distance-value">0</span> kilometers.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer> | |
| <p>© 2025 GeoTools Hub | <a href="index.html">Back to Tools</a></p> | |
| </footer> | |
| </div> | |
| <!-- Custom JS --> | |
| <script src="/frontend/script.js"></script> | |
| </body> | |
| </html> |