Design a Player Profile Page UI for an online sweepstakes casino using a glassmorphism layout and a warm black gradient. 🎨 Theme: Background: background: radial-gradient(ellipse farthest-corner at top left, #0a0a0a 0%, #1a0d00 30%, #2e1300 60%, #000000 100%); Two soft glowing orbs blended into the background (optional) Glassmorphic cards: black transparent base, orange/yellow glow borders, blurred backgrounds Typography: bold glowing headers, light sublabels in white or light gray 1. Hero Section – Player Identity Large full-width glass card Left: Circular avatar, player name (Kevin), tier badge overlay (NioPrime) Right: Welcome message "Welcome Back, Kevin" (animated glow text) Subtext: "Here's a quick look at your journey so far" Current tier: NioPrime glowing in orange Small progress bar: 1,250 / 2,500 Points (animated fill) 2. Stats Summary Cards (3 Side-by-Side) Three horizontal glass cards: Card 1: Lifetime Stats Total Spins Played Total Purchases Total Hours Played Card 2: This Month Spins This Month Bonuses Claimed Points Earned Card 3: VIP Snapshot Current Tier Points to Next Tier Cashback % Level All numbers should have animated counter-up effects on page load. 3. Active Perks Section Title: "Your Active Perks" Two-column grid of small glowing cards: 5% Cashback – glowing orange Daily Bonus – neon yellow flicker Exclusive Games – dimmed if inactive Early Access – grayed if locked Each card should include an icon + perk title + status label (active/inactive) 4. Recent Activity Timeline Title: "Recent Activity" Vertical timeline of actions (or table-style): Aug 16 – Purchased 5,000 SC – $50 Aug 14 – Claimed 50 Free Spins Aug 12 – Completed Daily Mission Add tab filters: Purchase / Bonuses / Games 5. Account Options 4 button-style cards in a horizontal row or grid: Edit Profile Transaction History Security Settings Manage Payment Methods Use neon-outlined buttons with hover glow 🪄 Animation Instructions: Header text glow + flicker Progress bars fill smoothly Stats numbers count up Perk cards pulse if active Soft orb movement in background - Initial Deployment
08a8b7d
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Player Profile | NioPrime Casino</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| 'flicker': 'flicker 1.5s infinite alternate', | |
| 'pulse-active': 'pulseActive 2s infinite' | |
| }, | |
| keyframes: { | |
| glow: { | |
| '0%': { 'text-shadow': '0 0 5px rgba(255, 165, 0, 0.5)' }, | |
| '100%': { 'text-shadow': '0 0 20px rgba(255, 165, 0, 0.8), 0 0 30px rgba(255, 200, 0, 0.6)' } | |
| }, | |
| flicker: { | |
| '0%, 19%, 21%, 23%, 25%, 54%, 56%, 100%': { | |
| 'box-shadow': '0 0 5px rgba(255, 255, 0, 0.5)', | |
| 'opacity': '1' | |
| }, | |
| '20%, 24%, 55%': { | |
| 'box-shadow': '0 0 20px rgba(255, 255, 0, 0.8), 0 0 30px rgba(255, 255, 0, 0.9)', | |
| 'opacity': '0.9' | |
| } | |
| }, | |
| pulseActive: { | |
| '0%': { 'box-shadow': '0 0 0 0 rgba(255, 165, 0, 0.4)' }, | |
| '70%': { 'box-shadow': '0 0 0 10px rgba(255, 165, 0, 0)' }, | |
| '100%': { 'box-shadow': '0 0 0 0 rgba(255, 165, 0, 0)' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: radial-gradient(ellipse farthest-corner at top left, #0a0a0a 0%, #1a0d00 30%, #2e1300 60%, #000000 100%); | |
| color: #f5f5f5; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Glassmorphism card styling */ | |
| .glass-card { | |
| background: rgba(15, 15, 15, 0.5); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 140, 0, 0.3); | |
| border-radius: 16px; | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .glow-border { | |
| box-shadow: 0 0 10px rgba(255, 140, 0, 0.7), 0 0 20px rgba(255, 69, 0, 0.4); | |
| } | |
| .hero-glow { | |
| animation: glow 1.5s ease-in-out infinite alternate; | |
| } | |
| .progress-fill { | |
| width: 0; | |
| transition: width 2s ease-in-out; | |
| } | |
| .daily-flicker { | |
| animation: flicker 1.5s infinite alternate; | |
| } | |
| .active-pulse { | |
| animation: pulseActive 2s infinite; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 20px; | |
| height: calc(100% - 20px); | |
| width: 2px; | |
| background: linear-gradient(to bottom, #ff8c00, transparent); | |
| } | |
| .tab-active { | |
| border-bottom: 2px solid #ff8c00; | |
| color: #ff8c00; | |
| } | |
| .neon-btn { | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(255, 140, 0, 0.5); | |
| box-shadow: 0 0 5px rgba(255, 140, 0, 0.3); | |
| } | |
| .neon-btn:hover { | |
| border: 1px solid rgba(255, 140, 0, 0.8); | |
| box-shadow: 0 0 15px rgba(255, 140, 0, 0.6); | |
| transform: translateY(-2px); | |
| } | |
| .orb { | |
| position: fixed; | |
| border-radius: 50%; | |
| filter: blur(60px); | |
| z-index: 0; | |
| } | |
| .orb-1 { | |
| width: 400px; | |
| height: 400px; | |
| background: radial-gradient(circle, rgba(255, 100, 0, 0.2) 0%, transparent 70%); | |
| top: -100px; | |
| left: -100px; | |
| } | |
| .orb-2 { | |
| width: 600px; | |
| height: 600px; | |
| background: radial-gradient(circle, rgba(255, 165, 0, 0.15) 0%, transparent 70%); | |
| bottom: -200px; | |
| right: -200px; | |
| } | |
| @keyframes countUp { | |
| from { width: 0; } | |
| } | |
| </style> | |
| </head> | |
| <body class="relative"> | |
| <!-- Background Orbs --> | |
| <div class="orb orb-1"></div> | |
| <div class="orb orb-2"></div> | |
| <div class="container mx-auto px-4 py-8 relative z-10"> | |
| <!-- Hero Section --> | |
| <section class="glass-card glow-border p-6 mb-8"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="relative mr-6 mb-4 md:mb-0"> | |
| <div class="w-24 h-24 rounded-full bg-gradient-to-r from-orange-600 to-yellow-500 p-1"> | |
| <div class="bg-gray-800 rounded-full w-full h-full flex items-center justify-center"> | |
| <span class="text-3xl font-bold">K</span> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-orange-500 to-yellow-500 text-black text-xs font-bold px-3 py-1 rounded-full"> | |
| NioPrime | |
| </div> | |
| </div> | |
| <div class="flex-1 text-center md:text-left"> | |
| <h1 class="text-3xl md:text-4xl font-bold hero-glow"> | |
| Welcome Back, <span class="text-orange-400">Kevin</span> | |
| </h1> | |
| <p class="text-gray-300 mt-2 mb-4"> | |
| Here's a quick look at your journey so far | |
| </p> | |
| <div class="mt-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-orange-400 font-semibold">NioPrime</span> | |
| <span class="text-gray-400">1,250 / 2,500 Points</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-3"> | |
| <div class="progress-fill h-3 rounded-full bg-gradient-to-r from-orange-500 to-yellow-500" style="width: 50%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Summary --> | |
| <section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Card 1: Lifetime Stats --> | |
| <div class="glass-card p-6"> | |
| <h2 class="text-xl font-bold mb-4 text-orange-300">Lifetime Stats</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Total Spins Played</p> | |
| <p class="text-2xl font-bold counter" data-target="8520">0</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Total Purchases</p> | |
| <p class="text-2xl font-bold counter" data-target="47">0</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Total Hours Played</p> | |
| <p class="text-2xl font-bold counter" data-target="320">0</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 2: This Month --> | |
| <div class="glass-card p-6"> | |
| <h2 class="text-xl font-bold mb-4 text-orange-300">This Month</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Spins This Month</p> | |
| <p class="text-2xl font-bold counter" data-target="1250">0</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Bonuses Claimed</p> | |
| <p class="text-2xl font-bold counter" data-target="18">0</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Points Earned</p> | |
| <p class="text-2xl font-bold counter" data-target="1250">0</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 3: VIP Snapshot --> | |
| <div class="glass-card p-6"> | |
| <h2 class="text-xl font-bold mb-4 text-orange-300">VIP Snapshot</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Current Tier</p> | |
| <p class="text-2xl font-bold text-yellow-400">NioPrime</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Points to Next Tier</p> | |
| <p class="text-2xl font-bold counter" data-target="1250">0</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Cashback %</p> | |
| <p class="text-2xl font-bold">5%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Active Perks --> | |
| <section class="glass-card p-6 mb-8"> | |
| <h2 class="text-2xl font-bold mb-6 text-orange-300 hero-glow">Your Active Perks</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="glass-card p-4 flex items-center active-pulse"> | |
| <div class="w-10 h-10 rounded-full bg-orange-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-coins text-orange-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">5% Cashback</h3> | |
| <span class="text-green-400 text-sm">Active</span> | |
| </div> | |
| </div> | |
| <div class="glass-card p-4 flex items-center daily-flicker"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-gift text-yellow-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">Daily Bonus</h3> | |
| <span class="text-green-400 text-sm">Active</span> | |
| </div> | |
| </div> | |
| <div class="glass-card p-4 flex items-center opacity-50"> | |
| <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center mr-3"> | |
| <i class="fas fa-dice text-gray-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">Exclusive Games</h3> | |
| <span class="text-gray-400 text-sm">Inactive</span> | |
| </div> | |
| </div> | |
| <div class="glass-card p-4 flex items-center opacity-50"> | |
| <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center mr-3"> | |
| <i class="fas fa-lock text-gray-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">Early Access</h3> | |
| <span class="text-gray-400 text-sm">Locked</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Recent Activity --> | |
| <section class="glass-card p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-orange-300 hero-glow">Recent Activity</h2> | |
| <div class="flex space-x-4"> | |
| <button class="tab-active px-3 py-1 text-sm font-medium">All</button> | |
| <button class="px-3 py-1 text-sm font-medium text-gray-400 hover:text-orange-300">Purchase</button> | |
| <button class="px-3 py-1 text-sm font-medium text-gray-400 hover:text-orange-300">Bonuses</button> | |
| <button class="px-3 py-1 text-sm font-medium text-gray-400 hover:text-orange-300">Games</button> | |
| </div> | |
| </div> | |
| <div class="space-y-4 pl-6 relative"> | |
| <!-- Timeline item --> | |
| <div class="timeline-item relative pl-6 pb-4"> | |
| <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-orange-500"></div> | |
| <div class="flex justify-between flex-wrap"> | |
| <span class="font-semibold">Aug 16</span> | |
| <span class="text-orange-400 font-medium">Purchased 5,000 SC</span> | |
| </div> | |
| <p class="text-gray-400">$50</p> | |
| </div> | |
| <div class="timeline-item relative pl-6 pb-4"> | |
| <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-yellow-500"></div> | |
| <div class="flex justify-between flex-wrap"> | |
| <span class="font-semibold">Aug 14</span> | |
| <span class="text-yellow-400 font-medium">Claimed 50 Free Spins</span> | |
| </div> | |
| <p class="text-gray-400">Daily Bonus</p> | |
| </div> | |
| <div class="timeline-item relative pl-6"> | |
| <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-green-500"></div> | |
| <div class="flex justify-between flex-wrap"> | |
| <span class="font-semibold">Aug 12</span> | |
| <span class="text-green-400 font-medium">Completed Daily Mission</span> | |
| </div> | |
| <p class="text-gray-400">+250 Points</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Account Options --> | |
| <section> | |
| <h2 class="text-2xl font-bold mb-6 text-orange-300 hero-glow">Account Settings</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <button class="glass-card neon-btn p-6 flex flex-col items-center justify-center"> | |
| <i class="fas fa-user-edit text-3xl mb-3 text-orange-400"></i> | |
| <h3 class="font-bold">Edit Profile</h3> | |
| </button> | |
| <button class="glass-card neon-btn p-6 flex flex-col items-center justify-center"> | |
| <i class="fas fa-history text-3xl mb-3 text-orange-400"></i> | |
| <h3 class="font-bold">Transaction History</h3> | |
| </button> | |
| <button class="glass-card neon-btn p-6 flex flex-col items-center justify-center"> | |
| <i class="fas fa-shield-alt text-3xl mb-3 text-orange-400"></i> | |
| <h3 class="font-bold">Security Settings</h3> | |
| </button> | |
| <button class="glass-card neon-btn p-6 flex flex-col items-center justify-center"> | |
| <i class="fas fa-credit-card text-3xl mb-3 text-orange-400"></i> | |
| <h3 class="font-bold">Payment Methods</h3> | |
| </button> | |
| </div> | |
| </section> | |
| </div> | |
| <script> | |
| // Counter animation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Animate progress bar | |
| document.querySelector('.progress-fill').style.width = '50%'; | |
| // Animate counters | |
| const counters = document.querySelectorAll('.counter'); | |
| const duration = 2000; // ms | |
| counters.forEach(counter => { | |
| const target = +counter.getAttribute('data-target'); | |
| const start = 0; | |
| const increment = target / (duration / 16); | |
| let current = start; | |
| const updateCounter = () => { | |
| current += increment; | |
| if (current < target) { | |
| counter.textContent = Math.ceil(current).toLocaleString(); | |
| requestAnimationFrame(updateCounter); | |
| } else { | |
| counter.textContent = target.toLocaleString(); | |
| } | |
| }; | |
| updateCounter(); | |
| }); | |
| // Add hover effects to buttons | |
| const neonButtons = document.querySelectorAll('.neon-btn'); | |
| neonButtons.forEach(button => { | |
| button.addEventListener('mouseenter', () => { | |
| button.classList.add('glow-border'); | |
| }); | |
| button.addEventListener('mouseleave', () => { | |
| button.classList.remove('glow-border'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ProjectGenesis/player-profile-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |