Hugging Face's logo

Spaces:
Ko0ol
/
test1ce
Running

App Files Community
Ko0ol commited on
Commit
a726fb6
·
verified ·
1 Parent(s): f5f6445

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +687 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test1ce
3
- emoji: 😻
4
- colorFrom: pink
5
- colorTo: pink
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: test1ce
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
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,687 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Corbeil-Essonnes 2025 - Cartographie Socio-Écologique</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
9
+ <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ #map {
13
+ height: calc(100vh - 80px);
14
+ width: 100%;
15
+ z-index: 1;
16
+ }
17
+ .leaflet-control-layers-toggle {
18
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/><circle cx="12" cy="12" r="5"/></svg>') !important;
19
+ }
20
+ .custom-popup .leaflet-popup-content-wrapper {
21
+ background: #f8fafc;
22
+ border-radius: 8px;
23
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
24
+ width: 300px;
25
+ }
26
+ .custom-popup .leaflet-popup-tip {
27
+ background: #f8fafc;
28
+ }
29
+ .legend {
30
+ background: white;
31
+ padding: 10px;
32
+ border-radius: 8px;
33
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
34
+ }
35
+ .legend i {
36
+ width: 18px;
37
+ height: 18px;
38
+ float: left;
39
+ margin-right: 8px;
40
+ opacity: 0.7;
41
+ }
42
+ .sidebar {
43
+ transition: all 0.3s ease;
44
+ }
45
+ .sidebar.collapsed {
46
+ transform: translateX(-90%);
47
+ }
48
+ .chart-container {
49
+ height: 200px;
50
+ width: 100%;
51
+ }
52
+ .pulse {
53
+ animation: pulse 2s infinite;
54
+ }
55
+ @keyframes pulse {
56
+ 0% { transform: scale(1); }
57
+ 50% { transform: scale(1.05); }
58
+ 100% { transform: scale(1); }
59
+ }
60
+ .chat-modal {
61
+ display: none;
62
+ position: fixed;
63
+ bottom: 20px;
64
+ right: 20px;
65
+ width: 350px;
66
+ background: white;
67
+ border-radius: 12px;
68
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
69
+ z-index: 1000;
70
+ }
71
+ .chat-header {
72
+ background: #4CAF50;
73
+ color: white;
74
+ padding: 15px;
75
+ border-top-left-radius: 12px;
76
+ border-top-right-radius: 12px;
77
+ display: flex;
78
+ justify-content: space-between;
79
+ align-items: center;
80
+ }
81
+ .chat-body {
82
+ padding: 15px;
83
+ height: 300px;
84
+ overflow-y: auto;
85
+ }
86
+ .chat-input {
87
+ display: flex;
88
+ padding: 10px;
89
+ border-top: 1px solid #eee;
90
+ }
91
+ .event-badge {
92
+ display: inline-block;
93
+ padding: 3px 8px;
94
+ border-radius: 12px;
95
+ font-size: 12px;
96
+ font-weight: 600;
97
+ margin-right: 5px;
98
+ }
99
+ </style>
100
+ </head>
101
+ <body class="bg-green-50 font-sans">
102
+ <!-- Header -->
103
+ <header class="bg-green-700 text-white shadow-lg">
104
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
105
+ <div class="flex items-center space-x-4">
106
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Corbeil-Essonnes_logo.svg/1200px-Corbeil-Essonnes_logo.svg.png" alt="Logo Corbeil-Essonnes" class="h-12">
107
+ <div>
108
+ <h1 class="text-2xl font-bold">Corbeil-Essonnes 2025</h1>
109
+ <p class="text-green-100">Cartographie Socio-Écologique Interactive</p>
110
+ </div>
111
+ </div>
112
+ <div class="flex items-center space-x-4">
113
+ <button id="toggle-sidebar" class="bg-green-600 hover:bg-green-500 px-4 py-2 rounded-lg flex items-center">
114
+ <i class="fas fa-layer-group mr-2"></i> Couches
115
+ </button>
116
+ <button class="bg-green-600 hover:bg-green-500 px-4 py-2 rounded-lg flex items-center">
117
+ <i class="fas fa-download mr-2"></i> Exporter
118
+ </button>
119
+ </div>
120
+ </div>
121
+ </header>
122
+
123
+ <!-- Main Content -->
124
+ <div class="flex">
125
+ <!-- Sidebar -->
126
+ <div id="sidebar" class="sidebar w-80 bg-white shadow-lg h-screen fixed z-20">
127
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center bg-green-600 text-white">
128
+ <h2 class="text-xl font-semibold">Couches Cartographiques</h2>
129
+ <button id="collapse-sidebar" class="text-white">
130
+ <i class="fas fa-chevron-left"></i>
131
+ </button>
132
+ </div>
133
+ <div class="p-4 space-y-4">
134
+ <div class="space-y-2">
135
+ <h3 class="font-medium text-green-800">Environnement</h3>
136
+ <div class="space-y-2">
137
+ <label class="flex items-center space-x-2">
138
+ <input type="checkbox" class="form-checkbox text-green-600" checked data-layer="espaces-verts">
139
+ <span>Espaces Verts</span>
140
+ </label>
141
+ <label class="flex items-center space-x-2">
142
+ <input type="checkbox" class="form-checkbox text-green-600" checked data-layer="biodiversite">
143
+ <span>Zones de Biodiversité</span>
144
+ </label>
145
+ <label class="flex items-center space-x-2">
146
+ <input type="checkbox" class="form-checkbox text-green-600" data-layer="pollution">
147
+ <span>Niveaux de Pollution</span>
148
+ </label>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="space-y-2">
153
+ <h3 class="font-medium text-green-800">Social</h3>
154
+ <div class="space-y-2">
155
+ <label class="flex items-center space-x-2">
156
+ <input type="checkbox" class="form-checkbox text-green-600" data-layer="densite">
157
+ <span>Densité de Population</span>
158
+ </label>
159
+ <label class="flex items-center space-x-2">
160
+ <input type="checkbox" class="form-checkbox text-green-600" data-layer="revenus">
161
+ <span>Revenus Médians</span>
162
+ </label>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="space-y-2">
167
+ <h3 class="font-medium text-green-800">Activités</h3>
168
+ <div class="space-y-2">
169
+ <label class="flex items-center space-x-2">
170
+ <input type="checkbox" class="form-checkbox text-green-600" checked data-layer="evenements">
171
+ <span>Événements Écologiques</span>
172
+ </label>
173
+ <label class="flex items-center space-x-2">
174
+ <input type="checkbox" class="form-checkbox text-green-600" checked data-layer="associations">
175
+ <span>Associations Locales</span>
176
+ </label>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="p-4 border-t border-gray-200">
182
+ <h3 class="font-medium text-green-800 mb-2">Indicateurs Clés</h3>
183
+ <div class="bg-green-50 rounded-lg p-3 mb-3">
184
+ <div class="flex justify-between items-center">
185
+ <span class="text-sm text-green-700">Qualité de l'Air</span>
186
+ <span class="text-green-600 font-bold">78/100</span>
187
+ </div>
188
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
189
+ <div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div>
190
+ </div>
191
+ </div>
192
+ <div class="bg-green-50 rounded-lg p-3 mb-3">
193
+ <div class="flex justify-between items-center">
194
+ <span class="text-sm text-green-700">Accès aux Espaces Verts</span>
195
+ <span class="text-green-600 font-bold">92%</span>
196
+ </div>
197
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
198
+ <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div>
199
+ </div>
200
+ </div>
201
+ <div class="bg-green-50 rounded-lg p-3">
202
+ <div class="flex justify-between items-center">
203
+ <span class="text-sm text-green-700">Engagement Citoyen</span>
204
+ <span class="text-green-600 font-bold">42 événements/mois</span>
205
+ </div>
206
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
207
+ <div class="bg-green-500 h-2 rounded-full" style="width: 65%"></div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Map Container -->
214
+ <div class="flex-1 ml-80">
215
+ <div id="map"></div>
216
+
217
+ <!-- Floating Info Panel -->
218
+ <div class="absolute bottom-4 right-4 bg-white rounded-lg shadow-xl z-10 w-80 overflow-hidden">
219
+ <div class="bg-green-600 text-white p-3 flex justify-between items-center">
220
+ <h3 class="font-semibold">Zone Sélectionnée</h3>
221
+ <button id="close-info" class="text-white hover:text-green-200">
222
+ <i class="fas fa-times"></i>
223
+ </button>
224
+ </div>
225
+ <div id="info-content" class="p-4">
226
+ <div class="text-center py-8 text-gray-500">
227
+ <i class="fas fa-map-marker-alt text-3xl mb-2 text-green-500"></i>
228
+ <p>Cliquez sur la carte pour voir les détails d'une zone</p>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Legend -->
234
+ <div class="absolute bottom-4 left-80 ml-4 bg-white rounded-lg shadow-lg z-10 p-4 legend">
235
+ <h4 class="font-medium mb-2 text-green-800">Légende</h4>
236
+ <div class="space-y-2">
237
+ <div><i style="background: #4CAF50"></i> Espaces Verts</div>
238
+ <div><i style="background: #8BC34A"></i> Biodiversité</div>
239
+ <div><i style="background: #FFC107"></i> Événements</div>
240
+ <div><i style="background: #9C27B0"></i> Associations</div>
241
+ <div><i style="background: #FF9800"></i> Pollution Modérée</div>
242
+ <div><i style="background: #F44336"></i> Pollution Élevée</div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Floating Action Button -->
249
+ <div class="fixed bottom-6 right-6 z-10">
250
+ <button id="fab" class="bg-green-600 hover:bg-green-500 text-white rounded-full w-14 h-14 flex items-center justify-center shadow-lg pulse">
251
+ <i class="fas fa-leaf text-xl"></i>
252
+ </button>
253
+ </div>
254
+
255
+ <!-- Chat Modal -->
256
+ <div id="chat-modal" class="chat-modal">
257
+ <div class="chat-header">
258
+ <h3 id="chat-title">Chat avec l'organisation</h3>
259
+ <button id="close-chat" class="text-white">
260
+ <i class="fas fa-times"></i>
261
+ </button>
262
+ </div>
263
+ <div id="chat-body" class="chat-body">
264
+ <div class="text-center text-gray-500 py-10">
265
+ <i class="fas fa-comments text-3xl mb-2"></i>
266
+ <p>Connectez-vous avec l'organisation</p>
267
+ </div>
268
+ </div>
269
+ <div class="chat-input">
270
+ <input type="text" id="chat-message" placeholder="Tapez votre message..." class="flex-1 border rounded-l-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-green-500">
271
+ <button id="send-message" class="bg-green-500 text-white px-4 py-2 rounded-r-lg hover:bg-green-600">
272
+ <i class="fas fa-paper-plane"></i>
273
+ </button>
274
+ </div>
275
+ </div>
276
+
277
+ <script>
278
+ // Initialize the map
279
+ const map = L.map('map').setView([48.6139, 2.4820], 13);
280
+
281
+ // Add base layer
282
+ L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
283
+ attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
284
+ maxZoom: 19
285
+ }).addTo(map);
286
+
287
+ // Add Corbeil-Essonnes overlay
288
+ const corbeilOverlay = L.imageOverlay(
289
+ 'https://upload.wikimedia.org/wikipedia/commons/2/24/91174-Corbeil-Essonnes-Sols.png',
290
+ [[48.5900, 2.4500], [48.6300, 2.5100]],
291
+ { opacity: 0.7 }
292
+ ).addTo(map);
293
+
294
+ // Sample data for ecological zones
295
+ const greenSpaces = [
296
+ { lat: 48.615, lng: 2.475, name: "Parc des Tarterêts", area: "5.2 ha", biodiversity: "Élevée", facilities: "Aire de jeux, Sentiers" },
297
+ { lat: 48.618, lng: 2.488, name: "Jardin de la Nacelle", area: "1.8 ha", biodiversity: "Moyenne", facilities: "Bassin, Bancs" },
298
+ { lat: 48.605, lng: 2.470, name: "Bois des Templiers", area: "12.5 ha", biodiversity: "Très élevée", facilities: "Sentiers, Observatoire" }
299
+ ];
300
+
301
+ // Add markers for green spaces
302
+ greenSpaces.forEach(space => {
303
+ const marker = L.marker([space.lat, space.lng], {
304
+ icon: L.divIcon({
305
+ className: 'custom-marker',
306
+ html: `<div class="bg-green-500 text-white rounded-full w-8 h-8 flex items-center justify-center shadow-lg"><i class="fas fa-tree"></i></div>`,
307
+ iconSize: [24, 24]
308
+ })
309
+ }).addTo(map);
310
+
311
+ marker.bindPopup(`
312
+ <div class="custom-popup">
313
+ <h3 class="font-bold text-lg text-green-700">${space.name}</h3>
314
+ <p class="text-sm text-gray-600">${space.area} - Biodiversité: ${space.biodiversity}</p>
315
+ <p class="text-sm mt-2"><span class="font-medium">Équipements:</span> ${space.facilities}</p>
316
+ <div class="mt-3 flex justify-between text-xs">
317
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded">Espace Vert</span>
318
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">Accès Libre</span>
319
+ </div>
320
+ </div>
321
+ `);
322
+ });
323
+
324
+ // Sample pollution data
325
+ const pollutionZones = [
326
+ { lat: 48.612, lng: 2.492, level: "Modérée", sources: "Trafic routier", value: 45 },
327
+ { lat: 48.608, lng: 2.478, level: "Élevée", sources: "Industrie, Trafic", value: 68 }
328
+ ];
329
+
330
+ pollutionZones.forEach(zone => {
331
+ const color = zone.level === "Élevée" ? "#F44336" : "#FF9800";
332
+ const marker = L.circleMarker([zone.lat, zone.lng], {
333
+ radius: 10,
334
+ color: color,
335
+ fillColor: color,
336
+ fillOpacity: 0.7
337
+ }).addTo(map);
338
+
339
+ marker.bindPopup(`
340
+ <div class="custom-popup">
341
+ <h3 class="font-bold text-lg">Niveau de Pollution: ${zone.level}</h3>
342
+ <p class="text-sm text-gray-600 mt-1">Indice: ${zone.value}/100</p>
343
+ <p class="text-sm"><span class="font-medium">Sources:</span> ${zone.sources}</p>
344
+ <div class="mt-3">
345
+ <div class="flex justify-between text-xs mb-1">
346
+ <span>0</span>
347
+ <span>25</span>
348
+ <span>50</span>
349
+ <span>75</span>
350
+ <span>100</span>
351
+ </div>
352
+ <div class="w-full bg-gray-200 rounded-full h-2">
353
+ <div class="bg-gradient-to-r from-green-500 via-yellow-500 to-red-500 h-2 rounded-full" style="width: ${zone.value}%"></div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ `);
358
+ });
359
+
360
+ // Social-ecological activities and events
361
+ const activities = [
362
+ {
363
+ lat: 48.616,
364
+ lng: 2.480,
365
+ title: "Atelier de Jardinage Urbain",
366
+ org: "Vert l'Avenir",
367
+ date: "15/06/2025",
368
+ time: "14h-17h",
369
+ desc: "Apprenez les techniques de jardinage écologique en ville et repartez avec vos propres plants.",
370
+ type: "atelier",
371
+ contact: "[email protected]",
372
+ participants: 24
373
+ },
374
+ {
375
+ lat: 48.610,
376
+ lng: 2.485,
377
+ title: "Nettoyage Citoyen de la Seine",
378
+ org: "Essonnes Propre",
379
+ date: "22/06/2025",
380
+ time: "10h-13h",
381
+ desc: "Rejoignez-nous pour nettoyer les berges de la Seine et sensibiliser à la pollution plastique.",
382
+ type: "collectif",
383
+ contact: "[email protected]",
384
+ participants: 56
385
+ },
386
+ {
387
+ lat: 48.613,
388
+ lng: 2.476,
389
+ title: "Marché de Producteurs Locaux",
390
+ org: "Terroirs Essonniens",
391
+ date: "Tous les samedis",
392
+ time: "8h-13h",
393
+ desc: "Découvrez des produits locaux, bio et de saison directement des producteurs de la région.",
394
+ type: "marche",
395
+ contact: "[email protected]",
396
+ participants: 120
397
+ },
398
+ {
399
+ lat: 48.619,
400
+ lng: 2.483,
401
+ title: "Conférence sur la Transition Énergétique",
402
+ org: "Énergie Citoyenne",
403
+ date: "28/06/2025",
404
+ time: "18h30-20h30",
405
+ desc: "Échangez avec des experts sur les solutions énergétiques locales et durables.",
406
+ type: "conference",
407
+ contact: "[email protected]",
408
+ participants: 80
409
+ },
410
+ {
411
+ lat: 48.607,
412
+ lng: 2.472,
413
+ title: "Atelier de Réparation Vélo",
414
+ org: "Cyclo Écolo",
415
+ date: "Tous les mercredis",
416
+ time: "16h-19h",
417
+ desc: "Apprenez à réparer votre vélo avec nos mécaniciens bénévoles et prolongez sa durée de vie.",
418
+ type: "atelier",
419
+ contact: "[email protected]",
420
+ participants: 15
421
+ }
422
+ ];
423
+
424
+ // Add markers for activities
425
+ activities.forEach(activity => {
426
+ let iconColor, iconClass;
427
+ if (activity.type === "atelier") {
428
+ iconColor = "#FFC107";
429
+ iconClass = "fa-seedling";
430
+ } else if (activity.type === "collectif") {
431
+ iconColor = "#2196F3";
432
+ iconClass = "fa-users";
433
+ } else if (activity.type === "marche") {
434
+ iconColor = "#4CAF50";
435
+ iconClass = "fa-shopping-basket";
436
+ } else {
437
+ iconColor = "#9C27B0";
438
+ iconClass = "fa-chalkboard-teacher";
439
+ }
440
+
441
+ const marker = L.marker([activity.lat, activity.lng], {
442
+ icon: L.divIcon({
443
+ className: 'custom-marker',
444
+ html: `<div class="bg-white border-2 border-[${iconColor}] text-[${iconColor}] rounded-full w-8 h-8 flex items-center justify-center shadow-lg"><i class="fas ${iconClass}"></i></div>`,
445
+ iconSize: [24, 24]
446
+ })
447
+ }).addTo(map);
448
+
449
+ const typeBadge = activity.type === "atelier" ? "Atelier" :
450
+ activity.type === "collectif" ? "Action collective" :
451
+ activity.type === "marche" ? "Marché" : "Conférence";
452
+
453
+ const badgeColor = activity.type === "atelier" ? "bg-yellow-100 text-yellow-800" :
454
+ activity.type === "collectif" ? "bg-blue-100 text-blue-800" :
455
+ activity.type === "marche" ? "bg-green-100 text-green-800" : "bg-purple-100 text-purple-800";
456
+
457
+ marker.bindPopup(`
458
+ <div class="custom-popup">
459
+ <div class="flex justify-between items-start">
460
+ <h3 class="font-bold text-lg">${activity.title}</h3>
461
+ <span class="${badgeColor} event-badge">${typeBadge}</span>
462
+ </div>
463
+ <p class="text-sm text-gray-600 mt-1">Organisé par <span class="font-medium">${activity.org}</span></p>
464
+
465
+ <div class="mt-3">
466
+ <p class="text-sm"><i class="fas fa-calendar-day text-green-500 mr-2"></i> ${activity.date} • ${activity.time}</p>
467
+ <p class="text-sm mt-2"><i class="fas fa-users text-green-500 mr-2"></i> ${activity.participants} participants attendus</p>
468
+ </div>
469
+
470
+ <p class="text-sm mt-3">${activity.desc}</p>
471
+
472
+ <div class="mt-4 flex justify-between">
473
+ <button class="chat-button bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded text-sm flex items-center"
474
+ data-org="${activity.org}" data-contact="${activity.contact}">
475
+ <i class="fas fa-comment-dots mr-2"></i> Contacter
476
+ </button>
477
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm flex items-center">
478
+ <i class="fas fa-calendar-plus mr-2"></i> S'inscrire
479
+ </button>
480
+ </div>
481
+ </div>
482
+ `);
483
+ });
484
+
485
+ // Local associations
486
+ const associations = [
487
+ {
488
+ lat: 48.614,
489
+ lng: 2.479,
490
+ name: "Les Jardins Partagés",
491
+ mission: "Promouvoir l'agriculture urbaine et les circuits courts",
492
+ contact: "[email protected]",
493
+ members: 45,
494
+ founded: 2021
495
+ },
496
+ {
497
+ lat: 48.611,
498
+ lng: 2.481,
499
+ name: "Énergie Citoyenne",
500
+ mission: "Développer les énergies renouvelables locales",
501
+ contact: "[email protected]",
502
+ members: 32,
503
+ founded: 2019
504
+ },
505
+ {
506
+ lat: 48.617,
507
+ lng: 2.486,
508
+ name: "Zéro Déchet Essonne",
509
+ mission: "Sensibiliser à la réduction des déchets",
510
+ contact: "[email protected]",
511
+ members: 78,
512
+ founded: 2020
513
+ }
514
+ ];
515
+
516
+ // Add markers for associations
517
+ associations.forEach(asso => {
518
+ const marker = L.marker([asso.lat, asso.lng], {
519
+ icon: L.divIcon({
520
+ className: 'custom-marker',
521
+ html: `<div class="bg-purple-500 text-white rounded-full w-8 h-8 flex items-center justify-center shadow-lg"><i class="fas fa-hands-helping"></i></div>`,
522
+ iconSize: [24, 24]
523
+ })
524
+ }).addTo(map);
525
+
526
+ marker.bindPopup(`
527
+ <div class="custom-popup">
528
+ <h3 class="font-bold text-lg">${asso.name}</h3>
529
+ <p class="text-sm text-gray-600 mt-1">${asso.members} membres • Créée en ${asso.founded}</p>
530
+
531
+ <p class="text-sm mt-3">${asso.mission}</p>
532
+
533
+ <div class="mt-4">
534
+ <button class="chat-button bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded text-sm flex items-center w-full justify-center"
535
+ data-org="${asso.name}" data-contact="${asso.contact}">
536
+ <i class="fas fa-comment-dots mr-2"></i> Contacter l'association
537
+ </button>
538
+ </div>
539
+ </div>
540
+ `);
541
+ });
542
+
543
+ // Handle map clicks
544
+ map.on('click', function(e) {
545
+ const infoContent = document.getElementById('info-content');
546
+ infoContent.innerHTML = `
547
+ <div>
548
+ <h4 class="font-semibold text-green-700 mb-2">Zone: ${e.latlng.lat.toFixed(4)}, ${e.latlng.lng.toFixed(4)}</h4>
549
+ <div class="grid grid-cols-2 gap-4 mb-4">
550
+ <div class="bg-green-50 p-3 rounded-lg">
551
+ <p class="text-xs text-green-600">Qualité de l'Air</p>
552
+ <p class="text-xl font-bold text-green-700">72/100</p>
553
+ </div>
554
+ <div class="bg-green-50 p-3 rounded-lg">
555
+ <p class="text-xs text-green-600">Activités Proches</p>
556
+ <p class="text-xl font-bold text-green-700">3</p>
557
+ </div>
558
+ </div>
559
+ <div class="mb-4">
560
+ <p class="text-sm font-medium text-gray-700 mb-1">Détails:</p>
561
+ <ul class="text-sm text-gray-600 space-y-1">
562
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Zone résidentielle</li>
563
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Accès transports à 300m</li>
564
+ <li class="flex items-center"><i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i> Pollution sonore modérée</li>
565
+ </ul>
566
+ </div>
567
+ <div class="chart-container">
568
+ <canvas id="zone-chart"></canvas>
569
+ </div>
570
+ </div>
571
+ `;
572
+
573
+ setTimeout(() => {
574
+ const ctx = document.getElementById('zone-chart');
575
+ if (ctx) {
576
+ ctx.innerHTML = `
577
+ <div class="text-center py-8 text-gray-400">
578
+ <i class="fas fa-chart-line text-3xl mb-2"></i>
579
+ <p>Graphique des indicateurs</p>
580
+ </div>
581
+ `;
582
+ }
583
+ }, 100);
584
+ });
585
+
586
+ // Sidebar toggle
587
+ const sidebar = document.getElementById('sidebar');
588
+ const toggleSidebar = document.getElementById('toggle-sidebar');
589
+ const collapseSidebar = document.getElementById('collapse-sidebar');
590
+
591
+ toggleSidebar.addEventListener('click', () => {
592
+ sidebar.classList.remove('collapsed');
593
+ });
594
+
595
+ collapseSidebar.addEventListener('click', () => {
596
+ sidebar.classList.add('collapsed');
597
+ });
598
+
599
+ // Close info panel
600
+ document.getElementById('close-info').addEventListener('click', () => {
601
+ document.getElementById('info-content').innerHTML = `
602
+ <div class="text-center py-8 text-gray-500">
603
+ <i class="fas fa-map-marker-alt text-3xl mb-2 text-green-500"></i>
604
+ <p>Cliquez sur la carte pour voir les détails d'une zone</p>
605
+ </div>
606
+ `;
607
+ });
608
+
609
+ // FAB action
610
+ document.getElementById('fab').addEventListener('click', () => {
611
+ alert("Bienvenue sur la cartographie socio-écologique de Corbeil-Essonnes 2025!\n\nExplorez les différentes couches pour découvrir les initiatives écologiques et les données sociales de notre ville.");
612
+ });
613
+
614
+ // Layer controls
615
+ document.querySelectorAll('input[type="checkbox"][data-layer]').forEach(checkbox => {
616
+ checkbox.addEventListener('change', function() {
617
+ const layer = this.dataset.layer;
618
+ console.log(`Layer ${layer} ${this.checked ? 'shown' : 'hidden'}`);
619
+ });
620
+ });
621
+
622
+ // Chat functionality
623
+ let currentChatOrg = "";
624
+ let currentChatContact = "";
625
+
626
+ // Open chat when clicking contact buttons
627
+ document.addEventListener('click', function(e) {
628
+ if (e.target.classList.contains('chat-button') || e.target.closest('.chat-button')) {
629
+ const button = e.target.classList.contains('chat-button') ? e.target : e.target.closest('.chat-button');
630
+ currentChatOrg = button.dataset.org;
631
+ currentChatContact = button.dataset.contact;
632
+
633
+ document.getElementById('chat-title').textContent = `Chat avec ${currentChatOrg}`;
634
+ document.getElementById('chat-body').innerHTML = `
635
+ <div class="text-sm text-gray-500 mb-4">
636
+ <p>Vous allez contacter: <span class="font-medium">${currentChatOrg}</span></p>
637
+ <p>Email: <span class="font-medium">${currentChatContact}</span></p>
638
+ </div>
639
+ <div class="bg-green-50 p-3 rounded-lg mb-3">
640
+ <p class="text-sm font-medium text-green-700">Bonjour, je souhaiterais obtenir plus d'informations sur vos activités.</p>
641
+ <p class="text-xs text-gray-500 text-right mt-1">Aujourd'hui, ${new Date().toLocaleTimeString()}</p>
642
+ </div>
643
+ `;
644
+
645
+ document.getElementById('chat-modal').style.display = 'block';
646
+ }
647
+ });
648
+
649
+ // Close chat
650
+ document.getElementById('close-chat').addEventListener('click', function() {
651
+ document.getElementById('chat-modal').style.display = 'none';
652
+ });
653
+
654
+ // Send message
655
+ document.getElementById('send-message').addEventListener('click', function() {
656
+ const messageInput = document.getElementById('chat-message');
657
+ const message = messageInput.value.trim();
658
+
659
+ if (message) {
660
+ const chatBody = document.getElementById('chat-body');
661
+ chatBody.innerHTML += `
662
+ <div class="bg-blue-50 p-3 rounded-lg mb-3 ml-8">
663
+ <p class="text-sm font-medium text-blue-700">${message}</p>
664
+ <p class="text-xs text-gray-500 text-right mt-1">Maintenant</p>
665
+ </div>
666
+ <div class="bg-green-50 p-3 rounded-lg mb-3">
667
+ <p class="text-sm font-medium text-green-700">Merci pour votre message! Nous vous répondrons bientôt par email à propos de: "${message}"</p>
668
+ <p class="text-xs text-gray-500 text-right mt-1">Maintenant</p>
669
+ </div>
670
+ `;
671
+ messageInput.value = '';
672
+ chatBody.scrollTop = chatBody.scrollHeight;
673
+
674
+ // In a real app, this would send the message to the organization
675
+ console.log(`Message to ${currentChatContact}: ${message}`);
676
+ }
677
+ });
678
+
679
+ // Allow pressing Enter to send message
680
+ document.getElementById('chat-message').addEventListener('keypress', function(e) {
681
+ if (e.key === 'Enter') {
682
+ document.getElementById('send-message').click();
683
+ }
684
+ });
685
+ </script>
686
+ <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=Ko0ol/test1ce" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
687
+ </html>