<div class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900 text-gray-200 p-4 font-mono dark:from-gray-900 dark:via-black dark:to-gray-950">
<div class="flex items-center justify-center min-h-screen">
<div class="relative bg-gradient-to-br from-indigo-800 to-purple-800 border-4 border-purple-400 rounded-lg shadow-retro-glow p-8 w-full max-w-lg md:max-w-2xl lg:max-w-3xl transform -rotate-1 skew-x-1 transition-all duration-300 hover:rotate-0 hover:skew-x-0 dark:from-gray-800 dark:to-gray-900 dark:border-purple-600 dark:shadow-retro-glow-dark">
<div class="absolute -top-4 -left-4 w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-xl font-bold border-2 border-purple-300 transform rotate-12 dark:bg-purple-700 dark:border-purple-500">Ω</div>
<div class="absolute -bottom-4 -right-4 w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-xl font-bold border-2 border-purple-300 transform -rotate-12 dark:bg-purple-700 dark:border-purple-500">Ξ</div>
<div class="text-center mb-8">
<h1 class="text-4xl md:text-5xl font-extrabold text-yellow-300 uppercase leading-tight tracking-wider mb-2 drop-shadow-lg dark:text-yellow-400">
[CRYPTO] Reset Protocol
</h1>
<p class="text-purple-200 text-lg md:text-xl italic">
Accessing secured memory banks...
</p>
</div>
<div class="relative bg-purple-900/50 p-6 rounded-md border border-purple-700 shadow-inner-glow dark:bg-gray-800/50 dark:border-gray-700">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Left Panel: Form Steps -->
<div>
<h2 class="text-2xl font-bold text-yellow-300 mb-4 dark:text-yellow-400">Authentication Sequence</h2>
<!-- Step 1: Email/Username -->
<div class="mb-6" id="step1">
<label for="identifier" class="block text-purple-200 text-sm font-bold mb-2 uppercase tracking-wide">User ID / Wallet Alias</label>
<input type="text" id="identifier" name="identifier" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter your encrypted identity">
<button class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-purple-900 font-bold py-2 px-4 rounded transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95 dark:bg-yellow-600 dark:hover:bg-yellow-700" onclick="document.getElementById('step1').classList.add('hidden'); document.getElementById('step2').classList.remove('hidden');">Initiate Sequence</button>
</div>
<!-- Step 2: Verification Code (Hidden by default) -->
<div class="hidden mb-6" id="step2">
<label for="verification_code" class="block text-purple-200 text-sm font-bold mb-2 uppercase tracking-wide">Security Key Receive Protocol</label>
<input type="text" id="verification_code" name="verification_code" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter Alpha-numeric key">
<p class="text-xs text-purple-300 mt-1">A 6-digit key has been dispatched to your registered relay point.</p>
<button class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-purple-900 font-bold py-2 px-4 rounded transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95 dark:bg-yellow-600 dark:hover:bg-yellow-700" onclick="document.getElementById('step2').classList.add('hidden'); document.getElementById('step3').classList.remove('hidden');">Validate Key</button>
</div>
<!-- Step 3: New Password (Hidden by default) -->
<div class="hidden mb-6" id="step3">
<label for="new_password" class="block text-purple-200 text-sm font-bold mb-2 uppercase tracking-wide">Input New Encryption Passphrase</label>
<input type="password" id="new_password" name="new_password" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Min 10 characters, mixed case, symbols">
<p class="text-xs text-purple-300 mt-1">Ensure high entropy for secure re-initialization.</p>
<label for="confirm_password" class="block text-purple-200 text-sm font-bold mb-2 mt-4 uppercase tracking-wide">Re-confirm Passphrase</label>
<input type="password" id="confirm_password" name="confirm_password" class="shadow-inner appearance-none border border-purple-600 rounded w-full py-3 px-4 text-purple-900 bg-purple-200 leading-tight focus:outline-none focus:shadow-outline focus:border-yellow-300 transition-colors duration-200 placeholder-purple-500 dark:text-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Re-enter for verification">
<button class="mt-6 bg-green-500 hover:bg-green-600 text-purple-900 font-bold py-2 px-4 rounded transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95 dark:bg-green-600 dark:hover:bg-green-700">Execute Re-initialization</button>
</div>
</div>
<!-- Right Panel: Status/Info Display -->
<div class="hidden md:block">
<h2 class="text-2xl font-bold text-yellow-300 mb-4 dark:text-yellow-400">System Diagnostics</h2>
<div class="bg-purple-800/70 p-4 rounded-md border border-purple-600 h-full flex flex-col justify-between dark:bg-gray-700/70 dark:border-gray-600">
<div>
<p class="text-purple-200 text-sm mb-2">Status: <span class="text-yellow-300 font-semibold">Awaiting Input</span></p>
<p class="text-purple-200 text-sm mb-2">Session ID: <span class="text-purple-300">0x7a8b9c...</span></p>
<p class="text-purple-200 text-sm mb-4">Last attempt: <span class="text-purple-300">2024.07.20 14:38 GMT</span></p>
<hr class="border-purple-600 my-4 dark:border-gray-600">
<p class="text-purple-200 text-sm italic">For security, all network traffic is encrypted with AES-256. Do NOT share your private keys or backup mnemonics with anyone, ever. Our support will NEVER ask for this information.</p>
</div>
<div class="mt-4 text-center">
<img src="https://picsum.photos/150/100?random=1" alt="Retro abstract data stream" class="mx-auto rounded-md border border-purple-600 shadow-lg">
<p class="text-xs text-purple-400 mt-2">['DATA_STREAM_VISUALIZER']</p>
</div>
</div>
</div>
</div>
</div>
<div class="mt-8 text-center text-purple-300 text-xs">
<p>© 2084 [CRYPTO] Corp. All network transmissions monitored.</p>
<p class="mt-1"><a href="#" class="underline hover:text-yellow-300">Terms of Protocol</a> | <a href="#" class="underline hover:text-yellow-300">Data Security Policy</a></p>
</div>
</div>
</div>
</div>
<style>
/* Retro glow effect */
.shadow-retro-glow {
box-shadow:
0 0 5px rgba(255, 255, 255, 0.5),
0 0 10px rgba(168, 85, 247, 0.7),
0 0 20px rgba(168, 85, 247, 0.5),
0 0 30px rgba(168, 85, 247, 0.3);
}
.dark .shadow-retro-glow-dark {
box-shadow:
0 0 5px rgba(255, 255, 255, 0.3),
0 0 10px rgba(192, 132, 252, 0.6),
0 0 20px rgba(192, 132, 252, 0.4),
0 0 30px rgba(192, 132, 252, 0.2);
}
/* Inner glow for panels */
.shadow-inner-glow {
box-shadow: inset 0 0 8px rgba(168, 85, 247, 0.5), inset 0 0 20px rgba(168, 85, 247, 0.2);
}
.dark .shadow-inner-glow {
box-shadow: inset 0 0 8px rgba(192, 132, 252, 0.4), inset 0 0 20px rgba(192, 132, 252, 0.15);
}
/* Simple keyframe for subtle animation */
@keyframes flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.9; }
}
.text-yellow-300 { animation: flicker 3s infinite ease-in-out; }
</style>
