Hugging Face's logo

Spaces:
ISSAKAO
/
test02
Running

App Files Community
ISSAKAO commited on
Commit
70963da
·
verified ·
1 Parent(s): 8afd94a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +808 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test02
3
- emoji: 😻
4
- colorFrom: green
5
- colorTo: yellow
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: test02
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
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,808 @@
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>DataCollect - Application de Collecte de Données</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
+ .form-builder {
11
+ min-height: 500px;
12
+ border: 2px dashed #ccc;
13
+ transition: all 0.3s;
14
+ }
15
+ .form-builder:hover {
16
+ border-color: #4f46e5;
17
+ }
18
+ .question-item {
19
+ transition: all 0.2s;
20
+ }
21
+ .question-item:hover {
22
+ transform: translateY(-2px);
23
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
24
+ }
25
+ .drag-enter {
26
+ border: 2px dashed #4f46e5;
27
+ background-color: #eef2ff;
28
+ }
29
+ .chart-container {
30
+ height: 400px;
31
+ }
32
+ @keyframes fadeIn {
33
+ from { opacity: 0; transform: translateY(10px); }
34
+ to { opacity: 1; transform: translateY(0); }
35
+ }
36
+ .fade-in {
37
+ animation: fadeIn 0.3s ease-out forwards;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gray-50 font-sans">
42
+ <div class="min-h-screen flex flex-col">
43
+ <!-- Header -->
44
+ <header class="bg-indigo-600 text-white shadow-lg">
45
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
46
+ <div class="flex items-center space-x-2">
47
+ <i class="fas fa-database text-2xl"></i>
48
+ <h1 class="text-2xl font-bold">DataCollect</h1>
49
+ </div>
50
+ <nav>
51
+ <ul class="flex space-x-6">
52
+ <li><a href="#" class="hover:text-indigo-200 transition" onclick="showSection('dashboard')"><i class="fas fa-home mr-1"></i> Tableau de bord</a></li>
53
+ <li><a href="#" class="hover:text-indigo-200 transition" onclick="showSection('forms')"><i class="fas fa-list mr-1"></i> Mes formulaires</a></li>
54
+ <li><a href="#" class="hover:text-indigo-200 transition" onclick="showSection('responses')"><i class="fas fa-chart-bar mr-1"></i> Réponses</a></li>
55
+ </ul>
56
+ </nav>
57
+ <div class="flex items-center space-x-4">
58
+ <button class="bg-indigo-700 hover:bg-indigo-800 px-4 py-2 rounded-lg transition flex items-center" onclick="showSection('new-form')">
59
+ <i class="fas fa-plus mr-2"></i> Nouveau formulaire
60
+ </button>
61
+ <div class="w-10 h-10 rounded-full bg-indigo-400 flex items-center justify-center cursor-pointer">
62
+ <i class="fas fa-user text-white"></i>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </header>
67
+
68
+ <!-- Main Content -->
69
+ <main class="flex-grow container mx-auto px-4 py-8">
70
+ <!-- Dashboard Section -->
71
+ <section id="dashboard" class="section">
72
+ <div class="mb-8">
73
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Tableau de bord</h2>
74
+ <p class="text-gray-600">Vue d'ensemble de vos activités de collecte de données</p>
75
+ </div>
76
+
77
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
78
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
79
+ <div class="flex justify-between items-start">
80
+ <div>
81
+ <p class="text-gray-500">Formulaires actifs</p>
82
+ <h3 class="text-3xl font-bold text-indigo-600" id="active-forms-count">5</h3>
83
+ </div>
84
+ <div class="bg-indigo-100 p-3 rounded-lg">
85
+ <i class="fas fa-file-alt text-indigo-600 text-xl"></i>
86
+ </div>
87
+ </div>
88
+ <p class="text-sm text-gray-500 mt-4">+2 depuis la semaine dernière</p>
89
+ </div>
90
+
91
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
92
+ <div class="flex justify-between items-start">
93
+ <div>
94
+ <p class="text-gray-500">Réponses totales</p>
95
+ <h3 class="text-3xl font-bold text-green-600" id="total-responses">124</h3>
96
+ </div>
97
+ <div class="bg-green-100 p-3 rounded-lg">
98
+ <i class="fas fa-check-circle text-green-600 text-xl"></i>
99
+ </div>
100
+ </div>
101
+ <p class="text-sm text-gray-500 mt-4">+24% depuis hier</p>
102
+ </div>
103
+
104
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
105
+ <div class="flex justify-between items-start">
106
+ <div>
107
+ <p class="text-gray-500">Taux de complétion</p>
108
+ <h3 class="text-3xl font-bold text-blue-600" id="completion-rate">78%</h3>
109
+ </div>
110
+ <div class="bg-blue-100 p-3 rounded-lg">
111
+ <i class="fas fa-chart-line text-blue-600 text-xl"></i>
112
+ </div>
113
+ </div>
114
+ <p class="text-sm text-gray-500 mt-4">Moyenne globale</p>
115
+ </div>
116
+ </div>
117
+
118
+ <div class="bg-white p-6 rounded-xl shadow-md mb-8">
119
+ <div class="flex justify-between items-center mb-6">
120
+ <h3 class="text-xl font-semibold text-gray-800">Activité récente</h3>
121
+ <select class="border rounded-lg px-3 py-2 text-sm">
122
+ <option>7 derniers jours</option>
123
+ <option>30 derniers jours</option>
124
+ <option>90 derniers jours</option>
125
+ </select>
126
+ </div>
127
+ <div class="chart-container">
128
+ <canvas id="activityChart"></canvas>
129
+ </div>
130
+ </div>
131
+
132
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
133
+ <div class="bg-white p-6 rounded-xl shadow-md">
134
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Formulaires récents</h3>
135
+ <div class="space-y-4">
136
+ <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition">
137
+ <div>
138
+ <h4 class="font-medium">Enquête de satisfaction</h4>
139
+ <p class="text-sm text-gray-500">12 questions • 56 réponses</p>
140
+ </div>
141
+ <button class="text-indigo-600 hover:text-indigo-800 transition">
142
+ <i class="fas fa-ellipsis-v"></i>
143
+ </button>
144
+ </div>
145
+ <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition">
146
+ <div>
147
+ <h4 class="font-medium">Formulaire d'inscription</h4>
148
+ <p class="text-sm text-gray-500">8 questions • 34 réponses</p>
149
+ </div>
150
+ <button class="text-indigo-600 hover:text-indigo-800 transition">
151
+ <i class="fas fa-ellipsis-v"></i>
152
+ </button>
153
+ </div>
154
+ <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition">
155
+ <div>
156
+ <h4 class="font-medium">Évaluation produit</h4>
157
+ <p class="text-sm text-gray-500">10 questions • 28 réponses</p>
158
+ </div>
159
+ <button class="text-indigo-600 hover:text-indigo-800 transition">
160
+ <i class="fas fa-ellipsis-v"></i>
161
+ </button>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="bg-white p-6 rounded-xl shadow-md">
167
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Réponses récentes</h3>
168
+ <div class="space-y-4">
169
+ <div class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg transition">
170
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center">
171
+ <i class="fas fa-user text-indigo-600"></i>
172
+ </div>
173
+ <div>
174
+ <h4 class="font-medium">Jean Dupont</h4>
175
+ <p class="text-sm text-gray-500">A répondu à "Enquête de satisfaction"</p>
176
+ </div>
177
+ <div class="ml-auto text-sm text-gray-500">Il y a 2h</div>
178
+ </div>
179
+ <div class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg transition">
180
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
181
+ <i class="fas fa-user text-green-600"></i>
182
+ </div>
183
+ <div>
184
+ <h4 class="font-medium">Marie Lambert</h4>
185
+ <p class="text-sm text-gray-500">A répondu à "Formulaire d'inscription"</p>
186
+ </div>
187
+ <div class="ml-auto text-sm text-gray-500">Il y a 5h</div>
188
+ </div>
189
+ <div class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg transition">
190
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
191
+ <i class="fas fa-user text-blue-600"></i>
192
+ </div>
193
+ <div>
194
+ <h4 class="font-medium">Thomas Martin</h4>
195
+ <p class="text-sm text-gray-500">A répondu à "Évaluation produit"</p>
196
+ </div>
197
+ <div class="ml-auto text-sm text-gray-500">Aujourd'hui</div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </section>
203
+
204
+ <!-- Forms Section -->
205
+ <section id="forms" class="section hidden">
206
+ <div class="mb-8">
207
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Mes formulaires</h2>
208
+ <p class="text-gray-600">Gérez tous vos formulaires de collecte de données</p>
209
+ </div>
210
+
211
+ <div class="flex justify-between items-center mb-6">
212
+ <div class="relative w-64">
213
+ <input type="text" placeholder="Rechercher un formulaire..." class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
214
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
215
+ </div>
216
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition flex items-center" onclick="showSection('new-form')">
217
+ <i class="fas fa-plus mr-2"></i> Créer un formulaire
218
+ </button>
219
+ </div>
220
+
221
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
222
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition group">
223
+ <div class="flex justify-between items-start mb-4">
224
+ <div>
225
+ <h3 class="font-bold text-lg text-gray-800 group-hover:text-indigo-600 transition">Enquête de satisfaction</h3>
226
+ <p class="text-sm text-gray-500">12 questions</p>
227
+ </div>
228
+ <div class="flex space-x-2">
229
+ <button class="text-gray-400 hover:text-indigo-600 transition">
230
+ <i class="fas fa-edit"></i>
231
+ </button>
232
+ <button class="text-gray-400 hover:text-red-600 transition">
233
+ <i class="fas fa-trash"></i>
234
+ </button>
235
+ </div>
236
+ </div>
237
+ <p class="text-gray-600 mb-4">Collectez les retours de vos clients sur votre service.</p>
238
+ <div class="flex justify-between items-center text-sm">
239
+ <span class="text-indigo-600 font-medium">56 réponses</span>
240
+ <span class="text-gray-500">Dernière mise à jour: 12/06/2023</span>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition group">
245
+ <div class="flex justify-between items-start mb-4">
246
+ <div>
247
+ <h3 class="font-bold text-lg text-gray-800 group-hover:text-indigo-600 transition">Formulaire d'inscription</h3>
248
+ <p class="text-sm text-gray-500">8 questions</p>
249
+ </div>
250
+ <div class="flex space-x-2">
251
+ <button class="text-gray-400 hover:text-indigo-600 transition">
252
+ <i class="fas fa-edit"></i>
253
+ </button>
254
+ <button class="text-gray-400 hover:text-red-600 transition">
255
+ <i class="fas fa-trash"></i>
256
+ </button>
257
+ </div>
258
+ </div>
259
+ <p class="text-gray-600 mb-4">Inscrivez de nouveaux membres à votre programme.</p>
260
+ <div class="flex justify-between items-center text-sm">
261
+ <span class="text-indigo-600 font-medium">34 réponses</span>
262
+ <span class="text-gray-500">Dernière mise à jour: 05/06/2023</span>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition group">
267
+ <div class="flex justify-between items-start mb-4">
268
+ <div>
269
+ <h3 class="font-bold text-lg text-gray-800 group-hover:text-indigo-600 transition">Évaluation produit</h3>
270
+ <p class="text-sm text-gray-500">10 questions</p>
271
+ </div>
272
+ <div class="flex space-x-2">
273
+ <button class="text-gray-400 hover:text-indigo-600 transition">
274
+ <i class="fas fa-edit"></i>
275
+ </button>
276
+ <button class="text-gray-400 hover:text-red-600 transition">
277
+ <i class="fas fa-trash"></i>
278
+ </button>
279
+ </div>
280
+ </div>
281
+ <p class="text-gray-600 mb-4">Évaluez la satisfaction des utilisateurs avec votre produit.</p>
282
+ <div class="flex justify-between items-center text-sm">
283
+ <span class="text-indigo-600 font-medium">28 réponses</span>
284
+ <span class="text-gray-500">Dernière mise à jour: 30/05/2023</span>
285
+ </div>
286
+ </div>
287
+
288
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition group">
289
+ <div class="flex justify-between items-start mb-4">
290
+ <div>
291
+ <h3 class="font-bold text-lg text-gray-800 group-hover:text-indigo-600 transition">Sondage employés</h3>
292
+ <p class="text-sm text-gray-500">15 questions</p>
293
+ </div>
294
+ <div class="flex space-x-2">
295
+ <button class="text-gray-400 hover:text-indigo-600 transition">
296
+ <i class="fas fa-edit"></i>
297
+ </button>
298
+ <button class="text-gray-400 hover:text-red-600 transition">
299
+ <i class="fas fa-trash"></i>
300
+ </button>
301
+ </div>
302
+ </div>
303
+ <p class="text-gray-600 mb-4">Mesurez le moral et la satisfaction de vos employés.</p>
304
+ <div class="flex justify-between items-center text-sm">
305
+ <span class="text-indigo-600 font-medium">42 réponses</span>
306
+ <span class="text-gray-500">Dernière mise à jour: 22/05/2023</span>
307
+ </div>
308
+ </div>
309
+
310
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition group">
311
+ <div class="flex justify-between items-start mb-4">
312
+ <div>
313
+ <h3 class="font-bold text-lg text-gray-800 group-hover:text-indigo-600 transition">Formulaire de contact</h3>
314
+ <p class="text-sm text-gray-500">5 questions</p>
315
+ </div>
316
+ <div class="flex space-x-2">
317
+ <button class="text-gray-400 hover:text-indigo-600 transition">
318
+ <i class="fas fa-edit"></i>
319
+ </button>
320
+ <button class="text-gray-400 hover:text-red-600 transition">
321
+ <i class="fas fa-trash"></i>
322
+ </button>
323
+ </div>
324
+ </div>
325
+ <p class="text-gray-600 mb-4">Permettez aux visiteurs de votre site de vous contacter.</p>
326
+ <div class="flex justify-between items-center text-sm">
327
+ <span class="text-indigo-600 font-medium">19 réponses</span>
328
+ <span class="text-gray-500">Dernière mise à jour: 15/05/2023</span>
329
+ </div>
330
+ </div>
331
+
332
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition group border-2 border-dashed border-gray-300 flex flex-col items-center justify-center">
333
+ <i class="fas fa-plus text-4xl text-gray-400 mb-3"></i>
334
+ <h3 class="text-lg font-medium text-gray-600">Créer un nouveau formulaire</h3>
335
+ <button class="mt-4 text-indigo-600 hover:text-indigo-800 transition" onclick="showSection('new-form')">
336
+ Commencer
337
+ </button>
338
+ </div>
339
+ </div>
340
+ </section>
341
+
342
+ <!-- Responses Section -->
343
+ <section id="responses" class="section hidden">
344
+ <div class="mb-8">
345
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Réponses</h2>
346
+ <p class="text-gray-600">Analysez les données collectées à partir de vos formulaires</p>
347
+ </div>
348
+
349
+ <div class="bg-white rounded-xl shadow-md mb-8">
350
+ <div class="p-6 border-b">
351
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center">
352
+ <div class="mb-4 md:mb-0">
353
+ <h3 class="text-xl font-semibold text-gray-800">Enquête de satisfaction</h3>
354
+ <p class="text-gray-600">56 réponses collectées</p>
355
+ </div>
356
+ <div class="flex space-x-3">
357
+ <select class="border rounded-lg px-3 py-2 text-sm">
358
+ <option>Toutes les questions</option>
359
+ <option>Question 1</option>
360
+ <option>Question 2</option>
361
+ <option>Question 3</option>
362
+ </select>
363
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition flex items-center">
364
+ <i class="fas fa-download mr-2"></i> Exporter
365
+ </button>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <div class="p-6">
371
+ <div class="mb-8">
372
+ <h4 class="font-medium text-gray-800 mb-4">1. Comment évaluez-vous notre service ?</h4>
373
+ <div class="chart-container">
374
+ <canvas id="question1Chart"></canvas>
375
+ </div>
376
+ </div>
377
+
378
+ <div class="mb-8">
379
+ <h4 class="font-medium text-gray-800 mb-4">2. Quel aspect de notre service appréciez-vous le plus ?</h4>
380
+ <div class="chart-container">
381
+ <canvas id="question2Chart"></canvas>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="mb-8">
386
+ <h4 class="font-medium text-gray-800 mb-4">3. Recommanderiez-vous notre service à d'autres ?</h4>
387
+ <div class="chart-container">
388
+ <canvas id="question3Chart"></canvas>
389
+ </div>
390
+ </div>
391
+
392
+ <div>
393
+ <h4 class="font-medium text-gray-800 mb-4">Réponses individuelles</h4>
394
+ <div class="overflow-x-auto">
395
+ <table class="min-w-full divide-y divide-gray-200">
396
+ <thead class="bg-gray-50">
397
+ <tr>
398
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
399
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Évaluation</th>
400
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aspect préféré</th>
401
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recommandation</th>
402
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Commentaires</th>
403
+ </tr>
404
+ </thead>
405
+ <tbody class="bg-white divide-y divide-gray-200">
406
+ <tr class="hover:bg-gray-50">
407
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12/06/2023</td>
408
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">4/5</td>
409
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Rapidité</td>
410
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Oui</td>
411
+ <td class="px-6 py-4 text-sm text-gray-500">Très bon service dans l'ensemble</td>
412
+ </tr>
413
+ <tr class="hover:bg-gray-50">
414
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">11/06/2023</td>
415
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">5/5</td>
416
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Support client</td>
417
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Oui</td>
418
+ <td class="px-6 py-4 text-sm text-gray-500">L'équipe est très réactive et professionnelle</td>
419
+ </tr>
420
+ <tr class="hover:bg-gray-50">
421
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/06/2023</td>
422
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3/5</td>
423
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Prix</td>
424
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Peut-être</td>
425
+ <td class="px-6 py-4 text-sm text-gray-500">Un peu cher pour ce que c'est</td>
426
+ </tr>
427
+ <tr class="hover:bg-gray-50">
428
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">09/06/2023</td>
429
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">5/5</td>
430
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Facilité d'utilisation</td>
431
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Oui</td>
432
+ <td class="px-6 py-4 text-sm text-gray-500">-</td>
433
+ </tr>
434
+ </tbody>
435
+ </table>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </section>
441
+
442
+ <!-- New Form Section -->
443
+ <section id="new-form" class="section hidden">
444
+ <div class="mb-8">
445
+ <div class="flex justify-between items-center">
446
+ <div>
447
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Créer un nouveau formulaire</h2>
448
+ <p class="text-gray-600">Concevez votre formulaire de collecte de données</p>
449
+ </div>
450
+ <div class="flex space-x-3">
451
+ <button class="border border-gray-300 hover:bg-gray-50 px-4 py-2 rounded-lg transition flex items-center">
452
+ <i class="fas fa-save mr-2"></i> Enregistrer
453
+ </button>
454
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition flex items-center">
455
+ <i class="fas fa-eye mr-2"></i> Prévisualiser
456
+ </button>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
462
+ <div class="lg:col-span-2">
463
+ <div class="bg-white p-6 rounded-xl shadow-md mb-6">
464
+ <div class="mb-4">
465
+ <label class="block text-gray-700 font-medium mb-2">Titre du formulaire</label>
466
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Ex: Enquête de satisfaction" value="Nouveau formulaire de collecte">
467
+ </div>
468
+ <div class="mb-4">
469
+ <label class="block text-gray-700 font-medium mb-2">Description</label>
470
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" rows="2" placeholder="Décrivez l'objectif de ce formulaire"></textarea>
471
+ </div>
472
+ </div>
473
+
474
+ <div class="bg-white p-6 rounded-xl shadow-md mb-6">
475
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Paramètres du formulaire</h3>
476
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
477
+ <div>
478
+ <label class="block text-gray-700 font-medium mb-2">Date de début</label>
479
+ <input type="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
480
+ </div>
481
+ <div>
482
+ <label class="block text-gray-700 font-medium mb-2">Date de fin</label>
483
+ <input type="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
484
+ </div>
485
+ <div class="md:col-span-2">
486
+ <label class="flex items-center">
487
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600">
488
+ <span class="ml-2 text-gray-700">Rendre les réponses anonymes</span>
489
+ </label>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <div class="bg-white p-6 rounded-xl shadow-md">
495
+ <div class="flex justify-between items-center mb-4">
496
+ <h3 class="text-lg font-semibold text-gray-800">Questions</h3>
497
+ <div class="relative">
498
+ <button id="add-question-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition flex items-center">
499
+ <i class="fas fa-plus mr-2"></i> Ajouter une question
500
+ </button>
501
+ <div id="question-type-menu" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden">
502
+ <div class="py-1">
503
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="addQuestion('text')"><i class="fas fa-font mr-2"></i> Texte court</a>
504
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="addQuestion('textarea')"><i class="fas fa-align-left mr-2"></i> Texte long</a>
505
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="addQuestion('radio')"><i class="fas fa-dot-circle mr-2"></i> Choix unique</a>
506
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="addQuestion('checkbox')"><i class="fas fa-check-square mr-2"></i> Choix multiples</a>
507
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="addQuestion('dropdown')"><i class="fas fa-caret-down mr-2"></i> Liste déroulante</a>
508
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="addQuestion('rating')"><i class="fas fa-star mr-2"></i> Évaluation</a>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <div id="form-builder" class="form-builder p-4 rounded-lg">
515
+ <div id="no-questions" class="text-center py-10 text-gray-500">
516
+ <i class="fas fa-question-circle text-4xl mb-3"></i>
517
+ <p>Commencez par ajouter votre première question</p>
518
+ </div>
519
+
520
+ <div id="questions-container" class="space-y-4 hidden">
521
+ <!-- Questions will be added here dynamically -->
522
+ </div>
523
+ </div>
524
+ </div>
525
+ </div>
526
+
527
+ <div>
528
+ <div class="bg-white p-6 rounded-xl shadow-md sticky top-6">
529
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Options de publication</h3>
530
+ <div class="space-y-4">
531
+ <div>
532
+ <label class="block text-gray-700 font-medium mb-2">Lien de partage</label>
533
+ <div class="flex">
534
+ <input type="text" class="flex-grow px-4 py-2 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" value="https://datacollect.com/form/abc123" readonly>
535
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-r-lg transition">
536
+ <i class="fas fa-copy"></i>
537
+ </button>
538
+ </div>
539
+ </div>
540
+ <div>
541
+ <label class="block text-gray-700 font-medium mb-2">Intégration</label>
542
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
543
+ <option>Sélectionnez une option</option>
544
+ <option>Code HTML</option>
545
+ <option>Lien direct</option>
546
+ <option>API</option>
547
+ </select>
548
+ </div>
549
+ <div>
550
+ <label class="flex items-center">
551
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600">
552
+ <span class="ml-2 text-gray-700">Activer les notifications par email</span>
553
+ </label>
554
+ </div>
555
+ <div class="pt-4">
556
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-3 rounded-lg transition flex items-center justify-center">
557
+ <i class="fas fa-paper-plane mr-2"></i> Publier le formulaire
558
+ </button>
559
+ </div>
560
+ </div>
561
+
562
+ <div class="mt-8 pt-6 border-t">
563
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Aperçu du formulaire</h3>
564
+ <div class="bg-gray-50 p-4 rounded-lg">
565
+ <div class="mb-4">
566
+ <h4 class="font-medium text-gray-800 mb-1">Nouveau formulaire de collecte</h4>
567
+ <p class="text-sm text-gray-500">Description du formulaire</p>
568
+ </div>
569
+ <div id="form-preview" class="space-y-3">
570
+ <div class="bg-white p-3 rounded border">
571
+ <p class="text-sm text-gray-500">Question 1</p>
572
+ </div>
573
+ <div class="bg-white p-3 rounded border">
574
+ <p class="text-sm text-gray-500">Question 2</p>
575
+ </div>
576
+ </div>
577
+ <button class="w-full mt-4 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition text-sm">
578
+ Soumettre
579
+ </button>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </section>
586
+ </main>
587
+
588
+ <!-- Footer -->
589
+ <footer class="bg-gray-100 py-6">
590
+ <div class="container mx-auto px-4">
591
+ <div class="flex flex-col md:flex-row justify-between items-center">
592
+ <div class="mb-4 md:mb-0">
593
+ <p class="text-gray-600">&copy; 2023 DataCollect. Tous droits réservés.</p>
594
+ </div>
595
+ <div class="flex space-x-6">
596
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Conditions d'utilisation</a>
597
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Politique de confidentialité</a>
598
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Aide</a>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </footer>
603
+ </div>
604
+
605
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
606
+ <script>
607
+ // Show/hide sections
608
+ function showSection(sectionId) {
609
+ document.querySelectorAll('.section').forEach(section => {
610
+ section.classList.add('hidden');
611
+ });
612
+ document.getElementById(sectionId).classList.remove('hidden');
613
+ }
614
+
615
+ // Initialize charts
616
+ function initCharts() {
617
+ // Activity Chart
618
+ const activityCtx = document.getElementById('activityChart').getContext('2d');
619
+ const activityChart = new Chart(activityCtx, {
620
+ type: 'line',
621
+ data: {
622
+ labels: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
623
+ datasets: [{
624
+ label: 'Réponses',
625
+ data: [12, 19, 8, 15, 22, 18, 24],
626
+ backgroundColor: 'rgba(79, 70, 229, 0.1)',
627
+ borderColor: 'rgba(79, 70, 229, 1)',
628
+ borderWidth: 2,
629
+ tension: 0.4,
630
+ fill: true
631
+ }]
632
+ },
633
+ options: {
634
+ responsive: true,
635
+ plugins: {
636
+ legend: {
637
+ display: false
638
+ }
639
+ },
640
+ scales: {
641
+ y: {
642
+ beginAtZero: true
643
+ }
644
+ }
645
+ }
646
+ });
647
+
648
+ // Question 1 Chart
649
+ const q1Ctx = document.getElementById('question1Chart').getContext('2d');
650
+ const q1Chart = new Chart(q1Ctx, {
651
+ type: 'bar',
652
+ data: {
653
+ labels: ['1 (Mauvais)', '2', '3', '4', '5 (Excellent)'],
654
+ datasets: [{
655
+ label: 'Nombre de réponses',
656
+ data: [2, 5, 12, 20, 17],
657
+ backgroundColor: 'rgba(79, 70, 229, 0.7)'
658
+ }]
659
+ },
660
+ options: {
661
+ responsive: true,
662
+ plugins: {
663
+ legend: {
664
+ display: false
665
+ }
666
+ }
667
+ }
668
+ });
669
+
670
+ // Question 2 Chart
671
+ const q2Ctx = document.getElementById('question2Chart').getContext('2d');
672
+ const q2Chart = new Chart(q2Ctx, {
673
+ type: 'doughnut',
674
+ data: {
675
+ labels: ['Rapidité', 'Support client', 'Prix', 'Facilité d\'utilisation', 'Fonctionnalités'],
676
+ datasets: [{
677
+ data: [22, 18, 8, 24, 12],
678
+ backgroundColor: [
679
+ 'rgba(79, 70, 229, 0.7)',
680
+ 'rgba(99, 102, 241, 0.7)',
681
+ 'rgba(129, 140, 248, 0.7)',
682
+ 'rgba(165, 180, 252, 0.7)',
683
+ 'rgba(199, 210, 254, 0.7)'
684
+ ]
685
+ }]
686
+ },
687
+ options: {
688
+ responsive: true,
689
+ plugins: {
690
+ legend: {
691
+ position: 'right'
692
+ }
693
+ }
694
+ }
695
+ });
696
+
697
+ // Question 3 Chart
698
+ const q3Ctx = document.getElementById('question3Chart').getContext('2d');
699
+ const q3Chart = new Chart(q3Ctx, {
700
+ type: 'pie',
701
+ data: {
702
+ labels: ['Oui', 'Non', 'Peut-être'],
703
+ datasets: [{
704
+ data: [42, 5, 9],
705
+ backgroundColor: [
706
+ 'rgba(79, 70, 229, 0.7)',
707
+ 'rgba(239, 68, 68, 0.7)',
708
+ 'rgba(156, 163, 175, 0.7)'
709
+ ]
710
+ }]
711
+ },
712
+ options: {
713
+ responsive: true,
714
+ plugins: {
715
+ legend: {
716
+ position: 'right'
717
+ }
718
+ }
719
+ }
720
+ });
721
+ }
722
+
723
+ // Form builder functionality
724
+ let questionCount = 0;
725
+
726
+ document.getElementById('add-question-btn').addEventListener('click', function(e) {
727
+ e.stopPropagation();
728
+ const menu = document.getElementById('question-type-menu');
729
+ menu.classList.toggle('hidden');
730
+ });
731
+
732
+ // Close menu when clicking elsewhere
733
+ document.addEventListener('click', function() {
734
+ document.getElementById('question-type-menu').classList.add('hidden');
735
+ });
736
+
737
+ function addQuestion(type) {
738
+ questionCount++;
739
+ document.getElementById('no-questions').classList.add('hidden');
740
+ document.getElementById('questions-container').classList.remove('hidden');
741
+
742
+ const questionsContainer = document.getElementById('questions-container');
743
+ const questionId = `question-${questionCount}`;
744
+
745
+ let questionHtml = '';
746
+
747
+ switch(type) {
748
+ case 'text':
749
+ questionHtml = `
750
+ <div id="${questionId}" class="question-item bg-white p-4 rounded-lg border border-gray-200 fade-in" draggable="true">
751
+ <div class="flex justify-between items-start mb-3">
752
+ <div class="w-full">
753
+ <input type="text" class="w-full px-3 py-2 border-b border-gray-300 focus:outline-none focus:border-indigo-500 font-medium" placeholder="Question ${questionCount}" value="Question ${questionCount}">
754
+ </div>
755
+ <div class="flex space-x-2 ml-3">
756
+ <button class="text-gray-400 hover:text-indigo-600 transition" onclick="moveQuestionUp('${questionId}')">
757
+ <i class="fas fa-arrow-up"></i>
758
+ </button>
759
+ <button class="text-gray-400 hover:text-indigo-600 transition" onclick="moveQuestionDown('${questionId}')">
760
+ <i class="fas fa-arrow-down"></i>
761
+ </button>
762
+ <button class="text-gray-400 hover:text-red-600 transition" onclick="removeQuestion('${questionId}')">
763
+ <i class="fas fa-trash"></i>
764
+ </button>
765
+ </div>
766
+ </div>
767
+ <div class="mt-2">
768
+ <input type="text" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Réponse courte" disabled>
769
+ </div>
770
+ <div class="mt-3 flex justify-between items-center text-sm">
771
+ <div class="flex space-x-3">
772
+ <button class="text-gray-500 hover:text-indigo-600 transition">
773
+ <i class="fas fa-copy mr-1"></i> Dupliquer
774
+ </button>
775
+ <button class="text-gray-500 hover:text-indigo-600 transition">
776
+ <i class="fas fa-cog mr-1"></i> Paramètres
777
+ </button>
778
+ </div>
779
+ <div>
780
+ <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Texte court</span>
781
+ </div>
782
+ </div>
783
+ </div>
784
+ `;
785
+ break;
786
+
787
+ case 'textarea':
788
+ questionHtml = `
789
+ <div id="${questionId}" class="question-item bg-white p-4 rounded-lg border border-gray-200 fade-in" draggable="true">
790
+ <div class="flex justify-between items-start mb-3">
791
+ <div class="w-full">
792
+ <input type="text" class="w-full px-3 py-2 border-b border-gray-300 focus:outline-none focus:border-indigo-500 font-medium" placeholder="Question ${questionCount}" value="Question ${questionCount}">
793
+ </div>
794
+ <div class="flex space-x-2 ml-3">
795
+ <button class="text-gray-400 hover:text-indigo-600 transition" onclick="moveQuestionUp('${questionId}')">
796
+ <i class="fas fa-arrow-up"></i>
797
+ </button>
798
+ <button class="text-gray-400 hover:text-indigo-600 transition" onclick="moveQuestionDown('${questionId}')">
799
+ <i class="fas fa-arrow-down"></i>
800
+ </button>
801
+ <button class="text-gray-400 hover:text-red-600 transition" onclick="removeQuestion('${questionId}')">
802
+ <i class="fas fa-trash"></i>
803
+ </button>
804
+ </div>
805
+ </div>
806
+ <div class="mt-2">
807
+ <textarea class="w-full px-3 py-2 border rounded
808
+ </html>
prompts.txt ADDED
File without changes