Spaces:

ProjectGenesis
/

player-profile-ui

Running

App Files Files Community

ProjectGenesis commited on Sep 6

Commit

65ccc3d

verified ·

1 Parent(s): c2d967f

Change the "Modern Stat Summary Panel" style to a different design with horizontal bars - Follow Up Deployment

Browse files

Files changed (2) hide show

index.html +136 -66
prompts.txt +9 -0

index.html CHANGED Viewed

@@ -288,62 +288,169 @@
             </div>
         </section>
-        <!-- Stat Summary Panel -->
         <section class="glass-card p-6 mb-8">
-            <div class="grid grid-cols-1 md:grid-cols-3 stat-columns gap-6">
-                <!-- Column 1 -->
-                <div class="p-4 border-r border-gray-700">
-                    <h3 class="text-lg font-bold text-orange-400 mb-4 text-center">Lifetime Stats</h3>
                     <div class="space-y-4">
                         <div>
-                            <p class="text-gray-400">Spins Played</p>
-                            <p class="text-2xl font-bold"><span class="count-up" data-target="12890">0</span></p>
                         </div>
                         <div>
-                            <p class="text-gray-400">Total Purchases</p>
-                            <p class="text-2xl font-bold">$<span class="count-up" data-target="2450">0</span></p>
                         </div>
                         <div>
-                            <p class="text-gray-400">Time Played</p>
-                            <p class="text-2xl font-bold"><span class="count-up" data-target="342">0</span> hrs</p>
                         </div>
                     </div>
                 </div>
-                <!-- Column 2 -->
-                <div class="p-4 border-r border-gray-700">
-                    <h3 class="text-lg font-bold text-orange-400 mb-4 text-center">This Month</h3>
                     <div class="space-y-4">
                         <div>
-                            <p class="text-gray-400">Spins</p>
-                            <p class="text-2xl font-bold"><span class="count-up" data-target="1240">0</span></p>
                         </div>
                         <div>
-                            <p class="text-gray-400">Bonuses Claimed</p>
-                            <p class="text-2xl font-bold"><span class="count-up" data-target="18">0</span></p>
                         </div>
                         <div>
-                            <p class="text-gray-400">Points Earned</p>
-                            <p class="text-2xl font-bold"><span class="count-up" data-target="1250">0</span></p>
                         </div>
                     </div>
                 </div>
-                <!-- Column 3 -->
-                <div class="p-4">
-                    <h3 class="text-lg font-bold text-orange-400 mb-4 text-center">VIP Snapshot</h3>
                     <div class="space-y-4">
                         <div>
-                            <p class="text-gray-400">Current Tier</p>
-                            <p class="text-2xl font-bold">NioPrime</p>
                         </div>
                         <div>
-                            <p class="text-gray-400">Cashback %</p>
-                            <p class="text-2xl font-bold"><span class="count-up" data-target="8">0</span>%</p>
                         </div>
                         <div>
-                            <p class="text-gray-400">Time Remaining</p>
-                            <p class="text-2xl font-bold">78 days</p>
                         </div>
                     </div>
                 </div>
@@ -456,43 +563,6 @@
             </div>
         </section>
-        <!-- Account Settings Panel -->
-        <section>
-            <h2 class="text-2xl font-bold mb-6">Account Settings</h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 settings-grid">
-                <div class="glass-card settings-card p-6 flex flex-col items-center text-center cursor-pointer hover:shadow-glow">
-                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mb-4">
-                        <i class="fas fa-user-edit text-2xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Edit Profile</h3>
-                    <p class="text-gray-400 text-sm">Update your personal information</p>
-                </div>
-                <div class="glass-card settings-card p-6 flex flex-col items-center text-center cursor-pointer hover:shadow-glow">
-                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mb-4">
-                        <i class="fas fa-history text-2xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Transaction History</h3>
-                    <p class="text-gray-400 text-sm">View all your deposits and withdrawals</p>
-                </div>
-                <div class="glass-card settings-card p-6 flex flex-col items-center text-center cursor-pointer hover:shadow-glow">
-                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mb-4">
-                        <i class="fas fa-shield-alt text-2xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Security Settings</h3>
-                    <p class="text-gray-400 text-sm">Manage your account security</p>
-                </div>
-                <div class="glass-card settings-card p-6 flex flex-col items-center text-center cursor-pointer hover:shadow-glow">
-                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mb-4">
-                        <i class="fas fa-credit-card text-2xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Payment Methods</h3>
-                    <p class="text-gray-400 text-sm">Add or update payment options</p>
-                </div>
-            </div>
-        </section>
     </div>
     <script>

             </div>
         </section>
