Spaces:
Sleeping
Sleeping
File size: 2,995 Bytes
53d138c 5dd5427 53d138c 5dd5427 440ff08 53d138c 5dd5427 53d138c 5dd5427 53d138c 5dd5427 53d138c 5dd5427 53d138c 5dd5427 53d138c 5dd5427 1df4d55 5dd5427 b48eb70 5dd5427 53d138c b48eb70 138ffaa ef943a5 b48eb70 5dd5427 53d138c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!DOCTYPE html>
<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">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</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="hidden">
<!-- Controls moved to sticky footer -->
</div>
<div id="result" class="mt-4 text-center result-text"></div>
</div>
</div>
</main>
</div>
<!-- Sticky Control Panel -->
<div id="sticky-controls" class="sticky-controls hidden">
<div class="controls-inner">
<button type="button" id="submit-btn" class="typewriter-button">
Submit
</button>
<button type="button" id="next-btn" class="typewriter-button hidden">
Next Passage
</button>
<div class="controls-divider"></div>
<button type="button" id="hint-btn" class="typewriter-button">
Show Hints
</button>
</div>
</div>
<script src="./src/app.js" type="module"></script>
</body>
</html> |