diff --git a/frontend/css/style.css b/frontend/css/style.css
index 397d085..fc8793e 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -94,13 +94,81 @@ html, body {
100% { transform: scale(1); opacity: 0.7; }
}
-/* Zone admin invisible */
-.zone-admin {
+/* Bouton admin discret */
+.btn-admin {
position: absolute;
- bottom: 0;
- right: 0;
- width: 80px;
- height: 80px;
+ bottom: 12px;
+ right: 12px;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.2rem;
+ color: rgba(255,255,255,0.15);
+ cursor: pointer;
+ border-radius: 50%;
+ transition: color 0.3s;
+}
+
+.btn-admin:hover, .btn-admin:active {
+ color: rgba(255,255,255,0.4);
+}
+
+/* Popup mot de passe */
+.popup-overlay {
+ position: fixed;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background: rgba(0,0,0,0.7);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 100;
+}
+
+.popup-box {
+ background: var(--fond-carte);
+ border-radius: var(--rayon);
+ padding: 2rem;
+ min-width: 300px;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ align-items: center;
+ box-shadow: var(--ombre);
+}
+
+.popup-box h3 {
+ color: var(--texte);
+ margin: 0;
+}
+
+.popup-box input {
+ background: var(--fond);
+ border: 2px solid #333;
+ border-radius: 8px;
+ padding: 0.8rem 1.2rem;
+ color: var(--texte);
+ font-size: 1.5rem;
+ text-align: center;
+ letter-spacing: 0.3em;
+ width: 200px;
+ outline: none;
+}
+
+.popup-box input:focus {
+ border-color: var(--primaire);
+}
+
+.popup-actions {
+ display: flex;
+ gap: 1rem;
+}
+
+.mdp-erreur {
+ color: var(--danger);
+ font-size: 0.9rem;
}
/* === Choix du mode === */
diff --git a/frontend/index.html b/frontend/index.html
index 6836adf..c46185f 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -21,8 +21,8 @@
400 / 400
-
-
+
+ ⚙
@@ -323,6 +323,19 @@
+
+
+
diff --git a/frontend/js/app.js b/frontend/js/app.js
index 86f9984..cceb20a 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -73,38 +73,50 @@ function recommencer() {
function setupEcranAccueil() {
const accueil = document.getElementById('ecran-accueil');
- // Toucher pour commencer
+ // Toucher pour commencer (ignorer le bouton admin et le popup)
accueil.addEventListener('click', (e) => {
- // Ignorer si c'est la zone admin
- if (e.target.closest('.zone-admin')) return;
+ if (e.target.closest('.btn-admin')) return;
allerA('mode');
});
-
- // Zone admin : appui long 3s
- const zoneAdmin = document.getElementById('zone-admin');
- let timerAdmin = null;
-
- zoneAdmin.addEventListener('touchstart', (e) => {
- e.preventDefault();
- e.stopPropagation();
- timerAdmin = setTimeout(() => allerA('admin'), 3000);
- });
-
- zoneAdmin.addEventListener('touchend', () => {
- if (timerAdmin) clearTimeout(timerAdmin);
- });
-
- // Support souris aussi (pour dev)
- zoneAdmin.addEventListener('mousedown', (e) => {
- e.stopPropagation();
- timerAdmin = setTimeout(() => allerA('admin'), 3000);
- });
-
- zoneAdmin.addEventListener('mouseup', () => {
- if (timerAdmin) clearTimeout(timerAdmin);
- });
}
+// --- Admin : icone + mot de passe ---
+
+const MDP_ADMIN = '1234';
+
+function ouvrirAdmin() {
+ const popup = document.getElementById('popup-mdp');
+ const input = document.getElementById('input-mdp-admin');
+ popup.classList.remove('cache');
+ input.value = '';
+ document.getElementById('mdp-erreur').classList.add('cache');
+ setTimeout(() => input.focus(), 100);
+}
+
+function fermerPopupMdp() {
+ document.getElementById('popup-mdp').classList.add('cache');
+ document.getElementById('input-mdp-admin').value = '';
+}
+
+function validerMdpAdmin() {
+ const input = document.getElementById('input-mdp-admin');
+ if (input.value === MDP_ADMIN) {
+ fermerPopupMdp();
+ allerA('admin');
+ } else {
+ document.getElementById('mdp-erreur').classList.remove('cache');
+ input.value = '';
+ input.focus();
+ }
+}
+
+// Valider avec Entree
+document.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' && !document.getElementById('popup-mdp').classList.contains('cache')) {
+ validerMdpAdmin();
+ }
+});
+
// --- Modes ---
function setupModes() {