+        <!-- Account Settings Panel -->
+        <section class="mb-8">
+            <h2 class="text-2xl font-bold mb-6">Account Settings</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 settings-grid">
+                <div class="glass-card settings-card p-6 flex flex-col items-center text-center cursor-pointer hover:shadow-glow">
+                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mb-4">
+                        <i class="fas fa-user-edit text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Edit Profile</h3>
+                    <p class="text-gray-400 text-sm">Update your personal information</p>
+                </div>
+                <div class="glass-card settings-card p-6 flex flex-col items-center text-center cursor-pointer hover:shadow-glow">
+                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mb-4">
+                        <i class="fas fa-history text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Transaction History</h3>
+                    <p class="text-gray-400 text-sm">View all your deposits and withdrawals</p>
+                </div>
+                <div class="glass-card settings-card p-6 flex flex-col items-center text-center cursor-pointer hover:shadow-glow">
+                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mb-4">
+                        <i class="fas fa-shield-alt text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Security Settings</h3>
+                    <p class="text-gray-400 text-sm">Manage your account security</p>
+                </div>
+                <div class="glass-card settings-card p-6 flex flex-col items-center text-center cursor-pointer hover:shadow-glow">
+                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mb-4">
+                        <i class="fas fa-credit-card text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Payment Methods</h3>
+                    <p class="text-gray-400 text-sm">Add or update payment options</p>
+                </div>
+            </div>
+        </section>
+        <!-- Modern Stat Summary Panel with Horizontal Bars -->
         <section class="glass-card p-6 mb-8">
+            <div class="flex flex-col md:flex-row justify-between gap-6">
+                <!-- Lifetime Stats -->
+                <div class="flex-1">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mr-3">
+                            <i class="fas fa-infinity text-lg"></i>
+                        </div>
+                        <h3 class="text-xl font-bold text-orange-400">Lifetime Stats</h3>
+                    </div>
                     <div class="space-y-4">
                         <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="text-gray-400">Spins Played</span>
+                                <span class="font-bold"><span class="count-up" data-target="12890">0</span></span>
+                            </div>
+                            <div class="w-full bg-gray-700 rounded-full h-2">
+                                <div class="bg-gradient-to-r from-orange-500 to-amber-600 h-2 rounded-full" style="width: 85%"></div>
+                            </div>
                         </div>
                         <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="text-gray-400">Total Purchases</span>
+                                <span class="font-bold">$<span class="count-up" data-target="2450">0</span></span>
+                            </div>
+                            <div class="w-full bg-gray-700 rounded-full h-2">
+                                <div class="bg-gradient-to-r from-orange-500 to-amber-600 h-2 rounded-full" style="width: 65%"></div>
+                            </div>
                         </div>
                         <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="text-gray-400">Time Played</span>
+                                <span class="font-bold"><span class="count-up" data-target="342">0</span> hrs</span>
+                            </div>
+                            <div class="w-full bg-gray-700 rounded-full h-2">
+                                <div class="bg-gradient-to-r from-orange-500 to-amber-600 h-2 rounded-full" style="width: 72%"></div>
+                            </div>
                         </div>
                     </div>
                 </div>
+                <!-- This Month -->
+                <div class="flex-1">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mr-3">
+                            <i class="fas fa-calendar-alt text-lg"></i>
+                        </div>
+                        <h3 class="text-xl font-bold text-orange-400">This Month</h3>
+                    </div>
                     <div class="space-y-4">
                         <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="text-gray-400">Spins</span>
+                                <span class="font-bold"><span class="count-up" data-target="1240">0</span></span>
+                            </div>
+                            <div class="w-full bg-gray-700 rounded-full h-2">
+                                <div class="bg-gradient-to-r from-orange-500 to-amber-600 h-2 rounded-full" style="width: 62%"></div>
+                            </div>
                         </div>
                         <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="text-gray-400">Bonuses Claimed</span>
+                                <span class="font-bold"><span class="count-up" data-target="18">0</span></span>
+                            </div>
+                            <div class="w-full bg-gray-700 rounded-full h-2">
+                                <div class="bg-gradient-to-r from-orange-500 to-amber-600 h-2 rounded-full" style="width: 90%"></div>
+                            </div>
                         </div>
                         <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="text-gray-400">Points Earned</span>
