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