Hugging Face's logo

Spaces:
triton7777
/
earthview
Running

App Files Community
triton7777 commited on
Commit
d9ae9dd
·
verified ·
1 Parent(s): b689dec

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +426 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Earthview
3
- emoji: 👀
4
- colorFrom: indigo
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: earthview
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,426 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>EarthView - Explore Our Planet</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
10
+ <style>
11
+ #earth-container {
12
+ position: absolute;
13
+ top: 0;
14
+ left: 0;
15
+ width: 100%;
16
+ height: 100%;
17
+ overflow: hidden;
18
+ }
19
+
20
+ .location-card {
21
+ backdrop-filter: blur(10px);
22
+ background-color: rgba(255, 255, 255, 0.15);
23
+ transition: all 0.3s ease;
24
+ }
25
+
26
+ .location-card:hover {
27
+ transform: translateY(-5px);
28
+ background-color: rgba(255, 255, 255, 0.25);
29
+ }
30
+
31
+ .search-input:focus {
32
+ outline: none;
33
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
34
+ }
35
+
36
+ .control-btn {
37
+ transition: all 0.2s ease;
38
+ }
39
+
40
+ .control-btn:hover {
41
+ transform: scale(1.1);
42
+ background-color: rgba(255, 255, 255, 0.2);
43
+ }
44
+
45
+ @media (max-width: 768px) {
46
+ .sidebar {
47
+ width: 100%;
48
+ height: auto;
49
+ bottom: 0;
50
+ top: auto;
51
+ }
52
+
53
+ .location-cards {
54
+ flex-direction: row;
55
+ overflow-x: auto;
56
+ }
57
+
58
+ .location-card {
59
+ min-width: 200px;
60
+ }
61
+ }
62
+ </style>
63
+ </head>
64
+ <body class="bg-gray-900 text-white overflow-hidden h-screen">
65
+ <!-- Main 3D Earth Container -->
66
+ <div id="earth-container"></div>
67
+
68
+ <!-- Top Navigation Bar -->
69
+ <header class="absolute top-0 left-0 right-0 z-10 p-4 flex justify-between items-center">
70
+ <div class="flex items-center space-x-2">
71
+ <div class="w-8 h-8 bg-blue-500 rounded-full"></div>
72
+ <h1 class="text-xl font-bold">EarthView</h1>
73
+ </div>
74
+
75
+ <div class="relative w-1/3 max-w-md">
76
+ <input type="text"
77
+ placeholder="Search locations..."
78
+ class="search-input w-full bg-gray-800 bg-opacity-70 rounded-full py-2 px-4 pl-10 text-white border border-gray-700 focus:border-blue-500">
79
+ <svg class="absolute left-3 top-2.5 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
80
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
81
+ </svg>
82
+ </div>
83
+
84
+ <div class="flex items-center space-x-4">
85
+ <button class="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 rounded-full text-sm font-medium transition">
86
+ Sign In
87
+ </button>
88
+ <button class="p-2 rounded-full hover:bg-gray-800 hover:bg-opacity-50 transition">
89
+ <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
90
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
91
+ </svg>
92
+ </button>
93
+ </div>
94
+ </header>
95
+
96
+ <!-- Sidebar with Featured Locations -->
97
+ <aside class="sidebar absolute top-16 left-0 z-10 w-64 h-3/4 bg-gray-900 bg-opacity-70 rounded-r-xl p-4 overflow-y-auto">
98
+ <h2 class="text-lg font-semibold mb-4">Featured Locations</h2>
99
+
100
+ <div class="location-cards flex flex-col space-y-3">
101
+ <div class="location-card p-3 rounded-lg cursor-pointer" data-lat="40.7128" data-lng="-74.0060">
102
+ <h3 class="font-medium">New York City</h3>
103
+ <p class="text-sm text-gray-300">United States</p>
104
+ </div>
105
+
106
+ <div class="location-card p-3 rounded-lg cursor-pointer" data-lat="48.8566" data-lng="2.3522">
107
+ <h3 class="font-medium">Paris</h3>
108
+ <p class="text-sm text-gray-300">France</p>
109
+ </div>
110
+
111
+ <div class="location-card p-3 rounded-lg cursor-pointer" data-lat="35.6762" data-lng="139.6503">
112
+ <h3 class="font-medium">Tokyo</h3>
113
+ <p class="text-sm text-gray-300">Japan</p>
114
+ </div>
115
+
116
+ <div class="location-card p-3 rounded-lg cursor-pointer" data-lat="-33.8688" data-lng="151.2093">
117
+ <h3 class="font-medium">Sydney</h3>
118
+ <p class="text-sm text-gray-300">Australia</p>
119
+ </div>
120
+
121
+ <div class="location-card p-3 rounded-lg cursor-pointer" data-lat="-22.9068" data-lng="-43.1729">
122
+ <h3 class="font-medium">Rio de Janeiro</h3>
123
+ <p class="text-sm text-gray-300">Brazil</p>
124
+ </div>
125
+
126
+ <div class="location-card p-3 rounded-lg cursor-pointer" data-lat="28.6139" data-lng="77.2090">
127
+ <h3 class="font-medium">New Delhi</h3>
128
+ <p class="text-sm text-gray-300">India</p>
129
+ </div>
130
+ </div>
131
+
132
+ <div class="mt-6 pt-4 border-t border-gray-700">
133
+ <h2 class="text-lg font-semibold mb-3">Layers</h2>
134
+ <div class="space-y-2">
135
+ <label class="flex items-center space-x-2">
136
+ <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600" checked>
137
+ <span>Borders</span>
138
+ </label>
139
+ <label class="flex items-center space-x-2">
140
+ <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600" checked>
141
+ <span>Clouds</span>
142
+ </label>
143
+ <label class="flex items-center space-x-2">
144
+ <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
145
+ <span>Traffic</span>
146
+ </label>
147
+ </div>
148
+ </div>
149
+ </aside>
150
+
151
+ <!-- Bottom Controls -->
152
+ <div class="absolute bottom-4 left-0 right-0 flex justify-center z-10">
153
+ <div class="bg-gray-900 bg-opacity-70 rounded-full p-2 flex space-x-2">
154
+ <button class="control-btn p-2 rounded-full bg-gray-800 bg-opacity-50">
155
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
156
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
157
+ </svg>
158
+ </button>
159
+ <button class="control-btn p-2 rounded-full bg-gray-800 bg-opacity-50">
160
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
161
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
162
+ </svg>
163
+ </button>
164
+ <button class="control-btn p-2 rounded-full bg-gray-800 bg-opacity-50">
165
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
166
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
167
+ </svg>
168
+ </button>
169
+ <button class="control-btn p-2 rounded-full bg-gray-800 bg-opacity-50">
170
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
171
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5l-7 7 7 7" />
172
+ </svg>
173
+ </button>
174
+ <button class="control-btn p-2 rounded-full bg-blue-600">
175
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
176
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
177
+ </svg>
178
+ </button>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Location Info Panel (hidden by default) -->
183
+ <div id="location-info" class="absolute top-16 right-0 z-10 w-80 bg-gray-900 bg-opacity-80 rounded-l-xl p-4 transform translate-x-full transition-transform duration-300">
184
+ <div class="flex justify-between items-center mb-3">
185
+ <h2 class="text-xl font-bold">Location Details</h2>
186
+ <button id="close-info" class="p-1 rounded-full hover:bg-gray-700">
187
+ <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
188
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
189
+ </svg>
190
+ </button>
191
+ </div>
192
+ <div id="info-content">
193
+ <div class="h-40 bg-gray-700 rounded-lg mb-3"></div>
194
+ <h3 id="location-name" class="font-semibold text-lg"></h3>
195
+ <p id="location-country" class="text-gray-300 text-sm mb-2"></p>
196
+ <p id="location-desc" class="text-sm mb-4"></p>
197
+ <div class="flex justify-between text-sm">
198
+ <div>
199
+ <p class="text-gray-400">Latitude</p>
200
+ <p id="location-lat" class="font-medium"></p>
201
+ </div>
202
+ <div>
203
+ <p class="text-gray-400">Longitude</p>
204
+ <p id="location-lng" class="font-medium"></p>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <script>
211
+ // Three.js Earth Implementation
212
+ let scene, camera, renderer, earth, clouds, controls;
213
+ let isDragging = false;
214
+ let previousMousePosition = { x: 0, y: 0 };
215
+
216
+ function initEarth() {
217
+ // Create scene
218
+ scene = new THREE.Scene();
219
+
220
+ // Create camera
221
+ camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
222
+ camera.position.z = 2;
223
+
224
+ // Create renderer
225
+ renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
226
+ renderer.setSize(window.innerWidth, window.innerHeight);
227
+ document.getElementById('earth-container').appendChild(renderer.domElement);
228
+
229
+ // Add ambient light
230
+ const ambientLight = new THREE.AmbientLight(0x333333);
231
+ scene.add(ambientLight);
232
+
233
+ // Add directional light
234
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
235
+ directionalLight.position.set(5, 3, 5);
236
+ scene.add(directionalLight);
237
+
238
+ // Create Earth
239
+ const earthGeometry = new THREE.SphereGeometry(1, 64, 64);
240
+ const earthMaterial = new THREE.MeshPhongMaterial({
241
+ map: new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg'),
242
+ bumpMap: new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/earth_normal_2048.jpg'),
243
+ bumpScale: 0.05,
244
+ specularMap: new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg'),
245
+ specular: new THREE.Color('grey')
246
+ });
247
+
248
+ earth = new THREE.Mesh(earthGeometry, earthMaterial);
249
+ scene.add(earth);
250
+
251
+ // Create clouds
252
+ const cloudsGeometry = new THREE.SphereGeometry(1.01, 64, 64);
253
+ const cloudsMaterial = new THREE.MeshPhongMaterial({
254
+ map: new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/earth_clouds_1024.png'),
255
+ transparent: true,
256
+ opacity: 0.4
257
+ });
258
+
259
+ clouds = new THREE.Mesh(cloudsGeometry, cloudsMaterial);
260
+ scene.add(clouds);
261
+
262
+ // Add stars background
263
+ const starsGeometry = new THREE.BufferGeometry();
264
+ const starsMaterial = new THREE.PointsMaterial({
265
+ color: 0xffffff,
266
+ size: 0.05,
267
+ transparent: true
268
+ });
269
+
270
+ const starsVertices = [];
271
+ for (let i = 0; i < 5000; i++) {
272
+ const x = (Math.random() - 0.5) * 2000;
273
+ const y = (Math.random() - 0.5) * 2000;
274
+ const z = (Math.random() - 0.5) * 2000;
275
+ starsVertices.push(x, y, z);
276
+ }
277
+
278
+ starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starsVertices, 3));
279
+ const stars = new THREE.Points(starsGeometry, starsMaterial);
280
+ scene.add(stars);
281
+
282
+ // Add orbit controls
283
+ controls = new THREE.OrbitControls(camera, renderer.domElement);
284
+ controls.enableZoom = true;
285
+ controls.enablePan = false;
286
+ controls.rotateSpeed = 0.5;
287
+ controls.minDistance = 1.5;
288
+ controls.maxDistance = 5;
289
+
290
+ // Handle window resize
291
+ window.addEventListener('resize', () => {
292
+ camera.aspect = window.innerWidth / window.innerHeight;
293
+ camera.updateProjectionMatrix();
294
+ renderer.setSize(window.innerWidth, window.innerHeight);
295
+ });
296
+
297
+ // Handle mouse events for manual rotation
298
+ renderer.domElement.addEventListener('mousedown', (e) => {
299
+ isDragging = true;
300
+ previousMousePosition = {
301
+ x: e.clientX,
302
+ y: e.clientY
303
+ };
304
+ });
305
+
306
+ renderer.domElement.addEventListener('mousemove', (e) => {
307
+ if (isDragging) {
308
+ const deltaMove = {
309
+ x: e.clientX - previousMousePosition.x,
310
+ y: e.clientY - previousMousePosition.y
311
+ };
312
+
313
+ earth.rotation.y += deltaMove.x * 0.01;
314
+ earth.rotation.x += deltaMove.y * 0.01;
315
+ clouds.rotation.y += deltaMove.x * 0.01;
316
+ clouds.rotation.x += deltaMove.y * 0.01;
317
+
318
+ previousMousePosition = {
319
+ x: e.clientX,
320
+ y: e.clientY
321
+ };
322
+ }
323
+ });
324
+
325
+ renderer.domElement.addEventListener('mouseup', () => {
326
+ isDragging = false;
327
+ });
328
+
329
+ renderer.domElement.addEventListener('mouseleave', () => {
330
+ isDragging = false;
331
+ });
332
+
333
+ // Animation loop
334
+ function animate() {
335
+ requestAnimationFrame(animate);
336
+
337
+ // Slow rotation when not interacting
338
+ if (!isDragging && !controls.enabled) {
339
+ earth.rotation.y += 0.001;
340
+ clouds.rotation.y += 0.0012; // Slightly faster for parallax effect
341
+ }
342
+
343
+ controls.update();
344
+ renderer.render(scene, camera);
345
+ }
346
+
347
+ animate();
348
+ }
349
+
350
+ // Handle location card clicks
351
+ document.querySelectorAll('.location-card').forEach(card => {
352
+ card.addEventListener('click', function() {
353
+ const lat = parseFloat(this.getAttribute('data-lat'));
354
+ const lng = parseFloat(this.getAttribute('data-lng'));
355
+
356
+ // Update location info panel
357
+ document.getElementById('location-name').textContent = this.querySelector('h3').textContent;
358
+ document.getElementById('location-country').textContent = this.querySelector('p').textContent;
359
+ document.getElementById('location-lat').textContent = lat.toFixed(4);
360
+ document.getElementById('location-lng').textContent = lng.toFixed(4);
361
+
362
+ // Sample description - in a real app, you'd fetch this from an API
363
+ const descriptions = {
364
+ "New York City": "The most populous city in the United States, known for its iconic skyline, Central Park, and cultural diversity.",
365
+ "Paris": "The capital of France, famous for the Eiffel Tower, Louvre Museum, and romantic atmosphere.",
366
+ "Tokyo": "Japan's bustling capital, blending ultramodern and traditional elements, from neon-lit skyscrapers to historic temples.",
367
+ "Sydney": "Australia's largest city, renowned for its harborfront Sydney Opera House and the Sydney Harbour Bridge.",
368
+ "Rio de Janeiro": "Brazil's second-largest city, known for its Carnival celebrations, samba music, and Christ the Redeemer statue.",
369
+ "New Delhi": "The capital of India, a historic city with a mix of ancient and modern architecture."
370
+ };
371
+
372
+ document.getElementById('location-desc').textContent = descriptions[this.querySelector('h3').textContent];
373
+
374
+ // Show info panel
375
+ document.getElementById('location-info').classList.remove('translate-x-full');
376
+
377
+ // Rotate earth to show the selected location
378
+ // Convert lat/lng to spherical coordinates
379
+ const phi = (90 - lat) * (Math.PI / 180);
380
+ const theta = (lng + 180) * (Math.PI / 180);
381
+
382
+ // Calculate target position
383
+ const x = -Math.sin(phi) * Math.cos(theta);
384
+ const y = Math.cos(phi);
385
+ const z = Math.sin(phi) * Math.sin(theta);
386
+
387
+ // Animate camera to look at the point
388
+ const targetPosition = new THREE.Vector3(x, y, z);
389
+ const duration = 1000;
390
+ const startTime = Date.now();
391
+
392
+ function animateCamera() {
393
+ const currentTime = Date.now();
394
+ const elapsed = currentTime - startTime;
395
+ const progress = Math.min(elapsed / duration, 1);
396
+
397
+ // Smooth step interpolation
398
+ const smoothProgress = progress * progress * (3 - 2 * progress);
399
+
400
+ // Interpolate camera position
401
+ camera.position.x = THREE.MathUtils.lerp(camera.position.x, targetPosition.x * 2, smoothProgress);
402
+ camera.position.y = THREE.MathUtils.lerp(camera.position.y, targetPosition.y * 2, smoothProgress);
403
+ camera.position.z = THREE.MathUtils.lerp(camera.position.z, targetPosition.z * 2, smoothProgress);
404
+
405
+ // Make camera look at the earth center
406
+ camera.lookAt(0, 0, 0);
407
+
408
+ if (progress < 1) {
409
+ requestAnimationFrame(animateCamera);
410
+ }
411
+ }
412
+
413
+ animateCamera();
414
+ });
415
+ });
416
+
417
+ // Close info panel
418
+ document.getElementById('close-info').addEventListener('click', function() {
419
+ document.getElementById('location-info').classList.add('translate-x-full');
420
+ });
421
+
422
+ // Initialize when DOM is loaded
423
+ document.addEventListener('DOMContentLoaded', initEarth);
424
+ </script>
425
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=triton7777/earthview" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
426
+ </html>