Hugging Face's logo

Spaces:
Dannylova31
/
bdev
Running

App Files Community
Dannylova31 commited on
Commit
ea7c5e7
·
verified ·
1 Parent(s): 4dec48d

dans vos application rajoute : addrese , et mettre la posibkité de mettre si c'est urgent ; est change disgan de lapplication met la tres pro - Follow Up Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +296 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bdev
3
- emoji: 🏢
4
  colorFrom: yellow
5
- colorTo: red
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: bdev
3
+ emoji: 🐳
4
  colorFrom: yellow
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,296 @@
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>Business DEVELOPING | Demande Client</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .fade-in {
11
+ animation: fadeIn 0.5s ease-in-out;
12
+ }
13
+ @keyframes fadeIn {
14
+ from { opacity: 0; transform: translateY(10px); }
15
+ to { opacity: 1; transform: translateY(0); }
16
+ }
17
+ .category-icon {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .category-card:hover .category-icon {
21
+ transform: scale(1.1) rotate(5deg);
22
+ }
23
+ #confirmation {
24
+ display: none;
25
+ }
26
+ .urgent-checked {
27
+ background-color: rgba(239, 68, 68, 0.1);
28
+ border-color: #ef4444;
29
+ }
30
+ .urgent-label {
31
+ transition: all 0.3s ease;
32
+ }
33
+ input:checked ~ .urgent-label {
34
+ color: #ef4444;
35
+ font-weight: 600;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="bg-gray-50 min-h-screen">
40
+ <header class="bg-gradient-to-r from-indigo-600 to-purple-700 text-white shadow-lg">
41
+ <div class="container mx-auto px-4 py-6">
42
+ <div class="flex justify-between items-center">
43
+ <div class="flex items-center space-x-2">
44
+ <i class="fas fa-chart-line text-2xl"></i>
45
+ <h1 class="text-2xl md:text-3xl font-bold">Business DEVELOPING</h1>
46
+ </div>
47
+ <div class="hidden md:block">
48
+ <span class="bg-blue-500 px-3 py-1 rounded-full text-sm font-medium">DEMANDE CLIENT</span>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </header>
53
+
54
+ <main class="container mx-auto px-4 py-8">
55
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden fade-in">
56
+ <div class="p-6 md:p-8">
57
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Formulaire de Demande</h2>
58
+
59
+ <form id="demandeForm" class="space-y-6">
60
+ <!-- Informations client -->
61
+ <div class="space-y-4">
62
+ <h3 class="text-xl font-semibold text-gray-700 border-b pb-2">Vos informations</h3>
63
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
64
+ <div>
65
+ <label for="nom" class="block text-sm font-medium text-gray-700 mb-1">Nom complet *</label>
66
+ <input type="text" id="nom" name="nom" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
67
+ </div>
68
+ <div>
69
+ <label for="entreprise" class="block text-sm font-medium text-gray-700 mb-1">Nom de l'entreprise</label>
70
+ <input type="text" id="entreprise" name="entreprise" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
71
+ </div>
72
+ </div>
73
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
74
+ <div>
75
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
76
+ <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
77
+ </div>
78
+ <div>
79
+ <label for="telephone" class="block text-sm font-medium text-gray-700 mb-1">Téléphone *</label>
80
+ <input type="tel" id="telephone" name="telephone" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
81
+ </div>
82
+ </div>
83
+ <div>
84
+ <label for="adresse" class="block text-sm font-medium text-gray-700 mb-1">Adresse *</label>
85
+ <input type="text" id="adresse" name="adresse" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Urgence -->
90
+ <div class="space-y-4">
91
+ <h3 class="text-xl font-semibold text-gray-700 border-b pb-2">Urgence de la demande</h3>
92
+ <div class="flex items-center">
93
+ <input id="urgent" name="urgent" type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded">
94
+ <label for="urgent" class="ml-2 block text-sm font-medium text-gray-700">
95
+ Cette demande est urgente <span class="text-red-500 font-bold">(Priorité maximum)</span>
96
+ </label>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Domaine d'activité -->
101
+ <div class="space-y-4">
102
+ <h3 class="text-xl font-semibold text-gray-700 border-b pb-2">Domaine d'activité concerné *</h3>
103
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" id="domainesContainer">
104
+ <!-- Domaines will be inserted by JS -->
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Détails de la demande -->
109
+ <div class="space-y-4">
110
+ <h3 class="text-xl font-semibold text-gray-700 border-b pb-2">Détails de votre demande *</h3>
111
+ <div>
112
+ <label for="commentaire" class="block text-sm font-medium text-gray-700 mb-1">Votre demande</label>
113
+ <textarea id="commentaire" name="commentaire" rows="5" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
114
+ </div>
115
+ <div>
116
+ <label for="fichiers" class="block text-sm font-medium text-gray-700 mb-1">Joindre des fichiers (optionnel)</label>
117
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
118
+ <div class="space-y-1 text-center">
119
+ <div class="flex text-sm text-gray-600">
120
+ <label for="fichiers" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
121
+ <span>Télécharger un fichier</span>
122
+ <input id="fichiers" name="fichiers" type="file" class="sr-only" multiple>
123
+ </label>
124
+ <p class="pl-1">ou glisser-déposer</p>
125
+ </div>
126
+ <p class="text-xs text-gray-500">PDF, DOCX, JPG, PNG jusqu'à 10MB</p>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <div class="flex items-center">
133
+ <input id="confidentialite" name="confidentialite" type="checkbox" required class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
134
+ <label for="confidentialite" class="ml-2 block text-sm text-gray-700">
135
+ Je consens au traitement de mes données personnelles conformément à la politique de confidentialité.
136
+ </label>
137
+ </div>
138
+
139
+ <div class="flex justify-end">
140
+ <button type="submit" class="px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">
141
+ <i class="fas fa-paper-plane mr-2"></i> Envoyer la demande
142
+ </button>
143
+ </div>
144
+ </form>
145
+
146
+ <!-- Confirmation -->
147
+ <div id="confirmation" class="text-center py-12 fade-in">
148
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
149
+ <i class="fas fa-check text-green-600 text-xl"></i>
150
+ </div>
151
+ <h3 class="mt-3 text-lg font-medium text-gray-900">Demande envoyée avec succès !</h3>
152
+ <div class="mt-2 text-sm text-gray-500">
153
+ <p>Nous avons bien reçu votre demande et vous contacterons dans les plus brefs délais.</p>
154
+ </div>
155
+ <div class="mt-6">
156
+ <button onclick="resetForm()" class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
157
+ <i class="fas fa-plus mr-2"></i> Nouvelle demande
158
+ </button>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </main>
164
+
165
+ <footer class="bg-gray-800 text-white py-8 mt-12">
166
+ <div class="container mx-auto px-4">
167
+ <div class="flex flex-col md:flex-row justify-between items-center">
168
+ <div class="mb-4 md:mb-0">
169
+ <h2 class="text-xl font-bold flex items-center">
170
+ <i class="fas fa-chart-line mr-2"></i> Business DEVELOPING
171
+ </h2>
172
+ <p class="text-gray-400 mt-1">Votre partenaire pour le développement de votre entreprise</p>
173
+ </div>
174
+ <div class="flex space-x-6">
175
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
176
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
177
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
178
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
179
+ </div>
180
+ </div>
181
+ <div class="border-t border-gray-700 mt-6 pt-6 text-sm text-gray-400 text-center">
182
+ <p>© 2023 Business DEVELOPING. Tous droits réservés.</p>
183
+ </div>
184
+ </div>
185
+ </footer>
186
+
187
+ <script>
188
+ // Domaines d'activité avec icônes
189
+ const domaines = [
190
+ { id: 'telecom', nom: 'Télécommunications', icon: 'fa-tower-cell' },
191
+ { id: 'informatique', nom: 'Informatique & services numériques', icon: 'fa-laptop-code' },
192
+ { id: 'seo', nom: 'Référencement SEO & visibilité en ligne', icon: 'fa-magnifying-glass-chart' },
193
+ { id: 'notoriete', nom: 'Création de notoriété / image de marque', icon: 'fa-certificate' },
194
+ { id: 'web', nom: 'Développement de sites web', icon: 'fa-globe' },
195
+ { id: 'mobile', nom: 'Applications mobiles', icon: 'fa-mobile-screen' },
196
+ { id: 'batiment', nom: 'Bâtiment & travaux publics', icon: 'fa-building' },
197
+ { id: 'genie', nom: 'Génie civil', icon: 'fa-helmet-safety' },
198
+ { id: 'electricite', nom: 'Électricité & installations techniques', icon: 'fa-bolt' },
199
+ { id: 'securite', nom: 'Sécurité (physique et électronique)', icon: 'fa-shield-halved' },
200
+ { id: 'etudes', nom: 'Bureaux d'études & ingénierie', icon: 'fa-file-pen' },
201
+ { id: 'architecture', nom: 'Architecture & urbanisme', icon: 'fa-ruler-combined' },
202
+ { id: 'creation', nom: 'Création d'entreprise de A à Z', icon: 'fa-lightbulb' },
203
+ { id: 'gestion', nom: 'Gestion de projet & accompagnement stratégique', icon: 'fa-diagram-project' }
204
+ ];
205
+
206
+ // Afficher les domaines d'activité
207
+ function afficherDomaines() {
208
+ const container = document.getElementById('domainesContainer');
209
+ container.innerHTML = '';
210
+
211
+ domaines.forEach(domaine => {
212
+ const card = document.createElement('div');
213
+ card.className = 'category-card p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition duration-150 ease-in-out';
214
+ card.innerHTML = `
215
+ <div class="flex items-center">
216
+ <div class="mr-3 p-2 bg-blue-100 rounded-full">
217
+ <i class="fas ${domaine.icon} text-blue-600 category-icon"></i>
218
+ </div>
219
+ <div>
220
+ <input type="radio" id="${domaine.id}" name="domaine" value="${domaine.nom}" class="hidden peer" required>
221
+ <label for="${domaine.id}" class="text-sm font-medium text-gray-700 peer-checked:text-blue-600 cursor-pointer">${domaine.nom}</label>
222
+ </div>
223
+ </div>
224
+ `;
225
+ container.appendChild(card);
226
+
227
+ // Gérer le clic sur la carte
228
+ card.addEventListener('click', () => {
229
+ const radio = card.querySelector('input[type="radio"]');
230
+ radio.checked = true;
231
+
232
+ // Mise à jour du style pour toutes les cartes
233
+ document.querySelectorAll('.category-card').forEach(c => {
234
+ if (c === card) {
235
+ c.classList.add('border-blue-500', 'bg-blue-50');
236
+ } else {
237
+ c.classList.remove('border-blue-500', 'bg-blue-50');
238
+ }
239
+ });
240
+ });
241
+ });
242
+ }
243
+
244
+ // Gérer la soumission du formulaire
245
+ document.getElementById('demandeForm').addEventListener('submit', function(e) {
246
+ e.preventDefault();
247
+
248
+ // Simuler l'envoi (en production, vous utiliseriez AJAX ou Fetch)
249
+ setTimeout(() => {
250
+ document.getElementById('demandeForm').style.display = 'none';
251
+ document.getElementById('confirmation').style.display = 'block';
252
+
253
+ // Afficher les données du formulaire (pour démo, serait envoyé au serveur en réalité)
254
+ const formData = new FormData(this);
255
+ console.log('Données du formulaire:', Object.fromEntries(formData));
256
+ }, 1000);
257
+ });
258
+
259
+ // Réinitialiser le formulaire
260
+ function resetForm() {
261
+ document.getElementById('demandeForm').reset();
262
+ document.getElementById('demandeForm').style.display = 'block';
263
+ document.getElementById('confirmation').style.display = 'none';
264
+
265
+ // Réinitialiser le style des cartes de domaine
266
+ document.querySelectorAll('.category-card').forEach(c => {
267
+ c.classList.remove('border-blue-500', 'bg-blue-50');
268
+ });
269
+ }
270
+
271
+ // Initialiser la page
272
+ document.addEventListener('DOMContentLoaded', () => {
273
+ afficherDomaines();
274
+
275
+ // Gestion glisser-déposer pour les fichiers
276
+ const dropZone = document.querySelector('.border-dashed');
277
+ const fileInput = document.getElementById('fichiers');
278
+
279
+ dropZone.addEventListener('dragover', (e) => {
280
+ e.preventDefault();
281
+ dropZone.classList.add('border-blue-500', 'bg-blue-50');
282
+ });
283
+
284
+ dropZone.addEventListener('dragleave', () => {
285
+ dropZone.classList.remove('border-blue-500', 'bg-blue-50');
286
+ });
287
+
288
+ dropZone.addEventListener('drop', (e) => {
289
+ e.preventDefault();
290
+ dropZone.classList.remove('border-blue-500', 'bg-blue-50');
291
+ fileInput.files = e.dataTransfer.files;
292
+ });
293
+ });
294
+ </script>
295
+ <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=Dannylova31/bdev" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
296
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ fait moi une application web au nom de business DEVELOPING pour encoder demande d'un client dans l'application le client doit mettere c'est information dans une zione commentaire et coucher quelle cdomande d'actuivier il veux entre c'etr dommaine : Télécommunications Informatique & services numériques Référencement SEO & visibilité en ligne Création de notoriété / image de marque Développement de sites web Applications mobiles Bâtiment & travaux publics Génie civil Électricité & installations techniques Sécurité (physique et électronique) Bureaux d’études & ingénierie Architecture & urbanisme Création d’entreprise de A à Z Gestion de projet & accompagnement stratégique
2
+ dans vos application rajoute : addrese , et mettre la posibkité de mettre si c'est urgent ; est change disgan de lapplication met la tres pro