|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Space Slots | ReelRush Express</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<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.net.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: #3b82f6; |
|
|
--primary-dark: #1d4ed8; |
|
|
--bg: #0b0c1a; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: var(--bg); |
|
|
color: #f8fafc; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.space-gradient { |
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); |
|
|
} |
|
|
|
|
|
.cosmic-bg { |
|
|
background-image: url('http://static.photos/space/1200x630/1'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
background-blend-mode: overlay; |
|
|
transform-style: preserve-3d; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.planet-3d { |
|
|
transform-style: preserve-3d; |
|
|
animation: float 8s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.symbol-3d { |
|
|
transform-style: preserve-3d; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.symbol-3d:hover { |
|
|
transform: translateZ(25px) scale(1.15); |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px) translateZ(0); } |
|
|
50% { transform: translateY(-20px) translateZ(20px); } |
|
|
100% { transform: translateY(0px) translateZ(0); } |
|
|
} |
|
|
|
|
|
.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); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="cosmic-bg"> |
|
|
<div id="vanta-bg" class="fixed inset-0 z-0"></div> |
|
|
<div class="fixed inset-0 bg-black/80 z-0"></div> |
|
|
|
|
|
<header class="space-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-blue-700 rounded-full neuro-effect"> |
|
|
<i data-feather="globe" class="text-white"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl md:text-3xl font-bold font-serif">COSMIC WINS</h1> |
|
|
</div> |
|
|
<a href="/" class="px-4 py-2 bg-blue-700 hover:bg-blue-800 rounded-full font-medium transition neuro-effect flex items-center"> |
|
|
<i data-feather="arrow-left" class="mr-1 w-4 h-4"></i> Back to Main |
|
|
</a> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-20"> |
|
|
|
|
|
<section class="mb-16 text-center"> |
|
|
<div class="planet-3d mx-auto w-64 h-64 mb-8 relative"> |
|
|
<div class="absolute inset-0 bg-blue-500/20 rounded-full animate-pulse"></div> |
|
|
<div class="absolute inset-4 bg-blue-600/30 rounded-full animate-pulse" style="animation-delay: 0.5s;"></div> |
|
|
<div class="absolute inset-8 bg-blue-700/40 rounded-full animate-pulse" style="animation-delay: 1s;"></div> |
|
|
</div> |
|
|
<h2 class="text-4xl font-bold mb-4 font-serif">Journey Through the Cosmos</h2> |
|
|
<p class="text-xl max-w-2xl mx-auto">Navigate asteroid fields and discover alien treasures</p> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<div class="bg-black/50 neuro-effect rounded-2xl p-8 max-w-4xl mx-auto relative overflow-hidden" style="transform-style: preserve-3d; perspective: 2000px;"> |
|
|
<div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-blue-600/5 blur-xl"></div> |
|
|
<div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-blue-600/5 blur-xl"></div> |
|
|
|
|
|
<div class="relative z-10"> |
|
|
<div class="flex justify-center space-x-6 mb-8" style="transform-style: preserve-3d;"> |
|
|
|
|
|
<div class="reel bg-gray-800 neuro-effect rounded-lg w-28 h-40 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition" |
|
|
style="transform-style: preserve-3d; box-shadow: 0 15px 30px rgba(0,0,0,0.6); transform: translateZ(25px);"> |
|
|
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;"> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/blue/120x120/1" class="w-24 h-24 object-contain symbol-3d" alt="Rocket"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/blue/120x120/2" class="w-24 h-24 object-contain symbol-3d" alt="Asteroid"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/blue/120x120/3" class="w-24 h-24 object-contain symbol-3d" alt="Satellite"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="reel bg-gray-800 neuro-effect rounded-lg w-28 h-40 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition" |
|
|
style="transform-style: preserve-3d; box-shadow: 0 15px 30px rgba(0,0,0,0.6); transform: translateZ(25px);"> |
|
|
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;"> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/blue/120x120/4" class="w-24 h-24 object-contain symbol-3d" alt="Alien"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/blue/120x120/5" class="w-24 h-24 object-contain symbol-3d" alt="Spaceship"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/blue/120x120/6" class="w-24 h-24 object-contain symbol-3d" alt="Planet"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="reel bg-gray-800 neuro-effect rounded-lg w-28 h-40 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition" |
|
|
style="transform-style: preserve-3d; box-shadow: 0 15px 30px rgba(0,0,0,0.6); transform: translateZ(25px);"> |
|
|
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;"> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/blue/120x120/7" class="w-24 h-24 object-contain symbol-3d" alt="Black Hole"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/blue/120x120/8" class="w-24 h-24 object-contain symbol-3d" alt="Comet"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/blue/120x120/9" class="w-24 h-24 object-contain symbol-3d" alt="Galaxy"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center"> |
|
|
<button id="spin-btn" class="px-12 py-4 bg-blue-600 hover:bg-blue-700 rounded-full font-bold text-lg transition neuro-effect neuro-effect-hover flex items-center transform hover:scale-105"> |
|
|
<i data-feather="play" class="mr-2"></i> LAUNCH REELS |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 font-serif">Celestial Rewards</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-3 relative" style="transform-style: preserve-3d;"> |
|
|
<div class="w-16 h-16 bg-blue-600/20 rounded-full flex items-center justify-center mb-4 neuro-effect mx-auto" style="transform: translateZ(20px);"> |
|
|
<i data-feather="star" class="text-blue-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-center">Nebula Bonus</h3> |
|
|
<p class="text-gray-300 text-center">Spin through colorful nebulae for bonus multipliers</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card neuro-effect neuro-effect-hover rounded-xl p-6 transition-all duration-300 transform hover:-translate-y-3 relative" style="transform-style: preserve-3d;"> |
|
|
<div class="w-16 h-16 bg-blue-600/20 rounded-full flex items-center justify-center mb-4 neuro-effect mx-auto" style="transform: translateZ(20px);"> |
|
|
<i data-feather="zap" class="text-blue-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-center">Solar Flare</h3> |
|
|
<p class="text-gray-300 text-center">Electrifying wins with cosmic energy surges</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card neuro-effect neuro-effect-hover rounded-xl p-6 transition-all duration-300 transform hover:-translate-y-3 relative" style="transform-style: preserve-3d;"> |
|
|
<div class="w-16 h-16 bg-blue-600/20 rounded-full flex items-center justify-center mb-4 neuro-effect mx-auto" style="transform: translateZ(20px);"> |
|
|
<i data-feather="globe" class="text-blue-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-center">Galactic Jackpot</h3> |
|
|
<p class="text-gray-300 text-center">Universal alignment for massive payouts</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<footer class="bg-gray-900/80 py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden"> |
|
|
<div class="container mx-auto relative z-10"> |
|
|
<div class="text-center text-gray-500 text-sm"> |
|
|
© 2023 ReelRush Express. Cosmic slot adventures. |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.NET({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x3b82f6, |
|
|
backgroundColor: 0x0b0c1a, |
|
|
points: 15.00, |
|
|
maxDistance: 25.00, |
|
|
spacing: 20.00 |
|
|
}); |
|
|
|
|
|
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> TRAVELING...'; |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
reels.forEach((reel, index) => { |
|
|
anime({ |
|
|
targets: reel, |
|
|
translateY: [0, anime.random(-800, -400)], |
|
|
translateZ: [0, anime.random(50, 100)], |
|
|
rotateX: [0, anime.random(360, 720)], |
|
|
duration: anime.random(2000, 3000), |
|
|
delay: index * 200, |
|
|
easing: 'easeInOutQuad', |
|
|
complete: function() { |
|
|
|
|
|
anime({ |
|
|
targets: reel, |
|
|
translateY: 0, |
|
|
translateZ: 0, |
|
|
rotateX: 0, |
|
|
duration: 1000, |
|
|
easing: 'spring(1, 80, 10, 0)' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
btn.disabled = false; |
|
|
btn.innerHTML = '<i data-feather="play" class="mr-2"></i> LAUNCH REELS'; |
|
|
feather.replace(); |
|
|
}, 3000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.symbol-3d').forEach(symbol => { |
|
|
symbol.addEventListener('mouseenter', function() { |
|
|
anime({ |
|
|
targets: this, |
|
|
scale: 1.2, |
|
|
translateZ: 40, |
|
|
duration: 300, |
|
|
easing: 'easeOutQuad' |
|
|
}); |
|
|
}); |
|
|
|
|
|
symbol.addEventListener('mouseleave', function() { |
|
|
anime({ |
|
|
targets: this, |
|
|
scale: 1, |
|
|
translateZ: 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 |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
