Hugging Face's logo

Spaces:
S-Dreamer
/
netagotchi-web-flasher
Running

App Files Community
S-Dreamer commited on
Commit
7c2bc33
·
verified ·
1 Parent(s): 68358f6

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +441 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Netagotchi Web Flasher
3
- emoji: 🏢
4
- colorFrom: red
5
  colorTo: purple
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: netagotchi-web-flasher
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,441 @@
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>Netagotchi Firmware Web Flasher</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
+ 'netagotchi-purple': '#7e22ce',
15
+ 'netagotchi-blue': '#3b82f6',
16
+ 'netagotchi-dark': '#0f172a',
17
+ 'netagotchi-light': '#e0e7ff'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style type="text/css">
24
+ .glow-box {
25
+ box-shadow: 0 0 15px rgba(126, 34, 206, 0.7);
26
+ border-radius: 12px;
27
+ border: 1px solid rgba(126, 34, 206, 0.3);
28
+ animation: pulse-glow 3s infinite;
29
+ }
30
+
31
+ @keyframes pulse-glow {
32
+ 0% { box-shadow: 0 0 15px rgba(126, 34, 206, 0.7); }
33
+ 50% { box-shadow: 0 0 25px rgba(126, 34, 206, 0.9); }
34
+ 100% { box-shadow: 0 0 15px rgba(126, 34, 206, 0.7); }
35
+ }
36
+
37
+ .terminal-scroll {
38
+ scrollbar-width: thin;
39
+ scrollbar-color: rgba(126, 34, 206, 0.5) #1e293b;
40
+ }
41
+
42
+ .terminal-scroll::-webkit-scrollbar {
43
+ width: 8px;
44
+ }
45
+
46
+ .terminal-scroll::-webkit-scrollbar-track {
47
+ background: #1e293b;
48
+ border-radius: 8px;
49
+ }
50
+
51
+ .terminal-scroll::-webkit-scrollbar-thumb {
52
+ background-color: rgba(126, 34, 206, 0.5);
53
+ border-radius: 8px;
54
+ }
55
+
56
+ .device-animation {
57
+ position: relative;
58
+ overflow: hidden;
59
+ }
60
+
61
+ .device-animation::before {
62
+ content: "";
63
+ position: absolute;
64
+ top: -50%;
65
+ left: -50%;
66
+ width: 200%;
67
+ height: 200%;
68
+ background: linear-gradient(
69
+ to right,
70
+ rgba(126, 34, 206, 0) 0%,
71
+ rgba(126, 34, 206, 0.3) 50%,
72
+ rgba(126, 34, 206, 0) 100%
73
+ );
74
+ transform: rotate(45deg);
75
+ animation: device-scanner 2s linear infinite;
76
+ }
77
+
78
+ @keyframes device-scanner {
79
+ 0% { transform: rotate(45deg) translateX(-50%); }
80
+ 100% { transform: rotate(45deg) translateX(50%); }
81
+ }
82
+
83
+ .terminal-text {
84
+ font-family: Consolas, Monaco, 'Andale Mono', monospace;
85
+ }
86
+
87
+ .dropzone {
88
+ transition: all 0.3s ease;
89
+ border: 2px dashed #7e22ce;
90
+ border-radius: 10px;
91
+ background-color: rgba(126, 34, 206, 0.05);
92
+ }
93
+
94
+ .dropzone.active {
95
+ background-color: rgba(126, 34, 206, 0.15);
96
+ border-color: #3b82f6;
97
+ }
98
+ </style>
99
+ </head>
100
+ <body class="bg-netagotchi-dark text-gray-200 min-h-screen">
101
+ <div class="container mx-auto px-4 py-8">
102
+ <header class="text-center mb-12">
103
+ <div class="flex justify-center mb-6">
104
+ <div class="bg-netagotchi-purple w-16 h-16 rounded-full flex items-center justify-center">
105
+ <i class="fas fa-microchip text-white text-2xl"></i>
106
+ </div>
107
+ </div>
108
+ <h1 class="text-3xl md:text-4xl font-bold text-white mb-2">
109
+ Netagotchi <span class="text-netagotchi-purple">Firmware</span> Web Flasher
110
+ </h1>
111
+ <p class="text-netagotchi-light opacity-80 max-w-2xl mx-auto">
112
+ Easily flash firmware to your Netagotchi device through web-based interface
113
+ </p>
114
+ </header>
115
+
116
+ <div class="grid grid-cols-1 lg:grid-cols-8 gap-8 mb-12">
117
+ <!-- Device Status Panel -->
118
+ <div class="lg:col-span-3">
119
+ <div class="glow-box bg-gray-800 rounded-xl p-6 h-full">
120
+ <h2 class="text-xl font-bold text-netagotchi-purple mb-4 flex items-center gap-2">
121
+ <i class="fas fa-satellite-dish"></i> Device Status
122
+ </h2>
123
+
124
+ <div class="device-animation bg-gray-900 rounded-lg overflow-hidden mb-5 py-12 flex flex-col items-center justify-center">
125
+ <div class="bg-netagotchi-dark w-40 h-40 rounded-xl flex items-center justify-center relative mb-4">
126
+ <div class="bg-gray-800 w-28 h-28 rounded-full flex items-center justify-center relative overflow-hidden">
127
+ <div class="absolute inset-0 bg-gradient-to-br from-netagotchi-purple to-transparent opacity-30"></div>
128
+ <div class="w-20 h-20 rounded-full flex items-center justify-center border-4 border-netagotchi-purple">
129
+ <div class="w-6 h-6 rounded-full bg-netagotchi-blue animate-pulse"></div>
130
+ </div>
131
+ </div>
132
+ <div class="absolute top-0 right-0 w-5 h-5 rounded-full bg-green-500 animate-pulse"></div>
133
+ </div>
134
+ <div class="text-center">
135
+ <p class="font-bold text-lg">Netagotchi v1.2</p>
136
+ <p class="text-netagotchi-light opacity-80 text-sm">Connected: COM5</p>
137
+ </div>
138
+ </div>
139
+
140
+ <div class="bg-gray-900 rounded-lg p-4 mb-4">
141
+ <div class="flex justify-between mb-2">
142
+ <span class="text-sm">Storage:</span>
143
+ <span class="font-bold">78% Free (54MB)</span>
144
+ </div>
145
+ <div class="w-full bg-gray-700 rounded-full h-2 overflow-hidden">
146
+ <div class="h-full bg-netagotchi-purple" style="width: 22%"></div>
147
+ </div>
148
+ </div>
149
+
150
+ <div class="grid grid-cols-2 gap-4 mt-6">
151
+ <div class="bg-gray-900 rounded-lg p-3 flex flex-col items-center">
152
+ <div class="text-netagotchi-blue text-lg mb-1">
153
+ <i class="fas fa-microchip"></i>
154
+ </div>
155
+ <div class="text-sm font-semibold">v1.0.5</div>
156
+ <div class="text-xs opacity-70">Current FW</div>
157
+ </div>
158
+
159
+ <div class="bg-gray-900 rounded-lg p-3 flex flex-col items-center">
160
+ <div class="text-green-400 text-lg mb-1">
161
+ <i class="fas fa-sync-alt"></i>
162
+ </div>
163
+ <div class="text-sm font-semibold">Ready</div>
164
+ <div class="text-xs opacity-70">Device Status</div>
165
+ </div>
166
+
167
+ <div class="bg-gray-900 rounded-lg p-3 flex flex-col items-center">
168
+ <div class="text-yellow-400 text-lg mb-1">
169
+ <i class="fas fa-plug"></i>
170
+ </div>
171
+ <div class="text-sm font-semibold">USB</div>
172
+ <div class="text-xs opacity-70">Connection</div>
173
+ </div>
174
+
175
+ <div class="bg-gray-900 rounded-lg p-3 flex flex-col items-center">
176
+ <div class="text-purple-400 text-lg mb-1">
177
+ <i class="fas fa-battery-three-quarters"></i>
178
+ </div>
179
+ <div class="text-sm font-semibold">63%</div>
180
+ <div class="text-xs opacity-70">Battery</div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Flashing Control Panel -->
187
+ <div class="lg:col-span-5">
188
+ <div class="glow-box bg-gray-800 rounded-xl p-6 h-full">
189
+ <h2 class="text-xl font-bold text-netagotchi-purple mb-4 flex items-center gap-2">
190
+ <i class="fas fa-bolt"></i> Firmware Flasher
191
+ </h2>
192
+
193
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
194
+ <div>
195
+ <h3 class="font-semibold mb-3 flex items-center gap-2">
196
+ <i class="fas fa-file-arrow-up"></i> Select Firmware
197
+ </h3>
198
+ <div id="dropzone" class="dropzone p-8 text-center cursor-pointer flex flex-col items-center justify-center h-64">
199
+ <div class="text-netagotchi-purple mb-3">
200
+ <i class="fas fa-cloud-upload-alt text-4xl"></i>
201
+ </div>
202
+ <p class="font-semibold mb-1">Drag & Drop Firmware File</p>
203
+ <p class="text-sm opacity-80 mb-3">or click to browse</p>
204
+ <div class="text-xs opacity-70">Supported formats: .bin, .hex</div>
205
+ <input type="file" id="firmware-input" class="hidden" accept=".bin,.hex">
206
+ </div>
207
+ </div>
208
+
209
+ <div>
210
+ <h3 class="font-semibold mb-3 flex items-center gap-2">
211
+ <i class="fas fa-tools"></i> Flashing Options
212
+ </h3>
213
+ <div class="bg-gray-900 rounded-lg p-4 mb-4">
214
+ <div class="mb-3">
215
+ <label class="flex items-center gap-2 cursor-pointer">
216
+ <input type="checkbox" class="mr-2 h-4 w-4 text-netagotchi-purple rounded bg-gray-700 border-transparent focus:ring-0" checked>
217
+ <span class="text-sm">Verify after flashing</span>
218
+ </label>
219
+ </div>
220
+ <div class="mb-3">
221
+ <label class="flex items-center gap-2 cursor-pointer">
222
+ <input type="checkbox" class="mr-2 h-4 w-4 text-netagotchi-purple rounded bg-gray-700 border-transparent focus:ring-0" checked>
223
+ <span class="text-sm">Backup current firmware</span>
224
+ </label>
225
+ </div>
226
+ <div class="mb-3">
227
+ <label class="flex items-center gap-2 cursor-pointer">
228
+ <input type="checkbox" class="mr-2 h-4 w-4 text-netagotchi-purple rounded bg-gray-700 border-transparent focus:ring-0">
229
+ <span class="text-sm">Format storage</span>
230
+ </label>
231
+ </div>
232
+ <div class="mt-4">
233
+ <label class="block text-sm mb-2">Flash Mode:</label>
234
+ <div class="flex gap-2">
235
+ <button class="bg-netagotchi-purple px-3 py-1 rounded text-sm font-semibold">Standard</button>
236
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm font-semibold">Quick</button>
237
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm font-semibold">Safe</button>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <h3 class="font-semibold mb-3 flex items-center gap-2">
243
+ <i class="fas fa-history"></i> Flash Progress
244
+ </h3>
245
+ <div class="bg-gray-900 rounded-lg p-4">
246
+ <div id="progress-label" class="text-sm mb-1">Ready to flash...</div>
247
+ <div class="w-full bg-gray-700 rounded-full h-3 overflow-hidden mb-3">
248
+ <div id="progress-bar" class="h-full bg-netagotchi-purple transition-all duration-300" style="width: 0%"></div>
249
+ </div>
250
+ <div class="grid grid-cols-3 gap-2">
251
+ <button id="flash-btn" class="bg-netagotchi-purple hover:bg-netagotchi-blue transition-colors py-2 px-4 rounded-lg font-semibold">
252
+ <i class="fas fa-bolt mr-1"></i> Flash Now
253
+ </button>
254
+ <button class="bg-gray-700 hover:bg-gray-600 transition-colors py-2 px-4 rounded-lg font-semibold">
255
+ <i class="fas fa-sync-alt mr-1"></i> Refresh
256
+ </button>
257
+ <button class="bg-gray-700 hover:bg-gray-600 transition-colors py-2 px-4 rounded-lg font-semibold">
258
+ <i class="fas fa-info-circle mr-1"></i> Info
259
+ </button>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <h3 class="font-semibold mt-6 mb-3 flex items-center gap-2">
266
+ <i class="fas fa-terminal"></i> Flashing Log
267
+ </h3>
268
+ <div class="bg-gray-900 rounded-lg p-4 terminal-text terminal-scroll h-32 overflow-y-auto">
269
+ <div id="log-output" class="opacity-90">
270
+ <div class="text-green-400">[INFO] Device connected: Netagotchi v1.2 </div>
271
+ <div class="text-green-400">[INFO] Firmware flasher initialized</div>
272
+ <div class="text-yellow-400">[STATUS] Waiting for firmware selection...</div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="text-center text-xs text-gray-500 mt-12">
280
+ <p>Netagotchi Web Flasher v1.0 • Use at your own risk • Backup device before flashing</p>
281
+ <p class="mt-2">Official Firmware Repository: <a href="#" class="text-netagotchi-blue hover:underline">netagotchi.io/firmware</a></p>
282
+ </div>
283
+ </div>
284
+
285
+ <script>
286
+ // Dropzone functionality
287
+ const dropzone = document.getElementById('dropzone');
288
+ const fileInput = document.getElementById('firmware-input');
289
+ const flashBtn = document.getElementById('flash-btn');
290
+ const progressBar = document.getElementById('progress-bar');
291
+ const progressLabel = document.getElementById('progress-label');
292
+ const logOutput = document.getElementById('log-output');
293
+
294
+ // Add drag and drop event listeners
295
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
296
+ dropzone.addEventListener(eventName, preventDefaults, false);
297
+ });
298
+
299
+ function preventDefaults(e) {
300
+ e.preventDefault();
301
+ e.stopPropagation();
302
+ }
303
+
304
+ ['dragenter', 'dragover'].forEach(eventName => {
305
+ dropzone.addEventListener(eventName, () => {
306
+ dropzone.classList.add('active');
307
+ }, false);
308
+ });
309
+
310
+ ['dragleave', 'drop'].forEach(eventName => {
311
+ dropzone.addEventListener(eventName, () => {
312
+ dropzone.classList.remove('active');
313
+ }, false);
314
+ });
315
+
316
+ dropzone.addEventListener('drop', handleDrop, false);
317
+
318
+ function handleDrop(e) {
319
+ const dt = e.dataTransfer;
320
+ const files = dt.files;
321
+ handleFiles(files);
322
+ }
323
+
324
+ dropzone.addEventListener('click', () => {
325
+ fileInput.click();
326
+ });
327
+
328
+ fileInput.addEventListener('change', () => {
329
+ if (fileInput.files.length) {
330
+ handleFiles(fileInput.files);
331
+ }
332
+ });
333
+
334
+ function handleFiles(files) {
335
+ const file = files[0];
336
+
337
+ // Check if it's a firmware file
338
+ if (!file.name.match(/\.(bin|hex)$/i)) {
339
+ addLog('[ERROR] Invalid file type. Please upload .bin or .hex files', 'red');
340
+ return;
341
+ }
342
+
343
+ // Simulate file handling
344
+ dropzone.innerHTML = `
345
+ <div class="text-green-400 mb-3">
346
+ <i class="fas fa-check-circle text-3xl"></i>
347
+ </div>
348
+ <p class="font-semibold">${file.name}</p>
349
+ <p class="text-xs opacity-70 mt-1">${formatFileSize(file.size)}</p>
350
+ <p class="text-xs mt-3 text-netagotchi-purple">Ready to flash</p>
351
+ `;
352
+
353
+ flashBtn.classList.remove('bg-netagotchi-purple');
354
+ flashBtn.classList.add('bg-green-500');
355
+
356
+ addLog('[SUCCESS] Firmware file loaded: ' + file.name);
357
+ addLog('[STATUS] Ready to flash firmware...');
358
+ }
359
+
360
+ function formatFileSize(bytes) {
361
+ if (bytes === 0) return '0 Bytes';
362
+ const k = 1024;
363
+ const sizes = ['Bytes', 'KB', 'MB'];
364
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
365
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
366
+ }
367
+
368
+ function addLog(message, color = 'yellow') {
369
+ const colors = {
370
+ yellow: 'text-yellow-400',
371
+ red: 'text-red-400',
372
+ green: 'text-green-400',
373
+ blue: 'text-blue-400'
374
+ };
375
+
376
+ const logLine = document.createElement('div');
377
+ logLine.classList.add(colors[color]);
378
+ logLine.textContent = `[${getCurrentTime()}] ${message}`;
379
+ logOutput.appendChild(logLine);
380
+ logOutput.scrollTop = logOutput.scrollHeight;
381
+ }
382
+
383
+ function getCurrentTime() {
384
+ const now = new Date();
385
+ return `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
386
+ }
387
+
388
+ // Flash button functionality
389
+ flashBtn.addEventListener('click', startFlashing);
390
+
391
+ function startFlashing() {
392
+ if (!dropzone.querySelector('.fa-check-circle')) {
393
+ addLog('[ERROR] Please select a firmware file first', 'red');
394
+ return;
395
+ }
396
+
397
+ flashBtn.disabled = true;
398
+ flashBtn.classList.remove('bg-green-500');
399
+ flashBtn.classList.add('bg-gray-600', 'cursor-not-allowed');
400
+ flashBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Flashing...';
401
+
402
+ let progress = 0;
403
+ const steps = [
404
+ {text: 'Establishing connection...', duration: 1000, progress: 10},
405
+ {text: 'Uploading firmware...', duration: 3000, progress: 45},
406
+ {text: 'Writing to flash memory...', duration: 5000, progress: 70},
407
+ {text: 'Verifying firmware...', duration: 3000, progress: 95},
408
+ {text: 'Finalizing...', duration: 1000, progress: 100},
409
+ ];
410
+
411
+ simulateFlashing(0);
412
+
413
+ function simulateFlashing(stepIndex) {
414
+ if (stepIndex >= steps.length) {
415
+ // Flash complete
416
+ setTimeout(() => {
417
+ flashBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Flash Complete!';
418
+ flashBtn.classList.remove('bg-gray-600', 'cursor-not-allowed');
419
+ flashBtn.classList.add('bg-green-500');
420
+ flashBtn.disabled = false;
421
+ addLog('[SUCCESS] Firmware flash completed successfully!', 'green');
422
+ }, 1000);
423
+ return;
424
+ }
425
+
426
+ const step = steps[stepIndex];
427
+ setTimeout(() => {
428
+ // Update UI
429
+ progress = step.progress;
430
+ progressBar.style.width = `${progress}%`;
431
+ progressLabel.textContent = step.text;
432
+ addLog(step.text);
433
+
434
+ // Move to next step
435
+ simulateFlashing(stepIndex + 1);
436
+ }, step.duration);
437
+ }
438
+ }
439
+ </script>
440
+ <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=S-Dreamer/netagotchi-web-flasher" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
441
+ </html>