netagotchi-web-flasher / troubleshooting.html
S-Dreamer's picture
add internal pages - Follow Up Deployment
1b7a46e verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Troubleshooting - 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);
}
.faq-item {
border-bottom: 1px solid rgba(126, 34, 206, 0.2);
}
.faq-item:last-child {
border-bottom: none;
}
</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-wrench text-white text-2xl"></i>
</div>
</div>
<h1 class="text-3xl md:text-4xl font-bold text-white mb-2">
<span class="text-netagotchi-purple">Troubleshooting</span> Guide
</h1>
<p class="text-netagotchi-light opacity-80 max-w-2xl mx-auto">
Common issues and solutions for Netagotchi firmware flashing
</p>
</header>
<div class="glow-box bg-gray-800 rounded-xl p-6 mb-8">
<h2 class="text-xl font-bold text-netagotchi-purple mb-6">Frequently Asked Questions</h2>
<div class="space-y-6">
<!-- FAQ Item 1 -->
<div class="faq-item pb-6">
<h3 class="font-bold text-lg mb-2 flex items-center gap-2">
<i class="fas fa-question-circle text-netagotchi-purple"></i>
Device not detected
</h3>
<p class="text-netagotchi-light opacity-90 mb-3">
If your device isn't being detected by the web flasher:
</p>
<ul class="list-disc list-inside text-sm space-y-1 ml-4">
<li>Ensure USB cable is properly connected</li>
<li>Try a different USB port on your computer</li>
<li>Install proper USB drivers for your device</li>
<li>Check if device is in bootloader mode (hold BOOT button while connecting)</li>
</ul>
</div>
<!-- FAQ Item 2 -->
<div class="faq-item pb-6">
<h3 class="font-bold text-lg mb-2 flex items-center gap-2">
<i class="fas fa-question-circle text-netagotchi-purple"></i>
Flashing fails or gets stuck
</h3>
<p class="text-netagotchi-light opacity-90 mb-3">
Common reasons for flashing failures:
</p>
<ul class="list-disc list-inside text-sm space-y-1 ml-4">
<li>Poor USB connection or cable quality</li>
<li>Insufficient power supply to the device</li>
<li>Corrupted firmware file - try downloading again</li>
<li>Browser compatibility issues (use Chrome/Edge)</li>
</ul>
</div>
<!-- FAQ Item 3 -->
<div class="faq-item pb-6">
<h3 class="font-bold text-lg mb-2 flex items-center gap-2">
<i class="fas fa-question-circle text-netagotchi-purple"></i>
Web Serial API not available
</h3>
<p class="text-netagotchi-light opacity-90 mb-3">
The Web Serial API requires specific conditions:
</p>
<ul class="list-disc list-inside text-sm space-y-1 ml-4">
<li>Use Chrome or Edge browser (version 89+)</li>
<li>Website must be served over HTTPS (or localhost)</li>
<li>User must explicitly grant permission when prompted</li>
<li>Check browser settings for serial port permissions</li>
</ul>
</div>
<!-- FAQ Item 4 -->
<div class="faq-item pb-6">
<h3 class="font-bold text-lg mb-2 flex items-center gap-2">
<i class="fas fa-question-circle text-netagotchi-purple"></i>
Device boots but screen is blank
</h3>
<p class="text-netagotchi-light opacity-90 mb-3">
If the device powers on but shows nothing:
</p>
<ul class="list-disc list-inside text-sm space-y-1 ml-4">
<li>Firmware may not be compatible with your device model</li>
<li>Check display connections on the hardware</li>
<li>Try re-flashing with different firmware version</li>
<li>Ensure proper power supply (battery charged if applicable)</li>
</ul>
</div>
</div>
</div>
<!-- Navigation Footer -->
<div class="flex justify-center gap-6 mt-8">
<a href="index.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
<i class="fas fa-home mr-1"></i> Home
</a>
<a href="devices.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
<i class="fas fa-microchip mr-1"></i> Devices
</a>
<a href="about.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
<i class="fas fa-info-circle mr-1"></i> About
</a>
</div>
</div>
<script>
// Navigation active state
const currentPage = window.location.pathname.split('/').pop();
document.querySelectorAll('a[href="' + currentPage + '"]').forEach(link => {
link.classList.add('text-netagotchi-purple', 'font-semibold');
link.classList.remove('hover:text-netagotchi-purple');
});
</script>
</body>
</html>