+                                <span class="font-bold"><span class="count-up" data-target="1250">0</span></span>
+                            </div>
+                            <div class="w-full bg-gray-700 rounded-full h-2">
+                                <div class="bg-gradient-to-r from-orange-500 to-amber-600 h-2 rounded-full" style="width: 50%"></div>
+                            </div>
                         </div>
                     </div>
                 </div>
+                <!-- VIP Snapshot -->
+                <div class="flex-1">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mr-3">
+                            <i class="fas fa-crown text-lg"></i>
+                        </div>
+                        <h3 class="text-xl font-bold text-orange-400">VIP Snapshot</h3>
+                    </div>
                     <div class="space-y-4">
                         <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="text-gray-400">Current Tier</span>
+                                <span class="font-bold">NioPrime</span>
+                            </div>
+                            <div class="w-full bg-gray-700 rounded-full h-2">
+                                <div class="bg-gradient-to-r from-orange-500 to-amber-600 h-2 rounded-full" style="width: 75%"></div>
+                            </div>
                         </div>
                         <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="text-gray-400">Cashback %</span>
+                                <span class="font-bold"><span class="count-up" data-target="8">0</span>%</span>
+                            </div>
+                            <div class="w-full bg-gray-700 rounded-full h-2">
+                                <div class="bg-gradient-to-r from-orange-500 to-amber-600 h-2 rounded-full" style="width: 80%"></div>
+                            </div>
                         </div>
                         <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="text-gray-400">Time Remaining</span>
+                                <span class="font-bold">78 days</span>
+                            </div>
+                            <div class="w-full bg-gray-700 rounded-full h-2">
+                                <div class="bg-gradient-to-r from-orange-500 to-amber-600 h-2 rounded-full" style="width: 65%"></div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
     </div>
     <script>

prompts.txt ADDED Viewed

	@@ -0,0 +1,9 @@

