Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cloze Reader - Minimal</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet"> | |
| <link href="./src/styles.css" rel="stylesheet"> | |
| </head> | |
| <body class="min-h-screen"> | |
| <div id="app" class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <header class="text-center mb-8"> | |
| <div class="flex items-center justify-center gap-3 mb-2"> | |
| <img src="./icon.png" alt="Cloze Reader" class="w-12 h-12"> | |
| <h1 class="text-4xl font-bold typewriter-text">Cloze Reader</h1> | |
| </div> | |
| <p class="typewriter-subtitle">Fill in the blanks to practice reading comprehension</p> | |
| </header> | |
| <main id="game-container" class="space-y-6"> | |
| <div id="loading" class="text-center py-8"> | |
| <p class="text-lg loading-text">Loading passages...</p> | |
| </div> | |
| <div id="game-area" class="paper-sheet rounded-lg p-6 hidden"> | |
| <div class="paper-content"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div id="book-info" class="biblio-info"></div> | |
| <div id="round-info" class="round-badge px-3 py-1 rounded-full text-sm"></div> | |
| </div> | |
| <div id="contextualization" class="context-box mb-4 p-3 rounded-lg"></div> | |
| <div id="passage-content" class="prose max-w-none mb-6"></div> | |
| <div id="hints-section" class="hints-box mb-4 p-3 rounded-lg"> | |
| <div class="text-sm font-semibold mb-2">👉👈 Hints:</div> | |
| <div id="hints-list" class="text-sm space-y-1"></div> | |
| </div> | |
| <div id="controls" class="flex gap-4 justify-center flex-wrap"> | |
| <button type="button" id="submit-btn" class="typewriter-button"> | |
| Submit | |
| </button> | |
| <button type="button" id="next-btn" class="typewriter-button hidden"> | |
| Next Passage | |
| </button> | |
| <button type="button" id="hint-btn" class="typewriter-button"> | |
| Show Hints | |
| </button> | |
| </div> | |
| <div id="result" class="mt-4 text-center result-text"></div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="./src/app.js" type="module"></script> | |
| </body> | |
| </html> |