index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <title>Mudra Viewer</title>
    <style>
      :root { color-scheme: light; }
      * { box-sizing: border-box; }
      body {
        margin: 0; font: 14px/1.5 system-ui, sans-serif;
        background: #f5f4ee; color: #3d3d3a;
        display: flex; flex-direction: column; height: 100vh;
      }
      header {
        display: flex; align-items: center; gap: 16px;
        padding: 12px 20px; background: #faf9f5; border-bottom: 1px solid #e8e6dd;
      }
      h1 { font-size: 16px; margin: 0; font-weight: 600; }
      #connect, #play, #record {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 18px; border: 0; border-radius: 6px; cursor: pointer;
        background: #c96442; color: #fff; font-size: 14px; font-weight: 600;
      }
      #connect svg, #play svg, #record svg { display: none; width: 16px; height: 16px; flex: none; }
      #play, #record { background: #6b6858; }
      @media (max-width: 640px) {
        #connect, #play, #record { padding: 8px; }
        #connect .label, #play .label, #record .label { display: none; }
        #connect svg, #play svg, #record svg { display: block; }
      }
      #tabs { display: flex; gap: 2px; background: #efece1; border-radius: 6px; padding: 2px; position: relative; }
      #tabs button {
        border: 0; background: none; padding: 5px 12px; border-radius: 4px; cursor: pointer;
        color: #6b6858; font-size: 13px; font-weight: 600; position: relative; z-index: 1;
      }
      #tabs button.active { color: #3d3d3a; }
      #tabs-indicator {
        position: absolute; top: 2px; bottom: 2px; left: 0; z-index: 0;
        background: #faf9f5; border-radius: 4px; box-shadow: 0 1px 2px rgba(61, 61, 58, 0.1);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }
      @media (max-width: 640px) {
        #tabs { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 20; height: 48px; }
        #tabs button { flex: 1; font-size: 15px; }
        #plots, #spectrum, #manifold, #spikes { padding-bottom: 64px; }
      }
      #connect:disabled, #play:disabled, #record:disabled { background: #e0ddd0; color: #a5a294; cursor: not-allowed; }
      #connect.connected { background: #b5482f; }
      #play.connected, #record.connected { background: #4a4840; }
      #play-wrap { position: relative; }
      #play-menu {
        position: absolute; top: calc(100% + 6px); left: 0; z-index: 10; min-width: 100%;
        background: #faf9f5; border: 1px solid #e8e6dd; border-radius: 8px;
        box-shadow: 0 6px 20px rgba(61, 61, 58, 0.15); overflow: hidden; padding: 4px;
        opacity: 1; transform: translateY(0);
        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }
      #play-menu[hidden] { display: block; opacity: 0; transform: translateY(-6px); pointer-events: none; }
      #play-menu button {
        display: block; width: 100%; text-align: left; white-space: nowrap;
        padding: 8px 14px; border: 0; border-radius: 5px; background: none;
        color: #3d3d3a; font-size: 14px; font-weight: 500; cursor: pointer;
      }
      #play-menu button:hover { background: #efece1; }
      #status {
        width: 11px; height: 11px; border-radius: 50%; margin-left: auto;
        background: currentColor; color: #a5a294; box-shadow: 0 0 6px currentColor;
        cursor: default; flex: none;
      }
      #status.ok { color: #0f9d58; }
      #status.error { color: #d92d20; }
      #status.busy { color: #d99a2b; }
      #status { position: relative; }
      #status::after {
        content: attr(data-tip); position: absolute; top: 50%; right: 18px;
        transform: translateY(-50%) translateX(4px); white-space: nowrap;
        padding: 4px 8px; border-radius: 4px; background: #3d3d3a; color: #fff;
        font-size: 12px; font-weight: 400; pointer-events: none;
        opacity: 0; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }
      #status:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
      #banner {
        display: none; position: relative; padding: 10px 40px 10px 20px; background: #fbf0d9;
        color: #8a6d3b; border-bottom: 1px solid #ecdcb3;
      }
      .banner-close {
        position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
        border: none; background: none; color: inherit; font-size: 18px; line-height: 1;
        cursor: pointer; padding: 4px;
      }
      #plots { flex: 1; display: flex; flex-direction: column; min-height: 0; }
      #plots[hidden] { display: none; }
      .lane { flex: 1; position: relative; border-bottom: 1px solid #e8e6dd; min-height: 0; }
      .lane label {
        position: absolute; top: 6px; left: 10px; z-index: 1;
        color: #6b6858; font-size: 12px; pointer-events: none;
        background: #f5f4ee; padding: 1px 5px; border-radius: 3px;
      }
      canvas { display: block; width: 100%; height: 100%; }
      #spectrum { flex: 1; position: relative; min-height: 0; }
      #spectrum[hidden] { display: none; }
      #spec-legend {
        position: absolute; top: 20px; right: 50px; z-index: 1; display: flex; gap: 14px;
        font-size: 12px; font-weight: 600; pointer-events: none;
      }
      #spec-legend span { background: #f5f4ee; padding: 1px 5px; border-radius: 3px; }
      #spec-tip {
        position: absolute; z-index: 2; display: none; white-space: nowrap;
        padding: 4px 8px; border-radius: 4px; background: #3d3d3a; color: #fff;
        font-size: 12px; font-weight: 400; pointer-events: none;
      }
      #manifold { flex: 1; position: relative; min-height: 0; }
      #manifold[hidden] { display: none; }
      #spikes { flex: 1; position: relative; min-height: 0; }
      #spikes[hidden] { display: none; }
      #spikes-info {
        position: absolute; bottom: 12px; right: 12px; z-index: 1;
        width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
        border: 0; border-radius: 50%; cursor: pointer; background: #efece1; color: #6b6858;
        font-size: 13px; font-weight: 700; font-style: italic; font-family: Georgia, serif;
      }
      #spikes-info:hover { color: #3d3d3a; background: #e0ddd0; }
      #spikes-dialog {
        max-width: min(480px, 90vw); padding: 0; border: 0; border-radius: 10px;
        box-shadow: 0 10px 40px rgba(61, 61, 58, 0.25);
      }
      #spikes-dialog::backdrop { background: rgba(61, 61, 58, 0.35); }
      #spikes-dialog h2 { font-size: 16px; margin: 0; padding: 16px 20px; border-bottom: 1px solid #e8e6dd; }
      #spikes-dialog .dialog-body { padding: 16px 20px; }
      #spikes-dialog .dialog-body p { margin: 0 0 12px; color: #3d3d3a; }
      #spikes-dialog .dialog-body p:last-child { margin-bottom: 0; }
      #spikes-dialog .dialog-body a { color: #c96442; }
      #spikes-dialog-close {
        display: block; margin: 12px 20px 16px auto; padding: 6px 16px; border: 0; border-radius: 6px;
        cursor: pointer; background: #6b6858; color: #fff; font-size: 13px; font-weight: 600;
      }
      #manifold-tip {
        position: absolute; z-index: 2; display: none; white-space: nowrap;
        padding: 4px 8px; border-radius: 4px; background: #3d3d3a; color: #fff;
        font-size: 12px; font-weight: 400; pointer-events: none;
      }
      #manifold-info {
        position: absolute; bottom: 12px; left: 12px; z-index: 1;
        border: 0; background: none; padding: 4px 6px; border-radius: 4px; cursor: pointer;
        color: #a5a294; font-size: 12px;
      }
      #manifold-info:hover { color: #6b6858; background: #efece1; }
      #manifold-dialog {
        max-width: min(560px, 90vw); max-height: 80vh; padding: 0; border: 0; border-radius: 10px;
        box-shadow: 0 10px 40px rgba(61, 61, 58, 0.25);
      }
      #manifold-dialog::backdrop { background: rgba(61, 61, 58, 0.35); }
      #manifold-dialog h2 { font-size: 16px; margin: 0; padding: 16px 20px; border-bottom: 1px solid #e8e6dd; }
      #manifold-dialog .dialog-body { padding: 16px 20px; overflow-y: auto; max-height: calc(80vh - 110px); }
      #manifold-dialog .dialog-body p { margin: 0 0 12px; color: #3d3d3a; }
      #manifold-dialog .dialog-body img { display: block; max-width: 100%; margin-top: 8px; }
      #manifold-dialog-close {
        display: block; margin: 12px 20px 16px auto; padding: 6px 16px; border: 0; border-radius: 6px;
        cursor: pointer; background: #6b6858; color: #fff; font-size: 13px; font-weight: 600;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Mudra Viewer</h1>
      <div id="tabs">
        <span id="tabs-indicator"></span>
        <button id="tab-time" class="active">Time</button>
        <button id="tab-freq">Frequency</button>
        <button id="tab-manifold">Manifold</button>
        <button id="tab-spikes">Spike</button>
      </div>
      <span id="status" data-tip="Not connected"></span>
      <span id="play-wrap">
        <button id="play"></button>
        <div id="play-menu" hidden></div>
      </span>
      <button id="record" disabled></button>
      <button id="connect"></button>
    </header>
    <div id="banner"></div>
    <div id="plots"></div>
    <div id="spectrum" hidden>
      <div id="spec-legend"></div>
      <div id="spec-tip"></div>
      <canvas id="spec"></canvas>
    </div>
    <div id="manifold" hidden>
      <!-- ponytail: temporarily disabled, see manifoldInfoBtn/manifoldDialog in main.ts
      <button id="manifold-info">ⓘ What is Muscle Manifold?</button>
      -->
      <div id="manifold-tip"></div>
      <canvas id="manifold-canvas"></canvas>
      <!--
      <dialog id="manifold-dialog">
        <h2>What is Muscle Manifold?</h2>
        <div class="dialog-body">
          <p>
            WIP
          </p>
          <img src="/manifold-flow.svg" alt="Manifold pipeline: sample → extract features → buffer → PCA refit → animate → render" />
        </div>
        <button id="manifold-dialog-close">Close</button>
      </dialog>
      -->
    </div>
    <div id="spikes" hidden>
      <canvas id="spikes-canvas"></canvas>
      <button id="spikes-info" aria-label="What is this?">i</button>
      <dialog id="spikes-dialog">
        <h2>Spike Trains</h2>
        <div class="dialog-body">
          <p>Each row is a <strong>putative motor unit source</strong> separated from the 3-channel sEMG by the same math used for HD-sEMG decomposition (delay extension → whitening → fastICA → peak/K-means → silhouette filtering).</p>
          <p>True motor-unit decomposition needs a high-density electrode grid (64+ channels). With only 3 channels the spatial resolution is far lower, so these are separated sources — not verified physiological motor units. The grey line is the total firing rate.</p>
          <p>Details: <a href="https://github.com/ttktjmt/mudra-viewer/blob/main/docs/adr/0003-spike-trains-view-design.md" target="_blank" rel="noopener">docs/adr/0003-spike-trains-view-design.md</a></p>
        </div>
        <button id="spikes-dialog-close">Close</button>
      </dialog>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>