popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Base64 Encoder / Decoder</title>
  <link rel="stylesheet" href="popup.css" />
</head>
<body>

  <header class="header">
    <div class="header__left">
      <img src="icons/icon32.png" alt="" class="header__icon" aria-hidden="true" />
      <span class="header__title">Base64</span>
    </div>
    <div class="header__controls">
      <button id="themeToggle" class="btn-icon" aria-label="Toggle dark mode" title="Toggle dark mode">🌙</button>
    </div>
  </header>

  <!-- ── Options bar ──────────────────────────────────────────── -->
  <div class="options-bar">
    <label class="toggle-label">
      <input type="checkbox" id="urlSafeToggle" />
      <span>URL-safe</span>
    </label>
    <label class="toggle-label">
      <input type="checkbox" id="wrapToggle" />
      <span>Wrap at 76</span>
    </label>
    <label class="toggle-label">
      <input type="checkbox" id="autoToggle" checked />
      <span>Auto-detect</span>
    </label>
  </div>

  <!-- ── Mode tabs ─────────────────────────────────────────────── -->
  <div class="tabs" role="tablist" aria-label="Input mode">
    <button class="tab tab--active" id="tabText" role="tab" aria-selected="true"  aria-controls="panelText">Text</button>
    <button class="tab"             id="tabFile" role="tab" aria-selected="false" aria-controls="panelFile">File</button>
  </div>

  <!-- ── Text panel ────────────────────────────────────────────── -->
  <div id="panelText" class="panel" role="tabpanel" aria-labelledby="tabText">

    <div class="pane">
      <div class="pane__header">
        <span class="pane__label" id="inputLabel">Input</span>
        <div class="pane__actions">
          <button class="btn-small" id="clearInputBtn" aria-label="Clear input">Clear</button>
          <button class="btn-small" id="pasteBtn" aria-label="Paste from clipboard">Paste</button>
        </div>
      </div>
      <div class="textarea-wrap">
        <textarea
          id="inputEl"
          class="textarea"
          rows="5"
          spellcheck="false"
          autocorrect="off"
          autocapitalize="off"
          placeholder="Type or paste text / Base64…"
          aria-labelledby="inputLabel"
        ></textarea>
        <span id="charCount" class="char-count" aria-live="polite"></span>
      </div>
    </div>

    <!-- ── Action buttons ─────────────────────────────────────── -->
    <div class="actions">
      <button class="btn btn--primary" id="encodeBtn">Encode →</button>
      <button class="btn btn--swap"    id="swapBtn"   aria-label="Swap input and output">⇅</button>
      <button class="btn btn--primary" id="decodeBtn">← Decode</button>
    </div>

    <div class="pane">
      <div class="pane__header">
        <span class="pane__label" id="outputLabel">Output</span>
        <div class="pane__actions">
          <button class="btn-small" id="copyOutputBtn" aria-label="Copy output">Copy</button>
          <button class="btn-small" id="downloadTxtBtn" aria-label="Download as .txt">↓ .txt</button>
        </div>
      </div>
      <div class="textarea-wrap">
        <textarea
          id="outputEl"
          class="textarea textarea--output"
          rows="5"
          spellcheck="false"
          autocorrect="off"
          readonly
          placeholder="Result will appear here…"
          aria-labelledby="outputLabel"
          aria-live="polite"
        ></textarea>
      </div>
    </div>

    <!-- ── Inline error / info ─────────────────────────────────── -->
    <div id="statusBar" class="status-bar" role="alert" aria-live="assertive"></div>

  </div><!-- /panelText -->

  <!-- ── File panel ────────────────────────────────────────────── -->
  <div id="panelFile" class="panel panel--hidden" role="tabpanel" aria-labelledby="tabFile">

    <div
      id="dropZone"
      class="drop-zone"
      role="button"
      tabindex="0"
      aria-label="Drop a file here or click to browse"
    >
      <span class="drop-zone__icon" aria-hidden="true">📂</span>
      <span class="drop-zone__text">Drop a file here<br/>or <u>click to browse</u></span>
      <input type="file" id="fileInput" class="file-input" aria-hidden="true" tabindex="-1" />
    </div>

    <div id="fileInfo" class="file-info" hidden>
      <span id="fileName" class="file-info__name"></span>
      <span id="fileSize" class="file-info__size"></span>
    </div>

    <div class="actions actions--file">
      <button class="btn btn--primary btn--full" id="encodeFileBtn" disabled>Encode File → Base64</button>
    </div>

    <div class="pane">
      <div class="pane__header">
        <span class="pane__label">Base64 Output</span>
        <div class="pane__actions">
          <button class="btn-small" id="copyFileOutputBtn" aria-label="Copy file output">Copy</button>
          <button class="btn-small" id="downloadFileTxtBtn" aria-label="Download as .txt">↓ .txt</button>
        </div>
      </div>
      <div class="textarea-wrap">
        <textarea
          id="fileOutputEl"
          class="textarea textarea--output"
          rows="5"
          spellcheck="false"
          readonly
          placeholder="Encoded file will appear here…"
          aria-live="polite"
        ></textarea>
      </div>
    </div>

    <div id="fileStatusBar" class="status-bar" role="alert" aria-live="assertive"></div>

  </div><!-- /panelFile -->

  <!-- ── Footer ────────────────────────────────────────────────── -->
  <footer class="footer">
    <span class="footer__name">Base64 Encoder / Decoder v1.0.0</span>
    <a
      class="footer__cta"
      href="https://buymeacoffee.com/ejcenteno"
      target="_blank"
      rel="noopener noreferrer"
      title="Support the developer"
    >☕ Buy me a coffee</a>
  </footer>

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