Hugging Face's logo

Spaces:
kksharma3951
/
kk
Running

App Files Community
kksharma3951 commited on
Commit
97012fe
·
verified ·
1 Parent(s): 05a1b54

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +396 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Kk
3
- emoji: 📚
4
- colorFrom: green
5
  colorTo: green
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: kk
3
+ emoji: 🐳
4
+ colorFrom: gray
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,396 @@
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>Toronto 3D Map Viewer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
13
+
14
+ body {
15
+ font-family: 'Poppins', sans-serif;
16
+ background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
17
+ background-size: 400% 400%;
18
+ animation: gradientBG 15s ease infinite;
19
+ height: 100vh;
20
+ overflow-x: hidden;
21
+ }
22
+
23
+ @keyframes gradientBG {
24
+ 0% { background-position: 0% 50% }
25
+ 50% { background-position: 100% 50% }
26
+ 100% { background-position: 0% 50% }
27
+ }
28
+
29
+ #map {
30
+ height: 100%;
31
+ width: 100%;
32
+ border-radius: 16px;
33
+ box-shadow: 0 10px 30px rgba(0,0,0,0.3);
34
+ }
35
+
36
+ .sidebar {
37
+ backdrop-filter: blur(10px);
38
+ background: rgba(255, 255, 255, 0.1);
39
+ border: 1px solid rgba(255, 255, 255, 0.2);
40
+ }
41
+
42
+ .model-card {
43
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
44
+ background: rgba(255, 255, 255, 0.12);
45
+ backdrop-filter: blur(10px);
46
+ }
47
+
48
+ .model-card:hover {
49
+ transform: translateY(-5px);
50
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
51
+ }
52
+
53
+ .control-btn {
54
+ transition: all 0.3s ease;
55
+ background: rgba(255, 255, 255, 0.12);
56
+ border: 1px solid rgba(255, 255, 255, 0.2);
57
+ }
58
+
59
+ .control-btn:hover {
60
+ background: rgba(255, 255, 255, 0.2);
61
+ transform: scale(1.05);
62
+ }
63
+
64
+ .fade-in {
65
+ animation: fadeIn 0.8s ease-out;
66
+ }
67
+
68
+ @keyframes fadeIn {
69
+ from { opacity: 0; transform: translateY(20px); }
70
+ to { opacity: 1; transform: translateY(0); }
71
+ }
72
+
73
+ .location-pill {
74
+ transition: all 0.3s ease;
75
+ }
76
+
77
+ .location-pill:hover {
78
+ background: rgba(59, 130, 246, 0.2);
79
+ transform: translateX(5px);
80
+ }
81
+
82
+ .map-marker {
83
+ position: relative;
84
+ width: 40px;
85
+ height: 40px;
86
+ border-radius: 50% 50% 50% 0;
87
+ background: #3b82f6;
88
+ transform: rotate(-45deg);
89
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
90
+ cursor: pointer;
91
+ }
92
+
93
+ .map-marker::after {
94
+ content: '';
95
+ position: absolute;
96
+ width: 20px;
97
+ height: 20px;
98
+ background: white;
99
+ border-radius: 50%;
100
+ top: 50%;
101
+ left: 50%;
102
+ transform: translate(-50%, -50%) rotate(45deg);
103
+ }
104
+
105
+ .glow {
106
+ animation: glowPulse 2s infinite alternate;
107
+ }
108
+
109
+ @keyframes glowPulse {
110
+ from { box-shadow: 0 0 5px -5px #3b82f6; }
111
+ to { box-shadow: 0 0 15px 5px #3b82f6; }
112
+ }
113
+ </style>
114
+ </head>
115
+ <body class="flex flex-col lg:flex-row h-screen text-white p-4 gap-6">
116
+ <!-- Left Sidebar -->
117
+ <div class="sidebar w-full lg:w-1/3 rounded-xl p-6 flex flex-col gap-6">
118
+ <!-- Header -->
119
+ <div class="fade-in">
120
+ <div class="flex items-center gap-3">
121
+ <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
122
+ <i class="fas fa-torii-gate text-xl"></i>
123
+ </div>
124
+ <h1 class="text-2xl font-bold">Toronto 3D Map Viewer</h1>
125
+ </div>
126
+ <p class="text-gray-200 mt-2">Explore iconic Toronto landmarks with interactive 3D models</p>
127
+ </div>
128
+
129
+ <!-- Search Controls -->
130
+ <div class="fade-in">
131
+ <div class="flex gap-2 mb-4">
132
+ <div class="flex-1">
133
+ <label class="text-gray-300 text-sm font-medium">Search Locations</label>
134
+ <div class="flex mt-1">
135
+ <input
136
+ type="text"
137
+ placeholder="Type to search..."
138
+ class="px-4 py-2 rounded-l-lg bg-gray-800 border border-gray-700 w-full focus:outline-none focus:ring-2 focus:ring-blue-500">
139
+ <button class="bg-gradient-to-r from-blue-500 to-indigo-600 px-4 rounded-r-lg">
140
+ <i class="fas fa-search"></i>
141
+ </button>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Location Selection -->
148
+ <div class="fade-in">
149
+ <h2 class="font-semibold mb-3">Popular Locations</h2>
150
+ <div class="flex flex-wrap gap-2">
151
+ <div class="location-pill px-4 py-2 rounded-full bg-gray-800 cursor-pointer hover:bg-gray-700">
152
+ <i class="fas fa-tower mr-2 text-blue-400"></i> CN Tower
153
+ </div>
154
+ <div class="location-pill px-4 py-2 rounded-full bg-gray-800 cursor-pointer hover:bg-gray-700">
155
+ <i class="fas fa-landmark mr-2 text-purple-400"></i> City Hall
156
+ </div>
157
+ <div class="location-pill px-4 py-2 rounded-full bg-gray-800 cursor-pointer hover:bg-gray-700">
158
+ <i class="fas fa-home mr-2 text-yellow-400"></i> Casa Loma
159
+ </div>
160
+ <div class="location-pill px-4 py-2 rounded-full bg-gray-800 cursor-pointer hover:bg-gray-700">
161
+ <i class="fas fa-ship mr-2 text-red-400"></i> Harbourfront
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- 3D Model Selection -->
167
+ <div class="fade-in flex-grow overflow-auto">
168
+ <h2 class="font-semibold mb-3">3D Models</h2>
169
+ <div class="grid grid-cols-1 gap-4">
170
+ <div class="model-card p-4 rounded-xl flex flex-col cursor-pointer">
171
+ <div class="flex items-center gap-3">
172
+ <div class="w-14 h-14 bg-gradient-to-br from-blue-400 to-indigo-700 rounded-lg flex items-center justify-center">
173
+ <i class="fas fa-tower text-2xl"></i>
174
+ </div>
175
+ <div>
176
+ <h3 class="font-semibold">CN Tower</h3>
177
+ <p class="text-sm text-gray-300">Iconic Communications Tower</p>
178
+ </div>
179
+ </div>
180
+ <div class="flex mt-4 justify-between text-sm">
181
+ <span><i class="fas fa-ruler mr-1 text-blue-300"></i> 553 m</span>
182
+ <span><i class="fas fa-calendar mr-1 text-blue-300"></i> Built: 1976</span>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="model-card p-4 rounded-xl flex flex-col cursor-pointer">
187
+ <div class="flex items-center gap-3">
188
+ <div class="w-14 h-14 bg-gradient-to-br from-amber-500 to-orange-700 rounded-lg flex items-center justify-center">
189
+ <i class="fas fa-landmark text-2xl"></i>
190
+ </div>
191
+ <div>
192
+ <h3 class="font-semibold">Toronto City Hall</h3>
193
+ <p class="text-sm text-gray-300">Distinctive Saucer Towers</p>
194
+ </div>
195
+ </div>
196
+ <div class="flex mt-4 justify-between text-sm">
197
+ <span><i class="fas fa-ruler mr-1 text-amber-300"></i> 103 m</span>
198
+ <span><i class="fas fa-calendar mr-1 text-amber-300"></i> Built: 1965</span>
199
+ </div>
200
+ </div>
201
+
202
+ <div class="model-card p-4 rounded-xl flex flex-col cursor-pointer">
203
+ <div class="flex items-center gap-3">
204
+ <div class="w-14 h-14 bg-gradient-to-br from-emerald-500 to-green-700 rounded-lg flex items-center justify-center">
205
+ <i class="fas fa-home text-2xl"></i>
206
+ </div>
207
+ <div>
208
+ <h3 class="font-semibold">Casa Loma</h3>
209
+ <p class="text-sm text-gray-300">Gothic Revival Castle</p>
210
+ </div>
211
+ </div>
212
+ <div class="flex mt-4 justify-between text-sm">
213
+ <span><i class="fas fa-ruler mr-1 text-emerald-300"></i> 65 m</span>
214
+ <span><i class="fas fa-calendar mr-1 text-emerald-300"></i> Built: 1914</span>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Controls -->
221
+ <div class="fade-in">
222
+ <h2 class="font-semibold mb-3">Map Controls</h2>
223
+ <div class="grid grid-cols-4 gap-3">
224
+ <button class="control-btn py-3 rounded-lg flex flex-col items-center justify-center">
225
+ <i class="fas fa-plus text-xl mb-1"></i>
226
+ <span class="text-xs">Zoom In</span>
227
+ </button>
228
+ <button class="control-btn py-3 rounded-lg flex flex-col items-center justify-center">
229
+ <i class="fas fa-minus text-xl mb-1"></i>
230
+ <span class="text-xs">Zoom Out</span>
231
+ </button>
232
+ <button class="control-btn py-3 rounded-lg flex flex-col items-center justify-center">
233
+ <i class="fas fa-compass text-xl mb-1"></i>
234
+ <span class="text-xs">Reset View</span>
235
+ </button>
236
+ <button class="control-btn py-3 rounded-lg flex flex-col items-center justify-center">
237
+ <i class="fas fa-layer-group text-xl mb-1"></i>
238
+ <span class="text-xs">3D View</span>
239
+ </button>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Map Container -->
245
+ <div class="w-full lg:w-2/3 rounded-xl overflow-hidden shadow-2xl relative">
246
+ <div id="map" class="glow"></div>
247
+
248
+ <!-- Info Panel -->
249
+ <div class="absolute top-4 right-4 w-80 bg-black bg-opacity-70 backdrop-blur rounded-xl p-4">
250
+ <div class="flex items-start gap-3">
251
+ <div class="bg-gradient-to-br from-blue-500 to-indigo-600 p-2 rounded-lg">
252
+ <i class="fas fa-tower text-2xl"></i>
253
+ </div>
254
+ <div>
255
+ <h3 class="font-bold text-lg">CN Tower - Toronto</h3>
256
+ <p class="text-sm text-gray-300">One of the world's tallest free-standing structures</p>
257
+ <div class="flex mt-2 text-xs">
258
+ <span class="mr-3"><i class="fas fa-ruler mr-1"></i> 553m tall</span>
259
+ <span><i class="fas fa-map-pin mr-1"></i> 301 Front St W</span>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ <div class="mt-3 flex">
264
+ <button class="text-xs bg-gradient-to-r from-blue-500 to-indigo-600 py-1.5 px-3 rounded-lg mr-2">
265
+ <i class="fas fa-3d-modeling mr-1"></i> View in 3D
266
+ </button>
267
+ <button class="text-xs bg-gray-800 py-1.5 px-3 rounded-lg">
268
+ <i class="fas fa-directions mr-1"></i> Directions
269
+ </button>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <script>
275
+ document.addEventListener('DOMContentLoaded', function() {
276
+ // Initialize Map
277
+ const map = new maplibregl.Map({
278
+ container: 'map',
279
+ style: 'https://tiles.stadiamaps.com/styles/osm_bright.json',
280
+ center: [-79.3832, 43.6532], // Toronto coordinates
281
+ zoom: 12,
282
+ pitch: 45, // Tilt for 3D effect
283
+ bearing: 0,
284
+ antialias: true
285
+ });
286
+
287
+ // Add 3D terrain and buildings
288
+ map.on('load', () => {
289
+ // Add terrain with exaggerated elevation
290
+ // Remove terrain source since it requires MapTiler
291
+
292
+ // Add sky styling
293
+ map.addLayer({
294
+ 'id': 'sky',
295
+ 'type': 'sky',
296
+ 'paint': {
297
+ 'sky-type': 'atmosphere',
298
+ 'sky-atmosphere-sun': [0.0, 0.0],
299
+ 'sky-atmosphere-sun-intensity': 15
300
+ }
301
+ });
302
+
303
+ // Add custom marker for the CN Tower
304
+ const cnTowerElement = document.createElement('div');
305
+ cnTowerElement.className = 'map-marker glow';
306
+ cnTowerElement.title = 'CN Tower';
307
+
308
+ // Add marker to map
309
+ new maplibregl.Marker({
310
+ element: cnTowerElement,
311
+ anchor: 'bottom'
312
+ })
313
+ .setLngLat([-79.3871, 43.6426]) // CN Tower coordinates
314
+ .addTo(map);
315
+
316
+ // Add fly-to animation for card clicks
317
+ document.querySelectorAll('.model-card').forEach(card => {
318
+ card.addEventListener('click', () => {
319
+ map.flyTo({
320
+ center: [-79.3871, 43.6426], // CN Tower coordinates
321
+ zoom: 15,
322
+ pitch: 60,
323
+ bearing: 0,
324
+ speed: 1.5,
325
+ curve: 1.5,
326
+ easing: (t) => t
327
+ });
328
+ });
329
+ });
330
+
331
+ // Add location selector functionality
332
+ document.querySelectorAll('.location-pill').forEach(loc => {
333
+ loc.addEventListener('click', () => {
334
+ let target;
335
+ if (loc.textContent.includes('CN Tower')) {
336
+ target = [-79.3871, 43.6426];
337
+ } else if (loc.textContent.includes('City Hall')) {
338
+ target = [-79.3847, 43.6531];
339
+ } else if (loc.textContent.includes('Casa Loma')) {
340
+ target = [-79.4094, 43.6780];
341
+ } else if (loc.textContent.includes('Harbourfront')) {
342
+ target = [-79.3876, 43.6388];
343
+ } else {
344
+ target = [-79.3832, 43.6532];
345
+ }
346
+
347
+ map.flyTo({
348
+ center: target,
349
+ zoom: 14,
350
+ pitch: 45,
351
+ bearing: 0,
352
+ speed: 1.2,
353
+ curve: 1.5,
354
+ easing: (t) => t
355
+ });
356
+ });
357
+ });
358
+
359
+ // Add control buttons functionality
360
+ document.querySelectorAll('.control-btn').forEach((btn, index) => {
361
+ btn.addEventListener('click', () => {
362
+ if (index === 0) {
363
+ map.zoomIn();
364
+ } else if (index === 1) {
365
+ map.zoomOut();
366
+ } else if (index === 2) {
367
+ map.flyTo({
368
+ center: [-79.3832, 43.6532],
369
+ zoom: 12,
370
+ pitch: 45,
371
+ bearing: 0
372
+ });
373
+ } else if (index === 3) {
374
+ // Toggle between 2D and 3D view
375
+ const currentPitch = map.getPitch();
376
+ map.flyTo({
377
+ pitch: currentPitch === 0 ? 60 : 0,
378
+ zoom: currentPitch === 0 ? 14 : map.getZoom(),
379
+ speed: 1.2
380
+ });
381
+ }
382
+ });
383
+ });
384
+ });
385
+
386
+ // Add animation to sidebar cards on load
387
+ setTimeout(() => {
388
+ const cards = document.querySelectorAll('.fade-in');
389
+ cards.forEach((card, idx) => {
390
+ card.style.animationDelay = `${idx * 0.15}s`;
391
+ });
392
+ }, 100);
393
+ });
394
+ </script>
395
+ <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=kksharma3951/kk" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
396
+ </html>