|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
['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]; |
|
|
|
|
|
|
|
|
if (!file.name.match(/\.(bin|hex)$/i)) { |
|
|
addLog('[ERROR] Invalid file type. Please upload .bin or .hex files', 'red'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
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')}`; |
|
|
} |
|
|
|
|
|
|
|
|
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) { |
|
|
|
|
|
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(() => { |
|
|
|
|
|
progress = step.progress; |
|
|
progressBar.style.width = `${progress}%`; |
|
|
progressLabel.textContent = step.text; |
|
|
addLog(step.text); |
|
|
|
|
|
|
|
|
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> |
