HVCCPS/BootLoaderHostUI/index.html at main · AzidoPP/HVCCPS · 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
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HVCCPS IAP</title>
  <link rel="stylesheet" href="styles.css">
  <script src="i18n.js" defer></script>
  <script src="app.js" defer></script>
</head>
<body>
  <header class="topbar">
    <div>
      <h1>HVCCPS IAP</h1>
      <p>STM32G474 UART3 firmware loader</p>
    </div>
    <div class="topbar-actions">
      <label class="language-picker" title="Language">
        <span>Language</span>
        <select data-i18n-language aria-label="Language">
          <option value="en">English</option>
          <option value="zh-CN">中文</option>
        </select>
      </label>
      <div class="link-status" id="linkStatus">DISCONNECTED</div>
    </div>
  </header>

  <main class="shell">
    <section class="panel">
      <div class="toolbar">
        <button id="connectButton" type="button">Connect</button>
        <button id="disconnectButton" type="button" disabled>Disconnect</button>
        <label class="file-button">
          <input id="fileInput" type="file" accept=".hex,.bin,application/octet-stream">
          Select HEX/BIN
        </label>
      </div>

      <dl class="info-grid">
        <div>
          <dt>File</dt>
          <dd id="fileName">--</dd>
        </div>
        <div>
          <dt>Address</dt>
          <dd id="imageAddress">--</dd>
        </div>
        <div>
          <dt>Size</dt>
          <dd id="imageSize">--</dd>
        </div>
        <div>
          <dt>CRC32</dt>
          <dd id="imageCrc">--</dd>
        </div>
      </dl>

      <div class="actions">
        <button class="primary" id="flashButton" type="button" disabled>Flash Firmware</button>
        <button id="abortButton" type="button" disabled>Abort</button>
      </div>

      <div class="progress-wrap" aria-label="Flash progress">
        <div class="progress-bar">
          <div id="progressFill"></div>
        </div>
        <div class="progress-meta">
          <span id="progressText">0%</span>
          <span id="phaseText">Idle</span>
        </div>
      </div>
    </section>

    <section class="panel log-panel">
      <div class="log-head">
        <h2>Log</h2>
        <button id="clearLogButton" type="button">Clear</button>
      </div>
      <pre id="logOutput"></pre>
    </section>
  </main>
</body>
</html>