Composant de connexion/inscription Cyberpunk Sepia
Un composant de connexion/inscription complexe et réactif avec une esthétique néon inspirée du cyberpunk utilisant des tons sépia/bruns, adapté à un forum ou à une plate-forme communautaire. Comprend la prise en charge du mode sombre et des éléments interactifs.
HTML Code
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-900 dark:bg-gray-950 font-mono relative overflow-hidden">
<!-- Background Grid/Pattern -->
<div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none">
<div class="absolute inset-0 bg-repeat bg-[size:16px_16px] animate-[pulse_10s_infinite] dark:animate-[pulse_15s_infinite]" style="background-image: linear-gradient(to right, #2a1b0c 1px, transparent 1px), linear-gradient(to bottom, #2a1b0c 1px, transparent 1px);"></div>
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(42,27,12,0.5)_0%,transparent_70%)]"></div>
</div>
<!-- Main Card Container -->
<div class="relative z-10 w-full max-w-md mx-auto rounded-xl shadow-2xl overflow-hidden
bg-gradient-to-br from-[#2a1b0c] to-[#1a0f05]
dark:from-[#1a0f05] dark:to-black
border border-[#4a2e0e] dark:border-[#2a1b0c]
transform perspective-1000 rotateX-3 rotateY-1
animate-[glow_3s_infinite_alternate]">
<!-- Cyberpunk Border Effect -->
<div class="absolute inset-0 pointer-events-none rounded-xl" style="box-shadow: inset 0 0 15px rgba(255,165,0,0.3), 0 0 25px rgba(255,165,0,0.2) neon-glow-effect;"></div>
<div class="absolute inset-0 rounded-xl border border-transparent animate-[borderPulse_5s_infinite] dark:animate-[borderPulse_7s_infinite]" style="background: linear-gradient(45deg, rgba(255,165,0,0.5) 0%, rgba(200,100,0,0.5) 50%, rgba(255,165,0,0.5) 100%) border-box; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;"></div>
<div class="p-8 sm:p-10 relative z-20">
<div class="text-center mb-8">
<h1 class="text-4xl sm:text-5xl font-bold text-[#f7c58f] dark:text-[#ffd29e] mb-2 leading-tight tracking-wider flicker-text">
ACCESS TERMINAL
</h1>
<p class="text-[#a07a53] dark:text-[#c4ae93] text-sm sm:text-base">Initiate Protocol Login / Registration</p>
</div>
<!-- Tab Navigation -->
<div class="flex mb-8 border-b-2 border-[#4a2e0e] dark:border-[#2a1b0c]">
<button id="login-tab" class="flex-1 py-3 text-lg font-semibold text-[#f7c58f] dark:text-[#ffd29e]
border-b-4 border-[#ffab4a] dark:border-[#ff9933]
hover:text-white dark:hover:text-white
transition-colors duration-300
tab-active"
onclick="toggleTabs(this, 'login-form')">
LOGIN
</button>
<button id="signup-tab" class="flex-1 py-3 text-lg font-semibold text-[#a07a53] dark:text-[#c4ae93]
border-b-4 border-transparent
hover:text-white dark:hover:text-white
transition-colors duration-300"
onclick="toggleTabs(this, 'signup-form')">
SIGNUP
</button>
</div>
<!-- Login Form -->
<form id="login-form" class="space-y-6 tab-content">
<div>
<label for="username" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
<span class="text-[#ffab4a]">//</span> USERNAME
</label>
<input type="text" id="username" class="w-full p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#e0c29f] dark:text-[#f2e6d9]
border border-[#5a3b1a] dark:border-[#3a2612]
focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent
placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c]
shadow-inner-glow leading-normal"
placeholder="Enter your ID" aria-label="Username">
</div>
<div>
<label for="password" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
<span class="text-[#ffab4a]">//</span> PASSWORD
</label>
<input type="password" id="password" class="w-full p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#e0c29f] dark:text-[#f2e6d9]
border border-[#5a3b1a] dark:border-[#3a2612]
focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent
placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c]
shadow-inner-glow leading-normal"
placeholder="Access Key" aria-label="Password">
</div>
<div class="flex items-center justify-between text-sm">
<a href="#" class="text-[#ffab4a] hover:underline transition-colors duration-300">Forgot Password?</a>
<div class="flex items-center">
<input type="checkbox" id="remember" class="hidden peer">
<label for="remember" class="relative flex items-center cursor-pointer mr-2">
<span class="w-5 h-5 border-2 border-[#ffab4a] dark:border-[#ff9933] rounded
flex-shrink-0 mr-2 flex items-center justify-center
peer-checked:bg-[#ffab4a] dark:peer-checked:bg-[#ff9933]
peer-checked:border-[#ffab4a] dark:peer-checked:border-[#ff9933]
transition-all duration-200">
<svg class="w-3 h-3 text-[#3a2612] peer-checked:opacity-100 opacity-0 transition-opacity duration-200" 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>
</span>
<span class="text-white dark:text-[#ffd29e]">Remember Me</span>
</label>
</div>
</div>
<button type="submit" class="w-full py-3 rounded-md text-xl font-bold
bg-[#ffab4a] dark:bg-[#ff9933]
text-[#3a2612] dark:text-[#2a1b0c]
hover:bg-[#ffc58a] dark:hover:bg-[#ffb066]
transition-all duration-300
shadow-lg shadow-[#ffab4a]/30 dark:shadow-[#ff9933]/30
neon-button-effect">ENTER SYSTEM</button>
</form>
<!-- Signup Form (Hidden by default) -->
<form id="signup-form" class="space-y-6 tab-content hidden">
<div>
<label for="new-username" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
<span class="text-[#ffab4a]">//</span> NEW USERNAME
</label>
<input type="text" id="new-username" class="w-full p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#e0c29f] dark:text-[#f2e6d9]
border border-[#5a3b1a] dark:border-[#3a2612]
focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent
placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c]
shadow-inner-glow leading-normal"
placeholder="Designate your ID" aria-label="New Username">
</div>
<div>
<label for="new-email" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
<span class="text-[#ffab4a]">//</span> EMAIL ADDRESS
</label>
<input type="email" id="new-email" class="w-full p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#e0c29f] dark:text-[#f2e6d9]
border border-[#5a3b1a] dark:border-[#3a2612]
focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent
placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c]
shadow-inner-glow leading-normal"
placeholder="Provide Matrix Coordinates" aria-label="Email Address">
</div>
<div>
<label for="new-password" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
<span class="text-[#ffab4a]">//</span> NEW PASSWORD
</label>
<input type="password" id="new-password" class="w-full p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#e0c29f] dark:text-[#f2e6d9]
border border-[#5a3b1a] dark:border-[#3a2612]
focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent
placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c]
shadow-inner-glow leading-normal"
placeholder="Set Access Key" aria-label="New Password">
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
<span class="text-[#ffab4a]">//</span> CONFIRM PASSWORD
</label>
<input type="password" id="confirm-password" class="w-full p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#e0c29f] dark:text-[#f2e6d9]
border border-[#5a3b1a] dark:border-[#3a2612]
focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent
placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c]
shadow-inner-glow leading-normal"
placeholder="Re-enter Access Key" aria-label="Confirm Password">
</div>
<button type="submit" class="w-full py-3 rounded-md text-xl font-bold
bg-[#ffab4a] dark:bg-[#ff9933]
text-[#3a2612] dark:text-[#2a1b0c]
hover:bg-[#ffc58a] dark:hover:bg-[#ffb066]
transition-all duration-300
shadow-lg shadow-[#ffab4a]/30 dark:shadow-[#ff9933]/30
neon-button-effect">INITIATE REGISTRATION</button>
</form>
<p class="mt-8 text-center text-sm text-[#a07a53] dark:text-[#c4ae93]">
<span class="text-[#ffab4a] mr-1">//</span> STATUS: ONLINE. SYSTEM READY FOR INTERACTION.
</p>
<!-- Futuristic Social Login Section -->
<div class="mt-8 pt-6 border-t-2 border-[#4a2e0e] dark:border-[#2a1b0c] text-center">
<p class="text-sm text-[#f7c58f] dark:text-[#ffd29e] mb-4">Or Connect Via Integrated Networks:</p>
<div class="flex justify-center space-x-4">
<button class="flex items-center justify-center p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#ffab4a] dark:text-[#ff9933]
border border-[#5a3b1a] dark:border-[#3a2612]
hover:bg-[#4a2e0e] dark:hover:bg-[#3a2612]
hover:text-white dark:hover:text-white
transition-colors duration-300
shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#ffab4a]">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18H10.5V9h3.75v9zM12 6.75a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"></path>
</svg>
<span class="hidden sm:inline">Network_ID</span>
</button>
<button class="flex items-center justify-center p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#ffab4a] dark:text-[#ff9933]
border border-[#5a3b1a] dark:border-[#3a2612]
hover:bg-[#4a2e0e] dark:hover:bg-[#3a2612]
hover:text-white dark:hover:text-white
transition-colors duration-300
shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#ffab4a]">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M22.54 6.75H1.46C.66 6.75 0 7.41 0 8.21v7.58c0 .8.66 1.46 1.46 1.46h21.08c.8 0 1.46-.66 1.46-1.46V8.21c0-.8-.66-1.46-1.46-1.46zM8.88 15.69c-3.13 0-5.68-.38-5.68-.38S2.22 13.56 2.22 12s1.08-3.31 1.08-3.31c0 0 2.55-.38 5.68-.38 2.06 0 4.1.28 5.86.81 1.03.31 2.37.89 3.01 1.34 1.33.91 1.63 2.15 1.63 2.15s-.35 1.33-1.63 2.15c-.64.45-1.98 1.03-3.01 1.34-1.76.53-3.8.81-5.86.81z"></path>
</svg>
<span class="hidden sm:inline">Data_Stream</span>
</button>
</div>
</div>
</div>
</div>
<!-- Global Styles & JS for component functionality -->
<style>
@keyframes flicker-text {
0%, 19.99%, 22%, 24%, 28%, 30%, 36%, 38% {
opacity: 1;
text-shadow: 0 0 7px #ffab4a, 0 0 10px #ffab4a, 0 0 15px #ffab4a;
}
20%, 21.99%, 24.01%, 27.99%, 30.01%, 35.99%, 38.01%, 100% {
opacity: 0.9;
text-shadow: none;
}
}
.flicker-text {
animation: flicker-text 3s infinite alternate;
}
@keyframes glow {
0% {
box-shadow: 0 0 10px rgba(255,165,0,0.4), 0 0 20px rgba(255,165,0,0.3);
}
50% {
box-shadow: 0 0 15px rgba(255,165,0,0.6), 0 0 30px rgba(255,165,0,0.4);
}
100% {
box-shadow: 0 0 10px rgba(255,165,0,0.4), 0 0 20px rgba(255,165,0,0.3);
}
}
.shadow-inner-glow {
box-shadow: inset 0 0 8px rgba(255,165,0,0.1);
}
.dark .shadow-inner-glow {
box-shadow: inset 0 0 8px rgba(255,165,0,0.05);
}
.neon-button-effect {
box-shadow: 0 0 10px rgba(255,165,0,0.4), 0 0 20px rgba(255,165,0,0.3), 0 0 30px rgba(255,165,0,0.2);
}
.dark .neon-button-effect {
box-shadow: 0 0 10px rgba(255,153,51,0.4), 0 0 20px rgba(255,153,51,0.3), 0 0 30px rgba(255,153,51,0.2);
}
@keyframes borderPulse {
0% {
border-color: rgba(255,165,0,0.5);
}
50% {
border-color: rgba(255,165,0,0.8);
}
100% {
border-color: rgba(255,165,0,0.5);
}
}
/* Tailwind utility for perspective transformation */
.perspective-1000 {
perspective: 1000px;
}
.rotateX-3 {
transform: rotateX(3deg);
}
.rotateY-1 {
transform: rotateY(1deg);
}
@keyframes pulse {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 100%;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #0d0905;
}
}
</style>
<script>
function toggleTabs(activeTab, formId) {
// Deactivate all tabs and hide all forms
document.querySelectorAll('.tab-active').forEach(tab => {
tab.classList.remove('tab-active', 'border-[#ffab4a]', 'dark:border-[#ff9933]', 'text-[#f7c58f]', 'dark:text-[#ffd29e]');
tab.classList.add('border-transparent', 'text-[#a07a53]', 'dark:text-[#c4ae93]');
});
document.querySelectorAll('.tab-content').forEach(form => {
form.classList.add('hidden');
});
// Activate the clicked tab and show its corresponding form
activeTab.classList.add('tab-active', 'border-[#ffab4a]', 'dark:border-[#ff9933]', 'text-[#f7c58f]', 'dark:text-[#ffd29e]');
activeTab.classList.remove('border-transparent', 'text-[#a07a53]', 'dark:text-[#c4ae93]');
document.getElementById(formId).classList.remove('hidden');
}
// Initial setup: activate login tab on load
document.addEventListener('DOMContentLoaded', () => {
const loginTab = document.getElementById('login-tab');
if (loginTab) {
toggleTabs(loginTab, 'login-form');
}
});
</script>
</div>Composants associés
Composant de connexion/inscription
Un composant de connexion/inscription simple, propre et minimaliste avec un style de typographie suisse/international et une palette de couleurs joyeuses, conçu pour les sites Web d’entreprise. Il est entièrement réactif et inclut la prise en charge du mode sombre.
MatérielEarthToneLoginSignupComponent
Un composant de connexion et d’inscription réactif de style Material Design avec une palette de couleurs terre, une complexité modérée avec un basculement interactif entre les formulaires, conçu pour les tableaux de bord avec prise en charge du mode sombre.
Brutalist_Agri_Auth_Component
Un composant de connexion/inscription de style brutaliste pour les sites Web d’agriculture/d’agriculture, avec des tons chauds de coucher de soleil, un contraste élevé et une mise en page complexe avec prise en charge du mode sombre.