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> | |
| <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=Inter:wght@300;400;500;600;700;800;900&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0a0a0a; | |
| color: #ffffff; | |
| scroll-behavior: smooth; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px #a855f7, 0 0 10px #a855f7, 0 0 15px #a855f7; | |
| } | |
| .neon-border { | |
| box-shadow: 0 0 5px #a855f7, 0 0 10px #a855f7, 0 0 15px #a855f7; | |
| } | |
| .neon-button { | |
| transition: all 0.3s ease; | |
| } | |
| .neon-button:hover { | |
| box-shadow: 0 0 10px #a855f7, 0 0 20px #a855f7, 0 0 30px #a855f7; | |
| transform: translateY(-2px); | |
| } | |
| .camera-flash { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(255, 255, 255, 0.8); | |
| opacity: 0; | |
| pointer-events: none; | |
| z-index: 10; | |
| } | |
| .animate-flash { | |
| animation: flash 0.5s ease-out; | |
| } | |
| @keyframes flash { | |
| 0% { opacity: 0; } | |
| 10% { opacity: 1; } | |
| 100% { opacity: 0; } | |
| } | |
| .video-container { | |
| position: relative; | |
| padding-bottom: 56.25%; | |
| height: 0; | |
| overflow: hidden; | |
| border-radius: 12px; | |
| } | |
| .video-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .phone-frame { | |
| position: relative; | |
| width: 300px; | |
| height: 600px; | |
| background: #111; | |
| border-radius: 30px; | |
| padding: 15px; | |
| box-shadow: 0 0 0 2px #333, 0 0 0 7px #111, 0 0 20px rgba(168, 85, 247, 0.5); | |
| margin: 0 auto; | |
| } | |
| .phone-screen { | |
| width: 100%; | |
| height: 100%; | |
| background: #222; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .phone-notch { | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 50%; | |
| height: 20px; | |
| background: #111; | |
| border-bottom-left-radius: 10px; | |
| border-bottom-right-radius: 10px; | |
| z-index: 10; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .glow { | |
| text-shadow: 0 0 8px rgba(168, 85, 247, 0.7); | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .form-input { | |
| background-color: rgba(31, 41, 55, 0.7); | |
| border: 1px solid #4b5563; | |
| transition: all 0.3s ease; | |
| } | |
| .form-input:focus { | |
| border-color: #a855f7; | |
| box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3); | |
| } | |
| .radio-option { | |
| background-color: rgba(31, 41, 55, 0.7); | |
| border: 1px solid #4b5563; | |
| transition: all 0.3s ease; | |
| } | |
| .radio-option:hover { | |
| border-color: #a855f7; | |
| } | |
| input[type="radio"]:checked + .radio-option { | |
| border-color: #a855f7; | |
| background-color: rgba(168, 85, 247, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Camera flash effect --> | |
| <div class="camera-flash" id="cameraFlash"></div> | |
| <!-- Header/Navigation --> | |
| <header class="fixed w-full z-50 bg-black bg-opacity-90 backdrop-blur-sm"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-bolt text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold bg-gradient-to-r from-purple-500 to-cyan-400 bg-clip-text text-transparent">Traffic Master</span> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#about" class="text-gray-300 hover:text-white transition">О реалити</a> | |
| <a href="#benefits" class="text-gray-300 hover:text-white transition">Что получишь</a> | |
| <a href="#participate" class="text-gray-300 hover:text-white transition">Кто может участвовать</a> | |
| <a href="#form" class="text-gray-300 hover:text-white transition">Анкета</a> | |
| <a href="#faq" class="text-gray-300 hover:text-white transition">FAQ</a> | |
| </nav> | |
| <button class="md:hidden text-gray-300 hover:text-white"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-purple-900 via-black to-cyan-900 opacity-70"></div> | |
| <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop')] bg-cover bg-center mix-blend-overlay opacity-30"></div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 neon-text"> | |
| <span class="block">Реалити-шоу от</span> | |
| <span class="block bg-gradient-to-r from-purple-500 to-cyan-400 bg-clip-text text-transparent">Traffic Master</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-8"> | |
| Подключайся к реалити, получи обучение, задания и шанс стать частью команды арбитражников. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#form" class="bg-gradient-to-r from-purple-600 to-cyan-500 text-white font-bold py-4 px-8 rounded-full text-lg neon-button flex items-center justify-center"> | |
| Заполнить анкету <i class="fas fa-arrow-down ml-2"></i> | |
| </a> | |
| <button id="watchTrailerBtn" class="bg-transparent border-2 border-purple-500 text-white font-bold py-4 px-8 rounded-full text-lg neon-button flex items-center justify-center"> | |
| <i class="fas fa-play mr-2"></i> Смотреть курс | |
| </button> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 relative"> | |
| <div class="phone-frame pulse"> | |
| <div class="phone-notch"></div> | |
| <div class="phone-screen"> | |
| <div class="video-container"> | |
| <iframe id="trailerVideo" class="hidden" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&mute=1&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| <div id="videoPlaceholder" class="w-full h-full flex items-center justify-center bg-gradient-to-br from-purple-900 to-cyan-800"> | |
| <div class="text-center p-6"> | |
| <i class="fas fa-play-circle text-5xl text-white mb-4"></i> | |
| <h3 class="text-xl font-bold text-white mb-2">Traffic Master</h3> | |
| <p class="text-gray-300">Нажмите "Смотреть курс"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-gradient-to-b from-black to-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 glow"> | |
| <span class="bg-gradient-to-r from-purple-500 to-cyan-400 bg-clip-text text-transparent">Что такое</span> реалити-шоу? | |
| </h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-cyan-400 mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| 2 участника. 30 дней. Полное обучение от профи. Камеры, задания, конкуренция и настоящие кейсы. | |
| Это не курс — это прокачка в прямом эфире. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20"> | |
| <div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-video text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center mb-3">Видео-отчёты каждый день</h3> | |
| <p class="text-gray-300 text-center">Ежедневные отчеты и разборы ваших действий с наставниками</p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl border border-gray-700 hover:border-cyan-500 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/20"> | |
| <div class="w-12 h-12 rounded-full bg-cyan-600 flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-chart-line text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center mb-3">Настоящие кампании и бюджет</h3> | |
| <p class="text-gray-300 text-center">Работа с реальными рекламными кампаниями и бюджетами</p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20"> | |
| <div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-trophy text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center mb-3">Шанс попасть в команду</h3> | |
| <p class="text-gray-300 text-center">Лучшие участники получат предложение о сотрудничестве</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits Section --> | |
| <section id="benefits" class="py-16 bg-black"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 glow"> | |
| Что <span class="bg-gradient-to-r from-purple-500 to-cyan-400 bg-clip-text text-transparent">получат</span> участники? | |
| </h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-cyan-400 mx-auto mb-6"></div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="bg-gradient-to-b from-gray-900 to-gray-800 p-8 rounded-xl border border-gray-700 transform hover:-translate-y-2 transition-all duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-graduation-cap text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Полный курс арбитража</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| От основ до продвинутых стратегий. Все, что нужно знать о трафике, конверсиях и масштабировании. | |
| </p> | |
| </div> | |
| <div class="bg-gradient-to-b from-gray-900 to-gray-800 p-8 rounded-xl border border-gray-700 transform hover:-translate-y-2 transition-all duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-cyan-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-users text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Наставничество и разборы</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| Персональные консультации с экспертами, разбор ошибок и индивидуальные рекомендации. | |
| </p> | |
| </div> | |
| <div class="bg-gradient-to-b from-gray-900 to-gray-800 p-8 rounded-xl border border-gray-700 transform hover:-translate-y-2 transition-all duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user-tie text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Прокачка личного бренда</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| Учись правильно презентовать себя, привлекать клиентов и монетизировать свою экспертность. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Who Can Participate Section --> | |
| <section id="participate" class="py-16 bg-gradient-to-b from-gray-900 to-black"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 glow"> | |
| <span class="bg-gradient-to-r from-purple-500 to-cyan-400 bg-clip-text text-transparent">Кто может</span> участвовать? | |
| </h2> | |
| <p class="text-xl text-gray-300 mb-8"> | |
| Не важен возраст, опыт и даже наличие ноутбука — главное, чтобы был смартфон, интернет и мотивация. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-300">Новички без опыта в арбитраже</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-300">Те, кто уже пробовал, но не получилось</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-300">Опытные арбитражники, желающие улучшить навыки</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-gradient-to-br from-purple-900 to-cyan-900 rounded-2xl p-1 neon-border"> | |
| <div class="bg-gray-900 rounded-xl p-6"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-question text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Готов ли ты к изменениям?</h3> | |
| </div> | |
| <p class="text-gray-300 mb-6"> | |
| Это не просто обучение — это вызов самому себе. 30 дней интенсивной работы над собой, своими навыками и мышлением. | |
| </p> | |
| <a href="#form" class="inline-block bg-gradient-to-r from-purple-600 to-cyan-500 text-white font-bold py-3 px-6 rounded-full neon-button"> | |
| Я готов! <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Application Form Section --> | |
| <section id="form" class="py-16 bg-black"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 glow"> | |
| <span class="bg-gradient-to-r from-purple-500 to-cyan-400 bg-clip-text text-transparent">Анкета</span> участника | |
| </h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-cyan-400 mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Заполни анкету, чтобы принять участие в отборе. Отвечай честно — это увеличит твои шансы. | |
| </p> | |
| </div> | |
| <div class="max-w-3xl mx-auto bg-gray-900 bg-opacity-70 rounded-xl p-6 md:p-8 border border-gray-700"> | |
| <form id="applicationForm" class="space-y-6"> | |
| <div> | |
| <label for="fullName" class="block text-gray-300 mb-2">ФИО</label> | |
| <input type="text" id="fullName" name="fullName" required class="w-full form-input py-3 px-4 rounded-lg text-white" placeholder="Иванов Иван Иванович"> | |
| <p class="text-sm text-gray-400 mt-1">Чтобы мы знали, как к тебе обращаться.</p> | |
| </div> | |
| <div> | |
| <label for="age" class="block text-gray-300 mb-2">Возраст</label> | |
| <input type="number" id="age" name="age" required class="w-full form-input py-3 px-4 rounded-lg text-white" placeholder="25"> | |
| <p class="text-sm text-gray-400 mt-1">Возраст не влияет на отбор, но помогает понять твою ситуацию.</p> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-gray-300 mb-2">Контактный номер и Telegram</label> | |
| <input type="text" id="phone" name="phone" required class="w-full form-input py-3 px-4 rounded-lg text-white" placeholder="+7 (999) 123-45-67 @username"> | |
| <p class="text-sm text-gray-400 mt-1">Мы свяжемся с тобой, если ты пройдёшь отбор.</p> | |
| </div> | |
| <div> | |
| <label for="instagram" class="block text-gray-300 mb-2">Ссылка на Instagram (если есть)</label> | |
| <input type="text" id="instagram" name="instagram" class="w-full form-input py-3 px-4 rounded-lg text-white" placeholder="https://instagram.com/username"> | |
| <p class="text-sm text-gray-400 mt-1">Для понимания, как ты общаешься с аудиторией.</p> | |
| </div> | |
| <div> | |
| <label for="currentActivity" class="block text-gray-300 mb-2">Чем ты занимаешься сейчас? (работа/учёба/ничего)</label> | |
| <textarea id="currentActivity" name="currentActivity" required class="w-full form-input py-3 px-4 rounded-lg text-white" rows="2" placeholder="Работаю менеджером в магазине, но хочу сменить сферу деятельности"></textarea> | |
| </div> | |
| <div> | |
| <label for="experience" class="block text-gray-300 mb-2">Есть ли опыт в арбитраже или маркетинге? Если да — коротко расскажи. Если нет — пиши «нет».</label> | |
| <textarea id="experience" name="experience" required class="w-full form-input py-3 px-4 rounded-lg text-white" rows="2" placeholder="Нет"></textarea> | |
| </div> | |
| <div> | |
| <label for="motivation" class="block text-gray-300 mb-2">Почему ты хочешь участвовать? Свободная форма — чем искреннее, тем лучше.</label> | |
| <textarea id="motivation" name="motivation" required class="w-full form-input py-3 px-4 rounded-lg text-white" rows="3" placeholder="Хочу научиться зарабатывать в интернете, получить новые навыки и возможно сменить профессию"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-3">Как ты относишься к публичности?</label> | |
| <div class="space-y-3"> | |
| <label class="flex items-center"> | |
| <input type="radio" name="publicity" value="ready_for_video" class="hidden" checked> | |
| <div class="radio-option rounded-lg py-3 px-4 w-full"> | |
| <span class="font-medium">Готов(-а) показывать себя и записывать видео</span> | |
| </div> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="publicity" value="ready_without_face" class="hidden"> | |
| <div class="radio-option rounded-lg py-3 px-4 w-full"> | |
| <span class="font-medium">Готов(-а) записывать голос и фото, но без лица</span> | |
| </div> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="publicity" value="not_comfortable" class="hidden"> | |
| <div class="radio-option rounded-lg py-3 px-4 w-full"> | |
| <span class="font-medium">Не комфортно быть публично, но хочу участвовать</span> | |
| </div> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="equipment" class="block text-gray-300 mb-2">Есть ли у тебя смартфон и интернет?</label> | |
| <input type="text" id="equipment" name="equipment" required class="w-full form-input py-3 px-4 rounded-lg text-white" placeholder="Да, есть iPhone и безлимитный интернет"> | |
| <p class="text-sm text-gray-400 mt-1">Обязательное условие участия.</p> | |
| </div> | |
| <div> | |
| <label for="time" class="block text-gray-300 mb-2">Можешь ли выделять 30–60 мин в день?</label> | |
| <input type="text" id="time" name="time" required class="w-full form-input py-3 px-4 rounded-lg text-white" placeholder="Да, могу выделить время утром и вечером"> | |
| <p class="text-sm text-gray-400 mt-1">Важно для понимания нагрузки.</p> | |
| </div> | |
| <div> | |
| <label for="aboutYourself" class="block text-gray-300 mb-2">Расскажи о себе и почему именно ты должен попасть в реалити.</label> | |
| <textarea id="aboutYourself" name="aboutYourself" required class="w-full form-input py-3 px-4 rounded-lg text-white" rows="4" placeholder="Я целеустремленный человек, быстро учусь новому. Хочу доказать себе и другим, что можно добиться успеха в арбитраже даже без опыта..."></textarea> | |
| <p class="text-sm text-gray-400 mt-1">Развернутый, искренний ответ. Ключевой пункт.</p> | |
| </div> | |
| <div> | |
| <label for="limitations" class="block text-gray-300 mb-2">Есть ли ограничения, которые мы должны учитывать? Например: работа, семья, учёба и т.д.</label> | |
| <textarea id="limitations" name="limitations" class="w-full form-input py-3 px-4 rounded-lg text-white" rows="2" placeholder="Работаю полный день, но вечером всегда свободен"></textarea> | |
| </div> | |
| <div class="pt-4"> | |
| <button type="submit" class="w-full bg-gradient-to-r from-purple-600 to-cyan-500 text-white font-bold py-4 px-6 rounded-full text-lg neon-button"> | |
| Отправить анкету <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </div> | |
| </form> | |
| <div id="successMessage" class="hidden text-center py-8"> | |
| <div class="w-16 h-16 rounded-full bg-green-500 flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-check text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-green-400 mb-4">Спасибо за заявку!</h3> | |
| <p class="text-gray-300 max-w-md mx-auto"> | |
| Если ты пройдёшь отбор — мы напишем тебе в Telegram в течение 5 дней. Удачи! | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-gradient-to-b from-gray-900 to-black"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 glow"> | |
| <span class="bg-gradient-to-r from-purple-500 to-cyan-400 bg-clip-text text-transparent">Отзывы</span> участников | |
| </h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-cyan-400 mx-auto mb-6"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto"> | |
| <div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl border border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Алексей, 28 лет</h4> | |
| <p class="text-sm text-gray-400">Участник 3 потока</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic"> | |
| "До реалити я пытался заниматься арбитражем, но ничего не получалось. За месяц обучения я не только разобрался в теме, но и вышел на первую прибыль. Теперь это мой основной доход!" | |
| </p> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl border border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-cyan-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Екатерина, 23 года</h4> | |
| <p class="text-sm text-gray-400">Участник 5 потока</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic"> | |
| "Это было самое интенсивное и полезное обучение в моей жизни! Благодаря наставникам я научилась анализировать трафик и оптимизировать кампании. Сейчас работаю с клиентами и зарабатываю в 3 раза больше, чем на предыдущей работе." | |
| </p> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="py-16 bg-black"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 glow"> | |
| <span class="bg-gradient-to-r from-purple-500 to-cyan-400 bg-clip-text text-transparent">Частые</span> вопросы | |
| </h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-cyan-400 mx-auto mb-6"></div> | |
| </div> | |
| <div class="max-w-3xl mx-auto space-y-4"> | |
| <div class="faq-item bg-gray-900 rounded-xl overflow-hidden border border-gray-700"> | |
| <button class="faq-question w-full text-left p-5 flex justify-between items-center hover:bg-gray-800 transition"> | |
| <span class="font-medium text-lg">Нужно ли платить за участие?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer hidden px-5 pb-5 pt-2 text-gray-300"> | |
| Нет, участие полностью бесплатное. Мы заинтересованы в поиске талантливых людей, поэтому берем все расходы на себя. | |
| </div> | |
| </div> | |
| <div class="faq-item bg-gray-900 rounded-xl overflow-hidden border border-gray-700"> | |
| <button class="faq-question w-full text-left p-5 flex justify-between items-center hover:bg-gray-800 transition"> | |
| <span class="font-medium text-lg">Что будет, если не получится каждый день участвовать?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer hidden px-5 pb-5 pt-2 text-gray-300"> | |
| Мы понимаем, что у всех есть обязательства. Главное — выполнять задания и участвовать в разборах. Если пропустишь день-два — ничего страшного, но систематические пропуски могут стать причиной исключения из проекта. | |
| </div> | |
| </div> | |
| <div class="faq-item bg-gray-900 rounded-xl overflow-hidden border border-gray-700"> | |
| <button class="faq-question w-full text-left p-5 flex justify-between items-center hover:bg-gray-800 transition"> | |
| <span class="font-medium text-lg">Можно ли без опыта?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer hidden px-5 pb-5 pt-2 text-gray-300"> | |
| Да, можно! Программа построена так, чтобы даже новички могли разобраться. Главное — желание учиться и выполнять задания. | |
| </div> | |
| </div> | |
| <div class="faq-item bg-gray-900 rounded-xl overflow-hidden border border-gray-700"> | |
| <button class="faq-question w-full text-left p-5 flex justify-between items-center hover:bg-gray-800 transition"> | |
| <span class="font-medium text-lg">Как проходит отбор участников?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer hidden px-5 pb-5 pt-2 text-gray-300"> | |
| Мы изучаем все анкеты и выбираем самых мотивированных участников. Важны не текущие знания, а готовность работать и развиваться. | |
| </div> | |
| </div> | |
| <div class="faq-item bg-gray-900 rounded-xl overflow-hidden border border-gray-700"> | |
| <button class="faq-question w-full text-left p-5 flex justify-between items-center hover:bg-gray-800 transition"> | |
| <span class="font-medium text-lg">Будет ли запись реалити для тех, кто не прошел отбор?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer hidden px-5 pb-5 pt-2 text-gray-300"> | |
| Да, мы будем публиковать основные моменты в нашем Telegram-канале и Instagram. Но полный доступ к материалам и разборам получат только участники. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-gradient-to-b from-purple-900 to-black"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 neon-text"> | |
| Готов изменить свою жизнь за 30 дней? | |
| </h2> | |
| <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto"> | |
| Оставь заявку прямо сейчас и получи шанс попасть в новое реалити-шоу Traffic Master! | |
| </p> | |
| <a href="#form" class="inline-block bg-gradient-to-r from-purple-600 to-cyan-500 text-white font-bold py-4 px-8 rounded-full text-lg neon-button"> | |
| Заполнить анкету <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-8 md:mb-0"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-bolt text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold bg-gradient-to-r from-purple-500 to-cyan-400 bg-clip-text text-transparent">Traffic Master</span> | |
| </div> | |
| <p class="text-gray-400 mt-2">Реалити-шоу по арбитражу трафика</p> | |
| </div> | |
| <div class="flex space-x-6 mb-8 md:mb-0"> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition"> | |
| <i class="fab fa-telegram text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition"> | |
| <i class="fab fa-instagram text-2xl"></i> | |
| </a> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| <p class="text-gray-400">support@trafficmaster.ru</p> | |
| <p class="text-gray-500 text-sm mt-2">© 2023 Traffic Master. Все права защищены.</p> | |
| <a href="#" class="text-gray-500 hover:text-gray-300 text-sm underline">Политика конфиденциальности</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Camera flash effect | |
| function triggerCameraFlash() { | |
| const flash = document.getElementById('cameraFlash'); | |
| flash.classList.add('animate-flash'); | |
| setTimeout(() => { | |
| flash.classList.remove('animate-flash'); | |
| }, 500); | |
| } | |
| // Random flash effects | |
| setInterval(() => { | |
| if (Math.random() > 0.8) { | |
| triggerCameraFlash(); | |
| } | |
| }, 10000); | |
| // Watch trailer button | |
| document.getElementById('watchTrailerBtn').addEventListener('click', function() { | |
| const placeholder = document.getElementById('videoPlaceholder'); | |
| const video = document.getElementById('trailerVideo'); | |
| placeholder.classList.add('hidden'); | |
| video.classList.remove('hidden'); | |
| video.src += "&autoplay=1"; | |
| // Trigger flash effect | |
| triggerCameraFlash(); | |
| }); | |
| // FAQ accordion | |
| document.querySelectorAll('.faq-question').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const answer = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| // Toggle answer | |
| answer.classList.toggle('hidden'); | |
| // Rotate icon | |
| icon.classList.toggle('rotate-180'); | |
| // Close other open items | |
| document.querySelectorAll('.faq-item').forEach(item => { | |
| if (item !== button.parentElement) { | |
| item.querySelector('.faq-answer').classList.add('hidden'); | |
| item.querySelector('i').classList.remove('rotate-180'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Form submission | |
| document.getElementById('applicationForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Simulate form submission | |
| setTimeout(() => { | |
| this.classList.add('hidden'); | |
| document.getElementById('successMessage').classList.remove('hidden'); | |
| // Scroll to success message | |
| document.getElementById('successMessage').scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Trigger flash effect | |
| triggerCameraFlash(); | |
| }, 1000); | |
| }); | |
| // Radio button styling | |
| document.querySelectorAll('input[type="radio"]').forEach(radio => { | |
| radio.addEventListener('change', function() { | |
| document.querySelectorAll('.radio-option').forEach(option => { | |
| option.classList.remove('border-purple-500', 'bg-purple-500/20'); | |
| }); | |
| if (this.checked) { | |
| this.nextElementSibling.classList.add('border-purple-500', 'bg-purple-500/20'); | |
| } | |
| }); | |
| }); | |
| // Initialize radio buttons | |
| document.querySelectorAll('input[type="radio"]').forEach(radio => { | |
| if (radio.checked) { | |
| radio.nextElementSibling.classList.add('border-purple-500', 'bg-purple-500/20'); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </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/kursreality2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |