ESP32/frontend-preview/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ESP32-S3-RLCD Workbench</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <main class="workbench">
      <!-- ============ 左侧:预览舞台 ============ -->
      <section class="stage">
        <!-- Header -->
        <header class="header">
          <div class="header-title">
            <span class="product">ESP32-S3-RLCD-4.2</span>
            <span class="sub">Workbench · Canvas Pixel Preview</span>
          </div>
          <span class="bridge-pill" id="bridgeState">桥接服务检测中</span>
        </header>

        <!-- 设备预览 -->
        <div class="stage-area">
          <div class="device-shell" id="deviceShell">
            <div class="screen-bezel">
              <div class="canvas-frame show-grid" id="canvasFrame">
                <canvas id="screen" width="400" height="300"></canvas>
              </div>
            </div>
            <div class="device-meta">
              <span>400 × 300 · ST7305</span>
              <span class="dots"><span></span><span></span><span></span></span>
              <span id="screenSizeLabel">monochrome RLCD</span>
            </div>
          </div>

          <!-- 预览控件 -->
          <div class="preview-controls">
            <div class="zoom-group">
              <button class="zoom-btn" id="zoomOut" type="button" aria-label="缩小">−</button>
              <span class="zoom-label" id="zoomLabel">100%</span>
              <button class="zoom-btn" id="zoomIn" type="button" aria-label="放大">+</button>
            </div>
            <button class="toggle-chip" id="gridToggle" type="button">
              <span class="dot"></span><span>网格</span>
            </button>
            <button class="toggle-chip" id="ghostToggle" type="button">
              <span class="dot"></span><span>残影</span>
            </button>
            <button class="toggle-chip" id="invertToggle" type="button">
              <span class="dot"></span><span>反色</span>
            </button>
          </div>
        </div>
      </section>

      <!-- ============ 右侧:控制面板 ============ -->
      <aside class="panel">
        <!-- 数据卡片 -->
        <div class="card" id="dataCard">
          <div class="card-head" id="dataCardHead">
            <h2>仪表盘数据</h2>
            <span class="chevron">▾</span>
          </div>
          <div class="card-body" id="dataBody">
            <!-- 字段会由 JS 动态生成 -->
          </div>
        </div>

        <!-- 操作卡片 -->
        <div class="card" id="opCard">
          <div class="card-head" id="opCardHead">
            <h2>操作</h2>
            <span class="chevron">▾</span>
          </div>
          <div class="card-body">
            <div class="btn-row">
              <button class="btn btn-secondary" id="saveButton" type="button">保存配置</button>
              <button class="btn btn-secondary" id="resetButton" type="button">重置默认</button>
            </div>

            <div class="data-group">
              <div class="data-group-title">固件包</div>
              <div class="fw-list" id="firmwareList"></div>
              <div class="field" style="margin-top: 8px;">
                <label for="portInput">端口</label>
                <input id="portInput" type="text" value="COM3" autocomplete="off" />
              </div>
              <div class="btn-row three" style="margin-top: 6px;">
                <button class="btn btn-secondary" id="generateButton" type="button">生成</button>
                <button class="btn btn-secondary" id="buildButton" type="button">编译</button>
                <button class="btn btn-danger" id="flashButton" type="button">烧录</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 日志卡片 -->
        <div class="card collapsed" id="logCard">
          <div class="card-head" id="logCardHead">
            <h2>日志</h2>
            <span class="chevron">▾</span>
          </div>
          <div class="card-body">
            <div class="log-box" id="logBox"></div>
          </div>
        </div>
      </aside>
    </main>

    <!-- 烧录确认模态框 -->
    <div class="modal-backdrop" id="flashModal" hidden>
      <div class="modal" role="dialog" aria-modal="true" aria-labelledby="flashTitle">
        <h2 id="flashTitle">确认烧录</h2>
        <p id="flashSummary"></p>
        <div class="modal-actions">
          <button class="btn btn-secondary" id="cancelFlashButton" type="button">取消</button>
          <button class="btn btn-danger" id="confirmFlashButton" type="button">确认烧录</button>
        </div>
      </div>
    </div>

    <script src="./app.js"></script>
  </body>
</html>