Hugging Face's logo

Spaces:
triton7777
/
earthview
Running

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

make it look pretty, - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +544 -379
index.html CHANGED
@@ -3,424 +3,589 @@
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gemini App Projects</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
9
  <style>
10
+ /* Density styles */
11
+ .density-compact .project-card {
12
+ min-height: 180px;
 
 
 
 
13
  }
14
+ .density-compact .project-image-container {
15
+ height: 100px;
16
+ }
17
+ .density-compact .project-card p {
18
+ display: none;
19
+ }
20
+ .density-compact .project-card h3 {
21
+ font-size: 0.9rem;
22
+ margin-bottom: 0.25rem;
23
+ }
24
+ .density-normal .project-card {
25
+ min-height: 240px;
26
+ }
27
+ .density-normal .project-image-container {
28
+ height: 140px;
29
+ }
30
+ .density-spacious .project-card {
31
+ min-height: 300px;
32
+ }
33
+ .density-spacious .project-image-container {
34
+ height: 180px;
35
  }
36
 
37
+ .project-card {
38
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
39
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
40
+ }
41
+ .project-card:hover {
42
  transform: translateY(-5px);
43
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
44
  }
45
+ .project-card:hover .project-image {
46
+ transform: scale(1.05);
47
+ transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 
48
  }
49
+ .category-chip {
 
50
  transition: all 0.2s ease;
51
  }
52
+ .category-chip:hover {
53
+ transform: translateY(-2px);
54
+ box-shadow: 0 4px 8px rgba(93, 93, 255, 0.2);
55
+ }
56
+ .like-btn:hover {
57
  transform: scale(1.1);
58
+ color: #ff4757;
59
  }
60
+ .dropdown:hover .dropdown-menu {
61
+ display: block;
62
+ animation: fadeIn 0.2s ease-in-out;
63
+ }
64
+ @keyframes fadeIn {
65
+ from { opacity: 0; transform: translateY(-10px); }
66
+ to { opacity: 1; transform: translateY(0); }
67
+ }
68
+ body {
69
+ background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
70
+ }
71
+ .hero-section {
72
+ background: linear-gradient(135deg, rgba(93,93,255,0.1) 0%, rgba(93,93,255,0.05) 100%);
 
 
 
 
73
  }
74
  </style>
75
  </head>
76
+ <body class="text-white font-sans">
77
+ <!-- Navigation Bar -->
78
+ <nav class="bg-[#1a1a1a] border-b border-[#2d2d2d] sticky top-0 z-50">
79
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
80
+ <div class="flex justify-between h-16">
81
+ <div class="flex items-center">
82
+ <a href="#" class="flex items-center">
83
+ <i class="fas fa-gem text-indigo-600 text-2xl mr-2"></i>
84
+ <span class="text-xl font-bold text-gray-900">Gemini Apps</span>
85
+ </a>
86
+ </div>
87
+ <div class="hidden md:flex items-center space-x-8">
88
+ <a href="#" class="text-gray-900 hover:text-indigo-600 px-1 text-sm font-medium">Explore</a>
89
+ <a href="#" class="text-gray-900 hover:text-indigo-600 px-1 text-sm font-medium">Collections</a>
90
+ <a href="#" class="text-gray-900 hover:text-indigo-600 px-1 text-sm font-medium">Pricing</a>
91
+ <a href="#" class="text-gray-900 hover:text-indigo-600 px-1 text-sm font-medium">Docs</a>
92
+ </div>
93
+ <div class="flex items-center">
94
+ <div class="relative dropdown">
95
+ <button class="flex items-center text-gray-900 hover:text-indigo-600">
96
+ <i class="fas fa-search mr-2"></i>
97
+ <span class="hidden md:inline">Search</span>
98
+ </button>
99
+ <div class="dropdown-menu absolute hidden right-0 mt-2 w-64 bg-white rounded-md shadow-lg z-50">
100
+ <input type="text" placeholder="Search projects..." class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500">
101
+ </div>
102
+ </div>
103
+ <button class="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
104
+ Upload Project
105
+ </button>
106
+ <div class="ml-4 relative">
107
+ <button class="flex items-center text-gray-900 hover:text-indigo-600">
108
+ <i class="fas fa-user-circle text-xl"></i>
109
+ </button>
110
+ </div>
111
+ </div>
112
+ </div>
113
  </div>
