<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>User Reward Center - Glassmorphism</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<!-- Material Symbols -->
<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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Tailwind Configuration -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#ecb613",
"background-light": "#f8f8f6",
"background-dark": "#221d10",
"charcoal": "#121212",
"charcoal-light": "#1e1e1e",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "2xl": "4rem", "full": "9999px"},
backgroundImage: {
'glass-gradient': 'linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%)',
'glass-border': 'linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%)',
'neon-halo': 'radial-gradient(circle at center, rgba(236, 182, 19, 0.15) 0%, rgba(0, 0, 0, 0) 70%)',
}
},
},
}
</script>
<style>
/* Custom scrollbar for webkit */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #121212;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #ecb613;
}
/* Glassmorphism Utilities */
.glass-panel {
background: rgba(30, 30, 30, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.glass-card-hover {
transition: all 0.3s ease;
}
.glass-card-hover:hover {
border-color: rgba(236, 182, 19, 0.4);
box-shadow: 0 0 20px rgba(236, 182, 19, 0.1), inset 0 0 10px rgba(255,255,255,0.05);
transform: translateY(-4px);
}
/* Liquid Button Effect */
.btn-liquid {
position: relative;
overflow: hidden;
z-index: 1;
transition: color 0.4s ease;
}
.btn-liquid::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #ecb613;
z-index: -1;
transition: width 0.4s ease;
}
.btn-liquid:hover::before {
width: 100%;
}
.btn-liquid:hover {
color: #121212 !important;
}
/* Neon Text Glow */
.text-neon {
text-shadow: 0 0 10px rgba(236, 182, 19, 0.3);
}
</style>
</head>
<body class="bg-charcoal text-slate-100 font-display min-h-screen flex flex-col antialiased selection:bg-primary selection:text-charcoal relative overflow-x-hidden">
<!-- Ambient Background Glows -->
<div class="fixed top-[-10%] left-[20%] w-[500px] h-[500px] bg-primary/10 rounded-full blur-[120px] pointer-events-none z-0"></div>
<div class="fixed bottom-[-10%] right-[10%] w-[600px] h-[600px] bg-primary/5 rounded-full blur-[100px] pointer-events-none z-0"></div>
<!-- Floating Navigation Bar -->
<div class="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 w-auto">
<nav class="glass-panel rounded-full px-2 py-2 flex items-center gap-1 shadow-2xl">
<a class="flex flex-col items-center justify-center p-3 w-12 h-12 rounded-full bg-primary/20 text-primary transition-all" href="#">
<span class="material-symbols-outlined text-[24px]">grid_view</span>
</a>
<a class="flex flex-col items-center justify-center p-3 w-12 h-12 rounded-full hover:bg-white/5 text-slate-400 hover:text-white transition-all" href="#">
<span class="material-symbols-outlined text-[24px]">trophy</span>
</a>
<a class="flex flex-col items-center justify-center p-3 w-12 h-12 rounded-full hover:bg-white/5 text-slate-400 hover:text-white transition-all" href="#">
<span class="material-symbols-outlined text-[24px]">leaderboard</span>
</a>
<a class="flex flex-col items-center justify-center p-3 w-12 h-12 rounded-full hover:bg-white/5 text-slate-400 hover:text-white transition-all" href="#">
<span class="material-symbols-outlined text-[24px]">person</span>
</a>
</nav>
</div>
<!-- Main Wrapper -->
<div class="relative z-10 flex flex-col w-full max-w-[1400px] mx-auto px-6 py-6 h-full flex-grow">
<!-- Header -->
<header class="flex items-center justify-between mb-12 glass-panel rounded-full px-8 py-4">
<div class="flex items-center gap-4">
<div class="bg-primary/20 p-2 rounded-full text-primary">
<span class="material-symbols-outlined">diamond</span>
</div>
<div>
<h1 class="text-xl font-bold tracking-tight text-white">Reward Vault</h1>
<p class="text-xs text-slate-400 uppercase tracking-widest">Variant 02</p>
</div>
</div>
<!-- Search & User -->
<div class="flex items-center gap-6">
<div class="hidden md:flex items-center bg-white/5 rounded-full px-4 py-2 border border-white/10 focus-within:border-primary/50 transition-colors w-64">
<span class="material-symbols-outlined text-slate-400 text-[20px]">search</span>
<input class="bg-transparent border-none focus:ring-0 text-sm text-white placeholder-slate-500 w-full ml-2" placeholder="Search rewards..." type="text"/>
</div>
<div class="flex items-center gap-3 pl-6 border-l border-white/10">
<div class="text-right hidden sm:block">
<p class="text-sm font-bold text-white">Alex Morgan</p>
<p class="text-xs text-primary">Gold Tier</p>
</div>
<div class="h-10 w-10 rounded-full bg-cover bg-center border-2 border-primary/30" data-alt="User profile photo avatar" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA-2ez3E6KIUSmLcw1jrJc8kYfwJJPgVTgdCHQD3aDKckvG5znnEl5jwQ3ntbvgI7SyKjCIcM4JJp5nUvAMgqTgZNtKBetg5IaqbcbKS39TbHexAz779_lcmnojrRJtSXWib4UxDjnXUfjhLhWDZumuRYM1mriF_LKXn6UKOWfuslUOnQ2KefUBijVeevpVNMgZps3011MVGbV1dWWMhimgckUqTJnV39XZFUHeQlnv5KKyaBBdUPqjgM8tVWzgHcldHNq6E7ru71Q8');"></div>
</div>
</div>
</header>
<!-- Dashboard Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-32">
<!-- Left Column: Stats & Featured (Span 8) -->
<div class="lg:col-span-8 flex flex-col gap-8">
<!-- Hero / Stats Section -->
<div class="glass-panel rounded-2xl p-8 relative overflow-hidden group">
<div class="absolute right-0 top-0 w-64 h-64 bg-primary/10 rounded-full blur-[80px] -mr-16 -mt-16"></div>
<div class="flex flex-col md:flex-row items-end justify-between gap-6 relative z-10">
<div class="flex-1">
<p class="text-slate-400 text-sm uppercase tracking-wider mb-1">Available Balance</p>
<h2 class="text-6xl font-light text-white mb-2"><span class="font-bold text-neon">12,450</span> <span class="text-2xl text-slate-500 font-normal">XP</span></h2>
<div class="flex items-center gap-2 mt-4">
<span class="bg-green-500/20 text-green-400 text-xs font-bold px-2 py-1 rounded-full flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]">trending_up</span> +15%
</span>
<span class="text-slate-500 text-sm">earned this week</span>
</div>
</div>
<div class="w-full md:w-1/3">
<div class="flex justify-between text-sm mb-2">
<span class="text-white font-medium">Gold Status</span>
<span class="text-primary">85%</span>
</div>
<div class="h-2 w-full bg-white/10 rounded-full overflow-hidden">
<div class="h-full bg-primary shadow-[0_0_10px_rgba(236,182,19,0.5)] w-[85%] rounded-full relative">
<!-- Shimmer effect -->
<div class="absolute top-0 left-0 bottom-0 right-0 bg-gradient-to-r from-transparent via-white/20 to-transparent w-full -translate-x-full animate-[shimmer_2s_infinite]"></div>
</div>
</div>
<p class="text-right text-xs text-slate-500 mt-2">550 XP to Platinum</p>
</div>
</div>
</div>
<!-- Featured Reward Large Card -->
<div class="glass-panel glass-card-hover rounded-2xl p-0 flex flex-col md:flex-row overflow-hidden min-h-[340px]">
<div class="w-full md:w-1/2 relative bg-black/20 flex items-center justify-center p-8 group">
<!-- Background radial for product -->
<div class="absolute inset-0 bg-gradient-to-br from-primary/20 via-transparent to-transparent opacity-50 group-hover:opacity-80 transition-opacity duration-500"></div>
<img alt="Playstation 5 Console with controller" class="relative z-10 w-full max-w-[280px] drop-shadow-2xl transform group-hover:scale-105 transition-transform duration-500" data-alt="Playstation 5 Console" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCc88tYHJqMqpMUuuCx_oaMhWApqvXjnlw2Jsdd7WgPxGjq_ZUdtFKqTyOgJkxGVGvO_waVCJ63Fqi9BUCznS_yYcPJiStfjW7iiIbvk80WBcpLyhPpBAtCTbPVEv-m5eaXR_83p5E3-3ebAPy0rwEd9ldekJdSz97rUT7hdZQYGiyyIFRUjrA715T0YlWvA471MtYjQGb-BcYtEqjLu_1vOFtpDaZGbNQWTY5ViyCzLUbJTBkIvuc8FroNxZbsXJ0cADaMT1vCL2y-"/>
</div>
<div class="w-full md:w-1/2 p-8 flex flex-col justify-center">
<div class="flex items-start justify-between mb-2">
<span class="bg-primary text-charcoal text-xs font-bold px-3 py-1 rounded-full">FEATURED</span>
<button class="text-slate-400 hover:text-white transition-colors">
<span class="material-symbols-outlined">favorite</span>
</button>
</div>
<h3 class="text-3xl font-bold text-white mb-2 leading-tight">PlayStation 5 <br/>Digital Edition</h3>
<p class="text-slate-400 mb-6 text-sm leading-relaxed">Experience lightning-fast loading with an ultra-high speed SSD, deeper immersion with support for haptic feedback.</p>
<div class="mt-auto flex items-center justify-between">
<div>
<p class="text-xs text-slate-500 uppercase">Cost</p>
<p class="text-xl font-bold text-primary text-neon">50,000 XP</p>
</div>
<button class="btn-liquid px-6 py-3 rounded-full border border-primary/50 text-primary font-bold text-sm tracking-wide">
Claim Reward
</button>
</div>
</div>
</div>
<!-- Filters -->
<div class="flex items-center gap-6 overflow-x-auto pb-2 scrollbar-hide border-b border-white/5 px-2">
<button class="text-white border-b-2 border-primary pb-2 font-medium whitespace-nowrap">All Rewards</button>
<button class="text-slate-500 hover:text-white border-b-2 border-transparent hover:border-white/20 pb-2 font-medium transition-all whitespace-nowrap">Electronics</button>
<button class="text-slate-500 hover:text-white border-b-2 border-transparent hover:border-white/20 pb-2 font-medium transition-all whitespace-nowrap">Gift Cards</button>
<button class="text-slate-500 hover:text-white border-b-2 border-transparent hover:border-white/20 pb-2 font-medium transition-all whitespace-nowrap">Merch</button>
<button class="text-slate-500 hover:text-white border-b-2 border-transparent hover:border-white/20 pb-2 font-medium transition-all whitespace-nowrap">Digital Assets</button>
</div>
<!-- Rewards Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="glass-panel glass-card-hover rounded-2xl p-4 flex flex-col group h-full">
<div class="relative w-full aspect-square rounded-xl bg-black/20 mb-4 overflow-hidden flex items-center justify-center">
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent z-10"></div>
<img alt="Smart Watch black band" class="w-3/4 object-contain z-0 group-hover:scale-110 transition-transform duration-500" data-alt="Smart Watch Product" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxgMGJKRnVwXGfIYeSIPBXQVdNwUaAgyGmo2aKqsOotleCsZYIEmHzV1EyLEgF642Hln-kNAJtSBrMJ5EeDDEoevjxuvacRVCgS1igZZEQiMeoud0TNkiTIeVVAVo5TlUTV8gUyNWKYIeSgE6pPYKpanJpVmz2WwJ2xCNsF7eRvHzIgCXP1UwXAHGc5zfV0tu6HuqjS5JljQ0APJnYby3ASGx0HM9awVKVSESqXSySLs67D1vEoLf6DxWVMqJaq4Zm0zKOYquClL6v"/>
<div class="absolute top-3 right-3 z-20">
<span class="bg-black/50 backdrop-blur-md text-white text-[10px] font-bold px-2 py-1 rounded-full border border-white/10">Tech</span>
</div>
</div>
<h4 class="text-white font-bold text-lg mb-1 truncate">Apple Watch Series 8</h4>
<div class="flex items-center justify-between mt-auto pt-2">
<span class="text-primary font-bold">35,000 XP</span>
<button class="h-8 w-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-primary hover:text-charcoal transition-colors">
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
</div>
</div>
<!-- Card 2 -->
<div class="glass-panel glass-card-hover rounded-2xl p-4 flex flex-col group h-full">
<div class="relative w-full aspect-square rounded-xl bg-black/20 mb-4 overflow-hidden flex items-center justify-center">
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent z-10"></div>
<img alt="High end headphones" class="w-3/4 object-contain z-0 group-hover:scale-110 transition-transform duration-500" data-alt="Headphones Product" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBenew4SYB8wgIcE4AfW2Fx_JAQyQix2bulFd12raQ2WP9auMiTVtlk1H8wJAyTGzuZxnuiJQ3i-p_hDRzVZ3BYuR1Ygb89c78w8LD17TwjQ_fzdfIbOAKsj6dgldfyn6SZ4J0eMs08CIEBA7cEUDW5PqRapjQG3IQOT9io2MCU0NtgCdPoDEZS8j85Tfu1fA6HlzaKpxaOxP2OTg3nWz7EbNOX2ELjXqV2bC239S8r3h6Kqkrs0XqPK-WcBby-nPo6hjmECzwU3oXY"/>
<div class="absolute top-3 right-3 z-20">
<span class="bg-black/50 backdrop-blur-md text-white text-[10px] font-bold px-2 py-1 rounded-full border border-white/10">Audio</span>
</div>
</div>
<h4 class="text-white font-bold text-lg mb-1 truncate">Sony WH-1000XM4</h4>
<div class="flex items-center justify-between mt-auto pt-2">
<span class="text-primary font-bold">28,000 XP</span>
<button class="h-8 w-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-primary hover:text-charcoal transition-colors">
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
</div>
</div>
<!-- Card 3 -->
<div class="glass-panel glass-card-hover rounded-2xl p-4 flex flex-col group h-full opacity-60 grayscale hover:grayscale-0 hover:opacity-100 transition-all">
<div class="relative w-full aspect-square rounded-xl bg-black/20 mb-4 overflow-hidden flex items-center justify-center">
<div class="absolute inset-0 flex items-center justify-center z-30 bg-black/40 backdrop-blur-[2px]">
<span class="material-symbols-outlined text-white text-[32px]">lock</span>
</div>
<img alt="Red Nike Sneakers" class="w-3/4 object-contain z-0" data-alt="Nike Sneakers Product" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAYJJ7-CBGKtShCoZA1zmfC67-pK7OQpN329r70jqOQX-t1tcG7SES6zC5tcGSCv7aXuuSk_ZMxbf6-EtrLG_vjc-k037PkFvDC_eQbTTguv8oXhrViXEMv7VR7OwnGJQtd0x58onn-7Ct1eLOleG2ijJN5Zg9O-EH2MuaVHTMzx09gE7T94_V6jN6O05uh60l44ghcV5petaQMAmwohiX2EX9jqtazcaY3K8Fs5mUtl1Np_F81O-3BY0vQoVoa0qn_2uEgMzN7jijv"/>
<div class="absolute top-3 right-3 z-20">
<span class="bg-black/50 backdrop-blur-md text-white text-[10px] font-bold px-2 py-1 rounded-full border border-white/10">Apparel</span>
</div>
</div>
<h4 class="text-white font-bold text-lg mb-1 truncate">Nike Air Max 270</h4>
<div class="flex items-center justify-between mt-auto pt-2">
<span class="text-slate-400 font-bold">Locked</span>
<span class="text-xs text-slate-500">Req: Platinum</span>
</div>
</div>
</div>
</div>
<!-- Right Column: History & Quick Actions (Span 4) -->
<div class="lg:col-span-4 flex flex-col gap-8">
<!-- Claim History Widget -->
<div class="glass-panel rounded-2xl p-6 h-full min-h-[400px]">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-bold text-white">Recent Activity</h3>
<button class="text-xs text-primary hover:text-white transition-colors uppercase font-bold tracking-wide">View All</button>
</div>
<div class="space-y-4">
<!-- History Item 1 -->
<div class="flex items-center gap-4 p-3 rounded-xl hover:bg-white/5 transition-colors border border-transparent hover:border-white/5 cursor-pointer">
<div class="h-12 w-12 rounded-lg bg-white/5 flex items-center justify-center text-primary">
<span class="material-symbols-outlined">redeem</span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-bold text-white truncate">Amazon Gift Card</p>
<p class="text-xs text-slate-500">2 days ago</p>
</div>
<div class="text-right">
<p class="text-sm font-bold text-red-400">-2,500</p>
</div>
</div>
<!-- History Item 2 -->
<div class="flex items-center gap-4 p-3 rounded-xl hover:bg-white/5 transition-colors border border-transparent hover:border-white/5 cursor-pointer">
<div class="h-12 w-12 rounded-lg bg-white/5 flex items-center justify-center text-green-400">
<span class="material-symbols-outlined">emoji_events</span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-bold text-white truncate">Weekly Challenge</p>
<p class="text-xs text-slate-500">5 days ago</p>
</div>
<div class="text-right">
<p class="text-sm font-bold text-green-400">+500</p>
</div>
</div>
<!-- History Item 3 -->
<div class="flex items-center gap-4 p-3 rounded-xl hover:bg-white/5 transition-colors border border-transparent hover:border-white/5 cursor-pointer">
<div class="h-12 w-12 rounded-lg bg-white/5 flex items-center justify-center text-green-400">
<span class="material-symbols-outlined">sports_esports</span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-bold text-white truncate">Tournament Win</p>
<p class="text-xs text-slate-500">1 week ago</p>
</div>
<div class="text-right">
<p class="text-sm font-bold text-green-400">+1,200</p>
</div>
</div>
<!-- History Item 4 -->
<div class="flex items-center gap-4 p-3 rounded-xl hover:bg-white/5 transition-colors border border-transparent hover:border-white/5 cursor-pointer">
<div class="h-12 w-12 rounded-lg bg-white/5 flex items-center justify-center text-primary">
<span class="material-symbols-outlined">shopping_bag</span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-bold text-white truncate">Razer Mouse</p>
<p class="text-xs text-slate-500">2 weeks ago</p>
</div>
<div class="text-right">
<p class="text-sm font-bold text-red-400">-8,000</p>
</div>
</div>
</div>
<!-- Divider -->
<div class="h-px bg-white/10 my-6 w-full"></div>
<div class="bg-gradient-to-br from-primary/20 to-transparent p-5 rounded-xl border border-primary/20 relative overflow-hidden">
<div class="absolute right-0 bottom-0 opacity-10 transform translate-x-1/4 translate-y-1/4">
<span class="material-symbols-outlined text-[100px] text-primary">rocket_launch</span>
</div>
<h4 class="text-white font-bold mb-1">Boost your XP</h4>
<p class="text-xs text-slate-300 mb-3">Complete the daily survey to earn 500 XP instantly.</p>
<button class="text-xs bg-primary text-charcoal font-bold px-3 py-2 rounded-lg hover:bg-white transition-colors">Start Survey</button>
</div>
</div>
</div>
</div>
</div>
</body></html>