Simulasi E-Voucher KJ Fest x Es Kopi Indonesia

by oktaviardi pratama

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulasi E-Voucher KJ Fest x Es Kopi Indonesia</title>

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Custom Color Palette Theme -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        coffee: {
                            50: '#fdfbf7',
                            100: '#f7f0e6',
                            200: '#ebdccb',
                            300: '#dbbf9f',
                            600: '#8c5a32',
                            700: '#734624',
                            800: '#5c3a21',
                            900: '#3d2314',
                        }
                    }
                }
            }
        }
    </script>

    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
</head>
<body class="bg-stone-100 text-stone-800 font-sans min-h-screen flex flex-col items-center justify-start p-4 sm:p-6">

    <!-- Simulator Control Banner (Top Navbar) -->
    <header class="w-full max-w-md bg-stone-900 text-white rounded-2xl p-4 mb-6 shadow-xl border border-stone-800">
        <div class="flex items-center justify-between border-b border-stone-800 pb-3 mb-3">
            <div class="flex items-center gap-2">
                <i data-lucide="sliders" class="w-5 h-5 text-amber-500"></i>
                <h1 class="font-bold text-sm tracking-wide uppercase">Interactive Simulator</h1>
            </div>
            <span class="text-xs bg-amber-500/20 text-amber-400 font-semibold px-2.5 py-0.5 rounded-full border border-amber-500/30">Step Interactive Mode</span>
        </div>
        
        <!-- Step Indicator Bullets (QR removed) -->
        <div class="grid grid-cols-5 gap-1.5...

JavaScript

=