goblinpassuk.github.io/backup-codes.html at main · goblinpassuk/goblinpassuk.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!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</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 class="secure-notes-choice-page">
    <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 secure-notes-choice-hero" aria-labelledby="secure-notes-title">
        <div class="section-intro">
          <p class="eyebrow">Local Web Tool</p>
          <h1 id="secure-notes-title">Secure Notes</h1>
          <p>Choose how you want to unlock encrypted local notes. YubiKey is available now; passkey and biometric routes can be added later.</p>
        </div>
        <div class="backup-trust-row" aria-label="Secure Notes boundaries">
          <span><b class="status-dot protected" aria-hidden="true"></b> Local only</span>
          <span><i class="security-feature-icon small icon-state-file-vector" aria-hidden="true"></i> Encrypted export</span>
          <span><i class="security-feature-icon small icon-yubikey-vector" aria-hidden="true"></i> Security key ready</span>
        </div>
      </section>

      <section class="section content-section gen2-choice-grid" aria-label="Choose a Secure Notes unlock method">
        <article class="backup-tool-card gen2-choice-card gen2-choice-card-active">
          <div class="gen2-choice-card-top">
            <i class="legend-art icon-yubikey-vector" aria-hidden="true"></i>
            <span class="gen2-choice-status ready">Available now</span>
          </div>
          <h2>YubiKey / Security Key</h2>
          <p>Use the current Secure Notes tool with YubiKey PRF encryption, local browser storage, encrypted export, and import support.</p>
          <a class="primary-button" href="secure-notes-yubikey.html">Open YubiKey notes</a>
        </article>

        <article class="backup-tool-card gen2-choice-card gen2-choice-card-soon" aria-disabled="true">
          <div class="gen2-choice-card-top">
            <span class="gen2-choice-mark windows-hello" aria-hidden="true"></span>
            <span class="gen2-choice-status">Coming later</span>
          </div>
          <h2>Windows Hello Passkey</h2>
          <p>A future notes unlock path for users without a physical YubiKey, built around passkey confirmation before notes can be opened.</p>
          <button class="secondary-button" type="button" disabled>Not ready yet</button>
        </article>

        <article class="backup-tool-card gen2-choice-card gen2-choice-card-soon" aria-disabled="true">
          <div class="gen2-choice-card-top">
            <span class="gen2-choice-mark biometric" aria-hidden="true"></span>
            <span class="gen2-choice-status">Coming later</span>
          </div>
          <h2>Biometrics</h2>
          <p>A future trusted-device route for opening notes with a phone or biometric check, while keeping the stored note file encrypted.</p>
          <button class="secondary-button" type="button" disabled>Not ready yet</button>
        </article>
      </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>
  </body>
</html>