diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index e10bd582..894881b2 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -1582,4 +1582,153 @@ select[class*="selectpicker"], overflow: hidden; text-overflow: ellipsis; display: block !important; -} \ No newline at end of file +} + +/* ===== 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 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 { + font-family: 'Exo 2', sans-serif !important; + font-size: 20pt !important; + font-weight: 600; + color: rgba(0, 210, 255, 0.85) !important; + text-shadow: 0 0 12px rgba(0, 210, 255, 0.5) !important; + letter-spacing: 1px; +} + +#donneesCarte:focus::placeholder { + color: rgba(0, 210, 255, 0.55) !important; + text-shadow: 0 0 8px rgba(0, 210, 255, 0.3) !important; +} + +/* État : données détectées */ +#donneesCarte.reading { + text-shadow: 0 0 14px rgba(0, 200, 83, 0.9) !important; + animation: none !important; +} + diff --git a/Vue/Rechercheparcarte/index.php b/Vue/Rechercheparcarte/index.php index 84e8b680..5aad2ee4 100755 --- a/Vue/Rechercheparcarte/index.php +++ b/Vue/Rechercheparcarte/index.php @@ -1,330 +1,189 @@ -titre = "INTER-SANTE - "._("Recherche du patient par carte") ; -?> - - - -