goblinpass-flow-test.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GoblinPass Flow Test</title>
    <link rel="stylesheet" href="assets/css/style.css?v=20260615-flow-test" />
    <style>
      body.flow-test-page {
        min-height: 100vh;
        background:
          radial-gradient(circle at 50% 38%, rgba(119, 240, 90, 0.16), transparent 22rem),
          radial-gradient(circle at 18% 20%, rgba(0, 176, 255, 0.08), transparent 18rem),
          linear-gradient(145deg, #020806 0%, #07120c 46%, #020503 100%);
      }

      .flow-test-shell {
        width: min(1320px, calc(100% - 36px));
        margin: 0 auto;
        padding: 34px 0 24px;
      }

      .flow-test-title {
        text-align: center;
        margin-bottom: 28px;
      }

      .flow-test-title h1 {
        margin: 0;
        color: var(--text);
        font-size: clamp(2rem, 4.6vw, 4.25rem);
        line-height: 1.02;
      }

      .flow-test-title strong {
        color: var(--accent);
      }

      .flow-test-title p {
        margin: 10px 0 0;
        color: var(--text);
        font-size: clamp(1rem, 2vw, 1.45rem);
        font-weight: 850;
      }

      .flow-test-title span {
        color: var(--accent);
      }

      .flow-input-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1.05fr auto 0.95fr;
        gap: 14px;
        align-items: stretch;
      }

      .flow-card {
        position: relative;
        min-width: 0;
        border: 1px solid rgba(119, 240, 90, 0.28);
        border-radius: 14px;
        background: rgba(2, 10, 6, 0.74);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
        padding: 18px;
      }

      .flow-card.blue { border-color: rgba(66, 183, 255, 0.56); }
      .flow-card.red { border-color: rgba(255, 81, 74, 0.62); }
      .flow-card.gold { border-color: rgba(255, 209, 45, 0.62); }
      .flow-card.green { border-color: rgba(119, 240, 90, 0.68); }

      .flow-card h2,
      .flow-card h3 {
        margin: 0;
        color: var(--accent);
        font-size: 1rem;
        text-transform: uppercase;
      }

      .flow-card.blue h2 { color: #55b9ff; }
      .flow-card.red h2 { color: #ff5c4f; }
      .flow-card.gold h2 { color: #ffd32d; }

      .flow-card p {
        color: var(--text);
        margin: 12px 0 0;
        line-height: 1.45;
      }

      .flow-plus,
      .flow-equals {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        align-self: center;
        border: 2px solid rgba(119, 240, 90, 0.58);
        border-radius: 50%;
        background: rgba(2, 10, 6, 0.88);
        color: var(--accent);
        font-size: 2rem;
        font-weight: 950;
        box-shadow: 0 0 26px rgba(119, 240, 90, 0.18);
      }

      .flow-equals {
        border: 0;
        background: transparent;
        box-shadow: none;
      }

      .flow-mini-screen,
      .flow-password-box {
        margin-top: 18px;
        border: 1px solid rgba(119, 240, 90, 0.28);
        border-radius: 10px;
        background: rgba(3, 17, 11, 0.88);
        padding: 14px;
      }

      .flow-domain-pill,
      .flow-password-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.42);
        color: var(--text);
        font-weight: 850;
        padding: 7px 12px;
      }

      .flow-domain-pill::before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #55b9ff;
      }

      .flow-globe {
        width: 58px;
        height: 58px;
        margin: 18px auto 0;
        border: 4px solid #55b9ff;
        border-radius: 50%;
        box-shadow: inset 0 0 0 2px rgba(85, 185, 255, 0.2), 0 0 22px rgba(85, 185, 255, 0.24);
      }

      .flow-secret-input {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 26px;
        border: 1px solid rgba(255, 81, 74, 0.64);
        border-radius: 10px;
        background: rgba(255, 81, 74, 0.08);
        padding: 14px;
      }

      .flow-dots {
        letter-spacing: 6px;
        color: var(--text);
        font-size: 1.45rem;
      }

      .flow-factor-row,
      .flow-optional-row {
        display: flex;
        min-height: 88px;
        align-items: center;
        justify-content: center;
        gap: 18px;
        margin-top: 16px;
      }

      .flow-or {
        color: var(--text);
        font-weight: 900;
      }

      .flow-result-card {
        text-align: center;
        border-color: rgba(119, 240, 90, 0.88);
        background:
          radial-gradient(circle at 50% 35%, rgba(119, 240, 90, 0.22), rgba(3, 17, 11, 0.9) 68%);
        box-shadow: 0 0 44px rgba(119, 240, 90, 0.2);
      }

      .flow-lock {
        width: 62px;
        height: 76px;
        margin: 22px auto 14px;
        position: relative;
        border-radius: 10px;
        background: var(--accent);
        box-shadow: 0 0 28px rgba(119, 240, 90, 0.32);
      }

      .flow-lock::before {
        content: "";
        position: absolute;
        left: 13px;
        top: -34px;
        width: 36px;
        height: 44px;
        border: 8px solid var(--accent);
        border-bottom: 0;
        border-radius: 28px 28px 0 0;
      }

      .flow-password-pill {
        border: 1px solid rgba(119, 240, 90, 0.86);
        color: var(--accent);
      }

      .flow-mid-grid {
        display: grid;
        grid-template-columns: 0.85fr 1.28fr 0.95fr;
        gap: 22px;
        align-items: center;
        margin-top: 38px;
      }

      .flow-how-list {
        display: grid;
        gap: 20px;
        margin-top: 20px;
      }

      .flow-how-step {
        display: grid;
        grid-template-columns: 36px 48px 1fr;
        gap: 14px;
        align-items: center;
      }

      .flow-step-number {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--accent);
        color: #021006;
        font-weight: 950;
      }

      .flow-step-number.red { background: #ff5046; }
      .flow-step-number.gold { background: #ffd32d; }

      .flow-engine {
        text-align: center;
        border-color: rgba(119, 240, 90, 0.58);
        background: radial-gradient(circle at 50% 38%, rgba(119, 240, 90, 0.18), rgba(3, 17, 11, 0.88) 62%);
      }

      .flow-shield {
        display: grid;
        place-items: center;
        width: min(420px, 100%);
        aspect-ratio: 1 / 1.1;
        margin: 0 auto;
        clip-path: polygon(50% 0, 92% 18%, 84% 76%, 50% 100%, 16% 76%, 8% 18%);
        border: 3px solid var(--accent);
        background:
          radial-gradient(circle at 50% 52%, rgba(119, 240, 90, 0.28), rgba(2, 10, 6, 0.9) 55%);
        box-shadow: inset 0 0 32px rgba(119, 240, 90, 0.24), 0 0 42px rgba(119, 240, 90, 0.2);
      }

      .flow-engine-face {
        display: grid;
        place-items: center;
        width: 96px;
        height: 96px;
        border: 2px solid rgba(119, 240, 90, 0.7);
        border-radius: 24px;
        color: var(--accent);
        font-size: 2rem;
        font-weight: 950;
        box-shadow: 0 0 30px rgba(119, 240, 90, 0.18);
      }

      .flow-engine h2 {
        margin: 18px 0 8px;
        color: var(--accent);
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .flow-architecture {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        border: 1px solid rgba(119, 240, 90, 0.28);
        border-radius: 10px;
        background: rgba(2, 10, 6, 0.66);
        padding: 12px 14px;
      }

      .flow-output-stack {
        display: grid;
        gap: 20px;
      }

      .flow-output-card {
        border-color: rgba(119, 240, 90, 0.58);
      }

      .flow-check-list {
        list-style: none;
        margin: 14px 0 0;
        padding: 0;
        color: var(--text);
      }

      .flow-check-list li {
        margin-top: 7px;
      }

      .flow-check-list li::before {
        content: "✓";
        color: var(--accent);
        font-weight: 950;
        margin-right: 8px;
      }

      .flow-local-note {
        display: flex;
        align-items: center;
        gap: 14px;
        width: min(390px, 100%);
        margin: 18px auto 0;
        border: 1px solid rgba(119, 240, 90, 0.28);
        border-radius: 10px;
        background: rgba(5, 20, 11, 0.78);
        padding: 14px;
      }

      .flow-why {
        margin-top: 34px;
        border: 1px solid rgba(119, 240, 90, 0.34);
        border-radius: 14px;
        background: rgba(5, 20, 11, 0.72);
        padding: 24px;
      }

      .flow-why h2 {
        margin: 0 0 20px;
        text-align: center;
        color: var(--accent);
        letter-spacing: 0.22em;
        text-transform: uppercase;
      }

      .flow-why-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
      }

      .flow-why-card {
        min-width: 0;
        border-left: 1px solid rgba(119, 240, 90, 0.16);
        text-align: center;
        padding: 12px 18px;
      }

      .flow-why-card:first-child {
        border-left: 0;
      }

      .flow-why-card h3 {
        color: var(--accent);
        font-size: 1rem;
        text-transform: uppercase;
      }

      .flow-footer-brand {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        align-items: center;
        justify-content: space-between;
        margin-top: 24px;
        border-top: 1px solid rgba(119, 240, 90, 0.18);
        padding-top: 22px;
      }

      .flow-brand-lockup {
        display: flex;
        gap: 14px;
        align-items: center;
      }

      .flow-brand-mark {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border: 1px solid rgba(119, 240, 90, 0.52);
        border-radius: 14px;
        color: var(--accent);
        font-weight: 950;
      }

      .flow-brand-lockup strong {
        display: block;
        color: var(--accent);
        font-size: 2rem;
        letter-spacing: 0.14em;
      }

      .flow-footer-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .flow-footer-pills span {
        border: 1px solid rgba(119, 240, 90, 0.34);
        border-radius: 8px;
        color: var(--text);
        padding: 10px 16px;
      }

      @media (max-width: 1100px) {
        .flow-input-grid,
        .flow-mid-grid,
        .flow-why-grid {
          grid-template-columns: 1fr;
        }

        .flow-plus,
        .flow-equals {
          justify-self: center;
        }
      }

      @media (max-width: 620px) {
        .flow-test-shell {
          width: min(100% - 22px, 1320px);
        }

        .flow-card {
          padding: 14px;
        }

        .flow-how-step {
          grid-template-columns: 34px 40px 1fr;
        }
      }
    </style>
  </head>
  <body class="flow-test-page">
    <main class="flow-test-shell">
      <section class="flow-test-title" aria-labelledby="flow-title">
        <h1 id="flow-title">Website ID + Master Password + Unlock Factor = <strong>Your Password</strong></h1>
        <p>Zero-knowledge. Stateless. <span>You stay in control.</span></p>
      </section>

      <section class="flow-input-grid" aria-label="Password inputs">
        <article class="flow-card blue">
          <h2>1. Website ID</h2>
          <p>Enter the website or account ID.</p>
          <div class="flow-mini-screen">
            <span class="flow-domain-pill">example.com</span>
            <div class="flow-globe" aria-hidden="true"></div>
          </div>
        </article>

        <div class="flow-plus" aria-hidden="true">+</div>

        <article class="flow-card red">
          <h2>2. Master Password</h2>
          <p>Only you know this secret.</p>
          <div class="flow-secret-input">
            <i class="security-feature-icon small icon-master-password-vector" aria-hidden="true"></i>
            <span class="flow-dots">••••••••</span>
          </div>
        </article>

        <div class="flow-plus" aria-hidden="true">+</div>

        <article class="flow-card gold">
          <h2>3. Unlock Factor</h2>
          <p>Prove it is you with your chosen unlock method.</p>
          <div class="flow-factor-row">
            <i class="legend-art icon-yubikey-vector" aria-hidden="true"></i>
            <span class="flow-or">or</span>
            <span class="gen2-choice-mark biometric" aria-hidden="true"></span>
          </div>
        </article>

        <div class="flow-plus" aria-hidden="true">+</div>

        <article class="flow-card green">
          <h2>(Optional) Additional Factors</h2>
          <p>Google login, trusted device, and more.</p>
          <div class="flow-optional-row">
            <i class="legend-art icon-google-factor-vector" aria-hidden="true"></i>
            <i class="legend-art icon-trusted-device-vector" aria-hidden="true"></i>
          </div>
        </article>

        <div class="flow-equals" aria-hidden="true">=</div>

        <article class="flow-card flow-result-card">
          <h2>Your Unique Password</h2>
          <div class="flow-lock" aria-hidden="true"></div>
          <span class="flow-password-pill">xR7!Qm#8Lw...</span>
          <p>Strong. Unique. Never stored online.</p>
        </article>
      </section>

      <section class="flow-mid-grid" aria-label="How GoblinPass works">
        <article class="flow-card">
          <h2>How it works</h2>
          <div class="flow-how-list">
            <div class="flow-how-step">
              <span class="flow-step-number">1</span>
              <i class="security-feature-icon small icon-trusted-device-vector" aria-hidden="true"></i>
              <p>You provide the Website ID.</p>
            </div>
            <div class="flow-how-step">
              <span class="flow-step-number red">2</span>
              <i class="security-feature-icon small icon-master-password-vector" aria-hidden="true"></i>
              <p>Your Master Password adds your secret.</p>
            </div>
            <div class="flow-how-step">
              <span class="flow-step-number gold">3</span>
              <i class="security-feature-icon small icon-yubikey-vector" aria-hidden="true"></i>
              <p>Unlock factor proves your identity.</p>
            </div>
            <div class="flow-how-step">
              <span class="flow-step-number">4</span>
              <i class="security-feature-icon small icon-google-factor-vector" aria-hidden="true"></i>
              <p>Optional factors add another layer.</p>
            </div>
            <div class="flow-how-step">
              <span class="flow-step-number">5</span>
              <i class="security-feature-icon small icon-state-file-vector" aria-hidden="true"></i>
              <p>The engine generates a unique password locally.</p>
            </div>
          </div>
        </article>

        <article class="flow-card flow-engine">
          <div class="flow-shield">
            <div>
              <div class="flow-engine-face">GP</div>
              <h2>GoblinPass Engine</h2>
              <div class="flow-architecture">
                <span>Zero-knowledge</span>
                <span>PBKDF2</span>
                <span>HMAC</span>
                <span>HKDF</span>
                <span>SHA-256</span>
              </div>
            </div>
          </div>
          <div class="flow-local-note">
            <i class="security-feature-icon small icon-state-file-vector" aria-hidden="true"></i>
            <p>All processing happens locally on your device. Nothing is sent to any server.</p>
          </div>
        </article>

        <div class="flow-output-stack">
          <article class="flow-card flow-output-card">
            <h2>Generated Password</h2>
            <div class="flow-factor-row">
              <div class="flow-lock" aria-hidden="true"></div>
              <span class="flow-password-pill">xR7!Qm#8Lw...</span>
            </div>
            <p>Copied to clipboard or auto-filled.</p>
          </article>

          <article class="flow-card flow-output-card">
            <h2>Security Map (Auto-record)</h2>
            <p>Your settings are securely recorded locally.</p>
            <ul class="flow-check-list">
              <li>Website / Account ID</li>
              <li>Security Method</li>
              <li>Hint optional</li>
              <li>Password Length</li>
              <li>Counter</li>
            </ul>
            <p>Encrypted local storage: AES-256-GCM</p>
          </article>
        </div>
      </section>

      <section class="flow-why" aria-labelledby="why-flow-title">
        <h2 id="why-flow-title">Why GoblinPass?</h2>
        <div class="flow-why-grid">
          <article class="flow-why-card">
            <i class="legend-art icon-state-file-vector" aria-hidden="true"></i>
            <h3>Stateless &amp; Private</h3>
            <p>No servers store your passwords. Ever.</p>
          </article>
          <article class="flow-why-card">
            <i class="legend-art icon-yubikey-vector" aria-hidden="true"></i>
            <h3>Hardware-backed</h3>
            <p>YubiKey PRF adds a powerful hardware layer.</p>
          </article>
          <article class="flow-why-card">
            <div class="flow-lock" aria-hidden="true"></div>
            <h3>Strong Encryption</h3>
            <p>AES-256-GCM protects your local data and map.</p>
          </article>
          <article class="flow-why-card">
            <i class="legend-art icon-copy-only-vector" aria-hidden="true"></i>
            <h3>Smart Auto-record</h3>
            <p>Remember your setup without repeating it.</p>
          </article>
          <article class="flow-why-card">
            <i class="legend-art icon-trusted-device-vector" aria-hidden="true"></i>
            <h3>Local Only</h3>
            <p>Your data stays on your device.</p>
          </article>
        </div>
      </section>

      <footer class="flow-footer-brand">
        <div class="flow-brand-lockup">
          <span class="flow-brand-mark">GP</span>
          <div>
            <strong>GoblinPass</strong>
            <span>Remember One Secret. Generate Millions.</span>
          </div>
        </div>
        <div class="flow-footer-pills">
          <span>Zero-Knowledge</span>
          <span>Open Source Friendly</span>
          <span>Privacy by Design</span>
        </div>
      </footer>
    </main>
  </body>
</html>