Build it in a real amazing digital effects off visuals - Follow Up Deployment

index.html

@@ -7,6 +7,45 @@
     <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">
     <style>
+        /* Futuristic animated background */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(45deg, 
+                rgba(11, 15, 25, 0.9) 0%, 
+                rgba(30, 41, 59, 0.9) 50%, 
+                rgba(15, 23, 42, 0.9) 100%);
+            z-index: -2;
+        }
+        
+        body::after {
+            content: '';
+            position: fixed;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: 
+                radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.1) 0%, transparent 20%),
+                radial-gradient(circle at 70% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 20%),
+                linear-gradient(45deg, 
+                    rgba(59, 130, 246, 0.05) 0%, 
+                    rgba(124, 58, 237, 0.05) 50%, 
+                    rgba(220, 38, 38, 0.05) 100%);
+            animation: gradientPulse 15s ease infinite;
+            z-index: -1;
+        }
+        
+        @keyframes gradientPulse {
+            0% { transform: rotate(0deg); opacity: 0.7; }
+            50% { transform: rotate(180deg); opacity: 1; }
+            100% { transform: rotate(360deg); opacity: 0.7; }
+        }
+        
         /* Financial ticker animation */
         @keyframes marquee {
             0% { transform: translateX(0); }
@@ -45,9 +84,31 @@
         }
         .price-up {
             animation: pulseGreen 1.5s infinite;
+            box-shadow: 0 0 10px rgba(74, 222, 128, 0.7);
+            text-shadow: 0 0 5px rgba(74, 222, 128, 0.7);
         }
         .price-down {
             animation: pulseRed 1.5s infinite;
+            box-shadow: 0 0 10px rgba(248, 113, 113, 0.7);
+            text-shadow: 0 0 5px rgba(248, 113, 113, 0.7);
+        }
+        .glow-effect {
+            position: relative;
+        }
+        .glow-effect::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: inherit;
+            box-shadow: 0 0 15px currentColor;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .glow-effect:hover::after {
+            opacity: 0.7;
         }
         
         /* Support button animations */
@@ -367,7 +428,8 @@
                     </div>
                     
                     <!-- Enhanced Chart Section -->
-                    <div class="bg-slate-700/50 rounded-lg h-96 flex flex-col items-center justify-center border-2 border-blue-500/30 relative">
+                    <div class="bg-slate-700/20 rounded-lg h-96 flex flex-col items-center justify-center border-2 border-blue-500/30 relative overflow-hidden">
+                        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIiBvcGFjaXR5PSIwLjEiPgogIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICA8cGF0aCBkPSJNMzAwIDBjLTE2NS45NjUgMC0zMDAgMTM0LjAzNS0zMDAgMzAwczEzNC4wMzUgMzAwIDMwMCAzMDAgMzAwLTEzNC4wMzUgMzAwLTMwMFM0NjUuOTY1IDAgMzAwIDB6IiBzdHJva2U9IiMzODJkN2YiIHN0cm9rZS13aWR0aD0iMSIvPgogICAgPHBhdGggZD0iTTMwMCAxMDBjLTExMC40NjEgMC0yMDAgODkuNTM5LTIwMCAyMDBzODkuNTM5IDIwMCAyMDAgMjAwIDIwMC04OS41MzkgMjAwLTIwMFM0MTAuNDYxIDEwMCAzMDAgMTAweiIgc3Ryb2tlPSIjMzg4ZTk1IiBzdHJva2Utd2lkdGg9IjEiLz4KICAgIDxwYXRoIGQ9Ik0zMDAgMjAwYy01NS4yMjggMC0xMDAgNDQuNzcyLTEwMCAxMDBzNDQuNzcyIDEwMCAxMDAgMTAwIDEwMC00NC43NzIgMTAwLTEwMFMzNTUuMjI4IDIwMCAzMDAgMjAweiIgc3Ryb2tlPSIjOGI1Y2Y5IiBzdHJva2Utd2lkdGg9IjEiLz4KICA8L2c+Cjwvc3ZnPg==')] bg-center [mask-image:linear-gradient(to_bottom,white_10%,transparent_70%)]"></div>
                         <div class="absolute top-0 left-0 right-0 bg-gradient-to-r from-blue-900/30 to-purple-900/30 py-2 px-4 flex justify-between items-center">
                             <span class="text-sm font-medium text-blue-300"><i class="fas fa-circle text-xs mr-2 animate-pulse text-green-400"></i> LIVE TRADING CHART</span>
                             <div class="flex space-x-2">
@@ -516,8 +578,10 @@
         </div>
     </div>
 
-    <!-- Floating Action Buttons -->
+    <!-- Floating Action Buttons with Particle Effects -->
     <div class="fixed bottom-24 right-6 z-50 flex flex-col space-y-3">
+        <div class="particles absolute inset-0 pointer-events-none" id="particles-1"></div>
+        <div class="particles absolute inset-0 pointer-events-none" id="particles-2"></div>
         <button class="p-3 bg-gradient-to-r from-blue-600 to-blue-500 rounded-full shadow-xl hover:shadow-2xl transition-all duration-300 group">
             <i class="fas fa-bolt text-xl text-white"></i>
             <div class="absolute right-16 bottom-0 bg-slate-800 px-4 py-2 rounded-lg shadow-lg hidden group-hover:block whitespace-nowrap">
@@ -623,5 +687,47 @@
             alert('Our support team will contact you shortly!\nEmail: support@cryptotradepro.com\nPhone: +1 (800) 123-4567');
         });
     </script>
+    
+    <script>
+        // Particle effects for floating buttons
+        function createParticles(containerId, color) {
+            const container = document.getElementById(containerId);
+            const particleCount = 15;
+            
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle absolute rounded-full';
+                particle.style.width = `${Math.random() * 4 + 2}px`;
+                particle.style.height = particle.style.width;
+                particle.style.backgroundColor = color;
+                particle.style.opacity = Math.random() * 0.5 + 0.1;
+                
+                // Random starting position
+                const posX = Math.random() * 100;
+                const posY = Math.random() * 100;
+                particle.style.left = `${posX}%`;
+                particle.style.top = `${posY}%`;
+                
+                // Animation
+                const duration = Math.random() * 10 + 5;
+                const delay = Math.random() * 5;
+                particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
+                
+                container.appendChild(particle);
+            }
+        }
+        
+        // Initialize particles
+        createParticles('particles-1', '#3b82f6');
+        createParticles('particles-2', '#8b5cf6');
+    </script>
+    
+    <style>
+        @keyframes float {
+            0% { transform: translate(0, 0) rotate(0deg); opacity: 0.1; }
+            50% { transform: translate(calc((Math.random() - 0.5) * 50px), calc((Math.random() - 0.5) * 50px)) rotate(180deg); opacity: 0.7; }
+            100% { transform: translate(0, 0) rotate(360deg); opacity: 0.1; }
+        }
+    </style>
 <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=TDN-M/cryptapp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>