|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Egyptian 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.waves.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: #d4af37; |
|
|
--primary-dark: #b8860b; |
|
|
--bg: #0c0b0e; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: var(--bg); |
|
|
color: #f8fafc; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.egyptian-gradient { |
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); |
|
|
} |
|
|
.sand-bg { |
|
|
background-image: url('http://static.photos/desert/1200x630/1'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
background-blend-mode: overlay; |
|
|
transform-style: preserve-3d; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.pyramid-3d { |
|
|
transform-style: preserve-3d; |
|
|
transform: rotateX(10deg) rotateY(10deg); |
|
|
} |
|
|
|
|
|
.symbol-3d { |
|
|
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"> |
|
|
<i data-feather="pyramid" class="text-white"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl md:text-3xl font-bold font-serif">EGYPTIAN FORTUNE</h1> |
|
|
</div> |
|
|
<a href="/" class="px-4 py-2 bg-yellow-700 hover:bg-yellow-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="pyramid-3d mx-auto w-64 h-64 mb-8 relative" style="perspective: 1000px;"> |
|
|
<div class="absolute inset-0 bg-yellow-600/20 clip-path-pyramid transform rotate-45" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div> |
|
|
<div class="absolute inset-0 bg-yellow-700/30 clip-path-pyramid transform -rotate-45" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div> |
|
|
<div class="absolute inset-0 bg-yellow-800/40 rounded-full animate-pulse"></div> |
|
|
</div> |
|
|
<h2 class="text-4xl font-bold mb-4 font-serif">Ancient Treasures Await</h2> |
|
|
<p class="text-xl max-w-2xl mx-auto">Spin the reels of history and uncover pharaoh's riches</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-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"> |
|
|
<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/gold/120x120/1" class="w-24 h-24 object-contain symbol-3d" alt="Ankh"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/gold/120x120/2" class="w-24 h-24 object-contain symbol-3d" alt="Scarab"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/gold/120x120/3" class="w-24 h-24 object-contain symbol-3d" alt="Eye of Horus"> |
|
|
</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/gold/120x120/4" class="w-24 h-24 object-contain symbol-3d" alt="Pyramid"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/gold/120x120/5" class="w-24 h-24 object-contain symbol-3d" alt="Pharaoh"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/gold/120x120/6" class="w-24 h-24 object-contain symbol-3d" alt="Sphinx"> |
|
|
</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/gold/120x120/7" class="w-24 h-24 object-contain symbol-3d" alt="Cartouche"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/gold/120x120/8" class="w-24 h-24 object-contain symbol-3d" alt="Lotus"> |
|
|
</div> |
|
|
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);"> |
|
|
<img src="http://static.photos/gold/120x120/9" class="w-24 h-24 object-contain symbol-3d" alt="Djed Pillar"> |
|
|
</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 transform hover:scale-105"> |
|
|
<i data-feather="play" class="mr-2"></i> UNLOCK FORTUNE |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 font-serif">Sacred Symbols</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-yellow-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-yellow-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-center">Ankh of Life</h3> |
|
|
<p class="text-gray-300 text-center">The key to eternal life grants massive wins</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-yellow-600/20 rounded-full flex items-center justify-center mb-4 neuro-effect mx-auto" style="transform: translateZ(20px);"> |
|
|
<i data-feather="shield" class="text-yellow-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-center">Eye of Horus</h3> |
|
|
<p class="text-gray-300 text-center">Protection and royal power multiplier</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-yellow-600/20 rounded-full flex items-center justify-center mb-4 neuro-effect mx-auto" style="transform: translateZ(20px);"> |
|
|
<i data-feather="sun" class="text-yellow-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-center">Ra's Blessing</h3> |
|
|
<p class="text-gray-300 text-center">Solar energy jackpot trigger</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
<script> |
|
|
|
|
|
VANTA.WAVES({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0xd4af37, |
|
|
shininess: 50.00, |
|
|
waveHeight: 20.00, |
|
|
waveSpeed: 1.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> INVOKING...'; |
|
|
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> UNLOCK FORTUNE'; |
|
|
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> |
