secure-notes-yubikey.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GoblinPass - Secure Notes YubiKey</title>
    <link rel="stylesheet" href="assets/css/style.css?v=20260615-secure-notes-options" />
    <meta name="author" content="Carl Hatton">
    <meta name="copyright" content="Carl Hatton">
    <meta name="application-name" content="GoblinPass">
  </head>
  <body>
    <header class="site-header">
      <nav class="nav" aria-label="Main navigation">
        <a class="brand" href="index.html" aria-label="GoblinPass home">
          <span class="brand-mark" aria-hidden="true">GP</span>
          <span>GoblinPass</span>
        </a>
        <button id="navToggle" class="nav-toggle" type="button" aria-label="Open navigation menu" aria-controls="navLinks" aria-expanded="false">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <div id="navLinks" class="nav-links">
          <a class="nav-link" href="index.html">Home</a>
          <details class="nav-dropdown">
            <summary>Web Tools</summary>
            <div class="dropdown-menu">
              <a href="app.html">Stateless Gen 1.0</a>
              <a href="stateless-gen2.html">Stateless Gen 2.0 (Beta)</a>
              <a href="stateless-gen3.html">Stateless Gen 3.0 (Beta)</a>
              <a href="gen4/index.html">Stateless Gen 4.0</a>
              <a href="qr-pocket/index.html">QR Pocket</a>
              <a href="checker.html">Password Checker</a>
              <a href="backup-codes.html">Secure Notes</a>
              <a href="goblinpass/offline-id-logbook/">Offline ID Logbook</a>
              
              <a href="app.html#build-fork">Build Fork</a>
            </div>
          </details>
          <details class="nav-dropdown">
            <summary>Security</summary>
            <div class="dropdown-menu">
              <a href="security.html">Security Overview</a>
              <a href="security-model.html">Security Model</a>
              <a href="security.html#trusted-device-protection">Trusted Device Protection</a>
              <a href="security.html#security-key">Additional Secret</a>
              <a href="security.html#google-security-factor">Google Security Factor</a>
              <a href="security.html#yubikey-prf">YubiKey PRF</a>
              <a href="security.html#copy-password-only">Copy Password Only</a>
            </div>
          </details>
          <details class="nav-dropdown">
            <summary>Guide</summary>
            <div class="dropdown-menu">
              <a href="guide.html">Guide 1.0</a>
              <a href="guide2.html">Guide 2.0</a>
            </div>
          </details>
          <a class="nav-link" href="faq.html">FAQ</a>
          <details class="nav-dropdown">
            <summary>About Us</summary>
            <div class="dropdown-menu">
              <a href="about-me.html">About Me</a>
              <a href="about.html">About GoblinPass</a>
              <a href="github.html">Why We Use GitHub</a>
              <a href="lesspass.html">GoblinPass vs LessPass</a>
            </div>
          </details>
          <a class="nav-link build-link" href="app.html">Stateless Gen 1.0</a>
        </div>
      </nav>
    </header>

    <main>
      <section class="section backup-hero" aria-labelledby="backup-title">
        <div class="section-intro">
          <p class="eyebrow">YubiKey notes</p>
          <h1 id="backup-title">Secure Notes</h1>
          <p>
            Save secure notes locally in your browser. New exports are
            encrypted with a secret produced by your physical YubiKey/security
            key, so the file can be imported in another supported browser with
            the same key.
          </p>
        </div>
        <div class="backup-trust-row" aria-label="Privacy promises">
          <span><b class="status-dot protected" aria-hidden="true"></b> Local only</span>
          <span><i class="security-feature-icon small icon-yubikey-vector" aria-hidden="true"></i> YubiKey PRF unlock</span>
          <span><i class="security-feature-icon small icon-copy-only-vector" aria-hidden="true"></i> Portable encrypted file</span>
        </div>
      </section>

      <section class="section content-section backup-tool-grid" aria-label="Secure notes tool">
        <article class="backup-tool-card">
          <div class="feature-card-heading">
            <i class="legend-art icon-yubikey-vector" aria-hidden="true"></i>
            <div>
              <p class="eyebrow">Step 1</p>
              <h2>Set up your YubiKey</h2>
            </div>
          </div>
          <p>
            Register a PRF-capable physical security key, then use that same
            key whenever you unlock, save, export, or import your encrypted
            secure notes.
          </p>
          <p class="backup-choice-note">
            If Windows shows a passkey picker, choose <strong>Security key</strong>.
            This tool is intended for a physical YubiKey/security key, not
            Windows Hello.
          </p>
          <div class="backup-actions">
            <button id="setupBtn" class="primary-button" type="button">Register YubiKey</button>
            <button id="unlockBtn" class="secondary-button" type="button">Sign in / Show Notes</button>
            <button id="lockBtn" class="secondary-button" type="button" disabled>Lock</button>
          </div>
          <p id="status" class="backup-status">Status: ready. Register a PRF-capable YubiKey first.</p>
          <div class="backup-storage-strip">
            <span id="lockIndicator" class="lock-indicator locked">Locked</span>
            <span>Encryption: YubiKey PRF secret</span>
            <span>Last saved: <strong id="lastSaved">Never</strong></span>
          </div>
        </article>

        <article class="backup-tool-card backup-manager-card">
          <div class="feature-card-heading">
            <span class="backup-code-icon" aria-hidden="true">2FA</span>
            <div>
              <p class="eyebrow">Step 2</p>
              <h2>Encrypted secure notes</h2>
            </div>
          </div>
          <p>
            Once unlocked, paste or edit your secure notes below. Press save to
            encrypt them with your YubiKey PRF secret. Exported files include
            public unlock metadata, but not the YubiKey secret itself.
          </p>
          <label for="noteContent">Secure notes</label>
          <textarea id="noteContent" rows="12" placeholder="Locked - sign in with your YubiKey first" disabled></textarea>
          <div class="backup-actions">
            <button id="saveBtn" class="primary-button" type="button" disabled>Encrypt and Save</button>
            <button id="clearBtn" class="secondary-button" type="button" disabled>Clear input</button>
            <button id="exportBtn" class="secondary-button" type="button">Export encrypted file</button>
            <button id="importBtn" class="secondary-button" type="button">Import encrypted file</button>
            <button id="purgeBtn" class="danger-button purge-button" type="button">Purge Entries</button>
          </div>
          <input type="file" id="fileInput" accept="application/json,.json,.enc" hidden>
        </article>

        <aside class="backup-tool-card backup-warning-card">
          <h2>Important</h2>
          <p>
            This is local-only. No secure notes are sent to GoblinPass, Google,
            or any server.
          </p>
          <p>
            If you lose the YubiKey/security key used for PRF encryption,
            GoblinPass cannot recover your notes.
          </p>
          <p>
            Exported files are encrypted for the same YubiKey, but keep them
            somewhere private. A fully compromised computer can still read notes
            after you unlock and display them.
          </p>
        </aside>
      </section>
    </main>

    <footer class="site-footer">
      <div class="footer-brand">
        <p><strong>GoblinPass</strong></p>
        <p>Tiny vault. Minimal secrets.</p>
        <p>Publicly viewable source. Local first. No password storage.</p>
      </div>
      <nav class="footer-links" aria-label="Footer navigation">
        <a href="index.html">Home</a>
        <a href="app.html">Web Tools</a>
        <a href="checker.html">Password Checker</a>
        <a href="backup-codes.html">Secure Notes</a>
              <a href="goblinpass/offline-id-logbook/">Offline ID Logbook</a>
        
        <a href="security.html">Security</a>
      </nav>
      <p class="footer-attribution">GoblinPass &copy; 2026 Carl Hatton &middot; <a href="https://github.com/goblinpassuk/goblinpassuk.github.io/blob/main/LICENSE">License</a></p>
    </footer>

    <script src="assets/js/app.js"></script>
    <script src="assets/js/backup-codes.js?v=20260615-secure-notes-options"></script>
  </body>
</html>