|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>EERO - The Cutting Edge of Rap</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
background-color: #000; |
|
|
color: white; |
|
|
overflow: hidden; |
|
|
height: 100vh; |
|
|
margin: 0; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.razor-font { |
|
|
font-family: 'Anton', sans-serif; |
|
|
letter-spacing: 2px; |
|
|
} |
|
|
|
|
|
.bebas-font { |
|
|
font-family: 'Bebas Neue', cursive; |
|
|
} |
|
|
|
|
|
.page { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
transition: all 1s ease-in-out; |
|
|
transform-origin: center center; |
|
|
backface-visibility: hidden; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.page.active { |
|
|
transform: scale(1); |
|
|
opacity: 1; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.page.inactive { |
|
|
transform: scale(0.5); |
|
|
opacity: 0; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.page.next { |
|
|
transform: scale(1.5); |
|
|
opacity: 0; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.razor-edge { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.razor-edge::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 3px; |
|
|
background: linear-gradient(90deg, #ff0000, #ff6600, #ff0000); |
|
|
transform: skewX(-45deg); |
|
|
} |
|
|
|
|
|
.razor-btn { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.razor-btn::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); |
|
|
transition: all 0.5s; |
|
|
} |
|
|
|
|
|
.razor-btn:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.vinyl { |
|
|
animation: spin 5s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.graffiti-bg { |
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="50" font-family="Arial" font-size="20" fill="rgba(255,255,255,0.05)" transform="rotate(45)">RAZOR</text></svg>'); |
|
|
background-repeat: repeat; |
|
|
} |
|
|
|
|
|
.razor-cut { |
|
|
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); |
|
|
} |
|
|
|
|
|
.scroll-hint { |
|
|
animation: bounce 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 20%, 50%, 80%, 100% {transform: translateY(0);} |
|
|
40% {transform: translateY(-20px);} |
|
|
60% {transform: translateY(-10px);} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="graffiti-bg"> |
|
|
|
|
|
<div class="page active" id="page1"> |
|
|
<div class="h-full w-full flex flex-col justify-center items-center text-center px-4 relative razor-cut bg-gradient-to-b from-black to-red-900"> |
|
|
<div class="absolute top-4 right-4 text-red-500"> |
|
|
<span class="text-sm">COMING SOON</span> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8 pulse"> |
|
|
<div class="w-40 h-40 md:w-60 md:h-60 bg-black rounded-full border-8 border-red-500 flex items-center justify-center relative overflow-hidden"> |
|
|
<div class="absolute w-full h-full bg-gradient-to-br from-transparent via-red-900 to-transparent opacity-50"></div> |
|
|
<div class="w-16 h-16 md:w-24 md:h-24 bg-white rounded-full z-10"></div> |
|
|
<div class="vinyl absolute w-32 h-32 md:w-48 md:h-48 rounded-full bg-black border-4 border-white flex items-center justify-center"> |
|
|
<div class="w-24 h-24 md:w-36 md:h-36 rounded-full bg-gradient-to-br from-red-500 to-black"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h1 class="text-6xl md:text-8xl font-bold mb-2 razor-font text-red-500">EERO</h1> |
|
|
<p class="text-xl md:text-2xl mb-6 bebas-font">THE CUTTING EDGE OF RAP</p> |
|
|
|
|
|
<div class="flex space-x-4 mb-12"> |
|
|
<a href="#" class="razor-btn bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full font-bold transition-all duration-300 transform hover:scale-105"> |
|
|
PRE-SAVE |
|
|
</a> |
|
|
<a href="#" class="razor-btn bg-transparent border-2 border-white hover:bg-white hover:text-black text-white px-6 py-3 rounded-full font-bold transition-all duration-300 transform hover:scale-105"> |
|
|
TOUR DATES |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-8 left-0 right-0 flex justify-center scroll-hint"> |
|
|
<div class="text-center"> |
|
|
<p class="text-sm mb-2">ZOOM IN TO EXPLORE</p> |
|
|
<i class="fas fa-chevron-down text-xl animate-bounce"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="page inactive" id="page2"> |
|
|
<div class="h-full w-full bg-gradient-to-b from-black to-gray-900 p-8 md:p-12 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
|
|
<h2 class="text-4xl md:text-6xl font-bold mb-6 razor-font text-red-500 razor-edge">THE STORY</h2> |
|
|
<p class="text-lg md:text-xl mb-6 leading-relaxed"> |
|
|
Born in the concrete jungle, EERO cut his teeth on the streets, turning struggle into art. |
|
|
His razor-sharp lyrics slice through the noise, delivering raw truth with a flow that cuts deep. |
|
|
</p> |
|
|
<p class="text-lg md:text-xl mb-6 leading-relaxed"> |
|
|
From underground battles to viral fame, EERO's journey is one of relentless hustle and undeniable talent. |
|
|
His debut album "Cut Throat" is set to redefine the rap game. |
|
|
</p> |
|
|
<div class="flex space-x-4 mt-8"> |
|
|
<a href="#" class="razor-btn bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full font-bold transition-all duration-300 transform hover:scale-105"> |
|
|
FULL BIO |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="relative"> |
|
|
<div class="w-full h-96 bg-gray-800 rounded-lg overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="text-center p-8"> |
|
|
<i class="fas fa-quote-left text-red-500 text-4xl mb-4"></i> |
|
|
<p class="text-xl italic mb-4">"I don't rap, I perform audio surgery. Every bar is a scalpel, every hook is a suture."</p> |
|
|
<p class="text-red-500 font-bold">- EERO</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-4 -right-4 w-32 h-32 bg-red-500 rounded-full flex items-center justify-center text-black font-bold razor-font"> |
|
|
EERO |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-8 left-0 right-0 flex justify-center scroll-hint"> |
|
|
<div class="text-center"> |
|
|
<p class="text-sm mb-2">ZOOM IN TO EXPLORE</p> |
|
|
<i class="fas fa-chevron-down text-xl animate-bounce"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="page inactive" id="page3"> |
|
|
<div class="h-full w-full bg-gradient-to-b from-black to-blue-900 p-8 md:p-12"> |
|
|
<h2 class="text-4xl md:text-6xl font-bold mb-12 razor-font text-red-500 text-center razor-edge">THE SOUND</h2> |
|
|
|
|
|
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="bg-black bg-opacity-50 rounded-xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300"> |
|
|
<div class="relative"> |
|
|
<div class="h-48 bg-gradient-to-r from-red-900 to-blue-900 flex items-center justify-center"> |
|
|
<div class="w-32 h-32 bg-black rounded-full border-4 border-white flex items-center justify-center vinyl"> |
|
|
<div class="w-24 h-24 rounded-full bg-gradient-to-br from-red-500 to-blue-500"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute top-4 left-4 bg-red-500 text-black px-3 py-1 rounded-full text-sm font-bold"> |
|
|
NEW |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold mb-2 razor-font">CUT THROAT</h3> |
|
|
<p class="text-gray-400 mb-4">Lead single from the debut album</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center hover:bg-red-600"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="text-sm">2:45</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-black bg-opacity-50 rounded-xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300"> |
|
|
<div class="h-48 bg-gradient-to-r from-blue-900 to-purple-900 flex items-center justify-center"> |
|
|
<div class="w-32 h-32 bg-black rounded-full border-4 border-white flex items-center justify-center vinyl"> |
|
|
<div class="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-purple-500"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold mb-2 razor-font">STREET SURGERY</h3> |
|
|
<p class="text-gray-400 mb-4">Feat. MC SCALPEL</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center hover:bg-red-600"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="text-sm">3:12</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-black bg-opacity-50 rounded-xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300"> |
|
|
<div class="h-48 bg-gradient-to-r from-purple-900 to-red-900 flex items-center justify-center"> |
|
|
<div class="w-32 h-32 bg-black rounded-full border-4 border-white flex items-center justify-center vinyl"> |
|
|
<div class="w-24 h-24 rounded-full bg-gradient-to-br from-purple-500 to-red-500"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold mb-2 razor-font">RAZOR'S EDGE</h3> |
|
|
<p class="text-gray-400 mb-4">Official Music Video</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center hover:bg-red-600"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="text-sm">4:20</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-black bg-opacity-50 rounded-xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300"> |
|
|
<div class="h-48 bg-gradient-to-r from-gray-900 to-yellow-600 flex items-center justify-center"> |
|
|
<div class="w-32 h-32 bg-black rounded-full border-4 border-white flex items-center justify-center vinyl"> |
|
|
<div class="w-24 h-24 rounded-full bg-gradient-to-br from-yellow-500 to-gray-700"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold mb-2 razor-font">GOLD CHAINZ</h3> |
|
|
<p class="text-gray-400 mb-4">Prod. by DJ SLICE</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center hover:bg-red-600"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="text-sm">3:33</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-8 left-0 right-0 flex justify-center scroll-hint"> |
|
|
<div class="text-center"> |
|
|
<p class="text-sm mb-2">ZOOM IN TO EXPLORE</p> |
|
|
<i class="fas fa-chevron-down text-xl animate-bounce"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="page inactive" id="page4"> |
|
|
<div class="h-full w-full bg-gradient-to-b from-black to-green-900 p-8 md:p-12 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
|
|
<h2 class="text-4xl md:text-6xl font-bold mb-6 razor-font text-red-500 razor-edge">STAY SHARP</h2> |
|
|
<p class="text-lg md:text-xl mb-6 leading-relaxed"> |
|
|
Join RAZOR's inner circle. Get exclusive content, early access to tracks, and VIP treatment. |
|
|
</p> |
|
|
|
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<input type="text" placeholder="Your Name" class="w-full bg-black bg-opacity-50 border-b-2 border-red-500 py-3 px-4 focus:outline-none focus:border-red-300"> |
|
|
</div> |
|
|
<div> |
|
|
<input type="email" placeholder="Your Email" class="w-full bg-black bg-opacity-50 border-b-2 border-red-500 py-3 px-4 focus:outline-none focus:border-red-300"> |
|
|
</div> |
|
|
<div> |
|
|
<select class="w-full bg-black bg-opacity-50 border-b-2 border-red-500 py-3 px-4 focus:outline-none focus:border-red-300"> |
|
|
<option>Select your city</option> |
|
|
<option>New York</option> |
|
|
<option>Los Angeles</option> |
|
|
<option>Chicago</option> |
|
|
<option>Houston</option> |
|
|
<option>Other</option> |
|
|
</select> |
|
|
</div> |
|
|
<button type="submit" class="razor-btn w-full bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full font-bold transition-all duration-300 transform hover:scale-105"> |
|
|
CUT TO THE FRONT |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h3 class="text-xl font-bold mb-4">FOLLOW THE BLADE</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-12 h-12 bg-black rounded-full flex items-center justify-center hover:bg-red-500 transition-all"> |
|
|
<i class="fab fa-instagram text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="w-12 h-12 bg-black rounded-full flex items-center justify-center hover:bg-red-500 transition-all"> |
|
|
<i class="fab fa-twitter text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="w-12 h-12 bg-black rounded-full flex items-center justify-center hover:bg-red-500 transition-all"> |
|
|
<i class="fab fa-tiktok text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="w-12 h-12 bg-black rounded-full flex items-center justify-center hover:bg-red-500 transition-all"> |
|
|
<i class="fab fa-youtube text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="w-12 h-12 bg-black rounded-full flex items-center justify-center hover:bg-red-500 transition-all"> |
|
|
<i class="fab fa-spotify text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="bg-black bg-opacity-50 p-8 rounded-lg"> |
|
|
<h3 class="text-2xl font-bold mb-6 razor-font">UPCOMING SHOWS</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-red-500 text-black px-4 py-2 rounded-full font-bold mr-4 razor-font"> |
|
|
OCT 13 |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg">Brooklyn Steel</h4> |
|
|
<p class="text-gray-400">New York, NY</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-red-500 text-black px-4 py-2 rounded-full font-bold mr-4 razor-font"> |
|
|
OCT 20 |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg">The Roxy</h4> |
|
|
<p class="text-gray-400">Los Angeles, CA</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-red-500 text-black px-4 py-2 rounded-full font-bold mr-4 razor-font"> |
|
|
NOV 5 |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg">House of Blues</h4> |
|
|
<p class="text-gray-400">Chicago, IL</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-red-500 text-black px-4 py-2 rounded-full font-bold mr-4 razor-font"> |
|
|
NOV 18 |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg">The Fillmore</h4> |
|
|
<p class="text-gray-400">San Francisco, CA</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-red-500 text-black px-4 py-2 rounded-full font-bold mr-4 razor-font"> |
|
|
DEC 3 |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg">The Masquerade</h4> |
|
|
<p class="text-gray-400">Atlanta, GA</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<a href="#" class="razor-btn inline-block mt-8 bg-transparent border-2 border-white hover:bg-white hover:text-black text-white px-6 py-3 rounded-full font-bold transition-all duration-300 transform hover:scale-105"> |
|
|
VIEW ALL DATES |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const pages = document.querySelectorAll('.page'); |
|
|
let currentPage = 0; |
|
|
|
|
|
|
|
|
function navigateToPage(index) { |
|
|
pages.forEach((page, i) => { |
|
|
if (i === index) { |
|
|
page.classList.remove('inactive', 'next'); |
|
|
page.classList.add('active'); |
|
|
} else if (i < index) { |
|
|
page.classList.remove('active', 'next'); |
|
|
page.classList.add('inactive'); |
|
|
} else { |
|
|
page.classList.remove('active', 'inactive'); |
|
|
page.classList.add('next'); |
|
|
} |
|
|
}); |
|
|
currentPage = index; |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('wheel', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
if (e.deltaY > 0 && currentPage < pages.length - 1) { |
|
|
navigateToPage(currentPage + 1); |
|
|
} else if (e.deltaY < 0 && currentPage > 0) { |
|
|
navigateToPage(currentPage - 1); |
|
|
} |
|
|
}, { passive: false }); |
|
|
|
|
|
|
|
|
let startY; |
|
|
|
|
|
document.addEventListener('touchstart', function(e) { |
|
|
startY = e.touches[0].clientY; |
|
|
}, { passive: true }); |
|
|
|
|
|
document.addEventListener('touchmove', function(e) { |
|
|
e.preventDefault(); |
|
|
const y = e.touches[0].clientY; |
|
|
const diff = startY - y; |
|
|
|
|
|
if (diff > 50 && currentPage < pages.length - 1) { |
|
|
navigateToPage(currentPage + 1); |
|
|
startY = y; |
|
|
} else if (diff < -50 && currentPage > 0) { |
|
|
navigateToPage(currentPage - 1); |
|
|
startY = y; |
|
|
} |
|
|
}, { passive: false }); |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', function(e) { |
|
|
if (e.key === 'ArrowDown' && currentPage < pages.length - 1) { |
|
|
navigateToPage(currentPage + 1); |
|
|
} else if (e.key === 'ArrowUp' && currentPage > 0) { |
|
|
navigateToPage(currentPage - 1); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
navigateToPage(0); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Groguru/eero" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
