From 5e0bfb62fd515ebc0aa1f8b87f086bad3b1bfd12 Mon Sep 17 00:00:00 2001
From: KANE LAZENI <lkane@ebene.info>
Date: Thu, 26 Feb 2026 21:55:29 +0000
Subject: [PATCH] a

---
 Vue/Rechercheparcarte/index.php | 311 +++++++++++++++++++++++++-------
 1 file changed, 248 insertions(+), 63 deletions(-)

diff --git a/Vue/Rechercheparcarte/index.php b/Vue/Rechercheparcarte/index.php
index e4e880e..b0411fe 100755
--- a/Vue/Rechercheparcarte/index.php
+++ b/Vue/Rechercheparcarte/index.php
@@ -3,142 +3,327 @@
 ?>
 
 <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 {
+    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;
-    text-shadow: 0 0 8px rgba(0,0,0,0.5) !important;
-    user-select: none !important;
+    text-shadow: 0 0 10px rgba(0, 229, 255, 0.8) !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 {
-    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;
+    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 {
-    border-color: #4caf50 !important;
-    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25) !important;
-    animation: pulse-border 1s infinite;
+    text-shadow: 0 0 14px rgba(0, 200, 83, 0.9) !important;
+    animation: none !important;
 }
 
-@keyframes pulse-border {
-    0%, 100% { border-color: #4caf50; }
-    50% { border-color: #66bb6a; }
-}
-
-/* Indicateur visuel simple */
+/* ===== INDICATEUR DE LECTURE ===== */
 .reading-indicator {
     display: none;
     text-align: center;
-    color: #4caf50;
-    font-size: 18px;
-    margin-top: 10px;
+    margin-top: 6px;
+    font-family: 'Exo 2', sans-serif;
+    font-size: 11pt;
+    font-weight: 600;
+    letter-spacing: 2px;
+    color: #00c853;
+    text-transform: uppercase;
+    animation: fadeInUp 0.3s ease;
 }
 
 .reading-indicator.active {
     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>
 
 <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;' 
-	       class="form-control" 
-	       TYPE="text" 
-	       id="donneesCarte" 
-	       name="donneesCarte" 
-	       autofocus 
-	       AUTOCOMPLETE="OFF" 
-	       placeholder="<?= _("Veuillez scanner la carte NFC ou le QR code!")?>">
-	
-	<div class="reading-indicator" id="reading-indicator">
-		<i class="fa fa-check-circle"></i> <span id="indicator-text"><?= _("Carte détectée") ?></span>
-	</div>
-	
-	<input id="lancerrechercheparcarte" name="lancerrechercheparcarte" class="sr-only" type="submit" value="<?= _("Rechercher") ?>" >
+
+    <div class="scan-wrapper" id="scan-wrapper">
+        <div class="scan-inner">
+            <!-- Coins décoratifs -->
+            <div class="scan-corner tl"></div>
+            <div class="scan-corner tr"></div>
+            <div class="scan-corner bl"></div>
+            <div class="scan-corner br"></div>
+
+            <!-- Label -->
+            <div class="scan-label">
+                <svg class="nfc-icon-pulse" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#00c9ff" stroke-width="2" stroke-linecap="round">
+                    <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"/>
+                    <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>
 
 <div id="div_wait_nfc"></div>
 
-<?php if (isset($msgErreur) && $msgErreur>" "): ?>
-	<div class="alert alert-danger" style="height:38px; padding:5px; text-align: center;">
-	<H4><?= $msgErreur ?></H4>
-	</div>
+<?php if (isset($msgErreur) && $msgErreur > " "): ?>
+    <div class="alert alert-danger">
+        <H4><?= $msgErreur ?></H4>
+    </div>
 <?php endif; ?>
 
 <script>
-const inputField = document.getElementById('donneesCarte');
-const indicator = document.getElementById('reading-indicator');
+const inputField  = document.getElementById('donneesCarte');
+const indicator   = document.getElementById('reading-indicator');
 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('copy', e => e.preventDefault());
-inputField.addEventListener('cut', e => e.preventDefault());
+inputField.addEventListener('copy',        e => e.preventDefault());
+inputField.addEventListener('cut',         e => e.preventDefault());
 
-// ========== MAINTIEN DU FOCUS (Solution combinée optimale) ==========
-// 1. Empêcher la perte de focus
-inputField.addEventListener('blur', function(e) {
+// ===== MAINTIEN DU FOCUS =====
+inputField.addEventListener('blur', function() {
     setTimeout(() => this.focus(), 10);
 });
 
-// 2. Surveillance par intervalle (backup)
 const focusInterval = setInterval(function() {
     if (document.activeElement !== inputField && !document.hidden) {
         inputField.focus();
     }
 }, 200);
 
-// 3. Capturer toutes les touches vers le champ
 document.addEventListener('keydown', function(e) {
     if (!e.ctrlKey && !e.altKey && !e.metaKey && document.activeElement !== inputField) {
         inputField.focus();
     }
 });
 
-// Nettoyage à la soumission du formulaire
 document.getElementById('frmrechercheparcarte').addEventListener('submit', function() {
     clearInterval(focusInterval);
 });
 
-// Détection du type de scan
+// ===== DÉTECTION DU TYPE =====
 function detectScanType(value) {
-    if (value.endsWith('qr')) {
-            return 'qr';
-    }
-    return 'nfc';
+    return value.endsWith('qr') ? 'qr' : 'nfc';
 }
 
+// ===== FEEDBACK VISUEL À LA SAISIE =====
 inputField.addEventListener('input', function() {
     if (this.value.length > 0) {
         this.classList.add('reading');
         indicator.classList.add('active');
-        
+        scanWrapper.classList.add('has-value');
+        scanWrapper.classList.remove('has-error');
+
         const type = detectScanType(this.value);
-        indicatorText.textContent = type === 'qr' 
-            ? '<?= _("QR code détecté") ?>' 
+        indicatorText.textContent = type === 'qr'
+            ? '<?= _("QR code détecté") ?>'
             : '<?= _("Carte détectée") ?>';
     } else {
         this.classList.remove('reading');
         indicator.classList.remove('active');
+        scanWrapper.classList.remove('has-value', 'has-error');
     }
 });
 
-inputField.addEventListener('change', function () {
-    // alert(this.value);
+// ===== SOUMISSION AUTO =====
+inputField.addEventListener('change', function() {
     if (this.value.length > 3) {
-        const type = detectScanType(this.value);
-        const message = type === 'qr' 
-            ? '<?= _("Traitement du QR code...") ?>' 
+        const type    = detectScanType(this.value);
+        const message = type === 'qr'
+            ? '<?= _("Traitement du QR code...") ?>'
             : '<?= _("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();
     }
 });
 
-// Focus initial
+// ===== FOCUS INITIAL =====
 window.addEventListener('load', () => 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>
\ No newline at end of file