crisp vvivid 3d more graphict interactive touch
Browse files- README.md +9 -5
- egyptian-slots.html +282 -0
- index.html +925 -18
- pirate-slots.html +308 -0
- space-slots.html +311 -0
README.md
CHANGED
|
@@ -1,10 +1,14 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: ReelRush Express - 3D Interactive Slots 🎰
|
| 3 |
+
colorFrom: gray
|
| 4 |
+
colorTo: purple
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
| 14 |
+
|
egyptian-slots.html
ADDED
|
@@ -0,0 +1,282 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Egyptian Slots | ReelRush Express</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;600&display=swap');
|
| 13 |
+
|
| 14 |
+
:root {
|
| 15 |
+
--primary: #d4af37;
|
| 16 |
+
--primary-dark: #b8860b;
|
| 17 |
+
--bg: #0c0b0e;
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
body {
|
| 21 |
+
font-family: 'Poppins', sans-serif;
|
| 22 |
+
background-color: var(--bg);
|
| 23 |
+
color: #f8fafc;
|
| 24 |
+
overflow-x: hidden;
|
| 25 |
+
}
|
| 26 |
+
|
| 27 |
+
.egyptian-gradient {
|
| 28 |
+
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
| 29 |
+
}
|
| 30 |
+
.sand-bg {
|
| 31 |
+
background-image: url('http://static.photos/desert/1200x630/1');
|
| 32 |
+
background-size: cover;
|
| 33 |
+
background-position: center;
|
| 34 |
+
background-blend-mode: overlay;
|
| 35 |
+
transform-style: preserve-3d;
|
| 36 |
+
perspective: 1000px;
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
.pyramid-3d {
|
| 40 |
+
transform-style: preserve-3d;
|
| 41 |
+
transform: rotateX(10deg) rotateY(10deg);
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
.symbol-3d {
|
| 45 |
+
transform-style: preserve-3d;
|
| 46 |
+
transition: transform 0.3s ease;
|
| 47 |
+
}
|
| 48 |
+
|
| 49 |
+
.symbol-3d:hover {
|
| 50 |
+
transform: translateZ(20px) scale(1.1);
|
| 51 |
+
}
|
| 52 |
+
</style>
|
| 53 |
+
</head>
|
| 54 |
+
<body class="sand-bg">
|
| 55 |
+
<div id="vanta-bg" class="fixed inset-0 z-0"></div>
|
| 56 |
+
<div class="fixed inset-0 bg-black/70 z-0"></div>
|
| 57 |
+
|
| 58 |
+
<header class="egyptian-gradient py-6 px-4 sm:px-6 lg:px-8 sticky top-0 z-50" style="transform: translateZ(50px);">
|
| 59 |
+
<div class="container mx-auto flex items-center justify-between">
|
| 60 |
+
<div class="flex items-center">
|
| 61 |
+
<div class="mr-3 p-2 bg-yellow-700 rounded-full neuro-effect">
|
| 62 |
+
<i data-feather="pyramid" class="text-white"></i>
|
| 63 |
+
</div>
|
| 64 |
+
<h1 class="text-2xl md:text-3xl font-bold font-serif">EGYPTIAN FORTUNE</h1>
|
| 65 |
+
</div>
|
| 66 |
+
<a href="/" class="px-4 py-2 bg-yellow-700 hover:bg-yellow-800 rounded-full font-medium transition neuro-effect flex items-center">
|
| 67 |
+
<i data-feather="arrow-left" class="mr-1 w-4 h-4"></i> Back to Main
|
| 68 |
+
</a>
|
| 69 |
+
</div>
|
| 70 |
+
</header>
|
| 71 |
+
<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-20">
|
| 72 |
+
<!-- 3D Pyramid Showcase -->
|
| 73 |
+
<section class="mb-16 text-center">
|
| 74 |
+
<div class="pyramid-3d mx-auto w-64 h-64 mb-8 relative" style="perspective: 1000px;">
|
| 75 |
+
<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>
|
| 76 |
+
<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>
|
| 77 |
+
<div class="absolute inset-0 bg-yellow-800/40 rounded-full animate-pulse"></div>
|
| 78 |
+
</div>
|
| 79 |
+
<h2 class="text-4xl font-bold mb-4 font-serif">Ancient Treasures Await</h2>
|
| 80 |
+
<p class="text-xl max-w-2xl mx-auto">Spin the reels of history and uncover pharaoh's riches</p>
|
| 81 |
+
</section>
|
| 82 |
+
|
| 83 |
+
<!-- Interactive 3D Slot Machine -->
|
| 84 |
+
<section class="mb-16">
|
| 85 |
+
<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;">
|
| 86 |
+
<div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-yellow-600/5 blur-xl"></div>
|
| 87 |
+
<div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-yellow-600/5 blur-xl"></div>
|
| 88 |
+
|
| 89 |
+
<div class="relative z-10">
|
| 90 |
+
<div class="flex justify-center space-x-6 mb-8" style="transform-style: preserve-3d;">
|
| 91 |
+
<!-- Reel 1 -->
|
| 92 |
+
<div class="reel bg-gray-800 neuro-effect rounded-lg w-28 h-40 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition"
|
| 93 |
+
style="transform-style: preserve-3d; box-shadow: 0 15px 30px rgba(0,0,0,0.6); transform: translateZ(25px);">
|
| 94 |
+
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;">
|
| 95 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 96 |
+
<img src="http://static.photos/gold/120x120/1" class="w-24 h-24 object-contain symbol-3d" alt="Ankh">
|
| 97 |
+
</div>
|
| 98 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 99 |
+
<img src="http://static.photos/gold/120x120/2" class="w-24 h-24 object-contain symbol-3d" alt="Scarab">
|
| 100 |
+
</div>
|
| 101 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 102 |
+
<img src="http://static.photos/gold/120x120/3" class="w-24 h-24 object-contain symbol-3d" alt="Eye of Horus">
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
</div>
|
| 106 |
+
|
| 107 |
+
<!-- Reel 2 -->
|
| 108 |
+
<div class="reel bg-gray-800 neuro-effect rounded-lg w-28 h-40 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition"
|
| 109 |
+
style="transform-style: preserve-3d; box-shadow: 0 15px 30px rgba(0,0,0,0.6); transform: translateZ(25px);">
|
| 110 |
+
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;">
|
| 111 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 112 |
+
<img src="http://static.photos/gold/120x120/4" class="w-24 h-24 object-contain symbol-3d" alt="Pyramid">
|
| 113 |
+
</div>
|
| 114 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 115 |
+
<img src="http://static.photos/gold/120x120/5" class="w-24 h-24 object-contain symbol-3d" alt="Pharaoh">
|
| 116 |
+
</div>
|
| 117 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 118 |
+
<img src="http://static.photos/gold/120x120/6" class="w-24 h-24 object-contain symbol-3d" alt="Sphinx">
|
| 119 |
+
</div>
|
| 120 |
+
</div>
|
| 121 |
+
</div>
|
| 122 |
+
|
| 123 |
+
<!-- Reel 3 -->
|
| 124 |
+
<div class="reel bg-gray-800 neuro-effect rounded-lg w-28 h-40 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition"
|
| 125 |
+
style="transform-style: preserve-3d; box-shadow: 0 15px 30px rgba(0,0,0,0.6); transform: translateZ(25px);">
|
| 126 |
+
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;">
|
| 127 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 128 |
+
<img src="http://static.photos/gold/120x120/7" class="w-24 h-24 object-contain symbol-3d" alt="Cartouche">
|
| 129 |
+
</div>
|
| 130 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 131 |
+
<img src="http://static.photos/gold/120x120/8" class="w-24 h-24 object-contain symbol-3d" alt="Lotus">
|
| 132 |
+
</div>
|
| 133 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 134 |
+
<img src="http://static.photos/gold/120x120/9" class="w-24 h-24 object-contain symbol-3d" alt="Djed Pillar">
|
| 135 |
+
</div>
|
| 136 |
+
</div>
|
| 137 |
+
</div>
|
| 138 |
+
</div>
|
| 139 |
+
|
| 140 |
+
<div class="flex justify-center">
|
| 141 |
+
<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">
|
| 142 |
+
<i data-feather="play" class="mr-2"></i> UNLOCK FORTUNE
|
| 143 |
+
</button>
|
| 144 |
+
</div>
|
| 145 |
+
</div>
|
| 146 |
+
</div>
|
| 147 |
+
</section>
|
| 148 |
+
|
| 149 |
+
<!-- 3D Feature Cards -->
|
| 150 |
+
<section>
|
| 151 |
+
<h2 class="text-3xl font-bold text-center mb-12 font-serif">Sacred Symbols</h2>
|
| 152 |
+
|
| 153 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 154 |
+
<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;">
|
| 155 |
+
<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);">
|
| 156 |
+
<i data-feather="star" class="text-yellow-400"></i>
|
| 157 |
+
</div>
|
| 158 |
+
<h3 class="text-xl font-bold mb-3 text-center">Ankh of Life</h3>
|
| 159 |
+
<p class="text-gray-300 text-center">The key to eternal life grants massive wins</p>
|
| 160 |
+
</div>
|
| 161 |
+
|
| 162 |
+
<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;">
|
| 163 |
+
<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);">
|
| 164 |
+
<i data-feather="shield" class="text-yellow-400"></i>
|
| 165 |
+
</div>
|
| 166 |
+
<h3 class="text-xl font-bold mb-3 text-center">Eye of Horus</h3>
|
| 167 |
+
<p class="text-gray-300 text-center">Protection and royal power multiplier</p>
|
| 168 |
+
</div>
|
| 169 |
+
|
| 170 |
+
<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;">
|
| 171 |
+
<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);">
|
| 172 |
+
<i data-feather="sun" class="text-yellow-400"></i>
|
| 173 |
+
</div>
|
| 174 |
+
<h3 class="text-xl font-bold mb-3 text-center">Ra's Blessing</h3>
|
| 175 |
+
<p class="text-gray-300 text-center">Solar energy jackpot trigger</p>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
</section>
|
| 179 |
+
</main>
|
| 180 |
+
<script>
|
| 181 |
+
// Initialize Vanta.js background
|
| 182 |
+
VANTA.WAVES({
|
| 183 |
+
el: "#vanta-bg",
|
| 184 |
+
mouseControls: true,
|
| 185 |
+
touchControls: true,
|
| 186 |
+
gyroControls: false,
|
| 187 |
+
minHeight: 200.00,
|
| 188 |
+
minWidth: 200.00,
|
| 189 |
+
scale: 1.00,
|
| 190 |
+
scaleMobile: 1.00,
|
| 191 |
+
color: 0xd4af37,
|
| 192 |
+
shininess: 50.00,
|
| 193 |
+
waveHeight: 20.00,
|
| 194 |
+
waveSpeed: 1.00
|
| 195 |
+
});
|
| 196 |
+
|
| 197 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 198 |
+
feather.replace();
|
| 199 |
+
|
| 200 |
+
// 3D Spin Animation
|
| 201 |
+
document.getElementById('spin-btn').addEventListener('click', function() {
|
| 202 |
+
const btn = this;
|
| 203 |
+
const reels = document.querySelectorAll('.reel-items');
|
| 204 |
+
|
| 205 |
+
// Disable button during spin
|
| 206 |
+
btn.disabled = true;
|
| 207 |
+
btn.innerHTML = '<i data-feather="loader" class="mr-2 animate-spin"></i> INVOKING...';
|
| 208 |
+
feather.replace();
|
| 209 |
+
|
| 210 |
+
// 3D Reel spin animation
|
| 211 |
+
reels.forEach((reel, index) => {
|
| 212 |
+
anime({
|
| 213 |
+
targets: reel,
|
| 214 |
+
translateY: [0, anime.random(-800, -400)],
|
| 215 |
+
translateZ: [0, anime.random(50, 100)],
|
| 216 |
+
rotateX: [0, anime.random(360, 720)],
|
| 217 |
+
duration: anime.random(2000, 3000),
|
| 218 |
+
delay: index * 200,
|
| 219 |
+
easing: 'easeInOutQuad',
|
| 220 |
+
complete: function() {
|
| 221 |
+
// Reset to winning position
|
| 222 |
+
anime({
|
| 223 |
+
targets: reel,
|
| 224 |
+
translateY: 0,
|
| 225 |
+
translateZ: 0,
|
| 226 |
+
rotateX: 0,
|
| 227 |
+
duration: 1000,
|
| 228 |
+
easing: 'spring(1, 80, 10, 0)'
|
| 229 |
+
});
|
| 230 |
+
}
|
| 231 |
+
});
|
| 232 |
+
});
|
| 233 |
+
|
| 234 |
+
// Re-enable button after spin
|
| 235 |
+
setTimeout(() => {
|
| 236 |
+
btn.disabled = false;
|
| 237 |
+
btn.innerHTML = '<i data-feather="play" class="mr-2"></i> UNLOCK FORTUNE';
|
| 238 |
+
feather.replace();
|
| 239 |
+
}, 3000);
|
| 240 |
+
});
|
| 241 |
+
|
| 242 |
+
// 3D hover effects for symbols
|
| 243 |
+
document.querySelectorAll('.symbol-3d').forEach(symbol => {
|
| 244 |
+
symbol.addEventListener('mouseenter', function() {
|
| 245 |
+
anime({
|
| 246 |
+
targets: this,
|
| 247 |
+
scale: 1.2,
|
| 248 |
+
translateZ: 40,
|
| 249 |
+
duration: 300,
|
| 250 |
+
easing: 'easeOutQuad'
|
| 251 |
+
});
|
| 252 |
+
});
|
| 253 |
+
|
| 254 |
+
symbol.addEventListener('mouseleave', function() {
|
| 255 |
+
anime({
|
| 256 |
+
targets: this,
|
| 257 |
+
scale: 1,
|
| 258 |
+
translateZ: 0,
|
| 259 |
+
duration: 300,
|
| 260 |
+
easing: 'easeOutQuad'
|
| 261 |
+
});
|
| 262 |
+
});
|
| 263 |
+
});
|
| 264 |
+
|
| 265 |
+
// Interactive 3D tilt effect
|
| 266 |
+
document.addEventListener('mousemove', (e) => {
|
| 267 |
+
const x = e.clientX / window.innerWidth;
|
| 268 |
+
const y = e.clientY / window.innerHeight;
|
| 269 |
+
|
| 270 |
+
anime({
|
| 271 |
+
targets: '.feature-card',
|
| 272 |
+
rotateY: (x - 0.5) * 15,
|
| 273 |
+
rotateX: -(y - 0.5) * 15,
|
| 274 |
+
translateZ: 30,
|
| 275 |
+
easing: 'easeOutQuad',
|
| 276 |
+
duration: 500
|
| 277 |
+
});
|
| 278 |
+
});
|
| 279 |
+
});
|
| 280 |
+
</script>
|
| 281 |
+
</body>
|
| 282 |
+
</html>
|
index.html
CHANGED
|
@@ -1,19 +1,926 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>ReelRush Express - 3D Interactive Slots</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
|
| 12 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
| 13 |
+
<script src="https://cdn.jsdelivr.net/npm/neurojs@latest/dist/neuro.min.js"></script>
|
| 14 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
|
| 15 |
+
<style>
|
| 16 |
+
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;600&display=swap');
|
| 17 |
+
|
| 18 |
+
:root {
|
| 19 |
+
--primary: #f59e0b;
|
| 20 |
+
--primary-dark: #b45309;
|
| 21 |
+
--primary-darker: #78350f;
|
| 22 |
+
--bg: #0f172a;
|
| 23 |
+
--bg-light: #1e293b;
|
| 24 |
+
}
|
| 25 |
+
|
| 26 |
+
body {
|
| 27 |
+
font-family: 'Poppins', sans-serif;
|
| 28 |
+
overflow-x: hidden;
|
| 29 |
+
background-color: var(--bg);
|
| 30 |
+
color: #f8fafc;
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
.hero-gradient {
|
| 34 |
+
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, var(--primary-darker) 100%);
|
| 35 |
+
}
|
| 36 |
+
|
| 37 |
+
.slot-machine {
|
| 38 |
+
background: linear-gradient(145deg, var(--bg-light) 0%, var(--bg) 100%);
|
| 39 |
+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
| 40 |
+
border: 1px solid rgba(245, 158, 11, 0.1);
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
.coin-pulse {
|
| 44 |
+
animation: pulse 2s infinite;
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
.neuro-effect {
|
| 48 |
+
border-radius: 16px;
|
| 49 |
+
background: linear-gradient(145deg, #1e293b, #0f172a);
|
| 50 |
+
box-shadow: 8px 8px 16px #0a101f, -8px -8px 16px #1a2235;
|
| 51 |
+
}
|
| 52 |
+
|
| 53 |
+
.neuro-effect-hover:hover {
|
| 54 |
+
box-shadow: 12px 12px 24px #0a101f, -12px -12px 24px #1a2235;
|
| 55 |
+
transform: translateY(-2px);
|
| 56 |
+
}
|
| 57 |
+
.reel-item {
|
| 58 |
+
transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
|
| 59 |
+
filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.3));
|
| 60 |
+
transform-style: preserve-3d;
|
| 61 |
+
backface-visibility: hidden;
|
| 62 |
+
}
|
| 63 |
+
|
| 64 |
+
.reel-item img {
|
| 65 |
+
transform: translateZ(20px);
|
| 66 |
+
filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
|
| 67 |
+
}
|
| 68 |
+
|
| 69 |
+
.reel-highlight {
|
| 70 |
+
box-shadow: 0 0 30px rgba(245, 158, 11, 0.7),
|
| 71 |
+
inset 0 0 20px rgba(245, 158, 11, 0.5);
|
| 72 |
+
border: 2px solid rgba(245, 158, 11, 0.8);
|
| 73 |
+
}
|
| 74 |
+
|
| 75 |
+
.win-animation {
|
| 76 |
+
animation: winPulse 0.5s ease-in-out infinite alternate;
|
| 77 |
+
}
|
| 78 |
+
|
| 79 |
+
@keyframes winPulse {
|
| 80 |
+
from { box-shadow: 0 0 20px rgba(245, 158, 11, 0.5); }
|
| 81 |
+
to { box-shadow: 0 0 40px rgba(245, 158, 11, 0.9),
|
| 82 |
+
0 0 60px rgba(245, 158, 11, 0.6); }
|
| 83 |
+
}
|
| 84 |
+
.vignette {
|
| 85 |
+
position: fixed;
|
| 86 |
+
top: 0;
|
| 87 |
+
left: 0;
|
| 88 |
+
width: 100%;
|
| 89 |
+
height: 100%;
|
| 90 |
+
pointer-events: none;
|
| 91 |
+
background: radial-gradient(ellipse at center, rgba(15,23,42,0) 60%, rgba(15,23,42,0.9) 100%);
|
| 92 |
+
z-index: 10;
|
| 93 |
+
}
|
| 94 |
+
|
| 95 |
+
@keyframes pulse {
|
| 96 |
+
0% { transform: scale(1); opacity: 1; }
|
| 97 |
+
50% { transform: scale(1.1); opacity: 0.8; }
|
| 98 |
+
100% { transform: scale(1); opacity: 1; }
|
| 99 |
+
}
|
| 100 |
+
@keyframes float {
|
| 101 |
+
0% { transform: translateY(0px) rotate(0deg) translateZ(0); }
|
| 102 |
+
50% { transform: translateY(-20px) rotate(5deg) translateZ(10px); }
|
| 103 |
+
100% { transform: translateY(0px) rotate(0deg) translateZ(0); }
|
| 104 |
+
}
|
| 105 |
+
|
| 106 |
+
@keyframes particle-float {
|
| 107 |
+
0% { transform: translateY(0) translateX(0) translateZ(0); }
|
| 108 |
+
50% { transform: translateY(-5px) translateX(5px) translateZ(5px); }
|
| 109 |
+
100% { transform: translateY(0) translateX(0) translateZ(0); }
|
| 110 |
+
}
|
| 111 |
+
.floating {
|
| 112 |
+
animation: float 6s ease-in-out infinite;
|
| 113 |
+
transform-style: preserve-3d;
|
| 114 |
+
perspective: 1000px;
|
| 115 |
+
}
|
| 116 |
+
|
| 117 |
+
.particles div {
|
| 118 |
+
animation: particle-float 10s ease-in-out infinite;
|
| 119 |
+
animation-delay: calc(var(--i) * 0.2s);
|
| 120 |
+
transform-style: preserve-3d;
|
| 121 |
+
}
|
| 122 |
+
</style>
|
| 123 |
+
</head>
|
| 124 |
+
<body>
|
| 125 |
+
<!-- Enhanced 3D Background -->
|
| 126 |
+
<div id="vanta-bg" class="fixed inset-0 -z-10 opacity-30"></div>
|
| 127 |
+
<div class="vignette"></div>
|
| 128 |
+
<div class="fixed inset-0 -z-20 bg-black/50"></div>
|
| 129 |
+
<div class="particles fixed inset-0 -z-10"></div>
|
| 130 |
+
<!-- Floating Elements -->
|
| 131 |
+
<div class="fixed -top-20 -left-20 w-64 h-64 rounded-full bg-yellow-600/10 blur-xl"></div>
|
| 132 |
+
<div class="fixed -bottom-20 -right-20 w-96 h-96 rounded-full bg-yellow-600/5 blur-xl"></div>
|
| 133 |
+
<!-- Enhanced 3D Floating Elements -->
|
| 134 |
+
<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">
|
| 135 |
+
<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);">
|
| 136 |
+
<div class="portal-overlay absolute inset-0 bg-black/50 rounded-full opacity-0 transition-opacity duration-300 flex items-center justify-center">
|
| 137 |
+
<span class="text-xs font-bold text-yellow-300">Egyptian Fortune</span>
|
| 138 |
+
</div>
|
| 139 |
+
</a>
|
| 140 |
+
<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">
|
| 141 |
+
<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);">
|
| 142 |
+
<div class="portal-overlay absolute inset-0 bg-black/50 rounded-full opacity-0 transition-opacity duration-300 flex items-center justify-center">
|
| 143 |
+
<span class="text-xs font-bold text-blue-300">Cosmic Wins</span>
|
| 144 |
+
</div>
|
| 145 |
+
</a>
|
| 146 |
+
<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">
|
| 147 |
+
<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);">
|
| 148 |
+
<div class="portal-overlay absolute inset-0 bg-black/50 rounded-full opacity-0 transition-opacity duration-300 flex items-center justify-center">
|
| 149 |
+
<span class="text-xs font-bold text-red-300">Treasure Hunt</span>
|
| 150 |
+
</div>
|
| 151 |
+
</a>
|
| 152 |
+
<!-- Header -->
|
| 153 |
+
<header class="hero-gradient py-6 px-4 sm:px-6 lg:px-8 sticky top-0 z-50">
|
| 154 |
+
<div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
|
| 155 |
+
<div class="flex items-center mb-4 md:mb-0">
|
| 156 |
+
<div class="mr-3 p-2 bg-yellow-600 rounded-full neuro-effect">
|
| 157 |
+
<i data-feather="zap" class="text-white"></i>
|
| 158 |
+
</div>
|
| 159 |
+
<h1 class="text-2xl md:text-3xl font-bold font-serif">REELRUSH EXPRESS</h1>
|
| 160 |
+
</div>
|
| 161 |
+
<nav class="flex space-x-6 items-center">
|
| 162 |
+
<a href="#" class="hover:text-yellow-300 transition flex items-center">
|
| 163 |
+
<i data-feather="sliders" class="mr-1 w-4 h-4"></i> Slots
|
| 164 |
+
</a>
|
| 165 |
+
<a href="#" class="hover:text-yellow-300 transition flex items-center">
|
| 166 |
+
<i data-feather="gift" class="mr-1 w-4 h-4"></i> Rewards
|
| 167 |
+
</a>
|
| 168 |
+
<a href="#" class="hover:text-yellow-300 transition flex items-center">
|
| 169 |
+
<i data-feather="users" class="mr-1 w-4 h-4"></i> Community
|
| 170 |
+
</a>
|
| 171 |
+
<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">
|
| 172 |
+
<i data-feather="user-plus" class="mr-1 w-4 h-4"></i> Join Now
|
| 173 |
+
</button>
|
| 174 |
+
</nav>
|
| 175 |
+
</div>
|
| 176 |
+
</header>
|
| 177 |
+
|
| 178 |
+
<!-- Main Content -->
|
| 179 |
+
<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-20">
|
| 180 |
+
<!-- Hero Section -->
|
| 181 |
+
<section class="text-center mb-20">
|
| 182 |
+
<div class="relative inline-block mb-8">
|
| 183 |
+
<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>
|
| 184 |
+
<div class="absolute -bottom-2 left-0 w-full h-3 bg-yellow-600/30 z-0 rounded-full"></div>
|
| 185 |
+
</div>
|
| 186 |
+
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
|
| 187 |
+
Ultra-smooth 3D slots with immersive physics and touch-responsive animations.
|
| 188 |
+
</p>
|
| 189 |
+
<div class="flex justify-center gap-4">
|
| 190 |
+
<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">
|
| 191 |
+
<i data-feather="play" class="mr-2"></i> Play Now
|
| 192 |
+
</button>
|
| 193 |
+
<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">
|
| 194 |
+
How It Works
|
| 195 |
+
</button>
|
| 196 |
+
</div>
|
| 197 |
+
</section>
|
| 198 |
+
<!-- Interactive 3D Slot Machine -->
|
| 199 |
+
<section class="mb-20">
|
| 200 |
+
<div class="slot-machine neuro-effect rounded-2xl p-8 max-w-4xl mx-auto relative overflow-hidden" style="perspective: 2000px;">
|
| 201 |
+
<div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-yellow-600/5 blur-xl"></div>
|
| 202 |
+
<div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-yellow-600/5 blur-xl"></div>
|
| 203 |
+
|
| 204 |
+
<div class="relative z-10 flex justify-between items-center mb-6">
|
| 205 |
+
<div class="flex items-center">
|
| 206 |
+
<div class="coin-pulse mr-3 neuro-effect">
|
| 207 |
+
<img src="http://static.photos/gold/200x200/1" alt="Inspire Coin" class="w-12 h-12 rounded-full">
|
| 208 |
+
</div>
|
| 209 |
+
<div>
|
| 210 |
+
<div class="text-sm text-yellow-400">REDEMPTION TOKENS</div>
|
| 211 |
+
<div class="text-2xl font-bold">1,250</div>
|
| 212 |
+
</div>
|
| 213 |
+
</div>
|
| 214 |
+
<div class="text-right">
|
| 215 |
+
<div class="text-sm text-yellow-400">COMMUNITY PROGRESS</div>
|
| 216 |
+
<div class="w-full bg-gray-700 rounded-full h-2.5 mb-2 neuro-effect">
|
| 217 |
+
<div class="bg-yellow-600 h-2.5 rounded-full" style="width: 45%"></div>
|
| 218 |
+
</div>
|
| 219 |
+
<div class="text-xs">45% to next tier</div>
|
| 220 |
+
</div>
|
| 221 |
+
</div>
|
| 222 |
+
<div class="slot-reels bg-black/50 rounded-xl p-6 mb-6 neuro-effect relative overflow-hidden" style="transform-style: preserve-3d;">
|
| 223 |
+
<div class="absolute inset-0 bg-[url('http://static.photos/abstract/1024x576/3')] opacity-10"></div>
|
| 224 |
+
<div class="relative z-10">
|
| 225 |
+
<div class="flex justify-center space-x-4 mb-6" style="transform-style: preserve-3d; perspective: 2000px;">
|
| 226 |
+
<div class="reel bg-gray-800 neuro-effect rounded-lg w-24 h-32 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition"
|
| 227 |
+
id="reel-1" style="transform-style: preserve-3d; box-shadow: 0 10px 25px rgba(0,0,0,0.5); transform: translateZ(20px);">
|
| 228 |
+
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;">
|
| 229 |
+
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);">
|
| 230 |
+
<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);">
|
| 231 |
+
</div>
|
| 232 |
+
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);">
|
| 233 |
+
<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);">
|
| 234 |
+
</div>
|
| 235 |
+
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);">
|
| 236 |
+
<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);">
|
| 237 |
+
</div>
|
| 238 |
+
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);">
|
| 239 |
+
<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);">
|
| 240 |
+
</div>
|
| 241 |
+
</div>
|
| 242 |
+
</div>
|
| 243 |
+
<div class="reel bg-gray-800 neuro-effect rounded-lg w-24 h-32 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition"
|
| 244 |
+
id="reel-2" style="transform-style: preserve-3d; box-shadow: 0 10px 25px rgba(0,0,0,0.5); transform: translateZ(20px);">
|
| 245 |
+
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;">
|
| 246 |
+
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);">
|
| 247 |
+
<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);">
|
| 248 |
+
</div>
|
| 249 |
+
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);">
|
| 250 |
+
<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);">
|
| 251 |
+
</div>
|
| 252 |
+
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);">
|
| 253 |
+
<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);">
|
| 254 |
+
</div>
|
| 255 |
+
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);">
|
| 256 |
+
<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);">
|
| 257 |
+
</div>
|
| 258 |
+
</div>
|
| 259 |
+
</div>
|
| 260 |
+
<div class="reel bg-gray-800 neuro-effect rounded-lg w-24 h-32 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition"
|
| 261 |
+
id="reel-3" style="transform-style: preserve-3d; box-shadow: 0 10px 25px rgba(0,0,0,0.5); transform: translateZ(20px);">
|
| 262 |
+
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;">
|
| 263 |
+
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);">
|
| 264 |
+
<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);">
|
| 265 |
+
</div>
|
| 266 |
+
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);">
|
| 267 |
+
<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);">
|
| 268 |
+
</div>
|
| 269 |
+
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);">
|
| 270 |
+
<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);">
|
| 271 |
+
</div>
|
| 272 |
+
<div class="reel-item w-full h-32 flex items-center justify-center" style="transform: translateZ(30px);">
|
| 273 |
+
<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);">
|
| 274 |
+
</div>
|
| 275 |
+
</div>
|
| 276 |
+
</div>
|
| 277 |
+
</div>
|
| 278 |
+
<div class="flex justify-center">
|
| 279 |
+
<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">
|
| 280 |
+
<i data-feather="zap" class="mr-2"></i> SPIN TO REDEEM
|
| 281 |
+
</button>
|
| 282 |
+
</div>
|
| 283 |
+
</div>
|
| 284 |
+
</div>
|
| 285 |
+
|
| 286 |
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
| 287 |
+
<div class="bg-black/30 neuro-effect hover:bg-black/40 rounded-lg p-4 text-center cursor-pointer transition">
|
| 288 |
+
<div class="text-yellow-400 mb-1 flex justify-center">
|
| 289 |
+
<i data-feather="users" class="w-4 h-4 mr-1"></i> Players
|
| 290 |
+
</div>
|
| 291 |
+
<div class="text-xl font-bold">3,842</div>
|
| 292 |
+
</div>
|
| 293 |
+
<div class="bg-black/30 neuro-effect hover:bg-black/40 rounded-lg p-4 text-center cursor-pointer transition">
|
| 294 |
+
<div class="text-yellow-400 mb-1 flex justify-center">
|
| 295 |
+
<i data-feather="database" class="w-4 h-4 mr-1"></i> Pool
|
| 296 |
+
</div>
|
| 297 |
+
<div class="text-xl font-bold">1.2M</div>
|
| 298 |
+
</div>
|
| 299 |
+
<div class="bg-black/30 neuro-effect hover:bg-black/40 rounded-lg p-4 text-center cursor-pointer transition">
|
| 300 |
+
<div class="text-yellow-400 mb-1 flex justify-center">
|
| 301 |
+
<i data-feather="award" class="w-4 h-4 mr-1"></i> Redemptions
|
| 302 |
+
</div>
|
| 303 |
+
<div class="text-xl font-bold">428</div>
|
| 304 |
+
</div>
|
| 305 |
+
<div class="bg-black/30 neuro-effect hover:bg-black/40 rounded-lg p-4 text-center cursor-pointer transition">
|
| 306 |
+
<div class="text-yellow-400 mb-1 flex justify-center">
|
| 307 |
+
<i data-feather="trending-up" class="w-4 h-4 mr-1"></i> Last Jackpot
|
| 308 |
+
</div>
|
| 309 |
+
<div class="text-xl font-bold">50K</div>
|
| 310 |
+
</div>
|
| 311 |
+
</div>
|
| 312 |
+
</div>
|
| 313 |
+
</section>
|
| 314 |
+
<!-- 3D Slot Features -->
|
| 315 |
+
<section class="mb-20">
|
| 316 |
+
<h2 class="text-3xl font-bold text-center mb-12 font-serif relative">
|
| 317 |
+
<span class="relative z-10">Next-Gen <span class="text-yellow-400">Slot Physics</span></span>
|
| 318 |
+
<div class="absolute -bottom-2 left-1/4 w-1/2 h-2 bg-yellow-600/20 rounded-full z-0"></div>
|
| 319 |
+
</h2>
|
| 320 |
+
|
| 321 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 322 |
+
<div class="feature-card neuro-effect neuro-effect-hover rounded-xl p-6 transition-all duration-300 transform hover:-translate-y-2 relative">
|
| 323 |
+
<div class="w-14 h-14 bg-yellow-600/20 rounded-full flex items-center justify-center mb-4 neuro-effect mx-auto">
|
| 324 |
+
<i data-feather="move" class="text-yellow-400"></i>
|
| 325 |
+
</div>
|
| 326 |
+
<h3 class="text-xl font-bold mb-3 text-center">Real Physics</h3>
|
| 327 |
+
<p class="text-gray-300 text-center">Experience true momentum and inertia with our physically-accurate reel mechanics.</p>
|
| 328 |
+
</div>
|
| 329 |
+
|
| 330 |
+
<div class="feature-card neuro-effect neuro-effect-hover rounded-xl p-6 transition-all duration-300 transform hover:-translate-y-2 relative">
|
| 331 |
+
<div class="w-14 h-14 bg-yellow-600/20 rounded-full flex items-center justify-center mb-4 neuro-effect mx-auto">
|
| 332 |
+
<i data-feather="touch" class="text-yellow-400"></i>
|
| 333 |
+
</div>
|
| 334 |
+
<h3 class="text-xl font-bold mb-3 text-center">Touch Response</h3>
|
| 335 |
+
<p class="text-gray-300 text-center">Every swipe and tap creates realistic reactions throughout the machine.</p>
|
| 336 |
+
</div>
|
| 337 |
+
|
| 338 |
+
<div class="feature-card neuro-effect neuro-effect-hover rounded-xl p-6 transition-all duration-300 transform hover:-translate-y-2 relative">
|
| 339 |
+
<div class="w-14 h-14 bg-yellow-600/20 rounded-full flex items-center justify-center mb-4 neuro-effect mx-auto">
|
| 340 |
+
<i data-feather="eye" class="text-yellow-400"></i>
|
| 341 |
+
</div>
|
| 342 |
+
<h3 class="text-xl font-bold mb-3 text-center">4K Visuals</h3>
|
| 343 |
+
<p class="text-gray-300 text-center">Crisp, detailed graphics with dynamic lighting and reflections.</p>
|
| 344 |
+
</div>
|
| 345 |
+
</div>
|
| 346 |
+
</section>
|
| 347 |
+
<!-- Interactive CTA -->
|
| 348 |
+
<section class="text-center relative overflow-hidden">
|
| 349 |
+
<div class="absolute -top-20 left-1/4 w-48 h-48 rounded-full bg-yellow-600/10 blur-xl"></div>
|
| 350 |
+
<div class="absolute bottom-10 right-1/4 w-64 h-64 rounded-full bg-yellow-600/5 blur-xl"></div>
|
| 351 |
+
|
| 352 |
+
<div class="relative z-10">
|
| 353 |
+
<h2 class="text-3xl font-bold mb-6 font-serif">Feel the Reels Come Alive</h2>
|
| 354 |
+
<p class="text-xl mb-8 max-w-2xl mx-auto">
|
| 355 |
+
Touch, tilt and interact with our most immersive slots experience yet.
|
| 356 |
+
</p>
|
| 357 |
+
<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">
|
| 358 |
+
<i data-feather="play" class="mr-2"></i> Spin Now
|
| 359 |
+
</button>
|
| 360 |
+
</div>
|
| 361 |
+
</section>
|
| 362 |
+
</main>
|
| 363 |
+
|
| 364 |
+
<!-- Animated Footer -->
|
| 365 |
+
<footer class="bg-gray-900/80 py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
|
| 366 |
+
<div class="absolute inset-0 bg-[url('http://static.photos/abstract/1200x630/5')] opacity-10"></div>
|
| 367 |
+
<div class="container mx-auto relative z-10">
|
| 368 |
+
<div class="grid md:grid-cols-4 gap-8 mb-8">
|
| 369 |
+
<div>
|
| 370 |
+
<h3 class="text-xl font-bold mb-4 flex items-center">
|
| 371 |
+
<i data-feather="zap" class="mr-2 text-yellow-400"></i> REELRUSH EXPRESS
|
| 372 |
+
</h3>
|
| 373 |
+
<p class="text-gray-400">Ultra-responsive 3D slot experience.</p>
|
| 374 |
+
</div>
|
| 375 |
+
<div>
|
| 376 |
+
<h4 class="font-bold mb-4 flex items-center">
|
| 377 |
+
<i data-feather="cpu" class="mr-2 w-4 h-4"></i> Network
|
| 378 |
+
</h4>
|
| 379 |
+
<ul class="space-y-2">
|
| 380 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">3D Slots</a></li>
|
| 381 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Live Reels</a></li>
|
| 382 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Premium Games</a></li>
|
| 383 |
+
</ul>
|
| 384 |
+
</div>
|
| 385 |
+
<div>
|
| 386 |
+
<h4 class="font-bold mb-4 flex items-center">
|
| 387 |
+
<i data-feather="activity" class="mr-2 w-4 h-4"></i> Pathways
|
| 388 |
+
</h4>
|
| 389 |
+
<ul class="space-y-2">
|
| 390 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Jackpots</a></li>
|
| 391 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Tournaments</a></li>
|
| 392 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">VIP Club</a></li>
|
| 393 |
+
</ul>
|
| 394 |
+
</div>
|
| 395 |
+
<div>
|
| 396 |
+
<h4 class="font-bold mb-4 flex items-center">
|
| 397 |
+
<i data-feather="lock" class="mr-2 w-4 h-4"></i> Protocol
|
| 398 |
+
</h4>
|
| 399 |
+
<ul class="space-y-2">
|
| 400 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Terms</a></li>
|
| 401 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Privacy</a></li>
|
| 402 |
+
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition">Responsible Play</a></li>
|
| 403 |
+
</ul>
|
| 404 |
+
</div>
|
| 405 |
+
</div>
|
| 406 |
+
<div class="pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
|
| 407 |
+
© 2023 ReelRush Express. The ultimate 3D slot experience.
|
| 408 |
+
</div>
|
| 409 |
+
</div>
|
| 410 |
+
</footer>
|
| 411 |
+
|
| 412 |
+
<script>
|
| 413 |
+
// Enhanced 3D Background with Depth
|
| 414 |
+
VANTA.GLOBE({
|
| 415 |
+
el: "#vanta-bg",
|
| 416 |
+
mouseControls: true,
|
| 417 |
+
touchControls: true,
|
| 418 |
+
gyroControls: false,
|
| 419 |
+
minHeight: 200.00,
|
| 420 |
+
minWidth: 200.00,
|
| 421 |
+
scale: 1.20,
|
| 422 |
+
scaleMobile: 1.20,
|
| 423 |
+
color: 0xf59e0b,
|
| 424 |
+
backgroundColor: 0x0f172a,
|
| 425 |
+
size: 1.2,
|
| 426 |
+
magnification: 1.5
|
| 427 |
+
});
|
| 428 |
+
|
| 429 |
+
// Particle system for depth effect
|
| 430 |
+
const particles = [];
|
| 431 |
+
const particleCount = 50;
|
| 432 |
+
const particleContainer = document.querySelector('.particles');
|
| 433 |
+
|
| 434 |
+
for (let i = 0; i < particleCount; i++) {
|
| 435 |
+
const particle = document.createElement('div');
|
| 436 |
+
particle.className = 'absolute rounded-full bg-yellow-400/10';
|
| 437 |
+
particle.style.width = Math.random() * 10 + 5 + 'px';
|
| 438 |
+
particle.style.height = particle.style.width;
|
| 439 |
+
particle.style.left = Math.random() * 100 + '%';
|
| 440 |
+
particle.style.top = Math.random() * 100 + '%';
|
| 441 |
+
particle.style.transform = `translateZ(${-Math.random() * 1000}px)`;
|
| 442 |
+
particleContainer.appendChild(particle);
|
| 443 |
+
particles.push(particle);
|
| 444 |
+
}
|
| 445 |
+
|
| 446 |
+
// Animate particles for parallax effect
|
| 447 |
+
document.addEventListener('mousemove', (e) => {
|
| 448 |
+
const x = e.clientX / window.innerWidth;
|
| 449 |
+
const y = e.clientY / window.innerHeight;
|
| 450 |
+
|
| 451 |
+
particles.forEach((particle, i) => {
|
| 452 |
+
const depth = parseFloat(particle.style.transform.match(/translateZ\((.+?)px\)/)[1]);
|
| 453 |
+
const moveX = (x - 0.5) * 100 * (1 + depth/1000);
|
| 454 |
+
const moveY = (y - 0.5) * 100 * (1 + depth/1000);
|
| 455 |
+
|
| 456 |
+
particle.style.transform = `translateZ(${depth}px) translate(${moveX}px, ${moveY}px)`;
|
| 457 |
+
});
|
| 458 |
+
});
|
| 459 |
+
// Initialize feather icons
|
| 460 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 461 |
+
feather.replace();
|
| 462 |
+
// 3D Spin Animation with Physics
|
| 463 |
+
document.getElementById('spin-btn').addEventListener('click', function() {
|
| 464 |
+
const btn = this;
|
| 465 |
+
const reels = document.querySelectorAll('.reel-items');
|
| 466 |
+
|
| 467 |
+
// Disable button during spin
|
| 468 |
+
btn.disabled = true;
|
| 469 |
+
btn.innerHTML = '<i data-feather="loader" class="mr-2 animate-spin"></i> PROCESSING...';
|
| 470 |
+
feather.replace();
|
| 471 |
+
// Add 3D perspective to reels
|
| 472 |
+
anime({
|
| 473 |
+
targets: '.reel',
|
| 474 |
+
rotateX: [-10, 0],
|
| 475 |
+
rotateY: [-10, 0],
|
| 476 |
+
translateZ: [30, 0],
|
| 477 |
+
duration: 500,
|
| 478 |
+
easing: 'easeOutQuad'
|
| 479 |
+
});
|
| 480 |
+
// Start machine vibration
|
| 481 |
+
anime({
|
| 482 |
+
targets: '.slot-machine',
|
| 483 |
+
translateX: [0, anime.random(-5, 5), 0],
|
| 484 |
+
translateY: [0, anime.random(-5, 5), 0],
|
| 485 |
+
duration: 1500,
|
| 486 |
+
loop: true,
|
| 487 |
+
easing: 'easeInOutSine'
|
| 488 |
+
});
|
| 489 |
+
// Enhanced touch effects
|
| 490 |
+
document.querySelectorAll('.reel').forEach(reel => {
|
| 491 |
+
reel.addEventListener('touchstart', function(e) {
|
| 492 |
+
anime({
|
| 493 |
+
targets: this,
|
| 494 |
+
scale: 0.95,
|
| 495 |
+
duration: 100,
|
| 496 |
+
easing: 'easeOutQuad'
|
| 497 |
+
});
|
| 498 |
+
});
|
| 499 |
+
|
| 500 |
+
reel.addEventListener('touchend', function(e) {
|
| 501 |
+
anime({
|
| 502 |
+
targets: this,
|
| 503 |
+
scale: 1,
|
| 504 |
+
duration: 300,
|
| 505 |
+
easing: 'easeOutElastic(1, .5)'
|
| 506 |
+
});
|
| 507 |
+
|
| 508 |
+
// Ripple effect
|
| 509 |
+
const ripple = document.createElement('div');
|
| 510 |
+
ripple.className = 'absolute w-16 h-16 bg-yellow-400/20 rounded-full pointer-events-none';
|
| 511 |
+
ripple.style.left = (e.touches[0].clientX - reel.getBoundingClientRect().left - 32) + 'px';
|
| 512 |
+
ripple.style.top = (e.touches[0].clientY - reel.getBoundingClientRect().top - 32) + 'px';
|
| 513 |
+
reel.appendChild(ripple);
|
| 514 |
+
|
| 515 |
+
anime({
|
| 516 |
+
targets: ripple,
|
| 517 |
+
scale: 3,
|
| 518 |
+
opacity: 0,
|
| 519 |
+
duration: 800,
|
| 520 |
+
easing: 'easeOutQuad',
|
| 521 |
+
complete: () => ripple.remove()
|
| 522 |
+
});
|
| 523 |
+
});
|
| 524 |
+
});
|
| 525 |
+
// 3D Reel spin animation with physics
|
| 526 |
+
anime({
|
| 527 |
+
targets: '.reel-item',
|
| 528 |
+
translateY: function(el, i) {
|
| 529 |
+
return anime.random(-600, 600);
|
| 530 |
+
},
|
| 531 |
+
rotateX: function() {
|
| 532 |
+
return anime.random(-45, 45);
|
| 533 |
+
},
|
| 534 |
+
rotateZ: function() {
|
| 535 |
+
return anime.random(-15, 15);
|
| 536 |
+
},
|
| 537 |
+
translateZ: function() {
|
| 538 |
+
return anime.random(-50, 50);
|
| 539 |
+
},
|
| 540 |
+
scale: function() {
|
| 541 |
+
return anime.random(0.8, 1.2);
|
| 542 |
+
},
|
| 543 |
+
opacity: function() {
|
| 544 |
+
return anime.random(0.7, 1);
|
| 545 |
+
},
|
| 546 |
+
duration: 3000,
|
| 547 |
+
easing: 'easeInOutQuad',
|
| 548 |
+
complete: function() {
|
| 549 |
+
// 3D Reset to winning position
|
| 550 |
+
anime({
|
| 551 |
+
targets: '.reel-item',
|
| 552 |
+
translateY: 0,
|
| 553 |
+
translateZ: 0,
|
| 554 |
+
rotateX: 0,
|
| 555 |
+
rotateZ: 0,
|
| 556 |
+
scale: 1,
|
| 557 |
+
opacity: 1,
|
| 558 |
+
duration: 1500,
|
| 559 |
+
delay: anime.stagger(100),
|
| 560 |
+
easing: 'spring(1, 80, 10, 0)',
|
| 561 |
+
begin: function() {
|
| 562 |
+
// Highlight winning reels
|
| 563 |
+
document.querySelectorAll('.reel').forEach((reel, index) => {
|
| 564 |
+
if (index % 3 === 0) { // Highlight every third reel for demo
|
| 565 |
+
reel.classList.add('reel-highlight');
|
| 566 |
+
setTimeout(() => {
|
| 567 |
+
reel.classList.remove('reel-highlight');
|
| 568 |
+
}, 2000);
|
| 569 |
+
}
|
| 570 |
+
});
|
| 571 |
+
},
|
| 572 |
+
complete: function() {
|
| 573 |
+
// Stop machine vibration
|
| 574 |
+
anime({
|
| 575 |
+
targets: '.slot-machine',
|
| 576 |
+
translateX: 0,
|
| 577 |
+
translateY: 0,
|
| 578 |
+
duration: 500
|
| 579 |
+
});
|
| 580 |
+
|
| 581 |
+
// Win animation for matching symbols
|
| 582 |
+
const winningSymbols = document.querySelectorAll('.reel-item:nth-child(1)');
|
| 583 |
+
winningSymbols.forEach(symbol => {
|
| 584 |
+
symbol.classList.add('win-animation');
|
| 585 |
+
setTimeout(() => {
|
| 586 |
+
symbol.classList.remove('win-animation');
|
| 587 |
+
}, 2000);
|
| 588 |
+
});
|
| 589 |
+
}
|
| 590 |
+
complete: function() {
|
| 591 |
+
// Enhanced 3D win effect
|
| 592 |
+
const sparks = [];
|
| 593 |
+
for (let i = 0; i < 30; i++) {
|
| 594 |
+
const spark = document.createElement('div');
|
| 595 |
+
spark.className = 'absolute w-2 h-2 bg-yellow-400 rounded-full';
|
| 596 |
+
spark.style.left = Math.random() * 100 + '%';
|
| 597 |
+
spark.style.top = Math.random() * 100 + '%';
|
| 598 |
+
spark.style.transform = 'translateZ(20px)';
|
| 599 |
+
document.querySelector('.slot-reels').appendChild(spark);
|
| 600 |
+
sparks.push(spark);
|
| 601 |
+
|
| 602 |
+
anime({
|
| 603 |
+
targets: spark,
|
| 604 |
+
translateX: anime.random(-100, 100),
|
| 605 |
+
translateY: anime.random(-100, 100),
|
| 606 |
+
translateZ: anime.random(0, 100),
|
| 607 |
+
scale: [1, anime.random(0.5, 3)],
|
| 608 |
+
opacity: [1, 0],
|
| 609 |
+
duration: 1500,
|
| 610 |
+
easing: 'easeOutExpo'
|
| 611 |
+
});
|
| 612 |
+
}
|
| 613 |
+
|
| 614 |
+
// Add 3D confetti burst
|
| 615 |
+
const confetti = [];
|
| 616 |
+
for (let i = 0; i < 50; i++) {
|
| 617 |
+
const piece = document.createElement('div');
|
| 618 |
+
piece.className = 'absolute w-4 h-4';
|
| 619 |
+
piece.style.background = `hsl(${anime.random(30, 60)}, 100%, 50%)`;
|
| 620 |
+
piece.style.borderRadius = '50%';
|
| 621 |
+
piece.style.left = '50%';
|
| 622 |
+
piece.style.top = '50%';
|
| 623 |
+
piece.style.transform = 'translateZ(0)';
|
| 624 |
+
document.querySelector('.slot-reels').appendChild(piece);
|
| 625 |
+
confetti.push(piece);
|
| 626 |
+
|
| 627 |
+
anime({
|
| 628 |
+
targets: piece,
|
| 629 |
+
translateX: anime.random(-200, 200),
|
| 630 |
+
translateY: anime.random(-200, 200),
|
| 631 |
+
translateZ: anime.random(-100, 100),
|
| 632 |
+
rotateX: anime.random(0, 360),
|
| 633 |
+
rotateY: anime.random(0, 360),
|
| 634 |
+
scale: [0.5, 1.5],
|
| 635 |
+
opacity: [1, 0],
|
| 636 |
+
duration: 2000,
|
| 637 |
+
easing: 'easeOutExpo'
|
| 638 |
+
});
|
| 639 |
+
}
|
| 640 |
+
// Re-enable button
|
| 641 |
+
setTimeout(() => {
|
| 642 |
+
btn.disabled = false;
|
| 643 |
+
btn.innerHTML = '<i data-feather="zap" class="mr-2"></i> SPIN TO REDEEM';
|
| 644 |
+
feather.replace();
|
| 645 |
+
|
| 646 |
+
// Remove sparks
|
| 647 |
+
sparks.forEach(spark => {
|
| 648 |
+
setTimeout(() => {
|
| 649 |
+
if (spark.parentNode) {
|
| 650 |
+
spark.parentNode.removeChild(spark);
|
| 651 |
+
}
|
| 652 |
+
}, 1000);
|
| 653 |
+
});
|
| 654 |
+
}, 1000);
|
| 655 |
+
}
|
| 656 |
+
});
|
| 657 |
+
}
|
| 658 |
+
});
|
| 659 |
+
|
| 660 |
+
// Coin animation
|
| 661 |
+
anime({
|
| 662 |
+
targets: '.coin-pulse',
|
| 663 |
+
scale: [1, 1.3, 1],
|
| 664 |
+
duration: 800,
|
| 665 |
+
easing: 'easeInOutQuad'
|
| 666 |
+
});
|
| 667 |
+
// Enhanced physics on spin
|
| 668 |
+
anime({
|
| 669 |
+
targets: document.querySelectorAll('.reel'),
|
| 670 |
+
translateY: [0, -15, 0],
|
| 671 |
+
translateZ: [0, 20, 0],
|
| 672 |
+
rotateX: [0, anime.random(-5, 5), 0],
|
| 673 |
+
rotateY: [0, anime.random(-3, 3), 0],
|
| 674 |
+
duration: 150,
|
| 675 |
+
delay: anime.stagger(50),
|
| 676 |
+
easing: 'easeOutElastic(1, .8)'
|
| 677 |
+
});
|
| 678 |
+
});
|
| 679 |
+
|
| 680 |
+
// Reel hover effects
|
| 681 |
+
document.querySelectorAll('.reel').forEach(reel => {
|
| 682 |
+
reel.addEventListener('mouseenter', function() {
|
| 683 |
+
anime({
|
| 684 |
+
targets: this,
|
| 685 |
+
scale: 1.1,
|
| 686 |
+
translateZ: 25,
|
| 687 |
+
rotateX: -5,
|
| 688 |
+
rotateY: 5,
|
| 689 |
+
duration: 300,
|
| 690 |
+
easing: 'easeOutQuad'
|
| 691 |
+
});
|
| 692 |
+
});
|
| 693 |
+
reel.addEventListener('mouseleave', function() {
|
| 694 |
+
anime({
|
| 695 |
+
targets: this,
|
| 696 |
+
scale: 1,
|
| 697 |
+
translateZ: 0,
|
| 698 |
+
rotateX: 0,
|
| 699 |
+
rotateY: 0,
|
| 700 |
+
duration: 300,
|
| 701 |
+
easing: 'easeOutQuad'
|
| 702 |
+
});
|
| 703 |
+
});
|
| 704 |
+
|
| 705 |
+
// Touch effects for mobile
|
| 706 |
+
reel.addEventListener('touchstart', function(e) {
|
| 707 |
+
anime({
|
| 708 |
+
targets: this,
|
| 709 |
+
scale: 1.1,
|
| 710 |
+
translateZ: 30,
|
| 711 |
+
duration: 150,
|
| 712 |
+
easing: 'easeOutQuad'
|
| 713 |
+
});
|
| 714 |
+
|
| 715 |
+
// Create ripple effect
|
| 716 |
+
const ripple = document.createElement('div');
|
| 717 |
+
ripple.className = 'absolute w-8 h-8 bg-yellow-400/30 rounded-full pointer-events-none';
|
| 718 |
+
ripple.style.left = (e.touches[0].clientX - this.getBoundingClientRect().left - 16) + 'px';
|
| 719 |
+
ripple.style.top = (e.touches[0].clientY - this.getBoundingClientRect().top - 16) + 'px';
|
| 720 |
+
this.appendChild(ripple);
|
| 721 |
+
|
| 722 |
+
anime({
|
| 723 |
+
targets: ripple,
|
| 724 |
+
scale: 4,
|
| 725 |
+
opacity: 0,
|
| 726 |
+
duration: 600,
|
| 727 |
+
easing: 'easeOutQuad',
|
| 728 |
+
complete: function() {
|
| 729 |
+
if (ripple.parentNode) {
|
| 730 |
+
ripple.parentNode.removeChild(ripple);
|
| 731 |
+
}
|
| 732 |
+
}
|
| 733 |
+
});
|
| 734 |
+
});
|
| 735 |
+
|
| 736 |
+
reel.addEventListener('touchend', function() {
|
| 737 |
+
anime({
|
| 738 |
+
targets: this,
|
| 739 |
+
scale: 1,
|
| 740 |
+
translateZ: 0,
|
| 741 |
+
duration: 300,
|
| 742 |
+
easing: 'easeOutQuad'
|
| 743 |
+
});
|
| 744 |
+
});
|
| 745 |
+
});
|
| 746 |
+
});
|
| 747 |
+
// Enhanced 3D floating animation with physics for portals
|
| 748 |
+
anime({
|
| 749 |
+
targets: '.floating',
|
| 750 |
+
translateY: [0, -50, 0],
|
| 751 |
+
translateX: [0, 30, 0],
|
| 752 |
+
rotateY: [0, 360, 0],
|
| 753 |
+
rotateX: [0, 45, 0],
|
| 754 |
+
translateZ: [0, 100, 0],
|
| 755 |
+
scale: [1, 1.2, 1],
|
| 756 |
+
duration: 8000,
|
| 757 |
+
easing: 'easeInOutSine',
|
| 758 |
+
loop: true,
|
| 759 |
+
delay: anime.stagger(1000)
|
| 760 |
+
});
|
| 761 |
+
// Portal hover effects
|
| 762 |
+
document.querySelectorAll('.game-portal').forEach(portal => {
|
| 763 |
+
portal.addEventListener('mouseenter', function() {
|
| 764 |
+
anime({
|
| 765 |
+
targets: this.querySelector('.portal-image'),
|
| 766 |
+
scale: 1.3,
|
| 767 |
+
rotateY: '+=180',
|
| 768 |
+
translateZ: 50,
|
| 769 |
+
duration: 800,
|
| 770 |
+
easing: 'easeOutQuad'
|
| 771 |
+
});
|
| 772 |
+
this.querySelector('.portal-overlay').style.opacity = '1';
|
| 773 |
+
});
|
| 774 |
+
portal.addEventListener('mouseleave', function() {
|
| 775 |
+
anime({
|
| 776 |
+
targets: this.querySelector('.portal-image'),
|
| 777 |
+
scale: 1,
|
| 778 |
+
translateZ: 0,
|
| 779 |
+
duration: 300,
|
| 780 |
+
easing: 'easeOutQuad'
|
| 781 |
+
});
|
| 782 |
+
this.querySelector('.portal-overlay').style.opacity = '0';
|
| 783 |
+
});
|
| 784 |
+
portal.addEventListener('click', function(e) {
|
| 785 |
+
e.preventDefault();
|
| 786 |
+
const game = this.getAttribute('data-game');
|
| 787 |
+
|
| 788 |
+
// Portal transition effect
|
| 789 |
+
anime({
|
| 790 |
+
targets: this,
|
| 791 |
+
scale: [1, 1.5],
|
| 792 |
+
opacity: [1, 0],
|
| 793 |
+
rotateY: '+=360',
|
| 794 |
+
duration: 800,
|
| 795 |
+
easing: 'easeInOutQuad',
|
| 796 |
+
complete: function() {
|
| 797 |
+
window.location.href = portal.href;
|
| 798 |
+
}
|
| 799 |
+
});
|
| 800 |
+
});
|
| 801 |
+
});
|
| 802 |
+
// 3D hover effects for reels
|
| 803 |
+
document.querySelectorAll('.reel').forEach(reel => {
|
| 804 |
+
reel.addEventListener('mouseenter', function() {
|
| 805 |
+
anime({
|
| 806 |
+
targets: this,
|
| 807 |
+
scale: 1.15,
|
| 808 |
+
translateZ: 40,
|
| 809 |
+
rotateX: -8,
|
| 810 |
+
rotateY: 8,
|
| 811 |
+
duration: 300,
|
| 812 |
+
easing: 'easeOutQuad'
|
| 813 |
+
});
|
| 814 |
+
});
|
| 815 |
+
reel.addEventListener('mouseleave', function() {
|
| 816 |
+
anime({
|
| 817 |
+
targets: this,
|
| 818 |
+
scale: 1,
|
| 819 |
+
translateZ: 0,
|
| 820 |
+
rotateX: 0,
|
| 821 |
+
rotateY: 0,
|
| 822 |
+
duration: 300,
|
| 823 |
+
easing: 'easeOutQuad'
|
| 824 |
+
});
|
| 825 |
+
});
|
| 826 |
+
});
|
| 827 |
+
// Interactive 3D tilt effect
|
| 828 |
+
document.addEventListener('mousemove', (e) => {
|
| 829 |
+
const x = e.clientX / window.innerWidth;
|
| 830 |
+
const y = e.clientY / window.innerHeight;
|
| 831 |
+
|
| 832 |
+
anime({
|
| 833 |
+
targets: '.feature-card',
|
| 834 |
+
rotateY: (x - 0.5) * 15,
|
| 835 |
+
rotateX: -(y - 0.5) * 15,
|
| 836 |
+
translateZ: 30,
|
| 837 |
+
easing: 'easeOutQuad',
|
| 838 |
+
duration: 500
|
| 839 |
+
});
|
| 840 |
+
|
| 841 |
+
anime({
|
| 842 |
+
targets: '.slot-machine',
|
| 843 |
+
rotateY: (x - 0.5) * 5,
|
| 844 |
+
rotateX: -(y - 0.5) * 5,
|
| 845 |
+
translateZ: 20,
|
| 846 |
+
easing: 'easeOutQuad',
|
| 847 |
+
duration: 1000
|
| 848 |
+
});
|
| 849 |
+
|
| 850 |
+
// Parallax effect for background elements
|
| 851 |
+
document.querySelectorAll('.particles div').forEach((particle, i) => {
|
| 852 |
+
const speed = 0.05;
|
| 853 |
+
const xPos = (x - 0.5) * i * speed;
|
| 854 |
+
const yPos = (y - 0.5) * i * speed;
|
| 855 |
+
particle.style.transform = `translate(${xPos}px, ${yPos}px) translateZ(${-i * 10}px)`;
|
| 856 |
+
});
|
| 857 |
+
});
|
| 858 |
+
|
| 859 |
+
// Touch support for mobile devices
|
| 860 |
+
document.addEventListener('touchmove', (e) => {
|
| 861 |
+
const touch = e.touches[0];
|
| 862 |
+
const x = touch.clientX / window.innerWidth;
|
| 863 |
+
const y = touch.clientY / window.innerHeight;
|
| 864 |
+
|
| 865 |
+
anime({
|
| 866 |
+
targets: '.feature-card',
|
| 867 |
+
rotateY: (x - 0.5) * 10,
|
| 868 |
+
rotateX: -(y - 0.5) * 10,
|
| 869 |
+
translateZ: 20,
|
| 870 |
+
easing: 'easeOutQuad',
|
| 871 |
+
duration: 300
|
| 872 |
+
});
|
| 873 |
+
});
|
| 874 |
+
});
|
| 875 |
+
</script>
|
| 876 |
+
|
| 877 |
+
<!-- Touch Feedback Overlay -->
|
| 878 |
+
<div id="touch-feedback" class="fixed inset-0 pointer-events-none z-50"></div>
|
| 879 |
+
|
| 880 |
+
<script>
|
| 881 |
+
// Enhanced touch feedback
|
| 882 |
+
document.addEventListener('touchstart', (e) => {
|
| 883 |
+
for (let i = 0; i < e.touches.length; i++) {
|
| 884 |
+
const touch = e.touches[i];
|
| 885 |
+
const feedback = document.createElement('div');
|
| 886 |
+
feedback.className = 'absolute w-6 h-6 bg-yellow-400/50 rounded-full pointer-events-none';
|
| 887 |
+
feedback.style.left = (touch.clientX - 12) + 'px';
|
| 888 |
+
feedback.style.top = (touch.clientY - 12) + 'px';
|
| 889 |
+
feedback.id = 'touch-' + touch.identifier;
|
| 890 |
+
document.getElementById('touch-feedback').appendChild(feedback);
|
| 891 |
+
|
| 892 |
+
anime({
|
| 893 |
+
targets: feedback,
|
| 894 |
+
scale: 3,
|
| 895 |
+
opacity: 0,
|
| 896 |
+
duration: 800,
|
| 897 |
+
easing: 'easeOutQuad',
|
| 898 |
+
complete: function() {
|
| 899 |
+
if (feedback.parentNode) {
|
| 900 |
+
feedback.parentNode.removeChild(feedback);
|
| 901 |
+
}
|
| 902 |
+
}
|
| 903 |
+
});
|
| 904 |
+
}
|
| 905 |
+
});
|
| 906 |
+
|
| 907 |
+
document.addEventListener('touchend', (e) => {
|
| 908 |
+
// Clean up touch points
|
| 909 |
+
const feedbacks = document.querySelectorAll('#touch-feedback div');
|
| 910 |
+
feedbacks.forEach(fb => {
|
| 911 |
+
anime({
|
| 912 |
+
targets: fb,
|
| 913 |
+
scale: 3,
|
| 914 |
+
opacity: 0,
|
| 915 |
+
duration: 300,
|
| 916 |
+
complete: function() {
|
| 917 |
+
if (fb.parentNode) {
|
| 918 |
+
fb.parentNode.removeChild(fb);
|
| 919 |
+
}
|
| 920 |
+
}
|
| 921 |
+
});
|
| 922 |
+
});
|
| 923 |
+
});
|
| 924 |
+
</script>
|
| 925 |
+
</body>
|
| 926 |
</html>
|
pirate-slots.html
ADDED
|
@@ -0,0 +1,308 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Pirate Slots | ReelRush Express</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.fog.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;600&display=swap');
|
| 13 |
+
|
| 14 |
+
:root {
|
| 15 |
+
--primary: #dc2626;
|
| 16 |
+
--primary-dark: #991b1b;
|
| 17 |
+
--bg: #1a1a1a;
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
body {
|
| 21 |
+
font-family: 'Poppins', sans-serif;
|
| 22 |
+
background-color: var(--bg);
|
| 23 |
+
color: #f8fafc;
|
| 24 |
+
overflow-x: hidden;
|
| 25 |
+
}
|
| 26 |
+
|
| 27 |
+
.pirate-gradient {
|
| 28 |
+
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
| 29 |
+
}
|
| 30 |
+
|
| 31 |
+
.ocean-bg {
|
| 32 |
+
background-image: url('http://static.photos/ocean/1200x630/1');
|
| 33 |
+
background-size: cover;
|
| 34 |
+
background-position: center;
|
| 35 |
+
background-blend-mode: overlay;
|
| 36 |
+
transform-style: preserve-3d;
|
| 37 |
+
perspective: 1000px;
|
| 38 |
+
}
|
| 39 |
+
|
| 40 |
+
.ship-3d {
|
| 41 |
+
transform-style: preserve-3d;
|
| 42 |
+
animation: rock 6s ease-in-out infinite;
|
| 43 |
+
}
|
| 44 |
+
|
| 45 |
+
.symbol-3d {
|
| 46 |
+
transform-style: preserve-3d;
|
| 47 |
+
transition: transform 0.3s ease;
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
.symbol-3d:hover {
|
| 51 |
+
transform: translateZ(25px) scale(1.15);
|
| 52 |
+
}
|
| 53 |
+
|
| 54 |
+
@keyframes rock {
|
| 55 |
+
0% { transform: rotate(-2deg) translateZ(0); }
|
| 56 |
+
50% { transform: rotate(2deg) translateZ(20px); }
|
| 57 |
+
100% { transform: rotate(-2deg) translateZ(0); }
|
| 58 |
+
}
|
| 59 |
+
|
| 60 |
+
.neuro-effect {
|
| 61 |
+
border-radius: 16px;
|
| 62 |
+
background: linear-gradient(145deg, #2d1810, #1a1a1a);
|
| 63 |
+
box-shadow: 8px 8px 16px #0a0a0a, -8px -8px 16px #3d2820;
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
.neuro-effect-hover:hover {
|
| 67 |
+
box-shadow: 12px 12px 24px #0a0a0a, -12px -12px 24px #3d2820;
|
| 68 |
+
transform: translateY(-2px);
|
| 69 |
+
}
|
| 70 |
+
</style>
|
| 71 |
+
</head>
|
| 72 |
+
<body class="ocean-bg">
|
| 73 |
+
<div id="vanta-bg" class="fixed inset-0 z-0"></div>
|
| 74 |
+
<div class="fixed inset-0 bg-black/75 z-0"></div>
|
| 75 |
+
|
| 76 |
+
<header class="pirate-gradient py-6 px-4 sm:px-6 lg:px-8 sticky top-0 z-50" style="transform: translateZ(50px);">
|
| 77 |
+
<div class="container mx-auto flex items-center justify-between">
|
| 78 |
+
<div class="flex items-center">
|
| 79 |
+
<div class="mr-3 p-2 bg-red-700 rounded-full neuro-effect">
|
| 80 |
+
<i data-feather="anchor" class="text-white"></i>
|
| 81 |
+
</div>
|
| 82 |
+
<h1 class="text-2xl md:text-3xl font-bold font-serif">TREASURE HUNT</h1>
|
| 83 |
+
</div>
|
| 84 |
+
<a href="/" class="px-4 py-2 bg-red-700 hover:bg-red-800 rounded-full font-medium transition neuro-effect flex items-center">
|
| 85 |
+
<i data-feather="arrow-left" class="mr-1 w-4 h-4"></i> Back to Main
|
| 86 |
+
</a>
|
| 87 |
+
</div>
|
| 88 |
+
</header>
|
| 89 |
+
|
| 90 |
+
<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-20">
|
| 91 |
+
<!-- 3D Ship Showcase -->
|
| 92 |
+
<section class="mb-16 text-center">
|
| 93 |
+
<div class="ship-3d mx-auto w-64 h-64 mb-8 relative">
|
| 94 |
+
<div class="absolute inset-0 bg-red-500/20 clip-path-ship transform rotate-45" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div>
|
| 95 |
+
<div class="absolute inset-4 bg-red-600/30 rounded-full animate-pulse"></div>
|
| 96 |
+
<div class="absolute inset-8 bg-red-700/40 rounded-full animate-pulse" style="animation-delay: 0.5s;"></div>
|
| 97 |
+
</div>
|
| 98 |
+
<h2 class="text-4xl font-bold mb-4 font-serif">Plunder the Seven Seas</h2>
|
| 99 |
+
<p class="text-xl max-w-2xl mx-auto">Set sail for adventure and untold riches on the high seas</p>
|
| 100 |
+
</section>
|
| 101 |
+
|
| 102 |
+
<!-- Interactive 3D Slot Machine -->
|
| 103 |
+
<section class="mb-16">
|
| 104 |
+
<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;">
|
| 105 |
+
<div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-red-600/5 blur-xl"></div>
|
| 106 |
+
<div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-red-600/5 blur-xl"></div>
|
| 107 |
+
|
| 108 |
+
<div class="relative z-10">
|
| 109 |
+
<div class="flex justify-center space-x-6 mb-8" style="transform-style: preserve-3d;">
|
| 110 |
+
<!-- Reel 1 -->
|
| 111 |
+
<div class="reel bg-gray-800 neuro-effect rounded-lg w-28 h-40 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition"
|
| 112 |
+
style="transform-style: preserve-3d; box-shadow: 0 15px 30px rgba(0,0,0,0.6); transform: translateZ(25px);">
|
| 113 |
+
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;">
|
| 114 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 115 |
+
<img src="http://static.photos/red/120x120/1" class="w-24 h-24 object-contain symbol-3d" alt="Treasure Chest">
|
| 116 |
+
</div>
|
| 117 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 118 |
+
<img src="http://static.photos/red/120x120/2" class="w-24 h-24 object-contain symbol-3d" alt="Pirate Flag">
|
| 119 |
+
</div>
|
| 120 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 121 |
+
<img src="http://static.photos/red/120x120/3" class="w-24 h-24 object-contain symbol-3d" alt="Ship Wheel">
|
| 122 |
+
</div>
|
| 123 |
+
</div>
|
| 124 |
+
</div>
|
| 125 |
+
|
| 126 |
+
<!-- Reel 2 -->
|
| 127 |
+
<div class="reel bg-gray-800 neuro-effect rounded-lg w-28 h-40 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition"
|
| 128 |
+
style="transform-style: preserve-3d; box-shadow: 0 15px 30px rgba(0,0,0,0.6); transform: translateZ(25px);">
|
| 129 |
+
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;">
|
| 130 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 131 |
+
<img src="http://static.photos/red/120x120/4" class="w-24 h-24 object-contain symbol-3d" alt="Gold Coin">
|
| 132 |
+
</div>
|
| 133 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 134 |
+
<img src="http://static.photos/red/120x120/5" class="w-24 h-24 object-contain symbol-3d" alt="Parrot">
|
| 135 |
+
</div>
|
| 136 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 137 |
+
<img src="http://static.photos/red/120x120/6" class="w-24 h-24 object-contain symbol-3d" alt="Cannon">
|
| 138 |
+
</div>
|
| 139 |
+
</div>
|
| 140 |
+
</div>
|
| 141 |
+
|
| 142 |
+
<!-- Reel 3 -->
|
| 143 |
+
<div class="reel bg-gray-800 neuro-effect rounded-lg w-28 h-40 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition"
|
| 144 |
+
style="transform-style: preserve-3d; box-shadow: 0 15px 30px rgba(0,0,0,0.6); transform: translateZ(25px);">
|
| 145 |
+
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;">
|
| 146 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 147 |
+
<img src="http://static.photos/red/120x120/7" class="w-24 h-24 object-contain symbol-3d" alt="Map">
|
| 148 |
+
</div>
|
| 149 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 150 |
+
<img src="http://static.photos/red/120x120/8" class="w-24 h-24 object-contain symbol-3d" alt="Sword">
|
| 151 |
+
</div>
|
| 152 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 153 |
+
<img src="http://static.photos/red/120x120/9" class="w-24 h-24 object-contain symbol-3d" alt="Skull">
|
| 154 |
+
</div>
|
| 155 |
+
</div>
|
| 156 |
+
</div>
|
| 157 |
+
</div>
|
| 158 |
+
|
| 159 |
+
<div class="flex justify-center">
|
| 160 |
+
<button id="spin-btn" class="px-12 py-4 bg-red-600 hover:bg-red-700 rounded-full font-bold text-lg transition neuro-effect neuro-effect-hover flex items-center transform hover:scale-105">
|
| 161 |
+
<i data-feather="play" class="mr-2"></i> SET SAIL
|
| 162 |
+
</button>
|
| 163 |
+
</div>
|
| 164 |
+
</div>
|
| 165 |
+
</div>
|
| 166 |
+
</section>
|
| 167 |
+
|
| 168 |
+
<!-- 3D Feature Cards -->
|
| 169 |
+
<section>
|
| 170 |
+
<h2 class="text-3xl font-bold text-center mb-12 font-serif">Pirate's Fortune</h2>
|
| 171 |
+
|
| 172 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 173 |
+
<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;">
|
| 174 |
+
<div class="w-16 h-16 bg-red-600/20 rounded-full flex items-center justify-center mb-4 neuro-effect mx-auto" style="transform: translateZ(20px);">
|
| 175 |
+
<i data-feather="star" class="text-red-400"></i>
|
| 176 |
+
</div>
|
| 177 |
+
<h3 class="text-xl font-bold mb-3 text-center">Treasure Bonus</h3>
|
| 178 |
+
<p class="text-gray-300 text-center">X marks the spot for massive payouts</p>
|
| 179 |
+
</div>
|
| 180 |
+
|
| 181 |
+
<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;">
|
| 182 |
+
<div class="w-16 h-16 bg-red-600/20 rounded-full flex items-center justify-center mb-4 neuro-effect mx-auto" style="transform: translateZ(20px);">
|
| 183 |
+
<i data-feather="wind" class="text-red-400"></i>
|
| 184 |
+
</div>
|
| 185 |
+
<h3 class="text-xl font-bold mb-3 text-center">Storm Surge</h3>
|
| 186 |
+
<p class="text-gray-300 text-center">Ride the waves for wild multipliers</p>
|
| 187 |
+
</div>
|
| 188 |
+
|
| 189 |
+
<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;">
|
| 190 |
+
<div class="w-16 h-16 bg-red-600/20 rounded-full flex items-center justify-center mb-4 neuro-effect mx-auto" style="transform: translateZ(20px);">
|
| 191 |
+
<i data-feather="shield" class="text-red-400"></i>
|
| 192 |
+
</div>
|
| 193 |
+
<h3 class="text-xl font-bold mb-3 text-center">Captain's Luck</h3>
|
| 194 |
+
<p class="text-gray-300 text-center">Command your fortune with skill</p>
|
| 195 |
+
</div>
|
| 196 |
+
</div>
|
| 197 |
+
</section>
|
| 198 |
+
</main>
|
| 199 |
+
|
| 200 |
+
<footer class="bg-gray-900/80 py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
|
| 201 |
+
<div class="container mx-auto relative z-10">
|
| 202 |
+
<div class="text-center text-gray-500 text-sm">
|
| 203 |
+
© 2023 ReelRush Express. High seas slot adventures.
|
| 204 |
+
</div>
|
| 205 |
+
</div>
|
| 206 |
+
</footer>
|
| 207 |
+
|
| 208 |
+
<script>
|
| 209 |
+
// Initialize Vanta.js background
|
| 210 |
+
VANTA.FOG({
|
| 211 |
+
el: "#vanta-bg",
|
| 212 |
+
mouseControls: true,
|
| 213 |
+
touchControls: true,
|
| 214 |
+
gyroControls: false,
|
| 215 |
+
minHeight: 200.00,
|
| 216 |
+
minWidth: 200.00,
|
| 217 |
+
highlightColor: 0xdc2626,
|
| 218 |
+
midtoneColor: 0x991b1b,
|
| 219 |
+
lowlightColor: 0x1a1a1a,
|
| 220 |
+
baseColor: 0x000000
|
| 221 |
+
});
|
| 222 |
+
|
| 223 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 224 |
+
feather.replace();
|
| 225 |
+
|
| 226 |
+
// 3D Spin Animation
|
| 227 |
+
document.getElementById('spin-btn').addEventListener('click', function() {
|
| 228 |
+
const btn = this;
|
| 229 |
+
const reels = document.querySelectorAll('.reel-items');
|
| 230 |
+
|
| 231 |
+
// Disable button during spin
|
| 232 |
+
btn.disabled = true;
|
| 233 |
+
btn.innerHTML = '<i data-feather="loader" class="mr-2 animate-spin"></i> RAISING SAILS...';
|
| 234 |
+
feather.replace();
|
| 235 |
+
|
| 236 |
+
// 3D Reel spin animation
|
| 237 |
+
reels.forEach((reel, index) => {
|
| 238 |
+
anime({
|
| 239 |
+
targets: reel,
|
| 240 |
+
translateY: [0, anime.random(-800, -400)],
|
| 241 |
+
translateZ: [0, anime.random(50, 100)],
|
| 242 |
+
rotateX: [0, anime.random(360, 720)],
|
| 243 |
+
duration: anime.random(2000, 3000),
|
| 244 |
+
delay: index * 200,
|
| 245 |
+
easing: 'easeInOutQuad',
|
| 246 |
+
complete: function() {
|
| 247 |
+
// Reset to winning position
|
| 248 |
+
anime({
|
| 249 |
+
targets: reel,
|
| 250 |
+
translateY: 0,
|
| 251 |
+
translateZ: 0,
|
| 252 |
+
rotateX: 0,
|
| 253 |
+
duration: 1000,
|
| 254 |
+
easing: 'spring(1, 80, 10, 0)'
|
| 255 |
+
});
|
| 256 |
+
}
|
| 257 |
+
});
|
| 258 |
+
});
|
| 259 |
+
|
| 260 |
+
// Re-enable button after spin
|
| 261 |
+
setTimeout(() => {
|
| 262 |
+
btn.disabled = false;
|
| 263 |
+
btn.innerHTML = '<i data-feather="play" class="mr-2"></i> SET SAIL';
|
| 264 |
+
feather.replace();
|
| 265 |
+
}, 3000);
|
| 266 |
+
});
|
| 267 |
+
|
| 268 |
+
// 3D hover effects for symbols
|
| 269 |
+
document.querySelectorAll('.symbol-3d').forEach(symbol => {
|
| 270 |
+
symbol.addEventListener('mouseenter', function() {
|
| 271 |
+
anime({
|
| 272 |
+
targets: this,
|
| 273 |
+
scale: 1.2,
|
| 274 |
+
translateZ: 40,
|
| 275 |
+
duration: 300,
|
| 276 |
+
easing: 'easeOutQuad'
|
| 277 |
+
});
|
| 278 |
+
});
|
| 279 |
+
|
| 280 |
+
symbol.addEventListener('mouseleave', function() {
|
| 281 |
+
anime({
|
| 282 |
+
targets: this,
|
| 283 |
+
scale: 1,
|
| 284 |
+
translateZ: 0,
|
| 285 |
+
duration: 300,
|
| 286 |
+
easing: 'easeOutQuad'
|
| 287 |
+
});
|
| 288 |
+
});
|
| 289 |
+
});
|
| 290 |
+
|
| 291 |
+
// Interactive 3D tilt effect
|
| 292 |
+
document.addEventListener('mousemove', (e) => {
|
| 293 |
+
const x = e.clientX / window.innerWidth;
|
| 294 |
+
const y = e.clientY / window.innerHeight;
|
| 295 |
+
|
| 296 |
+
anime({
|
| 297 |
+
targets: '.feature-card',
|
| 298 |
+
rotateY: (x - 0.5) * 15,
|
| 299 |
+
rotateX: -(y - 0.5) * 15,
|
| 300 |
+
translateZ: 30,
|
| 301 |
+
easing: 'easeOutQuad',
|
| 302 |
+
duration: 500
|
| 303 |
+
});
|
| 304 |
+
});
|
| 305 |
+
});
|
| 306 |
+
</script>
|
| 307 |
+
</body>
|
| 308 |
+
</html>
|
space-slots.html
ADDED
|
@@ -0,0 +1,311 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Space Slots | ReelRush Express</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;600&display=swap');
|
| 13 |
+
|
| 14 |
+
:root {
|
| 15 |
+
--primary: #3b82f6;
|
| 16 |
+
--primary-dark: #1d4ed8;
|
| 17 |
+
--bg: #0b0c1a;
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
body {
|
| 21 |
+
font-family: 'Poppins', sans-serif;
|
| 22 |
+
background-color: var(--bg);
|
| 23 |
+
color: #f8fafc;
|
| 24 |
+
overflow-x: hidden;
|
| 25 |
+
}
|
| 26 |
+
|
| 27 |
+
.space-gradient {
|
| 28 |
+
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
| 29 |
+
}
|
| 30 |
+
|
| 31 |
+
.cosmic-bg {
|
| 32 |
+
background-image: url('http://static.photos/space/1200x630/1');
|
| 33 |
+
background-size: cover;
|
| 34 |
+
background-position: center;
|
| 35 |
+
background-blend-mode: overlay;
|
| 36 |
+
transform-style: preserve-3d;
|
| 37 |
+
perspective: 1000px;
|
| 38 |
+
}
|
| 39 |
+
|
| 40 |
+
.planet-3d {
|
| 41 |
+
transform-style: preserve-3d;
|
| 42 |
+
animation: float 8s ease-in-out infinite;
|
| 43 |
+
}
|
| 44 |
+
|
| 45 |
+
.symbol-3d {
|
| 46 |
+
transform-style: preserve-3d;
|
| 47 |
+
transition: transform 0.3s ease;
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
.symbol-3d:hover {
|
| 51 |
+
transform: translateZ(25px) scale(1.15);
|
| 52 |
+
}
|
| 53 |
+
|
| 54 |
+
@keyframes float {
|
| 55 |
+
0% { transform: translateY(0px) translateZ(0); }
|
| 56 |
+
50% { transform: translateY(-20px) translateZ(20px); }
|
| 57 |
+
100% { transform: translateY(0px) translateZ(0); }
|
| 58 |
+
}
|
| 59 |
+
|
| 60 |
+
.neuro-effect {
|
| 61 |
+
border-radius: 16px;
|
| 62 |
+
background: linear-gradient(145deg, #1e293b, #0f172a);
|
| 63 |
+
box-shadow: 8px 8px 16px #0a101f, -8px -8px 16px #1a2235;
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
.neuro-effect-hover:hover {
|
| 67 |
+
box-shadow: 12px 12px 24px #0a101f, -12px -12px 24px #1a2235;
|
| 68 |
+
transform: translateY(-2px);
|
| 69 |
+
}
|
| 70 |
+
</style>
|
| 71 |
+
</head>
|
| 72 |
+
<body class="cosmic-bg">
|
| 73 |
+
<div id="vanta-bg" class="fixed inset-0 z-0"></div>
|
| 74 |
+
<div class="fixed inset-0 bg-black/80 z-0"></div>
|
| 75 |
+
|
| 76 |
+
<header class="space-gradient py-6 px-4 sm:px-6 lg:px-8 sticky top-0 z-50" style="transform: translateZ(50px);">
|
| 77 |
+
<div class="container mx-auto flex items-center justify-between">
|
| 78 |
+
<div class="flex items-center">
|
| 79 |
+
<div class="mr-3 p-2 bg-blue-700 rounded-full neuro-effect">
|
| 80 |
+
<i data-feather="globe" class="text-white"></i>
|
| 81 |
+
</div>
|
| 82 |
+
<h1 class="text-2xl md:text-3xl font-bold font-serif">COSMIC WINS</h1>
|
| 83 |
+
</div>
|
| 84 |
+
<a href="/" class="px-4 py-2 bg-blue-700 hover:bg-blue-800 rounded-full font-medium transition neuro-effect flex items-center">
|
| 85 |
+
<i data-feather="arrow-left" class="mr-1 w-4 h-4"></i> Back to Main
|
| 86 |
+
</a>
|
| 87 |
+
</div>
|
| 88 |
+
</header>
|
| 89 |
+
|
| 90 |
+
<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-20">
|
| 91 |
+
<!-- 3D Planet Showcase -->
|
| 92 |
+
<section class="mb-16 text-center">
|
| 93 |
+
<div class="planet-3d mx-auto w-64 h-64 mb-8 relative">
|
| 94 |
+
<div class="absolute inset-0 bg-blue-500/20 rounded-full animate-pulse"></div>
|
| 95 |
+
<div class="absolute inset-4 bg-blue-600/30 rounded-full animate-pulse" style="animation-delay: 0.5s;"></div>
|
| 96 |
+
<div class="absolute inset-8 bg-blue-700/40 rounded-full animate-pulse" style="animation-delay: 1s;"></div>
|
| 97 |
+
</div>
|
| 98 |
+
<h2 class="text-4xl font-bold mb-4 font-serif">Journey Through the Cosmos</h2>
|
| 99 |
+
<p class="text-xl max-w-2xl mx-auto">Navigate asteroid fields and discover alien treasures</p>
|
| 100 |
+
</section>
|
| 101 |
+
|
| 102 |
+
<!-- Interactive 3D Slot Machine -->
|
| 103 |
+
<section class="mb-16">
|
| 104 |
+
<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;">
|
| 105 |
+
<div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-blue-600/5 blur-xl"></div>
|
| 106 |
+
<div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-blue-600/5 blur-xl"></div>
|
| 107 |
+
|
| 108 |
+
<div class="relative z-10">
|
| 109 |
+
<div class="flex justify-center space-x-6 mb-8" style="transform-style: preserve-3d;">
|
| 110 |
+
<!-- Reel 1 -->
|
| 111 |
+
<div class="reel bg-gray-800 neuro-effect rounded-lg w-28 h-40 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition"
|
| 112 |
+
style="transform-style: preserve-3d; box-shadow: 0 15px 30px rgba(0,0,0,0.6); transform: translateZ(25px);">
|
| 113 |
+
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;">
|
| 114 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 115 |
+
<img src="http://static.photos/blue/120x120/1" class="w-24 h-24 object-contain symbol-3d" alt="Rocket">
|
| 116 |
+
</div>
|
| 117 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 118 |
+
<img src="http://static.photos/blue/120x120/2" class="w-24 h-24 object-contain symbol-3d" alt="Asteroid">
|
| 119 |
+
</div>
|
| 120 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 121 |
+
<img src="http://static.photos/blue/120x120/3" class="w-24 h-24 object-contain symbol-3d" alt="Satellite">
|
| 122 |
+
</div>
|
| 123 |
+
</div>
|
| 124 |
+
</div>
|
| 125 |
+
|
| 126 |
+
<!-- Reel 2 -->
|
| 127 |
+
<div class="reel bg-gray-800 neuro-effect rounded-lg w-28 h-40 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition"
|
| 128 |
+
style="transform-style: preserve-3d; box-shadow: 0 15px 30px rgba(0,0,0,0.6); transform: translateZ(25px);">
|
| 129 |
+
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;">
|
| 130 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 131 |
+
<img src="http://static.photos/blue/120x120/4" class="w-24 h-24 object-contain symbol-3d" alt="Alien">
|
| 132 |
+
</div>
|
| 133 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 134 |
+
<img src="http://static.photos/blue/120x120/5" class="w-24 h-24 object-contain symbol-3d" alt="Spaceship">
|
| 135 |
+
</div>
|
| 136 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 137 |
+
<img src="http://static.photos/blue/120x120/6" class="w-24 h-24 object-contain symbol-3d" alt="Planet">
|
| 138 |
+
</div>
|
| 139 |
+
</div>
|
| 140 |
+
</div>
|
| 141 |
+
|
| 142 |
+
<!-- Reel 3 -->
|
| 143 |
+
<div class="reel bg-gray-800 neuro-effect rounded-lg w-28 h-40 overflow-hidden relative cursor-pointer hover:bg-gray-700 transition"
|
| 144 |
+
style="transform-style: preserve-3d; box-shadow: 0 15px 30px rgba(0,0,0,0.6); transform: translateZ(25px);">
|
| 145 |
+
<div class="reel-items absolute w-full" style="transform-style: preserve-3d;">
|
| 146 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 147 |
+
<img src="http://static.photos/blue/120x120/7" class="w-24 h-24 object-contain symbol-3d" alt="Black Hole">
|
| 148 |
+
</div>
|
| 149 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 150 |
+
<img src="http://static.photos/blue/120x120/8" class="w-24 h-24 object-contain symbol-3d" alt="Comet">
|
| 151 |
+
</div>
|
| 152 |
+
<div class="reel-item w-full h-40 flex items-center justify-center" style="transform: translateZ(35px);">
|
| 153 |
+
<img src="http://static.photos/blue/120x120/9" class="w-24 h-24 object-contain symbol-3d" alt="Galaxy">
|
| 154 |
+
</div>
|
| 155 |
+
</div>
|
| 156 |
+
</div>
|
| 157 |
+
</div>
|
| 158 |
+
|
| 159 |
+
<div class="flex justify-center">
|
| 160 |
+
<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">
|
| 161 |
+
<i data-feather="play" class="mr-2"></i> LAUNCH REELS
|
| 162 |
+
</button>
|
| 163 |
+
</div>
|
| 164 |
+
</div>
|
| 165 |
+
</div>
|
| 166 |
+
</section>
|
| 167 |
+
|
| 168 |
+
<!-- 3D Feature Cards -->
|
| 169 |
+
<section>
|
| 170 |
+
<h2 class="text-3xl font-bold text-center mb-12 font-serif">Celestial Rewards</h2>
|
| 171 |
+
|
| 172 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 173 |
+
<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;">
|
| 174 |
+
<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);">
|
| 175 |
+
<i data-feather="star" class="text-blue-400"></i>
|
| 176 |
+
</div>
|
| 177 |
+
<h3 class="text-xl font-bold mb-3 text-center">Nebula Bonus</h3>
|
| 178 |
+
<p class="text-gray-300 text-center">Spin through colorful nebulae for bonus multipliers</p>
|
| 179 |
+
</div>
|
| 180 |
+
|
| 181 |
+
<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;">
|
| 182 |
+
<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);">
|
| 183 |
+
<i data-feather="zap" class="text-blue-400"></i>
|
| 184 |
+
</div>
|
| 185 |
+
<h3 class="text-xl font-bold mb-3 text-center">Solar Flare</h3>
|
| 186 |
+
<p class="text-gray-300 text-center">Electrifying wins with cosmic energy surges</p>
|
| 187 |
+
</div>
|
| 188 |
+
|
| 189 |
+
<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;">
|
| 190 |
+
<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);">
|
| 191 |
+
<i data-feather="globe" class="text-blue-400"></i>
|
| 192 |
+
</div>
|
| 193 |
+
<h3 class="text-xl font-bold mb-3 text-center">Galactic Jackpot</h3>
|
| 194 |
+
<p class="text-gray-300 text-center">Universal alignment for massive payouts</p>
|
| 195 |
+
</div>
|
| 196 |
+
</div>
|
| 197 |
+
</section>
|
| 198 |
+
</main>
|
| 199 |
+
|
| 200 |
+
<footer class="bg-gray-900/80 py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
|
| 201 |
+
<div class="container mx-auto relative z-10">
|
| 202 |
+
<div class="text-center text-gray-500 text-sm">
|
| 203 |
+
© 2023 ReelRush Express. Cosmic slot adventures.
|
| 204 |
+
</div>
|
| 205 |
+
</div>
|
| 206 |
+
</footer>
|
| 207 |
+
|
| 208 |
+
<script>
|
| 209 |
+
// Initialize Vanta.js background
|
| 210 |
+
VANTA.NET({
|
| 211 |
+
el: "#vanta-bg",
|
| 212 |
+
mouseControls: true,
|
| 213 |
+
touchControls: true,
|
| 214 |
+
gyroControls: false,
|
| 215 |
+
minHeight: 200.00,
|
| 216 |
+
minWidth: 200.00,
|
| 217 |
+
scale: 1.00,
|
| 218 |
+
scaleMobile: 1.00,
|
| 219 |
+
color: 0x3b82f6,
|
| 220 |
+
backgroundColor: 0x0b0c1a,
|
| 221 |
+
points: 15.00,
|
| 222 |
+
maxDistance: 25.00,
|
| 223 |
+
spacing: 20.00
|
| 224 |
+
});
|
| 225 |
+
|
| 226 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 227 |
+
feather.replace();
|
| 228 |
+
|
| 229 |
+
// 3D Spin Animation
|
| 230 |
+
document.getElementById('spin-btn').addEventListener('click', function() {
|
| 231 |
+
const btn = this;
|
| 232 |
+
const reels = document.querySelectorAll('.reel-items');
|
| 233 |
+
|
| 234 |
+
// Disable button during spin
|
| 235 |
+
btn.disabled = true;
|
| 236 |
+
btn.innerHTML = '<i data-feather="loader" class="mr-2 animate-spin"></i> TRAVELING...';
|
| 237 |
+
feather.replace();
|
| 238 |
+
|
| 239 |
+
// 3D Reel spin animation
|
| 240 |
+
reels.forEach((reel, index) => {
|
| 241 |
+
anime({
|
| 242 |
+
targets: reel,
|
| 243 |
+
translateY: [0, anime.random(-800, -400)],
|
| 244 |
+
translateZ: [0, anime.random(50, 100)],
|
| 245 |
+
rotateX: [0, anime.random(360, 720)],
|
| 246 |
+
duration: anime.random(2000, 3000),
|
| 247 |
+
delay: index * 200,
|
| 248 |
+
easing: 'easeInOutQuad',
|
| 249 |
+
complete: function() {
|
| 250 |
+
// Reset to winning position
|
| 251 |
+
anime({
|
| 252 |
+
targets: reel,
|
| 253 |
+
translateY: 0,
|
| 254 |
+
translateZ: 0,
|
| 255 |
+
rotateX: 0,
|
| 256 |
+
duration: 1000,
|
| 257 |
+
easing: 'spring(1, 80, 10, 0)'
|
| 258 |
+
});
|
| 259 |
+
}
|
| 260 |
+
});
|
| 261 |
+
});
|
| 262 |
+
|
| 263 |
+
// Re-enable button after spin
|
| 264 |
+
setTimeout(() => {
|
| 265 |
+
btn.disabled = false;
|
| 266 |
+
btn.innerHTML = '<i data-feather="play" class="mr-2"></i> LAUNCH REELS';
|
| 267 |
+
feather.replace();
|
| 268 |
+
}, 3000);
|
| 269 |
+
});
|
| 270 |
+
|
| 271 |
+
// 3D hover effects for symbols
|
| 272 |
+
document.querySelectorAll('.symbol-3d').forEach(symbol => {
|
| 273 |
+
symbol.addEventListener('mouseenter', function() {
|
| 274 |
+
anime({
|
| 275 |
+
targets: this,
|
| 276 |
+
scale: 1.2,
|
| 277 |
+
translateZ: 40,
|
| 278 |
+
duration: 300,
|
| 279 |
+
easing: 'easeOutQuad'
|
| 280 |
+
});
|
| 281 |
+
});
|
| 282 |
+
|
| 283 |
+
symbol.addEventListener('mouseleave', function() {
|
| 284 |
+
anime({
|
| 285 |
+
targets: this,
|
| 286 |
+
scale: 1,
|
| 287 |
+
translateZ: 0,
|
| 288 |
+
duration: 300,
|
| 289 |
+
easing: 'easeOutQuad'
|
| 290 |
+
});
|
| 291 |
+
});
|
| 292 |
+
});
|
| 293 |
+
|
| 294 |
+
// Interactive 3D tilt effect
|
| 295 |
+
document.addEventListener('mousemove', (e) => {
|
| 296 |
+
const x = e.clientX / window.innerWidth;
|
| 297 |
+
const y = e.clientY / window.innerHeight;
|
| 298 |
+
|
| 299 |
+
anime({
|
| 300 |
+
targets: '.feature-card',
|
| 301 |
+
rotateY: (x - 0.5) * 15,
|
| 302 |
+
rotateX: -(y - 0.5) * 15,
|
| 303 |
+
translateZ: 30,
|
| 304 |
+
easing: 'easeOutQuad',
|
| 305 |
+
duration: 500
|
| 306 |
+
});
|
| 307 |
+
});
|
| 308 |
+
});
|
| 309 |
+
</script>
|
| 310 |
+
</body>
|
| 311 |
+
</html>
|