Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <title>Catch the Fruit! 🍎 — Learn English</title> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <!-- Mirrored webcam background --> | |
| <video id="video" playsinline muted></video> | |
| <!-- Game layer: fruits + the hand cursor live here (NOT mirrored) --> | |
| <div id="stage"> | |
| <div id="fruits-layer"></div> | |
| <div id="hand-icon">🖐️</div> | |
| </div> | |
| <!-- Celebration particles --> | |
| <canvas id="confetti"></canvas> | |
| <!-- Heads-up display --> | |
| <div id="hud"> | |
| <div id="score"> | |
| <span class="star">⭐</span> | |
| <span id="score-value">0</span> | |
| </div> | |
| <button id="replay" title="Say it again" aria-label="Say it again">🔊</button> | |
| </div> | |
| <!-- What to catch this round --> | |
| <div id="prompt-banner"> | |
| <div id="banner-main">Get ready!</div> | |
| <div id="banner-sub"></div> | |
| </div> | |
| <!-- Shown when no hand is visible --> | |
| <div id="hint">👋 Show me your hand!</div> | |
| <!-- Start / loading / error overlay --> | |
| <div id="overlay"> | |
| <div id="start-screen"> | |
| <div class="big-emoji">🍎🍌🍇</div> | |
| <h1>Catch the Fruit!</h1> | |
| <p class="subtitle">Listen, then use your hand to catch the right fruit 🖐️</p> | |
| <button id="start-btn">▶ Start</button> | |
| <p class="tiny">Please allow the camera when your browser asks.</p> | |
| </div> | |
| <div id="loading" hidden> | |
| <div class="spinner"></div> | |
| <p id="loading-text">Loading…</p> | |
| </div> | |
| <div id="error" hidden> | |
| <div class="big-emoji">😕</div> | |
| <p id="error-text"></p> | |
| <button id="retry-btn">↻ Try again</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module" src="js/main.js"></script> | |
| </body> | |
| </html> | |