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>Area 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">Area Calculator</h1> | |
| <p class="subtitle">Calculate the area of a polygon defined by coordinates</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"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Coordinates</h2> | |
| <button id="add-coords" class="btn-action"> | |
| <i class="fas fa-plus"></i> Add Coordinate | |
| </button> | |
| </div> | |
| <div id="coordinates-container"> | |
| <!-- Initial coordinate input --> | |
| <div class="coordinate-group" data-index="0"> | |
| <div class="coord-header"> | |
| <h3>Point 1</h3> | |
| <button class="remove-coord" title="Remove" disabled> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="latitude-0">Latitude</label> | |
| <input type="number" id="latitude-0" class="latitude-input" step="any" placeholder="e.g. 37.7749"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="longitude-0">Longitude</label> | |
| <input type="number" id="longitude-0" class="longitude-input" step="any" placeholder="e.g. -122.4194"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="calculate-area" class="btn-primary"> | |
| <i class="fas fa-calculator"></i> Calculate Area | |
| </button> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="results-container" class="hidden"> | |
| <h2 class="section-title">Results</h2> | |
| <div id="area-results"> | |
| <!-- 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> | |
| <!-- Custom JS --> | |
| <script src="/frontend/script.js"></script> | |
| </body> | |
| </html> |