Hugging Face's logo

Spaces:
Dannylova31
/
appnew
Running

App Files Community
1
Dannylova31 commited on
Commit
1b854c2
·
verified ·
1 Parent(s): 0abb9a1

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +742 -19
  3. prompts.txt +9 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Appnew
3
- emoji: 🏢
4
  colorFrom: red
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: appnew
3
+ emoji: 🐳
4
  colorFrom: red
5
+ colorTo: red
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,742 @@
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>Enregistrement Clients Pro</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ <style>
13
+ @media (max-width: 640px) {
14
+ .mobile-view {
15
+ max-width: 100%;
16
+ margin: 0 auto;
17
+ border-radius: 0;
18
+ box-shadow: none;
19
+ height: 100vh;
20
+ }
21
+ }
22
+
23
+ .fade-in {
24
+ animation: fadeIn 0.3s ease-in-out;
25
+ }
26
+
27
+ @keyframes fadeIn {
28
+ from { opacity: 0; transform: translateY(10px); }
29
+ to { opacity: 1; transform: translateY(0); }
30
+ }
31
+
32
+ .rotate {
33
+ animation: rotate 2s linear infinite;
34
+ }
35
+
36
+ @keyframes rotate {
37
+ from { transform: rotate(0deg); }
38
+ to { transform: rotate(360deg); }
39
+ }
40
+
41
+ /* Custom scrollbar */
42
+ #data-list::-webkit-scrollbar {
43
+ width: 6px;
44
+ }
45
+
46
+ #data-list::-webkit-scrollbar-track {
47
+ background: #f1f1f1;
48
+ border-radius: 10px;
49
+ }
50
+
51
+ #data-list::-webkit-scrollbar-thumb {
52
+ background: #c7d2fe;
53
+ border-radius: 10px;
54
+ }
55
+
56
+ #data-list::-webkit-scrollbar-thumb:hover {
57
+ background: #a5b4fc;
58
+ }
59
+
60
+ /* Tab styling */
61
+ .tab-button {
62
+ transition: all 0.3s ease;
63
+ }
64
+
65
+ .tab-button.active {
66
+ background-color: #4f46e5;
67
+ color: white;
68
+ }
69
+
70
+ .tab-content {
71
+ display: none;
72
+ }
73
+
74
+ .tab-content.active {
75
+ display: block;
76
+ animation: fadeIn 0.3s ease-in-out;
77
+ }
78
+
79
+ /* Professional logo */
80
+ .logo-pro {
81
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
82
+ -webkit-background-clip: text;
83
+ background-clip: text;
84
+ color: transparent;
85
+ font-weight: 800;
86
+ letter-spacing: -0.05em;
87
+ }
88
+
89
+ .logo-icon {
90
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
91
+ color: white;
92
+ border-radius: 50%;
93
+ padding: 8px;
94
+ display: inline-flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ }
98
+
99
+ /* Edit mode */
100
+ .edit-mode {
101
+ border: 2px solid #4f46e5;
102
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
103
+ }
104
+
105
+ /* Jean color for new form tab */
106
+ .jean-tab {
107
+ background-color: #5d8aa8;
108
+ color: white;
109
+ }
110
+
111
+ .jean-tab:hover {
112
+ background-color: #4a6f8a;
113
+ }
114
+
115
+ .jean-tab.active {
116
+ background-color: #3a5770;
117
+ }
118
+ </style>
119
+ </head>
120
+ <body class="bg-gray-100 font-sans">
121
+ <div class="container mx-auto px-4 py-8 max-w-md mobile-view bg-white">
122
+ <!-- Header with professional logo -->
123
+ <header class="mb-6">
124
+ <div class="flex items-center justify-between mb-4">
125
+ <div class="flex items-center">
126
+ <div class="logo-icon mr-3">
127
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
128
+ <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
129
+ <circle cx="9" cy="7" r="4"></circle>
130
+ <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
131
+ <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
132
+ </svg>
133
+ </div>
134
+ <div>
135
+ <h1 class="text-2xl font-bold logo-pro">
136
+ Fiche Client <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full ml-1">PRO</span>
137
+ </h1>
138
+ <p class="text-xs text-gray-500 mt-1" id="current-date">Date: <span id="today-date"></span></p>
139
+ </div>
140
+ </div>
141
+ <div id="save-status" class="text-sm text-gray-500 flex items-center">
142
+ <span id="save-text">Sauvegardé</span>
143
+ <i id="save-icon" class="fas fa-check-circle ml-1 text-green-500"></i>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="bg-indigo-50 p-3 rounded-lg border border-indigo-100">
148
+ <p class="text-indigo-800 text-sm flex items-start">
149
+ <i class="fas fa-info-circle mr-2 mt-1"></i>
150
+ <span>Les fiches clients sont sauvegardées automatiquement. Exportez en Excel ou PDF quand vous voulez.</span>
151
+ </p>
152
+ </div>
153
+ </header>
154
+
155
+ <!-- Tabs Navigation -->
156
+ <div class="flex border-b border-gray-200 mb-6">
157
+ <button class="tab-button jean-tab flex-1 py-2 px-4 text-center font-medium rounded-t-lg active" data-tab="form-tab">
158
+ <i class="fas fa-plus mr-2"></i> Nouvelle Fiche
159
+ </button>
160
+ <button class="tab-button flex-1 py-2 px-4 text-center font-medium rounded-t-lg" data-tab="list-tab">
161
+ <i class="fas fa-list mr-2"></i> Fiches Enregistrées
162
+ <span id="entries-count" class="ml-1 bg-indigo-100 text-indigo-800 text-xs py-0.5 px-1.5 rounded-full">
163
+ 0
164
+ </span>
165
+ </button>
166
+ </div>
167
+
168
+ <!-- Main Content -->
169
+ <main>
170
+ <!-- Form Tab -->
171
+ <div id="form-tab" class="tab-content active">
172
+ <div class="mb-6">
173
+ <form id="data-form" class="space-y-3">
174
+ <input type="hidden" id="edit-id" name="edit-id" value="">
175
+ <!-- Date et Heure -->
176
+ <div class="grid grid-cols-2 gap-3">
177
+ <div>
178
+ <label for="date" class="block text-sm font-medium text-gray-700 mb-1">
179
+ <i class="fas fa-calendar-day mr-2"></i> Date*
180
+ </label>
181
+ <input type="date" id="date" name="date" required
182
+ class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
183
+ </div>
184
+
185
+ <div>
186
+ <label for="time" class="block text-sm font-medium text-gray-700 mb-1">
187
+ <i class="fas fa-clock mr-2"></i> Heure*
188
+ </label>
189
+ <input type="time" id="time" name="time" required
190
+ class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Opérateur -->
195
+ <div class="grid grid-cols-2 gap-3">
196
+ <div>
197
+ <label for="operator-name" class="block text-sm font-medium text-gray-700 mb-1">
198
+ <i class="fas fa-user mr-2"></i> Nom Opérateur*
199
+ </label>
200
+ <input type="text" id="operator-name" name="operator-name" required
201
+ class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
202
+ </div>
203
+
204
+ <div>
205
+ <label for="operator-number" class="block text-sm font-medium text-gray-700 mb-1">
206
+ <i class="fas fa-id-card mr-2"></i> N° Opérateur*
207
+ </label>
208
+ <input type="text" id="operator-number" name="operator-number" required
209
+ class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Technicien -->
214
+ <div>
215
+ <label for="technician" class="block text-sm font-medium text-gray-700 mb-1">
216
+ <i class="fas fa-tools mr-2"></i> Technicien*
217
+ </label>
218
+ <input type="text" id="technician" name="technician" required
219
+ class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
220
+ </div>
221
+
222
+ <!-- Client -->
223
+ <div class="grid grid-cols-2 gap-3">
224
+ <div>
225
+ <label for="client-name" class="block text-sm font-medium text-gray-700 mb-1">
226
+ <i class="fas fa-user-tag mr-2"></i> Nom Client*
227
+ </label>
228
+ <input type="text" id="client-name" name="client-name" required
229
+ class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
230
+ </div>
231
+
232
+ <div>
233
+ <label for="client-number" class="block text-sm font-medium text-gray-700 mb-1">
234
+ <i class="fas fa-hashtag mr-2"></i> N° Client*
235
+ </label>
236
+ <input type="text" id="client-number" name="client-number" required
237
+ class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Commentaire -->
242
+ <div>
243
+ <label for="comment" class="block text-sm font-medium text-gray-700 mb-1">
244
+ <i class="fas fa-comment-dots mr-2"></i> Commentaire
245
+ </label>
246
+ <textarea id="comment" name="comment" rows="2"
247
+ class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
248
+ </div>
249
+
250
+ <div class="pt-2 flex space-x-3">
251
+ <button type="submit" id="submit-button" class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition duration-200 flex items-center justify-center">
252
+ <i class="fas fa-save mr-2"></i> Enregistrer
253
+ </button>
254
+ <button type="button" id="cancel-edit" class="flex-1 bg-gray-200 text-gray-700 py-2 px-4 rounded-lg hover:bg-gray-300 transition duration-200 flex items-center justify-center hidden">
255
+ <i class="fas fa-times mr-2"></i> Annuler
256
+ </button>
257
+ </div>
258
+ </form>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- List Tab -->
263
+ <div id="list-tab" class="tab-content">
264
+ <div class="flex justify-between items-center mb-4">
265
+ <h2 class="text-lg font-semibold text-gray-700">
266
+ <i class="fas fa-list-ol mr-2 text-indigo-500"></i> Fiches enregistrées
267
+ </h2>
268
+ <div class="flex space-x-2">
269
+ <button id="export-excel" class="bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700 transition duration-200 flex items-center">
270
+ <i class="fas fa-file-excel mr-1"></i> Excel
271
+ </button>
272
+ <button id="export-pdf" class="bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700 transition duration-200 flex items-center">
273
+ <i class="fas fa-file-pdf mr-1"></i> PDF
274
+ </button>
275
+ <button id="clear-all" class="bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm hover:bg-gray-300 transition duration-200 flex items-center">
276
+ <i class="fas fa-trash-alt mr-1"></i> Tout effacer
277
+ </button>
278
+ </div>
279
+ </div>
280
+
281
+ <div id="data-list" class="space-y-3 max-h-96 overflow-y-auto pr-2">
282
+ <!-- Les fiches seront ajoutées ici dynamiquement -->
283
+ </div>
284
+
285
+ <div id="no-data" class="text-center py-8 text-gray-500">
286
+ <i class="fas fa-database text-4xl mb-2 opacity-30"></i>
287
+ <p>Aucune fiche enregistrée</p>
288
+ </div>
289
+ </div>
290
+ </main>
291
+
292
+ <!-- Footer -->
293
+ <footer class="mt-8 text-center text-sm text-gray-500 border-t pt-4">
294
+ <p>Application professionnelle d'enregistrement client</p>
295
+ <p class="mt-1">© 2025 By Imed Ramdani</p>
296
+ </footer>
297
+ </div>
298
+
299
+ <script>
300
+ document.addEventListener('DOMContentLoaded', function() {
301
+ const { jsPDF } = window.jspdf;
302
+ const dataForm = document.getElementById('data-form');
303
+ const dataList = document.getElementById('data-list');
304
+ const noData = document.getElementById('no-data');
305
+ const exportExcel = document.getElementById('export-excel');
306
+ const exportPdf = document.getElementById('export-pdf');
307
+ const clearAll = document.getElementById('clear-all');
308
+ const saveStatus = document.getElementById('save-status');
309
+ const saveText = document.getElementById('save-text');
310
+ const saveIcon = document.getElementById('save-icon');
311
+ const entriesCount = document.getElementById('entries-count');
312
+ const tabButtons = document.querySelectorAll('.tab-button');
313
+ const tabContents = document.querySelectorAll('.tab-content');
314
+ const submitButton = document.getElementById('submit-button');
315
+ const cancelEditButton = document.getElementById('cancel-edit');
316
+ const editIdInput = document.getElementById('edit-id');
317
+ const todayDateElement = document.getElementById('today-date');
318
+
319
+ // Set today's date in the header
320
+ const today = new Date();
321
+ const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
322
+ todayDateElement.textContent = today.toLocaleDateString('fr-FR', options);
323
+
324
+ let entries = JSON.parse(localStorage.getItem('clientEntries')) || [];
325
+ let saveTimeout;
326
+ let isEditing = false;
327
+
328
+ // Set default date and time to now
329
+ const now = new Date();
330
+ document.getElementById('date').valueAsDate = now;
331
+ document.getElementById('time').value = now.toTimeString().substring(0, 5);
332
+
333
+ // Initial render
334
+ renderDataList();
335
+ updateEntriesCount();
336
+
337
+ // Tab switching
338
+ tabButtons.forEach(button => {
339
+ button.addEventListener('click', () => {
340
+ const tabId = button.getAttribute('data-tab');
341
+
342
+ // Update active tab button
343
+ tabButtons.forEach(btn => btn.classList.remove('active'));
344
+ button.classList.add('active');
345
+
346
+ // Update active tab content
347
+ tabContents.forEach(content => content.classList.remove('active'));
348
+ document.getElementById(tabId).classList.add('active');
349
+ });
350
+ });
351
+
352
+ // Form submission
353
+ dataForm.addEventListener('submit', function(e) {
354
+ e.preventDefault();
355
+
356
+ const formData = new FormData(dataForm);
357
+ const entryId = formData.get('edit-id');
358
+
359
+ const entry = {
360
+ id: entryId || Date.now(),
361
+ date: formData.get('date'),
362
+ time: formData.get('time'),
363
+ operatorName: formData.get('operator-name'),
364
+ operatorNumber: formData.get('operator-number'),
365
+ technician: formData.get('technician'),
366
+ clientName: formData.get('client-name'),
367
+ clientNumber: formData.get('client-number'),
368
+ comment: formData.get('comment')
369
+ };
370
+
371
+ // Validate required fields
372
+ if (!entry.date || !entry.time || !entry.operatorName || !entry.operatorNumber ||
373
+ !entry.technician || !entry.clientName || !entry.clientNumber) {
374
+ showAlert('Veuillez remplir tous les champs obligatoires', 'error');
375
+ return;
376
+ }
377
+
378
+ // Format date for display (JJ/MM/AAAA)
379
+ const formattedDate = new Date(entry.date).toLocaleDateString('fr-FR');
380
+
381
+ if (isEditing) {
382
+ // Update existing entry
383
+ const index = entries.findIndex(e => e.id == entryId);
384
+ if (index !== -1) {
385
+ entries[index] = {
386
+ ...entry,
387
+ displayDate: formattedDate
388
+ };
389
+ }
390
+ showAlert('Fiche client mise à jour avec succès', 'success');
391
+ } else {
392
+ // Add new entry
393
+ entries.unshift({
394
+ ...entry,
395
+ displayDate: formattedDate
396
+ });
397
+ showAlert('Fiche client enregistrée avec succès', 'success');
398
+ }
399
+
400
+ saveData();
401
+ resetForm();
402
+ renderDataList();
403
+ updateEntriesCount();
404
+
405
+ // Switch to list tab after submission
406
+ document.querySelector('[data-tab="list-tab"]').click();
407
+ });
408
+
409
+ // Cancel edit
410
+ cancelEditButton.addEventListener('click', function() {
411
+ resetForm();
412
+ });
413
+
414
+ // Export to Excel
415
+ exportExcel.addEventListener('click', function() {
416
+ if (entries.length === 0) {
417
+ showAlert('Aucune fiche à exporter', 'error');
418
+ return;
419
+ }
420
+
421
+ // Create worksheet
422
+ const ws = XLSX.utils.json_to_sheet(entries.map(entry => ({
423
+ 'Date': entry.displayDate,
424
+ 'Heure': entry.time,
425
+ 'Opérateur': entry.operatorName,
426
+ 'N° Opérateur': entry.operatorNumber,
427
+ 'Technicien': entry.technician,
428
+ 'Client': entry.clientName,
429
+ 'N° Client': entry.clientNumber,
430
+ 'Commentaire': entry.comment || ''
431
+ })));
432
+
433
+ // Create workbook
434
+ const wb = XLSX.utils.book_new();
435
+ XLSX.utils.book_append_sheet(wb, ws, "Fiches Clients");
436
+
437
+ // Export to file
438
+ XLSX.writeFile(wb, "fiches_clients.xlsx");
439
+
440
+ showAlert('Export Excel réussi', 'success');
441
+ });
442
+
443
+ // Export to PDF
444
+ exportPdf.addEventListener('click', function() {
445
+ if (entries.length === 0) {
446
+ showAlert('Aucune fiche à exporter', 'error');
447
+ return;
448
+ }
449
+
450
+ // Create a temporary div to hold the PDF content
451
+ const pdfContent = document.createElement('div');
452
+ pdfContent.style.padding = '20px';
453
+ pdfContent.style.backgroundColor = 'white';
454
+ pdfContent.style.maxWidth = '600px';
455
+ pdfContent.style.margin = '0 auto';
456
+
457
+ // Add title
458
+ const title = document.createElement('h1');
459
+ title.textContent = 'Fiches Clients Exportées';
460
+ title.style.textAlign = 'center';
461
+ title.style.marginBottom = '20px';
462
+ title.style.fontSize = '20px';
463
+ title.style.color = '#4f46e5';
464
+ title.style.fontWeight = 'bold';
465
+ pdfContent.appendChild(title);
466
+
467
+ // Add date
468
+ const exportDate = document.createElement('p');
469
+ exportDate.textContent = 'Exporté le: ' + new Date().toLocaleDateString('fr-FR');
470
+ exportDate.style.textAlign = 'center';
471
+ exportDate.style.marginBottom = '20px';
472
+ exportDate.style.color = '#6b7280';
473
+ pdfContent.appendChild(exportDate);
474
+
475
+ // Create table
476
+ const table = document.createElement('table');
477
+ table.style.width = '100%';
478
+ table.style.borderCollapse = 'collapse';
479
+ table.style.fontSize = '12px';
480
+
481
+ // Add table header
482
+ const thead = document.createElement('thead');
483
+ const headerRow = document.createElement('tr');
484
+ headerRow.style.backgroundColor = '#eef2ff';
485
+
486
+ ['Date', 'Heure', 'Opérateur', 'N° Op', 'Technicien', 'Client', 'N° Client', 'Commentaire'].forEach(text => {
487
+ const th = document.createElement('th');
488
+ th.textContent = text;
489
+ th.style.padding = '8px';
490
+ th.style.border = '1px solid #e5e7eb';
491
+ th.style.textAlign = 'left';
492
+ headerRow.appendChild(th);
493
+ });
494
+
495
+ thead.appendChild(headerRow);
496
+ table.appendChild(thead);
497
+
498
+ // Add table body
499
+ const tbody = document.createElement('tbody');
500
+
501
+ entries.forEach(entry => {
502
+ const row = document.createElement('tr');
503
+ row.style.borderBottom = '1px solid #e5e7eb';
504
+
505
+ [
506
+ entry.displayDate,
507
+ entry.time,
508
+ entry.operatorName,
509
+ entry.operatorNumber,
510
+ entry.technician,
511
+ entry.clientName,
512
+ entry.clientNumber,
513
+ entry.comment || ''
514
+ ].forEach(text => {
515
+ const td = document.createElement('td');
516
+ td.textContent = text;
517
+ td.style.padding = '8px';
518
+ td.style.border = '1px solid #e5e7eb';
519
+ row.appendChild(td);
520
+ });
521
+
522
+ tbody.appendChild(row);
523
+ });
524
+
525
+ table.appendChild(tbody);
526
+ pdfContent.appendChild(table);
527
+
528
+ // Add to document temporarily
529
+ document.body.appendChild(pdfContent);
530
+
531
+ // Generate PDF
532
+ html2canvas(pdfContent).then(canvas => {
533
+ const imgData = canvas.toDataURL('image/png');
534
+ const pdf = new jsPDF({
535
+ orientation: 'landscape',
536
+ unit: 'mm'
537
+ });
538
+
539
+ const imgProps = pdf.getImageProperties(imgData);
540
+ const pdfWidth = pdf.internal.pageSize.getWidth();
541
+ const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
542
+
543
+ pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
544
+ pdf.save('fiches_clients.pdf');
545
+
546
+ // Remove temporary element
547
+ document.body.removeChild(pdfContent);
548
+
549
+ showAlert('Export PDF réussi', 'success');
550
+ });
551
+ });
552
+
553
+ // Clear all data
554
+ clearAll.addEventListener('click', function() {
555
+ if (entries.length === 0) return;
556
+
557
+ if (confirm('Êtes-vous sûr de vouloir supprimer toutes les fiches clients ?')) {
558
+ entries = [];
559
+ saveData();
560
+ renderDataList();
561
+ updateEntriesCount();
562
+ showAlert('Toutes les fiches ont été supprimées', 'success');
563
+ }
564
+ });
565
+
566
+ // Delete single entry
567
+ function deleteEntry(id) {
568
+ if (confirm('Êtes-vous sûr de vouloir supprimer cette fiche client ?')) {
569
+ entries = entries.filter(entry => entry.id !== id);
570
+ saveData();
571
+ renderDataList();
572
+ updateEntriesCount();
573
+ showAlert('Fiche supprimée', 'success');
574
+ }
575
+ }
576
+
577
+ // Edit single entry
578
+ function editEntry(id) {
579
+ const entry = entries.find(e => e.id == id);
580
+ if (!entry) return;
581
+
582
+ // Fill form with entry data
583
+ document.getElementById('edit-id').value = entry.id;
584
+ document.getElementById('date').value = entry.date;
585
+ document.getElementById('time').value = entry.time;
586
+ document.getElementById('operator-name').value = entry.operatorName;
587
+ document.getElementById('operator-number').value = entry.operatorNumber;
588
+ document.getElementById('technician').value = entry.technician;
589
+ document.getElementById('client-name').value = entry.clientName;
590
+ document.getElementById('client-number').value = entry.clientNumber;
591
+ document.getElementById('comment').value = entry.comment || '';
592
+
593
+ // Update UI for edit mode
594
+ isEditing = true;
595
+ submitButton.innerHTML = '<i class="fas fa-save mr-2"></i> Mettre à jour';
596
+ cancelEditButton.classList.remove('hidden');
597
+ document.querySelector('[data-tab="form-tab"]').click();
598
+
599
+ // Scroll to top
600
+ window.scrollTo(0, 0);
601
+ }
602
+
603
+ // Reset form to default state
604
+ function resetForm() {
605
+ dataForm.reset();
606
+ document.getElementById('edit-id').value = '';
607
+ isEditing = false;
608
+ submitButton.innerHTML = '<i class="fas fa-save mr-2"></i> Enregistrer';
609
+ cancelEditButton.classList.add('hidden');
610
+
611
+ // Reset date and time to now
612
+ const now = new Date();
613
+ document.getElementById('date').valueAsDate = now;
614
+ document.getElementById('time').value = now.toTimeString().substring(0, 5);
615
+ }
616
+
617
+ // Save data to localStorage
618
+ function saveData() {
619
+ // Show saving status
620
+ saveText.textContent = 'Sauvegarde...';
621
+ saveIcon.className = 'fas fa-circle-notch ml-1 text-indigo-500 rotate';
622
+
623
+ // Clear any existing timeout
624
+ if (saveTimeout) clearTimeout(saveTimeout);
625
+
626
+ // Set timeout to simulate async save
627
+ saveTimeout = setTimeout(() => {
628
+ localStorage.setItem('clientEntries', JSON.stringify(entries));
629
+
630
+ // Update status
631
+ saveText.textContent = 'Sauvegardé';
632
+ saveIcon.className = 'fas fa-check-circle ml-1 text-green-500';
633
+
634
+ // Reset status after 3 seconds
635
+ setTimeout(() => {
636
+ saveText.textContent = 'Auto-sauvegarde';
637
+ saveIcon.className = 'fas fa-history ml-1 text-gray-500';
638
+ }, 3000);
639
+ }, 800);
640
+ }
641
+
642
+ // Render data list
643
+ function renderDataList() {
644
+ if (entries.length === 0) {
645
+ dataList.innerHTML = '';
646
+ noData.style.display = 'block';
647
+ return;
648
+ }
649
+
650
+ noData.style.display = 'none';
651
+
652
+ dataList.innerHTML = entries.map(entry => `
653
+ <div class="bg-white p-3 rounded-lg shadow-sm border border-gray-100 fade-in" id="entry-${entry.id}">
654
+ <div class="flex justify-between items-start mb-1">
655
+ <div>
656
+ <span class="text-xs font-medium text-indigo-600">${entry.displayDate} à ${entry.time}</span>
657
+ </div>
658
+ <div class="flex space-x-2">
659
+ <button onclick="editEntry(${entry.id})" class="text-blue-500 text-xs hover:text-blue-700">
660
+ <i class="fas fa-edit mr-1"></i>
661
+ </button>
662
+ <button onclick="deleteEntry(${entry.id})" class="text-red-500 text-xs hover:text-red-700">
663
+ <i class="fas fa-trash-alt"></i>
664
+ </button>
665
+ </div>
666
+ </div>
667
+
668
+ <div class="grid grid-cols-2 gap-2 text-xs mb-2">
669
+ <div>
670
+ <span class="font-medium">Opérateur:</span>
671
+ <p>${entry.operatorName} (${entry.operatorNumber})</p>
672
+ </div>
673
+ <div>
674
+ <span class="font-medium">Technicien:</span>
675
+ <p>${entry.technician}</p>
676
+ </div>
677
+ </div>
678
+
679
+ <div class="grid grid-cols-2 gap-2 text-xs mb-2">
680
+ <div>
681
+ <span class="font-medium">Client:</span>
682
+ <p>${entry.clientName}</p>
683
+ </div>
684
+ <div>
685
+ <span class="font-medium">N° Client:</span>
686
+ <p>${entry.clientNumber}</p>
687
+ </div>
688
+ </div>
689
+
690
+ ${entry.comment ? `
691
+ <div class="text-xs mt-1">
692
+ <span class="font-medium">Commentaire:</span>
693
+ <p class="text-gray-600">${entry.comment}</p>
694
+ </div>
695
+ ` : ''}
696
+ </div>
697
+ `).join('');
698
+ }
699
+
700
+ // Update entries count in tab button
701
+ function updateEntriesCount() {
702
+ entriesCount.textContent = entries.length;
703
+ }
704
+
705
+ // Show alert message
706
+ function showAlert(message, type) {
707
+ const alert = document.createElement('div');
708
+ alert.className = `fixed top-4 left-1/2 transform -translate-x-1/2 px-6 py-3 rounded-lg shadow-lg text-white font-medium text-sm flex items-center ${
709
+ type === 'success' ? 'bg-green-500' : 'bg-red-500'
710
+ }`;
711
+ alert.innerHTML = `
712
+ <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} mr-2"></i>
713
+ ${message}
714
+ `;
715
+
716
+ document.body.appendChild(alert);
717
+
718
+ setTimeout(() => {
719
+ alert.classList.add('opacity-0', 'transition-opacity', 'duration-300');
720
+ setTimeout(() => alert.remove(), 300);
721
+ }, 3000);
722
+ }
723
+
724
+ // Auto-save indicator
725
+ setInterval(() => {
726
+ if (saveText.textContent === 'Auto-sauvegarde') {
727
+ saveIcon.className = 'fas fa-circle-notch ml-1 text-indigo-500 rotate';
728
+ setTimeout(() => {
729
+ if (saveText.textContent === 'Auto-sauvegarde') {
730
+ saveIcon.className = 'fas fa-history ml-1 text-gray-500';
731
+ }
732
+ }, 1000);
733
+ }
734
+ }, 30000);
735
+
736
+ // Make functions available globally
737
+ window.deleteEntry = deleteEntry;
738
+ window.editEntry = editEntry;
739
+ });
740
+ </script>
741
+ <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/appnew" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
742
+ </html>
prompts.txt ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
 
1
+ fait moi une application mobile pour encouder des donners et par la suite les telecharger sois en excel sois en pdf cette application elle se autosavugare
2
+ les donners a eregistrer sont : Voici la version corrigée de ton texte : **"Les données à enregistrer sont les suivantes : nom de l’opérateur, numéro de l’opérateur, technicien, nom du client, numéro du client, commentaire."
3
+ ajout une case date et heure a remplire aussi
4
+ les fichez enregistrer mes les dans un autre ongle
5
+ change le logo fiche enregistrée en pro
6
+ PERMETRER DE MODIFIER AUSSI LA FICHE ENREGISTRER
7
+ change en bas 2023 par 2025 en By Imed Ramdani
8
+ l'ongle + Nouvelle Fiche en jeane
9
+ en bas du titre Fiche Client met la date d'ahjourdhuit