114
+ </nav>
115
+
116
+ <!-- Hero Section -->
117
+ <div class="hero-section border-b border-[#2d2d2d]">
118
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
119
+ <div class="text-center">
120
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Discover Amazing Gemini Projects</h1>
121
+ <p class="text-xl md:text-2xl mb-8">Explore, share, and collaborate on innovative applications built with Gemini</p>
122
+ <div class="flex justify-center">
123
+ <div class="relative w-full max-w-xl">
124
+ <input type="text" placeholder="Search for projects..." class="w-full px-6 py-4 rounded-full text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500">
125
+ <button class="absolute right-2 top-2 bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700">
126
+ <i class="fas fa-search mr-2"></i> Search
127
+ </button>
128
+ </div>
129
+ </div>
130
+ </div>
131
  </div>
132
+ </div>
133
+
134
+ <!-- Main Content -->
135
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
136
+ <!-- Categories -->
137
+ <div class="mb-8">
138
+ <h2 class="text-xl font-semibold mb-4">Categories</h2>
139
+ <div class="flex flex-wrap gap-4">
140
+ <a href="#" class="category-chip px-4 py-2 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full text-white text-sm font-medium hover:from-indigo-600 hover:to-purple-700">
141
+ <i class="fas fa-robot mr-2"></i> AI Assistants
142
+ </a>
143
+ <a href="#" class="category-chip px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full border border-white/20 text-sm font-medium hover:bg-white/20 transition-all">
144
+ <i class="fas fa-chart-line mr-2"></i> Data Analysis
145
+ </a>
146
+ <a href="#" class="category-chip px-4 py-2 bg-white rounded-full shadow-sm text-sm font-medium hover:bg-gray-100 transition-all">
147
+ <i class="fas fa-language mr-2"></i> Language Models
148
+ </a>
149
+ <a href="#" class="category-chip px-4 py-2 bg-white rounded-full shadow-sm text-sm font-medium hover:bg-gray-100 transition-all">
150
+ <i class="fas fa-code mr-2"></i> Code Generation
151
+ </a>
152
+ <a href="#" class="category-chip px-4 py-2 bg-white rounded-full shadow-sm text-sm font-medium hover:bg-gray-100 transition-all">
153
+ <i class="fas fa-image mr-2"></i> Image Generation
154
+ </a>
155
+ <a href="#" class="category-chip px-4 py-2 bg-white rounded-full shadow-sm text-sm font-medium hover:bg-gray-100 transition-all">
156
+ <i class="fas fa-brain mr-2"></i> Cognitive Models
157
+ </a>
158
+ </div>
159
  </div>
160
+
161
+ <!-- Filters, Sorting and Density -->
162
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
163
+ <div class="flex items-center mb-4 md:mb-0 space-x-4">
164
+ <div class="flex items-center">
165
+ <span class="text-sm font-medium mr-2">Filter:</span>
166
+ <select class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
167
+ <option>All Projects</option>
168
+ <option>Featured</option>
169
+ <option>Most Popular</option>
170
+ <option>Recently Added</option>
171
+ </select>
172
+ </div>
173
+ <div class="flex items-center">
174
+ <span class="text-sm font-medium mr-2">View:</span>
175
+ <div class="flex space-x-1 bg-[#2d2d2d] border border-[#3d3d3d] p-1 rounded-md">
176
+ <button class="density-btn p-2 rounded hover:bg-white transition-colors" data-density="compact" title="Compact view">
177
+ <i class="fas fa-grip-lines text-sm"></i>
178
+ </button>
179
+ <button class="density-btn p-2 rounded hover:bg-white transition-colors" data-density="normal" title="Normal view">
180
+ <i class="fas fa-th-large text-sm"></i>
181
+ </button>
182
+ <button class="density-btn p-2 rounded hover:bg-white transition-colors" data-density="spacious" title="Spacious view">
183
+ <i class="fas fa-th text-sm"></i>
184
+ </button>
185
+ </div>
186
+ </div>
187
  </div>
188
+ <div class="flex items-center">
189
+ <span class="text-sm font-medium mr-2">Sort by:</span>
190
+ <select class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
191
+ <option>Most Popular</option>
192
+ <option>Newest</option>
193
+ <option>Most Downloads</option>
194
+ <option>Highest Rated</option>
195
+ </select>
196
  </div>
197
+ </div>
198
+
199
+ <!-- Projects Grid -->
200
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 density-normal">
201
+ <!-- Project Card 1 -->
202
+ <div class="project-card bg-gradient-to-br from-[#2d2d2d] to-[#1e1e1e] rounded-xl overflow-hidden border border-[#3d3d3d]/50">
203
+ <div class="relative project-image-container overflow-hidden">
204
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
205
+ alt="AI Code Assistant"
206
+ class="project-image w-full h-full object-cover">
207
+ <div class="absolute top-2 right-2">
208
+ <button class="like-btn bg-white bg-opacity-80 p-2 rounded-full text-gray-600 hover:text-red-500">
209
+ <i class="far fa-heart"></i>
210
+ </button>
211
+ </div>
212
+ </div>
213
+ <div class="p-4">
214
+ <div class="flex justify-between items-start mb-2">
215
+ <h3 class="font-semibold text-lg">Gemini Code Assistant</h3>
216
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Featured</span>
217
+ </div>
218
+ <p class="text-gray-600 text-sm mb-3">An intelligent coding assistant that helps developers write better code faster with AI-powered suggestions.</p>
219
+ <div class="flex items-center justify-between text-sm text-gray-500">
220
+ <div class="flex items-center">
221
+ <i class="fas fa-download mr-1"></i>
222
+ <span>1.2K</span>
223
+ </div>
224
+ <div class="flex items-center">
225
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
226
+ <span>4.8</span>
227
+ </div>
228
+ <div class="flex items-center">
229
+ <i class="fas fa-eye mr-1"></i>
230
+ <span>5.7K</span>
231
+ </div>
232
+ </div>
233
+ </div>
234
  </div>
235
+
236
+ <!-- Project Card 2 -->
237
+ <div class="project-card bg-gradient-to-br from-white to-gray-50 rounded-xl overflow-hidden">
238
+ <div class="relative h-48 overflow-hidden">
239
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
240
+ alt="Content Generator"
241
+ class="project-image w-full h-full object-cover">
242
+ <div class="absolute top-2 right-2">
243
+ <button class="like-btn bg-white bg-opacity-80 p-2 rounded-full text-gray-600 hover:text-red-500">
244
+ <i class="far fa-heart"></i>
245
+ </button>
246
+ </div>
247
+ </div>
248
+ <div class="p-4">
249
+ <div class="flex justify-between items-start mb-2">
250
+ <h3 class="font-semibold text-lg">Gemini Content Generator</h3>
251
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">New</span>
252
+ </div>
253
+ <p class="text-gray-600 text-sm mb-3">Generate high-quality articles, blog posts, and marketing copy with just a few prompts.</p>
254
+ <div class="flex items-center justify-between text-sm text-gray-500">
255
+ <div class="flex items-center">
256
+ <i class="fas fa-download mr-1"></i>
257
+ <span>892</span>
258
+ </div>
259
+ <div class="flex items-center">
260
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
261
+ <span>4.6</span>
262
+ </div>
263
+ <div class="flex items-center">
264
+ <i class="fas fa-eye mr-1"></i>
265
+ <span>3.2K</span>
266
+ </div>
267
+ </div>
268
+ </div>
269
  </div>
