Spaces:

sidimedsidi
/

undefined

Running

App Files Files Community

sidimedsidi commited on Oct 12, 2025

Commit

3d0adb5

verified ·

1 Parent(s): e6d85db

pas fonctionnel et toutes les donnes sont manquantes

Browse files

Files changed (2) hide show

README.md +9 -5
index.html +310 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 🚀
-colorFrom: red
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: undefined
+colorFrom: purple
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,311 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vaccination Insight Atlas - Tableau de Bord</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3B82F6',
+                        secondary: '#10B981'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+        .stat-card {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <!-- Header -->
+    <header class="gradient-bg text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center space-x-3 mb-4 md:mb-0">
+                <i data-feather="shield" class="w-8 h-8"></i>
+                <h1 class="text-2xl font-bold">Vaccination Insight Atlas</h1>
+                <span class="text-sm bg-white/20 px-2 py-1 rounded-full">💉 Suivi en Temps Réel</span>
+            </div>
+            <div class="flex items-center space-x-4">
+                <div class="flex items-center space-x-2">
+                    <i data-feather="map-pin" class="w-5 h-5"></i>
+                <span class="text-lg">Hodh El Chargui</span>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Control Panel -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+            <!-- Wilaya Selection -->
+            <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
+                <label class="block text-sm font-semibold text-gray-700 mb-3">
+                    <i data-feather="map" class="w-4 h-4 inline mr-2"></i>
+                    Sélectionnez une Wilaya
+                </label>
+                <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
+                    <option value="Hodh El Chargui" selected>Hodh El Chargui</option>
+                </select>
+            </div>
+            <!-- Commune Selection -->
+            <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
+                    <label class="block text-sm font-semibold text-gray-700 mb-3">
+                        <i data-feather="home" class="w-4 h-4 inline mr-2"></i>
+                    Sélectionnez une Commune
+                </label>
+                <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" multiple>
+                        <option value="Beribavar">Beribavar</option>
+                        <option value="Bangou">Bangou</option>
+                        <option value="Néma">Néma</option>
+                        <option value="Ghlig Ehel Beye">Ghlig Ehel Beye</option>
+                        <option value="Bassikounou">Bassikounou</option>
+                        <option value="Amourj">Amourj</option>
+                        <option value="Feirenni">Feirenni</option>
+                    </select>
+            </div>
+            <!-- Energy Source Selection -->
+            <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
+                <label class="block text-sm font-semibold text-gray-700 mb-3">
+                    <i data-feather="battery" class="w-4 h-4 inline mr-2"></i>
+                    Sources d'Énergie
+                </label>
+                <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" multiple>
+                    <option value="Énergie solaire">Énergie solaire</option>
+                    <option value="Électricité">Électricité</option>
+                    <option value="Gaz">Gaz</option>
+                </select>
+            </div>
+        </div>
+        <!-- Sliders Section -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+            <!-- Children Age Slider -->
+            <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
+                <label class="block text-sm font-semibold text-gray-700 mb-4">
+                    <i data-feather="users" class="w-4 h-4 inline mr-2"></i>
+                    Âge des Enfants (Minimum)
+                </label>
+                <input type="range" min="0" max="100" value="0" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider">
+                <div class="flex justify-between text-xs text-gray-500 mt-2">
+                    <span>0</span>
+                    <span>100</span>
+                </div>
+            </div>
+            <!-- Zero Dose Slider -->
+            <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
+                <label class="block text-sm font-semibold text-gray-700 mb-4">
+                    <i data-feather="alert-triangle" class="w-4 h-4 inline mr-2"></i>
+                    Enfants Zéro Dose (Maximum)
+                </label>
+                <input type="range" min="0" max="100" value="0" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider">
+                <div class="flex justify-between text-xs text-gray-500 mt-2">
+                    <span>0</span>
+                    <span>100</span>
+                </div>
+            </div>
+        </div>
+        <!-- Statistics Cards -->
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+            <div class="stat-card rounded-xl p-4 text-center text-white">
+                <i data-feather="users" class="w-6 h-6 mx-auto mb-2"></i>
+                <div class="text-2xl font-bold">24,910</div>
+                <div class="text-sm opacity-80">Enfants en âge</div>
+            </div>
+            <div class="stat-card rounded-xl p-4 text-center text-white">
+                <i data-feather="check-circle" class="w-6 h-6 mx-auto mb-2"></i>
+                <div class="text-2xl font-bold">18,742</div>
+                <div class="text-sm opacity-80">Vaccinés</div>
+            </div>
+            <div class="stat-card rounded-xl p-4 text-center text-white">
+                <i data-feather="alert-triangle" class="w-6 h-6 mx-auto mb-2"></i>
+                <div class="text-2xl font-bold">6,168</div>
+                <div class="text-sm opacity-80">Zéro Dose</div>
+            </div>
+            <div class="stat-card rounded-xl p-4 text-center text-white">
+                <i data-feather="map-pin" class="w-6 h-6 mx-auto mb-2"></i>
+                <div class="text-2xl font-bold">89%</div>
+                <div class="text-sm opacity-80">Couverture</div>
+            </div>
+        </div>
+        <!-- Interactive Map -->
+        <div class="bg-white rounded-xl shadow-lg p-6 mb-8 card-hover">
+                <div class="flex items-center justify-between mb-4">
+                    <h2 class="text-xl font-semibold text-gray-800">
+                    <i data-feather="map" class="w-5 h-5 inline mr-2"></i>
+                    Carte Interactive des Points de Vaccination
+                </h2>
+                <button class="bg-primary hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-200">
+                    <i data-feather="refresh-cw" class="w-4 h-4 inline mr-2"></i>
+                    Actualiser
+                </button>
+            </div>
+            <div id="vaccination-map" class="w-full h-96 rounded-lg border border-gray-200">
+                <!-- Map placeholder -->
+                <div class="w-full h-full flex items-center justify-center text-gray-500">
+                    <i data-feather="map" class="w-12 h-12 mb-2"></i>
+                    <p>Carte en cours de chargement...</p>
+                </div>
+            </div>
+        </div>
+        <!-- Charts Grid -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+            <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
+                <h3 class="text-lg font-semibold text-gray-800 mb-4">
+                    <i data-feather="bar-chart-2" class="w-5 h-5 inline mr-2"></i>
+                    Répartition par Commune
+                </h3>
+                <div id="commune-bar-chart" class="w-full h-64"></div>
+            </div>
+            <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
+                <h3 class="text-lg font-semibold text-gray-800 mb-4">
+                    <i data-feather="pie-chart" class="w-5 h-5 inline mr-2"></i>
+                    Sources d'Énergie
+                </h3>
+                <div id="energy-pie-chart" class="w-full h-64"></div>
+            </div>
+            <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
+                <h3 class="text-lg font-semibold text-gray-800 mb-4">
+                    <i data-feather="trending-up" class="w-5 h-5 inline mr-2"></i>
+                    Couverture Vaccinale
+                </h3>
+                <div id="vaccination-coverage-chart" class="w-full h-64"></div>
+            </div>
+            <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
+                <h3 class="text-lg font-semibold text-gray-800 mb-4">
+                    <i data-feather="activity" class="w-5 h-5 inline mr-2"></i>
+                    Corrélation
+                </h3>
+                <div id="correlation-scatter-chart" class="w-full h-64"></div>
+            </div>
+        </div>
+        <!-- Distance Table -->
+        <div class="bg-white rounded-xl shadow-lg p-6 mb-8 card-hover">
+                <h3 class="text-lg font-semibold text-gray-800 mb-4">
+                    <i data-feather="navigation" class="w-5 h-5 inline mr-2"></i>
+                Tableau des Distances
+            </h3>
+            <div class="overflow-x-auto">
+                <table class="w-full table-auto">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            Commune
+                        </th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            Point de Vaccination
+                        </th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            Distance (km)
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200">
+                        <tr class="hover:bg-gray-50">
+                            <td class="px-4 py-3 text-sm text-gray-900">
+                            Beribavar
+                        </td>
+                        <td class="px-4 py-3 text-sm text-gray-900">
+                            القاسمية
+                        </td>
+                        <td class="px-4 py-3 text-sm text-gray-900">
+                            0.00
+                        </td>
+                    </tr>
+                    <tr class="hover:bg-gray-50">
+                        <td class="px-4 py-3 text-sm text-gray-900">
+                            Beribavar
+                        </td>
+                        <td class="px-4 py-3 text-sm text-gray-900">
+                            السليمانية
+                        </td>
+                        <td class="px-4 py-3 text-sm text-gray-900">
+                            السليمانية
+                        </td>
+                        <td class="px-4 py-3 text-sm text-gray-900">
+                            0.85
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <!-- Alert Section -->
+    <div id="alert" class="hidden bg-yellow-50 border border-yellow-200 rounded-xl p-4 mb-8">
+        <div class="flex items-center">
+            <i data-feather="alert-triangle" class="w-5 h-5 text-yellow-600 mr-3"></i>
+        <div>
+            <h4 class="text-sm font-semibold text-yellow-800">
+                Information
+            </h4>
+            <p class="text-sm text-yellow-700">
+                Données en temps réel - Mise à jour automatique
+            </p>
+        </div>
+    </div>
+</main>
+<!-- Footer -->
+<footer class="gradient-bg text-white py-8 mt-12">
+    <div class="container mx-auto px-4 text-center">
+        <div class="flex justify-center space-x-6 mb-4">
+            <i data-feather="heart" class="w-5 h-5"></i>
+        <p class="text-sm opacity-80">
+        Système de Suivi Vaccinal - Hodh El Chargui
+        </p>
+        <p class="text-xs opacity-60 mt-2">
+        Développé pour optimiser la couverture vaccinale
+        </p>
+    </div>
+</footer>
+<script>
+    feather.replace();
+    // Interactive slider effects
+    document.querySelectorAll('.slider').forEach(slider => {
+        slider.addEventListener('input', function() {
+            const value = (this.value - this.min) / (this.max - this.min) * 100;
+            this.style.background = `linear-gradient(to right, #3B82F6 ${value}%, #E5E7EB ${value}%)`;
+        });
+    });
+    // Initialize with gradient
+    document.querySelectorAll('.slider').forEach(slider => {
+        const value = (slider.value - slider.min) / (slider.max - slider.min) * 100;
+        slider.style.background = `linear-gradient(to right, #3B82F6 ${value}%, #E5E7EB ${value}%)`;
+    });
+</script>
+</body>
 </html>