94 lines
3.2 KiB
HTML
94 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#6a5cff" />
|
|
<meta name="description" content="Lettres Magiques — un jeu pour apprendre les lettres en s'amusant, sur téléphone et ordinateur." />
|
|
<title>✨ Lettres Magiques ✨</title>
|
|
<link rel="manifest" href="manifest.webmanifest" />
|
|
<link rel="apple-touch-icon" href="icons/icon-192.png" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Fond animé -->
|
|
<canvas id="fx"></canvas>
|
|
|
|
<!-- Écran d'accueil -->
|
|
<div id="start" class="screen">
|
|
<div class="start-card">
|
|
<h1 class="title">✨ Lettres Magiques ✨</h1>
|
|
<p class="subtitle" id="start-sub">Apprends à écrire en t'amusant !</p>
|
|
<button id="btn-play" class="big-btn">🎮 Jouer</button>
|
|
<button id="btn-parents" class="text-btn">⚙️ Espace parents</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu de catégories -->
|
|
<div id="menu" class="screen hidden">
|
|
<div class="menu-card">
|
|
<h2 class="menu-title">Choisis un jeu !</h2>
|
|
<div id="cat-grid" class="cat-grid"></div>
|
|
<button id="btn-parents-menu" class="text-btn">⚙️ Espace parents</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interface de jeu -->
|
|
<div id="hud" class="hud hidden">
|
|
<div class="hud-left">
|
|
<button id="btn-home" class="icon-btn" title="Menu">🏠</button>
|
|
<div class="badge">⭐ <span id="score">0</span></div>
|
|
<div class="badge">🏅 <span id="stickers-count">0</span>/15</div>
|
|
</div>
|
|
<div class="hud-right">
|
|
<button id="btn-mini" class="icon-btn" title="Jeu des ballons">🎈</button>
|
|
<button id="btn-sound" class="icon-btn" title="Son">🔊</button>
|
|
<button id="btn-stickers" class="icon-btn" title="Mes autocollants">🏅</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Indice imagier (grande image du mot à écrire) -->
|
|
<div id="clue" class="clue hidden"></div>
|
|
|
|
<!-- Mot en cours -->
|
|
<div id="word-zone" class="word-zone hidden"></div>
|
|
|
|
<!-- Liste des mots à trouver -->
|
|
<div id="word-list" class="word-list hidden"></div>
|
|
|
|
<!-- Clavier tactile -->
|
|
<div id="keyboard" class="keyboard hidden"></div>
|
|
|
|
<!-- Mascotte + bulle -->
|
|
<div id="mascot" class="mascot hidden">
|
|
<div id="speech" class="speech"></div>
|
|
<div id="blob" class="blob">
|
|
<div class="eye left"><span></span></div>
|
|
<div class="eye right"><span></span></div>
|
|
<div class="mouth"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overlay mini-jeu -->
|
|
<div id="minigame" class="minigame hidden">
|
|
<div class="mg-banner"><span id="mg-title">Mini-jeu !</span> — <span id="mg-time">10</span>s</div>
|
|
</div>
|
|
|
|
<!-- Tiroir des autocollants -->
|
|
<div id="sticker-drawer" class="drawer hidden">
|
|
<div class="drawer-card">
|
|
<h2>🏅 Mes autocollants</h2>
|
|
<div id="sticker-grid" class="sticker-grid"></div>
|
|
<button class="big-btn small" data-close-drawer>Fermer</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Espace parents (protégé) -->
|
|
<div id="parent" class="drawer hidden">
|
|
<div class="drawer-card parent-card" id="parent-body"></div>
|
|
</div>
|
|
|
|
<script src="game.js"></script>
|
|
</body>
|
|
</html>
|