76 lines
2.6 KiB
HTML
76 lines
2.6 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">Écris les prénoms de la famille !</p>
|
|
<button id="btn-play" class="big-btn">🎮 Jouer</button>
|
|
<p class="hint-line">🔊 Le son aide les petits — laisse-le activé.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interface de jeu -->
|
|
<div id="hud" class="hud hidden">
|
|
<div class="hud-left">
|
|
<div class="badge">⭐ <span id="score">0</span></div>
|
|
<div class="badge">🚀 Niv. <span id="level">1</span></div>
|
|
<div class="badge">🏅 <span id="stickers-count">0</span>/15</div>
|
|
</div>
|
|
<div class="hud-right">
|
|
<button id="btn-sound" class="icon-btn" title="Son">🔊</button>
|
|
<button id="btn-stickers" class="icon-btn" title="Mes autocollants">🏅</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mot en cours -->
|
|
<div id="word-zone" class="word-zone hidden"></div>
|
|
|
|
<!-- Liste des mots à trouver (aide permanente) -->
|
|
<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 id="btn-close-stickers" class="big-btn small">Fermer</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="game.js"></script>
|
|
</body>
|
|
</html>
|