Hugging Face's logo

Spaces:
Mohabedalgani
/
qrrecord
Running

App Files Community
Mohabedalgani commited on
Commit
523e8bd
·
verified ·
1 Parent(s): 2536d95

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +424 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Qrrecord
3
- emoji: 📊
4
- colorFrom: yellow
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: qrrecord
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
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,424 @@
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>QR Medical - Health Record Sharing</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 src="https://cdn.jsdelivr.net/npm/[email protected]/qrcode.min.js"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
13
+ }
14
+ .pulse-animation {
15
+ animation: pulse 2s infinite;
16
+ }
17
+ @keyframes pulse {
18
+ 0% { transform: scale(1); }
19
+ 50% { transform: scale(1.05); }
20
+ 100% { transform: scale(1); }
21
+ }
22
+ .qr-container {
23
+ transition: all 0.3s ease;
24
+ }
25
+ .qr-container:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
28
+ }
29
+ .recording-wave {
30
+ height: 40px;
31
+ background: linear-gradient(90deg, #3b82f6 0%, transparent 100%);
32
+ animation: wave 1.5s infinite linear;
33
+ opacity: 0.7;
34
+ }
35
+ @keyframes wave {
36
+ 0% { background-position: 0% 50%; }
37
+ 100% { background-position: 100% 50%; }
38
+ }
39
+ .permission-modal {
40
+ display: none;
41
+ position: fixed;
42
+ top: 0;
43
+ left: 0;
44
+ width: 100%;
45
+ height: 100%;
46
+ background-color: rgba(0,0,0,0.7);
47
+ z-index: 1000;
48
+ justify-content: center;
49
+ align-items: center;
50
+ }
51
+ .permission-content {
52
+ background: white;
53
+ padding: 2rem;
54
+ border-radius: 0.5rem;
55
+ max-width: 500px;
56
+ text-align: center;
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="bg-gray-50 min-h-screen">
61
+ <!-- Permission Modal -->
62
+ <div id="permissionModal" class="permission-modal">
63
+ <div class="permission-content">
64
+ <h3 class="text-xl font-bold mb-4">Microphone Access Required</h3>
65
+ <p class="mb-6">To record audio, QR Medical needs access to your microphone. Please allow microphone access when prompted by your browser.</p>
66
+ <div class="flex justify-center space-x-4">
67
+ <button id="cancelPermissionBtn" class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-6 rounded-full">
68
+ Cancel
69
+ </button>
70
+ <button id="retryPermissionBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-full">
71
+ Try Again
72
+ </button>
73
+ </div>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Header -->
78
+ <header class="gradient-bg text-white shadow-lg">
79
+ <div class="container mx-auto px-4 py-6">
80
+ <div class="flex justify-between items-center">
81
+ <div class="flex items-center space-x-2">
82
+ <i class="fas fa-heartbeat text-3xl"></i>
83
+ <h1 class="text-2xl font-bold">QR Medical</h1>
84
+ </div>
85
+ <nav>
86
+ <ul class="flex space-x-6">
87
+ <li><a href="#" class="hover:underline">Home</a></li>
88
+ <li><a href="#features" class="hover:underline">Features</a></li>
89
+ <li><a href="#how-it-works" class="hover:underline">How It Works</a></li>
90
+ </ul>
91
+ </nav>
92
+ </div>
93
+ </div>
94
+ </header>
95
+
96
+ <!-- Hero Section -->
97
+ <section class="gradient-bg text-white py-16">
98
+ <div class="container mx-auto px-4 text-center">
99
+ <h2 class="text-4xl font-bold mb-6">Secure Medical Record Sharing</h2>
100
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Record your medical information, generate a secure QR code, and share it with healthcare providers instantly.</p>
101
+ <button id="getStartedBtn" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition duration-300 pulse-animation">
102
+ Get Started <i class="fas fa-arrow-right ml-2"></i>
103
+ </button>
104
+ </div>
105
+ </section>
106
+
107
+ <!-- Main Content -->
108
+ <main class="container mx-auto px-4 py-12">
109
+ <!-- Recording Section -->
110
+ <section id="recordingSection" class="bg-white rounded-xl shadow-md p-8 mb-12">
111
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Record Your Medical Information</h2>
112
+
113
+ <div class="grid md:grid-cols-2 gap-8">
114
+ <div>
115
+ <div class="mb-6">
116
+ <label class="block text-gray-700 font-medium mb-2" for="patientName">Patient Name</label>
117
+ <input type="text" id="patientName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter patient name">
118
+ </div>
119
+
120
+ <div class="mb-6">
121
+ <label class="block text-gray-700 font-medium mb-2">Medical Information</label>
122
+ <textarea id="medicalInfo" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter medical details or record audio below"></textarea>
123
+ </div>
124
+
125
+ <div class="mb-6">
126
+ <label class="block text-gray-700 font-medium mb-2">Record Audio</label>
127
+ <div class="flex items-center space-x-4">
128
+ <button id="recordBtn" class="bg-red-500 hover:bg-red-600 text-white py-2 px-6 rounded-full flex items-center">
129
+ <i class="fas fa-microphone mr-2"></i> Record
130
+ </button>
131
+ <button id="stopBtn" disabled class="bg-gray-500 text-white py-2 px-6 rounded-full flex items-center opacity-50">
132
+ <i class="fas fa-stop mr-2"></i> Stop
133
+ </button>
134
+ </div>
135
+ <div id="recordingIndicator" class="mt-4 hidden">
136
+ <div class="recording-wave rounded-full"></div>
137
+ <p class="text-sm text-gray-500 mt-2">Recording in progress...</p>
138
+ </div>
139
+ <p id="permissionHelp" class="text-sm text-gray-500 mt-2 hidden">
140
+ <i class="fas fa-info-circle mr-1"></i> If microphone access is blocked, check your browser permissions.
141
+ </p>
142
+ </div>
143
+
144
+ <div class="mb-6">
145
+ <label class="block text-gray-700 font-medium mb-2">Audio Playback</label>
146
+ <audio id="audioPlayback" controls class="w-full hidden"></audio>
147
+ <p id="noAudioMessage" class="text-gray-500">No audio recorded yet.</p>
148
+ </div>
149
+
150
+ <button id="generateQRBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-medium transition duration-300">
151
+ Generate QR Code <i class="fas fa-qrcode ml-2"></i>
152
+ </button>
153
+ </div>
154
+
155
+ <div class="flex flex-col items-center justify-center">
156
+ <div id="qrCodeContainer" class="qr-container bg-white p-4 rounded-lg shadow-md mb-4 hidden">
157
+ <div id="qrCode" class="mx-auto"></div>
158
+ </div>
159
+ <div id="patientInfoDisplay" class="text-center mt-4 hidden">
160
+ <h3 class="font-bold text-lg" id="displayName"></h3>
161
+ <p class="text-gray-600" id="displayInfo"></p>
162
+ </div>
163
+ <button id="downloadQRBtn" class="bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-full hidden mt-4">
164
+ <i class="fas fa-download mr-2"></i> Download QR
165
+ </button>
166
+ </div>
167
+ </div>
168
+ </section>
169
+
170
+ <!-- Features Section -->
171
+ <section id="features" class="mb-12">
172
+ <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Why Use QR Medical?</h2>
173
+ <div class="grid md:grid-cols-3 gap-8">
174
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">
175
+ <div class="text-blue-600 text-4xl mb-4">
176
+ <i class="fas fa-shield-alt"></i>
177
+ </div>
178
+ <h3 class="font-bold text-xl mb-2">Secure Sharing</h3>
179
+ <p class="text-gray-600">Your medical information is securely encoded in the QR code and can only be accessed by authorized healthcare providers.</p>
180
+ </div>
181
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">
182
+ <div class="text-blue-600 text-4xl mb-4">
183
+ <i class="fas fa-clock"></i>
184
+ </div>
185
+ <h3 class="font-bold text-xl mb-2">Quick Access</h3>
186
+ <p class="text-gray-600">Healthcare providers can instantly access your medical information by scanning the QR code, saving critical time in emergencies.</p>
187
+ </div>
188
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">
189
+ <div class="text-blue-600 text-4xl mb-4">
190
+ <i class="fas fa-notes-medical"></i>
191
+ </div>
192
+ <h3 class="font-bold text-xl mb-2">Comprehensive Records</h3>
193
+ <p class="text-gray-600">Include both text and audio recordings to provide complete medical information to your healthcare team.</p>
194
+ </div>
195
+ </div>
196
+ </section>
197
+
198
+ <!-- How It Works Section -->
199
+ <section id="how-it-works" class="bg-white rounded-xl shadow-md p-8">
200
+ <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">How It Works</h2>
201
+ <div class="space-y-8">
202
+ <div class="flex flex-col md:flex-row items-center">
203
+ <div class="bg-blue-100 text-blue-800 rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold mb-4 md:mb-0 md:mr-6">1</div>
204
+ <div class="flex-1">
205
+ <h3 class="font-bold text-xl mb-2">Record Your Information</h3>
206
+ <p class="text-gray-600">Enter your medical details or record an audio message describing your condition, medications, allergies, or other important health information.</p>
207
+ </div>
208
+ </div>
209
+ <div class="flex flex-col md:flex-row items-center">
210
+ <div class="bg-blue-100 text-blue-800 rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold mb-4 md:mb-0 md:mr-6">2</div>
211
+ <div class="flex-1">
212
+ <h3 class="font-bold text-xl mb-2">Generate QR Code</h3>
213
+ <p class="text-gray-600">Click the "Generate QR Code" button to create a personalized QR code containing your medical information.</p>
214
+ </div>
215
+ </div>
216
+ <div class="flex flex-col md:flex-row items-center">
217
+ <div class="bg-blue-100 text-blue-800 rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold mb-4 md:mb-0 md:mr-6">3</div>
218
+ <div class="flex-1">
219
+ <h3 class="font-bold text-xl mb-2">Share With Providers</h3>
220
+ <p class="text-gray-600">Download or print the QR code and share it with your healthcare providers. They can scan it to access your medical information instantly.</p>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </section>
225
+ </main>
226
+
227
+ <!-- Footer -->
228
+ <footer class="bg-gray-800 text-white py-8">
229
+ <div class="container mx-auto px-4">
230
+ <div class="flex flex-col md:flex-row justify-between items-center">
231
+ <div class="mb-4 md:mb-0">
232
+ <div class="flex items-center space-x-2">
233
+ <i class="fas fa-heartbeat text-2xl"></i>
234
+ <h2 class="text-xl font-bold">QR Medical</h2>
235
+ </div>
236
+ <p class="text-gray-400 mt-2">Secure medical record sharing made simple.</p>
237
+ </div>
238
+ <div class="flex space-x-6">
239
+ <a href="#" class="hover:text-blue-400"><i class="fab fa-facebook-f"></i></a>
240
+ <a href="#" class="hover:text-blue-400"><i class="fab fa-twitter"></i></a>
241
+ <a href="#" class="hover:text-blue-400"><i class="fab fa-linkedin-in"></i></a>
242
+ </div>
243
+ </div>
244
+ <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400">
245
+ <p>&copy; 2023 QR Medical. All rights reserved.</p>
246
+ </div>
247
+ </div>
248
+ </footer>
249
+
250
+ <script>
251
+ document.addEventListener('DOMContentLoaded', function() {
252
+ // DOM Elements
253
+ const recordBtn = document.getElementById('recordBtn');
254
+ const stopBtn = document.getElementById('stopBtn');
255
+ const recordingIndicator = document.getElementById('recordingIndicator');
256
+ const audioPlayback = document.getElementById('audioPlayback');
257
+ const noAudioMessage = document.getElementById('noAudioMessage');
258
+ const generateQRBtn = document.getElementById('generateQRBtn');
259
+ const qrCodeContainer = document.getElementById('qrCodeContainer');
260
+ const qrCode = document.getElementById('qrCode');
261
+ const downloadQRBtn = document.getElementById('downloadQRBtn');
262
+ const patientInfoDisplay = document.getElementById('patientInfoDisplay');
263
+ const displayName = document.getElementById('displayName');
264
+ const displayInfo = document.getElementById('displayInfo');
265
+ const patientName = document.getElementById('patientName');
266
+ const medicalInfo = document.getElementById('medicalInfo');
267
+ const getStartedBtn = document.getElementById('getStartedBtn');
268
+ const permissionModal = document.getElementById('permissionModal');
269
+ const cancelPermissionBtn = document.getElementById('cancelPermissionBtn');
270
+ const retryPermissionBtn = document.getElementById('retryPermissionBtn');
271
+ const permissionHelp = document.getElementById('permissionHelp');
272
+
273
+ // Variables
274
+ let mediaRecorder;
275
+ let audioChunks = [];
276
+ let audioBlob;
277
+ let audioUrl;
278
+
279
+ // Event Listeners
280
+ getStartedBtn.addEventListener('click', function() {
281
+ document.getElementById('recordingSection').scrollIntoView({ behavior: 'smooth' });
282
+ });
283
+
284
+ recordBtn.addEventListener('click', startRecording);
285
+ stopBtn.addEventListener('click', stopRecording);
286
+ generateQRBtn.addEventListener('click', generateQRCode);
287
+ downloadQRBtn.addEventListener('click', downloadQRCode);
288
+ cancelPermissionBtn.addEventListener('click', closePermissionModal);
289
+ retryPermissionBtn.addEventListener('click', retryPermission);
290
+
291
+ // Functions
292
+ async function startRecording() {
293
+ try {
294
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
295
+ handleRecordingStart(stream);
296
+ } catch (err) {
297
+ if (err.name === 'NotAllowedError') {
298
+ showPermissionModal();
299
+ permissionHelp.classList.remove('hidden');
300
+ } else {
301
+ alert('Error accessing microphone: ' + err.message);
302
+ }
303
+ }
304
+ }
305
+
306
+ function handleRecordingStart(stream) {
307
+ mediaRecorder = new MediaRecorder(stream);
308
+
309
+ mediaRecorder.ondataavailable = function(e) {
310
+ if (e.data.size > 0) {
311
+ audioChunks.push(e.data);
312
+ }
313
+ };
314
+
315
+ mediaRecorder.onstop = function() {
316
+ audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
317
+ audioUrl = URL.createObjectURL(audioBlob);
318
+ audioPlayback.src = audioUrl;
319
+ audioPlayback.classList.remove('hidden');
320
+ noAudioMessage.classList.add('hidden');
321
+ };
322
+
323
+ mediaRecorder.start();
324
+ audioChunks = [];
325
+
326
+ recordBtn.disabled = true;
327
+ stopBtn.disabled = false;
328
+ recordingIndicator.classList.remove('hidden');
329
+
330
+ // Change button styles
331
+ recordBtn.classList.remove('bg-red-500', 'hover:bg-red-600');
332
+ recordBtn.classList.add('bg-gray-500', 'hover:bg-gray-600');
333
+ stopBtn.classList.remove('bg-gray-500', 'opacity-50');
334
+ stopBtn.classList.add('bg-red-500', 'hover:bg-red-600');
335
+ }
336
+
337
+ function stopRecording() {
338
+ if (mediaRecorder && mediaRecorder.state !== 'inactive') {
339
+ mediaRecorder.stop();
340
+
341
+ // Stop all tracks in the stream
342
+ mediaRecorder.stream.getTracks().forEach(track => track.stop());
343
+
344
+ recordBtn.disabled = false;
345
+ stopBtn.disabled = true;
346
+ recordingIndicator.classList.add('hidden');
347
+
348
+ // Reset button styles
349
+ recordBtn.classList.add('bg-red-500', 'hover:bg-red-600');
350
+ recordBtn.classList.remove('bg-gray-500', 'hover:bg-gray-600');
351
+ stopBtn.classList.add('bg-gray-500', 'opacity-50');
352
+ stopBtn.classList.remove('bg-red-500', 'hover:bg-red-600');
353
+ }
354
+ }
355
+
356
+ function showPermissionModal() {
357
+ permissionModal.style.display = 'flex';
358
+ }
359
+
360
+ function closePermissionModal() {
361
+ permissionModal.style.display = 'none';
362
+ }
363
+
364
+ function retryPermission() {
365
+ closePermissionModal();
366
+ startRecording();
367
+ }
368
+
369
+ function generateQRCode() {
370
+ if (!patientName.value.trim() && !medicalInfo.value.trim() && !audioBlob) {
371
+ alert('Please enter patient information or record audio before generating QR code.');
372
+ return;
373
+ }
374
+
375
+ // Create data object
376
+ const data = {
377
+ name: patientName.value.trim(),
378
+ info: medicalInfo.value.trim(),
379
+ audio: audioBlob ? 'audio_available' : null
380
+ };
381
+
382
+ // Convert to JSON string
383
+ const jsonData = JSON.stringify(data);
384
+
385
+ // Generate QR code
386
+ const qr = qrcode(0, 'L');
387
+ qr.addData(jsonData);
388
+ qr.make();
389
+
390
+ // Clear previous QR code
391
+ qrCode.innerHTML = '';
392
+
393
+ // Create QR code image
394
+ const qrImg = qr.createImgTag(5);
395
+ qrCode.innerHTML = qrImg;
396
+
397
+ // Show QR code and patient info
398
+ qrCodeContainer.classList.remove('hidden');
399
+ patientInfoDisplay.classList.remove('hidden');
400
+ downloadQRBtn.classList.remove('hidden');
401
+
402
+ // Update displayed info
403
+ displayName.textContent = data.name || 'Anonymous Patient';
404
+ displayInfo.textContent = data.info || 'Medical information available via QR code';
405
+
406
+ // Scroll to QR code
407
+ qrCodeContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
408
+ }
409
+
410
+ function downloadQRCode() {
411
+ if (!qrCodeContainer.classList.contains('hidden')) {
412
+ const canvas = document.querySelector('#qrCode canvas');
413
+ const dataURL = canvas.toDataURL('image/png');
414
+
415
+ const link = document.createElement('a');
416
+ link.download = `QRMedical_${patientName.value || 'patient'}.png`;
417
+ link.href = dataURL;
418
+ link.click();
419
+ }
420
+ }
421
+ });
422
+ </script>
423
+ <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=Mohabedalgani/qrrecord" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
424
+ </html>