Spaces:
Running
Running
File size: 3,539 Bytes
53d138c 5dd5427 53d138c 5dd5427 440ff08 53d138c 5dd5427 53d138c f1bb203 53d138c f1bb203 53d138c 5dd5427 53d138c 5dd5427 53d138c 5dd5427 1df4d55 5dd5427 b48eb70 5dd5427 53d138c b48eb70 138ffaa ef943a5 af86b7d f1bb203 b48eb70 5dd5427 fed2199 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 67 68 69 70 71 72 73 74 75 76 77 78 |
<!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 mb-4 gap-3">
<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 text-center">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 class="controls-divider"></div>
<button id="leaderboard-btn" class="leaderboard-footer-btn" title="View leaderboard">
🏅
</button>
</div>
</div>
<script src="./src/app.js" type="module"></script>
<script type="module">
// Load test runner and ranking interface only in test mode
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('testMode') === 'true') {
import('./src/testGameRunner.js');
import('./src/userRankingInterface.js');
}
</script>
</body>
</html> |