Hugging Face's logo

Spaces:
MORYDIABAGATE
/
ambamali
Running

App Files Community
MORYDIABAGATE commited on
Commit
8a35789
·
verified ·
1 Parent(s): 2b36ddb

L'ajout, la modification et la suppression d’étudiants. L’affichage de la liste des étudiants avec possibilité de recherche par nom ou matricule. Chaque étudiant a : un identifiant, nom, prénom, date de naissance, sexe, filière, et niveau. Je travaille en local (localhost) avec [indiquer ici ta technologie préférée : PHP + MySQL / Python Flask + SQLite / Node.js + MongoDB / etc.]. Donne-moi : La structure de la base de données. Le plan des fichiers du projet. Des exemples de code (backend + frontend). Comment exécuter l’application en local. Des conseils pour l’améliorer plus tard (authentification, pagination, export PDF...). - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +481 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ambamali
3
- emoji: 📈
4
- colorFrom: gray
5
- colorTo: green
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: ambamali
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
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,481 @@
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>Student Management 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
+ <style>
10
+ .fade-enter-active, .fade-leave-active {
11
+ transition: opacity 0.3s;
12
+ }
13
+ .fade-enter, .fade-leave-to {
14
+ opacity: 0;
15
+ }
16
+ .slide-enter-active, .slide-leave-active {
17
+ transition: all 0.3s ease;
18
+ }
19
+ .slide-enter, .slide-leave-to {
20
+ transform: translateX(20px);
21
+ opacity: 0;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="bg-gray-100 min-h-screen">
26
+ <div class="container mx-auto px-4 py-8" id="app">
27
+ <header class="mb-8">
28
+ <h1 class="text-3xl font-bold text-indigo-700">Student Management System</h1>
29
+ <p class="text-gray-600">Manage your student records efficiently</p>
30
+ </header>
31
+
32
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8">
33
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
34
+ <div class="w-full md:w-auto">
35
+ <div class="relative">
36
+ <input
37
+ v-model="searchQuery"
38
+ @input="searchStudents"
39
+ type="text"
40
+ placeholder="Search by name or ID..."
41
+ class="w-full md:w-64 pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
42
+ >
43
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
44
+ </div>
45
+ </div>
46
+ <button
47
+ @click="showAddModal = true"
48
+ class="w-full md:w-auto bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
49
+ >
50
+ <i class="fas fa-plus"></i>
51
+ Add Student
52
+ </button>
53
+ </div>
54
+
55
+ <div class="overflow-x-auto">
56
+ <table class="min-w-full divide-y divide-gray-200">
57
+ <thead class="bg-gray-50">
58
+ <tr>
59
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
60
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
61
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date of Birth</th>
62
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Gender</th>
63
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Program</th>
64
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Level</th>
65
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
66
+ </tr>
67
+ </thead>
68
+ <tbody class="bg-white divide-y divide-gray-200">
69
+ <transition-group name="fade" tag="tbody">
70
+ <tr v-for="student in filteredStudents" :key="student.id" class="hover:bg-gray-50">
71
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ student.id }}</td>
72
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
73
+ {{ student.lastName }}, {{ student.firstName }}
74
+ </td>
75
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ formatDate(student.dob) }}</td>
76
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
77
+ <span :class="{'bg-blue-100 text-blue-800': student.gender === 'Male', 'bg-pink-100 text-pink-800': student.gender === 'Female'}" class="px-2 py-1 rounded-full text-xs">
78
+ {{ student.gender }}
79
+ </span>
80
+ </td>
81
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ student.program }}</td>
82
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
83
+ <span class="px-2 py-1 bg-indigo-100 text-indigo-800 rounded-full text-xs">
84
+ Level {{ student.level }}
85
+ </span>
86
+ </td>
87
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
88
+ <button @click="editStudent(student)" class="text-indigo-600 hover:text-indigo-900 mr-3">
89
+ <i class="fas fa-edit"></i>
90
+ </button>
91
+ <button @click="confirmDelete(student)" class="text-red-600 hover:text-red-900">
92
+ <i class="fas fa-trash"></i>
93
+ </button>
94
+ </td>
95
+ </tr>
96
+ </transition-group>
97
+ <tr v-if="filteredStudents.length === 0">
98
+ <td colspan="7" class="px-6 py-4 text-center text-sm text-gray-500">
99
+ No students found. Add some students to get started!
100
+ </td>
101
+ </tr>
102
+ </tbody>
103
+ </table>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Add/Edit Student Modal -->
108
+ <transition name="fade">
109
+ <div v-if="showAddModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
110
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
111
+ <div class="p-6">
112
+ <div class="flex justify-between items-center mb-4">
113
+ <h3 class="text-lg font-medium text-gray-900">
114
+ {{ isEditing ? 'Edit Student' : 'Add New Student' }}
115
+ </h3>
116
+ <button @click="closeModal" class="text-gray-400 hover:text-gray-500">
117
+ <i class="fas fa-times"></i>
118
+ </button>
119
+ </div>
120
+
121
+ <form @submit.prevent="isEditing ? updateStudent() : addStudent()">
122
+ <div class="space-y-4">
123
+ <div>
124
+ <label for="firstName" class="block text-sm font-medium text-gray-700">First Name</label>
125
+ <input
126
+ type="text"
127
+ id="firstName"
128
+ v-model="currentStudent.firstName"
129
+ required
130
+ class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
131
+ >
132
+ </div>
133
+
134
+ <div>
135
+ <label for="lastName" class="block text-sm font-medium text-gray-700">Last Name</label>
136
+ <input
137
+ type="text"
138
+ id="lastName"
139
+ v-model="currentStudent.lastName"
140
+ required
141
+ class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
142
+ >
143
+ </div>
144
+
145
+ <div>
146
+ <label for="dob" class="block text-sm font-medium text-gray-700">Date of Birth</label>
147
+ <input
148
+ type="date"
149
+ id="dob"
150
+ v-model="currentStudent.dob"
151
+ required
152
+ class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
153
+ >
154
+ </div>
155
+
156
+ <div>
157
+ <label class="block text-sm font-medium text-gray-700">Gender</label>
158
+ <div class="mt-1 flex gap-4">
159
+ <label class="inline-flex items-center">
160
+ <input
161
+ type="radio"
162
+ v-model="currentStudent.gender"
163
+ value="Male"
164
+ class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
165
+ >
166
+ <span class="ml-2 text-sm text-gray-700">Male</span>
167
+ </label>
168
+ <label class="inline-flex items-center">
169
+ <input
170
+ type="radio"
171
+ v-model="currentStudent.gender"
172
+ value="Female"
173
+ class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
174
+ >
175
+ <span class="ml-2 text-sm text-gray-700">Female</span>
176
+ </label>
177
+ </div>
178
+ </div>
179
+
180
+ <div>
181
+ <label for="program" class="block text-sm font-medium text-gray-700">Program</label>
182
+ <select
183
+ id="program"
184
+ v-model="currentStudent.program"
185
+ required
186
+ class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
187
+ >
188
+ <option value="">Select a program</option>
189
+ <option value="Computer Science">Computer Science</option>
190
+ <option value="Engineering">Engineering</option>
191
+ <option value="Business">Business</option>
192
+ <option value="Medicine">Medicine</option>
193
+ <option value="Law">Law</option>
194
+ <option value="Arts">Arts</option>
195
+ </select>
196
+ </div>
197
+
198
+ <div>
199
+ <label for="level" class="block text-sm font-medium text-gray-700">Level</label>
200
+ <select
201
+ id="level"
202
+ v-model="currentStudent.level"
203
+ required
204
+ class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
205
+ >
206
+ <option value="">Select level</option>
207
+ <option value="1">Level 1</option>
208
+ <option value="2">Level 2</option>
209
+ <option value="3">Level 3</option>
210
+ <option value="4">Level 4</option>
211
+ <option value="5">Level 5</option>
212
+ </select>
213
+ </div>
214
+ </div>
215
+
216
+ <div class="mt-6 flex justify-end gap-3">
217
+ <button
218
+ type="button"
219
+ @click="closeModal"
220
+ class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
221
+ >
222
+ Cancel
223
+ </button>
224
+ <button
225
+ type="submit"
226
+ class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
227
+ >
228
+ {{ isEditing ? 'Update' : 'Add' }}
229
+ </button>
230
+ </div>
231
+ </form>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </transition>
236
+
237
+ <!-- Delete Confirmation Modal -->
238
+ <transition name="fade">
239
+ <div v-if="showDeleteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
240
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
241
+ <div class="p-6">
242
+ <div class="flex justify-between items-center mb-4">
243
+ <h3 class="text-lg font-medium text-gray-900">Confirm Deletion</h3>
244
+ <button @click="showDeleteModal = false" class="text-gray-400 hover:text-gray-500">
245
+ <i class="fas fa-times"></i>
246
+ </button>
247
+ </div>
248
+
249
+ <p class="text-sm text-gray-500 mb-6">
250
+ Are you sure you want to delete {{ studentToDelete.firstName }} {{ studentToDelete.lastName }}? This action cannot be undone.
251
+ </p>
252
+
253
+ <div class="flex justify-end gap-3">
254
+ <button
255
+ @click="showDeleteModal = false"
256
+ class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
257
+ >
258
+ Cancel
259
+ </button>
260
+ <button
261
+ @click="deleteStudent"
262
+ class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
263
+ >
264
+ Delete
265
+ </button>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </transition>
271
+
272
+ <!-- Toast Notification -->
273
+ <transition name="slide">
274
+ <div v-if="showToast" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2">
275
+ <i class="fas fa-check-circle"></i>
276
+ <span>{{ toastMessage }}</span>
277
+ </div>
278
+ </transition>
279
+ </div>
280
+
281
+ <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js"></script>
282
+ <script>
283
+ const { createApp, ref, computed, onMounted } = Vue;
284
+
285
+ createApp({
286
+ setup() {
287
+ // Data properties
288
+ const students = ref([]);
289
+ const searchQuery = ref('');
290
+ const filteredStudents = ref([]);
291
+ const showAddModal = ref(false);
292
+ const showDeleteModal = ref(false);
293
+ const isEditing = ref(false);
294
+ const showToast = ref(false);
295
+ const toastMessage = ref('');
296
+
297
+ const currentStudent = ref({
298
+ id: '',
299
+ firstName: '',
300
+ lastName: '',
301
+ dob: '',
302
+ gender: 'Male',
303
+ program: '',
304
+ level: ''
305
+ });
306
+
307
+ const studentToDelete = ref({
308
+ id: '',
309
+ firstName: '',
310
+ lastName: ''
311
+ });
312
+
313
+ // Methods
314
+ const loadStudents = () => {
315
+ const savedStudents = localStorage.getItem('students');
316
+ if (savedStudents) {
317
+ students.value = JSON.parse(savedStudents);
318
+ filteredStudents.value = [...students.value];
319
+ } else {
320
+ // Sample data
321
+ students.value = [
322
+ {
323
+ id: 'ST001',
324
+ firstName: 'John',
325
+ lastName: 'Doe',
326
+ dob: '2000-05-15',
327
+ gender: 'Male',
328
+ program: 'Computer Science',
329
+ level: '3'
330
+ },
331
+ {
332
+ id: 'ST002',
333
+ firstName: 'Jane',
334
+ lastName: 'Smith',
335
+ dob: '1999-08-22',
336
+ gender: 'Female',
337
+ program: 'Business',
338
+ level: '2'
339
+ },
340
+ {
341
+ id: 'ST003',
342
+ firstName: 'Michael',
343
+ lastName: 'Johnson',
344
+ dob: '2001-03-10',
345
+ gender: 'Male',
346
+ program: 'Engineering',
347
+ level: '4'
348
+ }
349
+ ];
350
+ filteredStudents.value = [...students.value];
351
+ saveStudents();
352
+ }
353
+ };
354
+
355
+ const saveStudents = () => {
356
+ localStorage.setItem('students', JSON.stringify(students.value));
357
+ };
358
+
359
+ const generateStudentId = () => {
360
+ const lastId = students.value.length > 0
361
+ ? parseInt(students.value[students.value.length - 1].id.substring(2))
362
+ : 0;
363
+ return `ST${(lastId + 1).toString().padStart(3, '0')}`;
364
+ };
365
+
366
+ const searchStudents = () => {
367
+ if (!searchQuery.value) {
368
+ filteredStudents.value = [...students.value];
369
+ return;
370
+ }
371
+
372
+ const query = searchQuery.value.toLowerCase();
373
+ filteredStudents.value = students.value.filter(student =>
374
+ student.firstName.toLowerCase().includes(query) ||
375
+ student.lastName.toLowerCase().includes(query) ||
376
+ student.id.toLowerCase().includes(query)
377
+ );
378
+ };
379
+
380
+ const addStudent = () => {
381
+ const newStudent = {
382
+ ...currentStudent.value,
383
+ id: generateStudentId()
384
+ };
385
+
386
+ students.value.push(newStudent);
387
+ saveStudents();
388
+ filteredStudents.value = [...students.value];
389
+ closeModal();
390
+ showNotification('Student added successfully!');
391
+ };
392
+
393
+ const editStudent = (student) => {
394
+ currentStudent.value = { ...student };
395
+ isEditing.value = true;
396
+ showAddModal.value = true;
397
+ };
398
+
399
+ const updateStudent = () => {
400
+ const index = students.value.findIndex(s => s.id === currentStudent.value.id);
401
+ if (index !== -1) {
402
+ students.value[index] = { ...currentStudent.value };
403
+ saveStudents();
404
+ filteredStudents.value = [...students.value];
405
+ closeModal();
406
+ showNotification('Student updated successfully!');
407
+ }
408
+ };
409
+
410
+ const confirmDelete = (student) => {
411
+ studentToDelete.value = { ...student };
412
+ showDeleteModal.value = true;
413
+ };
414
+
415
+ const deleteStudent = () => {
416
+ students.value = students.value.filter(s => s.id !== studentToDelete.value.id);
417
+ saveStudents();
418
+ filteredStudents.value = [...students.value];
419
+ showDeleteModal.value = false;
420
+ showNotification('Student deleted successfully!');
421
+ };
422
+
423
+ const closeModal = () => {
424
+ showAddModal.value = false;
425
+ showDeleteModal.value = false;
426
+ isEditing.value = false;
427
+ currentStudent.value = {
428
+ id: '',
429
+ firstName: '',
430
+ lastName: '',
431
+ dob: '',
432
+ gender: 'Male',
433
+ program: '',
434
+ level: ''
435
+ };
436
+ };
437
+
438
+ const showNotification = (message) => {
439
+ toastMessage.value = message;
440
+ showToast.value = true;
441
+ setTimeout(() => {
442
+ showToast.value = false;
443
+ }, 3000);
444
+ };
445
+
446
+ const formatDate = (dateString) => {
447
+ const options = { year: 'numeric', month: 'short', day: 'numeric' };
448
+ return new Date(dateString).toLocaleDateString(undefined, options);
449
+ };
450
+
451
+ // Lifecycle hooks
452
+ onMounted(() => {
453
+ loadStudents();
454
+ });
455
+
456
+ return {
457
+ students,
458
+ searchQuery,
459
+ filteredStudents,
460
+ showAddModal,
461
+ showDeleteModal,
462
+ isEditing,
463
+ showToast,
464
+ toastMessage,
465
+ currentStudent,
466
+ studentToDelete,
467
+ loadStudents,
468
+ searchStudents,
469
+ addStudent,
470
+ editStudent,
471
+ updateStudent,
472
+ confirmDelete,
473
+ deleteStudent,
474
+ closeModal,
475
+ formatDate
476
+ };
477
+ }
478
+ }).mount('#app');
479
+ </script>
480
+ <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=MORYDIABAGATE/ambamali" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
481
+ </html>