RetroVibrantCryptoAuth

<div class="min-h-screen bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4 sm:p-8 flex items-center justify-center font-mono">
  <div class="w-full max-w-md bg-gradient-to-br from-purple-200 via-pink-100 to-red-100 dark:bg-gradient-to-br dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 rounded-3xl shadow-2xl overflow-hidden transform duration-500 hover:scale-105 border-4 border-purple-400 dark:border-gray-600 relative group">
    <!-- Old TV Scanline Overlay -->
    <div class="absolute inset-0 z-10 pointer-events-none opacity-10 group-hover:opacity-20 transition-opacity duration-300" style="background-image: linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px); background-size: 2px 2px;"></div>

    <!-- Top Retro Banner -->
    <div class="bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 dark:from-purple-800 dark:via-pink-700 dark:to-red-800 text-white text-center py-4 px-6 relative overflow-hidden">
      <h1 class="text-3xl sm:text-4xl font-extrabold tracking-wide uppercase drop-shadow-lg [text-shadow:_3px_3px_#ff00ff, _-3px_-3px_#00ffff]">CYPHER_NET</h1>
      <p class="text-sm text-yellow-300 italic mt-1 drop-shadow [text-shadow:_1px_1px_#000]">Login Sequence Initiated</p>
      <div class="absolute -bottom-4 -left-4 w-12 h-12 bg-pink-400 rounded-full mix-blend-screen opacity-50 duration-500 group-hover:scale-150"></div>
      <div class="absolute -top-4 -right-4 w-16 h-16 bg-blue-400 rounded-full mix-blend-screen opacity-50 duration-500 group-hover:scale-150"></div>
    </div>

    <div class="p-6 sm:p-8 space-y-6">
      <!-- Toggle Switch for Login/Signup -->
      <div class="flex justify-center mb-6">
        <div class="relative inline-flex bg-gray-300 dark:bg-gray-600 rounded-full p-1 shadow-inner">
          <input type="radio" name="auth_type" id="login_tab" class="hidden peer/login" checked>
          <label for="login_tab" class="relative z-20 px-6 py-2 text-sm sm:text-base font-bold rounded-full cursor-pointer transition-colors duration-300 text-gray-800 dark:text-gray-200 peer-checked/login:bg-green-500 peer-checked/login:text-white peer-checked/login:shadow-md">
            LOGIN
          </label>

          <input type="radio" name="auth_type" id="signup_tab" class="hidden peer/signup">
          <label for="signup_tab" class="relative z-20 px-6 py-2 text-sm sm:text-base font-bold rounded-full cursor-pointer transition-colors duration-300 text-gray-800 dark:text-gray-200 peer-checked/signup:bg-orange-500 peer-checked/signup:text-white peer-checked/signup:shadow-md">
            SIGNUP
          </label>
          <div class="absolute inset-y-1 left-1 w-1/2 h-auto bg-green-500 rounded-full shadow-md transition-transform duration-300 ease-in-out peer-checked/signup:translate-x-full dark:bg-cyan-600"></div>
        </div>
      </div>

      <!-- Form Fields -->
      <div class="relative space-y-4">
        <div class="relative">
          <label for="email" class="block text-xs uppercase font-bold text-gray-600 dark:text-gray-300 mb-1 [text-shadow:_0.5px_0.5px_#fff]">USERNAME / E-MAIL</label>
          <input type="email" id="email" placeholder="[email protected]" class="w-full p-3 pl-10 bg-gray-100 dark:bg-gray-700 rounded-lg border-2 border-purple-400 dark:border-purple-600 focus:outline-none focus:ring-4 focus:ring-pink-400 dark:focus:ring-pink-600 text-gray-800 dark:text-white font-medium placeholder-gray-500 dark:placeholder-gray-400 [text-shadow:_0.5px_0.5px_#fff]"
                 style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);">
          <span class="absolute left-3 top-1/2 transform -translate-y-1/2 mt-2 text-purple-600 dark:text-purple-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" /><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" /></svg></span>
        </div>

        <div class="relative">
          <label for="password" class="block text-xs uppercase font-bold text-gray-600 dark:text-gray-300 mb-1 [text-shadow:_0.5px_0.5px_#fff]">ACCESS CODE</label>
          <input type="password" id="password" placeholder="********" class="w-full p-3 pl-10 bg-gray-100 dark:bg-gray-700 rounded-lg border-2 border-pink-400 dark:border-pink-600 focus:outline-none focus:ring-4 focus:ring-red-400 dark:focus:ring-red-600 text-gray-800 dark:text-white font-medium placeholder-gray-500 dark:placeholder-gray-400 [text-shadow:_0.5px_0.5px_#fff]"
                 style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);">
          <span class="absolute left-3 top-1/2 transform -translate-y-1/2 mt-2 text-pink-600 dark:text-pink-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h2a2 2 0 012 2v5a2 2 0 01-2 2H3a2 2 0 01-2-2v-5a2 2 0 012-2h2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" /></svg></span>
        </div>

        <div class="flex justify-between items-center text-xs">
          <a href="#" class="text-purple-600 dark:text-purple-400 font-bold hover:text-green-600 dark:hover:text-green-400 transition duration-300 [text-shadow:_0.5px_0.5px_#fff]">FORGOT ACCESS CODE?</a>
          <div class="flex items-center">
            <input type="checkbox" id="remember" class="hidden peer">
            <label for="remember" class="relative w-10 h-6 bg-gray-300 dark:bg-gray-600 rounded-full cursor-pointer transition-colors duration-300 peer-checked:bg-cyan-500 dark:peer-checked:bg-cyan-700 shadow-inner mr-2"></label>
            <span class="text-gray-600 dark:text-gray-300 [text-shadow:_0.5px_0.5px_#fff]">REMEMBER ME</span>
          </div>
        </div>
      </div>

      <!-- Submit Button -->
      <button type="submit" class="w-full mt-6 bg-gradient-to-r from-green-500 to-cyan-500 dark:from-green-700 dark:to-cyan-700 text-white py-3 rounded-xl uppercase font-extrabold text-lg tracking-wide shadow-lg transform active:scale-95 transition duration-200 ease-in-out hover:from-green-600 hover:to-cyan-600 dark:hover:from-green-800 dark:hover:to-cyan-800 border-2 border-green-300 dark:border-green-500 [text-shadow:_2px_2px_#000]">
        INITIATE LOGIN
      </button>

      <!-- Divider -->
      <div class="relative flex justify-center py-4">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-400 dark:border-gray-600 border-dashed"></div>
        </div>
        <div class="relative z-10 px-4 bg-gradient-to-br from-purple-200 via-pink-100 to-red-100 dark:bg-gradient-to-br dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 text-sm italic text-gray-600 dark:text-gray-300 rounded-full [text-shadow:_0.5px_0.5px_#fff]">
          OR LINK ACCESS
        </div>
      </div>

      <!-- Social/Crypto Login Buttons -->
      <div class="grid grid-cols-2 gap-4">
        <button class="flex items-center justify-center p-3 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold transform active:scale-95 transition duration-200 shadow-md border-2 border-blue-400 dark:border-blue-700 ">
          <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6S17 7.57 17 9.5V12h3l-1 3h-2v6.95c3.25-1.58 5.5-4.83 5.5-8.95z"/></svg>
          <span class="hidden sm:inline">FACEBOOK</span>
        </button>
        <button class="flex items-center justify-center p-3 rounded-xl bg-gray-800 hover:bg-gray-900 text-white font-bold transform active:scale-95 transition duration-200 shadow-md border-2 border-gray-600 dark:border-gray-500 ">
          <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.866 8.148 6.84 9.49C9.043 21.6 9 21.419 9 21.05c0-.097.009-.4.014-.72c-2.775.602-3.366-1.34-3.366-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.618.068-.607.068-.607 1.004.07 1.532 1.03 1.532 1.03.89 1.528 2.336 1.085 2.903.827.09-.645.35-1.085.636-1.334-2.218-.25-4.555-1.107-4.555-4.912 0-1.085.39-1.977 1.03-2.67-.103-.25-.447-1.26.098-2.63c0 0 .84-.268 2.75 1.025a9.558 9.558 0 012.5-.325c.875 0 1.76.11 2.5.325 1.91-1.293 2.75-1.025 2.75-1.025.545 1.37.202 2.38.098 2.63.64.693 1.03 1.585 1.03 2.67 0 3.811-2.34 4.66-4.562 4.902.358.309.678.918.678 1.85V21.1c0 .332-.008.57-.014.72.784-.19 1.528-.48 2.215-.826C20.134 20.148 23 16.418 23 12c0-5.523-4.477-10-10-10z"/></svg>
          <span class="hidden sm:inline">GITHUB</span>
        </button>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <button class="flex items-center justify-center p-3 rounded-xl bg-orange-500 hover:bg-orange-600 text-white font-bold transform active:scale-95 transition duration-200 shadow-md border-2 border-orange-300 dark:border-orange-600 ">
          <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.svg?v=023" alt="Bitcoin" class="w-5 h-5 mr-2 filter invert dark:filter-none">
          <span class="hidden sm:inline">BITCOIN WALLET</span>
        </button>
        <button class="flex items-center justify-center p-3 rounded-xl bg-purple-600 hover:bg-purple-700 text-white font-bold transform active:scale-95 transition duration-200 shadow-md border-2 border-purple-400 dark:border-purple-700 ">
          <img src="https://cryptologos.cc/logos/ethereum-eth-logo.svg?v=023" alt="Ethereum" class="w-5 h-5 mr-2 filter invert dark:filter-none">
          <span class="hidden sm:inline">ETHEREUM WALLET</span>
        </button>
      </div>

      <!-- Footer Text -->
      <div class="text-center text-sm text-gray-500 dark:text-gray-400 pt-4">
        <p>© 198BIT. All Rights Reserved. <span class="font-bold text-gray-600 dark:text-gray-300">BLOCKCHAIN SECURED.</span></p>
        <p class="mt-1 text-xs">For optimal experience, connect via <span class="text-yellow-500 font-bold">METAMASK</span> on desktop.</p>
      </div>

    </div>
  </div>
</div>