| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> |
| <title>AI Puzzle Maker</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap" rel="stylesheet" /> |
| <link rel="stylesheet" href="./style.css" /> |
| </head> |
| <body> |
| <div id="stage"> |
| <canvas id="cv"></canvas> |
| <div id="bubble" class="hidden"></div> |
|
|
| |
| <div id="hud" class="hidden"> |
| <div class="hud-left"> |
| <button id="homeBtn" class="hud-btn" title="Menu">🏠</button> |
| <button id="muteBtn" class="hud-btn" title="Sound (M)">🔊</button> |
| </div> |
| <div class="hud-mid"> |
| <div id="timer">0:00.0</div> |
| <div id="prog">0 / 24</div> |
| </div> |
| <div class="hud-right"> |
| <div id="streak" class="hidden">🔥 x3</div> |
| <button id="ghostBtn" class="hud-btn on" title="Toggle picture preview (P)">👁</button> |
| <button id="rotBtn" class="hud-btn hidden" title="Rotate piece (R / right-click / double-tap)">↻</button> |
| <button id="hintBtn" class="hud-btn wide" title="Hint (+15s on the clock)">💡 +15s</button> |
| </div> |
| </div> |
|
|
| |
| <div id="home" class="screen"> |
| <h1>AI <span>PUZZLE</span> MAKER</h1> |
| <p class="tag">Type anything → AI paints it → you piece it back together.</p> |
| <div class="name-row"> |
| <span class="name-ico">👤</span> |
| <input id="hfName" maxlength="24" placeholder="your Hugging Face username" autocomplete="off" spellcheck="false" /> |
| <span id="nameOk" class="name-ok hidden">✓</span> |
| </div> |
| <div class="gen-box"> |
| <input id="subjectInput" maxlength="120" placeholder="a lighthouse in a storm — or: my cat as a samurai" autocomplete="off" /> |
| <div id="chips" class="chips"></div> |
| <div class="opt-row"> |
| <div class="pc-group" id="pcGroup"> |
| <span class="opt-label">PIECES</span> |
| <button class="pc-btn" data-n="12">12</button> |
| <button class="pc-btn on" data-n="24">24</button> |
| <button class="pc-btn" data-n="48">48</button> |
| <button class="pc-btn" data-n="96">96</button> |
| </div> |
| <button id="rotToggle" class="tog">⟳ ROTATION <b>OFF</b></button> |
| </div> |
| <button id="genBtn" class="btn big">✨ GENERATE MY PUZZLE</button> |
| <p id="homeMsg" class="msg"></p> |
| </div> |
| <div class="home-row hidden" id="mineRow"><h3>🧩 MY PUZZLES</h3></div> |
| <div id="mineRail" class="rail hidden"></div> |
| <div class="home-row"> |
| <h3>QUICK PLAY</h3> |
| <button id="galleryBtn" class="btn ghost">🌍 COMMUNITY PUZZLES</button> |
| </div> |
| <div id="demoRail" class="rail"></div> |
| </div> |
|
|
| |
| <div id="gallery" class="screen panel hidden"> |
| <h2>🌍 COMMUNITY PUZZLES</h2> |
| <p class="muted">Puzzles other players generated & shared. Race their solve times. Paste a <b>puzzle code</b> to jump straight to one.</p> |
| <div class="g-bar"> |
| <input id="gSearch" maxlength="40" placeholder="🔎 search puzzles, creators… or paste a code" autocomplete="off" /> |
| <button id="gNew" class="btn ghost g-f on">✨ NEW</button> |
| <button id="gTop" class="btn ghost g-f">❤ TOP</button> |
| </div> |
| <div id="gRail" class="rail tall"></div> |
| <p id="gMsg" class="msg"></p> |
| <button class="btn ghost back-btn">◀ BACK</button> |
| </div> |
|
|
| |
| <div id="loading" class="screen hidden"> |
| <div class="spinner"></div> |
| <h2 id="loadTitle">PAINTING YOUR PUZZLE…</h2> |
| <p id="loadTip" class="tip"></p> |
| </div> |
|
|
| |
| <div id="complete" class="screen panel hidden"> |
| <h2 id="cTitle">🧩 SOLVED!</h2> |
| <div id="cQuip" class="c-quip"></div> |
| <div id="cStats" class="c-stats"></div> |
| <div id="cBoardWrap"> |
| <h3>⏱ FASTEST SOLVES</h3> |
| <div id="cBoard" class="db-list"></div> |
| <div class="post-row"> |
| <input id="cName" maxlength="24" placeholder="your HF username" autocomplete="off" spellcheck="false" /> |
| <button id="cSubmit" class="btn">🏆 POST MY TIME</button> |
| </div> |
| </div> |
| <p id="cMsg" class="msg"></p> |
| <div class="c-btns"> |
| <button id="cShare" class="btn share hidden">🌍 SHARE THIS PUZZLE</button> |
| <button id="cAgain" class="btn">▶ PLAY AGAIN</button> |
| <button id="cMenu" class="btn ghost">MENU</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="./puzzle.js"></script> |
| </body> |
| </html> |
|
|
