popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JWT Encoder/Decoder</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <header class="header">
    <h1 class="header__title">JWT Encoder/Decoder</h1>
    <button id="themeToggle" class="theme-toggle" aria-label="Toggle dark mode">
      <span class="theme-toggle__icon">◐</span>
    </button>
  </header>

  <!-- Tab Navigation -->
  <div class="tabs" role="tablist">
    <button id="decodeTab" class="tab" role="tab" aria-selected="true" aria-controls="decodePanel">
      Decode JWT
    </button>
    <button id="encodeTab" class="tab" role="tab" aria-selected="false" aria-controls="encodePanel">
      Encode JWT
    </button>
  </div>

  <!-- Decode Panel -->
  <div id="decodePanel" class="panel" role="tabpanel" aria-labelledby="decodeTab">
    <div class="input-section">
      <label for="jwtInput" class="label">
        Paste JWT Token
        <span class="label__hint">Use Ctrl+V (Cmd+V on Mac) to paste</span>
      </label>
      <div class="input-wrap">
        <textarea 
          id="jwtInput" 
          class="textarea" 
          placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
          spellcheck="false"
          rows="4"
        ></textarea>
        <button id="clearDecodeBtn" class="clear-btn" aria-label="Clear input">×</button>
      </div>
      <div class="actions">
        <button id="decodeBtn" class="btn btn--primary">Decode</button>
      </div>
    </div>

    <div id="statusBarDecode" class="status-bar"></div>

    <!-- JWT Parts Display -->
    <div id="jwtOutput" class="jwt-output" style="display: none;">
      <!-- Header Section -->
      <div class="jwt-section">
        <button class="jwt-section__header" data-section="header">
          <span class="jwt-section__label">Header</span>
          <span class="jwt-section__tag jwt-section__tag--header">JOSE</span>
          <span class="jwt-section__chevron">▼</span>
        </button>
        <div class="jwt-section__content" data-section-content="header">
          <pre id="headerContent" class="jwt-section__json"></pre>
          <button class="copy-btn" data-copy="header">Copy</button>
        </div>
      </div>

      <!-- Payload Section -->
      <div class="jwt-section">
        <button class="jwt-section__header" data-section="payload">
          <span class="jwt-section__label">Payload</span>
          <span class="jwt-section__tag jwt-section__tag--payload">Claims</span>
          <span id="expiryBadge" class="jwt-section__badge" style="display: none;"></span>
          <span class="jwt-section__chevron">▼</span>
        </button>
        <div class="jwt-section__content" data-section-content="payload">
          <pre id="payloadContent" class="jwt-section__json"></pre>
          <div id="claimsInfo" class="claims-info"></div>
          <button class="copy-btn" data-copy="payload">Copy</button>
        </div>
      </div>

      <!-- Signature Section -->
      <div class="jwt-section">
        <button class="jwt-section__header" data-section="signature">
          <span class="jwt-section__label">Signature</span>
          <span class="jwt-section__tag jwt-section__tag--signature">Verify</span>
          <span class="jwt-section__chevron">▼</span>
        </button>
        <div class="jwt-section__content" data-section-content="signature">
          <div class="signature-display">
            <code id="signatureContent" class="signature-code"></code>
          </div>
          <p class="signature-info">
            Signature verification requires the secret key. Use the Encode tab to sign tokens.
          </p>
          <button class="copy-btn" data-copy="signature">Copy</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Encode Panel -->
  <div id="encodePanel" class="panel panel--hidden" role="tabpanel" aria-labelledby="encodeTab">
    <div class="input-section">
      <label for="payloadInput" class="label">
        Payload (JSON)
        <span class="label__hint">Standard claims: sub, iss, aud, exp, nbf, iat, jti</span>
      </label>
      <textarea 
        id="payloadInput" 
        class="textarea" 
        placeholder='{"sub": "1234567890", "name": "John Doe", "iat": 1516239022}'
        spellcheck="false"
        rows="8"
      ></textarea>

      <label for="secretInput" class="label">
        Secret Key (HS256)
        <span class="label__hint">Used for HMAC-SHA256 signing</span>
      </label>
      <input 
        id="secretInput" 
        type="password" 
        class="input" 
        placeholder="your-256-bit-secret"
        spellcheck="false"
      >
      <label class="checkbox-label">
        <input id="showSecretToggle" type="checkbox">
        <span>Show secret</span>
      </label>

      <div class="actions">
        <button id="encodeBtn" class="btn btn--primary">Generate JWT</button>
      </div>
    </div>

    <div id="statusBarEncode" class="status-bar"></div>

    <div id="encodedOutput" class="output-section" style="display: none;">
      <label class="label">Encoded JWT</label>
      <textarea 
        id="encodedJWT" 
        class="textarea textarea--output" 
        readonly 
        rows="6"
        aria-live="polite"
      ></textarea>
      <div class="actions">
        <button id="copyEncodedBtn" class="btn btn--secondary">Copy JWT</button>
        <button id="downloadBtn" class="btn btn--secondary">↓ .txt</button>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="footer">
    <span class="footer__info">JWT Encoder/Decoder v1.0.0</span>
    <a href="https://buymeacoffee.com/ejcenteno" target="_blank" class="footer__link" title="Support the developer">
      ☕ Buy me a coffee
    </a>
  </footer>

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