Spaces:
Running
Running
crée moi une page annuaire/catalogue des différents commerces, restaurants, activités de ma ville. Je dois pouvoir ajouter facilement sur cette page une nouvelle catégorie, un nouveaux lieu ou établissement, activité. Je dois pouvoir nommer le commerce, lieu ou établissement, un texte descriptif, un bouton redigeant vers leur site web (j'implémente une url dans le champs). A coté du texte il dois y avoir une vidéo youtube de l'établissement qui dois pouvoir se lancer ou une image de l'établissement. Je dois pouvoir controler image ou vidéo.
Browse files- README.md +8 -5
- index.html +220 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: VilleVibe Explorer 🏙️
|
| 3 |
+
colorFrom: gray
|
| 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).
|
index.html
CHANGED
|
@@ -1,19 +1,221 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>VilleVibe Explorer - Annuaire Local</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script>
|
| 10 |
+
tailwind.config = {
|
| 11 |
+
theme: {
|
| 12 |
+
extend: {
|
| 13 |
+
colors: {
|
| 14 |
+
nightblue: '#0f172a',
|
| 15 |
+
primary: '#3b82f6',
|
| 16 |
+
secondary: '#f97316',
|
| 17 |
+
}
|
| 18 |
+
}
|
| 19 |
+
}
|
| 20 |
+
}
|
| 21 |
+
</script>
|
| 22 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 23 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 24 |
+
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
|
| 25 |
+
</head>
|
| 26 |
+
<body class="bg-nightblue text-white min-h-screen">
|
| 27 |
+
<!-- Navigation -->
|
| 28 |
+
<nav class="bg-nightblue border-b border-gray-700 sticky top-0 z-50">
|
| 29 |
+
<div class="container mx-auto px-4 py-3">
|
| 30 |
+
<div class="flex justify-between items-center">
|
| 31 |
+
<div class="flex items-center space-x-2">
|
| 32 |
+
<i data-feather="map" class="text-primary"></i>
|
| 33 |
+
<h1 class="text-xl font-bold">VilleVibe Explorer</h1>
|
| 34 |
+
</div>
|
| 35 |
+
<div class="flex space-x-4">
|
| 36 |
+
<button id="adminToggle" class="bg-primary hover:bg-blue-600 px-4 py-2 rounded-lg transition-colors">
|
| 37 |
+
<i data-feather="settings" class="w-4 h-4 mr-2"></i>
|
| 38 |
+
Admin
|
| 39 |
+
</button>
|
| 40 |
+
<button class="bg-secondary hover:bg-orange-600 px-4 py-2 rounded-lg transition-colors">
|
| 41 |
+
<i data-feather="plus" class="w-4 h-4 mr-2"></i>
|
| 42 |
+
Nouveau
|
| 43 |
+
</button>
|
| 44 |
+
</div>
|
| 45 |
+
</div>
|
| 46 |
+
</div>
|
| 47 |
+
</nav>
|
| 48 |
+
|
| 49 |
+
<!-- Admin Panel -->
|
| 50 |
+
<div id="adminPanel" class="hidden bg-gray-800 p-6 border-b border-gray-700">
|
| 51 |
+
<div class="container mx-auto">
|
| 52 |
+
<h2 class="text-lg font-semibold mb-4">Panneau d'administration</h2>
|
| 53 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
| 54 |
+
<div class="bg-gray-700 p-4 rounded-lg">
|
| 55 |
+
<h3 class="font-medium mb-3">Gérer les catégories</h3>
|
| 56 |
+
<div class="space-y-2">
|
| 57 |
+
<input type="text" placeholder="Nouvelle catégorie" class="w-full bg-gray-600 rounded px-3 py-2">
|
| 58 |
+
<button class="bg-primary hover:bg-blue-600 px-3 py-1 rounded text-sm">Ajouter</button>
|
| 59 |
+
</div>
|
| 60 |
+
</div>
|
| 61 |
+
<div class="bg-gray-700 p-4 rounded-lg">
|
| 62 |
+
<h3 class="font-medium mb-3">Import/Export</h3>
|
| 63 |
+
<div class="space-y-2">
|
| 64 |
+
<button class="w-full bg-green-600 hover:bg-green-700 px-3 py-2 rounded">Exporter les données</button>
|
| 65 |
+
<button class="w-full bg-purple-600 hover:bg-purple-700 px-3 py-2 rounded">Importer des données</button>
|
| 66 |
+
</div>
|
| 67 |
+
</div>
|
| 68 |
+
<div class="bg-gray-700 p-4 rounded-lg">
|
| 69 |
+
<h3 class="font-medium mb-3">Paramètres</h3>
|
| 70 |
+
<div class="space-y-2">
|
| 71 |
+
<label class="flex items-center">
|
| 72 |
+
<input type="checkbox" class="mr-2"> Mode maintenance
|
| 73 |
+
</label>
|
| 74 |
+
<label class="flex items-center">
|
| 75 |
+
<input type="checkbox" class="mr-2"> Notifications par email
|
| 76 |
+
</label>
|
| 77 |
+
</div>
|
| 78 |
+
</div>
|
| 79 |
+
</div>
|
| 80 |
+
</div>
|
| 81 |
+
</div>
|
| 82 |
+
|
| 83 |
+
<!-- Main Content -->
|
| 84 |
+
<main class="container mx-auto px-4 py-8">
|
| 85 |
+
<!-- Categories Filter -->
|
| 86 |
+
<div class="mb-8">
|
| 87 |
+
<h2 class="text-2xl font-bold mb-4">Catégories</h2>
|
| 88 |
+
<div class="flex flex-wrap gap-2">
|
| 89 |
+
<button class="bg-primary px-4 py-2 rounded-full">Tous</button>
|
| 90 |
+
<button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-full">Restaurants</button>
|
| 91 |
+
<button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-full">Commerces</button>
|
| 92 |
+
<button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-full">Activités</button>
|
| 93 |
+
<button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-full">Services</button>
|
| 94 |
+
</div>
|
| 95 |
+
</div>
|
| 96 |
+
|
| 97 |
+
<!-- Establishments Grid -->
|
| 98 |
+
<div id="establishmentsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
| 99 |
+
<!-- Sample Establishment Card -->
|
| 100 |
+
<div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
|
| 101 |
+
<div class="relative">
|
| 102 |
+
<img src="http://static.photos/restaurant/640x360/1"
|
| 103 |
+
alt="Restaurant示例"
|
| 104 |
+
class="w-full h-48 object-cover"
|
| 105 |
+
loading="lazy">
|
| 106 |
+
<div class="absolute top-3 right-3 bg-primary px-2 py-1 rounded text-sm">
|
| 107 |
+
Restaurant
|
| 108 |
+
</div>
|
| 109 |
+
</div>
|
| 110 |
+
<div class="p-4">
|
| 111 |
+
<h3 class="text-xl font-semibold mb-2">Le Bistrot Parisien</h3>
|
| 112 |
+
<p class="text-gray-300 mb-4">Cuisine française authentique dans une ambiance chaleureuse. Parfait pour les dîners en famille.</p>
|
| 113 |
+
<div class="flex justify-between items-center">
|
| 114 |
+
<a href="#" class="bg-secondary hover:bg-orange-600 px-4 py-2 rounded transition-colors">
|
| 115 |
+
Visiter le site
|
| 116 |
+
</a>
|
| 117 |
+
<button class="text-gray-400 hover:text-white">
|
| 118 |
+
<i data-feather="edit" class="w-4 h-4"></i>
|
| 119 |
+
</button>
|
| 120 |
+
</div>
|
| 121 |
+
</div>
|
| 122 |
+
</div>
|
| 123 |
+
|
| 124 |
+
<!-- More sample cards... -->
|
| 125 |
+
</div>
|
| 126 |
+
|
| 127 |
+
<!-- Add New Establishment Modal -->
|
| 128 |
+
<div id="addModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
|
| 129 |
+
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-800 p-6 rounded-xl w-full max-w-2xl">
|
| 130 |
+
<h2 class="text-2xl font-bold mb-6">Ajouter un nouvel établissement</h2>
|
| 131 |
+
<form class="space-y-4">
|
| 132 |
+
<div>
|
| 133 |
+
<label class="block mb-2">Nom</label>
|
| 134 |
+
<input type="text" class="w-full bg-gray-700 rounded px-3 py-2">
|
| 135 |
+
</div>
|
| 136 |
+
<div>
|
| 137 |
+
<label class="block mb-2">Description</label>
|
| 138 |
+
<textarea class="w-full bg-gray-700 rounded px-3 py-2 h-24"></textarea>
|
| 139 |
+
</div>
|
| 140 |
+
<div>
|
| 141 |
+
<label class="block mb-2">URL du site web</label>
|
| 142 |
+
<input type="url" class="w-full bg-gray-700 rounded px-3 py-2">
|
| 143 |
+
</div>
|
| 144 |
+
<div>
|
| 145 |
+
<label class="block mb-2">Type de média</label>
|
| 146 |
+
<select class="w-full bg-gray-700 rounded px-3 py-2">
|
| 147 |
+
<option value="image">Image</option>
|
| 148 |
+
<option value="video">Vidéo YouTube</option>
|
| 149 |
+
</select>
|
| 150 |
+
</div>
|
| 151 |
+
<div class="flex justify-end space-x-3">
|
| 152 |
+
<button type="button" class="bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded">
|
| 153 |
+
Annuler
|
| 154 |
+
</button>
|
| 155 |
+
<button type="submit" class="bg-primary hover:bg-blue-600 px-4 py-2 rounded">
|
| 156 |
+
Ajouter
|
| 157 |
+
</button>
|
| 158 |
+
</div>
|
| 159 |
+
</form>
|
| 160 |
+
</div>
|
| 161 |
+
</div>
|
| 162 |
+
</main>
|
| 163 |
+
|
| 164 |
+
<script>
|
| 165 |
+
// Toggle admin panel
|
| 166 |
+
document.getElementById('adminToggle').addEventListener('click', function() {
|
| 167 |
+
const panel = document.getElementById('adminPanel');
|
| 168 |
+
panel.classList.toggle('hidden');
|
| 169 |
+
});
|
| 170 |
+
|
| 171 |
+
// Initialize Feather Icons
|
| 172 |
+
feather.replace();
|
| 173 |
+
|
| 174 |
+
// Sample data for demonstration
|
| 175 |
+
const sampleData = [
|
| 176 |
+
{
|
| 177 |
+
name: "Le Bistrot Parisien",
|
| 178 |
+
description: "Cuisine française authentique dans une ambiance chaleureuse.",
|
| 179 |
+
category: "Restaurant",
|
| 180 |
+
url: "#",
|
| 181 |
+
media: "http://static.photos/restaurant/640x360/1"
|
| 182 |
+
},
|
| 183 |
+
{
|
| 184 |
+
name: "Boutique Artisanale",
|
| 185 |
+
description: "Produits locaux et artisanaux de qualité exceptionnelle.",
|
| 186 |
+
category: "Commerce",
|
| 187 |
+
url: "#",
|
| 188 |
+
media: "http://static.photos/retail/640x360/2"
|
| 189 |
+
},
|
| 190 |
+
{
|
| 191 |
+
name: "Parc Aventure",
|
| 192 |
+
description: "Activités en plein air pour toute la famille.",
|
| 193 |
+
category: "Activité",
|
| 194 |
+
url: "#",
|
| 195 |
+
media: "http://static.photos/nature/640x360/3"
|
| 196 |
+
}
|
| 197 |
+
];
|
| 198 |
+
|
| 199 |
+
// Lazy loading implementation
|
| 200 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 201 |
+
const lazyImages = [].slice.call(document.querySelectorAll('img[loading="lazy"]'));
|
| 202 |
+
|
| 203 |
+
if ('IntersectionObserver' in window) {
|
| 204 |
+
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
|
| 205 |
+
entries.forEach(function(entry) {
|
| 206 |
+
if (entry.isIntersecting) {
|
| 207 |
+
let lazyImage = entry.target;
|
| 208 |
+
lazyImage.src = lazyImage.dataset.src;
|
| 209 |
+
lazyImageObserver.unobserve(lazyImage);
|
| 210 |
+
}
|
| 211 |
+
});
|
| 212 |
+
});
|
| 213 |
+
|
| 214 |
+
lazyImages.forEach(function(lazyImage) {
|
| 215 |
+
lazyImageObserver.observe(lazyImage);
|
| 216 |
+
});
|
| 217 |
+
}
|
| 218 |
+
});
|
| 219 |
+
</script>
|
| 220 |
+
</body>
|
| 221 |
</html>
|