Hugging Face's logo

Spaces:
darkbreakerk
/
undefined
Running

App Files Community
darkbreakerk commited on
Commit
20691a0
·
verified ·
1 Parent(s): fc79d38

Use Leaflet.js + OpenStreetMap

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +348 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🚀
4
- colorFrom: red
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: undefined
3
+ colorFrom: blue
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,349 @@
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>StoreSpotter - Find Our Locations</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
12
+ <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
13
+ <style>
14
+ .map-container {
15
+ height: 70vh;
16
+ border-radius: 1rem;
17
+ overflow: hidden;
18
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
19
+ }
20
+ .leaflet-popup-content-wrapper {
21
+ border-radius: 0.5rem !important;
22
+ padding: 0.5rem !important;
23
+ }
24
+ .leaflet-popup-content {
25
+ margin: 0.5rem !important;
26
+ }
27
+ .leaflet-control {
28
+ margin-right: 0 !important;
29
+ margin-bottom: 0 !important;
30
+ }
31
+ .custom-marker {
32
+ background-color: #3B82F6;
33
+ width: 20px;
34
+ height: 20px;
35
+ border-radius: 50%;
36
+ border: 3px solid white;
37
+ }
38
+ .user-marker {
39
+ background-color: #10B981;
40
+ width: 20px;
41
+ height: 20px;
42
+ border-radius: 50%;
43
+ border: 3px solid white;
44
+ animation: pulse 2s infinite;
45
+ }
46
+ @keyframes pulse {
47
+ 0% {
48
+ transform: scale(0.95);
49
+ box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
50
+ }
51
+ 70% {
52
+ transform: scale(1);
53
+ box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
54
+ }
55
+ 100% {
56
+ transform: scale(0.95);
57
+ box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
58
+ }
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="bg-gray-50">
63
+ <!-- Navigation -->
64
+ <nav class="bg-white shadow-sm">
65
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
66
+ <div class="flex justify-between h-16">
67
+ <div class="flex items-center">
68
+ <i data-feather="map-pin" class="text-blue-500"></i>
69
+ <span class="ml-2 text-xl font-bold text-gray-800">StoreSpotter</span>
70
+ </div>
71
+ <div class="flex items-center space-x-4">
72
+ <a href="#" class="text-gray-700 hover:text-blue-600">Home</a>
73
+ <a href="#" class="text-gray-700 hover:text-blue-600">Stores</a>
74
+ <a href="#" class="text-gray-700 hover:text-blue-600">About</a>
75
+ <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition">Contact</button>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </nav>
80
+
81
+ <!-- Hero Section -->
82
+ <div class="relative bg-gradient-to-r from-blue-500 to-blue-600 text-white py-16">
83
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
84
+ <div class="text-center">
85
+ <h1 class="text-4xl font-bold mb-4">Find Our Stores Near You</h1>
86
+ <p class="text-xl mb-8">Discover the closest StoreSpotter locations with real-time distance calculation</p>
87
+ <div class="max-w-md mx-auto relative">
88
+ <input type="text" placeholder="Enter your location" class="w-full px-4 py-3 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-300">
89
+ <button class="absolute right-2 top-2 bg-blue-600 text-white p-2 rounded-lg hover:bg-blue-700 transition">
90
+ <i data-feather="search"></i>
91
+ </button>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Main Content -->
98
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
99
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
100
+ <!-- Store List -->
101
+ <div class="bg-white rounded-xl shadow-md overflow-hidden lg:col-span-1">
102
+ <div class="p-6">
103
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Our Stores</h2>
104
+ <div class="space-y-4 max-h-[500px] overflow-y-auto pr-2">
105
+ <!-- Store Item 1 -->
106
+ <div class="border-b pb-4">
107
+ <div class="flex items-start">
108
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
109
+ <i data-feather="shopping-bag" class="text-blue-600"></i>
110
+ </div>
111
+ <div>
112
+ <h3 class="font-bold text-gray-800">Main Headquarters</h3>
113
+ <p class="text-gray-600">123 Business St, District 1</p>
114
+ <p class="text-sm text-gray-500">Open: 8AM - 10PM</p>
115
+ <p class="text-blue-500 font-medium mt-1">0.8 km away</p>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- Store Item 2 -->
121
+ <div class="border-b pb-4">
122
+ <div class="flex items-start">
123
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
124
+ <i data-feather="shopping-bag" class="text-blue-600"></i>
125
+ </div>
126
+ <div>
127
+ <h3 class="font-bold text-gray-800">Westside Branch</h3>
128
+ <p class="text-gray-600">456 Shopping Ave, District 2</p>
129
+ <p class="text-sm text-gray-500">Open: 9AM - 9PM</p>
130
+ <p class="text-blue-500 font-medium mt-1">2.3 km away</p>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Store Item 3 -->
136
+ <div class="border-b pb-4">
137
+ <div class="flex items-start">
138
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
139
+ <i data-feather="shopping-bag" class="text-blue-600"></i>
140
+ </div>
141
+ <div>
142
+ <h3 class="font-bold text-gray-800">Downtown Store</h3>
143
+ <p class="text-gray-600">789 Central Blvd, District 3</p>
144
+ <p class="text-sm text-gray-500">Open: 7AM - 11PM</p>
145
+ <p class="text-blue-500 font-medium mt-1">1.5 km away</p>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Store Item 4 -->
151
+ <div class="border-b pb-4">
152
+ <div class="flex items-start">
153
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
154
+ <i data-feather="shopping-bag" class="text-blue-600"></i>
155
+ </div>
156
+ <div>
157
+ <h3 class="font-bold text-gray-800">Northside Plaza</h3>
158
+ <p class="text-gray-600">321 Market St, District 4</p>
159
+ <p class="text-sm text-gray-500">Open: 8AM - 10PM</p>
160
+ <p class="text-blue-500 font-medium mt-1">3.2 km away</p>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Store Item 5 -->
166
+ <div class="pb-4">
167
+ <div class="flex items-start">
168
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
169
+ <i data-feather="shopping-bag" class="text-blue-600"></i>
170
+ </div>
171
+ <div>
172
+ <h3 class="font-bold text-gray-800">Riverside Outlet</h3>
173
+ <p class="text-gray-600">654 Waterfront Rd, District 5</p>
174
+ <p class="text-sm text-gray-500">Open: 10AM - 8PM</p>
175
+ <p class="text-blue-500 font-medium mt-1">5.7 km away</p>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Map Container -->
184
+ <div class="lg:col-span-2">
185
+ <div class="map-container" id="map"></div>
186
+ <div class="mt-4 flex flex-wrap gap-2">
187
+ <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition flex items-center">
188
+ <i data-feather="navigation" class="mr-2"></i> Get Directions
189
+ </button>
190
+ <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 transition flex items-center">
191
+ <i data-feather="list" class="mr-2"></i> View All Stores
192
+ </button>
193
+ <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 transition flex items-center">
194
+ <i data-feather="filter" class="mr-2"></i> Filter
195
+ </button>
196
+ <button id="locate-me" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition flex items-center ml-auto">
197
+ <i data-feather="target" class="mr-2"></i> Locate Me
198
+ </button>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Footer -->
205
+ <footer class="bg-gray-800 text-white py-12">
206
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
207
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
208
+ <div>
209
+ <h3 class="text-xl font-bold mb-4">StoreSpotter</h3>
210
+ <p class="text-gray-400">Finding your way to our stores since 2023</p>
211
+ </div>
212
+ <div>
213
+ <h4 class="font-bold mb-4">Quick Links</h4>
214
+ <ul class="space-y-2">
215
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
216
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Stores</a></li>
217
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
218
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
219
+ </ul>
220
+ </div>
221
+ <div>
222
+ <h4 class="font-bold mb-4">Contact</h4>
223
+ <ul class="space-y-2">
224
+ <li class="flex items-center text-gray-400"><i data-feather="mail" class="mr-2"></i> hello@storespotter.com</li>
225
+ <li class="flex items-center text-gray-400"><i data-feather="phone" class="mr-2"></i> +123 456 7890</li>
226
+ <li class="flex items-center text-gray-400"><i data-feather="map-pin" class="mr-2"></i> 123 Business St, City</li>
227
+ </ul>
228
+ </div>
229
+ <div>
230
+ <h4 class="font-bold mb-4">Follow Us</h4>
231
+ <div class="flex space-x-4">
232
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
233
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
234
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
235
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
240
+ <p>&copy; 2023 StoreSpotter. All rights reserved.</p>
241
+ </div>
242
+ </div>
243
+ </footer>
244
+
245
+ <script>
246
+ // Initialize Leaflet map
247
+ const map = L.map('map').setView([10.776888, 106.699992], 12);
248
+
249
+ // Add OpenStreetMap tiles
250
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
251
+ attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
252
+ }).addTo(map);
253
+
254
+ // Add store markers
255
+ const stores = [
256
+ {
257
+ name: "Main Headquarters",
258
+ address: "123 Business St, District 1",
259
+ hours: "8AM - 10PM",
260
+ coordinates: [10.778110, 106.704980]
261
+ },
262
+ {
263
+ name: "Westside Branch",
264
+ address: "456 Shopping Ave, District 2",
265
+ hours: "9AM - 9PM",
266
+ coordinates: [10.787870, 106.732470]
267
+ },
268
+ {
269
+ name: "Downtown Store",
270
+ address: "789 Central Blvd, District 3",
271
+ hours: "7AM - 11PM",
272
+ coordinates: [10.782790, 106.691240]
273
+ },
274
+ {
275
+ name: "Northside Plaza",
276
+ address: "321 Market St, District 4",
277
+ hours: "8AM - 10PM",
278
+ coordinates: [10.763380, 106.706990]
279
+ },
280
+ {
281
+ name: "Riverside Outlet",
282
+ address: "654 Waterfront Rd, District 5",
283
+ hours: "10AM - 8PM",
284
+ coordinates: [10.755430, 106.680520]
285
+ }
286
+ ];
287
+
288
+ const storeIcon = L.divIcon({
289
+ className: 'custom-marker',
290
+ iconSize: [20, 20]
291
+ });
292
+
293
+ stores.forEach(store => {
294
+ const marker = L.marker(store.coordinates, { icon: storeIcon })
295
+ .addTo(map)
296
+ .bindPopup(`
297
+ <div class="font-bold">${store.name}</div>
298
+ <div class="text-gray-600">${store.address}</div>
299
+ <div class="text-sm text-gray-500">Hours: ${store.hours}</div>
300
+ <button class="mt-2 text-sm text-blue-500 hover:underline">Get Directions</button>
301
+ `);
302
+ });
303
+
304
+ // Locate me button functionality
305
+ document.getElementById('locate-me').addEventListener('click', () => {
306
+ if (navigator.geolocation) {
307
+ navigator.geolocation.getCurrentPosition(
308
+ position => {
309
+ const userLocation = [position.coords.latitude, position.coords.longitude];
310
+
311
+ // Remove existing user marker if any
312
+ if (window.userMarker) {
313
+ map.removeLayer(window.userMarker);
314
+ }
315
+
316
+ // Create user marker
317
+ const userIcon = L.divIcon({
318
+ className: 'user-marker',
319
+ iconSize: [20, 20]
320
+ });
321
+
322
+ // Add user marker to map
323
+ window.userMarker = L.marker(userLocation, { icon: userIcon })
324
+ .addTo(map)
325
+ .bindPopup(`
326
+ <div class="font-bold">Your Location</div>
327
+ <div class="text-sm text-gray-600">Accuracy: ${position.coords.accuracy.toFixed(0)} meters</div>
328
+ `)
329
+ .openPopup();
330
+
331
+ // Center map on user location
332
+ map.flyTo(userLocation, 14);
333
+ },
334
+ error => {
335
+ alert('Unable to retrieve your location: ' + error.message);
336
+ },
337
+ {
338
+ enableHighAccuracy: true
339
+ }
340
+ );
341
+ } else {
342
+ alert('Geolocation is not supported by your browser');
343
+ }
344
+ });
345
+ // Initialize feather icons
346
+ feather.replace();
347
+ </script>
348
+ </body>
349
  </html>