270
+
271
+ <!-- Project Card 3 -->
272
+ <div class="project-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
273
+ <div class="relative h-48 overflow-hidden">
274
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
275
+ alt="Data Analyzer"
276
+ class="project-image w-full h-full object-cover">
277
+ <div class="absolute top-2 right-2">
278
+ <button class="like-btn bg-white bg-opacity-80 p-2 rounded-full text-gray-600 hover:text-red-500">
279
+ <i class="far fa-heart"></i>
280
+ </button>
281
+ </div>
282
+ </div>
283
+ <div class="p-4">
284
+ <div class="flex justify-between items-start mb-2">
285
+ <h3 class="font-semibold text-lg">Gemini Data Analyzer</h3>
286
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Pro</span>
287
+ </div>
288
+ <p class="text-gray-600 text-sm mb-3">Transform raw data into actionable insights with AI-powered analysis and visualization tools.</p>
289
+ <div class="flex items-center justify-between text-sm text-gray-500">
290
+ <div class="flex items-center">
291
+ <i class="fas fa-download mr-1"></i>
292
+ <span>2.5K</span>
293
+ </div>
294
+ <div class="flex items-center">
295
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
296
+ <span>4.9</span>
297
+ </div>
298
+ <div class="flex items-center">
299
+ <i class="fas fa-eye mr-1"></i>
300
+ <span>8.1K</span>
301
+ </div>
302
+ </div>
303
+ </div>
304
  </div>
305
+
306
+ <!-- Project Card 4 -->
307
+ <div class="project-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
308
+ <div class="relative h-48 overflow-hidden">
309
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
310
+ alt="Image Creator"
311
+ class="project-image w-full h-full object-cover">
312
+ <div class="absolute top-2 right-2">
313
+ <button class="like-btn bg-white bg-opacity-80 p-2 rounded-full text-gray-600 hover:text-red-500">
314
+ <i class="far fa-heart"></i>
315
+ </button>
316
+ </div>
317
+ </div>
318
+ <div class="p-4">
319
+ <div class="flex justify-between items-start mb-2">
320
+ <h3 class="font-semibold text-lg">Gemini Image Creator</h3>
321
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Popular</span>
322
+ </div>
323
+ <p class="text-gray-600 text-sm mb-3">Generate stunning images from text descriptions with advanced AI image generation capabilities.</p>
324
+ <div class="flex items-center justify-between text-sm text-gray-500">
325
+ <div class="flex items-center">
326
+ <i class="fas fa-download mr-1"></i>
327
+ <span>3.7K</span>
328
+ </div>
329
+ <div class="flex items-center">
330
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
331
+ <span>4.7</span>
332
+ </div>
333
+ <div class="flex items-center">
334
+ <i class="fas fa-eye mr-1"></i>
335
+ <span>10.2K</span>
336
+ </div>
337
+ </div>
338
+ </div>
339
  </div>
