Spaces:

timoon811
/

phase8

Running

App Files Files Community

phase8 / index.html

timoon811

Add 3 files

f8f18a5 verified 11 months ago

raw

history blame contribute delete

8.92 kB

	<!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>
	<!-- Call to Action Section -->
	<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">
	<!-- Glitch Effect Title -->
	<h1 class="glitch text-4xl md:text-6xl font-bold mb-6" data-text="Узнай фазу своего слота — прежде чем сделать ставку">
	Узнай фазу своего слота — прежде чем сделать ставку
	</h1>

	<!-- Subtitle -->
	<p class="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto">
	Сервис, которому доверяют 14 000+ игроков. Без регистрации. Без обмана.
	</p>

	<!-- CTA Button -->
	<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 -->
	<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">
	<!-- Logo -->
	<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>

	<!-- Links -->
	<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>

	<!-- Copyright -->
	<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>
	// Smooth scroll to top function
	function scrollToTop(e) {
	e.preventDefault();
	window.scrollTo({
	top: 0,
	behavior: 'smooth'
	});
	}

	// CTA button click handler
	document.getElementById('ctaButton').addEventListener('click', function() {
	// Here you would typically scroll to a form or open a modal
	// For demo purposes, we'll just show an alert
	alert('Перенаправление на проверку фазы...');

	// In a real implementation, you might use:
	// document.getElementById('checkForm').scrollIntoView({ behavior: 'smooth' });
	});

	// Add intersection observer for animations
	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>