<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Secure Checkout</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@500;700;900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7C3AED", // Violet-600
"primary-hover": "#6D28D9", // Violet-700
"accent-yellow": "#FACC15", // Yellow-400
"background-light": "#F3F4F6", // Gray-100
"background-dark": "#0F0720", // Very dark purple/black
"card-dark": "#1A1033", // Dark purple card bg
"card-light": "#FFFFFF",
"text-light": "#1F2937", // Gray-800
"text-dark": "#F3F4F6", // Gray-100
"glass-dark": "rgba(255, 255, 255, 0.05)",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
backgroundImage: {
'hero-gradient': 'radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.15) 0%, rgba(15, 7, 32, 0) 50%)',
'card-gradient': 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%)',
'glow': 'conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a853ba 180deg, #e92a67 360deg)',
}
},
},
};
</script>
<style type="text/tailwindcss">
:root {
--primary-color: #7C3AED;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #111;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.checkout-radio:checked + div {
border-color: #7C3AED;
background-color: rgba(124, 58, 237, 0.1);
}
.checkout-radio:checked + div .check-icon {
opacity: 1;
transform: scale(1);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark font-sans transition-colors duration-300 antialiased selection:bg-primary selection:text-white flex flex-col min-h-screen">
<nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-white/70 dark:bg-background-dark/80 border-b border-gray-200 dark:border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white">
<span class="material-icons-outlined text-2xl">sports_esports</span>
</div>
<span class="font-display font-bold text-xl tracking-tight">QuizQuest</span>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
<span class="material-icons-outlined text-green-500">lock</span>
<span class="hidden sm:inline">Secure Checkout</span>
</div>
</div>
</div>
</div>
</nav>
<main class="flex-grow pt-32 pb-20 relative overflow-hidden">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-hero-gradient pointer-events-none"></div>
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-12">
<div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/20 text-primary mb-6 ring-4 ring-primary/10">
<span class="material-icons-outlined">diamond</span>
</div>
<h1 class="font-display text-4xl sm:text-5xl font-bold leading-tight mb-4">
One Last Step
</h1>
<p class="text-lg text-gray-600 dark:text-gray-400">
Unlock the <span class="text-white font-medium">Standard Entry Pass</span> and start your quest for fortune.
</p>
</div>
<div class="bg-white dark:bg-[#150A2E] rounded-3xl border border-gray-200 dark:border-white/10 shadow-2xl overflow-hidden">
<div class="grid md:grid-cols-5 h-full">
<div class="md:col-span-2 bg-gray-50 dark:bg-[#0B0518] p-8 border-r border-gray-200 dark:border-white/5 flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_top_left,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent pointer-events-none"></div>
<div class="relative z-10">
<div class="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-6">Order Summary</div>
<div class="mb-8">
<h3 class="font-display text-2xl font-bold mb-2">Standard Entry Pass</h3>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-bold text-primary">₹99</span>
<span class="text-sm text-gray-500 dark:text-gray-400">/ one-time</span>
</div>
</div>
<div class="space-y-4">
<div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300">
<span class="material-icons-outlined text-green-500">check_circle</span>
<span>Lifetime Access to Platform</span>
</div>
<div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300">
<span class="material-icons-outlined text-green-500">check_circle</span>
<span>First Premium Quiz <span class="text-accent-yellow font-bold text-xs ml-1">FREE</span></span>
</div>
<div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300">
<span class="material-icons-outlined text-green-500">check_circle</span>
<span>Unlock Affiliate Dashboard</span>
</div>
<div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300">
<span class="material-icons-outlined text-green-500">check_circle</span>
<span>24/7 Priority Support</span>
</div>
</div>
</div>
<div class="relative z-10 mt-8 pt-8 border-t border-gray-200 dark:border-white/10">
<div class="flex items-center justify-between text-sm font-medium mb-2">
<span class="text-gray-500 dark:text-gray-400">Subtotal</span>
<span>₹99.00</span>
</div>
<div class="flex items-center justify-between text-sm font-medium mb-4">
<span class="text-gray-500 dark:text-gray-400">Taxes</span>
<span class="text-green-500">Included</span>
</div>
<div class="flex items-center justify-between text-lg font-bold">
<span>Total Due</span>
<span>₹99.00</span>
</div>
</div>
</div>
<div class="md:col-span-3 p-8">
<div class="mb-6">
<h3 class="font-display text-xl font-bold mb-1">Select Payment Method</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">All transactions are secure and encrypted.</p>
</div>
<form class="space-y-4">
<label class="relative block cursor-pointer group">
<input checked="" class="peer sr-only checkout-radio" name="payment_method" type="radio" value="upi"/>
<div class="p-4 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5 hover:bg-gray-100 dark:hover:bg-white/10 transition-all duration-200 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-lg bg-white p-2 flex items-center justify-center shadow-sm">
<img alt="UPI" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBmkWt0BchmSIXDsktBmc_s_t8WN2XXcH2k9zFqFHAgZnkU4sdEQtOgxmN2FzFQlvrYGznxcMCmx7Hs723xTM9-irtnY8iRbP0vkA7RbYvwj7-w-c3UE1KZjTjlJhUAUdidFqQsMw-UwlZIK5Lki914AqF81ZfkbgNiy3ra-qznckeDrA60Xie6IptC6g1rtgHhx6gYp76JCws7paIsUrw3c0i5qoYbR3pRKDeRs6BUlkYalSg6NdldHHmCc7fBsQrGqFDFu3UlqbQ"/>
</div>
<div>
<div class="font-bold text-gray-900 dark:text-white">UPI / QR Code</div>
<div class="text-xs text-gray-500 dark:text-gray-400">GPay, PhonePe, Paytm</div>
</div>
</div>
<div class="w-6 h-6 rounded-full border-2 border-gray-300 dark:border-gray-600 peer-checked:border-primary flex items-center justify-center relative">
<div class="w-3 h-3 rounded-full bg-primary opacity-0 check-icon transition-opacity duration-200"></div>
</div>
</div>
</label>
<label class="relative block cursor-pointer group">
<input class="peer sr-only checkout-radio" name="payment_method" type="radio" value="card"/>
<div class="p-4 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5 hover:bg-gray-100 dark:hover:bg-white/10 transition-all duration-200 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-lg bg-white p-2 flex items-center justify-center shadow-sm text-gray-900">
<span class="material-symbols-outlined">credit_card</span>
</div>
<div>
<div class="font-bold text-gray-900 dark:text-white">Credit / Debit Card</div>
<div class="text-xs text-gray-500 dark:text-gray-400">Visa, Mastercard, Rupay</div>
</div>
</div>
<div class="w-6 h-6 rounded-full border-2 border-gray-300 dark:border-gray-600 peer-checked:border-primary flex items-center justify-center relative">
<div class="w-3 h-3 rounded-full bg-primary opacity-0 check-icon transition-opacity duration-200"></div>
</div>
</div>
</label>
<label class="relative block cursor-pointer group">
<input class="peer sr-only checkout-radio" name="payment_method" type="radio" value="netbanking"/>
<div class="p-4 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5 hover:bg-gray-100 dark:hover:bg-white/10 transition-all duration-200 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-lg bg-white p-2 flex items-center justify-center shadow-sm text-gray-900">
<span class="material-symbols-outlined">account_balance</span>
</div>
<div>
<div class="font-bold text-gray-900 dark:text-white">Net Banking</div>
<div class="text-xs text-gray-500 dark:text-gray-400">All major banks supported</div>
</div>
</div>
<div class="w-6 h-6 rounded-full border-2 border-gray-300 dark:border-gray-600 peer-checked:border-primary flex items-center justify-center relative">
<div class="w-3 h-3 rounded-full bg-primary opacity-0 check-icon transition-opacity duration-200"></div>
</div>
</div>
</label>
<div class="pt-6 mt-6 border-t border-gray-200 dark:border-white/10">
<button class="w-full bg-primary hover:bg-primary-hover text-white py-4 rounded-xl font-bold shadow-lg shadow-primary/30 transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 group" type="button">
<span>Pay ₹99 Now</span>
<span class="material-icons-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
</button>
<p class="text-center mt-4 text-xs text-gray-500 dark:text-gray-400 flex items-center justify-center gap-4">
<span class="flex items-center gap-1"><span class="material-icons-outlined text-[16px]">lock</span> SSL Encrypted</span>
<span class="flex items-center gap-1"><span class="material-icons-outlined text-[16px]">verified_user</span> Verified</span>
</p>
</div>
</form>
</div>
</div>
</div>
<div class="mt-8 text-center">
<p class="text-sm text-gray-500 dark:text-gray-400">
Need help? <a class="text-primary hover:underline" href="#">Contact Support</a>
</p>
</div>
</div>
</main>
<footer class="bg-white dark:bg-[#080412] border-t border-gray-200 dark:border-white/5 py-8 mt-auto">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
<span class="material-icons-outlined">sports_esports</span>
<span class="text-sm font-medium">QuizQuest © 2023</span>
</div>
<div class="flex items-center gap-8">
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Privacy</a>
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Terms</a>
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Refund Policy</a>
</div>
</div>
</footer>
</body></html>