340
+
341
+ <!-- Project Card 5 -->
342
+ <div class="project-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
343
+ <div class="relative h-48 overflow-hidden">
344
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
345
+ alt="Chat Assistant"
346
+ class="project-image w-full h-full object-cover">
347
+ <div class="absolute top-2 right-2">
348
+ <button class="like-btn bg-white bg-opacity-80 p-2 rounded-full text-gray-600 hover:text-red-500">
349
+ <i class="far fa-heart"></i>
350
+ </button>
351
+ </div>
352
+ </div>
353
+ <div class="p-4">
354
+ <div class="flex justify-between items-start mb-2">
355
+ <h3 class="font-semibold text-lg">Gemini Chat Assistant</h3>
356
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Featured</span>
357
+ </div>
358
+ <p class="text-gray-600 text-sm mb-3">A conversational AI assistant that can answer questions, provide recommendations, and assist with tasks.</p>
359
+ <div class="flex items-center justify-between text-sm text-gray-500">
360
+ <div class="flex items-center">
361
+ <i class="fas fa-download mr-1"></i>
362
+ <span>5.1K</span>
363
+ </div>
364
+ <div class="flex items-center">
365
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
366
+ <span>4.9</span>
367
+ </div>
368
+ <div class="flex items-center">
369
+ <i class="fas fa-eye mr-1"></i>
370
+ <span>12.4K</span>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Project Card 6 -->
377
+ <div class="project-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
378
+ <div class="relative project-image-container overflow-hidden">
379
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
380
+ alt="Language Translator"
381
+ class="project-image w-full h-full object-cover">
382
+ <div class="absolute top-2 right-2">
383
+ <button class="like-btn bg-white bg-opacity-80 p-2 rounded-full text-gray-600 hover:text-red-500">
384
+ <i class="far fa-heart"></i>
385
+ </button>
386
+ </div>
387
+ </div>
388
+ <div class="p-4">
389
+ <div class="flex justify-between items-start mb-2">
390
+ <h3 class="font-semibold text-lg">Gemini Language Translator</h3>
391
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">New</span>
392
+ </div>
393
+ <p class="text-gray-600 text-sm mb-3">Translate between 100+ languages with human-like accuracy and context awareness.</p>
394
+ <div class="flex items-center justify-between text-sm text-gray-500">
395
+ <div class="flex items-center">
396
+ <i class="fas fa-download mr-1"></i>
397
+ <span>1.8K</span>
398
+ </div>
399
+ <div class="flex items-center">
400
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
401
+ <span>4.5</span>
402
+ </div>
403
+ <div class="flex items-center">
404
+ <i class="fas fa-eye mr-1"></i>
405
+ <span>6.3K</span>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <!-- Project Card 7 -->
412
+ <div class="project-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
413
+ <div class="relative project-image-container overflow-hidden">
414
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
415
+ alt="Video Summarizer"
416
+ class="project-image w-full h-full object-cover">
417
+ <div class="absolute top-2 right-2">
418
+ <button class="like-btn bg-white bg-opacity-80 p-2 rounded-full text-gray-600 hover:text-red-500">
419
+ <i class="far fa-heart"></i>
420
+ </button>
421
+ </div>
422
+ </div>
423
+ <div class="p-4">
424
+ <div class="flex justify-between items-start mb-2">
425
+ <h3 class="font-semibold text-lg">Gemini Video Summarizer</h3>
426
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Pro</span>
427
+ </div>
428
+ <p class="text-gray-600 text-sm mb-3">Automatically generate concise summaries of long videos with key points and timestamps.</p>
429
+ <div class="flex items-center justify-between text-sm text-gray-500">
430
+ <div class="flex items-center">
431
+ <i class="fas fa-download mr-1"></i>
432
+ <span>2.3K</span>
433
+ </div>
434
+ <div class="flex items-center">
435
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
436
+ <span>4.7</span>
437
+ </div>
438
+ <div class="flex items-center">
439
+ <i class="fas fa-eye mr-1"></i>
440
+ <span>7.5K</span>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ <div class="project-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
446
+ <div class="relative h-48 overflow-hidden">
447
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
448
+ alt="Language Translator"
449
+ class="project-image w-full h-full object-cover">
450
+ <div class="absolute top-2 right-2">
451
+ <button class="like-btn bg-white bg-opacity-80 p-2 rounded-full text-gray-600 hover:text-red-500">
452
+ <i class="far fa-heart"></i>
453
+ </button>
454
+ </div>
455
+ </div>
456
+ <div class="p-4">
457
+ <div class="flex justify-between items-start mb-2">
458
+ <h3 class="font-semibold text-lg">Gemini Language Translator</h3>
459
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">New</span>
460
+ </div>
461
+ <p class="text-gray-600 text-sm mb-3">Translate between 100+ languages with human-like accuracy and context awareness.</p>
462
+ <div class="flex items-center justify-between text-sm text-gray-500">
463
+ <div class="flex items-center">
464
+ <i class="fas fa-download mr-1"></i>
465
+ <span>1.8K</span>
466
+ </div>
467
+ <div class="flex items-center">
468
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
469
+ <span>4.5</span>
470
+ </div>
471
+ <div class="flex items-center">
472
+ <i class="fas fa-eye mr-1"></i>
473
+ <span>6.3K</span>
474
+ </div>
475
+ </div>
476
+ </div>
477
  </div>
478
  </div>
479
+
480
+ <!-- Pagination -->
481
+ <div class="flex justify-center mt-10">
482
+ <nav class="flex items-center space-x-2">
483
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">
484
+ <i class="fas fa-chevron-left"></i>
485
+ </button>
486
+ <button class="px-3 py-1 rounded bg-[#5d5dff] text-white">1</button>
487
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">2</button>
488
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">3</button>
489
+ <span class="px-2">...</span>
490
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">8</button>
491
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-100">
492
+ <i class="fas fa-chevron-right"></i>
493
+ </button>
494
+ </nav>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
495
  </div>
496
  </div>
