StillHammer
b004382cee
- Complete SPA architecture with dynamic module loading - 9 different educational games (whack-a-mole, memory, quiz, etc.) - Rich content system supporting multimedia (audio, images, video) - Chinese study mode with character recognition - Adaptive game system based on available content - Content types: vocabulary, grammar, poems, fill-blanks, corrections - AI-powered text evaluation for open-ended answers - Flexible content schema with backward compatibility 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
145 lines
5.1 KiB
HTML
145 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cours d'Anglais Interactif</title>
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/navigation.css">
|
|
<link rel="stylesheet" href="css/games.css">
|
|
</head>
|
|
<body>
|
|
<!-- Navigation Breadcrumb -->
|
|
<nav class="breadcrumb" id="breadcrumb">
|
|
<button class="breadcrumb-item active" data-page="home">🏠 Accueil</button>
|
|
</nav>
|
|
|
|
<!-- Main Container -->
|
|
<main class="container" id="main-container">
|
|
|
|
<!-- Page d'Accueil -->
|
|
<div class="page active" id="home-page">
|
|
<div class="hero">
|
|
<h1>🎓 Cours d'Anglais Interactif</h1>
|
|
<p>Apprends l'anglais en t'amusant !</p>
|
|
</div>
|
|
|
|
<div class="main-options">
|
|
<button class="option-card primary" onclick="navigateTo('games')">
|
|
🎮 <span>Créer une leçon personnalisée</span>
|
|
</button>
|
|
<button class="option-card secondary" onclick="showComingSoon()">
|
|
📊 <span>Statistiques</span>
|
|
<small>Bientôt disponible</small>
|
|
</button>
|
|
<button class="option-card secondary" onclick="showComingSoon()">
|
|
⚙️ <span>Paramètres</span>
|
|
<small>Bientôt disponible</small>
|
|
</button>
|
|
<button class="option-card primary" onclick="showContentCreator()">
|
|
🏭 <span>Créateur de Contenu</span>
|
|
<small>Créez vos propres exercices</small>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sélection Type de Jeu -->
|
|
<div class="page" id="games-page">
|
|
<div class="page-header">
|
|
<h2>🎮 Choisis ton jeu</h2>
|
|
<p>Sélectionne le type d'activité que tu veux faire</p>
|
|
</div>
|
|
|
|
<div class="cards-grid" id="games-grid">
|
|
<!-- Les cartes seront générées dynamiquement -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sélection Contenu/Niveau -->
|
|
<div class="page" id="levels-page">
|
|
<div class="page-header">
|
|
<h2>📚 Choisis ton niveau</h2>
|
|
<p id="level-description">Sélectionne le contenu à apprendre</p>
|
|
</div>
|
|
|
|
<div class="cards-grid" id="levels-grid">
|
|
<!-- Les cartes seront générées dynamiquement -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page de Jeu -->
|
|
<div class="page" id="game-page">
|
|
<div class="game-header">
|
|
<button class="back-btn" onclick="goBack()">← Retour</button>
|
|
<h3 id="game-title">Jeu en cours...</h3>
|
|
<div class="score-display">
|
|
Score: <span id="current-score">0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="game-container" id="game-container">
|
|
<!-- Le jeu sera chargé ici dynamiquement -->
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- Modal Coming Soon -->
|
|
<div class="modal" id="coming-soon-modal">
|
|
<div class="modal-content">
|
|
<h3>🚧 Bientôt disponible !</h3>
|
|
<p>Cette fonctionnalité sera disponible dans une prochaine version.</p>
|
|
<button onclick="closeModal()">OK</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Indicator -->
|
|
<div class="loading" id="loading">
|
|
<div class="spinner"></div>
|
|
<p>Chargement...</p>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/core/utils.js"></script>
|
|
<script src="js/core/content-engine.js"></script>
|
|
<script src="js/core/content-factory.js"></script>
|
|
<script src="js/core/content-parsers.js"></script>
|
|
<script src="js/core/content-generators.js"></script>
|
|
<script src="js/core/content-scanner.js"></script>
|
|
<script src="js/tools/content-creator.js"></script>
|
|
<script src="js/core/navigation.js"></script>
|
|
<script src="js/core/game-loader.js"></script>
|
|
<script>
|
|
// Initialize app when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
AppNavigation.init();
|
|
});
|
|
|
|
// Coming soon functionality
|
|
function showComingSoon() {
|
|
document.getElementById('coming-soon-modal').classList.add('show');
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('coming-soon-modal').classList.remove('show');
|
|
}
|
|
|
|
function showContentCreator() {
|
|
// Masquer la page d'accueil
|
|
document.getElementById('home-page').classList.remove('active');
|
|
|
|
// Créer et afficher le créateur de contenu
|
|
const creator = new ContentCreator();
|
|
creator.init();
|
|
}
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
closeModal();
|
|
AppNavigation.goBack();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |