Componente Componenti di autenticazione
Un componente di autenticazione complesso progettato per applicazioni industriali/manifatturiere, caratterizzato da un'estetica monospace/sviluppatore con tonalità di colore oceano/blu. Include moduli di accesso, registrazione e reimpostazione della password, completamente reattivo con supporto della modalità oscura.
Codice HTML
<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>Componenti correlati
Componenti di autenticazione
Un componente di autenticazione complesso e reattivo con un design brutale con un tema scuro, adatto per applicazioni di social media.
Componente di autenticazione di lusso
Un componente di autenticazione elegante e sofisticato progettato per i marchi di moda e bellezza di lusso, caratterizzato da un'interfaccia ricca, layout reattivo e supporto per la modalità scura utilizzando una combinazione di colori analoga.
Bauhaus Incontri Autenticazione
Un componente di autenticazione di complessità moderata per piattaforme di appuntamenti/social, caratterizzato da un design ispirato al Bauhaus con una combinazione di colori analoga. È reattivo e include il supporto per la modalità oscura.