|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>TRAFFIC MASTER | Ссылки</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"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
@import url('https://fonts.cdnfonts.com/css/suisse-intl'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', 'Montserrat', 'Suisse Int\'l', sans-serif; |
|
|
background-color: #000; |
|
|
color: #E1E1E1; |
|
|
letter-spacing: 0.03em; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.btn-hover-effect { |
|
|
transition: all 0.3s ease; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.btn-hover-effect:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 20px rgba(246, 252, 121, 0.2); |
|
|
} |
|
|
|
|
|
.logo-text { |
|
|
font-weight: 700; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
|
|
|
.logo-traffic { |
|
|
color: #f6fc79; |
|
|
} |
|
|
|
|
|
.logo-master { |
|
|
color: #E1E1E1; |
|
|
} |
|
|
|
|
|
.divider { |
|
|
height: 1px; |
|
|
background: linear-gradient(90deg, transparent, rgba(246, 252, 121, 0.5), transparent); |
|
|
} |
|
|
|
|
|
|
|
|
.particles { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
background-color: rgba(246, 252, 121, 0.3); |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
|
|
|
.gradient-bars { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
opacity: 0.1; |
|
|
} |
|
|
|
|
|
.gradient-bar { |
|
|
position: absolute; |
|
|
height: 100%; |
|
|
width: 2px; |
|
|
background: linear-gradient(to bottom, transparent, #f6fc79, transparent); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex flex-col items-center justify-center p-4"> |
|
|
|
|
|
<div class="particles" id="particles"></div> |
|
|
<div class="gradient-bars" id="gradient-bars"></div> |
|
|
|
|
|
<div class="w-full max-w-md mx-auto text-center relative z-10"> |
|
|
|
|
|
<div class="mb-10"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold tracking-tight"> |
|
|
<span class="logo-text logo-traffic">TRAFFIC</span> |
|
|
<span class="logo-text logo-master">MASTER</span> |
|
|
</h1> |
|
|
<p class="mt-4 text-sm uppercase tracking-widest opacity-70">АРБИТРАЖ НЕ ДЛЯ ВСЕХ. НО ЕСЛИ ТЫ ВОШЕЛ — ТЫ В ИГРЕ.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-4 mb-8"> |
|
|
<a href="#" class="block"> |
|
|
<div class="btn-hover-effect bg-[#f6fc79] hover:bg-[#f7ff9f] text-black font-bold py-4 px-6 rounded-lg flex items-center justify-center"> |
|
|
<i class="fab fa-instagram text-xl mr-3"></i> |
|
|
<span>INSTAGRAM</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="block"> |
|
|
<div class="btn-hover-effect bg-[#f6fc79] hover:bg-[#f7ff9f] text-black font-bold py-4 px-6 rounded-lg flex items-center justify-center"> |
|
|
<i class="fab fa-telegram text-xl mr-3"></i> |
|
|
<span>TELEGRAM</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="block"> |
|
|
<div class="btn-hover-effect bg-[#f6fc79] hover:bg-[#f7ff9f] text-black font-bold py-4 px-6 rounded-lg flex items-center justify-center"> |
|
|
<i class="fab fa-whatsapp text-xl mr-3"></i> |
|
|
<span>WHATSAPP</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="block"> |
|
|
<div class="btn-hover-effect bg-[#f6fc79] hover:bg-[#f7ff9f] text-black font-bold py-4 px-6 rounded-lg flex items-center justify-center"> |
|
|
<i class="fab fa-vk text-xl mr-3"></i> |
|
|
<span>VKONTAKTE</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="block"> |
|
|
<div class="btn-hover-effect bg-[#f6fc79] hover:bg-[#f7ff9f] text-black font-bold py-4 px-6 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-globe text-xl mr-3"></i> |
|
|
<span>САЙТ КУРСА</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="block"> |
|
|
<div class="btn-hover-effect bg-[#f6fc79] hover:bg-[#f7ff9f] text-black font-bold py-4 px-6 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-video text-xl mr-3"></i> |
|
|
<span>ВЕБИНАР</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="block"> |
|
|
<div class="btn-hover-effect bg-[#f6fc79] hover:bg-[#f7ff9f] text-black font-bold py-4 px-6 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-headset text-xl mr-3"></i> |
|
|
<span>МЕНЕДЖЕР ПОДДЕРЖКИ</span> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="divider my-6"></div> |
|
|
|
|
|
|
|
|
<div class="text-xs uppercase tracking-widest opacity-50"> |
|
|
<p>© 2023 TRAFFIC MASTER</p> |
|
|
<p class="mt-2">АРБИТРАЖ ТРАФИКА — ЭТО СТИЛЬ ЖИЗНИ</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
const buttons = document.querySelectorAll('.btn-hover-effect'); |
|
|
|
|
|
buttons.forEach((btn, index) => { |
|
|
setTimeout(() => { |
|
|
btn.classList.add('opacity-0'); |
|
|
btn.style.transform = 'translateY(20px)'; |
|
|
|
|
|
setTimeout(() => { |
|
|
btn.classList.remove('opacity-0'); |
|
|
btn.style.transform = 'translateY(0)'; |
|
|
btn.style.transition = 'all 0.5s ease'; |
|
|
}, 50); |
|
|
}, index * 100); |
|
|
}); |
|
|
|
|
|
|
|
|
const particlesContainer = document.getElementById('particles'); |
|
|
const particleCount = 30; |
|
|
|
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.classList.add('particle'); |
|
|
|
|
|
|
|
|
const size = Math.random() * 5 + 1; |
|
|
const posX = Math.random() * window.innerWidth; |
|
|
const posY = Math.random() * window.innerHeight; |
|
|
const delay = Math.random() * 5; |
|
|
const duration = Math.random() * 10 + 5; |
|
|
|
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
particle.style.left = `${posX}px`; |
|
|
particle.style.top = `${posY}px`; |
|
|
particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`; |
|
|
|
|
|
particlesContainer.appendChild(particle); |
|
|
} |
|
|
|
|
|
|
|
|
const gradientBarsContainer = document.getElementById('gradient-bars'); |
|
|
const barCount = 10; |
|
|
|
|
|
for (let i = 0; i < barCount; i++) { |
|
|
const bar = document.createElement('div'); |
|
|
bar.classList.add('gradient-bar'); |
|
|
|
|
|
const posX = (i / barCount) * 100 + '%'; |
|
|
const opacity = Math.random() * 0.1 + 0.05; |
|
|
const height = Math.random() * 50 + 50 + '%'; |
|
|
const delay = Math.random() * 5; |
|
|
|
|
|
bar.style.left = posX; |
|
|
bar.style.opacity = opacity; |
|
|
bar.style.height = height; |
|
|
bar.style.animation = `pulse 8s ease-in-out ${delay}s infinite`; |
|
|
|
|
|
gradientBarsContainer.appendChild(bar); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const style = document.createElement('style'); |
|
|
style.textContent = ` |
|
|
@keyframes float { |
|
|
0%, 100% { |
|
|
transform: translateY(0) translateX(0); |
|
|
opacity: 0.3; |
|
|
} |
|
|
50% { |
|
|
transform: translateY(-20px) translateX(10px); |
|
|
opacity: 0.8; |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { |
|
|
opacity: 0.1; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.3; |
|
|
} |
|
|
} |
|
|
`; |
|
|
document.head.appendChild(style); |
|
|
</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=timoon811/taplink" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
