-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathflash.html
197 lines (183 loc) · 9.85 KB
/
flash.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NSec Remote Signer Firmware Flasher</title>
<script src="https://cdn.tailwindcss.com"></script>
<script type="module">
// Import the web component directly
import 'esp-web-tools/dist/web/install-button.js';
</script>
<style>
body {
background: linear-gradient(135deg, #f6f8ff 0%, #ffffff 100%);
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Add progress bar styling */
.progress-bar {
width: 100%;
height: 8px;
background-color: #e5e7eb;
border-radius: 4px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #6366f1);
transition: width 0.3s ease;
}
</style>
</head>
<body class="p-5 font-sans min-h-screen">
<nav class="bg-white shadow-lg rounded-lg mb-8">
<div class="max-w-7xl mx-auto px-4">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex space-x-8">
<a href="index.html" class="inline-flex items-center px-1 pt-1 text-gray-500 hover:text-gray-700">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
Home
</a>
<a href="manual.html" class="inline-flex items-center px-1 pt-1 text-gray-500 hover:text-gray-700">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
</svg>
Manual
</a>
<a href="flash.html" class="inline-flex items-center px-1 pt-1 border-b-2 border-blue-500 text-gray-900">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
Firmware Update
</a>
</div>
</div>
</div>
</div>
</nav>
<h1 class="text-4xl font-bold mb-8 bg-gradient-to-r from-blue-600 to-purple-600 text-transparent bg-clip-text text-center ">
NSec Remote Signer Firmware Update
</h1>
<div class="max-w-2xl mx-auto mb-6 bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-yellow-700">
This firmware flasher requires <span class="font-semibold">Google Chrome</span>, a <span class="font-semibold">Chromium browser</span> or <span class="font-semibold">Microsoft Edge</span> on desktop Windows, macOS, or Linux for Web Serial support.
</p>
</div>
</div>
</div>
<div class="max-w-2xl mx-auto bg-white p-8 rounded-2xl shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Flash Instructions</h2>
<ol class="text-left text-gray-700 mb-6 space-y-2">
<li>1. Connect your NSec Remote Signer device to your computer via USB</li>
<li>2. Click the "Install Firmware" button below</li>
<li>3. Follow the prompts to install the firmware</li>
<li>4. Wait for the process to complete</li>
<li>5. Disconnect your device and connect to a power source to start using your NSec Remote Signer</li>
</ol>
<!-- Add status dialog -->
<div id="statusDialog" class="mb-6 hidden">
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-4">
<h3 class="font-semibold text-gray-700 mb-2">Flash Status</h3>
<div id="statusMessage" class="text-sm text-gray-600 mb-3">Waiting to connect...</div>
<!-- Progress bar -->
<div class="progress-bar">
<div id="progressBar" class="progress-bar-fill" style="width: 0%"></div>
</div>
<!-- Detailed status -->
<div id="detailedStatus" class="mt-3 text-left">
<div id="portInfo" class="text-sm text-gray-500"></div>
<div id="deviceInfo" class="text-sm text-gray-500"></div>
<div id="flashInfo" class="text-sm text-gray-500"></div>
</div>
</div>
</div>
<!-- ESP Web Install Button -->
<esp-web-install-button
id="installButton"
manifest="./static/manifest.json"
class="inline-block"
install-button-text="Install Firmware"
install-button-class="bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white font-semibold py-3 px-6 rounded-lg transform transition hover:scale-105">
<button slot="activate" class="bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white font-semibold py-3 px-6 rounded-lg transform transition hover:scale-105">
Install Firmware
</button>
<span slot="not-allowed">
Sorry, this browser is not supported. Please use Chrome, Edge, or another Chromium-based browser.
</span>
<span slot="error">
Failed to flash. Please disconnect, hold Button 1, and try again.
</span>
</esp-web-install-button>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const installButton = document.querySelector('esp-web-install-button');
const statusDialog = document.getElementById('statusDialog');
const statusMessage = document.getElementById('statusMessage');
const progressBar = document.getElementById('progressBar');
const portInfo = document.getElementById('portInfo');
const deviceInfo = document.getElementById('deviceInfo');
const flashInfo = document.getElementById('flashInfo');
installButton.addEventListener('state-changed', (e) => {
statusDialog.classList.remove('hidden');
switch (e.detail) {
case 'connecting':
statusMessage.textContent = 'Connecting to device...';
break;
case 'connected':
statusMessage.textContent = 'Connected! Preparing to flash...';
break;
case 'installing':
statusMessage.textContent = 'Installing firmware...';
break;
case 'finished':
statusMessage.textContent = 'Installation complete! You can disconnect your device.';
progressBar.style.width = '100%';
break;
case 'error':
statusMessage.textContent = 'Error occurred during installation';
statusMessage.classList.add('text-red-600');
break;
}
});
installButton.addEventListener('progress', (e) => {
const percentage = Math.round(e.detail * 100);
progressBar.style.width = `${percentage}%`;
flashInfo.textContent = `Flash progress: ${percentage}%`;
});
installButton.addEventListener('device-connected', (e) => {
const device = e.detail;
deviceInfo.textContent = `Device: ${device.manufacturerName || 'Unknown'} ${device.productName || 'Device'}`;
});
installButton.addEventListener('port-selected', (e) => {
const port = e.detail;
portInfo.textContent = `Port: ${port.productName || 'Unknown'} (${port.vendorId}:${port.productId})`;
});
// Add error handling for port already open
installButton.addEventListener('error', (e) => {
console.log('Error occurred:', e.detail);
// If port is already open, suggest refreshing
if (e.detail.message && e.detail.message.includes('already open')) {
alert('Please refresh the page and try again. If the error persists, disconnect and reconnect your device.');
}
});
});
</script>
</body>
</html>