| | <!doctype html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8" /> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| | <title>Quick Draw</title> |
| | <script type="module" crossorigin src="/assets/index-ChKWcDIf.js"></script> |
| | <link rel="stylesheet" crossorigin href="/assets/index-wdrp1RHT.css"> |
| | </head> |
| | <body> |
| | |
| | <div id="screen-start" class="screen active"> |
| | <h1>Quick Draw</h1> |
| | <p>Draw 6 objects in 20 seconds each.<br />Can the AI guess what you drew?</p> |
| | <button id="btn-signin" class="hidden">Sign in with Hugging Face</button> |
| | <div id="model-status" class="hidden"> |
| | <p id="model-status-text">Connecting…</p> |
| | <div id="progress-bar-wrap"><div id="progress-bar"></div></div> |
| | </div> |
| | <button id="btn-start" disabled>Start Game</button> |
| | <button id="btn-signout" class="hidden secondary">Sign out</button> |
| | </div> |
| |
|
| | |
| | <div id="screen-draw" class="screen"> |
| | <div id="draw-header"> |
| | <span id="round-label">Round 1 / 6</span> |
| | <span id="timer">20</span> |
| | </div> |
| | <p id="prompt-text">Draw: <strong id="prompt-word"></strong></p> |
| | <canvas id="draw-canvas" width="400" height="400"></canvas> |
| | <div id="ai-guess" class="hidden">AI thinks: <strong id="ai-guess-label"></strong></div> |
| | <div id="draw-controls"> |
| | <button id="btn-clear">Clear</button> |
| | <button id="btn-done">Done</button> |
| | </div> |
| | <div id="result-overlay" class="hidden"> |
| | <span id="result-icon"></span> |
| | <span id="result-label"></span> |
| | </div> |
| | <div id="next-round-overlay" class="hidden"> |
| | <p id="next-round-number">Round 2 / 6</p> |
| | <p>Draw: <strong id="next-round-word"></strong></p> |
| | <button id="btn-next-round">Go!</button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="screen-results" class="screen"> |
| | <h2>Results</h2> |
| | <p id="final-score"></p> |
| | <div id="results-grid"></div> |
| | <button id="btn-again">Play Again</button> |
| | </div> |
| |
|
| | </body> |
| | </html> |
| |
|
