Spaces:

Inspireoriginal
/

reelrush-express-3d-interactive-slots

Running

App Files Files Community

Inspireoriginal commited on 28 days ago

Commit

61fc0b8

verified ·

1 Parent(s): 970c359

more graphics and background 3d visuals

Browse files

Files changed (2) hide show

egyptian-slots.html +95 -7
index.html +133 -11

egyptian-slots.html CHANGED Viewed

@@ -8,6 +8,7 @@
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
 <style>
         @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;600&display=swap');
@@ -45,17 +46,90 @@
             transform-style: preserve-3d;
             transition: transform 0.3s ease;
         }
         .symbol-3d:hover {
             transform: translateZ(20px) scale(1.1);
         }
 </style>
 </head>
 <body class="sand-bg">
     <div id="vanta-bg" class="fixed inset-0 z-0"></div>
     <div class="fixed inset-0 bg-black/70 z-0"></div>
-    <header class="egyptian-gradient py-6 px-4 sm:px-6 lg:px-8 sticky top-0 z-50" style="transform: translateZ(50px);">
         <div class="container mx-auto flex items-center justify-between">
             <div class="flex items-center">
                 <div class="mr-3 p-2 bg-yellow-700 rounded-full neuro-effect">
@@ -178,7 +252,7 @@
         </section>
     </main>
     <script>
-        // Initialize Vanta.js background
         VANTA.WAVES({
             el: "#vanta-bg",
             mouseControls: true,
@@ -189,12 +263,26 @@
             scale: 1.00,
             scaleMobile: 1.00,
             color: 0xd4af37,
-            shininess: 50.00,
-            waveHeight: 20.00,
-            waveSpeed: 1.00
         });
-        document.addEventListener('DOMContentLoaded', function() {
             feather.replace();
             // 3D Spin Animation

     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
 <style>
         @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;600&display=swap');
             transform-style: preserve-3d;
             transition: transform 0.3s ease;
         }
         .symbol-3d:hover {
             transform: translateZ(20px) scale(1.1);
         }
+        .egyptian-particles {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -5;
+        }
+        .hieroglyph {
+            position: absolute;
+            color: rgba(212, 175, 55, 0.1);
+            font-size: 20px;
+            animation: hieroglyph-float 15s linear infinite;
+        }
+        @keyframes hieroglyph-float {
+            from { transform: translateY(100vh) rotate(0deg); }
+            to { transform: translateY(-100px) rotate(360deg); }
+        }
+        .sand-storm {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg,
+                transparent 0%,
+                rgba(212, 175, 55, 0.02) 50%,
+                transparent 100%);
+            background-size: 200% 100%;
+            animation: sand-storm-move 8s ease-in-out infinite;
+            z-index: -4;
+            pointer-events: none;
+        }
+        @keyframes sand-storm-move {
+            0% { background-position: -100% 0; }
+            50% { background-position: 100% 0; }
+            100% { background-position: -100% 0; }
+        }
+        .pyramid-grid {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image:
+                linear-gradient(rgba(212, 175, 55, 0.05) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(212, 175, 55, 0.05) 1px, transparent 1px);
+            background-size: 60px 60px;
+            animation: pyramid-grid-move 12s linear infinite;
+            z-index: -6;
+        }
+        @keyframes pyramid-grid-move {
+            0% { transform: translate(0, 0) rotate(0deg); }
+            100% { transform: translate(60px, 60px) rotate(360deg); }
+        }
 </style>
 </head>
 <body class="sand-bg">
+    <!-- Enhanced Egyptian Background Layers -->
     <div id="vanta-bg" class="fixed inset-0 z-0"></div>
+    <div class="pyramid-grid"></div>
+    <div class="sand-storm"></div>
+    <div class="egyptian-particles" id="egyptian-particles"></div>
     <div class="fixed inset-0 bg-black/70 z-0"></div>
+    <!-- Additional Egyptian 3D Elements -->
+    <div class="fixed top-32 right-32 w-28 h-28 hidden lg:block" style="transform-style: preserve-3d; animation: float 15s ease-in-out infinite;">
+        <div class="w-full h-full border-2 border-yellow-600/20" style="transform: rotateX(45deg) rotateY(45deg) translateZ(30px); clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div>
+    </div>
+    <div class="fixed bottom-32 left-32 w-36 h-36 hidden lg:block" style="transform-style: preserve-3d; animation: float 18s ease-in-out infinite; animation-delay: 3s;">
+        <div class="w-full h-full border-2 border-yellow-600/15 rounded-full" style="transform: rotateX(30deg) rotateY(60deg) translateZ(40px);"></div>
+    </div>
+<header class="egyptian-gradient py-6 px-4 sm:px-6 lg:px-8 sticky top-0 z-50" style="transform: translateZ(50px);">
         <div class="container mx-auto flex items-center justify-between">
             <div class="flex items-center">
                 <div class="mr-3 p-2 bg-yellow-700 rounded-full neuro-effect">
         </section>
     </main>
     <script>
