HLWF/index.html at main · aztechell/HLWF · GitHub

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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="HLWF — a local Web Serial uploader for HuskyLens and K210.">
  <meta name="color-scheme" content="dark">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; connect-src 'self'; img-src 'self' data:; object-src 'none'; base-uri 'none'; form-action 'none'">
  <meta property="og:type" content="website">
  <meta property="og:title" content="HLWF — HuskyLens Web Flasher">
  <meta property="og:description" content="Local Web Serial firmware uploader for HuskyLens and Kendryte K210.">
  <meta property="og:url" content="https://aztechell.github.io/HLWF/">
  <meta property="og:image" content="https://aztechell.github.io/HLWF/assets/hlwf-logo.png">
  <meta name="twitter:card" content="summary">
  <title>HLWF — HuskyLens Web Flasher</title>
  <link rel="icon" href="./favicon.ico" sizes="any">
  <link rel="icon" type="image/png" href="./assets/hlwf-logo-512.png">
  <link rel="apple-touch-icon" href="./assets/hlwf-logo-512.png">
  <link rel="stylesheet" href="./styles.css">
  <script type="module" src="./src/app.js?v=da6305613ff9179a"></script>
</head>
<body>
  <header class="topbar">
    <a class="brand" href="#workspace" aria-label="HLWF, open flasher" data-i18n-aria-label="brand.label">
      <span class="brand-mark" aria-hidden="true"><img src="./assets/hlwf-logo-512.png" alt=""></span>
      <span class="brand-copy"><strong>HLWF</strong><small>HuskyLens Web Flasher</small></span>
    </a>
    <div class="topbar-meta">
      <span class="browser-badge" id="browser-badge">Checking Web Serial…</span>
      <div class="language-switch" role="group" aria-label="Language">
        <button id="lang-ru" type="button" data-language="ru" aria-pressed="false">RU</button>
        <span aria-hidden="true">/</span>
        <button id="lang-en" type="button" data-language="en" aria-pressed="true">ENG</button>
      </div>
    </div>
  </header>

  <main id="workspace">
    <section class="console" aria-labelledby="page-title">
      <div class="console-grid">
        <div class="config-panel">
          <div class="panel-heading">
            <div>
              <p class="eyebrow" data-i18n="config.eyebrow">Configuration</p>
              <h1 id="page-title" data-i18n="config.title">Firmware setup</h1>
            </div>
            <span class="protocol-tag">K210 / 115200</span>
          </div>

          <section class="module" aria-labelledby="device-title">
            <div class="module-heading">
              <span class="module-index">01</span>
              <div>
                <h2 id="device-title" data-i18n="device.title">Device</h2>
                <p data-i18n="device.help">Connect HuskyLens over USB and allow serial port access.</p>
              </div>
            </div>
            <div class="device-row">
              <div class="device-details">
                <strong id="device-name">No device selected</strong>
                <span id="device-meta">Waiting for connection</span>
              </div>
              <button class="button button-secondary" id="connect-button" type="button">Select port</button>
            </div>
          </section>

          <section class="module" aria-labelledby="file-title">
            <div class="module-heading">
              <span class="module-index">02</span>
              <div>
                <h2 id="file-title" data-i18n="file.title">Firmware file</h2>
                <p><span data-i18n="file.local">Local</span> <code>.bin</code> <span data-i18n="file.private">never leaves this browser.</span></p>
              </div>
            </div>
            <label class="file-drop" id="file-drop" for="firmware-file">
              <input id="firmware-file" type="file" accept=".bin,application/octet-stream">
              <span class="file-glyph" aria-hidden="true">+</span>
              <span><strong data-i18n="file.select">Select .bin</strong><small data-i18n="file.drop">or drop a file here</small></span>
            </label>
            <dl class="file-facts">
              <div><dt data-i18n="file.name">Name</dt><dd id="file-name">—</dd></div>
              <div><dt data-i18n="file.size">Size</dt><dd id="file-size">—</dd></div>
              <div class="hash-row"><dt>SHA-256</dt><dd id="file-hash">—</dd></div>
            </dl>
            <p class="validation" id="file-state">Allowed: 1–16,777,179 bytes</p>
          </section>
        </div>

        <aside class="operation-panel" aria-label="Status and flash controls" data-i18n-aria-label="status.panelLabel">
          <div class="status-heading">
            <div>
              <p class="eyebrow" data-i18n="status.eyebrow">Status</p>
              <h2 id="progress-stage">Ready</h2>
            </div>
            <strong id="progress-value">0%</strong>
          </div>
          <progress id="progress-bar" max="100" value="0">0%</progress>

          <ol class="stages" aria-label="Operation stages" data-i18n-aria-label="stages.label">
            <li class="is-active" data-stage="ready"><span class="stage-marker"></span><span><strong data-i18n="stages.environment">Environment</strong><small data-i18n="stages.browserCheck">Browser check</small></span></li>
            <li data-stage="bootrom"><span class="stage-marker"></span><span><strong>BootROM</strong><small data-i18n="stages.bootromHelp">Connect to K210</small></span></li>
            <li data-stage="stub"><span class="stage-marker"></span><span><strong>ISP stub</strong><small data-i18n="stages.stubHelp">Load programmer</small></span></li>
            <li data-stage="write"><span class="stage-marker"></span><span><strong>Flash</strong><small data-i18n="stages.writeHelp">Write image</small></span></li>
            <li data-stage="done"><span class="stage-marker"></span><span><strong data-i18n="stages.done">Done</strong><small data-i18n="stages.doneHelp">Close port</small></span></li>
          </ol>

          <div class="action-zone">
            <label class="consent-row">
              <input id="consent" type="checkbox" disabled>
              <span class="custom-check" aria-hidden="true"></span>
              <span data-i18n="action.consent">I confirm replacing the current device firmware.</span>
            </label>
            <div class="action-row">
              <button class="button button-primary" id="flash-button" type="button" disabled>
                <span data-i18n="action.flash">Flash firmware</span>
                <span aria-hidden="true">→</span>
              </button>
              <button class="button button-danger" id="cancel-button" type="button" hidden data-i18n="action.cancel">Cancel</button>
            </div>
            <p class="power-warning"><span aria-hidden="true">!</span><span data-i18n="action.warning">Do not disconnect power while flashing.</span></p>
          </div>
        </aside>
      </div>

      <details class="log-panel" id="log-panel">
        <summary>
          <span class="log-label"><span class="status-dot" aria-hidden="true"></span><span data-i18n="log.title">Log</span></span>
          <span class="log-preview" id="log-preview">Initializing…</span>
          <span class="log-toggle" aria-hidden="true"><span class="when-closed" data-i18n="log.expand">Expand</span><span class="when-open" data-i18n="log.collapse">Collapse</span></span>
        </summary>
        <div class="log-content">
          <div class="log-toolbar">
            <span data-i18n="log.session">Current session events</span>
            <button id="clear-log" type="button" data-i18n="log.clear">Clear</button>
          </div>
          <ol class="operation-log" id="operation-log" aria-live="polite"></ol>
        </div>
      </details>

      <footer class="console-footer">
        <span>HLWF · MIT</span>
        <span class="footer-local" data-i18n="footer.local">File stays in this browser</span>
        <nav aria-label="Project links" data-i18n-aria-label="footer.links">
          <a href="./README.md">README</a>
          <a href="./LICENSE">License</a>
        </nav>
      </footer>
    </section>
  </main>

</body>
</html>