|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ReelRush Express - 3D Interactive Slots</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></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.globe.min.js"></script> |
|
|
<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'); |
|
|
|
|
|
:root { |
|
|
--primary: #f59e0b; |
|
|
--primary-dark: #b45309; |
|
|
--primary-darker: #78350f; |
|
|
--bg: #0f172a; |
|
|
--bg-light: #1e293b; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
overflow-x: hidden; |
|
|
background-color: var(--bg); |
|
|
color: #f8fafc; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, var(--primary-darker) 100%); |
|
|
} |
|
|
|
|
|
.slot-machine { |
|
|
background: linear-gradient(145deg, var(--bg-light) 0%, var(--bg) 100%); |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); |
|
|
border: 1px solid rgba(245, 158, 11, 0.1); |
|
|
} |
|
|
|
|
|
.coin-pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
.neuro-effect { |
|
|
border-radius: 16px; |
|
|
background: linear-gradient(145deg, #1e293b, #0f172a); |
|
|
box-shadow: 8px 8px 16px #0a101f, -8px -8px 16px #1a2235; |
|
|
} |
|
|
|
|
|
.neuro-effect-hover:hover { |
|
|
box-shadow: 12px 12px 24px #0a101f, -12px -12px 24px #1a2235; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.reel-item { |
|
|
transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); |
|
|
filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.3)); |
|
|
transform-style: preserve-3d; |
|
|
backface-visibility: hidden; |
|
|
} |
|
|
|
|
|
.reel-item img { |
|
|
transform: translateZ(20px); |
|
|
filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5)); |
|
|
} |
|
|
|
|
|
.reel-highlight { |
|
|
box-shadow: 0 0 30px rgba(245, 158, 11, 0.7), |
|
|
inset 0 0 20px rgba(245, 158, 11, 0.5); |
|
|
border: 2px solid rgba(245, 158, 11, 0.8); |
|
|
} |
|
|
|
|
|
.win-animation { |
|
|
animation: winPulse 0.5s ease-in-out infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes winPulse { |
|
|
from { box-shadow: 0 0 20px rgba(245, 158, 11, 0.5); } |
|
|
to { box-shadow: 0 0 40px rgba(245, 158, 11, 0.9), |
|
|
0 0 60px rgba(245, 158, 11, 0.6); } |
|
|
} |
|
|
.vignette { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
pointer-events: none; |
|
|
background: radial-gradient(ellipse at center, rgba(15,23,42,0) 60%, rgba(15,23,42,0.9) 100%); |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); opacity: 1; } |
|
|
50% { transform: scale(1.1); opacity: 0.8; } |
|
|
100% { transform: scale(1); opacity: 1; } |
|
|
} |
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px) rotate(0deg) translateZ(0); } |
|
|
50% { transform: translateY(-20px) rotate(5deg) translateZ(10px); } |
|
|
100% { transform: translateY(0px) rotate(0deg) translateZ(0); } |
|
|
} |
|
|
|
|
|
@keyframes particle-float { |
|
|
0% { transform: translateY(0) translateX(0) translateZ(0); } |
|
|
50% { transform: translateY(-5px) translateX(5px) translateZ(5px); } |
|
|
100% { transform: translateY(0) translateX(0) translateZ(0); } |
|
|
} |
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<a href="/egyptian-slots.html" class="floating hidden md:block fixed top-1/4 left-10 w-16 h-16 game-portal" style="transform-style: preserve-3d;" data-game="egypt"> |
|
|
<img src="http://static.photos/gold/200x200/1" alt="Egyptian Slots" class="w-full h-full rounded-full neuro-effect portal-image" style="transform: rotateY(15deg) translateZ(30px);"> |
|
|
<div class="portal-overlay absolute inset-0 bg-black/50 rounded-full opacity-0 transition-opacity duration-300 flex items-center justify-center"> |
|
|
<span class="text-xs font-bold text-yellow-300">Egyptian Fortune</span> |
|
|
</div> |
|
|
</a> |
|
|
<a href="/space-slots.html" class="floating hidden md:block fixed top-2/3 right-16 w-20 h-20 game-portal" style="animation-delay: 1.5s; transform-style: preserve-3d;" data-game="space"> |
|
|
<img src="http://static.photos/blue/200x200/2" alt="Space Slots" class="w-full h-full rounded-full neuro-effect portal-image" style="transform: rotateY(-15deg) translateZ(30px);"> |
|
|
<div class="portal-overlay absolute inset-0 bg-black/50 rounded-full opacity-0 transition-opacity duration-300 flex items-center justify-center"> |
|
|
<span class="text-xs font-bold text-blue-300">Cosmic Wins</span> |
|
|
</div> |
|
|
</a> |
|
|
<a href="/pirate-slots.html" class="floating hidden md:block fixed top-1/3 right-1/4 w-14 h-14 game-portal" style="animation-delay: 2.5s; transform-style: preserve-3d;" data-game="pirate"> |
|
|
<img src="http://static.photos/black/200x200/3" alt="Pirate Slots" class="w-full h-full rounded-full neuro-effect portal-image" style="transform: rotateX(10deg) translateZ(30px);"> |
|
|
<div class="portal-overlay absolute inset-0 bg-black/50 rounded-full opacity-0 transition-opacity duration-300 flex items-center justify-center"> |
|
|
<span class="text-xs font-bold text-red-300">Treasure Hunt</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
<header class="hero-gradient py-6 px-4 sm:px-6 lg:px-8 sticky top-0 z-50"> |
|
|
<div class="container mx-auto flex flex-col md:flex-row items-center justify-between"> |
|
|
<div class="flex items-center mb-4 md:mb-0"> |
|
|
<div class="mr-3 p-2 bg-yellow-600 rounded-full neuro-effect"> |
|
|
<i data-feather="zap" class="text-white"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl md:text-3xl font-bold font-serif">REELRUSH EXPRESS</h1> |
|
|
</div> |
|
|
<nav class="flex space-x-6 items-center"> |
|
|
<a href="#" class="hover:text-yellow-300 transition flex items-center"> |
|
|
<i data-feather="sliders" class="mr-1 w-4 h-4"></i> Slots |
|
|
</a> |
|
|
<a href="#" class="hover:text-yellow-300 transition flex items-center"> |
|
|
<i data-feather="gift" class="mr-1 w-4 h-4"></i> Rewards |
|
|
</a> |
|
|
<a href="#" class="hover:text-yellow-300 transition flex items-center"> |
|
|
<i data-feather="users" class="mr-1 w-4 h-4"></i> Community |
|
|
</a> |
|
|
<button class="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-full font-medium transition neuro-effect neuro-effect-hover flex items-center"> |
|
|
<i data-feather="user-plus" class="mr-1 w-4 h-4"></i> Join Now |
|
|
</button> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-20"> |
|
|
|
|
|
<section class="text-center mb-20"> |
|
|
<div class="relative inline-block mb-8"> |
|
|
<h2 class="text-4xl md:text-6xl font-bold mb-6 font-serif relative z-10">3D <span class="text-yellow-400">ReelRush</span></h2> |
|
|
<div class="absolute -bottom-2 left-0 w-full h-3 bg-yellow-600/30 z-0 rounded-full"></div> |
|
|
</div> |
|
|
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto"> |
|
|
Ultra-smooth 3D slots with immersive physics and touch-responsive animations. |
|
|
</p> |
|
|
<div class="flex justify-center gap-4"> |
|
|
<button class="px-8 py-3 bg-yellow-600 hover:bg-yellow-700 rounded-full font-bold transition neuro-effect neuro-effect-hover flex items-center"> |
|
|
<i data-feather="play" class="mr-2"></i> Play Now |
|
|
</button> |
|
|
<button class="px-8 py-3 border-2 border-yellow-600 hover:bg-yellow-600/10 rounded-full font-bold transition neuro-effect neuro-effect-hover"> |
|
|
How It Works |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="mb-20"> |
|
|
<div class="slot-machine neuro-effect rounded-2xl p-8 max-w-4xl mx-auto relative overflow-hidden" style="perspective: 2000px;"> |
|
|
<div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-yellow-600/5 blur-xl"></div> |
|
|
<div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-yellow-600/5 blur-xl"></div> |
|
|
|
|
|
<div class="relative z-10 flex justify-between items-center mb-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="coin-pulse mr-3 neuro-effect"> |
|
|
<img src="http://static.photos/gold/200x200/1" alt="Inspire Coin" class="w-12 h-12 rounded-full"> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-sm text-yellow-400">REDEMPTION TOKENS</div> |
|
|
<div class="text-2xl font-bold">1,250</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="text-sm text-yellow-400">COMMUNITY PROGRESS</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2.5 mb-2 neuro-effect"> |
|
|
<div class="bg-yellow-600 h-2.5 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
<div class="text-xs">45% to next tier</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="slot-reels bg-black/50 rounded-xl p-6 mb-6 neuro-effect relative overflow-hidden" style="transform-style: preserve-3d;"> |
|
|
<div class="absolute inset-0 bg-[url('http://static.photos/abstract/1024x576/3')] opacity-10"></div> |
|
|
<div class="relative z-10"> |
|
|
<div class="flex justify-center space-x-4 mb-6" style="transform-style: preserve-3d; perspective: 2000px;"> |
|
|
<div class="reel bg-gray-800 neuro-effect rounded-lg w-24 h-32 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition" |
|
|
id="reel-1" style="transform-style: preserve-3d; box-shadow: 0 10px 25px rgba(0,0,0,0.5); transform: translateZ(20px);"> |
|
|
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;"> |
|
|
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);"> |
|
|
<img src="http://static.photos/gaming/120x120/1" class="w-20 h-20 object-contain" style="filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); transform: translateZ(40px);"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);"> |
|
|
<img src="http://static.photos/gaming/120x120/2" class="w-20 h-20 object-contain" style="filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); transform: translateZ(40px);"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);"> |
|
|
<img src="http://static.photos/gaming/120x120/3" class="w-20 h-20 object-contain" style="filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); transform: translateZ(40px);"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);"> |
|
|
<img src="http://static.photos/gaming/120x120/4" class="w-20 h-20 object-contain" style="filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); transform: translateZ(40px);"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="reel bg-gray-800 neuro-effect rounded-lg w-24 h-32 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition" |
|
|
id="reel-2" style="transform-style: preserve-3d; box-shadow: 0 10px 25px rgba(0,0,0,0.5); transform: translateZ(20px);"> |
|
|
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;"> |
|
|
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);"> |
|
|
<img src="http://static.photos/gaming/120x120/5" class="w-20 h-20 object-contain" style="filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); transform: translateZ(40px);"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);"> |
|
|
<img src="http://static.photos/gaming/120x120/6" class="w-20 h-20 object-contain" style="filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); transform: translateZ(40px);"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);"> |
|
|
<img src="http://static.photos/gaming/120x120/7" class="w-20 h-20 object-contain" style="filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); transform: translateZ(40px);"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);"> |
|
|
<img src="http://static.photos/gaming/120x120/8" class="w-20 h-20 object-contain" style="filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); transform: translateZ(40px);"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="reel bg-gray-800 neuro-effect rounded-lg w-24 h-32 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition" |
|
|
id="reel-3" style="transform-style: preserve-3d; box-shadow: 0 10px 25px rgba(0,0,0,0.5); transform: translateZ(20px);"> |
|
|
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;"> |
|
|
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);"> |
|
|
<img src="http://static.photos/gaming/120x120/9" class="w-20 h-20 object-contain" style="filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); transform: translateZ(40px);"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);"> |
|
|
<img src="http://static.photos/gaming/120x120/10" class="w-20 h-20 object-contain" style="filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); transform: translateZ(40px);"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);"> |
|
|
<img src="http://static.photos/gaming/120x120/11" class="w-20 h-20 object-contain" style="filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); transform: translateZ(40px);"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);"> |
|
|
<img src="http://static.photos/gaming/120x120/12" class="w-20 h-20 object-contain" style="filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); transform: translateZ(40px);"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-center"> |
|
|
<button id="spin-btn" class="px-12 py-4 bg-yellow-600 hover:bg-yellow-700 rounded-full font-bold text-lg transition neuro-effect neuro-effect-hover flex items-center"> |
|
|
<i data-feather="zap" class="mr-2"></i> SPIN TO REDEEM |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
|
|
<div class="bg-black/30 neuro-effect hover:bg-black/40 rounded-lg p-4 text-center cursor-pointer transition"> |
|
|
<div class="text-yellow-400 mb-1 flex justify-center"> |
|
|
<i data-feather="users" class="w-4 h-4 mr-1"></i> Players |
|
|
</div> |
|
|
<div class="text-xl font-bold">3,842</div> |
|
|
</div> |
|
|
<div class="bg-black/30 neuro-effect hover:bg-black/40 rounded-lg p-4 text-center cursor-pointer transition"> |
|
|
<div class="text-yellow-400 mb-1 flex justify-center"> |
|
|
<i data-feather="database" class="w-4 h-4 mr-1"></i> Pool |
|
|
</div> |
|
|
<div class="text-xl font-bold">1.2M</div> |
|
|
</div> |
|
|
<div class="bg-black/30 neuro-effect hover:bg-black/40 rounded-lg p-4 text-center cursor-pointer transition"> |
|
|
<div class="text-yellow-400 mb-1 flex justify-center"> |
|
|
<i data-feather="award" class="w-4 h-4 mr-1"></i> Redemptions |
|
|
</div> |
|
|
<div class="text-xl font-bold">428</div> |
|
|
</div> |
|
|
<div class="bg-black/30 neuro-effect hover:bg-black/40 rounded-lg p-4 text-center cursor-pointer transition"> |
|
|
<div class="text-yellow-400 mb-1 flex justify-center"> |
|
|
<i data-feather="trending-up" class="w-4 h-4 mr-1"></i> Last Jackpot |
|
|
</div> |
|
|
<div class="text-xl font-bold">50K</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="mb-20"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 font-serif relative"> |
|
|
<span class="relative z-10">Next-Gen <span class="text-yellow-400">Slot Physics</span></span> |
|
|
<div class="absolute -bottom-2 left-1/4 w-1/2 h-2 bg-yellow-600/20 rounded-full z-0"></div> |
|
|
</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="feature-card neuro-effect neuro-effect-hover rounded-xl p-6 transition-all duration-300 transform hover:-translate-y-2 relative"> |
|
|
<div class="w-14 h-14 bg-yellow-600/20 rounded-full flex items-center justify-center mb-4 neuro-effect mx-auto"> |
|
|
<i data-feather="move" class="text-yellow-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-center">Real Physics</h3> |
|
|
<p class="text-gray-300 text-center">Experience true momentum and inertia with our physically-accurate reel mechanics.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card neuro-effect neuro-effect-hover rounded-xl p-6 transition-all duration-300 transform hover:-translate-y-2 relative"> |
|
|
<div class="w-14 h-14 bg-yellow-600/20 rounded-full flex items-center justify-center mb-4 neuro-effect mx-auto"> |
|
|
<i data-feather="touch" class="text-yellow-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-center">Touch Response</h3> |
|
|
<p class="text-gray-300 text-center">Every swipe and tap creates realistic reactions throughout the machine.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card neuro-effect neuro-effect-hover rounded-xl p-6 transition-all duration-300 transform hover:-translate-y-2 relative"> |
|
|
<div class="w-14 h-14 bg-yellow-600/20 rounded-full flex items-center justify-center mb-4 neuro-effect mx-auto"> |
|
|
<i data-feather="eye" class="text-yellow-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-center">4K Visuals</h3> |
|
|
<p class="text-gray-300 text-center">Crisp, detailed graphics with dynamic lighting and reflections.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="text-center relative overflow-hidden"> |
|
|
<div class="absolute -top-20 left-1/4 w-48 h-48 rounded-full bg-yellow-600/10 blur-xl"></div> |
|
|
<div class="absolute bottom-10 right-1/4 w-64 h-64 rounded-full bg-yellow-600/5 blur-xl"></div> |
|
|
|
|
|
<div class="relative z-10"> |
|
|
<h2 class="text-3xl font-bold mb-6 font-serif">Feel the Reels Come Alive</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto"> |
|
|
Touch, tilt and interact with our most immersive slots experience yet. |
|
|
</p> |
|
|
<button class="px-12 py-4 bg-yellow-600 hover:bg-yellow-700 rounded-full font-bold text-lg transition neuro-effect neuro-effect-hover transform hover:scale-105 flex items-center mx-auto"> |
|
|
<i data-feather="play" class="mr-2"></i> Spin Now |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900/80 py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-[url('http://static.photos/abstract/1200x630/5')] opacity-10"></div> |
|
|
<div class="container mx-auto relative z-10"> |
|
|
<div class="grid md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i data-feather="zap" class="mr-2 text-yellow-400"></i> REELRUSH EXPRESS |
|
|
</h3> |
|
|
<p class="text-gray-400">Ultra-responsive 3D slot experience.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4 flex items-center"> |
|
|
<i data-feather="cpu" class="mr-2 w-4 h-4"></i> Network |
|
|
</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">3D Slots</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Live Reels</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Premium Games</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4 flex items-center"> |
|
|
<i data-feather="activity" class="mr-2 w-4 h-4"></i> Pathways |
|
|
</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Jackpots</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Tournaments</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">VIP Club</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4 flex items-center"> |
|
|
<i data-feather="lock" class="mr-2 w-4 h-4"></i> Protocol |
|
|
</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Terms</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Privacy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Responsible Play</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="pt-8 border-t border-gray-800 text-center text-gray-500 text-sm"> |
|
|
© 2023 ReelRush Express. The ultimate 3D slot experience. |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.20, |
|
|
scaleMobile: 1.20, |
|
|
color: 0xf59e0b, |
|
|
backgroundColor: 0x0f172a, |
|
|
size: 1.2, |
|
|
magnification: 1.5 |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
const x = e.clientX / window.innerWidth; |
|
|
const y = e.clientY / window.innerHeight; |
|
|
|
|
|
particles.forEach((particle, i) => { |
|
|
const depth = parseFloat(particle.style.transform.match(/translateZ\((.+?)px\)/)[1]); |
|
|
const moveX = (x - 0.5) * 100 * (1 + depth/1000); |
|
|
const moveY = (y - 0.5) * 100 * (1 + depth/1000); |
|
|
|
|
|
particle.style.transform = `translateZ(${depth}px) translate(${moveX}px, ${moveY}px)`; |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
feather.replace(); |
|
|
|
|
|
document.getElementById('spin-btn').addEventListener('click', function() { |
|
|
const btn = this; |
|
|
const reels = document.querySelectorAll('.reel-items'); |
|
|
|
|
|
|
|
|
btn.disabled = true; |
|
|
btn.innerHTML = '<i data-feather="loader" class="mr-2 animate-spin"></i> PROCESSING...'; |
|
|
feather.replace(); |
|
|
|
|
|
anime({ |
|
|
targets: '.reel', |
|
|
rotateX: [-10, 0], |
|
|
rotateY: [-10, 0], |
|
|
translateZ: [30, 0], |
|
|
duration: 500, |
|
|
easing: 'easeOutQuad' |
|
|
}); |
|
|
|
|
|
anime({ |
|
|
targets: '.slot-machine', |
|
|
translateX: [0, anime.random(-5, 5), 0], |
|
|
translateY: [0, anime.random(-5, 5), 0], |
|
|
duration: 1500, |
|
|
loop: true, |
|
|
easing: 'easeInOutSine' |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.reel').forEach(reel => { |
|
|
reel.addEventListener('touchstart', function(e) { |
|
|
anime({ |
|
|
targets: this, |
|
|
scale: 0.95, |
|
|
duration: 100, |
|
|
easing: 'easeOutQuad' |
|
|
}); |
|
|
}); |
|
|
|
|
|
reel.addEventListener('touchend', function(e) { |
|
|
anime({ |
|
|
targets: this, |
|
|
scale: 1, |
|
|
duration: 300, |
|
|
easing: 'easeOutElastic(1, .5)' |
|
|
}); |
|
|
|
|
|
|
|
|
const ripple = document.createElement('div'); |
|
|
ripple.className = 'absolute w-16 h-16 bg-yellow-400/20 rounded-full pointer-events-none'; |
|
|
ripple.style.left = (e.touches[0].clientX - reel.getBoundingClientRect().left - 32) + 'px'; |
|
|
ripple.style.top = (e.touches[0].clientY - reel.getBoundingClientRect().top - 32) + 'px'; |
|
|
reel.appendChild(ripple); |
|
|
|
|
|
anime({ |
|
|
targets: ripple, |
|
|
scale: 3, |
|
|
opacity: 0, |
|
|
duration: 800, |
|
|
easing: 'easeOutQuad', |
|
|
complete: () => ripple.remove() |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
anime({ |
|
|
targets: '.reel-item', |
|
|
translateY: function(el, i) { |
|
|
return anime.random(-600, 600); |
|
|
}, |
|
|
rotateX: function() { |
|
|
return anime.random(-45, 45); |
|
|
}, |
|
|
rotateZ: function() { |
|
|
return anime.random(-15, 15); |
|
|
}, |
|
|
translateZ: function() { |
|
|
return anime.random(-50, 50); |
|
|
}, |
|
|
scale: function() { |
|
|
return anime.random(0.8, 1.2); |
|
|
}, |
|
|
opacity: function() { |
|
|
return anime.random(0.7, 1); |
|
|
}, |
|
|
duration: 3000, |
|
|
easing: 'easeInOutQuad', |
|
|
complete: function() { |
|
|
|
|
|
anime({ |
|
|
targets: '.reel-item', |
|
|
translateY: 0, |
|
|
translateZ: 0, |
|
|
rotateX: 0, |
|
|
rotateZ: 0, |
|
|
scale: 1, |
|
|
opacity: 1, |
|
|
duration: 1500, |
|
|
delay: anime.stagger(100), |
|
|
easing: 'spring(1, 80, 10, 0)', |
|
|
begin: function() { |
|
|
|
|
|
document.querySelectorAll('.reel').forEach((reel, index) => { |
|
|
if (index % 3 === 0) { |
|
|
reel.classList.add('reel-highlight'); |
|
|
setTimeout(() => { |
|
|
reel.classList.remove('reel-highlight'); |
|
|
}, 2000); |
|
|
} |
|
|
}); |
|
|
}, |
|
|
complete: function() { |
|
|
|
|
|
anime({ |
|
|
targets: '.slot-machine', |
|
|
translateX: 0, |
|
|
translateY: 0, |
|
|
duration: 500 |
|
|
}); |
|
|
|
|
|
|
|
|
const winningSymbols = document.querySelectorAll('.reel-item:nth-child(1)'); |
|
|
winningSymbols.forEach(symbol => { |
|
|
symbol.classList.add('win-animation'); |
|
|
setTimeout(() => { |
|
|
symbol.classList.remove('win-animation'); |
|
|
}, 2000); |
|
|
}); |
|
|
} |
|
|
complete: function() { |
|
|
|
|
|
const sparks = []; |
|
|
for (let i = 0; i < 30; i++) { |
|
|
const spark = document.createElement('div'); |
|
|
spark.className = 'absolute w-2 h-2 bg-yellow-400 rounded-full'; |
|
|
spark.style.left = Math.random() * 100 + '%'; |
|
|
spark.style.top = Math.random() * 100 + '%'; |
|
|
spark.style.transform = 'translateZ(20px)'; |
|
|
document.querySelector('.slot-reels').appendChild(spark); |
|
|
sparks.push(spark); |
|
|
|
|
|
anime({ |
|
|
targets: spark, |
|
|
translateX: anime.random(-100, 100), |
|
|
translateY: anime.random(-100, 100), |
|
|
translateZ: anime.random(0, 100), |
|
|
scale: [1, anime.random(0.5, 3)], |
|
|
opacity: [1, 0], |
|
|
duration: 1500, |
|
|
easing: 'easeOutExpo' |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const confetti = []; |
|
|
for (let i = 0; i < 50; i++) { |
|
|
const piece = document.createElement('div'); |
|
|
piece.className = 'absolute w-4 h-4'; |
|
|
piece.style.background = `hsl(${anime.random(30, 60)}, 100%, 50%)`; |
|
|
piece.style.borderRadius = '50%'; |
|
|
piece.style.left = '50%'; |
|
|
piece.style.top = '50%'; |
|
|
piece.style.transform = 'translateZ(0)'; |
|
|
document.querySelector('.slot-reels').appendChild(piece); |
|
|
confetti.push(piece); |
|
|
|
|
|
anime({ |
|
|
targets: piece, |
|
|
translateX: anime.random(-200, 200), |
|
|
translateY: anime.random(-200, 200), |
|
|
translateZ: anime.random(-100, 100), |
|
|
rotateX: anime.random(0, 360), |
|
|
rotateY: anime.random(0, 360), |
|
|
scale: [0.5, 1.5], |
|
|
opacity: [1, 0], |
|
|
duration: 2000, |
|
|
easing: 'easeOutExpo' |
|
|
}); |
|
|
} |
|
|
|
|
|
setTimeout(() => { |
|
|
btn.disabled = false; |
|
|
btn.innerHTML = '<i data-feather="zap" class="mr-2"></i> SPIN TO REDEEM'; |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
sparks.forEach(spark => { |
|
|
setTimeout(() => { |
|
|
if (spark.parentNode) { |
|
|
spark.parentNode.removeChild(spark); |
|
|
} |
|
|
}, 1000); |
|
|
}); |
|
|
}, 1000); |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
anime({ |
|
|
targets: '.coin-pulse', |
|
|
scale: [1, 1.3, 1], |
|
|
duration: 800, |
|
|
easing: 'easeInOutQuad' |
|
|
}); |
|
|
|
|
|
anime({ |
|
|
targets: document.querySelectorAll('.reel'), |
|
|
translateY: [0, -15, 0], |
|
|
translateZ: [0, 20, 0], |
|
|
rotateX: [0, anime.random(-5, 5), 0], |
|
|
rotateY: [0, anime.random(-3, 3), 0], |
|
|
duration: 150, |
|
|
delay: anime.stagger(50), |
|
|
easing: 'easeOutElastic(1, .8)' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.reel').forEach(reel => { |
|
|
reel.addEventListener('mouseenter', function() { |
|
|
anime({ |
|
|
targets: this, |
|
|
scale: 1.1, |
|
|
translateZ: 25, |
|
|
rotateX: -5, |
|
|
rotateY: 5, |
|
|
duration: 300, |
|
|
easing: 'easeOutQuad' |
|
|
}); |
|
|
}); |
|
|
reel.addEventListener('mouseleave', function() { |
|
|
anime({ |
|
|
targets: this, |
|
|
scale: 1, |
|
|
translateZ: 0, |
|
|
rotateX: 0, |
|
|
rotateY: 0, |
|
|
duration: 300, |
|
|
easing: 'easeOutQuad' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
reel.addEventListener('touchstart', function(e) { |
|
|
anime({ |
|
|
targets: this, |
|
|
scale: 1.1, |
|
|
translateZ: 30, |
|
|
duration: 150, |
|
|
easing: 'easeOutQuad' |
|
|
}); |
|
|
|
|
|
|
|
|
const ripple = document.createElement('div'); |
|
|
ripple.className = 'absolute w-8 h-8 bg-yellow-400/30 rounded-full pointer-events-none'; |
|
|
ripple.style.left = (e.touches[0].clientX - this.getBoundingClientRect().left - 16) + 'px'; |
|
|
ripple.style.top = (e.touches[0].clientY - this.getBoundingClientRect().top - 16) + 'px'; |
|
|
this.appendChild(ripple); |
|
|
|
|
|
anime({ |
|
|
targets: ripple, |
|
|
scale: 4, |
|
|
opacity: 0, |
|
|
duration: 600, |
|
|
easing: 'easeOutQuad', |
|
|
complete: function() { |
|
|
if (ripple.parentNode) { |
|
|
ripple.parentNode.removeChild(ripple); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
reel.addEventListener('touchend', function() { |
|
|
anime({ |
|
|
targets: this, |
|
|
scale: 1, |
|
|
translateZ: 0, |
|
|
duration: 300, |
|
|
easing: 'easeOutQuad' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
anime({ |
|
|
targets: '.floating', |
|
|
translateY: [0, -50, 0], |
|
|
translateX: [0, 30, 0], |
|
|
rotateY: [0, 360, 0], |
|
|
rotateX: [0, 45, 0], |
|
|
translateZ: [0, 100, 0], |
|
|
scale: [1, 1.2, 1], |
|
|
duration: 8000, |
|
|
easing: 'easeInOutSine', |
|
|
loop: true, |
|
|
delay: anime.stagger(1000) |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.game-portal').forEach(portal => { |
|
|
portal.addEventListener('mouseenter', function() { |
|
|
anime({ |
|
|
targets: this.querySelector('.portal-image'), |
|
|
scale: 1.3, |
|
|
rotateY: '+=180', |
|
|
translateZ: 50, |
|
|
duration: 800, |
|
|
easing: 'easeOutQuad' |
|
|
}); |
|
|
this.querySelector('.portal-overlay').style.opacity = '1'; |
|
|
}); |
|
|
portal.addEventListener('mouseleave', function() { |
|
|
anime({ |
|
|
targets: this.querySelector('.portal-image'), |
|
|
scale: 1, |
|
|
translateZ: 0, |
|
|
duration: 300, |
|
|
easing: 'easeOutQuad' |
|
|
}); |
|
|
this.querySelector('.portal-overlay').style.opacity = '0'; |
|
|
}); |
|
|
portal.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
const game = this.getAttribute('data-game'); |
|
|
|
|
|
|
|
|
anime({ |
|
|
targets: this, |
|
|
scale: [1, 1.5], |
|
|
opacity: [1, 0], |
|
|
rotateY: '+=360', |
|
|
duration: 800, |
|
|
easing: 'easeInOutQuad', |
|
|
complete: function() { |
|
|
window.location.href = portal.href; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.reel').forEach(reel => { |
|
|
reel.addEventListener('mouseenter', function() { |
|
|
anime({ |
|
|
targets: this, |
|
|
scale: 1.15, |
|
|
translateZ: 40, |
|
|
rotateX: -8, |
|
|
rotateY: 8, |
|
|
duration: 300, |
|
|
easing: 'easeOutQuad' |
|
|
}); |
|
|
}); |
|
|
reel.addEventListener('mouseleave', function() { |
|
|
anime({ |
|
|
targets: this, |
|
|
scale: 1, |
|
|
translateZ: 0, |
|
|
rotateX: 0, |
|
|
rotateY: 0, |
|
|
duration: 300, |
|
|
easing: 'easeOutQuad' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
const x = e.clientX / window.innerWidth; |
|
|
const y = e.clientY / window.innerHeight; |
|
|
|
|
|
anime({ |
|
|
targets: '.feature-card', |
|
|
rotateY: (x - 0.5) * 15, |
|
|
rotateX: -(y - 0.5) * 15, |
|
|
translateZ: 30, |
|
|
easing: 'easeOutQuad', |
|
|
duration: 500 |
|
|
}); |
|
|
|
|
|
anime({ |
|
|
targets: '.slot-machine', |
|
|
rotateY: (x - 0.5) * 5, |
|
|
rotateX: -(y - 0.5) * 5, |
|
|
translateZ: 20, |
|
|
easing: 'easeOutQuad', |
|
|
duration: 1000 |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.particles div').forEach((particle, i) => { |
|
|
const speed = 0.05; |
|
|
const xPos = (x - 0.5) * i * speed; |
|
|
const yPos = (y - 0.5) * i * speed; |
|
|
particle.style.transform = `translate(${xPos}px, ${yPos}px) translateZ(${-i * 10}px)`; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('touchmove', (e) => { |
|
|
const touch = e.touches[0]; |
|
|
const x = touch.clientX / window.innerWidth; |
|
|
const y = touch.clientY / window.innerHeight; |
|
|
|
|
|
anime({ |
|
|
targets: '.feature-card', |
|
|
rotateY: (x - 0.5) * 10, |
|
|
rotateX: -(y - 0.5) * 10, |
|
|
translateZ: 20, |
|
|
easing: 'easeOutQuad', |
|
|
duration: 300 |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
|
|
|
|
|
|
<div id="touch-feedback" class="fixed inset-0 pointer-events-none z-50"></div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('touchstart', (e) => { |
|
|
for (let i = 0; i < e.touches.length; i++) { |
|
|
const touch = e.touches[i]; |
|
|
const feedback = document.createElement('div'); |
|
|
feedback.className = 'absolute w-6 h-6 bg-yellow-400/50 rounded-full pointer-events-none'; |
|
|
feedback.style.left = (touch.clientX - 12) + 'px'; |
|
|
feedback.style.top = (touch.clientY - 12) + 'px'; |
|
|
feedback.id = 'touch-' + touch.identifier; |
|
|
document.getElementById('touch-feedback').appendChild(feedback); |
|
|
|
|
|
anime({ |
|
|
targets: feedback, |
|
|
scale: 3, |
|
|
opacity: 0, |
|
|
duration: 800, |
|
|
easing: 'easeOutQuad', |
|
|
complete: function() { |
|
|
if (feedback.parentNode) { |
|
|
feedback.parentNode.removeChild(feedback); |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.addEventListener('touchend', (e) => { |
|
|
|
|
|
const feedbacks = document.querySelectorAll('#touch-feedback div'); |
|
|
feedbacks.forEach(fb => { |
|
|
anime({ |
|
|
targets: fb, |
|
|
scale: 3, |
|
|
opacity: 0, |
|
|
duration: 300, |
|
|
complete: function() { |
|
|
if (fb.parentNode) { |
|
|
fb.parentNode.removeChild(fb); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
