add internal pages - Follow Up Deployment
Browse files- about.html +134 -0
- devices.html +170 -0
- index.html +22 -0
- prompts.txt +2 -1
- troubleshooting.html +150 -0
about.html
ADDED
@@ -0,0 +1,134 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>About - 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 |
+
}
|
29 |
+
</style>
|
30 |
+
</head>
|
31 |
+
<body class="bg-netagotchi-dark text-gray-200 min-h-screen">
|
32 |
+
<div class="container mx-auto px-4 py-8">
|
33 |
+
<header class="text-center mb-12">
|
34 |
+
<div class="flex justify-center mb-6">
|
35 |
+
<div class="bg-netagotchi-purple w-16 h-16 rounded-full flex items-center justify-center">
|
36 |
+
<i class="fas fa-info-circle text-white text-2xl"></i>
|
37 |
+
</div>
|
38 |
+
</div>
|
39 |
+
<h1 class="text-3xl md:text-4xl font-bold text-white mb-2">
|
40 |
+
About <span class="text-netagotchi-purple">Netagotchi</span>
|
41 |
+
</h1>
|
42 |
+
<p class="text-netagotchi-light opacity-80 max-w-2xl mx-auto">
|
43 |
+
Learn more about the Netagotchi firmware and web flasher project
|
44 |
+
</p>
|
45 |
+
</header>
|
46 |
+
|
47 |
+
<div class="glow-box bg-gray-800 rounded-xl p-6 mb-8">
|
48 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
49 |
+
<div>
|
50 |
+
<h2 class="text-xl font-bold text-netagotchi-purple mb-4">Project Overview</h2>
|
51 |
+
<p class="text-netagotchi-light opacity-90 mb-4">
|
52 |
+
Netagotchi is an open-source firmware project designed for ESP32-based devices,
|
53 |
+
bringing retro-inspired digital pet functionality to modern hardware platforms.
|
54 |
+
</p>
|
55 |
+
<p class="text-netagotchi-light opacity-90 mb-4">
|
56 |
+
The web-based flasher provides an easy way to install and update Netagotchi firmware
|
57 |
+
without requiring complex desktop software or command-line tools.
|
58 |
+
</p>
|
59 |
+
<div class="bg-gray-900 rounded-lg p-4 mt-4">
|
60 |
+
<h3 class="font-bold mb-2">Key Features:</h3>
|
61 |
+
<ul class="list-disc list-inside text-sm space-y-1">
|
62 |
+
<li>Web-based firmware flashing (no install required)</li>
|
63 |
+
<li>Support for multiple ESP32 devices</li>
|
64 |
+
<li>Real-time progress tracking</li>
|
65 |
+
<li>Automatic device detection</li>
|
66 |
+
<li>Firmware verification and backup</li>
|
67 |
+
</ul>
|
68 |
+
</div>
|
69 |
+
</div>
|
70 |
+
|
71 |
+
<div>
|
72 |
+
<h2 class="text-xl font-bold text-netagotchi-purple mb-4">Technical Details</h2>
|
73 |
+
<div class="bg-gray-900 rounded-lg p-4 mb-4">
|
74 |
+
<h3 class="font-bold mb-2">Built With:</h3>
|
75 |
+
<ul class="list-disc list-inside text-sm space-y-1">
|
76 |
+
<li>Web Serial API for browser-based communication</li>
|
77 |
+
<li>ESP-IDF framework compatibility</li>
|
78 |
+
<li>Modern web technologies (HTML5, CSS3, JavaScript)</li>
|
79 |
+
<li>Tailwind CSS for responsive design</li>
|
80 |
+
</ul>
|
81 |
+
</div>
|
82 |
+
|
83 |
+
<div class="bg-gray-900 rounded-lg p-4">
|
84 |
+
<h3 class="font-bold mb-2">Requirements:</h3>
|
85 |
+
<ul class="list-disc list-inside text-sm space-y-1">
|
86 |
+
<li>Chrome/Edge browser (version 89+)</li>
|
87 |
+
<li>USB connection to target device</li>
|
88 |
+
<li>Internet connection for initial load</li>
|
89 |
+
<li>Supported ESP32-based hardware</li>
|
90 |
+
</ul>
|
91 |
+
</div>
|
92 |
+
</div>
|
93 |
+
</div>
|
94 |
+
</div>
|
95 |
+
|
96 |
+
<div class="glow-box bg-gray-800 rounded-xl p-6 text-center">
|
97 |
+
<h2 class="text-xl font-bold text-netagotchi-purple mb-4">Open Source</h2>
|
98 |
+
<p class="text-netagotchi-light opacity-90 mb-4">
|
99 |
+
Netagotchi is an open-source project. Contributions, bug reports, and feature requests are welcome!
|
100 |
+
</p>
|
101 |
+
<div class="flex justify-center gap-4">
|
102 |
+
<a href="#" class="bg-netagotchi-purple hover:bg-netagotchi-blue transition-colors px-6 py-2 rounded-lg font-semibold">
|
103 |
+
<i class="fab fa-github mr-2"></i> GitHub
|
104 |
+
</a>
|
105 |
+
<a href="#" class="bg-gray-700 hover:bg-gray-600 transition-colors px-6 py-2 rounded-lg font-semibold">
|
106 |
+
<i class="fas fa-book mr-2"></i> Documentation
|
107 |
+
</a>
|
108 |
+
</div>
|
109 |
+
</div>
|
110 |
+
|
111 |
+
<!-- Navigation Footer -->
|
112 |
+
<div class="flex justify-center gap-6 mt-8">
|
113 |
+
<a href="index.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
|
114 |
+
<i class="fas fa-home mr-1"></i> Home
|
115 |
+
</a>
|
116 |
+
<a href="devices.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
|
117 |
+
<i class="fas fa-microchip mr-1"></i> Devices
|
118 |
+
</a>
|
119 |
+
<a href="troubleshooting.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
|
120 |
+
<i class="fas fa-wrench mr-1"></i> Troubleshooting
|
121 |
+
</a>
|
122 |
+
</div>
|
123 |
+
</div>
|
124 |
+
|
125 |
+
<script>
|
126 |
+
// Navigation active state
|
127 |
+
const currentPage = window.location.pathname.split('/').pop();
|
128 |
+
document.querySelectorAll('a[href="' + currentPage + '"]').forEach(link => {
|
129 |
+
link.classList.add('text-netagotchi-purple', 'font-semibold');
|
130 |
+
link.classList.remove('hover:text-netagotchi-purple');
|
131 |
+
});
|
132 |
+
</script>
|
133 |
+
</body>
|
134 |
+
</html>
|
devices.html
ADDED
@@ -0,0 +1,170 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>Supported Devices - 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 |
+
}
|
29 |
+
.device-card {
|
30 |
+
transition: all 0.3s ease;
|
31 |
+
border: 1px solid rgba(126, 34, 206, 0.2);
|
32 |
+
}
|
33 |
+
.device-card:hover {
|
34 |
+
transform: translateY(-2px);
|
35 |
+
box-shadow: 0 4px 20px rgba(126, 34, 206, 0.4);
|
36 |
+
border-color: rgba(126, 34, 206, 0.5);
|
37 |
+
}
|
38 |
+
</style>
|
39 |
+
</head>
|
40 |
+
<body class="bg-netagotchi-dark text-gray-200 min-h-screen">
|
41 |
+
<div class="container mx-auto px-4 py-8">
|
42 |
+
<header class="text-center mb-12">
|
43 |
+
<div class="flex justify-center mb-6">
|
44 |
+
<div class="bg-netagotchi-purple w-16 h-16 rounded-full flex items-center justify-center">
|
45 |
+
<i class="fas fa-microchip text-white text-2xl"></i>
|
46 |
+
</div>
|
47 |
+
</div>
|
48 |
+
<h1 class="text-3xl md:text-4xl font-bold text-white mb-2">
|
49 |
+
Supported <span class="text-netagotchi-purple">Devices</span>
|
50 |
+
</h1>
|
51 |
+
<p class="text-netagotchi-light opacity-80 max-w-2xl mx-auto">
|
52 |
+
Explore the ESP32-based devices compatible with Netagotchi firmware
|
53 |
+
</p>
|
54 |
+
</header>
|
55 |
+
|
56 |
+
<div class="glow-box bg-gray-800 rounded-xl p-6 mb-8">
|
57 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
58 |
+
<!-- Cardputer -->
|
59 |
+
<div class="device-card bg-gray-900 rounded-xl p-6">
|
60 |
+
<div class="text-center mb-4">
|
61 |
+
<div class="bg-netagotchi-purple w-20 h-20 rounded-xl flex items-center justify-center mx-auto mb-3">
|
62 |
+
<i class="fas fa-credit-card text-white text-3xl"></i>
|
63 |
+
</div>
|
64 |
+
<h3 class="font-bold text-lg mb-2">Cardputer</h3>
|
65 |
+
<p class="text-sm opacity-80">Portable keyboard computer</p>
|
66 |
+
</div>
|
67 |
+
<div class="space-y-2">
|
68 |
+
<div class="flex justify-between text-sm">
|
69 |
+
<span>ESP32-S3</span>
|
70 |
+
<span class="text-green-400">✓ Supported</span>
|
71 |
+
</div>
|
72 |
+
<div class="flex justify-between text-sm">
|
73 |
+
<span>Display</span>
|
74 |
+
<span>240x135 IPS</span>
|
75 |
+
</div>
|
76 |
+
<div class="flex justify-between text-sm">
|
77 |
+
<span>Storage</span>
|
78 |
+
<span>16MB Flash</span>
|
79 |
+
</div>
|
80 |
+
<div class="flex justify-between text-sm">
|
81 |
+
<span>Features</span>
|
82 |
+
<span>Keyboard, SD Card</span>
|
83 |
+
</div>
|
84 |
+
</div>
|
85 |
+
</div>
|
86 |
+
|
87 |
+
<!-- CYD (Cheap Yellow Display) -->
|
88 |
+
<div class="device-card bg-gray-900 rounded-xl p-6">
|
89 |
+
<div class="text-center mb-4">
|
90 |
+
<div class="bg-yellow-500 w-20 h-20 rounded-xl flex items-center justify-center mx-auto mb-3">
|
91 |
+
<i class="fas fa-display text-white text-3xl"></i>
|
92 |
+
</div>
|
93 |
+
<h3 class="font-bold text-lg mb-2">CYD</h3>
|
94 |
+
<p class="text-sm opacity-80">Cheap Yellow Display</p>
|
95 |
+
</div>
|
96 |
+
<div class="space-y-2">
|
97 |
+
<div class="flex justify-between text-sm">
|
98 |
+
<span>ESP32</span>
|
99 |
+
<span class="text-green-400">✓ Supported</span>
|
100 |
+
</div>
|
101 |
+
<div class="flex justify-between text-sm">
|
102 |
+
<span>Display</span>
|
103 |
+
<span>320x240 TFT</span>
|
104 |
+
</div>
|
105 |
+
<div class="flex justify-between text-sm">
|
106 |
+
<span>Storage</span>
|
107 |
+
<span>4MB Flash</span>
|
108 |
+
</div>
|
109 |
+
<div class="flex justify-between text-sm">
|
110 |
+
<span>Features</span>
|
111 |
+
<span>Touch, Buttons</span>
|
112 |
+
</div>
|
113 |
+
</div>
|
114 |
+
</div>
|
115 |
+
|
116 |
+
<!-- T-Embed -->
|
117 |
+
<div class="device-card bg-gray-900 rounded-xl p-6">
|
118 |
+
<div class="text-center mb-4">
|
119 |
+
<div class="bg-blue-500 w-20 h-20 rounded-xl flex items-center justify-center mx-auto mb-3">
|
120 |
+
<i class="fas fa-microchip text-white text-3xl"></i>
|
121 |
+
</div>
|
122 |
+
<h3 class="font-bold text-lg mb-2">T-Embed</h3>
|
123 |
+
<p class="text-sm opacity-80">Advanced development board</p>
|
124 |
+
</div>
|
125 |
+
<div class="space-y-2">
|
126 |
+
<div class="flex justify-between text-sm">
|
127 |
+
<span>ESP32-S3</span>
|
128 |
+
<span class="text-green-400">✓ Supported</span>
|
129 |
+
</div>
|
130 |
+
<div class="flex justify-between text-sm">
|
131 |
+
<span>Display</span>
|
132 |
+
<span>320x240 ST7789</span>
|
133 |
+
</div>
|
134 |
+
<div class="flex justify-between text-sm">
|
135 |
+
<span>Storage</span>
|
136 |
+
<span>16MB Flash</span>
|
137 |
+
</div>
|
138 |
+
<div class="flex justify-between text-sm">
|
139 |
+
<span>Features</span>
|
140 |
+
<span>Camera, PSRAM</span>
|
141 |
+
</div>
|
142 |
+
</div>
|
143 |
+
</div>
|
144 |
+
</div>
|
145 |
+
</div>
|
146 |
+
|
147 |
+
<!-- Navigation Footer -->
|
148 |
+
<div class="flex justify-center gap-6 mt-8">
|
149 |
+
<a href="index.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
|
150 |
+
<i class="fas fa-home mr-1"></i> Home
|
151 |
+
</a>
|
152 |
+
<a href="troubleshooting.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
|
153 |
+
<i class="fas fa-wrench mr-1"></i> Troubleshooting
|
154 |
+
</a>
|
155 |
+
<a href="about.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
|
156 |
+
<i class="fas fa-info-circle mr-1"></i> About
|
157 |
+
</a>
|
158 |
+
</div>
|
159 |
+
</div>
|
160 |
+
|
161 |
+
<script>
|
162 |
+
// Navigation active state
|
163 |
+
const currentPage = window.location.pathname.split('/').pop();
|
164 |
+
document.querySelectorAll('a[href="' + currentPage + '"]').forEach(link => {
|
165 |
+
link.classList.add('text-netagotchi-purple', 'font-semibold');
|
166 |
+
link.classList.remove('hover:text-netagotchi-purple');
|
167 |
+
});
|
168 |
+
</script>
|
169 |
+
</body>
|
170 |
+
</html>
|
index.html
CHANGED
@@ -280,9 +280,31 @@
|
|
280 |
<p>ESP32 Web Flasher v2.0 • Supports Cardputer, CYD, T-Embed • Use at your own risk</p>
|
281 |
<p class="mt-2">ESP32 WebSerial Flashing • Requires Chrome/Edge browser</p>
|
282 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
283 |
</div>
|
284 |
|
285 |
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
286 |
// Dropzone functionality
|
287 |
const dropzone = document.getElementById('dropzone');
|
288 |
const fileInput = document.getElementById('firmware-input');
|
|
|
280 |
<p>ESP32 Web Flasher v2.0 • Supports Cardputer, CYD, T-Embed • Use at your own risk</p>
|
281 |
<p class="mt-2">ESP32 WebSerial Flashing • Requires Chrome/Edge browser</p>
|
282 |
</div>
|
283 |
+
|
284 |
+
<!-- Navigation Footer -->
|
285 |
+
<div class="flex justify-center gap-6 mt-8 mb-4">
|
286 |
+
<a href="devices.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
|
287 |
+
<i class="fas fa-microchip mr-1"></i> Supported Devices
|
288 |
+
</a>
|
289 |
+
<a href="troubleshooting.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
|
290 |
+
<i class="fas fa-wrench mr-1"></i> Troubleshooting
|
291 |
+
</a>
|
292 |
+
<a href="about.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
|
293 |
+
<i class="fas fa-info-circle mr-1"></i> About
|
294 |
+
</a>
|
295 |
+
</div>
|
296 |
</div>
|
297 |
|
298 |
<script>
|
299 |
+
// Navigation active state
|
300 |
+
const currentPage = window.location.pathname.split('/').pop();
|
301 |
+
if (currentPage !== 'index.html' && currentPage !== '') {
|
302 |
+
document.querySelectorAll('a[href="' + currentPage + '"]').forEach(link => {
|
303 |
+
link.classList.add('text-netagotchi-purple', 'font-semibold');
|
304 |
+
link.classList.remove('hover:text-netagotchi-purple');
|
305 |
+
});
|
306 |
+
}
|
307 |
+
|
308 |
// Dropzone functionality
|
309 |
const dropzone = document.getElementById('dropzone');
|
310 |
const fileInput = document.getElementById('firmware-input');
|
prompts.txt
CHANGED
@@ -1 +1,2 @@
|
|
1 |
-
ESP32 functionality and flashing with cardputer, cyd, and T Embed
|
|
|
|
1 |
+
ESP32 functionality and flashing with cardputer, cyd, and T Embed
|
2 |
+
add internal pages
|
troubleshooting.html
ADDED
@@ -0,0 +1,150 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>Troubleshooting - 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 |
+
}
|
29 |
+
.faq-item {
|
30 |
+
border-bottom: 1px solid rgba(126, 34, 206, 0.2);
|
31 |
+
}
|
32 |
+
.faq-item:last-child {
|
33 |
+
border-bottom: none;
|
34 |
+
}
|
35 |
+
</style>
|
36 |
+
</head>
|
37 |
+
<body class="bg-netagotchi-dark text-gray-200 min-h-screen">
|
38 |
+
<div class="container mx-auto px-4 py-8">
|
39 |
+
<header class="text-center mb-12">
|
40 |
+
<div class="flex justify-center mb-6">
|
41 |
+
<div class="bg-netagotchi-purple w-16 h-16 rounded-full flex items-center justify-center">
|
42 |
+
<i class="fas fa-wrench text-white text-2xl"></i>
|
43 |
+
</div>
|
44 |
+
</div>
|
45 |
+
<h1 class="text-3xl md:text-4xl font-bold text-white mb-2">
|
46 |
+
<span class="text-netagotchi-purple">Troubleshooting</span> Guide
|
47 |
+
</h1>
|
48 |
+
<p class="text-netagotchi-light opacity-80 max-w-2xl mx-auto">
|
49 |
+
Common issues and solutions for Netagotchi firmware flashing
|
50 |
+
</p>
|
51 |
+
</header>
|
52 |
+
|
53 |
+
<div class="glow-box bg-gray-800 rounded-xl p-6 mb-8">
|
54 |
+
<h2 class="text-xl font-bold text-netagotchi-purple mb-6">Frequently Asked Questions</h2>
|
55 |
+
|
56 |
+
<div class="space-y-6">
|
57 |
+
<!-- FAQ Item 1 -->
|
58 |
+
<div class="faq-item pb-6">
|
59 |
+
<h3 class="font-bold text-lg mb-2 flex items-center gap-2">
|
60 |
+
<i class="fas fa-question-circle text-netagotchi-purple"></i>
|
61 |
+
Device not detected
|
62 |
+
</h3>
|
63 |
+
<p class="text-netagotchi-light opacity-90 mb-3">
|
64 |
+
If your device isn't being detected by the web flasher:
|
65 |
+
</p>
|
66 |
+
<ul class="list-disc list-inside text-sm space-y-1 ml-4">
|
67 |
+
<li>Ensure USB cable is properly connected</li>
|
68 |
+
<li>Try a different USB port on your computer</li>
|
69 |
+
<li>Install proper USB drivers for your device</li>
|
70 |
+
<li>Check if device is in bootloader mode (hold BOOT button while connecting)</li>
|
71 |
+
</ul>
|
72 |
+
</div>
|
73 |
+
|
74 |
+
<!-- FAQ Item 2 -->
|
75 |
+
<div class="faq-item pb-6">
|
76 |
+
<h3 class="font-bold text-lg mb-2 flex items-center gap-2">
|
77 |
+
<i class="fas fa-question-circle text-netagotchi-purple"></i>
|
78 |
+
Flashing fails or gets stuck
|
79 |
+
</h3>
|
80 |
+
<p class="text-netagotchi-light opacity-90 mb-3">
|
81 |
+
Common reasons for flashing failures:
|
82 |
+
</p>
|
83 |
+
<ul class="list-disc list-inside text-sm space-y-1 ml-4">
|
84 |
+
<li>Poor USB connection or cable quality</li>
|
85 |
+
<li>Insufficient power supply to the device</li>
|
86 |
+
<li>Corrupted firmware file - try downloading again</li>
|
87 |
+
<li>Browser compatibility issues (use Chrome/Edge)</li>
|
88 |
+
</ul>
|
89 |
+
</div>
|
90 |
+
|
91 |
+
<!-- FAQ Item 3 -->
|
92 |
+
<div class="faq-item pb-6">
|
93 |
+
<h3 class="font-bold text-lg mb-2 flex items-center gap-2">
|
94 |
+
<i class="fas fa-question-circle text-netagotchi-purple"></i>
|
95 |
+
Web Serial API not available
|
96 |
+
</h3>
|
97 |
+
<p class="text-netagotchi-light opacity-90 mb-3">
|
98 |
+
The Web Serial API requires specific conditions:
|
99 |
+
</p>
|
100 |
+
<ul class="list-disc list-inside text-sm space-y-1 ml-4">
|
101 |
+
<li>Use Chrome or Edge browser (version 89+)</li>
|
102 |
+
<li>Website must be served over HTTPS (or localhost)</li>
|
103 |
+
<li>User must explicitly grant permission when prompted</li>
|
104 |
+
<li>Check browser settings for serial port permissions</li>
|
105 |
+
</ul>
|
106 |
+
</div>
|
107 |
+
|
108 |
+
<!-- FAQ Item 4 -->
|
109 |
+
<div class="faq-item pb-6">
|
110 |
+
<h3 class="font-bold text-lg mb-2 flex items-center gap-2">
|
111 |
+
<i class="fas fa-question-circle text-netagotchi-purple"></i>
|
112 |
+
Device boots but screen is blank
|
113 |
+
</h3>
|
114 |
+
<p class="text-netagotchi-light opacity-90 mb-3">
|
115 |
+
If the device powers on but shows nothing:
|
116 |
+
</p>
|
117 |
+
<ul class="list-disc list-inside text-sm space-y-1 ml-4">
|
118 |
+
<li>Firmware may not be compatible with your device model</li>
|
119 |
+
<li>Check display connections on the hardware</li>
|
120 |
+
<li>Try re-flashing with different firmware version</li>
|
121 |
+
<li>Ensure proper power supply (battery charged if applicable)</li>
|
122 |
+
</ul>
|
123 |
+
</div>
|
124 |
+
</div>
|
125 |
+
</div>
|
126 |
+
|
127 |
+
<!-- Navigation Footer -->
|
128 |
+
<div class="flex justify-center gap-6 mt-8">
|
129 |
+
<a href="index.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
|
130 |
+
<i class="fas fa-home mr-1"></i> Home
|
131 |
+
</a>
|
132 |
+
<a href="devices.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
|
133 |
+
<i class="fas fa-microchip mr-1"></i> Devices
|
134 |
+
</a>
|
135 |
+
<a href="about.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
|
136 |
+
<i class="fas fa-info-circle mr-1"></i> About
|
137 |
+
</a>
|
138 |
+
</div>
|
139 |
+
</div>
|
140 |
+
|
141 |
+
<script>
|
142 |
+
// Navigation active state
|
143 |
+
const currentPage = window.location.pathname.split('/').pop();
|
144 |
+
document.querySelectorAll('a[href="' + currentPage + '"]').forEach(link => {
|
145 |
+
link.classList.add('text-netagotchi-purple', 'font-semibold');
|
146 |
+
link.classList.remove('hover:text-netagotchi-purple');
|
147 |
+
});
|
148 |
+
</script>
|
149 |
+
</body>
|
150 |
+
</html>
|