Retro_Crypto_Password_Reset_Component

<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>&copy; 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>