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" />
    <title>ｽﾀｯｸﾁｬﾝ Webツール</title>
    <script
      src="https://unpkg.com/lucide@1.24.0/dist/umd/lucide.min.js"
      integrity="sha384-mooE85Luwgx+AyykX7e90VcN8/QCFTSIwPuHLmvcsLVoA0en7lKYb9XlOzn5G2co"
      crossorigin="anonymous"
    ></script>
    <style>
      .launcher {
        display: grid;
        min-height: calc(100dvh - var(--header-height));
        place-items: center;
        padding: 28px 20px;
      }
      .launcher-inner {
        width: min(100%, 780px);
      }
      .brand-panel {
        display: flex;
        align-items: center;
        gap: 22px;
        margin-bottom: 30px;
      }
      .brand-panel img {
        width: 150px;
        height: 100px;
        object-fit: contain;
        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.32));
      }
      .brand-panel h1 {
        margin: 0 0 6px;
        font-size: 1.45rem;
        letter-spacing: 0;
      }
      .brand-panel p {
        margin: 0;
        color: var(--muted);
        font-size: 0.88rem;
      }
      .tool-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid var(--line);
        border-left: 1px solid var(--line);
      }
      .tool-link {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 20px;
        align-items: center;
        gap: 13px;
        min-height: 92px;
        padding: 16px;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        color: var(--text);
        text-decoration: none;
      }
      .tool-link:hover {
        background: var(--surface);
      }
      .tool-icon {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 1px solid var(--line-strong);
        border-radius: 6px;
        background: var(--surface-raised);
        color: var(--accent);
      }
      .tool-link strong {
        display: block;
        margin-bottom: 3px;
        font-size: 0.94rem;
      }
      .tool-link small {
        display: block;
        color: var(--muted);
        font-size: 0.76rem;
        line-height: 1.4;
      }
      .arrow {
        color: #6f7b83;
      }
      @media (max-width: 600px) {
        .launcher {
          place-items: start center;
        }
        .brand-panel {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }
        .brand-panel img {
          width: 120px;
          height: 80px;
        }
        .tool-grid {
          grid-template-columns: 1fr;
        }
      }
    </style>
  </head>
  <body>
    <main class="app-shell">
      <header class="topbar">
        <a class="brand-link" href="./" aria-current="page"
          ><img src="assets/stackchan-symbol.png" alt="" /><span
            >ｽﾀｯｸﾁｬﾝ<span class="surface-name"> Webツール</span></span
          ></a
        >
      </header>
      <section class="launcher" aria-labelledby="launcher-heading">
        <div class="launcher-inner">
          <div class="brand-panel">
            <img src="assets/stackchan-icon.png" alt="ｽﾀｯｸﾁｬﾝ" width="240" height="160" />
            <div>
              <h1 id="launcher-heading">ｽﾀｯｸﾁｬﾝ Webツール</h1>
              <p>セットアップ、設定、開発をブラウザから行えます。</p>
            </div>
          </div>
          <nav class="tool-grid" aria-label="ツール一覧">
            <a class="tool-link" href="flash/"
              ><span class="tool-icon"><i data-lucide="cpu"></i></span
              ><span><strong>ファームウェア書き込み</strong><small>対応ボードへUSB経由で書き込む</small></span
              ><i class="arrow" data-lucide="chevron-right"></i
            ></a>
            <a class="tool-link" href="preference/"
              ><span class="tool-icon"><i data-lucide="sliders-horizontal"></i></span
              ><span><strong>設定</strong><small>BLEで本体の設定を変更する</small></span
              ><i class="arrow" data-lucide="chevron-right"></i
            ></a>
            <a class="tool-link" href="mod-gallery/"
              ><span class="tool-icon"><i data-lucide="store"></i></span
              ><span><strong>MOD Gallery</strong><small>公開済みMODを試して編集する</small></span
              ><i class="arrow" data-lucide="chevron-right"></i
            ></a>
            <a class="tool-link" href="simulator/"
              ><span class="tool-icon"><i data-lucide="box"></i></span
              ><span><strong>シミュレーター</strong><small>WASMと3Dモデルを実行する</small></span
              ><i class="arrow" data-lucide="chevron-right"></i
            ></a>
            <a class="tool-link" href="editor/"
              ><span class="tool-icon"><i data-lucide="blocks"></i></span
              ><span><strong>ブロックエディタ</strong><small>MODを作成してインストールする</small></span
              ><i class="arrow" data-lucide="chevron-right"></i
            ></a>
            <a class="tool-link" href="face-editor/"
              ><span class="tool-icon"><i data-lucide="smile"></i></span
              ><span><strong>Shape顔エディタ</strong><small>目と口を配置してFace実装を作る</small></span
              ><i class="arrow" data-lucide="chevron-right"></i
            ></a>
          </nav>
        </div>
      </section>
    </main>
    <script type="module" src="./tool-navigation.mjs"></script>
    <script>
      globalThis.lucide?.createIcons()
    </script>
  </body>
</html>