jules/photobooth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pave numerique tactile dans la popup admin

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jules
2026-04-07 13:11:08 +02:00
parent c919c420b7
commit 8418d481a5
3 changed files with 62 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/css/style.css
View File

@@ -176,6 +176,42 @@ html, body {
gap: 1rem; gap: 1rem;
} }
.popup-box-pave {
max-width: 360px;
}
.pave-numerique {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 1.5rem 0;
}
.pave-touche {
font-size: 2rem;
padding: 1.2rem;
border: none;
border-radius: 12px;
background: rgba(255, 255, 255, 0.15);
color: #fff;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.pave-touche:active {
background: rgba(255, 255, 255, 0.3);
transform: scale(0.95);
}
.pave-effacer {
background: rgba(255, 100, 100, 0.3);
}
.pave-valider {
background: rgba(100, 255, 100, 0.3);
}
.mdp-erreur { .mdp-erreur {
color: var(--danger); color: var(--danger);
font-size: 0.9rem; font-size: 0.9rem;

21
frontend/index.html
View File

@@ -378,14 +378,25 @@
<!-- Popup mot de passe admin --> <!-- Popup mot de passe admin -->
<div id="popup-mdp" class="popup-overlay cache"> <div id="popup-mdp" class="popup-overlay cache">
<div class="popup-box"> <div class="popup-box popup-box-pave">
<h3>Acces administration</h3> <h3>Acces administration</h3>
<input type="password" id="input-mdp-admin" placeholder="Mot de passe" inputmode="numeric" autocomplete="off"> <input type="password" id="input-mdp-admin" placeholder="&#9679;&#9679;&#9679;&#9679;" inputmode="none" autocomplete="off" readonly>
<div class="popup-actions"> <div class="pave-numerique">
<button class="btn-action" onclick="validerMdpAdmin()">OK</button> <button class="pave-touche" onclick="paveTouche('1')">1</button>
<button class="btn-secondaire" onclick="fermerPopupMdp()">Annuler</button> <button class="pave-touche" onclick="paveTouche('2')">2</button>
<button class="pave-touche" onclick="paveTouche('3')">3</button>
<button class="pave-touche" onclick="paveTouche('4')">4</button>
<button class="pave-touche" onclick="paveTouche('5')">5</button>
<button class="pave-touche" onclick="paveTouche('6')">6</button>
<button class="pave-touche" onclick="paveTouche('7')">7</button>
<button class="pave-touche" onclick="paveTouche('8')">8</button>
<button class="pave-touche" onclick="paveTouche('9')">9</button>
<button class="pave-touche pave-effacer" onclick="paveEffacer()">&#9003;</button>
<button class="pave-touche" onclick="paveTouche('0')">0</button>
<button class="pave-touche pave-valider" onclick="validerMdpAdmin()">&#10003;</button>
</div> </div>
<p id="mdp-erreur" class="mdp-erreur cache">Mot de passe incorrect</p> <p id="mdp-erreur" class="mdp-erreur cache">Mot de passe incorrect</p>
<button class="btn-secondaire" onclick="fermerPopupMdp()">Annuler</button>
</div> </div>
</div> </div>

11
frontend/js/app.js
View File

@@ -124,7 +124,6 @@ function ouvrirAdmin() {
popup.classList.remove('cache'); popup.classList.remove('cache');
input.value = ''; input.value = '';
document.getElementById('mdp-erreur').classList.add('cache'); document.getElementById('mdp-erreur').classList.add('cache');
setTimeout(() => input.focus(), 100);
} }
function fermerPopupMdp() { function fermerPopupMdp() {
@@ -132,6 +131,16 @@ function fermerPopupMdp() {
document.getElementById('input-mdp-admin').value = ''; document.getElementById('input-mdp-admin').value = '';
} }
function paveTouche(chiffre) {
const input = document.getElementById('input-mdp-admin');
input.value += chiffre;
}
function paveEffacer() {
const input = document.getElementById('input-mdp-admin');
input.value = input.value.slice(0, -1);
}
function validerMdpAdmin() { function validerMdpAdmin() {
const input = document.getElementById('input-mdp-admin'); const input = document.getElementById('input-mdp-admin');
if (input.value === MDP_ADMIN) { if (input.value === MDP_ADMIN) {