Initial commit: saint-malo navigation quiz

2026-06-11 10:04:44 +02:00
commit c3cc578d1c
10 changed files with 1861 additions and 0 deletions
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Saint-Malo — Quiz Navigation</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div id="app">
+    <header id="topbar">
+      <div id="logo">⚓ Saint-Malo Quiz</div>
+      <div id="mode-toggle">
+        <button id="btn-quiz" class="active" onclick="setMode('quiz')">Quiz</button>
+        <button id="btn-edit" onclick="setMode('edit')">Éditer</button>
+      </div>
+      <div id="tiles-status"></div>
+    </header>
+
+    <div id="main">
+      <div id="map"></div>
+
+      <!-- Quiz panel -->
+      <div id="quiz-panel" class="panel">
+        <div id="quiz-empty">
+          <div class="empty-icon">🧭</div>
+          <p>Aucun point à quizzer.<br>Passez en mode <strong>Éditer</strong> pour ajouter des points.</p>
+        </div>
+        <div id="quiz-question" style="display:none">
+          <div id="quiz-score">
+            <span id="score-value">0</span> pts
+            <span id="quiz-progress"></span>
+          </div>
+          <div id="quiz-prompt">Où se trouve…</div>
+          <div id="quiz-name"></div>
+          <div id="quiz-category"></div>
+          <div id="quiz-hint"></div>
+          <div id="quiz-instruction">Cliquez sur la carte</div>
+          <div id="quiz-feedback">
+            <div id="feedback-distance"></div>
+            <div id="feedback-label"></div>
+            <button id="btn-next" onclick="nextQuestion()">Question suivante →</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Edit panel -->
+      <div id="edit-panel" class="panel" style="display:none">
+        <div class="panel-header">
+          <span>Points (<span id="points-count">0</span>)</span>
+          <span class="panel-hint">Cliquez sur la carte pour ajouter</span>
+        </div>
+        <div id="points-list"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal ajout/édition -->
+  <div id="modal-overlay" style="display:none" onclick="handleOverlayClick(event)">
+    <div id="modal">
+      <h3 id="modal-title">Ajouter un point</h3>
+      <form id="point-form">
+        <input type="hidden" id="point-id">
+        <input type="hidden" id="point-lat">
+        <input type="hidden" id="point-lng">
+        <div class="form-group">
+          <label>Nom</label>
+          <input type="text" id="point-name" required placeholder="ex : Pointe du Meinga" autocomplete="off">
+        </div>
+        <div class="form-group">
+          <label>Catégorie</label>
+          <select id="point-category">
+            <option value="bouée">🟢 Bouée</option>
+            <option value="pointe">📍 Pointe / Cap</option>
+            <option value="plage">🏖 Plage</option>
+            <option value="île">🏝 Île / Îlot</option>
+            <option value="port">⚓ Port / Quai</option>
+            <option value="fort">🏰 Fort / Monument</option>
+            <option value="chenal">🔵 Chenal / Passe</option>
+            <option value="anse">🌊 Anse / Baie</option>
+            <option value="rocher">⬛ Rocher / Écueil</option>
+            <option value="autre">📌 Autre</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>Indice (affiché pendant le quiz)</label>
+          <input type="text" id="point-hint" placeholder="ex : au nord de Dinard" autocomplete="off">
+        </div>
+        <div class="form-actions">
+          <button type="button" class="btn-cancel" onclick="closeModal()">Annuler</button>
+          <button type="submit" class="btn-primary">Enregistrer</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>