Hugging Face's logo

Spaces:
Lechugaia
/
cmp
Running

App Files Community
Lechugaia commited on
Commit
eedadc8
·
verified ·
1 Parent(s): 9a03242

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +524 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cmp
3
- emoji: 🏢
4
- colorFrom: red
5
- colorTo: blue
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: cmp
3
+ emoji: 🐳
4
+ colorFrom: purple
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,524 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Medication Leftovers Control System</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#3b82f6',
15
+ secondary: '#10b981',
16
+ danger: '#ef4444',
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <style>
23
+ @keyframes fadeIn {
24
+ from { opacity: 0; transform: translateY(10px); }
25
+ to { opacity: 1; transform: translateY(0); }
26
+ }
27
+
28
+ .fade-in {
29
+ animation: fadeIn 0.3s ease-out forwards;
30
+ }
31
+
32
+ .signature-pad {
33
+ border: 1px dashed #ccc;
34
+ border-radius: 4px;
35
+ background-color: #f9fafb;
36
+ }
37
+
38
+ input:focus, select:focus, textarea:focus {
39
+ outline: 2px solid #3b82f6;
40
+ outline-offset: 2px;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-50 min-h-screen">
45
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
46
+ <!-- Header -->
47
+ <header class="mb-8 text-center">
48
+ <h1 class="text-3xl font-bold text-primary mb-2">
49
+ <i class="fas fa-pills mr-2"></i>Medication Leftovers Control
50
+ </h1>
51
+ <p class="text-gray-600">Track and manage medication leftovers with expiration dates and stability information</p>
52
+ </header>
53
+
54
+ <!-- Control Panel -->
55
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8">
56
+ <div class="flex flex-wrap gap-4 mb-6">
57
+ <button id="scanBtn" class="flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-700 transition">
58
+ <i class="fas fa-barcode mr-2"></i> Scan Barcode
59
+ </button>
60
+ <button id="manualBtn" class="flex items-center px-4 py-2 bg-secondary text-white rounded-lg hover:bg-emerald-700 transition">
61
+ <i class="fas fa-keyboard mr-2"></i> Manual Entry
62
+ </button>
63
+ <button id="clearBtn" class="flex items-center px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
64
+ <i class="fas fa-trash-alt mr-2"></i> Clear Form
65
+ </button>
66
+ <button id="saveBtn" class="flex items-center px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition ml-auto">
67
+ <i class="fas fa-save mr-2"></i> Save Record
68
+ </button>
69
+ </div>
70
+
71
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
72
+ <!-- Left Column -->
73
+ <div>
74
+ <div class="mb-4">
75
+ <label for="medication" class="block text-sm font-medium text-gray-700 mb-1">Medication Name *</label>
76
+ <div class="relative">
77
+ <input type="text" id="medication" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary" placeholder="Enter medication name">
78
+ <div id="medSuggestions" class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg hidden"></div>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="mb-4">
83
+ <label for="batch" class="block text-sm font-medium text-gray-700 mb-1">Batch Number *</label>
84
+ <input type="text" id="batch" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Enter batch number">
85
+ </div>
86
+
87
+ <div class="mb-4">
88
+ <label for="expiration" class="block text-sm font-medium text-gray-700 mb-1">Expiration Date *</label>
89
+ <input type="date" id="expiration" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
90
+ </div>
91
+
92
+ <div class="mb-4">
93
+ <label for="quantity" class="block text-sm font-medium text-gray-700 mb-1">Quantity Left *</label>
94
+ <div class="flex">
95
+ <input type="number" id="quantity" class="w-3/4 px-4 py-2 border border-gray-300 rounded-l-lg" placeholder="Enter quantity">
96
+ <select id="unit" class="w-1/4 px-2 py-2 border border-gray-300 rounded-r-lg bg-gray-50">
97
+ <option value="tablets">tablets</option>
98
+ <option value="ml">ml</option>
99
+ <option value="mg">mg</option>
100
+ <option value="vials">vials</option>
101
+ <option value="ampoules">ampoules</option>
102
+ </select>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Right Column -->
108
+ <div>
109
+ <div class="mb-4">
110
+ <label for="productionDate" class="block text-sm font-medium text-gray-700 mb-1">Production Date</label>
111
+ <input type="date" id="productionDate" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
112
+ </div>
113
+
114
+ <div class="mb-4">
115
+ <label for="stability" class="block text-sm font-medium text-gray-700 mb-1">Stability Information</label>
116
+ <select id="stability" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
117
+ <option value="">Select stability</option>
118
+ <option value="room_temp">Room temperature (15-25°C)</option>
119
+ <option value="refrigerated">Refrigerated (2-8°C)</option>
120
+ <option value="frozen">Frozen (-20°C or below)</option>
121
+ <option value="protected_light">Protected from light</option>
122
+ <option value="special">Special conditions (see notes)</option>
123
+ </select>
124
+ </div>
125
+
126
+ <div class="mb-4">
127
+ <label for="useExpiration" class="block text-sm font-medium text-gray-700 mb-1">Expiration Date After Opening</label>
128
+ <input type="date" id="useExpiration" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
129
+ </div>
130
+
131
+ <div class="mb-4">
132
+ <label for="laboratory" class="block text-sm font-medium text-gray-700 mb-1">Manufacturer/Laboratory</label>
133
+ <input type="text" id="laboratory" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Enter manufacturer name">
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Notes Section -->
139
+ <div class="mb-6">
140
+ <label for="notes" class="block text-sm font-medium text-gray-700 mb-1">Additional Notes</label>
141
+ <textarea id="notes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Any special instructions or notes about this medication"></textarea>
142
+ </div>
143
+
144
+ <!-- Signature Section -->
145
+ <div>
146
+ <label class="block text-sm font-medium text-gray-700 mb-1">Responsible Person Signature</label>
147
+ <div class="signature-pad p-4 mb-2">
148
+ <canvas id="signatureCanvas" width="100%" height="100"></canvas>
149
+ </div>
150
+ <div class="flex justify-between">
151
+ <button id="clearSignature" class="text-sm text-gray-500 hover:text-gray-700">
152
+ <i class="fas fa-eraser mr-1"></i> Clear Signature
153
+ </button>
154
+ <div class="text-sm text-gray-500">
155
+ <i class="fas fa-info-circle mr-1"></i> Sign above to confirm
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Recent Records -->
162
+ <div class="bg-white rounded-lg shadow-md p-6">
163
+ <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
164
+ <i class="fas fa-history mr-2"></i> Recent Records
165
+ </h2>
166
+ <div class="overflow-x-auto">
167
+ <table class="min-w-full divide-y divide-gray-200">
168
+ <thead class="bg-gray-50">
169
+ <tr>
170
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
171
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Medication</th>
172
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Batch</th>
173
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expiration</th>
174
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
175
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
176
+ </tr>
177
+ </thead>
178
+ <tbody id="recordsTable" class="bg-white divide-y divide-gray-200">
179
+ <!-- Records will be added here dynamically -->
180
+ </tbody>
181
+ </table>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <script>
187
+ document.addEventListener('DOMContentLoaded', function() {
188
+ // Sample medication database for autocomplete
189
+ const medicationDatabase = [
190
+ { name: "Amoxicillin 500mg", commonBatch: "AMX2023", stability: "room_temp", lab: "PharmaCorp" },
191
+ { name: "Ibuprofen 200mg", commonBatch: "IBU2305", stability: "room_temp", lab: "MediHealth" },
192
+ { name: "Insulin Glargine", commonBatch: "INS456", stability: "refrigerated", lab: "BioSolutions" },
193
+ { name: "Paracetamol 500mg", commonBatch: "PARA789", stability: "room_temp", lab: "GenericMeds" },
194
+ { name: "Loratadine 10mg", commonBatch: "LORA123", stability: "room_temp", lab: "AllerFree" },
195
+ { name: "Omeprazole 20mg", commonBatch: "OME456", stability: "room_temp", lab: "GastroPharm" }
196
+ ];
197
+
198
+ // Set today's date as default
199
+ const today = new Date();
200
+ const todayFormatted = today.toISOString().split('T')[0];
201
+ document.getElementById('productionDate').value = todayFormatted;
202
+
203
+ // Initialize signature pad
204
+ const canvas = document.getElementById('signatureCanvas');
205
+ const ctx = canvas.getContext('2d');
206
+ let isDrawing = false;
207
+ let lastX = 0;
208
+ let lastY = 0;
209
+
210
+ // Set canvas size
211
+ function resizeCanvas() {
212
+ const container = canvas.parentElement;
213
+ canvas.width = container.offsetWidth;
214
+ canvas.height = 100;
215
+ }
216
+ resizeCanvas();
217
+ window.addEventListener('resize', resizeCanvas);
218
+
219
+ // Signature drawing functionality
220
+ canvas.addEventListener('mousedown', (e) => {
221
+ isDrawing = true;
222
+ [lastX, lastY] = [e.offsetX, e.offsetY];
223
+ });
224
+
225
+ canvas.addEventListener('mousemove', (e) => {
226
+ if (!isDrawing) return;
227
+ ctx.beginPath();
228
+ ctx.moveTo(lastX, lastY);
229
+ ctx.lineTo(e.offsetX, e.offsetY);
230
+ ctx.strokeStyle = '#000';
231
+ ctx.lineWidth = 2;
232
+ ctx.stroke();
233
+ [lastX, lastY] = [e.offsetX, e.offsetY];
234
+ });
235
+
236
+ canvas.addEventListener('mouseup', () => isDrawing = false);
237
+ canvas.addEventListener('mouseout', () => isDrawing = false);
238
+
239
+ // Touch support for signature
240
+ canvas.addEventListener('touchstart', (e) => {
241
+ e.preventDefault();
242
+ const touch = e.touches[0];
243
+ const mouseEvent = new MouseEvent('mousedown', {
244
+ clientX: touch.clientX,
245
+ clientY: touch.clientY
246
+ });
247
+ canvas.dispatchEvent(mouseEvent);
248
+ });
249
+
250
+ canvas.addEventListener('touchmove', (e) => {
251
+ e.preventDefault();
252
+ const touch = e.touches[0];
253
+ const mouseEvent = new MouseEvent('mousemove', {
254
+ clientX: touch.clientX,
255
+ clientY: touch.clientY
256
+ });
257
+ canvas.dispatchEvent(mouseEvent);
258
+ });
259
+
260
+ canvas.addEventListener('touchend', () => {
261
+ const mouseEvent = new MouseEvent('mouseup');
262
+ canvas.dispatchEvent(mouseEvent);
263
+ });
264
+
265
+ // Clear signature
266
+ document.getElementById('clearSignature').addEventListener('click', () => {
267
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
268
+ });
269
+
270
+ // Medication autocomplete
271
+ const medicationInput = document.getElementById('medication');
272
+ const suggestionsContainer = document.getElementById('medSuggestions');
273
+
274
+ medicationInput.addEventListener('input', function() {
275
+ const input = this.value.toLowerCase();
276
+ if (input.length < 2) {
277
+ suggestionsContainer.classList.add('hidden');
278
+ return;
279
+ }
280
+
281
+ const matches = medicationDatabase.filter(med =>
282
+ med.name.toLowerCase().includes(input)
283
+ );
284
+
285
+ if (matches.length > 0) {
286
+ suggestionsContainer.innerHTML = '';
287
+ matches.forEach(med => {
288
+ const div = document.createElement('div');
289
+ div.className = 'px-4 py-2 hover:bg-gray-100 cursor-pointer';
290
+ div.textContent = med.name;
291
+ div.addEventListener('click', () => {
292
+ medicationInput.value = med.name;
293
+ document.getElementById('batch').value = med.commonBatch;
294
+ document.getElementById('stability').value = med.stability;
295
+ document.getElementById('laboratory').value = med.lab;
296
+ suggestionsContainer.classList.add('hidden');
297
+
298
+ // Set a future expiration date (1 year from now)
299
+ const futureDate = new Date();
300
+ futureDate.setFullYear(futureDate.getFullYear() + 1);
301
+ document.getElementById('expiration').value = futureDate.toISOString().split('T')[0];
302
+
303
+ // Set use expiration (30 days from now)
304
+ const useDate = new Date();
305
+ useDate.setDate(useDate.getDate() + 30);
306
+ document.getElementById('useExpiration').value = useDate.toISOString().split('T')[0];
307
+ });
308
+ suggestionsContainer.appendChild(div);
309
+ });
310
+ suggestionsContainer.classList.remove('hidden');
311
+ } else {
312
+ suggestionsContainer.classList.add('hidden');
313
+ }
314
+ });
315
+
316
+ // Close suggestions when clicking elsewhere
317
+ document.addEventListener('click', (e) => {
318
+ if (e.target !== medicationInput) {
319
+ suggestionsContainer.classList.add('hidden');
320
+ }
321
+ });
322
+
323
+ // Sample records data
324
+ let records = [
325
+ {
326
+ date: '2023-06-15',
327
+ medication: 'Amoxicillin 500mg',
328
+ batch: 'AMX2023',
329
+ expiration: '2024-06-14',
330
+ quantity: '15 tablets',
331
+ stability: 'Room temperature',
332
+ useExpiration: '2023-07-15',
333
+ laboratory: 'PharmaCorp',
334
+ notes: 'Keep in dry place'
335
+ },
336
+ {
337
+ date: '2023-06-10',
338
+ medication: 'Insulin Glargine',
339
+ batch: 'INS456',
340
+ expiration: '2023-12-10',
341
+ quantity: '2 vials',
342
+ stability: 'Refrigerated',
343
+ useExpiration: '2023-07-10',
344
+ laboratory: 'BioSolutions',
345
+ notes: 'Do not freeze'
346
+ }
347
+ ];
348
+
349
+ // Render records table
350
+ function renderRecords() {
351
+ const tableBody = document.getElementById('recordsTable');
352
+ tableBody.innerHTML = '';
353
+
354
+ records.forEach((record, index) => {
355
+ const row = document.createElement('tr');
356
+ row.className = 'fade-in';
357
+ row.innerHTML = `
358
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${record.date}</td>
359
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${record.medication}</td>
360
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${record.batch}</td>
361
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${record.expiration}</td>
362
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${record.quantity}</td>
363
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
364
+ <button class="text-primary hover:text-blue-700 mr-3 view-btn" data-index="${index}">
365
+ <i class="fas fa-eye mr-1"></i> View
366
+ </button>
367
+ <button class="text-danger hover:text-red-700 delete-btn" data-index="${index}">
368
+ <i class="fas fa-trash-alt mr-1"></i> Delete
369
+ </button>
370
+ </td>
371
+ `;
372
+ tableBody.appendChild(row);
373
+ });
374
+
375
+ // Add event listeners to buttons
376
+ document.querySelectorAll('.view-btn').forEach(btn => {
377
+ btn.addEventListener('click', function() {
378
+ const index = this.getAttribute('data-index');
379
+ viewRecord(index);
380
+ });
381
+ });
382
+
383
+ document.querySelectorAll('.delete-btn').forEach(btn => {
384
+ btn.addEventListener('click', function() {
385
+ const index = this.getAttribute('data-index');
386
+ deleteRecord(index);
387
+ });
388
+ });
389
+ }
390
+
391
+ // View record details
392
+ function viewRecord(index) {
393
+ const record = records[index];
394
+ alert(`Medication: ${record.medication}\nBatch: ${record.batch}\nExpiration: ${record.expiration}\nQuantity: ${record.quantity}\nStability: ${record.stability}\nUse Until: ${record.useExpiration}\nLab: ${record.laboratory}\nNotes: ${record.notes}`);
395
+ }
396
+
397
+ // Delete record
398
+ function deleteRecord(index) {
399
+ if (confirm('Are you sure you want to delete this record?')) {
400
+ records.splice(index, 1);
401
+ renderRecords();
402
+ }
403
+ }
404
+
405
+ // Save new record
406
+ document.getElementById('saveBtn').addEventListener('click', function() {
407
+ const medication = document.getElementById('medication').value;
408
+ const batch = document.getElementById('batch').value;
409
+ const expiration = document.getElementById('expiration').value;
410
+ const quantity = document.getElementById('quantity').value + ' ' + document.getElementById('unit').value;
411
+ const productionDate = document.getElementById('productionDate').value;
412
+ const stability = document.getElementById('stability').options[document.getElementById('stability').selectedIndex].text;
413
+ const useExpiration = document.getElementById('useExpiration').value;
414
+ const laboratory = document.getElementById('laboratory').value;
415
+ const notes = document.getElementById('notes').value;
416
+
417
+ if (!medication || !batch || !expiration || !quantity) {
418
+ alert('Please fill in all required fields (marked with *)');
419
+ return;
420
+ }
421
+
422
+ // Check if signature is present
423
+ const signatureEmpty = canvas.toDataURL() === document.createElement('canvas').toDataURL();
424
+ if (signatureEmpty) {
425
+ alert('Please provide a signature to confirm the record');
426
+ return;
427
+ }
428
+
429
+ const newRecord = {
430
+ date: todayFormatted,
431
+ medication,
432
+ batch,
433
+ expiration,
434
+ quantity,
435
+ productionDate,
436
+ stability,
437
+ useExpiration,
438
+ laboratory,
439
+ notes
440
+ };
441
+
442
+ records.unshift(newRecord);
443
+ renderRecords();
444
+
445
+ // Clear form
446
+ document.getElementById('clearBtn').click();
447
+
448
+ // Show success message
449
+ const successMsg = document.createElement('div');
450
+ successMsg.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
451
+ successMsg.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Record saved successfully!';
452
+ document.body.appendChild(successMsg);
453
+
454
+ setTimeout(() => {
455
+ successMsg.classList.add('opacity-0', 'transition-opacity', 'duration-500');
456
+ setTimeout(() => successMsg.remove(), 500);
457
+ }, 3000);
458
+ });
459
+
460
+ // Clear form
461
+ document.getElementById('clearBtn').addEventListener('click', function() {
462
+ document.getElementById('medication').value = '';
463
+ document.getElementById('batch').value = '';
464
+ document.getElementById('expiration').value = '';
465
+ document.getElementById('quantity').value = '';
466
+ document.getElementById('unit').value = 'tablets';
467
+ document.getElementById('productionDate').value = todayFormatted;
468
+ document.getElementById('stability').value = '';
469
+ document.getElementById('useExpiration').value = '';
470
+ document.getElementById('laboratory').value = '';
471
+ document.getElementById('notes').value = '';
472
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
473
+ });
474
+
475
+ // Simulate barcode scan
476
+ document.getElementById('scanBtn').addEventListener('click', function() {
477
+ // Simulate scanning a random medication
478
+ const randomMed = medicationDatabase[Math.floor(Math.random() * medicationDatabase.length)];
479
+ document.getElementById('medication').value = randomMed.name;
480
+ document.getElementById('batch').value = randomMed.commonBatch;
481
+ document.getElementById('stability').value = randomMed.stability;
482
+ document.getElementById('laboratory').value = randomMed.lab;
483
+
484
+ // Set dates
485
+ const futureDate = new Date();
486
+ futureDate.setFullYear(futureDate.getFullYear() + 1);
487
+ document.getElementById('expiration').value = futureDate.toISOString().split('T')[0];
488
+
489
+ const useDate = new Date();
490
+ useDate.setDate(useDate.getDate() + 30);
491
+ document.getElementById('useExpiration').value = useDate.toISOString().split('T')[0];
492
+
493
+ // Set random quantity
494
+ document.getElementById('quantity').value = Math.floor(Math.random() * 20) + 5;
495
+
496
+ // Show scan animation
497
+ const scanAnimation = document.createElement('div');
498
+ scanAnimation.className = 'fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50';
499
+ scanAnimation.innerHTML = `
500
+ <div class="bg-white p-6 rounded-lg text-center max-w-sm">
501
+ <div class="text-4xl mb-4">
502
+ <i class="fas fa-barcode animate-pulse text-primary"></i>
503
+ </div>
504
+ <h3 class="text-xl font-semibold mb-2">Scanning Barcode</h3>
505
+ <p class="text-gray-600 mb-4">Detected: ${randomMed.name}</p>
506
+ <div class="h-1 w-full bg-gray-200 rounded-full overflow-hidden">
507
+ <div class="h-full bg-primary rounded-full animate-progress"></div>
508
+ </div>
509
+ </div>
510
+ `;
511
+ document.body.appendChild(scanAnimation);
512
+
513
+ setTimeout(() => {
514
+ scanAnimation.classList.add('opacity-0', 'transition-opacity', 'duration-300');
515
+ setTimeout(() => scanAnimation.remove(), 300);
516
+ }, 1500);
517
+ });
518
+
519
+ // Initial render of records
520
+ renderRecords();
521
+ });
522
+ </script>
523
+ <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=Lechugaia/cmp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
524
+ </html>
prompts.txt ADDED
File without changes