Composants
Alerte de délai d’expiration de la session
Composant d’alerte de délai d’expiration de session
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session complexe et réactif avec une conception monospace/développeur, un schéma en noir et blanc et une couleur d’accentuation vive, adapté aux plates-formes éducatives. Comprend la prise en charge du mode sombre et un compte à rebours.
HTML Code
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-gray-950 dark:bg-opacity-85 font-mono">
<div class="relative w-full max-w-md mx-auto p-6 border-2 border-green-500 bg-gray-800 text-gray-100 shadow-lg dark:bg-gray-900 dark:text-gray-50 overflow-hidden
before:content-[''] before:absolute before:inset-0 before:border-t-2 before:border-l-2 before:border-green-500 before:pointer-events-none before:animate-pulse-border
after:content-[''] after:absolute after:inset-0 after:border-b-2 after:border-r-2 after:border-green-500 after:pointer-events-none after:animate-pulse-border-alt">
<!-- Terminal Header (simulated) -->
<div class="flex items-center space-x-2 pb-4 mb-4 border-b border-green-500">
<span class="block w-3 h-3 bg-red-500 rounded-full"></span>
<span class="block w-3 h-3 bg-yellow-500 rounded-full"></span>
<span class="block w-3 h-3 bg-lime-500 rounded-full"></span>
<div class="flex-1 text-center text-green-400 text-sm"></div>
<span class="text-green-400 text-sm">TERMINAL::SESSION_STATUS</span>
</div>
<h2 class="text-2xl font-bold mb-4 text-green-400 flex items-center">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
SESSION EXPIRED SOON
</h2>
<p class="text-gray-300 text-sm mb-6 dark:text-gray-300">
Your current session is about to expire due to inactivity.
Please confirm to extend your session or you will be logged out.
</p>
<!-- Countdown Section -->
<div class="bg-gray-900 border border-green-500 p-4 mb-6 text-center shadow-inner relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-green-900/50 to-transparent animate-pulse-background pointer-events-none"></div>
<p class="text-green-400 text-lg sm:text-xl md:text-2xl font-bold uppercase tracking-wider mb-2 z-10 relative">
Session Timeout In:
</p>
<div class="text-white text-3xl sm:text-4xl lg:text-5xl font-extrabold flex justify-center items-baseline z-10 relative">
<span class="countdown-digit min-w-[2.5rem] sm:min-w-[3rem] md:min-w-[4rem] text-right">00</span>
<span class="text-green-500 mx-1 sm:mx-2">:</span>
<span class="countdown-digit min-w-[2.5rem] sm:min-w-[3rem] md:min-w-[4rem] text-left">59</span>
</div>
<p class="text-gray-400 text-xs sm:text-sm mt-1 z-10 relative">(minutes:seconds)</p>
</div>
<!-- Actions -->
<div class="flex flex-col sm:flex-row gap-4">
<button class="flex-1 py-3 px-6 bg-green-600 text-white font-semibold uppercase text-sm
hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-gray-800
active:bg-green-800 transition duration-200 ease-in-out
border border-green-500 shadow-md transform hover:scale-105 active:scale-100
sm:order-1">
<span class="flex items-center justify-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
EXTEND SESSION
</span>
</button>
<button class="flex-1 py-3 px-6 bg-gray-700 text-gray-200 font-semibold uppercase text-sm
hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800
active:bg-gray-700 transition duration-200 ease-in-out
border border-gray-600 shadow-md transform hover:scale-105 active:scale-100
sm:order-2">
<span class="flex items-center justify-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
</svg>
LOG OUT NOW
</span>
</button>
</div>
<!-- Background Terminal Glitch Effect (CSS for this is conceptual, would need actual JS for real glitch) -->
<div class="absolute inset-0 pointer-events-none overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full animate-flicker brightness-125 saturate-150" style="background-image: linear-gradient(to bottom, rgba(0,255,0,0.1) 0%, rgba(0,0,0,0) 50%, rgba(0,255,0,0.1) 100%); mix-blend-mode: overlay;"></div>
<div class="absolute top-0 left-0 w-full h-full animate-scanline" style="background-image: linear-gradient(to bottom, transparent 49%, rgba(0,255,0,0.1) 50%, transparent 51%); background-size: 100% 3px;"></div>
</div>
</div>
</div>
<style>
/* Keyframes for animations */
@keyframes pulse-border {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.01); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes pulse-border-alt {
0% { transform: scale(1); opacity: 1;}
50% { transform: scale(0.99); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes pulse-background {
0% { transform: translateX(-100%); opacity: 0.2; }
50% { transform: translateX(0%); opacity: 0.5; }
100% { transform: translateX(100%); opacity: 0.2; }
}
@keyframes flicker {
0%, 100% { opacity: 1; }
5% { opacity: 0.95; }
10% { opacity: 1.05; }
20% { opacity: 0.98; }
30% { opacity: 1.02; }
40% { opacity: 0.97; }
50% { opacity: 1.03; }
60% { opacity: 0.99; }
70% { opacity: 1.01; }
80% { opacity: 0.96; }
90% { opacity: 1.04; }
}
@keyframes scanline {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
.animate-pulse-border {
animation: pulse-border 2.5s ease-in-out infinite;
}
.animate-pulse-border-alt {
animation: pulse-border-alt 2.5s ease-in-out infinite reverse;
}
.animate-pulse-background {
animation: pulse-background 3s linear infinite;
}
.animate-flicker {
animation: flicker 0.5s infinite alternate;
}
.animate-scanline {
animation: scanline 2s infinite linear;
}
.countdown-digit {
display: inline-block;
/* Monospace font styling for digits */
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
text-shadow: 0 0 5px rgba(0,255,0,0.5), 0 0 10px rgba(0,255,0,0.3);
}
/* Dark mode specific styles */
.dark .bg-gray-800 {
background-color: #1a202c; /* Deeper dark for dialog */
}
.dark .text-gray-100 {
color: #edf2f7; /* Lighter text in dark mode */
}
.dark .border-green-500 {
border-color: #10B981; /* Maintain green accent in dark */
}
.dark .text-green-400 {
color: #34D399; /* Adjust green text lightnes */
}
.dark .bg-gray-900 {
background-color: #000000; /* Even darker inner background */
}
.dark .border-gray-600 {
border-color: #4A5568;
}
.dark .text-gray-200 {
color: #e2e8f0; /* Lighter text for secondary button */
}
</style>Composants associés
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session complexe et réactif avec un design minimaliste en niveaux de gris, adapté aux sites Web d’entreprise et incluant la prise en charge du thème sombre.
Composant d’alerte de délai d’expiration de session
Un composant minimaliste d’alerte de délai d’expiration de session pour les sites Web de commerce électronique, conçu avec une palette de couleurs monochromatique et réactif avec la prise en charge du thème sombre à l’aide de Tailwind CSS.
Alerte de délai d’expiration de la session
Un composant d’alerte de délai d’expiration de session inspiré de la 3D avec un