193 lines
8.5 KiB
PHP
Executable File
193 lines
8.5 KiB
PHP
Executable File
<div class="page-content animate__animated animate__fadeIn">
|
|
<div class="header-section mb-2">
|
|
<div class="d-flex align-items-center bg-white p-2 shadow-sm border-start border-primary border-4" style="border-radius: var(--radius-md);">
|
|
<div class="icon-shape bg-primary-ghost text-primary rounded-circle me-3" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
|
|
<i class="fas fa-id-card fs-4"></i>
|
|
</div>
|
|
<div>
|
|
<h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Identification de l'Assuré") ?></h4>
|
|
<p class="text-muted small mb-0"><?= _("Scannez une carte NFC ou un QR Code pour identification immédiate") ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center mt-n4">
|
|
<div class="col-md-8 col-lg-5">
|
|
<form id="frmrechercheparcarte" name="frmrechercheparcarte" method="post" action="Rechercheparcarte/index/">
|
|
|
|
<div class="scan-container text-center mt-0">
|
|
<div class="scan-wrapper shadow-lg mb-3" id="scan-wrapper">
|
|
<div class="scan-inner p-4"> <div class="scan-corner tl"></div>
|
|
<div class="scan-corner tr"></div>
|
|
<div class="scan-corner bl"></div>
|
|
<div class="scan-corner br"></div>
|
|
|
|
<div class="scan-interface">
|
|
<div class="mb-3">
|
|
<div class="nfc-pulse-container mb-2">
|
|
<svg class="nfc-icon-pulse" width="45" height="45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M20 6a10 10 0 0 1 0 12"/>
|
|
<path d="M17 9a6 6 0 0 1 0 6"/>
|
|
<path d="M14 11.5a2 2 0 0 1 0 1"/>
|
|
<rect x="2" y="6" width="8" height="12" rx="1"/>
|
|
</svg>
|
|
</div>
|
|
<h6 class="text-uppercase fw-bold text-primary ls-1 small">Inter-Santé NFC / QR Code</h6>
|
|
</div>
|
|
|
|
<div class="input-focus-wrapper">
|
|
<input
|
|
class="form-control-scan"
|
|
type="text"
|
|
id="donneesCarte"
|
|
name="donneesCarte"
|
|
autofocus
|
|
autocomplete="OFF"
|
|
placeholder="<?= _("En attente...") ?>">
|
|
</div>
|
|
|
|
<div class="reading-indicator mt-3" id="reading-indicator">
|
|
<i class="fas fa-check-circle me-2"></i>
|
|
<span id="indicator-text"><?= _("Prêt") ?></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-muted fw-bold small animate__animated animate__pulse animate__infinite" style="font-size: 0.8rem;">
|
|
<?= _("Présentez la carte ou le code") ?>
|
|
</p>
|
|
</div>
|
|
|
|
<input id="lancerrechercheparcarte" name="lancerrechercheparcarte" class="sr-only" type="submit">
|
|
</form>
|
|
|
|
<div id="div_wait_nfc"></div>
|
|
|
|
<?php if (isset($msgErreur) && $msgErreur > " "): ?>
|
|
<div class="alert-danger-ghost border-0 rounded-pill text-center mt-2">
|
|
<i class="fas fa-exclamation-triangle me-2"></i> <strong><?= $msgErreur ?></strong>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
|
|
/* Style Spécifique Scan Neutral Pro */
|
|
|
|
/* Ajout du support pour la marge négative si ton Bootstrap ne l'inclut pas par défaut */
|
|
.mt-n4 {
|
|
margin-top: -2.5rem !important;
|
|
}
|
|
|
|
.scan-wrapper {
|
|
background: #ffffff;
|
|
border-radius: 24px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 2px solid #f1f4f6;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.scan-wrapper.has-value { border-color: var(--bs-primary); background: rgba(33, 46, 83, 0.02); }
|
|
.scan-wrapper.has-error { border-color: var(--bs-danger); background: rgba(220, 53, 69, 0.02); }
|
|
|
|
.scan-corner {
|
|
position: absolute; width: 30px; height: 30px;
|
|
border: 4px solid var(--bs-primary);
|
|
opacity: 0.3; transition: all 0.3s ease;
|
|
}
|
|
.tl { top: 20px; left: 20px; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
|
|
.tr { top: 20px; right: 20px; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; }
|
|
.bl { bottom: 20px; left: 20px; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; }
|
|
.br { bottom: 20px; right: 20px; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }
|
|
|
|
.scan-wrapper.has-value .scan-corner { opacity: 1; width: 45px; height: 45px; }
|
|
|
|
.form-control-scan {
|
|
background: transparent; border: none; text-align: center;
|
|
font-size: 1.2rem; font-weight: 600; color: var(--bs-primary);
|
|
width: 100%; outline: none; caret-color: var(--bs-primary);
|
|
}
|
|
|
|
.nfc-icon-pulse { color: var(--bs-primary); }
|
|
.ls-2 { letter-spacing: 2px; }
|
|
.ls-1 { letter-spacing: 1px; }
|
|
|
|
.alert-danger-ghost {
|
|
background-color: rgba(220, 53, 69, 0.1);
|
|
color: #dc3545;
|
|
padding: 12px 24px;
|
|
}
|
|
|
|
/* Animation de pulsation NFC */
|
|
@keyframes nfcPulse {
|
|
0% { transform: scale(1); opacity: 0.8; }
|
|
50% { transform: scale(1.1); opacity: 1; color: #00c9ff; }
|
|
100% { transform: scale(1); opacity: 0.8; }
|
|
}
|
|
.nfc-icon-pulse { animation: nfcPulse 2s infinite ease-in-out; }
|
|
|
|
/* ===== INDICATEUR DE LECTURE NEUTRAL PRO ===== */
|
|
.reading-indicator {
|
|
display: none;
|
|
text-align: center;
|
|
margin-top: 15px; /* Un peu plus d'espace */
|
|
font-family: 'Exo 2', sans-serif;
|
|
font-size: 10pt; /* Légèrement plus petit pour plus de finesse */
|
|
font-weight: 700;
|
|
letter-spacing: 1.5px;
|
|
color: #198754; /* Vert standard sécurisant */
|
|
text-transform: uppercase;
|
|
animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.reading-indicator.active {
|
|
display: flex; /* Flex pour aligner l'icône et le texte */
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ===== SPINNER WAIT ===== */
|
|
#div_wait_nfc {
|
|
min-height: 0;
|
|
transition: all 0.5s ease-in-out;
|
|
}
|
|
|
|
/* ===== MESSAGE ERREUR NEUTRAL PRO ===== */
|
|
.alert-danger-ghost {
|
|
max-width: 600px; /* Plus compact */
|
|
margin: 20px auto 0;
|
|
border-radius: 50px; /* Forme pilule comme nos boutons */
|
|
border: none;
|
|
background: rgba(220, 53, 69, 0.08); /* Rouge très translucide */
|
|
color: #dc3545; /* Rouge standard */
|
|
text-align: center;
|
|
padding: 12px 25px;
|
|
font-weight: 600;
|
|
font-size: 10pt;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// [Garder votre logique JS existante, elle est excellente]
|
|
// Mise à jour mineure pour le feedback visuel Neutral Pro
|
|
const inputField = document.getElementById('donneesCarte');
|
|
const scanWrapper = document.getElementById('scan-wrapper');
|
|
const indicatorText = document.getElementById('indicator-text');
|
|
|
|
inputField.addEventListener('input', function() {
|
|
if (this.value.length > 0) {
|
|
scanWrapper.classList.add('has-value');
|
|
indicatorText.textContent = this.value.endsWith('qr') ? '<?= _("QR Code détecté...") ?>' : '<?= _("Carte détectée...") ?>';
|
|
} else {
|
|
scanWrapper.classList.remove('has-value');
|
|
indicatorText.textContent = '<?= _("En attente de détection...") ?>';
|
|
}
|
|
});
|
|
|
|
// Forcer le focus 200ms après chargement (Règle Neutral Pro)
|
|
setTimeout(() => inputField.focus(), 200);
|
|
</script>
|