merged_extension/popup.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>ReadVox</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #1e1e2e;
      height: 100%;
      overflow: hidden;
      color: #e0e0e0;
    }
    .popup-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 5px;
      gap: 5px;
    }
    .popup-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .popup-title {
      font-size: 12px;
      font-weight: 600;
      color: #e0e0e0;
      letter-spacing: 0.5px;
    }
    .close-btn {
      width: 18px;
      height: 18px;
      border: none;
      border-radius: 4px;
      background: rgba(255,255,255,0.1);
      color: #e0e0e0;
      font-size: 11px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .close-btn:hover { background: rgba(255,255,255,0.2); }
    .control-row {
      display: flex;
      justify-content: center;
      gap: 11px;
      align-items: center;
    }
    .icon-btn {
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 50%;
      color: #fff;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      padding: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .play-btn { background: #4285f4; }
    .play-btn:hover { background: #3367d6; transform: scale(1.05); }
    .stop-btn { background: #2e7d32; }
    .stop-btn:hover { background: #1b5e20; transform: scale(1.05); }
    .grammar-btn { background: #7c3aed; }
    .grammar-btn:hover { background: #6d28d9; transform: scale(1.05); }
    .speed-btn { background: #f59e0b; font-size: 10px; }
    .speed-btn:hover { background: #d97706; transform: scale(1.05); }
    .mode-row {
      display: flex;
      justify-content: center;
      gap: 10px;
    }
    .mode-btn {
      padding: 3px 10px;
      height: 23px;
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 6px;
      background: rgba(255,255,255,0.08);
      color: #aaa;
      font-size: 11px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }
    .mode-btn:hover { background: rgba(255,255,255,0.14); }
    .mode-btn.active { background: #4285f4; color: #fff; border-color: transparent; }
    .status-text {
      text-align: center;
      font-size: 11px;
      color: #999;
      min-height: 22px;
      line-height: 1.3;
      word-break: break-word;
    }
  </style>
</head>
<body>
  <div class="popup-container">
    <div class="popup-header">
      <span class="popup-title">ReadVox</span>
      <button id="close-btn" class="close-btn" title="关闭">&#x2715;</button>
    </div>

    <div class="control-row">
      <button id="play-btn" class="icon-btn play-btn" title="播放">▶</button>
      <button id="stop-btn" class="icon-btn stop-btn" title="停止">⏹</button>
      <button id="grammar-btn" class="icon-btn grammar-btn" title="语法高亮">G</button>
      <button id="speed-btn" class="icon-btn speed-btn" title="倍速">1x</button>
    </div>

    <div class="mode-row">
      <button id="mode-paragraph" class="mode-btn" data-mode="paragraph">Para</button>
      <button id="mode-selection" class="mode-btn" data-mode="selection">Select</button>
      <button id="mode-page" class="mode-btn" data-mode="page">Page</button>
    </div>

    <div class="status-text" id="status">Ready</div>
  </div>
  <script src="popup.js"></script>
</body>
</html>