Spaces:
Running
Running
| <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> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap'); | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| overflow: hidden; | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #000; | |
| } | |
| .dollar-bg { | |
| position: absolute; | |
| color: rgba(255, 255, 255, 0.05); | |
| font-size: 24px; | |
| animation: float 15s linear infinite; | |
| z-index: 0; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0) translateX(0); | |
| } | |
| 50% { | |
| transform: translateY(100vh) translateX(50vw); | |
| } | |
| 100% { | |
| transform: translateY(0) translateX(100vw); | |
| } | |
| } | |
| .logo-text { | |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); | |
| } | |
| .traffic { | |
| color: #f6fc79; | |
| } | |
| .master { | |
| color: #E1E1E1; | |
| } | |
| .benefit-item { | |
| opacity: 0; | |
| transform: translateX(-50px); | |
| } | |
| .highlight { | |
| color: #f6fc79; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="dollar-container"></div> | |
| <div class="w-full h-full flex flex-col items-center justify-center px-8 relative z-10"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-6xl md:text-7xl font-bold logo-text"> | |
| <span class="traffic">TRAFFIC</span> <span class="master">MASTER</span> | |
| </h1> | |
| </div> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-2">Вопрос:</h2> | |
| <p class="text-2xl md:text-3xl text-white">Что я получу от курса?</p> | |
| </div> | |
| <div class="max-w-lg mx-auto space-y-6"> | |
| <div class="benefit-item bg-black bg-opacity-70 rounded-xl p-6 border border-gray-800"> | |
| <p class="text-xl md:text-2xl text-white"> | |
| <span class="highlight">💥 Рабочую систему арбитража</span> | |
| </p> | |
| </div> | |
| <div class="benefit-item bg-black bg-opacity-70 rounded-xl p-6 border border-gray-800"> | |
| <p class="text-xl md:text-2xl text-white"> | |
| <span class="highlight">📈 Готовые связки, креативы, прокладки</span> | |
| </p> | |
| </div> | |
| <div class="benefit-item bg-black bg-opacity-70 rounded-xl p-6 border border-gray-800"> | |
| <p class="text-xl md:text-2xl text-white"> | |
| <span class="highlight">💬 Поддержку и доступ в закрытый чат</span> | |
| </p> | |
| </div> | |
| <div class="benefit-item bg-black bg-opacity-70 rounded-xl p-6 border border-gray-800"> | |
| <p class="text-xl md:text-2xl text-white"> | |
| <span class="highlight">💰 Выход на реальные выплаты в процессе курса</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Создаем фон из долларов | |
| function createDollarBackground() { | |
| const container = document.getElementById('dollar-container'); | |
| const dollarCount = 30; | |
| for (let i = 0; i < dollarCount; i++) { | |
| const dollar = document.createElement('div'); | |
| dollar.className = 'dollar-bg'; | |
| dollar.textContent = '$'; | |
| dollar.style.left = `${Math.random() * 100}%`; | |
| dollar.style.top = `${Math.random() * 100}%`; | |
| dollar.style.animationDuration = `${15 + Math.random() * 20}s`; | |
| dollar.style.animationDelay = `${Math.random() * 5}s`; | |
| container.appendChild(dollar); | |
| } | |
| } | |
| // Анимация появления пунктов | |
| function animateBenefits() { | |
| const benefits = document.querySelectorAll('.benefit-item'); | |
| benefits.forEach((item, index) => { | |
| gsap.to(item, { | |
| opacity: 1, | |
| x: 0, | |
| duration: 0.8, | |
| delay: index * 0.3, | |
| ease: "back.out(1.2)" | |
| }); | |
| }); | |
| } | |
| // Инициализация | |
| document.addEventListener('DOMContentLoaded', () => { | |
| createDollarBackground(); | |
| setTimeout(animateBenefits, 1000); | |
| }); | |
| </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/teststories" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |