Composant de réinitialisation de mot de passe
Un composant complexe et réactif de réinitialisation de mot de passe avec un style de conception skeuomorphe, une palette de couleurs analogue (verts/bleus) et une prise en charge du mode sombre, adapté aux applications de crypto-monnaie/blockchain.
HTML Code
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
<div class="max-w-md w-full rounded-2xl shadow-xl p-8 bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-800 dark:to-gray-950 border border-green-200 dark:border-gray-700
transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-green-100 before:to-blue-100 dark:before:from-gray-700 dark:before:to-gray-900 before:opacity-0 before:blur-sm before:transition-opacity before:duration-500
hover:before:opacity-30">
<div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%2338A169" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
<div class="relative z-10">
<div class="flex justify-center mb-6">
<svg class="w-16 h-16 text-green-600 dark:text-green-400 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
</svg>
</div>
<h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 text-center mb-4 leading-tight drop-shadow-md tracking-wider">
<span class="text-green-700 dark:text-green-500">Access</span> Recovery
</h2>
<p class="text-gray-600 dark:text-gray-300 text-center mb-8 text-lg leading-relaxed">
Securely restore your account access with advanced encryption.
</p>
<form class="space-y-6">
<div class="relative group">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 skeleton-label">
Registered Email Address
</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition-transform group-hover:scale-110" 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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.5a2.5 2.5 0 10-5 0V12"/>
</svg>
</div>
<input type="email" id="email" name="email" autocomplete="email" required
class="block w-full pl-10 pr-3 py-3 rounded-xl border border-blue-300 dark:border-gray-600 shadow-inner
bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent
hover:border-blue-400 dark:hover:border-gray-500 transition duration-300
neumorphic-input">
</div>
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Enter the email associated with your account.</p>
</div>
<div class="relative group">
<label for="token" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 skeleton-label">
Recovery Token (Optional)
</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition-transform group-hover:scale-110" 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="M15 7a2 2 0 012 2v5l-3 3H7a2 2 0 01-2-2V9a2 2 0 012-2h5a2 2 0 012 2z"/>
</svg>
</div>
<input type="text" id="token" name="token" placeholder="e.g., 2FA code or backup key"
class="block w-full pl-10 pr-3 py-3 rounded-xl border border-blue-300 dark:border-gray-600 shadow-inner
bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent
hover:border-blue-400 dark:hover:border-gray-500 transition duration-300
neumorphic-input">
</div>
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
If you have a 2FA code or backup key, enter it here for faster recovery.
</p>
</div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-lg text-lg font-semibold
text-white bg-gradient-to-r from-green-500 to-blue-600
dark:from-green-600 dark:to-blue-700
hover:from-green-600 hover:to-blue-700 dark:hover:from-green-700 dark:hover:to-blue-800
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900
transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95
group relative overflow-hidden neumorphic-button">
<span class="absolute inset-0 bg-black opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<span class="relative flex items-center justify-center">
<svg class="-ml-1 mr-3 h-6 w-6 transform rotate-0 group-hover:rotate-12 transition-transform duration-300" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.007 12.007 0 002.944 12c.071 1.603.359 3.165.848 4.656.49.983 1.102 1.884 1.848 2.685.746.801 1.63 1.482 2.607 2.006A9.954 9.954 0 0012 22.955c1.196-.067 2.378-.344 3.498-.795.977-.424 1.861-1.105 2.607-1.906.746-.801 1.358-1.702 1.848-2.685.489-1.491.777-3.053.848-4.656a12.007 12.007 0 00-.05-9.056z"/>
</svg>
Initiate Recovery
</span>
</button>
</form>
<div class="mt-8 text-center text-sm">
<p class="mb-2 text-gray-600 dark:text-gray-300">Having trouble?</p>
<a href="#" class="font-medium text-green-700 hover:text-green-500 dark:text-green-400 dark:hover:text-green-300
transform transition-transform duration-200 hover:scale-[1.03] active:scale-95
block py-2 rounded-lg bg-green-50 dark:bg-gray-800 border border-green-200 dark:border-gray-700
shadow-sm hover:shadow-md">
Contact Support for Manual Review
</a>
</div>
<div class="mt-10 pt-6 border-t border-green-200 dark:border-gray-700 text-center">
<p class="text-xs text-gray-500 dark:text-gray-400">
Your security is our top priority. All recovery processes are encrypted.
</p>
<div class="flex justify-center flex-wrap gap-x-4 gap-y-2 mt-4">
<span class="text-xs text-gray-400 dark:text-gray-500 flex items-center">
<svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.007 12.007 0 002.944 12c.071 1.603.359 3.165.848 4.656.49.983 1.102 1.884 1.848 2.685.746.801 1.63 1.482 2.607 2.006A9.954 9.954 0 0012 22.955c1.196-.067 2.378-.344 3.498-.795.977-.424 1.861-1.105 2.607-1.906.746-.801 1.358-1.702 1.848-2.685.489-1.491.777-3.053.848-4.656a12.007 12.007 0 00-.05-9.056z"></path></svg>
Security First
</span>
<span class="text-xs text-gray-400 dark:text-gray-500 flex items-center">
<svg class="w-4 h-4 mr-1 text-green-500 dark:text-green-400" 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="M8 14v3m4-3v3m4-3v3M3 21h18a2 2 0 002-2V7a2 2 0 00-2-2H3a2 2 0 00-2 2v12a2 2 0 002 2zM10 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z"></path></svg>
Blockchain Integrated
</span>
</div>
</div>
</div>
</div>
</div>
<style>
/* Base Skeuomorphism styles for neumorphic effect */
.neumorphic-input {
box-shadow: inset 3px 3px 6px #bfcfe7, inset -3px -3px 6px #ffffff;
}
.dark .neumorphic-input {
box-shadow: inset 3px 3px 6px #1a202c, inset -3px -3px 6px #4a5568;
}
.neumorphic-button {
box-shadow: 6px 6px 12px #98d1d1, -6px -6px 12px #ffffff;
}
.dark .neumorphic-button {
box-shadow: 6px 6px 12px #1e414f, -6px -6px 12px #324e60;
}
/* Add active state for button press effect */
.neumorphic-button:active {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2),
inset -2px -2px 5px rgba(255, 255, 255, 0.7);
}
.dark .neumorphic-button:active {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4),
inset -2px -2px 5px rgba(255, 255, 255, 0.1);
}
/* Further styling for visual depth and subtle skeuomorphism */
.skeleton-label {
text-shadow: 1px 1px 2px rgba(255,255,255,0.6), -1px -1px 2px rgba(0,0,0,0.1);
}
.dark .skeleton-label {
text-shadow: 1px 1px 2px rgba(0,0,0,0.4), -1px -1px 2px rgba(255,255,255,0.05);
}
/* Subtle text shadows for better readability on light/dark backgrounds */
h2, p {
text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}
.dark h2, .dark p {
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
</style>Composants associés
Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe réactif avec un design « inspiré du papier/de l’impression », des « couleurs bonbons/douces » et la prise en charge du mode sombre, adapté aux entreprises industrielles et manufacturières.
Composant de réinitialisation de mot de passe
Composant de réinitialisation de mot de passe réactif avec une interface utilisateur en mode sombre, utilisant un jeu de couleurs analogue. Conçu pour les applications de commerce électronique.
Composant de réinitialisation de mot de passe
Un composant complexe de réinitialisation de mot de passe conçu pour les services gouvernementaux/publics, avec un design épuré et minimaliste basé sur la typographie avec des couleurs à contraste élevé et une réactivité totale, y compris la prise en charge du mode sombre.