Hugging Face's logo

Spaces:
gauthamnairy
/
GeoToolsHub
Build error

App Files Community
gauthamnairy commited on
Commit
f70764d
·
verified ·
1 Parent(s): a4fe1cf

Update frontend/elevation.html

Browse files
Files changed (1) hide show
  1. frontend/elevation.html +135 -135
frontend/elevation.html CHANGED
@@ -1,136 +1,136 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Ground Elevation Calculator - GeoTools Hub</title>
7
-
8
- <!-- Leaflet CSS -->
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
10
-
11
- <!-- Font Awesome -->
12
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
13
-
14
- <!-- Google Fonts -->
15
- <link rel="preconnect" href="https://fonts.googleapis.com">
16
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17
- <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">
18
-
19
- <!-- Custom CSS -->
20
- <link rel="stylesheet" href="styles.css">
21
- </head>
22
- <body>
23
- <div class="app-container">
24
- <!-- Header -->
25
- <header>
26
- <div class="header-content">
27
- <div class="title-section">
28
- <h1 class="main-title">Ground Elevation Calculator</h1>
29
- <p class="subtitle">Powered by GeoTools Hub</p>
30
- </div>
31
- <a href="index.html" class="nav-link home-btn"><i class="fas fa-home"></i> Home</a>
32
- </div>
33
- </header>
34
-
35
- <!-- Main Content -->
36
- <main>
37
- <div class="content-wrapper">
38
- <!-- Map Panel -->
39
- <div class="map-panel">
40
- <h2 class="section-title">Interactive Map</h2>
41
- <div id="map"></div>
42
- </div>
43
-
44
- <!-- Input Panel -->
45
- <div class="input-panel">
46
- <div class="coordinates-section">
47
- <div class="section-header">
48
- <h2 class="section-title">Coordinates</h2>
49
- <button id="add-coords" class="btn-action">
50
- <i class="fas fa-plus"></i> Add Coordinate
51
- </button>
52
- </div>
53
-
54
- <div id="coordinates-container">
55
- <!-- Initial coordinate input -->
56
- <div class="coordinate-group" data-index="0">
57
- <div class="coord-header">
58
- <h3>Point 1</h3>
59
- <button class="remove-coord" title="Remove" disabled>
60
- <i class="fas fa-times"></i>
61
- </button>
62
- </div>
63
- <div class="form-row">
64
- <div class="form-group">
65
- <label for="latitude-0">Latitude</label>
66
- <input type="number" id="latitude-0" class="latitude-input" step="any" placeholder="e.g. 37.7749">
67
- </div>
68
- <div class="form-group">
69
- <label for="longitude-0">Longitude</label>
70
- <input type="number" id="longitude-0" class="longitude-input" step="any" placeholder="e.g. -122.4194">
71
- </div>
72
- </div>
73
- <div class="form-group">
74
- <label for="crs-0">Coordinate Reference System</label>
75
- <select id="crs-0" class="crs-select">
76
- <!-- Will be populated by JavaScript -->
77
- </select>
78
- </div>
79
- <div class="elevation-result hidden">
80
- <div class="result-badge">
81
- <div class="elevation-metrics">
82
- <div class="metric">
83
- <span class="value meters">0</span>
84
- <span class="unit">meters</span>
85
- </div>
86
- <div class="metric">
87
- <span class="value feet">0</span>
88
- <span class="unit">feet</span>
89
- </div>
90
- </div>
91
- </div>
92
- <div class="coord-detail">
93
- <small>WGS84: <span class="wgs84-coords">--</span></small>
94
- <small>Original: <span class="original-coords">--</span></small>
95
- </div>
96
- </div>
97
- </div>
98
- </div>
99
-
100
- <button id="calculate-all" class="btn-primary">
101
- <i class="fas fa-calculator"></i> Calculate All Elevations
102
- </button>
103
- </div>
104
-
105
- <!-- Results Section -->
106
- <div id="results-container" class="hidden">
107
- <h2 class="section-title">Results</h2>
108
- <div id="elevation-results">
109
- <!-- Results will be populated here by JavaScript -->
110
- </div>
111
- </div>
112
- </div>
113
- </div>
114
- </main>
115
-
116
- <!-- Footer -->
117
- <footer>
118
- <p>&copy; 2025 GeoTools Hub | <a href="index.html">Back to Tools</a></p>
119
- </footer>
120
- </div>
121
-
122
- <!-- Loading Overlay -->
123
- <div id="loading-overlay" class="hidden">
124
- <div class="loader"></div>
125
- </div>
126
-
127
- <!-- Leaflet JS -->
128
- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
129
-
130
- <!-- ESRI Leaflet plugins -->
131
- <script src="https://cdnjs.cloudflare.com/ajax/libs/esri-leaflet/3.0.10/esri-leaflet.js"></script>
132
-
133
- <!-- Custom JS -->
134
- <script src="script.js"></script>
135
- </body>
136
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Ground Elevation Calculator - GeoTools Hub</title>
7
+
8
+ <!-- Leaflet CSS -->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
10
+
11
+ <!-- Font Awesome -->
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
13
+
14
+ <!-- Google Fonts -->
15
+ <link rel="preconnect" href="https://fonts.googleapis.com">
16
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17
+ <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">
18
+
19
+ <!-- Custom CSS -->
20
+ <link rel="stylesheet" href="/frontend/styles.css">
21
+ </head>
22
+ <body>
23
+ <div class="app-container">
24
+ <!-- Header -->
25
+ <header>
26
+ <div class="header-content">
27
+ <div class="title-section">
28
+ <h1 class="main-title">Ground Elevation Calculator</h1>
29
+ <p class="subtitle">Powered by GeoTools Hub</p>
30
+ </div>
31
+ <a href="index.html" class="nav-link home-btn"><i class="fas fa-home"></i> Home</a>
32
+ </div>
33
+ </header>
34
+
35
+ <!-- Main Content -->
36
+ <main>
37
+ <div class="content-wrapper">
38
+ <!-- Map Panel -->
39
+ <div class="map-panel">
40
+ <h2 class="section-title">Interactive Map</h2>
41
+ <div id="map"></div>
42
+ </div>
43
+
44
+ <!-- Input Panel -->
45
+ <div class="input-panel">
46
+ <div class="coordinates-section">
47
+ <div class="section-header">
48
+ <h2 class="section-title">Coordinates</h2>
49
+ <button id="add-coords" class="btn-action">
50
+ <i class="fas fa-plus"></i> Add Coordinate
51
+ </button>
52
+ </div>
53
+
54
+ <div id="coordinates-container">
55
+ <!-- Initial coordinate input -->
56
+ <div class="coordinate-group" data-index="0">
57
+ <div class="coord-header">
58
+ <h3>Point 1</h3>
59
+ <button class="remove-coord" title="Remove" disabled>
60
+ <i class="fas fa-times"></i>
61
+ </button>
62
+ </div>
63
+ <div class="form-row">
64
+ <div class="form-group">
65
+ <label for="latitude-0">Latitude</label>
66
+ <input type="number" id="latitude-0" class="latitude-input" step="any" placeholder="e.g. 37.7749">
67
+ </div>
68
+ <div class="form-group">
69
+ <label for="longitude-0">Longitude</label>
70
+ <input type="number" id="longitude-0" class="longitude-input" step="any" placeholder="e.g. -122.4194">
71
+ </div>
72
+ </div>
73
+ <div class="form-group">
74
+ <label for="crs-0">Coordinate Reference System</label>
75
+ <select id="crs-0" class="crs-select">
76
+ <!-- Will be populated by JavaScript -->
77
+ </select>
78
+ </div>
79
+ <div class="elevation-result hidden">
80
+ <div class="result-badge">
81
+ <div class="elevation-metrics">
82
+ <div class="metric">
83
+ <span class="value meters">0</span>
84
+ <span class="unit">meters</span>
85
+ </div>
86
+ <div class="metric">
87
+ <span class="value feet">0</span>
88
+ <span class="unit">feet</span>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ <div class="coord-detail">
93
+ <small>WGS84: <span class="wgs84-coords">--</span></small>
94
+ <small>Original: <span class="original-coords">--</span></small>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <button id="calculate-all" class="btn-primary">
101
+ <i class="fas fa-calculator"></i> Calculate All Elevations
102
+ </button>
103
+ </div>
104
+
105
+ <!-- Results Section -->
106
+ <div id="results-container" class="hidden">
107
+ <h2 class="section-title">Results</h2>
108
+ <div id="elevation-results">
109
+ <!-- Results will be populated here by JavaScript -->
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </main>
115
+
116
+ <!-- Footer -->
117
+ <footer>
118
+ <p>&copy; 2025 GeoTools Hub | <a href="index.html">Back to Tools</a></p>
119
+ </footer>
120
+ </div>
121
+
122
+ <!-- Loading Overlay -->
123
+ <div id="loading-overlay" class="hidden">
124
+ <div class="loader"></div>
125
+ </div>
126
+
127
+ <!-- Leaflet JS -->
128
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
129
+
130
+ <!-- ESRI Leaflet plugins -->
131
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/esri-leaflet/3.0.10/esri-leaflet.js"></script>
132
+
133
+ <!-- Custom JS -->
134
+ <script src="/frontend/script.js"></script>
135
+ </body>
136
  </html>