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="%BASE_URL%favicon.svg" />
    <meta name="theme-color" content="#0d1325" />
    <meta
      name="description"
      content="Regrip Dev Console — developer tooling for supported smart-cube moves, events, gyro and regrips."
    />
    <title>Regrip Dev Console</title>
    <link rel="stylesheet" href="/src/app/static-page.css" />
    <style>
      .hero {
        padding: 56px 48px 0;
      }
      .hero h1 {
        max-width: 720px;
        margin: 0 0 16px;
      }
      .hero p {
        max-width: 560px;
        font-size: 16px;
        margin: 0 0 28px;
      }
      .cta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 40px;
      }
      .hero-shot-link {
        display: block;
        width: 100%;
        /* Preserve the screenshot's native pixels instead of blurring it by upscaling. */
        max-width: 688px;
        margin-bottom: 48px;
      }
      .hero-shot {
        display: block;
        width: 100%;
        border: 1px solid var(--color-divider);
        border-radius: 0.4rem;
      }
      .stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 2px solid var(--color-divider);
        border-bottom: 2px solid var(--color-divider);
        margin-bottom: 48px;
      }
      .stats > div {
        padding: 20px 24px;
      }
      .stats > div + div {
        border-left: 1px solid var(--color-divider);
      }
      .stat-num {
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: 32px;
        line-height: 1.1;
      }
      .stat-label {
        font-size: 13px;
        color: color-mix(in srgb, var(--color-text) 55%, transparent);
      }
      .features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        padding-bottom: 48px;
      }
      .features p {
        font-size: 14px;
        opacity: 0.85;
      }
      .closer {
        background: var(--color-accent);
        color: var(--color-bg);
        padding: 56px 48px;
      }
      .closer h2 {
        color: var(--color-bg);
        max-width: 520px;
      }
      @media (max-width: 60rem) {
        .nav-tag {
          display: none;
        }
        .stats,
        .features {
          grid-template-columns: 1fr;
        }
        .stats > div + div {
          border-left: 0;
          border-top: 1px solid var(--color-divider);
        }
        .hero,
        .closer {
          padding-inline: 24px;
        }
      }
    </style>
  </head>

  <body>
    <div class="page">
      <header class="nav">
        <span class="nav-brand"
          >Regrip Dev Console <span class="nav-tag">· smart-cube developer tooling</span></span
        >
        <a href="./docs/">Docs</a>
        <a href="https://github.com/wstein/regrip">GitHub</a>
        <a href="./console/" class="btn btn-primary" style="margin-left: 12px">Open Console →</a>
      </header>

      <div class="hero">
        <h1>Read every move your cube makes.</h1>
        <p>
          A browser-based lab for GAN, GoCube, Giiker, MoYu, and QiYi smart cubes — connect over
          Bluetooth, watch moves and events stream in real time, and copy the raw trace straight
          into your own tools.
        </p>
        <div class="cta">
          <a href="./console/" class="btn btn-primary">Open Console →</a>
          <a href="./docs/" class="btn btn-secondary">Read the docs</a>
        </div>

        <a class="hero-shot-link" href="./console/" aria-label="Open Console">
          <img
            class="hero-shot"
            src="./docs/assets/regrip-console-main.png"
            width="688"
            height="520"
            alt="Regrip console showing the rendered cube, detected moves in WCA notation, solve analysis, and Singmaster-cycle state export"
          />
        </a>

        <div class="stats">
          <div>
            <div class="stat-num">6</div>
            <div class="stat-label">protocol adapters supported</div>
          </div>
          <div>
            <div class="stat-num">120/s</div>
            <div class="stat-label">events parsed</div>
          </div>
          <div>
            <div class="stat-num">0</div>
            <div class="stat-label">install steps</div>
          </div>
        </div>

        <div class="features">
          <div>
            <h4>Live Trace</h4>
            <p>
              Every move, event, gyro reading and regrip logged with a timestamp, filterable and
              exportable as JSONL.
            </p>
          </div>
          <div>
            <h4>Cube Visualization</h4>
            <p>A rendered cube mirrors the physical one in real time, sticker for sticker.</p>
          </div>
          <div>
            <h4>Protocol Adapters</h4>
            <p>
              Six adapters cover GAN, GoCube, Giiker, MoYu MHC, MoYu32, and QiYi. A mock adapter
              supports testing without hardware.
            </p>
          </div>
        </div>
      </div>

      <div class="closer">
        <h2>Start capturing moves.</h2>
        <a
          href="./console/"
          class="btn btn-secondary"
          style="
            background: var(--color-bg);
            color: var(--color-accent);
            border-color: var(--color-bg);
          "
          >Open Console →</a
        >
      </div>
    </div>
  </body>
</html>