+        // Initialize enhanced Vanta.js background
         VANTA.WAVES({
             el: "#vanta-bg",
             mouseControls: true,
             scale: 1.00,
             scaleMobile: 1.00,
             color: 0xd4af37,
+            shininess: 80.00,
+            waveHeight: 30.00,
+            waveSpeed: 1.50
         });
+        // Create hieroglyph particles
+        const egyptianParticles = document.getElementById('egyptian-particles');
+        const hieroglyphs = ['𓂀', '𓃀', '𓄿', '���', '𓆎', '𓇳', '𓈖', '𓉐', '𓊖', '𓏏'];
+        for (let i = 0; i < 20; i++) {
+            const glyph = document.createElement('div');
+            glyph.className = 'hieroglyph';
+            glyph.textContent = hieroglyphs[Math.floor(Math.random() * hieroglyphs.length)];
+            glyph.style.left = Math.random() * 100 + '%';
+            glyph.style.animationDelay = Math.random() * 15 + 's';
+            glyph.style.fontSize = Math.random() * 20 + 15 + 'px';
+            glyph.style.opacity = Math.random() * 0.3 + 0.1;
+            egyptianParticles.appendChild(glyph);
+        }
+document.addEventListener('DOMContentLoaded', function() {
             feather.replace();
             // 3D Spin Animation

index.html CHANGED Viewed

@@ -12,6 +12,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/neurojs@latest/dist/neuro.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
 <style>
         @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;600&display=swap');
@@ -113,20 +114,124 @@
             transform-style: preserve-3d;
             perspective: 1000px;
         }
         .particles div {
             animation: particle-float 10s ease-in-out infinite;
             animation-delay: calc(var(--i) * 0.2s);
             transform-style: preserve-3d;
         }
 </style>
 </head>
 <body>
-    <!-- Enhanced 3D Background -->
     <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-30"></div>
     <div class="vignette"></div>
     <div class="fixed inset-0 -z-20 bg-black/50"></div>
     <div class="particles fixed inset-0 -z-10"></div>
 <!-- Floating Elements -->
     <div class="fixed -top-20 -left-20 w-64 h-64 rounded-full bg-yellow-600/10 blur-xl"></div>
     <div class="fixed -bottom-20 -right-20 w-96 h-96 rounded-full bg-yellow-600/5 blur-xl"></div>
@@ -425,25 +530,42 @@
             size: 1.2,
             magnification: 1.5
         });
-        // Particle system for depth effect
         const particles = [];
-        const particleCount = 50;
         const particleContainer = document.querySelector('.particles');
         for (let i = 0; i < particleCount; i++) {
             const particle = document.createElement('div');
-            particle.className = 'absolute rounded-full bg-yellow-400/10';
-            particle.style.width = Math.random() * 10 + 5 + 'px';
-            particle.style.height = particle.style.width;
             particle.style.left = Math.random() * 100 + '%';
             particle.style.top = Math.random() * 100 + '%';
-            particle.style.transform = `translateZ(${-Math.random() * 1000}px)`;
             particleContainer.appendChild(particle);
             particles.push(particle);
         }
-        // Animate particles for parallax effect
         document.addEventListener('mousemove', (e) => {
             const x = e.clientX / window.innerWidth;
             const y = e.clientY / window.innerHeight;

     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/neurojs@latest/dist/neuro.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
 <style>
         @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;600&display=swap');
             transform-style: preserve-3d;
             perspective: 1000px;
         }
         .particles div {
             animation: particle-float 10s ease-in-out infinite;
             animation-delay: calc(var(--i) * 0.2s);
             transform-style: preserve-3d;
         }
+        .geometric-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -5;
+        }
+        .geometric-shape {
+            position: absolute;
+            border: 1px solid rgba(245, 158, 11, 0.1);
+            animation: rotate 20s linear infinite;
+        }
+        .triangle {
+            width: 0;
+            height: 0;
+            border-left: 50px solid transparent;
+            border-right: 50px solid transparent;
+            border-bottom: 86px solid rgba(245, 158, 11, 0.05);
+        }
+        .hexagon {
+            width: 100px;
+            height: 55px;
+            background: rgba(245, 158, 11, 0.03);
+            position: relative;
+        }
+        .hexagon:before,
+        .hexagon:after {
+            content: "";
+            position: absolute;
+            width: 0;
+            border-left: 50px solid transparent;
+            border-right: 50px solid transparent;
+        }
+        .hexagon:before {
+            bottom: 100%;
+            border-bottom: 28px solid rgba(245, 158, 11, 0.03);
+        }
+        .hexagon:after {
+            top: 100%;
+            border-top: 28px solid rgba(245, 158, 11, 0.03);
+        }
+        @keyframes rotate {
+            from { transform: rotate(0deg) translateZ(0); }
+            to { transform: rotate(360deg) translateZ(100px); }
+        }
+        .holographic {
+            background: linear-gradient(45deg,
+                rgba(245, 158, 11, 0.1) 0%,
+                rgba(59, 130, 246, 0.1) 25%,
+                rgba(168, 85, 247, 0.1) 50%,
+                rgba(236, 72, 153, 0.1) 75%,
+                rgba(245, 158, 11, 0.1) 100%);
+            background-size: 200% 200%;
+            animation: holographic-shift 3s ease infinite;
+        }
+        @keyframes holographic-shift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .cyber-grid {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image:
+                linear-gradient(rgba(245, 158, 11, 0.03) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(245, 158, 11, 0.03) 1px, transparent 1px);
+            background-size: 50px 50px;
+            animation: grid-move 10s linear infinite;
+            z-index: -6;
+        }
+        @keyframes grid-move {
+            0% { transform: translate(0, 0); }
+            100% { transform: translate(50px, 50px); }
+        }
 </style>
 </head>
 <body>
