Spaces:

ProjectGenesis
/

wallet-ui-4

Running

App Files Files Community

ProjectGenesis commited on Oct 2, 2025

Commit

30438e8

verified ·

1 Parent(s): 4802619

Replace the "View Withdrawal History" Button to a CTA button that prompts "KYC Status: Unverified"

Browse files

Files changed (1) hide show

index.html +13 -72

index.html CHANGED Viewed

@@ -15,56 +15,24 @@
             scroll-behavior: smooth;
         }
         body {
-            background: #0a0a0a;
             color: #F5F5F5;
             font-family: 'Poppins', sans-serif;
             min-height: 100vh;
             position: relative;
-            overflow: hidden;
         }
         body::before {
             content: "";
             position: absolute;
             top: 0;
             left: 0;
-            width: 100%;
-            height: 100%;
-            background: radial-gradient(circle at 70% 30%, rgba(255, 106, 0, 0.1) 0%, transparent 40%);
-            z-index: -2;
-        }
-        .floating-particles {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
             z-index: -1;
-            overflow: hidden;
-        }
-        .particle {
-            position: absolute;
-            background: rgba(255, 255, 255, 0.8);
-            border-radius: 50%;
-            filter: blur(1px);
-            animation: float linear infinite;
-        }
-        @keyframes float {
-            0% {
-                transform: translateY(0) translateX(0);
-                opacity: 0;
-            }
-            10% {
-                opacity: 1;
-            }
-            90% {
-                opacity: 1;
-            }
-            100% {
-                transform: translateY(-100vh) translateX(100px);
-                opacity: 0;
-            }
         }
-.glass-card {
             background: rgba(10, 10, 10, 0.7);
             border: 1px solid rgba(255, 106, 0, 0.15);
             backdrop-filter: blur(12px);
@@ -256,9 +224,8 @@ animation: border-spin 3s linear infinite;
         }
     </style>
 </head>
-    <body class="min-h-screen relative overflow-x-hidden">
-        <div class="floating-particles" id="particles"></div>
-<header class="relative w-full overflow-hidden" id="page-header">
         <div class="absolute inset-0 bg-gradient-to-b from-[#1a0d00] to-[#0a0a0a] opacity-90"></div>
         <div class="relative max-w-7xl mx-auto px-4 md:px-8 py-12 md:py-16">
 <div class="flex flex-col items-center text-center">
@@ -367,7 +334,7 @@ animation: border-spin 3s linear infinite;
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                     <div class="bg-[rgba(60,226,122,0.08)] border border-[rgba(60,226,122,0.15)] p-5 rounded-xl">
-                        <div class="text-sm text-[#B8B8B8]">Redeemable Purchase SC</div>
                         <div id="redeemable-wsc" class="text-2xl font-bold font-['Orbitron'] big-number text-[#3CE27A]">6.64</div>
                     </div>
@@ -384,11 +351,10 @@ animation: border-spin 3s linear infinite;
                 <div class="flex flex-wrap gap-3">
                     <button class="pill-button pill-button-secondary bg-[rgba(0,228,255,0.15)]">Redeem Balance</button>
                     <button id="btn-convert" class="pill-button pill-button-primary"><span class="text-white">Payment Method</span></button>
-<button class="flex items-center gap-2 px-4 py-2 rounded-full border border-[rgba(255,255,255,0.15)] hover:border-[#FF6A00] transition">
-                        <span>View Withdrawal History</span>
-                        <i data-feather="chevron-right" class="w-4 h-4"></i>
                     </button>
-                </div>
                 <div class="mt-6 text-sm">
                     <div class="flex items-center gap-2 mb-2 text-[#FEC84B]">
@@ -510,6 +476,7 @@ animation: border-spin 3s linear infinite;
     </div>
     <script>
         // Initialize libraries
         document.addEventListener('DOMContentLoaded', function() {
@@ -528,32 +495,6 @@ animation: border-spin 3s linear infinite;
                     this.setAttribute('aria-expanded', !expanded);
                 });
             });
-            // Create floating particles
-            const particlesContainer = document.getElementById('particles');
-            const particleCount = 50;
-            for (let i = 0; i < particleCount; i++) {
-                const particle = document.createElement('div');
-                particle.classList.add('particle');
-                const size = Math.random() * 3 + 1;
-                const posX = Math.random() * 100;
-                const posY = Math.random() * 100 + 100;
-                const duration = Math.random() * 20 + 10;
-                const delay = Math.random() * 10;
-                const opacity = Math.random() * 0.5 + 0.1;
-                particle.style.width = `${size}px`;
-                particle.style.height = `${size}px`;
-                particle.style.left = `${posX}%`;
-                particle.style.top = `${posY}%`;
-                particle.style.animationDuration = `${duration}s`;
-                particle.style.animationDelay = `-${delay}s`;
-                particle.style.opacity = opacity;
-                particlesContainer.appendChild(particle);
-            }
         });
     </script>
 </body>

             scroll-behavior: smooth;
         }
         body {
+            background: radial-gradient(circle at center, #1a0d00 0%, #0a0a0a 100%);
             color: #F5F5F5;
             font-family: 'Poppins', sans-serif;
             min-height: 100vh;
             position: relative;
         }
         body::before {
             content: "";
             position: absolute;
             top: 0;
             left: 0;
+            right: 0;
+            bottom: 0;
+            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-6 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zM40 18c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM9 32c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' opacity='0.1' fill='%23ffffff' fill-rule='evenodd'/%3E%3C/svg%3E");
+            opacity: 0.1;
             z-index: -1;
         }
+        .glass-card {
             background: rgba(10, 10, 10, 0.7);
             border: 1px solid rgba(255, 106, 0, 0.15);
             backdrop-filter: blur(12px);
         }
     </style>
 </head>
+<body class="min-h-screen relative overflow-x-hidden">
+    <header class="relative w-full overflow-hidden" id="page-header">
         <div class="absolute inset-0 bg-gradient-to-b from-[#1a0d00] to-[#0a0a0a] opacity-90"></div>
         <div class="relative max-w-7xl mx-auto px-4 md:px-8 py-12 md:py-16">
 <div class="flex flex-col items-center text-center">
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                     <div class="bg-[rgba(60,226,122,0.08)] border border-[rgba(60,226,122,0.15)] p-5 rounded-xl">
+                        <div class="text-sm text-[#B8B8B8]">Redeemable Sweeps Coins</div>
                         <div id="redeemable-wsc" class="text-2xl font-bold font-['Orbitron'] big-number text-[#3CE27A]">6.64</div>
                     </div>
                 <div class="flex flex-wrap gap-3">
                     <button class="pill-button pill-button-secondary bg-[rgba(0,228,255,0.15)]">Redeem Balance</button>
                     <button id="btn-convert" class="pill-button pill-button-primary"><span class="text-white">Payment Method</span></button>
+                    <button class="pill-button pill-button-secondary bg-[rgba(255,0,0,0.15)] hover:bg-[rgba(255,0,0,0.2)]">
+                        <span class="text-[#FF4D4D]">KYC Status: Unverified</span>
                     </button>
+</div>
                 <div class="mt-6 text-sm">
                     <div class="flex items-center gap-2 mb-2 text-[#FEC84B]">
     </div>
     <script>
         // Initialize libraries
         document.addEventListener('DOMContentLoaded', function() {
                     this.setAttribute('aria-expanded', !expanded);
                 });
             });
         });
     </script>
 </body>