| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>🔑 Whisperkey</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet" /> |
| <link rel="stylesheet" href="/assets/game.css" /> |
| </head> |
| <body> |
| <div id="app"> |
| <details class="hero-wrap" id="dojo-hero" open> |
| <summary><span>🔑 Whisperkey</span><span class="hero-toggle">hide intro</span></summary> |
| <div class="hero"> |
| <h1>🔑 Whisperkey</h1> |
| <p>Other jailbreak games are a black box. This one is an <b>X-ray</b>. Whisper a secret key out of a small AI guardian while a <b>real open-source firewall</b> (Unplug) defends it - and watch <b>exactly which shield catches you, and why</b>.</p> |
| </div> |
| </details> |
| <div id="demo-banner" class="demo-banner" style="display:none">Demo mode - no guardian model connected. Set MODAL_ENDPOINT + MODAL_API_KEY on the Space.</div> |
| <nav class="tabs"> |
| <button class="tab-btn active" data-tab="play">🌲 Enter the Wood</button> |
| <button class="tab-btn" data-tab="leaderboard">🏆 Leaderboard</button> |
| <button class="tab-btn" data-tab="help">📖 How to play</button> |
| </nav> |
| <section id="panel-play" class="tab-panel active"> |
| <div class="model-row" id="model-row"></div> |
| <div class="game-row"> |
| <div id="hud"></div> |
| <div> |
| <div id="chat-log" class="chat-log guardian-chat"></div> |
| <div class="input-row"> |
| <input id="msg-input" placeholder="Whisper to the guardian… (/ to focus)" /> |
| <button id="send-btn" class="btn btn-primary">Speak</button> |
| </div> |
| <div class="input-row"> |
| <input id="name-input" placeholder="your name (leaderboard)" /> |
| <input id="guess-input" placeholder="think you have the key? (Ctrl+Enter)" /> |
| <button id="guess-btn" class="btn btn-secondary">🔓 Submit guess</button> |
| </div> |
| <div id="result-area"></div> |
| <div style="margin-top:10px;display:flex;gap:8px;flex-wrap:wrap"> |
| <button id="restart-level" class="btn btn-sm btn-secondary">↻ Restart level</button> |
| <button id="restart-game" class="btn btn-sm btn-secondary">⤺ Restart from L1</button> |
| <button id="concede" class="btn btn-sm btn-secondary">🏳️ Concede</button> |
| <button id="sound-toggle" class="btn btn-sm btn-secondary" title="toggle sound effects">🔇 sound off</button> |
| </div> |
| </div> |
| </div> |
| </section> |
| <section id="panel-leaderboard" class="tab-panel"> |
| <p>Ranked by <b>fewest tokens</b> to crack (then fastest).</p> |
| <table class="lb-table"><thead><tr><th>Player</th><th>Level</th><th>Tokens</th><th>Seconds</th></tr></thead><tbody id="lb-body"></tbody></table> |
| <button id="lb-refresh" class="btn btn-sm btn-secondary" style="margin-top:10px">↻ Refresh</button> |
| </section> |
| <section id="panel-help" class="tab-panel"> |
| <h3>The X-ray</h3> |
| <p>A small AI guardian holds a fake API key. A real, open-source firewall (Unplug) sits between you and it. When a shield stops you, the game shows you which layer fired and why.</p> |
| <h3>Five levels</h3> |
| <ol> |
| <li>🧚 Pip - no shields. Just ask.</li> |
| <li>🌿 Bramblewattle - regex shield.</li> |
| <li>🦉 Sable - hardened guardian prompt.</li> |
| <li>🗿 Output Warden - scrubs the verbatim key on the way out.</li> |
| <li>🌑 Heart of the Wood - every layer + unplug-tiny ML.</li> |
| </ol> |
| </section> |
| </div> |
| <script src="/assets/sound.js"></script> |
| <script src="/assets/game.js"></script> |
| </body> |
| </html> |
|
|
