|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>PhaseAI - Call to Action</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #0a0a0a; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.glitch { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.glitch::before, .glitch::after { |
|
|
content: attr(data-text); |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
.glitch::before { |
|
|
left: 2px; |
|
|
text-shadow: -2px 0 #00f7ff; |
|
|
clip: rect(44px, 450px, 56px, 0); |
|
|
animation: glitch-anim 5s infinite linear alternate-reverse; |
|
|
} |
|
|
|
|
|
.glitch::after { |
|
|
left: -2px; |
|
|
text-shadow: -2px 0 #ff00f7; |
|
|
clip: rect(44px, 450px, 56px, 0); |
|
|
animation: glitch-anim2 5s infinite linear alternate-reverse; |
|
|
} |
|
|
|
|
|
@keyframes glitch-anim { |
|
|
0% { clip: rect(31px, 9999px, 94px, 0); } |
|
|
10% { clip: rect(112px, 9999px, 76px, 0); } |
|
|
20% { clip: rect(85px, 9999px, 77px, 0); } |
|
|
30% { clip: rect(27px, 9999px, 97px, 0); } |
|
|
40% { clip: rect(64px, 9999px, 98px, 0); } |
|
|
50% { clip: rect(61px, 9999px, 85px, 0); } |
|
|
60% { clip: rect(99px, 9999px, 114px, 0); } |
|
|
70% { clip: rect(34px, 9999px, 115px, 0); } |
|
|
80% { clip: rect(98px, 9999px, 129px, 0); } |
|
|
90% { clip: rect(43px, 9999px, 96px, 0); } |
|
|
100% { clip: rect(82px, 9999px, 64px, 0); } |
|
|
} |
|
|
|
|
|
@keyframes glitch-anim2 { |
|
|
0% { clip: rect(65px, 9999px, 119px, 0); } |
|
|
10% { clip: rect(79px, 9999px, 66px, 0); } |
|
|
20% { clip: rect(75px, 9999px, 103px, 0); } |
|
|
30% { clip: rect(105px, 9999px, 115px, 0); } |
|
|
40% { clip: rect(73px, 9999px, 49px, 0); } |
|
|
50% { clip: rect(15px, 9999px, 44px, 0); } |
|
|
60% { clip: rect(66px, 9999px, 119px, 0); } |
|
|
70% { clip: rect(88px, 9999px, 72px, 0); } |
|
|
80% { clip: rect(98px, 9999px, 54px, 0); } |
|
|
90% { clip: rect(44px, 9999px, 99px, 0); } |
|
|
100% { clip: rect(10px, 9999px, 2px, 0); } |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7); } |
|
|
70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); } |
|
|
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); } |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #8b5cf6, #3b82f6); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(90deg, #8b5cf6, #3b82f6); |
|
|
} |
|
|
|
|
|
.hover-grow { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.hover-grow:hover { |
|
|
transform: translateY(-2px) scale(1.02); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<section class="py-20 px-4 md:px-8 lg:px-16 animate__animated animate__fadeInUp"> |
|
|
<div class="max-w-6xl mx-auto text-center"> |
|
|
|
|
|
<h1 class="glitch text-4xl md:text-6xl font-bold mb-6" data-text="Узнай фазу своего слота — прежде чем сделать ставку"> |
|
|
Узнай фазу своего слота — прежде чем сделать ставку |
|
|
</h1> |
|
|
|
|
|
|
|
|
<p class="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto"> |
|
|
Сервис, которому доверяют 14 000+ игроков. Без регистрации. Без обмана. |
|
|
</p> |
|
|
|
|
|
|
|
|
<button id="ctaButton" class="gradient-bg hover-grow pulse text-white font-bold py-4 px-8 rounded-full text-lg md:text-xl shadow-xl transition-all duration-300 hover:shadow-2xl"> |
|
|
🚀 Проверить фазу сейчас |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-black py-12 px-4 md:px-8 lg:px-16 border-t border-gray-800"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
|
|
|
<div class="mb-6 md:mb-0"> |
|
|
<a href="#" class="flex items-center hover-grow" onclick="scrollToTop(event)"> |
|
|
<svg class="w-8 h-8 mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
|
|
<path d="M12 8V16" stroke="#3B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
|
|
<path d="M8 12H16" stroke="#3B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
|
|
</svg> |
|
|
<span class="text-xl font-bold gradient-text">PhaseAI</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-6 md:gap-8 mb-6 md:mb-0"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors">Политика конфиденциальности</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors">О нас</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors">Контакты</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-gray-500 text-sm"> |
|
|
<p>© 2025 PhaseAI. Все права защищены.</p> |
|
|
<p class="text-xs mt-1">v1.0 Beta</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
function scrollToTop(e) { |
|
|
e.preventDefault(); |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('ctaButton').addEventListener('click', function() { |
|
|
|
|
|
|
|
|
alert('Перенаправление на проверку фазы...'); |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('animate__fadeInUp'); |
|
|
} |
|
|
}); |
|
|
}, { |
|
|
threshold: 0.1 |
|
|
}); |
|
|
|
|
|
const sections = document.querySelectorAll('section'); |
|
|
sections.forEach(section => { |
|
|
observer.observe(section); |
|
|
}); |
|
|
}); |
|
|
</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/phase8" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
