Multi-Step Animated Checkout Form Wizard

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-Step Form Wizard</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { darkMode: 'class' };
    </script>
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 min-h-screen flex items-center justify-center p-6 transition-colors duration-300">

    <div class="max-w-md w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl p-6 sm:p-8 space-y-6 shadow-2xl">
        <!-- Step Bar -->
        <div class="flex items-center justify-between">
            <div id="step1Dot" class="w-8 h-8 rounded-full bg-emerald-500 text-slate-950 font-bold flex items-center justify-center text-xs">1</div>
            <div class="h-1 flex-1 bg-slate-200 dark:bg-slate-800 mx-2"></div>
            <div id="step2Dot" class="w-8 h-8 rounded-full bg-slate-200 dark:bg-slate-800 text-slate-400 font-bold flex items-center justify-center text-xs">2</div>
            <div class="h-1 flex-1 bg-slate-200 dark:bg-slate-800 mx-2"></div>
            <div id="step3Dot" class="w-8 h-8 rounded-full bg-slate-200 dark:bg-slate-800 text-slate-400 font-bold flex items-center justify-center text-xs">3</div>
        </div>

        <!-- Step 1: Customer Details -->
        <div id="step1" class="space-y-4">
            <h3 class="font-bold text-lg text-slate-900 dark:text-white">Customer Details</h3>
            <input type="text" placeholder="Full Name" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 text-xs focus:outline-none">
            <input type="email" placeholder="Email Address" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 text-xs focus:outline-none">
            <button onclick="nextStep(2)" class="w-full py-3 rounded-xl bg-emerald-500 text-slate-950 font-bold text-xs shadow">Continue to Payment →</button>
        </div>

        <!-- Step 2: Payment Method -->
        <div id="step2" class="space-y-4 hidden">
            <h3 class="font-bold text-lg text-slate-900 dark:text-white">Payment Method</h3>
            <div class="p-3 rounded-xl border border-emerald-500/30 bg-emerald-500/10 text-emerald-500 text-xs font-bold flex items-center justify-between">
                <span>💳 Credit Card / Debit Card</span>
                <span>Selected</span>
            </div>
            <input type="text" placeholder="Card Number" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 text-xs focus:outline-none">
            <div class="flex gap-3">
                <button onclick="nextStep(1)" class="w-1/2 py-3 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-400 font-bold text-xs">Back</button>
                <button onclick="nextStep(3)" class="w-1/2 py-3 rounded-xl bg-emerald-500 text-slate-950 font-bold text-xs shadow">Complete Order →</button>
            </div>
        </div>

        <!-- Step 3: Success -->
        <div id="step3" class="space-y-4 text-center hidden py-6">
            <span class="text-5xl">🎉</span>
            <h3 class="font-bold text-xl text-slate-900 dark:text-white">Order Confirmed!</h3>
            <p class="text-xs text-slate-500 dark:text-slate-400">Thank you for your purchase. Your receipt has been sent to your email.</p>
        </div>
    </div>

    <script>
        function nextStep(step) {
            document.getElementById("step1").classList.add("hidden");
            document.getElementById("step2").classList.add("hidden");
            document.getElementById("step3").classList.add("hidden");

            document.getElementById("step" + step).classList.remove("hidden");

            if (step >= 2) {
                document.getElementById("step2Dot").classList.replace("bg-slate-200", "bg-emerald-500");
                document.getElementById("step2Dot").classList.replace("dark:bg-slate-800", "bg-emerald-500");
                document.getElementById("step2Dot").classList.add("text-slate-950");
            }
            if (step >= 3) {
                document.getElementById("step3Dot").classList.replace("bg-slate-200", "bg-emerald-500");
                document.getElementById("step3Dot").classList.replace("dark:bg-slate-800", "bg-emerald-500");
                document.getElementById("step3Dot").classList.add("text-slate-950");
            }
        }
    </script>
</body>
</html>

/* Supports both Dark and Light mode via Tailwind class variant */

// Interactive scripts included inside demo view file