stack-chan

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="../assets/stackchan-favicon-32.png" type="image/png" />
    <link rel="apple-touch-icon" href="../assets/stackchan-apple-touch-icon.png" />
    <link rel="stylesheet" href="../global.css" />
    <link rel="stylesheet" href="flash.css" />
    <title>ファームウェア書き込み | ｽﾀｯｸﾁｬﾝ</title>
    <script type="module" src="https://unpkg.com/esp-web-tools@9/dist/web/install-button.js?module"></script>
    <script src="https://unpkg.com/lucide@1.24.0/dist/umd/lucide.min.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const button = document.querySelector('esp-web-install-button')
        document.querySelector('.select-target').addEventListener('change', (event) => {
          button.setAttribute('manifest', `manifest_${event.target.value}.json`)
        })
        globalThis.lucide?.createIcons()
      })
    </script>
  </head>
  <body>
    <main class="app-shell">
      <header class="topbar">
        <a class="brand-link" href="../"
          ><img src="../assets/stackchan-symbol.png" alt="" /><span
            >ｽﾀｯｸﾁｬﾝ<span class="surface-name"> ファームウェア書き込み</span></span
          ></a
        >
      </header>
      <div class="flash-workspace">
        <section class="flash-panel" aria-labelledby="flash-heading">
          <div class="page-heading">
            <h1 id="flash-heading">ファームウェア書き込み</h1>
            <p>USBで接続するｽﾀｯｸﾁｬﾝのボードを選択してください。</p>
          </div>
          <div class="field">
            <label for="target-board">ボード</label
            ><select id="target-board" class="select-target">
              <option value="esp32_m5stack">M5Stack</option>
              <option value="esp32_m5stack_core2">M5Stack Core2</option>
              <option value="esp32_m5stack_cores3">M5Stack CoreS3</option>
              <option value="esp32_m5stackchan_cores3">M5StackChan CoreS3</option>
            </select>
          </div>
          <esp-web-install-button manifest="manifest_esp32_m5stack.json" class="button-flash-container">
            <button slot="activate" class="button-flash primary-button">
              <i data-lucide="usb"></i><span>USBに接続して書き込む</span>
            </button>
            <p class="compatibility-message" slot="unsupported" role="alert">
              このブラウザはWeb Serialに対応していません。
            </p>
            <p class="compatibility-message" slot="not-allowed" role="alert">書き込みにはHTTPS接続が必要です。</p>
          </esp-web-install-button>
        </section>
      </div>
    </main>
    <script type="module" src="../tool-navigation.mjs"></script>
  </body>
</html>