+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
+Design a full Player Profile Page UI for a sweepstakes casino platform using a glassmorphism layout with a subtle warm-glow background. This page should reflect a premium, cinematic experience for the user while remaining clean, modular, and mobile-responsive. 🎨 Background Theme: Apply this gradient across the entire page background:  background: linear-gradient(   to bottom,   #000000 0%,   #1a0d00 15%,   #2e1300 32%,   #2e1300 68%,   #1a0d00 85%,   #000000 100% ); 	•	Top and bottom edges are pure black 	•	The center 65% has a warm, rich orange-brown glow 	•	This background creates a subtle “spotlight” effect to center the layout, with no hard radial orb   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
+Design a full Player Profile Page UI for a sweepstakes casino platform using a glassmorphism layout with a subtle warm-glow background. This page should reflect a premium, cinematic experience for the user while remaining clean, modular, and mobile-responsive. 🎨 Background Theme: Apply this gradient across the entire page background:  background: linear-gradient(   to bottom,   #000000 0%,   #1a0d00 15%,   #2e1300 32%,   #2e1300 68%,   #1a0d00 85%,   #000000 100% ); 	•	Top and bottom edges are pure black 	•	The center 65% has a warm, rich orange-brown glow 	•	This background creates a subtle “spotlight” effect to center the layout, with no hard radial orb   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
+Design a full Player Profile Page UI for a sweepstakes casino platform using a glassmorphism layout with a subtle warm-glow background. This page should reflect a premium, cinematic experience for the user while remaining clean, modular, and mobile-responsive. 🎨 Background Theme: Apply this gradient across the entire page background:  background: linear-gradient(   to bottom,   #000000 0%,   #1a0d00 15%,   #2e1300 32%,   #2e1300 68%,   #1a0d00 85%,   #000000 100% ); 	•	Top and bottom edges are pure black 	•	The center 65% has a warm, rich orange-brown glow 	•	This background creates a subtle “spotlight” effect to center the layout, with no hard radial orb   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
+Create a Player Profile Page UI for a sweepstakes casino platform. The page should reflect a high-end, immersive design using a dark-glow theme, custom gradient background, and a selective mix of glassmorphism + floating elements. 🎨 Background Style: Use this exact CSS for the background: background: linear-gradient(   to bottom,   #000000 0%,   #1a0d00 15%,   #2e1300 32%,   #2e1300 68%,   #1a0d00 85%,   #000000 100% ); Creates subtle center glow that spans 65% of screen height Top & bottom edges are pure black Use subtle orb glows (orange/gray) in background for ambient depth 🧱 Layout Structure: 1. 🧊 Hero Section (Top Profile Block) Centered glassmorphic card Left side: Circular player avatar Username: Kevin VIP badge: NioPrime (glowing ring overlay) Right side: Header: "Welcome back, Kevin" (neon orange flicker) Subtext: "Here’s your journey so far" Tier tag: NioPrime glowing label Progress bar: 1,250 / 2,500 pts (orange glow, animated fill) 2. 📊 Stat Summary Panel (Unified Card) One horizontal glass card divided into 3 logical columns (not separate cards) Column 1: Lifetime Spins Played Total Purchases Time Played Column 2: This Month Spins This Month Bonuses Claimed Points Earned Column 3: VIP Snapshot Current Tier Cashback % Time Remaining Use animated number count-ups and subtle border glow for each column 3. 🎯 Active Perks Section (Non-Card Icons Only) Section title: "Your Active Perks" (centered, glowing gold text) Horizontal row of circular icons, no boxes or grids Each icon glows softly when active Dimmed/locked look when inactive Suggested examples: 🪙 5% Cashback 🎁 Daily Bonus 🎮 VIP Games 🔒 Early Access Optional: small label below each icon OR label appears on hover 4. 📜 Recent Activity Log Section title: "Recent Activity" Vertical scrollable glass panel (light blur, thin borders) Timeline-style entries: Aug 16 – Purchased $50 – 5,000 SC Aug 14 – Claimed 50 Free Spins Aug 12 – Completed Daily Mission Add filters as horizontal tabs: All, Purchases, Bonuses, Games 5. 🛠️ Account Settings Panel Display as 4 glowing button-style cards in grid or row: Edit Profile Transaction History Security Settings Manage Payment Methods Glassmorphic mini cards with orange/yellow outlines Glow intensifies on hover 🪄 Animation & Motion Details: Hero title glow pulse every 5s Progress bar: animated fill Stats: numbers count up on page load Perk icons: pulse if active Activity list: smooth fade-in for new entries
+Create a Player Profile Page UI for a sweepstakes casino platform. The page should reflect a high-end, immersive design using a dark-glow theme, custom gradient background, and a selective mix of glassmorphism + floating elements. 🎨 Background Style: Use this exact CSS for the background: background: linear-gradient(   to bottom,   #000000 0%,   #1a0d00 15%,   #2e1300 32%,   #2e1300 68%,   #1a0d00 85%,   #000000 100% ); Creates subtle center glow that spans 65% of screen height Top & bottom edges are pure black Use subtle orb glows (orange/gray) in background for ambient depth 🧱 Layout Structure: 1. 🧊 Hero Section (Top Profile Block) Centered glassmorphic card Left side: Circular player avatar Username: Kevin VIP badge: NioPrime (glowing ring overlay) Right side: Header: "Welcome back, Kevin" (neon orange flicker) Subtext: "Here’s your journey so far" Tier tag: NioPrime glowing label Progress bar: 1,250 / 2,500 pts (orange glow, animated fill) 2. 📊 Stat Summary Panel (Unified Card) One horizontal glass card divided into 3 logical columns (not separate cards) Column 1: Lifetime Spins Played Total Purchases Time Played Column 2: This Month Spins This Month Bonuses Claimed Points Earned Column 3: VIP Snapshot Current Tier Cashback % Time Remaining Use animated number count-ups and subtle border glow for each column 3. 🎯 Active Perks Section (Non-Card Icons Only) Section title: "Your Active Perks" (centered, glowing gold text) Horizontal row of circular icons, no boxes or grids Each icon glows softly when active Dimmed/locked look when inactive Suggested examples: 🪙 5% Cashback 🎁 Daily Bonus 🎮 VIP Games 🔒 Early Access Optional: small label below each icon OR label appears on hover 4. 📜 Recent Activity Log Section title: "Recent Activity" Vertical scrollable glass panel (light blur, thin borders) Timeline-style entries: Aug 16 – Purchased $50 – 5,000 SC Aug 14 – Claimed 50 Free Spins Aug 12 – Completed Daily Mission Add filters as horizontal tabs: All, Purchases, Bonuses, Games 5. 🛠️ Account Settings Panel Display as 4 glowing button-style cards in grid or row: Edit Profile Transaction History Security Settings Manage Payment Methods Glassmorphic mini cards with orange/yellow outlines Glow intensifies on hover 🪄 Animation & Motion Details: Hero title glow pulse every 5s Progress bar: animated fill Stats: numbers count up on page load Perk icons: pulse if active Activity list: smooth fade-in for new entries
+Change the "Stat Summary Panels" to a more modern style
+Move the "Account Settings" section to under the Hero Banner
+Change the "Modern Stat Summary Panel" style to a different design with horizontal bars