497
+
498
+ <!-- Footer -->
499
+ <footer class="bg-[#1a1a1a] border-t border-[#2d2d2d] mt-16">
500
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
501
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
502
+ <div>
503
+ <h3 class="text-lg font-semibold mb-4">Gemini Apps</h3>
504
+ <p class="text-gray-600 text-sm">Empowering developers and creators with cutting-edge AI tools and applications.</p>
505
+ <div class="flex space-x-4 mt-4">
506
+ <a href="#" class="text-gray-600 hover:text-indigo-600"><i class="fab fa-twitter"></i></a>
507
+ <a href="#" class="text-gray-600 hover:text-indigo-600"><i class="fab fa-github"></i></a>
508
+ <a href="#" class="text-gray-600 hover:text-indigo-600"><i class="fab fa-discord"></i></a>
509
+ <a href="#" class="text-gray-600 hover:text-indigo-600"><i class="fab fa-youtube"></i></a>
510
+ </div>
511
+ </div>
512
+ <div>
513
+ <h3 class="text-lg font-semibold mb-4">Explore</h3>
514
+ <ul class="space-y-2">
515
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600 text-sm">Featured Projects</a></li>
516
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600 text-sm">Popular Apps</a></li>
517
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600 text-sm">New Releases</a></li>
518
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600 text-sm">Collections</a></li>
519
+ </ul>
520
+ </div>
521
  <div>
522
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
523
+ <ul class="space-y-2">
524
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600 text-sm">Documentation</a></li>
525
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600 text-sm">API Reference</a></li>
526
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600 text-sm">Tutorials</a></li>
527
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600 text-sm">Community</a></li>
528
+ </ul>
529
  </div>
530
  <div>
531
+ <h3 class="text-lg font-semibold mb-4">Company</h3>
532
+ <ul class="space-y-2">
533
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600 text-sm">About Us</a></li>
534
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600 text-sm">Careers</a></li>
535
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600 text-sm">Blog</a></li>
536
+ <li><a href="#" class="text-gray-600 hover:text-indigo-600 text-sm">Contact</a></li>
537
+ </ul>
538
+ </div>
539
+ </div>
540
+ <div class="border-t border-gray-200 mt-10 pt-8 flex flex-col md:flex-row justify-between items-center">
541
+ <p class="text-gray-500 text-sm">© 2023 Gemini Apps. All rights reserved.</p>
542
+ <div class="flex space-x-6 mt-4 md:mt-0">
543
+ <a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Terms</a>
544
+ <a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Privacy</a>
545
+ <a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Cookies</a>
546
  </div>
547
  </div>
548
  </div>
549
+ </footer>
550
+
551
  <script>
552
+ // Density selector functionality
553
+ document.querySelectorAll('.density-btn').forEach(btn => {
554
+ btn.addEventListener('click', function() {
555
+ const grid = document.querySelector('.grid');
556
+ // Remove all density classes
557
+ grid.classList.remove('density-compact', 'density-normal', 'density-spacious');
558
+ // Add selected density class
559
+ grid.classList.add(`density-${this.dataset.density}`);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
560
 
561
+ // Update active state
562
+ document.querySelectorAll('.density-btn').forEach(b => {
563
+ b.classList.remove('bg-indigo-100', 'text-indigo-700');
564
+ });
565
+ this.classList.add('bg-indigo-100', 'text-indigo-700');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
566
  });
567
  });
568
+
569
+ // Set default to normal density
570
+ document.querySelector('.density-btn[data-density="normal"]').classList.add('bg-indigo-100', 'text-indigo-700');
571
+
572
+ // Simple like button functionality
573
+ document.querySelectorAll('.like-btn').forEach(button => {
574
+ button.addEventListener('click', function() {
575
+ const icon = this.querySelector('i');
576
+ if (icon.classList.contains('far')) {
577
+ icon.classList.remove('far');
578
+ icon.classList.add('fas');
579
+ icon.style.color = '#ef4444';
580
+ } else {
581
+ icon.classList.remove('fas');
582
+ icon.classList.add('far');
583
+ icon.style.color = '';
584
+ }
585
+ });
586
  });
587
+
588
+ // Mobile menu toggle would go here if we had one
 
589
  </script>
590
  <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>
591
  </html>