settings.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
      background: transparent;
      color: #e0e0e0;
      font-size: 13px;
      overflow: hidden;
    }

    /* ── Dictation pill (shown during recording) ── */

    .pill {
      display: none;
      align-items: center;
      gap: 10px;
      height: 36px;
      padding: 0 14px;
      background: rgba(18, 18, 18, 0.92);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.5),
        0 1px 4px rgba(0, 0, 0, 0.3),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.06);
      -webkit-app-region: drag;
      animation: pillIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      transform-origin: center top;
    }

    .pill.active { display: flex; }

    @keyframes pillIn {
      from {
        opacity: 0;
        transform: scale(0.9) translateY(-4px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    /* Red recording dot with glow */
    .pill-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ff3b30;
      box-shadow: 0 0 8px rgba(255, 59, 48, 0.6);
      animation: dotPulse 1.5s ease-in-out infinite;
      flex-shrink: 0;
    }

    @keyframes dotPulse {
      0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(255, 59, 48, 0.6); }
      50% { opacity: 0.5; box-shadow: 0 0 4px rgba(255, 59, 48, 0.3); }
    }

    /* Audio waveform bars */
    .pill-waveform {
      display: flex;
      align-items: center;
      gap: 2px;
      height: 20px;
    }

    .pill-waveform .bar {
      width: 2.5px;
      height: 4px;
      min-height: 4px;
      border-radius: 2px;
      background: linear-gradient(to top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7));
      transition: height 0.08s ease-out;
    }

    .pill-text {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.7);
      letter-spacing: 0.2px;
      white-space: nowrap;
    }

    .pill-time {
      font-size: 11px;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      color: rgba(255, 255, 255, 0.35);
      margin-left: 2px;
      flex-shrink: 0;
    }

    /* ── Settings panel ── */

    .settings {
      padding: 16px;
      background: #0a0a0a;
    }

    .settings.hidden { display: none; }

    h1 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 16px;
      color: #fff;
    }

    .field { margin-bottom: 14px; }

    label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 5px;
    }

    input, select, textarea {
      width: 100%;
      background: #141414;
      color: #ccc;
      border: 1px solid #2a2a2a;
      border-radius: 6px;
      padding: 8px 10px;
      font-size: 13px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.15s;
    }

    input:focus, select:focus, textarea:focus { border-color: #444; }

    textarea { height: 80px; resize: none; line-height: 1.5; }

    .row { display: flex; gap: 8px; align-items: center; }
    .row input, .row select { flex: 1; }

    .btn {
      background: #1a1a1a;
      color: #888;
      border: 1px solid #2a2a2a;
      border-radius: 6px;
      padding: 8px 14px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .btn:hover { background: #222; color: #ccc; }

    .btn-primary {
      background: #22c55e;
      color: #000;
      border-color: #22c55e;
      font-weight: 600;
    }
    .btn-primary:hover { background: #16a34a; }

    .hotkey-input.listening { border-color: #22c55e; color: #22c55e; }

    .status-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      padding: 8px 10px;
      background: #141414;
      border-radius: 6px;
    }

    .status-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 6px;
    }
    .status-dot.ok { background: #22c55e; }
    .status-dot.bad { background: #ef4444; }

    .hint { font-size: 11px; color: #444; margin-top: 3px; }

    .save-row { margin-top: 16px; display: flex; justify-content: flex-end; }
  </style>
</head>
<body>
  <!-- Dictation pill (floating widget during recording) -->
  <div class="pill" id="pill">
    <div class="pill-dot"></div>
    <div class="pill-waveform" id="waveform"></div>
    <span class="pill-text">Listening</span>
    <span class="pill-time" id="pillTime">0:00</span>
  </div>

  <!-- Settings panel (full view) -->
  <div class="settings" id="settingsPanel">
    <h1>Speak</h1>

    <div class="status-row">
      <span>
        <span class="status-dot" id="accessDot"></span>
        <span id="accessLabel">Checking...</span>
      </span>
      <button class="btn" id="accessBtn">Grant</button>
    </div>

    <div class="field">
      <label>Deepgram API Key</label>
      <input type="password" id="apiKey" placeholder="Enter your Deepgram API key">
    </div>

    <div class="field">
      <label>Hotkey</label>
      <div class="row">
        <input type="text" id="hotkey" class="hotkey-input" readonly>
        <button class="btn" id="hotkeyBtn">Set</button>
      </div>
    </div>

    <div class="field">
      <label>Language</label>
      <select id="language">
        <option value="en">English</option>
        <option value="ru">Russian</option>
        <option value="multi">Multilingual</option>
      </select>
    </div>

    <div class="field">
      <label>Microphone</label>
      <select id="mic">
        <option value="">Loading...</option>
      </select>
    </div>

    <div class="field">
      <label>Custom vocabulary</label>
      <textarea id="keyterms" placeholder="One term per line&#10;e.g. IOTA&#10;Takhir Adilzhanov&#10;GRANIT"></textarea>
      <div class="hint">Names, brands, terms the model often gets wrong. One per line.</div>
    </div>

    <div class="save-row">
      <button class="btn" id="restartBtn">Restart</button>
      <button class="btn btn-primary" id="saveBtn">Save</button>
    </div>
  </div>

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