102 lines
3.8 KiB
HTML
102 lines
3.8 KiB
HTML
<!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>
|