Neon_Sepia_Checkout_Form

<div class="min-h-screen bg-gradient-to-br from-stone-950 via-neutral-900 to-stone-950 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans dark:from-black dark:via-gray-950 dark:to-black">
  <div class="w-full max-w-md bg-stone-900 rounded-lg shadow-xl border border-stone-800 dark:bg-gray-900 dark:border-gray-800 relative overflow-hidden">
    <div class="absolute inset-0 bg-amber-800/10 dark:bg-lime-500/10 transform scale-[3] blur-3xl opacity-20 dark:opacity-10 pointer-events-none animate-pulse-slow"></div>
    <div class="relative p-6 sm:p-8">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-amber-500 dark:text-lime-400 mb-6 text-center tracking-wide" style="text-shadow: 0 0 8px rgba(217, 119, 6, 0.6), 0 0 16px rgba(217, 119, 6, 0.4); dark:text-shadow: 0 0 8px rgba(132, 204, 22, 0.6), 0 0 16px rgba(132, 204, 22, 0.4);">
        Checkout
      </h2>

      <form class="space-y-4">
        <div>
          <label for="wallet-address" class="block text-sm font-medium text-amber-200 dark:text-lime-200 mb-1 leading-relaxed">
            Wallet Address
          </label>
          <input type="text" id="wallet-address" name="wallet-address" placeholder="0x..." class="w-full p-3 bg-stone-800 rounded-md border border-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-600 dark:bg-gray-800 dark:border-gray-700 dark:focus:ring-lime-500 text-amber-100 dark:text-lime-100 placeholder-stone-400 dark:placeholder-gray-500 transition duration-300 ease-in-out glow-input">
        </div>

        <div>
          <label for="amount" class="block text-sm font-medium text-amber-200 dark:text-lime-200 mb-1 leading-relaxed">
            Amount (ETH)
          </label>
          <input type="number" id="amount" name="amount" step="0.001" placeholder="0.05" class="w-full p-3 bg-stone-800 rounded-md border border-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-600 dark:bg-gray-800 dark:border-gray-700 dark:focus:ring-lime-500 text-amber-100 dark:text-lime-100 placeholder-stone-400 dark:placeholder-gray-500 transition duration-300 ease-in-out glow-input">
        </div>

        <!-- Hidden input for a minimal simple form -->
        <input type="hidden" name="currency" value="ETH">

        <button type="submit" class="w-full py-3 px-4 bg-amber-700 text-white font-semibold rounded-md shadow-lg
          hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-900
          dark:bg-lime-600 dark:hover:bg-lime-500 dark:focus:ring-lime-400 dark:focus:ring-offset-gray-900
          transition duration-300 ease-in-out transform hover:scale-105 active:scale-100 glow-button">
          Confirm Payment
        </button>
      </form>

      <p class="text-center text-xs text-stone-500 dark:text-gray-500 mt-6">
        By clicking 'Confirm Payment', you agree to our <a href="#" class="text-amber-400 hover:underline dark:text-lime-300">Terms of Service</a>.
      </p>
    </div>
  </div>

  <style>
    @keyframes pulse-slow {
      0%, 100% { transform: scale(3) blur(3rem) opacity(0.2); }
      50% { transform: scale(3.1) blur(3.5rem) opacity(0.25); }
    }
    .animate-pulse-slow { animation: pulse-slow 8s infinite ease-in-out; }
    .glow-input { box-shadow: 0 0 0px #d97706; transition: box-shadow 0.3s ease-in-out; }
    .glow-input:focus { box-shadow: 0 0 10px rgba(217, 119, 6, 0.7); }
    .dark .glow-input { box-shadow: none; }
    .dark .glow-input:focus { box-shadow: 0 0 10px rgba(132, 204, 22, 0.7); }
    .glow-button { box-shadow: 0 0 0px #d97706; transition: box-shadow 0.3s ease-in-out; }
    .glow-button:hover { box-shadow: 0 0 15px rgba(217, 119, 6, 0.8); }
    .dark .glow-button { box-shadow: none; }
    .dark .glow-button:hover { box-shadow: 0 0 1px rgba(132, 204, 22, 0.8); }
  </style>
</div>