Composant Composants d’authentification
Un composant d’authentification complexe conçu pour les applications industrielles/manufacturières, avec une esthétique monospace/développeur avec des tons de couleur océan/bleu. Comprend des formulaires de connexion, d’inscription et de réinitialisation de mot de passe, entièrement réactifs avec prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-blue-950 via-blue-900 to-blue-800 flex items-center justify-center p-4 dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 font-mono text-white text-sm">
<div class="w-full max-w-4xl bg-blue-900/70 backdrop-blur-sm rounded-lg shadow-2xl overflow-hidden md:flex dark:bg-gray-900/70 p-6 md:p-8 border border-blue-700 dark:border-gray-700 animate-fade-in">
<!-- Image Section (Left on Desktop, Top on Mobile) -->
<div class="hidden md:flex md:w-1/2 bg-blue-950 border-r border-blue-700 dark:bg-gray-950 dark:border-gray-700 flex flex-col justify-between p-6 animate-slide-in-left">
<div>
<h2 class="text-3xl font-bold mb-4 text-blue-300 dark:text-gray-300">Industrial Command Center</h2>
<p class="text-blue-200 dark:text-gray-400 leading-relaxed">
Access your manufacturing control systems. Securely manage production lines, monitor sensor data, and optimize operational efficiency.
</p>
<ul class="mt-6 space-y-2 text-blue-200 dark:text-gray-400">
<li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">▶</span> Real-time Data Analytics</li>
<li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">▶</span> Secure Machine Interfacing</li>
<li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">▶</span> Global Supply Chain Management</li>
</ul>
</div>
<div class="mt-8">
<img src="https://picsum.photos/600/400?grayscale&random=1" alt="Industrial machinery" class="rounded-md shadow-lg border border-blue-700 dark:border-gray-700 opacity-80 hover:opacity-100 transition-opacity duration-300">
</div>
</div>
<!-- Forms Section (Right on Desktop, Bottom on Mobile) -->
<div class="w-full md:w-1/2 p-6 md:px-10 py-8 flex flex-col justify-center animate-slide-in-right">
<div x-data="{ currentTab: 'login' }" class="w-full">
<div class="flex mb-6 border-b border-blue-700 dark:border-gray-700">
<button @click="currentTab = 'login'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'login', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'login'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
Login
</button>
<button @click="currentTab = 'signup'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'signup', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'signup'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
Sign Up
</button>
<button @click="currentTab = 'reset'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'reset', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'reset'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
Reset
</button>
</div>
<!-- Login Form -->
<form x-show="currentTab === 'login'" x-transition.opacity.duration.300 class="space-y-6">
<h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">System Access</h2>
<div>
<label for="login-username" class="block text-blue-200 dark:text-gray-400 mb-2">Username</label>
<input type="text" id="login-username" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
</div>
<div>
<label for="login-password" class="block text-blue-200 dark:text-gray-400 mb-2">Password</label>
<input type="password" id="login-password" placeholder="********" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" type="checkbox" class="h-4 w-4 text-blue-500 bg-blue-800 border-blue-600 rounded focus:ring-blue-400 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
<label for="remember-me" class="ml-2 block text-blue-200 dark:text-gray-400 cursor-pointer">Remember me</label>
</div>
<a href="#" @click.prevent="currentTab = 'reset'" class="text-blue-300 hover:text-blue-200 dark:text-gray-400 dark:hover:text-gray-300 transition-colors duration-200">Forgot password?</a>
</div>
<button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
<span class="relative z-10">Login To Terminal →</span>
<span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</button>
</form>
<!-- Sign Up Form -->
<form x-show="currentTab === 'signup'" x-transition.opacity.duration.300 class="space-y-6">
<h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">New User Registration</h2>
<div>
<label for="signup-email" class="block text-blue-200 dark:text-gray-400 mb-2">Email Address</label>
<input type="email" id="signup-email" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
</div>
<div>
<label for="signup-username" class="block text-blue-200 dark:text-gray-400 mb-2">Desired Username</label>
<input type="text" id="signup-username" placeholder="new.user" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
</div>
<div>
<label for="signup-password" class="block text-blue-200 dark:text-gray-400 mb-2">Create Password</label>
<input type="password" id="signup-password" placeholder="Min 8 characters" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
</div>
<div>
<label for="signup-confirm-password" class="block text-blue-200 dark:text-gray-400 mb-2">Confirm Password</label>
<input type="password" id="signup-confirm-password" placeholder="Repeat password" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
</div>
<button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
<span class="relative z-10">Register Account →</span>
<span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</button>
</form>
<!-- Password Reset Form -->
<form x-show="currentTab === 'reset'" x-transition.opacity.duration.300 class="space-y-6">
<h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">Password Recovery</h2>
<div>
<label for="reset-email" class="block text-blue-200 dark:text-gray-400 mb-2">Email Address</label>
<input type="email" id="reset-email" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
</div>
<p class="text-blue-200 dark:text-gray-400 text-xs">Enter your registered email address and we'll send you instructions to reset your password. Check your spam folder.</p>
<button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
<span class="relative z-10">Send Reset Link →</span>
<span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</button>
<button @click.prevent="currentTab = 'login'" class="w-full border border-blue-600 hover:border-blue-500 text-blue-300 hover:text-blue-200 py-2 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:border-gray-600">
← Back to Login
</button>
</form>
</div>
</div>
</div>
<!-- Alpine JS for Tab Switching -->
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('authTabs', () => ({
currentTab: 'login',
}));
});
</script>
<!-- Tailwind Typography and Custom Animations (Optional, if not already in config) -->
<style>
@keyframes fade-in {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-left {
from { opacity: 0; transform: translateX(-50px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
from { opacity: 0; transform: translateX(50px); }
to { opacity: 1; transform: translateX(0); }
}
.animate-fade-in { animation: fade-in 0.8s ease-out forwards; }
.animate-slide-in-left { animation: slide-in-left 0.8s ease-out forwards; }
.animate-slide-in-right { animation: slide-in-right 0.8s ease-out forwards; }
</style>
</div>Composants associés
Composants d’authentification
Un composant d’authentification minimaliste comprenant un formulaire de connexion et d’inscription avec prise en charge du thème sombre, un design réactif et des images de remplacement.
Composant d’authentification
Composant d’authentification de type neumorphisme pour le commerce électronique, avec une palette de couleurs triadique et une mise en page simple. Prend en charge le mode sombre et est réactif. Utilise Tailwind CSS. Pas de JavaScript.
3D_Auth_Agriculture_Simple
Un composant d’authentification simple et réactif avec une esthétique de conception 3D et une palette de couleurs à contraste élevé, adapté aux sites Web agricoles. Dispose d’une prise en charge du mode sombre.