ebene/prestation
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
KANE LAZENI 2026-02-26 21:55:29 +00:00
parent 49ae04aa08
commit 5e0bfb62fd
1 changed files with 248 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

311
Vue/Rechercheparcarte/index.php
View File

@ -3,142 +3,327 @@
?> ?>
<style> <style>
/* Masquage du texte */ @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Exo+2:wght@400;600&display=swap');
/* ===== WRAPPER & BORDURE ANIMÉE ===== */
.scan-wrapper {
position: relative;
width: 100%;
max-width: 720px;
margin: 40px auto;
}
.scan-wrapper::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 20px;
background: linear-gradient(135deg, #00c9ff, #0055a5, #00e5ff, #0055a5, #00c9ff);
background-size: 300% 300%;
animation: borderGlow 3s linear infinite;
z-index: 0;
}
.scan-wrapper.has-value::before {
background: linear-gradient(135deg, #00c853, #1b5e20, #69f0ae, #1b5e20, #00c853);
background-size: 300% 300%;
}
.scan-wrapper.has-error::before {
background: linear-gradient(135deg, #ff1744, #b71c1c, #ff6e6e, #b71c1c, #ff1744);
background-size: 300% 300%;
}
@keyframes borderGlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ===== INNER CONTAINER ===== */
.scan-inner {
position: relative;
z-index: 1;
background: #050f20;
border-radius: 18px;
padding: 16px 20px 20px;
overflow: hidden;
}
/* Ligne de scan animée */
.scan-inner::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, #00e5ff 30%, #ffffff 50%, #00e5ff 70%, transparent 100%);
animation: scanLine 2.5s ease-in-out infinite;
pointer-events: none;
z-index: 2;
opacity: 0.7;
}
@keyframes scanLine {
0% { top: 0%; opacity: 0; }
5% { opacity: 0.8; }
95% { opacity: 0.8; }
100% { top: 100%; opacity: 0; }
}
/* ===== COINS DÉCORATIFS ===== */
.scan-corner {
position: absolute;
width: 20px; height: 20px;
border-color: #00c9ff;
border-style: solid;
z-index: 4;
transition: border-color 0.3s;
}
.scan-corner.tl { top: 10px; left: 10px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.scan-corner.tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.scan-corner.bl { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.scan-corner.br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
.scan-wrapper.has-value .scan-corner { border-color: #00c853; }
.scan-wrapper.has-error .scan-corner { border-color: #ff1744; }
/* ===== LABEL EN-TÊTE ===== */
.scan-label {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: 'Exo 2', sans-serif;
font-size: 9.5pt;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(0, 180, 230, 0.6);
margin-bottom: 6px;
}
.nfc-icon-pulse {
animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.35; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
/* ===== CHAMP INPUT ===== */
#donneesCarte { #donneesCarte {
font-family: 'Rajdhani', monospace !important;
font-size: 24pt !important;
font-weight: 700;
height: 130px !important;
width: 100% !important;
text-align: center;
/* Données masquées (sécurité) */
color: transparent !important; color: transparent !important;
text-shadow: 0 0 8px rgba(0,0,0,0.5) !important; text-shadow: 0 0 10px rgba(0, 229, 255, 0.8) !important;
user-select: none !important; caret-color: #00e5ff;
/* Fond & bordure */
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
letter-spacing: 4px;
position: relative;
z-index: 3;
transition: text-shadow 0.3s;
} }
#donneesCarte::placeholder { #donneesCarte::placeholder {
color: #6c757d !important; font-family: 'Exo 2', sans-serif !important;
font-size: 12pt !important;
font-weight: 400;
color: rgba(0, 150, 200, 0.45) !important;
text-shadow: none !important; text-shadow: none !important;
letter-spacing: 1px;
} }
/* Animation lors de la saisie */ #donneesCarte:focus::placeholder {
color: rgba(0, 150, 200, 0.2) !important;
}
/* État : données détectées */
#donneesCarte.reading { #donneesCarte.reading {
border-color: #4caf50 !important; text-shadow: 0 0 14px rgba(0, 200, 83, 0.9) !important;
box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25) !important; animation: none !important;
animation: pulse-border 1s infinite;
} }
@keyframes pulse-border { /* ===== INDICATEUR DE LECTURE ===== */
0%, 100% { border-color: #4caf50; }
50% { border-color: #66bb6a; }
}
/* Indicateur visuel simple */
.reading-indicator { .reading-indicator {
display: none; display: none;
text-align: center; text-align: center;
color: #4caf50; margin-top: 6px;
font-size: 18px; font-family: 'Exo 2', sans-serif;
margin-top: 10px; font-size: 11pt;
font-weight: 600;
letter-spacing: 2px;
color: #00c853;
text-transform: uppercase;
animation: fadeInUp 0.3s ease;
} }
.reading-indicator.active { .reading-indicator.active {
display: block; display: block;
} }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===== SPINNER WAIT ===== */
#div_wait_nfc {
min-height: 0;
transition: min-height 0.3s;
}
/* ===== MESSAGE ERREUR ===== */
.alert-danger {
max-width: 720px;
margin: 16px auto 0;
border-radius: 10px;
border: 1px solid #ff1744;
background: rgba(183, 28, 28, 0.15);
color: #ff6e6e;
text-align: center;
padding: 10px 16px;
}
</style> </style>
<form id="frmrechercheparcarte" name="frmrechercheparcarte" method="post" action="Rechercheparcarte/index/"> <form id="frmrechercheparcarte" name="frmrechercheparcarte" method="post" action="Rechercheparcarte/index/">
<!-- <INPUT style='font-size:40pt; height: 50px; text-align: center;' -->
<INPUT style='font-size:30pt; height: 200px; text-align: center;' <div class="scan-wrapper" id="scan-wrapper">
class="form-control" <div class="scan-inner">
TYPE="text" <!-- Coins décoratifs -->
id="donneesCarte" <div class="scan-corner tl"></div>
name="donneesCarte" <div class="scan-corner tr"></div>
autofocus <div class="scan-corner bl"></div>
AUTOCOMPLETE="OFF" <div class="scan-corner br"></div>
placeholder="<?= _("Veuillez scanner la carte NFC ou le QR code!")?>">
<!-- Label -->
<div class="reading-indicator" id="reading-indicator"> <div class="scan-label">
<i class="fa fa-check-circle"></i> <span id="indicator-text"><?= _("Carte détectée") ?></span> <svg class="nfc-icon-pulse" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#00c9ff" stroke-width="2" stroke-linecap="round">
</div> <path d="M20 6a10 10 0 0 1 0 12"/>
<path d="M17 9a6 6 0 0 1 0 6"/>
<input id="lancerrechercheparcarte" name="lancerrechercheparcarte" class="sr-only" type="submit" value="<?= _("Rechercher") ?>" > <path d="M14 11.5a2 2 0 0 1 0 1"/>
<line x1="4" y1="12" x2="4.01" y2="12"/>
</svg>
INTER-SANTÉ &nbsp;·&nbsp; NFC / QR Code
</div>
<!-- Champ principal -->
<INPUT
class="form-control"
TYPE="text"
id="donneesCarte"
name="donneesCarte"
autofocus
AUTOCOMPLETE="OFF"
placeholder="<?= _("Veuillez scanner la carte NFC ou le QR code!")?>">
<!-- Indicateur -->
<div class="reading-indicator" id="reading-indicator">
<i class="fa fa-check-circle"></i>&nbsp;
<span id="indicator-text"><?= _("Carte détectée") ?></span>
</div>
</div>
</div>
<input id="lancerrechercheparcarte" name="lancerrechercheparcarte" class="sr-only" type="submit" value="<?= _("Rechercher") ?>">
</form> </form>
<div id="div_wait_nfc"></div> <div id="div_wait_nfc"></div>
<?php if (isset($msgErreur) && $msgErreur>" "): ?> <?php if (isset($msgErreur) && $msgErreur > " "): ?>
<div class="alert alert-danger" style="height:38px; padding:5px; text-align: center;"> <div class="alert alert-danger">
<H4><?= $msgErreur ?></H4> <H4><?= $msgErreur ?></H4>
</div> </div>
<?php endif; ?> <?php endif; ?>
<script> <script>
const inputField = document.getElementById('donneesCarte'); const inputField = document.getElementById('donneesCarte');
const indicator = document.getElementById('reading-indicator'); const indicator = document.getElementById('reading-indicator');
const indicatorText = document.getElementById('indicator-text'); const indicatorText = document.getElementById('indicator-text');
const scanWrapper = document.getElementById('scan-wrapper');
// Protection // ===== SÉCURITÉ : empêcher copie/coller =====
inputField.addEventListener('contextmenu', e => e.preventDefault()); inputField.addEventListener('contextmenu', e => e.preventDefault());
inputField.addEventListener('copy', e => e.preventDefault()); inputField.addEventListener('copy', e => e.preventDefault());
inputField.addEventListener('cut', e => e.preventDefault()); inputField.addEventListener('cut', e => e.preventDefault());
// ========== MAINTIEN DU FOCUS (Solution combinée optimale) ========== // ===== MAINTIEN DU FOCUS =====
// 1. Empêcher la perte de focus inputField.addEventListener('blur', function() {
inputField.addEventListener('blur', function(e) {
setTimeout(() => this.focus(), 10); setTimeout(() => this.focus(), 10);
}); });
// 2. Surveillance par intervalle (backup)
const focusInterval = setInterval(function() { const focusInterval = setInterval(function() {
if (document.activeElement !== inputField && !document.hidden) { if (document.activeElement !== inputField && !document.hidden) {
inputField.focus(); inputField.focus();
} }
}, 200); }, 200);
// 3. Capturer toutes les touches vers le champ
document.addEventListener('keydown', function(e) { document.addEventListener('keydown', function(e) {
if (!e.ctrlKey && !e.altKey && !e.metaKey && document.activeElement !== inputField) { if (!e.ctrlKey && !e.altKey && !e.metaKey && document.activeElement !== inputField) {
inputField.focus(); inputField.focus();
} }
}); });
// Nettoyage à la soumission du formulaire
document.getElementById('frmrechercheparcarte').addEventListener('submit', function() { document.getElementById('frmrechercheparcarte').addEventListener('submit', function() {
clearInterval(focusInterval); clearInterval(focusInterval);
}); });
// Détection du type de scan // ===== DÉTECTION DU TYPE =====
function detectScanType(value) { function detectScanType(value) {
if (value.endsWith('qr')) { return value.endsWith('qr') ? 'qr' : 'nfc';
return 'qr';
}
return 'nfc';
} }
// ===== FEEDBACK VISUEL À LA SAISIE =====
inputField.addEventListener('input', function() { inputField.addEventListener('input', function() {
if (this.value.length > 0) { if (this.value.length > 0) {
this.classList.add('reading'); this.classList.add('reading');
indicator.classList.add('active'); indicator.classList.add('active');
scanWrapper.classList.add('has-value');
scanWrapper.classList.remove('has-error');
const type = detectScanType(this.value); const type = detectScanType(this.value);
indicatorText.textContent = type === 'qr' indicatorText.textContent = type === 'qr'
? '<?= _("QR code détecté") ?>' ? '<?= _("QR code détecté") ?>'
: '<?= _("Carte détectée") ?>'; : '<?= _("Carte détectée") ?>';
} else { } else {
this.classList.remove('reading'); this.classList.remove('reading');
indicator.classList.remove('active'); indicator.classList.remove('active');
scanWrapper.classList.remove('has-value', 'has-error');
} }
}); });
inputField.addEventListener('change', function () { // ===== SOUMISSION AUTO =====
// alert(this.value); inputField.addEventListener('change', function() {
if (this.value.length > 3) { if (this.value.length > 3) {
const type = detectScanType(this.value); const type = detectScanType(this.value);
const message = type === 'qr' const message = type === 'qr'
? '<?= _("Traitement du QR code...") ?>' ? '<?= _("Traitement du QR code...") ?>'
: '<?= _("Lecture de la carte...") ?>'; : '<?= _("Lecture de la carte...") ?>';
$('#div_wait_nfc').html('<div style="padding-top:80px; text-align:center; font-size:14px; color: #4caf50;"><span><i class="fa fa-spinner fa-spin fa-5x"></i></span><p style="margin-top:20px;">' + message + '</p></div>'); $('#div_wait_nfc').html(
'<div style="padding-top:60px; text-align:center; font-family:\'Exo 2\',sans-serif; color:#00c9ff;">'
+ '<i class="fa fa-spinner fa-spin fa-4x"></i>'
+ '<p style="margin-top:20px; font-size:13pt; letter-spacing:2px; text-transform:uppercase;">' + message + '</p>'
+ '</div>'
);
this.form.submit(); this.form.submit();
} }
}); });
// Focus initial // ===== FOCUS INITIAL =====
window.addEventListener('load', () => inputField.focus()); window.addEventListener('load', () => inputField.focus());
document.addEventListener('DOMContentLoaded', () => inputField.focus()); document.addEventListener('DOMContentLoaded', () => inputField.focus());
// ===== Afficher erreur en rouge si présente =====
<?php if (isset($msgErreur) && $msgErreur > " "): ?>
scanWrapper.classList.add('has-error');
<?php endif; ?>
</script> </script>