Initial commit: saint-malo navigation quiz
Build and Push Docker Image / build (push) Failing after 5m2s
Build and Push Docker Image / build (push) Failing after 5m2s
This commit is contained in:
+296
@@ -0,0 +1,296 @@
|
||||
const SAINT_MALO = [48.649, -2.025];
|
||||
const CATEGORY_ICONS = {
|
||||
'bouée': '🟢', 'pointe': '📍', 'plage': '🏖', 'île': '🏝',
|
||||
'port': '⚓', 'fort': '🏰', 'chenal': '🔵', 'anse': '🌊',
|
||||
'rocher': '⬛', 'autre': '📌'
|
||||
};
|
||||
|
||||
let map, mode = 'quiz', points = [];
|
||||
const editMarkers = new Map();
|
||||
|
||||
// Quiz state
|
||||
let quizQueue = [], quizCurrent = null, quizScore = 0, quizTotal = 0;
|
||||
let quizAnswered = false;
|
||||
let userMarker = null, correctMarker = null, feedbackLine = null;
|
||||
let pendingLatLng = null;
|
||||
|
||||
async function init() {
|
||||
const status = await fetch('/api/status').then(r => r.json());
|
||||
|
||||
map = L.map('map', { center: SAINT_MALO, zoom: 12 });
|
||||
|
||||
const src = status.hasMbtiles ? `MBTiles local (${status.name || 'SHOM'})` : 'SHOM en ligne';
|
||||
document.getElementById('tiles-status').textContent = `🗺 ${src}`;
|
||||
L.tileLayer('/tiles/{z}/{x}/{y}', {
|
||||
minZoom: 6, maxZoom: 17, attribution: '© SHOM'
|
||||
}).addTo(map);
|
||||
|
||||
map.on('click', onMapClick);
|
||||
await loadPoints();
|
||||
setMode('quiz');
|
||||
}
|
||||
|
||||
// ── Mode ────────────────────────────────────────────────────────────────────
|
||||
|
||||
function setMode(newMode) {
|
||||
mode = newMode;
|
||||
document.getElementById('btn-quiz').classList.toggle('active', mode === 'quiz');
|
||||
document.getElementById('btn-edit').classList.toggle('active', mode === 'edit');
|
||||
document.getElementById('quiz-panel').style.display = mode === 'quiz' ? 'flex' : 'none';
|
||||
document.getElementById('edit-panel').style.display = mode === 'edit' ? 'flex' : 'none';
|
||||
document.getElementById('map').classList.toggle('edit-cursor', mode === 'edit');
|
||||
|
||||
clearFeedback();
|
||||
renderEditMarkers();
|
||||
|
||||
if (mode === 'quiz') startQuiz();
|
||||
}
|
||||
|
||||
// ── Map click ────────────────────────────────────────────────────────────────
|
||||
|
||||
function onMapClick(e) {
|
||||
if (mode === 'edit') {
|
||||
pendingLatLng = e.latlng;
|
||||
openModal(null);
|
||||
} else if (mode === 'quiz' && quizCurrent && !quizAnswered) {
|
||||
submitAnswer(e.latlng);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Points API ───────────────────────────────────────────────────────────────
|
||||
|
||||
async function loadPoints() {
|
||||
points = await fetch('/api/points').then(r => r.json());
|
||||
document.getElementById('points-count').textContent = points.length;
|
||||
renderPointsList();
|
||||
renderEditMarkers();
|
||||
}
|
||||
|
||||
async function saveNewPoint(data) {
|
||||
const pt = await fetch('/api/points', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data)
|
||||
}).then(r => r.json());
|
||||
return pt;
|
||||
}
|
||||
|
||||
async function updatePoint(id, data) {
|
||||
await fetch(`/api/points/${id}`, {
|
||||
method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data)
|
||||
});
|
||||
}
|
||||
|
||||
async function deletePoint(id) {
|
||||
if (!confirm('Supprimer ce point ?')) return;
|
||||
await fetch(`/api/points/${id}`, { method: 'DELETE' });
|
||||
await loadPoints();
|
||||
}
|
||||
|
||||
// ── Edit markers ─────────────────────────────────────────────────────────────
|
||||
|
||||
function makeIcon(category) {
|
||||
return L.divIcon({
|
||||
html: `<div class="map-pin">${CATEGORY_ICONS[category] || '📌'}</div>`,
|
||||
className: '', iconSize: [24, 24], iconAnchor: [12, 12]
|
||||
});
|
||||
}
|
||||
|
||||
function renderEditMarkers() {
|
||||
editMarkers.forEach(m => map.removeLayer(m));
|
||||
editMarkers.clear();
|
||||
|
||||
if (mode !== 'edit') return;
|
||||
|
||||
points.forEach(p => {
|
||||
const m = L.marker([p.lat, p.lng], { icon: makeIcon(p.category) })
|
||||
.bindTooltip(p.name, { direction: 'top' })
|
||||
.on('click', e => { L.DomEvent.stopPropagation(e); openModal(p); })
|
||||
.addTo(map);
|
||||
editMarkers.set(p.id, m);
|
||||
});
|
||||
}
|
||||
|
||||
// ── Points list (edit panel) ──────────────────────────────────────────────────
|
||||
|
||||
function renderPointsList() {
|
||||
const list = document.getElementById('points-list');
|
||||
if (points.length === 0) {
|
||||
list.innerHTML = '<div class="empty-list">Aucun point encore.</div>';
|
||||
return;
|
||||
}
|
||||
list.innerHTML = points.map(p => `
|
||||
<div class="point-item">
|
||||
<span style="font-size:1.1rem;flex-shrink:0">${CATEGORY_ICONS[p.category] || '📌'}</span>
|
||||
<div class="point-item-info">
|
||||
<div class="point-item-name">${escHtml(p.name)}</div>
|
||||
<div class="point-item-cat">${p.category}</div>
|
||||
</div>
|
||||
<div class="point-item-actions">
|
||||
<button class="btn-icon" title="Centrer" onclick="flyTo('${p.id}')">🎯</button>
|
||||
<button class="btn-icon" title="Modifier" onclick="openModal(getPoint('${p.id}'))">✏️</button>
|
||||
<button class="btn-icon del" title="Supprimer" onclick="deletePoint('${p.id}')">🗑</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function getPoint(id) { return points.find(p => p.id === id); }
|
||||
|
||||
function flyTo(id) {
|
||||
const p = getPoint(id);
|
||||
if (p) map.flyTo([p.lat, p.lng], 14);
|
||||
}
|
||||
|
||||
function escHtml(s) {
|
||||
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
// ── Modal ────────────────────────────────────────────────────────────────────
|
||||
|
||||
function openModal(point) {
|
||||
document.getElementById('modal-title').textContent = point ? 'Modifier le point' : 'Ajouter un point';
|
||||
document.getElementById('point-id').value = point?.id || '';
|
||||
document.getElementById('point-lat').value = point ? point.lat : (pendingLatLng?.lat || '');
|
||||
document.getElementById('point-lng').value = point ? point.lng : (pendingLatLng?.lng || '');
|
||||
document.getElementById('point-name').value = point?.name || '';
|
||||
document.getElementById('point-category').value = point?.category || 'bouée';
|
||||
document.getElementById('point-hint').value = point?.hint || '';
|
||||
document.getElementById('modal-overlay').style.display = 'flex';
|
||||
setTimeout(() => document.getElementById('point-name').focus(), 50);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('modal-overlay').style.display = 'none';
|
||||
pendingLatLng = null;
|
||||
}
|
||||
|
||||
function handleOverlayClick(e) {
|
||||
if (e.target === document.getElementById('modal-overlay')) closeModal();
|
||||
}
|
||||
|
||||
document.getElementById('point-form').addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
const id = document.getElementById('point-id').value;
|
||||
const data = {
|
||||
name: document.getElementById('point-name').value.trim(),
|
||||
category: document.getElementById('point-category').value,
|
||||
hint: document.getElementById('point-hint').value.trim(),
|
||||
lat: parseFloat(document.getElementById('point-lat').value),
|
||||
lng: parseFloat(document.getElementById('point-lng').value)
|
||||
};
|
||||
if (id) await updatePoint(id, data);
|
||||
else await saveNewPoint(data);
|
||||
closeModal();
|
||||
await loadPoints();
|
||||
});
|
||||
|
||||
// ── Quiz ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
function startQuiz() {
|
||||
clearFeedback();
|
||||
|
||||
if (points.length === 0) {
|
||||
show('quiz-empty'); hide('quiz-question'); hide('quiz-end');
|
||||
return;
|
||||
}
|
||||
|
||||
quizQueue = shuffle([...points]);
|
||||
quizScore = 0;
|
||||
quizTotal = 0;
|
||||
|
||||
hide('quiz-empty');
|
||||
show('quiz-question');
|
||||
hide('quiz-feedback');
|
||||
|
||||
nextQuestion();
|
||||
}
|
||||
|
||||
function nextQuestion() {
|
||||
clearFeedback();
|
||||
quizAnswered = false;
|
||||
|
||||
if (quizQueue.length === 0) {
|
||||
quizQueue = shuffle([...points]);
|
||||
}
|
||||
|
||||
quizCurrent = quizQueue.shift();
|
||||
quizTotal++;
|
||||
|
||||
document.getElementById('quiz-name').textContent = quizCurrent.name;
|
||||
document.getElementById('quiz-category').textContent = quizCurrent.category;
|
||||
document.getElementById('quiz-hint').textContent = quizCurrent.hint || '';
|
||||
document.getElementById('quiz-instruction').style.display = 'block';
|
||||
hide('quiz-feedback');
|
||||
updateScoreDisplay();
|
||||
}
|
||||
|
||||
function submitAnswer(latlng) {
|
||||
if (!quizCurrent || quizAnswered) return;
|
||||
quizAnswered = true;
|
||||
|
||||
const correct = L.latLng(quizCurrent.lat, quizCurrent.lng);
|
||||
const distM = latlng.distanceTo(correct);
|
||||
const distNm = distM / 1852;
|
||||
|
||||
// User click marker
|
||||
userMarker = L.circleMarker(latlng, {
|
||||
radius: 8, color: '#f39c12', fillColor: '#f39c12', fillOpacity: 0.85, weight: 2
|
||||
}).addTo(map);
|
||||
|
||||
// Correct location marker
|
||||
correctMarker = L.circleMarker(correct, {
|
||||
radius: 8, color: '#2ecc71', fillColor: '#2ecc71', fillOpacity: 0.85, weight: 2
|
||||
}).bindTooltip(quizCurrent.name, { permanent: true, direction: 'top', offset: [0, -10] }).addTo(map);
|
||||
|
||||
// Dashed line
|
||||
feedbackLine = L.polyline([latlng, correct], {
|
||||
color: '#fff', weight: 1.5, dashArray: '5 5', opacity: 0.4
|
||||
}).addTo(map);
|
||||
|
||||
// Scoring
|
||||
let pts, label, color;
|
||||
if (distNm < 0.1) { pts = 100; label = '⭐ Excellent !'; color = 'var(--green)'; }
|
||||
else if (distNm < 0.5) { pts = 80; label = '👍 Très bien'; color = 'var(--green)'; }
|
||||
else if (distNm < 1.0) { pts = 60; label = '👌 Bien'; color = 'var(--yellow)'; }
|
||||
else if (distNm < 3.0) { pts = 30; label = '🤔 Passable'; color = 'var(--orange)'; }
|
||||
else { pts = 0; label = '❌ À revoir'; color = 'var(--red)'; }
|
||||
|
||||
quizScore += pts;
|
||||
updateScoreDisplay();
|
||||
|
||||
const distStr = distNm < 0.1 ? `${Math.round(distM)} m` : `${distNm.toFixed(2)} Nm`;
|
||||
document.getElementById('feedback-distance').textContent = `Distance : ${distStr}`;
|
||||
document.getElementById('feedback-label').textContent = label;
|
||||
document.getElementById('feedback-label').style.color = color;
|
||||
document.getElementById('quiz-instruction').style.display = 'none';
|
||||
show('quiz-feedback');
|
||||
|
||||
// Fit both points in view
|
||||
map.fitBounds(L.latLngBounds([latlng, correct]).pad(0.4), { maxZoom: 14 });
|
||||
}
|
||||
|
||||
function clearFeedback() {
|
||||
if (userMarker) { map.removeLayer(userMarker); userMarker = null; }
|
||||
if (correctMarker) { map.removeLayer(correctMarker); correctMarker = null; }
|
||||
if (feedbackLine) { map.removeLayer(feedbackLine); feedbackLine = null; }
|
||||
}
|
||||
|
||||
function updateScoreDisplay() {
|
||||
document.getElementById('score-value').textContent = quizScore;
|
||||
const remaining = quizQueue.length;
|
||||
document.getElementById('quiz-progress').textContent =
|
||||
`${quizTotal} / ${quizTotal + remaining} questions`;
|
||||
}
|
||||
|
||||
// ── Utils ────────────────────────────────────────────────────────────────────
|
||||
|
||||
function show(id) { document.getElementById(id).style.display = ''; }
|
||||
function hide(id) { document.getElementById(id).style.display = 'none'; }
|
||||
function shuffle(arr) { return arr.sort(() => Math.random() - 0.5); }
|
||||
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.code === 'Space' || e.code === 'Enter') {
|
||||
if (mode === 'quiz' && quizAnswered) { e.preventDefault(); nextQuestion(); }
|
||||
}
|
||||
});
|
||||
|
||||
init();
|
||||
@@ -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>
|
||||
@@ -0,0 +1,417 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #0a1628;
|
||||
--surface: #0d1f3c;
|
||||
--border: #1e3a5f;
|
||||
--blue: #4a9ece;
|
||||
--blue-dark: #3a8abe;
|
||||
--text: #e8f4f8;
|
||||
--muted: #8ab4cc;
|
||||
--dim: #4a6a82;
|
||||
--green: #2ecc71;
|
||||
--yellow: #f39c12;
|
||||
--orange: #e67e22;
|
||||
--red: #e74c3c;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#app { display: flex; flex-direction: column; height: 100vh; }
|
||||
|
||||
/* Topbar */
|
||||
#topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 0 16px;
|
||||
height: 50px;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#logo {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--blue);
|
||||
letter-spacing: 0.3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#mode-toggle {
|
||||
display: flex;
|
||||
background: var(--bg);
|
||||
border-radius: 6px;
|
||||
padding: 3px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
#mode-toggle button {
|
||||
padding: 4px 14px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
#mode-toggle button.active {
|
||||
background: var(--blue);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#tiles-status {
|
||||
margin-left: auto;
|
||||
font-size: 0.72rem;
|
||||
color: var(--dim);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Main layout */
|
||||
#main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#map { flex: 1; }
|
||||
|
||||
#map.edit-cursor { cursor: crosshair !important; }
|
||||
|
||||
/* Panel */
|
||||
.panel {
|
||||
width: 270px;
|
||||
min-width: 270px;
|
||||
background: var(--surface);
|
||||
border-left: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Quiz panel */
|
||||
#quiz-empty, #quiz-end {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
padding: 24px 20px;
|
||||
text-align: center;
|
||||
gap: 12px;
|
||||
color: var(--muted);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.empty-icon { font-size: 2.5rem; }
|
||||
|
||||
#quiz-end { gap: 16px; }
|
||||
|
||||
#final-score {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
#btn-restart {
|
||||
padding: 10px 20px;
|
||||
background: var(--blue);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#quiz-question {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#quiz-score {
|
||||
font-size: 0.78rem;
|
||||
color: var(--dim);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
#score-value {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
#quiz-progress { margin-left: auto; }
|
||||
|
||||
#quiz-prompt {
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
#quiz-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#quiz-category {
|
||||
font-size: 0.75rem;
|
||||
color: var(--blue);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#quiz-hint {
|
||||
font-size: 0.8rem;
|
||||
color: var(--dim);
|
||||
font-style: italic;
|
||||
min-height: 16px;
|
||||
}
|
||||
|
||||
#quiz-instruction {
|
||||
margin-top: 8px;
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted);
|
||||
background: rgba(74,158,206,0.08);
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#quiz-feedback {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
#feedback-distance {
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
#feedback-label {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#btn-next {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: var(--blue);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
#btn-next:hover { background: var(--blue-dark); }
|
||||
|
||||
/* Edit panel */
|
||||
.panel-header {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-hint {
|
||||
font-size: 0.75rem;
|
||||
color: var(--dim);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#points-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#points-list::-webkit-scrollbar { width: 4px; }
|
||||
#points-list::-webkit-scrollbar-track { background: transparent; }
|
||||
#points-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
||||
|
||||
.point-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--bg);
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.point-item-info { flex: 1; min-width: 0; }
|
||||
|
||||
.point-item-name {
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.point-item-cat {
|
||||
font-size: 0.7rem;
|
||||
color: var(--dim);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.point-item-actions {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--dim);
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
padding: 3px 5px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.1s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn-icon:hover { background: var(--border); color: var(--text); }
|
||||
.btn-icon.del:hover { background: rgba(231,76,60,0.15); color: var(--red); }
|
||||
|
||||
.empty-list {
|
||||
font-size: 0.8rem;
|
||||
color: var(--dim);
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
#modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.65);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#modal {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 22px 24px;
|
||||
width: 340px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
#modal h3 {
|
||||
margin-bottom: 18px;
|
||||
color: var(--blue);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-group { margin-bottom: 12px; }
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 0.875rem;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.form-group select option { background: var(--bg); }
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.form-actions button {
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.btn-cancel:hover { border-color: var(--muted); }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--blue);
|
||||
border: 1px solid var(--blue);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-primary:hover { background: var(--blue-dark); }
|
||||
|
||||
/* Map markers */
|
||||
.map-pin {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
|
||||
cursor: pointer;
|
||||
}
|
||||
Reference in New Issue
Block a user