+    <!-- Enhanced 3D Background Layers -->
     <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-30"></div>
+    <div class="cyber-grid"></div>
     <div class="vignette"></div>
     <div class="fixed inset-0 -z-20 bg-black/50"></div>
     <div class="particles fixed inset-0 -z-10"></div>
+    <div class="geometric-bg" id="geometric-bg"></div>
+    <div class="holographic fixed inset-0 opacity-20 pointer-events-none"></div>
+    <!-- Additional 3D Floating Elements -->
+    <div class="fixed top-20 right-20 w-32 h-32 hidden lg:block" style="transform-style: preserve-3d; animation: float 8s ease-in-out infinite;">
+        <div class="geometric-shape triangle" style="transform: rotateX(45deg) rotateY(45deg) translateZ(50px);"></div>
+    </div>
+    <div class="fixed bottom-20 left-20 w-40 h-40 hidden lg:block" style="transform-style: preserve-3d; animation: float 10s ease-in-out infinite; animation-delay: 2s;">
+        <div class="geometric-shape hexagon" style="transform: rotateX(30deg) rotateY(60deg) translateZ(30px);"></div>
+    </div>
+    <div class="fixed top-1/2 left-1/3 w-24 h-24 hidden md:block" style="transform-style: preserve-3d; animation: float 12s ease-in-out infinite; animation-delay: 4s;">
+        <div class="w-full h-full border-2 border-yellow-600/10 rounded-lg" style="transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg) translateZ(40px);"></div>
+    </div>
 <!-- Floating Elements -->
     <div class="fixed -top-20 -left-20 w-64 h-64 rounded-full bg-yellow-600/10 blur-xl"></div>
     <div class="fixed -bottom-20 -right-20 w-96 h-96 rounded-full bg-yellow-600/5 blur-xl"></div>
             size: 1.2,
             magnification: 1.5
         });
+        // Enhanced particle system with multiple types
         const particles = [];
+        const particleCount = 100;
         const particleContainer = document.querySelector('.particles');
+        const particleTypes = ['circle', 'square', 'triangle'];
         for (let i = 0; i < particleCount; i++) {
             const particle = document.createElement('div');
+            const particleType = particleTypes[Math.floor(Math.random() * particleTypes.length)];
+            particle.className = `absolute bg-yellow-400/10`;
+            const size = Math.random() * 15 + 3;
+            particle.style.width = size + 'px';
+            particle.style.height = size + 'px';
             particle.style.left = Math.random() * 100 + '%';
             particle.style.top = Math.random() * 100 + '%';
+            particle.style.transform = `translateZ(${-Math.random() * 1500}px)`;
+            particle.style.setProperty('--i', i);
+            if (particleType === 'circle') {
+                particle.style.borderRadius = '50%';
+            } else if (particleType === 'triangle') {
+                particle.style.width = '0';
+                particle.style.height = '0';
+                particle.style.borderLeft = `${size/2}px solid transparent`;
+                particle.style.borderRight = `${size/2}px solid transparent`;
+                particle.style.borderBottom = `${size}px solid rgba(245, 158, 11, 0.1)`;
+                particle.style.background = 'transparent';
+            } else {
+                particle.style.transform += ` rotate(${Math.random() * 45}deg)`;
+            }
             particleContainer.appendChild(particle);
             particles.push(particle);
         }
+// Animate particles for parallax effect
         document.addEventListener('mousemove', (e) => {
             const x = e.clientX / window.innerWidth;
             const y = e.clientY / window.innerHeight;