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
ArtDecoAuthComponent
Componente di autenticazione ispirato all'Art Déco per applicazioni mediche/sanitarie, con motivi geometrici, colori ad alto contrasto e piena reattività con supporto della modalità scura. Adatto per moduli di accesso o registrazione.
3D_Auth_Agriculture_Simple
Un componente di autenticazione semplice e reattivo con un'estetica di design 3D e una combinazione di colori ad alto contrasto, adatto per siti Web di agricoltura/allevamento. Dispone del supporto per la modalità oscura.
Componenti di autenticazione
Un componente di autenticazione reattivo con supporto per la modalità scura, utilizzando Tailwind CSS con sfondi scuri, un modulo di accesso e iscrizione e immagini segnaposto casuali per gli elementi dell'interfaccia utente.