182 lines
11 KiB
HTML
182 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>MileageDraw - Win Big Today</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary": "#2b4bee",
|
|
"accent": "#fbbf24",
|
|
"background-light": "#f6f6f8",
|
|
"background-dark": "#101322",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Spline Sans", "sans-serif"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 min-h-screen">
|
|
<div class="relative flex h-auto min-h-screen w-full flex-col bg-background-light dark:bg-background-dark overflow-x-hidden">
|
|
<div class="layout-container flex h-full grow flex-col">
|
|
<!-- Navigation Bar -->
|
|
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 px-6 lg:px-20 py-4 bg-background-light dark:bg-background-dark sticky top-0 z-50">
|
|
<div class="flex items-center gap-3">
|
|
<div class="text-primary size-8">
|
|
<span class="material-symbols-outlined text-4xl">redeem</span>
|
|
</div>
|
|
<h2 class="text-slate-900 dark:text-white text-xl font-bold leading-tight tracking-tight">MileageDraw</h2>
|
|
</div>
|
|
<div class="flex flex-1 justify-end items-center gap-6 lg:gap-10">
|
|
<nav class="hidden md:flex items-center gap-8">
|
|
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary text-sm font-semibold transition-colors" href="#">Home</a>
|
|
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary text-sm font-semibold transition-colors" href="#">My Prizes</a>
|
|
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary text-sm font-semibold transition-colors" href="#">How to Play</a>
|
|
</nav>
|
|
<div class="flex items-center gap-4">
|
|
<button class="flex min-w-[120px] cursor-pointer items-center justify-center rounded-xl h-10 px-5 bg-primary/10 border border-primary/20 text-primary text-sm font-bold">
|
|
<span class="material-symbols-outlined text-sm mr-2">account_balance_wallet</span>
|
|
<span class="truncate">15,400 Miles</span>
|
|
</button>
|
|
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 border-2 border-primary/30" data-alt="User profile avatar circle" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuASf-yBhfIyds7eDugHWDN-bVo-aoZM14xRSjRn1GNH4vvCCYuu6gLziV5Evf5W0hqHxLrhmsM7tMWPhL-PjDqctgWRBCEnW3zELC5v2BZrvEhgo7NB55Oo3YJ0-2C3fZmMgCxSC5SuwkcGmCvlEJiijE0RYtDZ7XenI3RD5Lt1VaEmPQ82FSB26oCxEJJ5I-hy02TTYa_npKImAXIOfm-x5Mh8evuGz0MoqoPTOSTuU3LxrHouNtN65FJ4KP4YUzBeSvC1b60St8_D");'></div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="flex-1 flex flex-col items-center px-4 lg:px-20 py-10 max-w-7xl mx-auto w-full">
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 w-full items-center">
|
|
<!-- Left Side: Prize Board -->
|
|
<div class="lg:col-span-3 flex flex-col gap-4 order-2 lg:order-1">
|
|
<div class="bg-slate-50 dark:bg-slate-900/50 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 backdrop-blur-sm">
|
|
<h3 class="text-lg font-bold mb-6 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-accent">military_tech</span>
|
|
Prize Pool
|
|
</h3>
|
|
<div class="space-y-6">
|
|
<div class="relative pl-4 border-l-4 border-accent">
|
|
<p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 font-bold">1st Prize</p>
|
|
<p class="text-2xl font-black text-slate-900 dark:text-white">10,000 <span class="text-sm font-normal text-slate-500">Miles</span></p>
|
|
</div>
|
|
<div class="relative pl-4 border-l-4 border-slate-400">
|
|
<p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 font-bold">2nd Prize</p>
|
|
<p class="text-2xl font-black text-slate-900 dark:text-white">5,000 <span class="text-sm font-normal text-slate-500">Miles</span></p>
|
|
</div>
|
|
<div class="relative pl-4 border-l-4 border-orange-400">
|
|
<p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 font-bold">3rd Prize</p>
|
|
<p class="text-2xl font-black text-slate-900 dark:text-white">2,000 <span class="text-sm font-normal text-slate-500">Miles</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-primary/5 p-6 rounded-2xl border border-primary/20">
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed italic">
|
|
"Thousands of users have already claimed their rewards this month. Will you be next?"
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Center: Mystery Box -->
|
|
<div class="lg:col-span-6 flex flex-col items-center justify-center gap-8 order-1 lg:order-2">
|
|
<div class="text-center">
|
|
<h1 class="text-4xl lg:text-5xl font-black text-slate-900 dark:text-white mb-2 tracking-tight">Try Your Luck!</h1>
|
|
<p class="text-slate-600 dark:text-slate-400 text-lg">Open the Mystery Box to win huge rewards</p>
|
|
</div>
|
|
<div class="relative group cursor-pointer w-full max-w-md aspect-square flex items-center justify-center">
|
|
<!-- Background Glow Effect -->
|
|
<div class="absolute inset-0 bg-primary/20 blur-[100px] rounded-full scale-75 group-hover:bg-primary/30 transition-all duration-500"></div>
|
|
<!-- Mystery Box Container -->
|
|
<div class="relative w-full h-full bg-gradient-to-br from-slate-800 to-slate-950 rounded-3xl border-4 border-accent/30 shadow-2xl flex flex-col items-center justify-center overflow-hidden">
|
|
<!-- Box Illustration (Simulated with Material Symbols and Gradients) -->
|
|
<div class="flex flex-col items-center">
|
|
<span class="material-symbols-outlined text-[160px] text-accent drop-shadow-[0_0_20px_rgba(251,191,36,0.5)]">featured_seasonal_and_gifts</span>
|
|
<div class="mt-4 flex gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-accent animate-pulse"></div>
|
|
<div class="w-3 h-3 rounded-full bg-accent/50 animate-pulse delay-75"></div>
|
|
<div class="w-3 h-3 rounded-full bg-accent/20 animate-pulse delay-150"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Sparkle elements -->
|
|
<span class="material-symbols-outlined absolute top-10 left-10 text-accent/40 text-2xl">auto_awesome</span>
|
|
<span class="material-symbols-outlined absolute bottom-12 right-12 text-accent/40 text-4xl">auto_awesome</span>
|
|
<span class="material-symbols-outlined absolute top-20 right-16 text-accent/40 text-xl">auto_awesome</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-4 w-full">
|
|
<button class="w-full max-w-xs flex cursor-pointer items-center justify-center rounded-2xl h-16 px-8 bg-primary hover:bg-primary/90 text-white text-xl font-black shadow-lg shadow-primary/40 transition-all active:scale-95 group">
|
|
<span class="mr-3">DRAW NOW</span>
|
|
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
|
|
</button>
|
|
<p class="text-xs text-slate-500 font-medium">Cost: 500 Miles per draw</p>
|
|
</div>
|
|
</div>
|
|
<!-- Right Side: Recent Winners -->
|
|
<div class="lg:col-span-3 flex flex-col gap-4 order-3">
|
|
<div class="bg-slate-50 dark:bg-slate-900/50 p-6 rounded-2xl border border-slate-200 dark:border-slate-800">
|
|
<h3 class="text-sm font-bold text-slate-500 uppercase tracking-widest mb-4">Live Winners</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center overflow-hidden">
|
|
<img alt="" class="w-full h-full object-cover" data-alt="User avatar of Alice" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCNyWQdRGCg_-tNwAu4-0oRfpGbiWSPp5prILJ1oalpRniDZ1DQL7yiiiDxVsiNuFMgCiKBVvFQRXrjlinRU-iZI_YM0XcDO2BuaK6YVIUwvn7DWhqUMcYYSA9EDn9vknhh9Sii2sb8KQkpoNsJdu25N8vJIcRuFAAioW3NFk-UPNLBfIPsRe1LxmgaxR6s_EIO6RfaV49lqaDiNOODXxKWtL-kl6oczKoBh7P0-DRwgdVJ2hjHlY3Dt33RCg91dSaBBPffcqIO8Qky"/>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-bold">Alice W.</p>
|
|
<p class="text-xs text-primary font-bold">+2,000 Miles</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center overflow-hidden">
|
|
<img alt="" class="w-full h-full object-cover" data-alt="User avatar of Bob" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBTj1uufe8nMOFogBsc_4yK_47l2_5Pry-ZcyRdCdSMrBSxqOL13JewG1pyncXBAvV1zv1JDdfvampMOylwjHEwwIbgF4W2yFQas-Ra0mjUk0g62ExYQTtgxXeE5wGFAMYHCBjg56C-y2Os4yh2oKfsTKeQzpoDZc9IYaaALg2ACfWKFZtsV_XAXShAntlb5IOji7F7p7jxcGRhnY9fvN6mOYHcGLriek1Ql4tOh6aNQMjOIeOQ_UiUjeGsfKC5Sn7iP3Z7oyyh5da7"/>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-bold">James K.</p>
|
|
<p class="text-xs text-accent font-bold">+10,000 Miles</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center overflow-hidden">
|
|
<img alt="" class="w-full h-full object-cover" data-alt="User avatar of Carla" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCAB6XTgSBN_5iUE-8cN8bDKhHWZa8Vpo7NWgd8yJQmRnp_WjwCWbviTPKsDs2VpkPSSlUI9msh7kPgUx7UAxd9sGwy9XnRrqDeVtmVDFWWzXHBMmEr5Vh6UWS_L6ziv3CrZXf1_uFGYHrQusuJAX9Z_vpPq7cn7FgdUvlgBrcpBsqNT8VpGtRAHHhHhCi4QLX_lhvEdW5sXf9DILmez-bjHHv__qMEq0irhH1VAX2ve5ZejhD7cSt3362RekobZa3U0DRpS3wVKLSj"/>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-bold">Elena R.</p>
|
|
<p class="text-xs text-slate-400 font-bold">+500 Miles</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-primary to-blue-700 p-6 rounded-2xl text-white shadow-xl">
|
|
<h4 class="font-bold text-lg mb-1">Double Odds!</h4>
|
|
<p class="text-sm text-white/80">Active for the next 24 minutes. Draw now to increase your chances.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer Info -->
|
|
<div class="mt-20 w-full border-t border-slate-200 dark:border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-6">
|
|
<div class="flex gap-12 text-sm text-slate-500 font-medium">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">verified_user</span>
|
|
Provably Fair
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">speed</span>
|
|
Instant Payouts
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">support_agent</span>
|
|
24/7 Support
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-slate-400">© 2024 MileageDraw Games. Please play responsibly.</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</body></html> |