Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Сериал о тебе | TMT</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=Montserrat:wght@300;400;700;900&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #000; | |
| color: white; | |
| scroll-behavior: smooth; | |
| } | |
| .episode { | |
| min-height: 100vh; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.8s ease; | |
| } | |
| .episode-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-size: cover; | |
| background-position: center; | |
| opacity: 0.3; | |
| z-index: -1; | |
| } | |
| .episode-title { | |
| font-family: 'Montserrat', sans-serif; | |
| font-weight: 900; | |
| text-transform: uppercase; | |
| letter-spacing: 5px; | |
| text-shadow: 0 0 10px rgba(255,0,0,0.7); | |
| } | |
| .episode-number { | |
| color: #e50914; | |
| font-weight: 700; | |
| } | |
| .nav-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background-color: #555; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-dot.active { | |
| background-color: #e50914; | |
| transform: scale(1.3); | |
| } | |
| .nav-dot:hover { | |
| transform: scale(1.3); | |
| } | |
| .fade-in { | |
| animation: fadeIn 1.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .money-notification { | |
| animation: moneyPulse 2s infinite; | |
| } | |
| @keyframes moneyPulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .grain-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AkEEjIZJq1Z1QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAADMUlEQVRo3u2aT0gUURzHP29nd11zV9d1M7XUQkqjQ5CHoA5BdQg6dOjQoUMQdOjQoUMQdOjQoUMQdOjQoUMQdAg6BEFQh6BDEGRlq7q6u+7Oe/3Q1XVnZ2ZnZt3dDzwwzPvz5/3e7/3em/dGSCnJkSNHjv8dYbqgEEJKKQ1XFEJIKWXGjQghpJQy40aEEFJKmXEjQggppcy4ESGElFJm3IgQQkopM25ECCGllBk3IoSQUsqMGxFCSCllxo0IIaSUMuNGhBBSSplxI0IIKaXMuBEhhJRSZtyIEEJKKTNuRAghpZQZNyKEkFLKjBsRQkgpZcaNCCGklDLjRoQQUkqZcSNCCCmlzLgRIYSUUmbciBBCSikzbkQIIaWUGTcihJBSyowbEUJIKWXGjQghpJQy40aEEFJKmXEjQggppcy4ESGElFJm3IgQQkopM25ECCGllBk3IoSQUsqMGxFCSCllxo0IIaSUMuNGhBBSSplxI0IIKaXMuBEhhJRSZtyIEEJKKTNuRAghpZQZNyKEkFLKjBsRQkgpZcaNCCGklDLjRoQQUkqZcSNCCCmlzLgRIYSUUmbciBBCSikzbkQIIaWUGTcihJBSyowbEUJIKWXGjQghpJQy40aEEFJKmXEjQggppcy4ESGElFJm3IgQQkopM25ECCGllBk3IoSQUsqMGxFCSCllxo0IIaSUMuNGhBBSSplxI0IIKaXMuBEhhJRSZtyIEEJKKTNuRAghpZQZNyKEkFLKjBsRQkgpZcaNCCGklDLjRoQQUkqZcSNCCCmlzLgRIYSUUmbciBBCSikzbkQIIaWUGTcihJBSyowbEUJIKWXGjQghpJQy40aEEFJKmXEjQggppcy4ESGElFJm3IgQQkopM25ECCGllBk3IoSQUsqMGxFCSCllxo0IIaSUMuNGhBBSSplxI0IIKaXMuBEhhJRSZtyIEEJKKTNuRAghpZQZNyKEkFLKjBsRQkgpZcaNCCGklDLjRoQQUkqZcSNCCCmlzLgRIYSUUmbciBBCSikzbkQIIaWUGTcihJBSyowbEUJIKWXGjQghpJQy40aEEFJKmXEjQggppcy4ESGElFJm3IgQQkopM25ECCGllBk3IoSQUsqMGxFCSCllxo0IIaSUMuNGhBBSSplxI0IIKaXMuBEhhJRSZtyIEEJKKTNuRAghpZQZNyKEkFLKjBsRQkgpZcaNCCGklDLjRoQQUkqZcSNCCCmlzLgRIYSUUmbciBBCSikzbkQIIaWUGTcihJBSyowbEUJIKWXGjQghpJQy40aEEFJKmXEjQggppcy4ESGElFJm3IgQQkopM25ECCGllBk3IoSQUsqMGxFCSCllxo0IIaSUMuNGhBBSSplxI0IIKaXMuBEhhJRSZtyIEEJKKTNuRAghpZQZNyKEkFLKjBsRQkgpZcaNCCGklDLjRoQQUkqZcSNCCCmlzLgRIYSUUmbciBBCSikzbkQIIaWUGTcihJBSyowbEUJIKWXGjQghpJQy40aEEFJKmXEjQggppcy4ESGElFJm3IgQQkopM25ECCGllBk3IoSQUsqMGxFCSCllxo0IIaSUMuNGhBBSSplxI0IIKaXMuBEhhJRSZtyIEEJKKTNuRAghpZQZNyKEkFLKjBsRQkgpZcaNCCGklDLjRoQQUkqZcSNCCCmlzLgRIYSUUmbciBBCSikzbkQIIaWUGTcihJBSyowbEUL8Bp1Y9XjQYj7+AAAAAElFTkSuQmCC'); | |
| opacity: 0.05; | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .btn-red { | |
| background-color: #e50914; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-red:hover { | |
| background-color: #b00710; | |
| transform: scale(1.05); | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: .15em solid #e50914; | |
| white-space: nowrap; | |
| margin: 0 auto; | |
| letter-spacing: .15em; | |
| animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #e50914 } | |
| } | |
| @media (max-width: 768px) { | |
| .episode-content { | |
| padding-top: 60px; | |
| } | |
| .episode-title { | |
| font-size: 1.5rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation Dots --> | |
| <div class="fixed right-8 top-1/2 transform -translate-y-1/2 z-50 hidden md:flex flex-col space-y-4"> | |
| <a href="#episode1" class="nav-dot active" data-episode="1"></a> | |
| <a href="#episode2" class="nav-dot" data-episode="2"></a> | |
| <a href="#episode3" class="nav-dot" data-episode="3"></a> | |
| <a href="#episode4" class="nav-dot" data-episode="4"></a> | |
| <a href="#episode5" class="nav-dot" data-episode="5"></a> | |
| </div> | |
| <!-- Mobile Navigation --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-black bg-opacity-80 z-50 flex justify-around py-3 md:hidden"> | |
| <a href="#episode1" class="text-xs text-gray-400 hover:text-white transition">E1</a> | |
| <a href="#episode2" class="text-xs text-gray-400 hover:text-white transition">E2</a> | |
| <a href="#episode3" class="text-xs text-gray-400 hover:text-white transition">E3</a> | |
| <a href="#episode4" class="text-xs text-gray-400 hover:text-white transition">E4</a> | |
| <a href="#episode5" class="text-xs text-gray-400 hover:text-white transition">E5</a> | |
| </div> | |
| <!-- Episode 1 --> | |
| <div id="episode1" class="episode"> | |
| <div class="grain-overlay"></div> | |
| <div class="episode-bg" style="background-image: url('https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80');"></div> | |
| <div class="container mx-auto px-4 py-20 md:py-32 episode-content relative z-10"> | |
| <div class="max-w-3xl mx-auto text-center fade-in"> | |
| <div class="episode-number mb-2">S01E01</div> | |
| <h1 class="episode-title text-4xl md:text-6xl mb-8">Обычный день. Слишком обычный.</h1> | |
| <p class="text-xl md:text-2xl mb-10 leading-relaxed"> | |
| Ты в очередной раз открыл будильник и подумал: «Сколько ещё?»<br> | |
| Офис. Звонки. Пробки. Усталость.<br> | |
| День сурка на repeat. | |
| </p> | |
| <div class="flex justify-center"> | |
| <a href="#episode2" class="btn-red text-white px-8 py-3 rounded-full font-bold flex items-center"> | |
| Смотреть следующую серию <i class="fas fa-chevron-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Episode 2 --> | |
| <div id="episode2" class="episode"> | |
| <div class="grain-overlay"></div> | |
| <div class="episode-bg" style="background-image: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div> | |
| <div class="container mx-auto px-4 py-20 md:py-32 episode-content relative z-10"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <div class="episode-number mb-2">S01E02</div> | |
| <h1 class="episode-title text-4xl md:text-6xl mb-8">Переломный момент</h1> | |
| <p class="text-xl md:text-2xl mb-10 leading-relaxed"> | |
| Скроллинг ленты в перерыве между "важными" задачами.<br> | |
| Внезапно — реклама курса. Инстинктивно нажал.<br> | |
| Сначала думал — очередная хрень. Но почему-то остался. | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#episode1" class="text-white px-6 py-2 rounded-full font-bold flex items-center border border-white"> | |
| <i class="fas fa-chevron-left mr-2"></i> Назад | |
| </a> | |
| <a href="#episode3" class="btn-red text-white px-8 py-3 rounded-full font-bold flex items-center"> | |
| Смотреть следующую серию <i class="fas fa-chevron-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Episode 3 --> | |
| <div id="episode3" class="episode"> | |
| <div class="grain-overlay"></div> | |
| <div class="episode-bg" style="background-image: url('https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80');"></div> | |
| <div class="container mx-auto px-4 py-20 md:py-32 episode-content relative z-10"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <div class="episode-number mb-2">S01E03</div> | |
| <h1 class="episode-title text-4xl md:text-6xl mb-8">Старт. Без громких слов.</h1> | |
| <p class="text-xl md:text-2xl mb-10 leading-relaxed"> | |
| Экран с уроками. Ноут. Telegram.<br> | |
| Курс не давал мотивации. Он давал действия.<br> | |
| Шаг за шагом. Без воды. Только конкретика. | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#episode2" class="text-white px-6 py-2 rounded-full font-bold flex items-center border border-white"> | |
| <i class="fas fa-chevron-left mr-2"></i> Назад | |
| </a> | |
| <a href="#episode4" class="btn-red text-white px-8 py-3 rounded-full font-bold flex items-center"> | |
| Смотреть следующую серию <i class="fas fa-chevron-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Episode 4 --> | |
| <div id="episode4" class="episode"> | |
| <div class="grain-overlay"></div> | |
| <div class="episode-bg" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div> | |
| <div class="container mx-auto px-4 py-20 md:py-32 episode-content relative z-10"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <div class="episode-number mb-2">S01E04</div> | |
| <h1 class="episode-title text-4xl md:text-6xl mb-8">Первая победа</h1> | |
| <div class="money-notification bg-black bg-opacity-70 border border-green-500 rounded-lg p-4 max-w-md mx-auto mb-10"> | |
| <div class="flex items-center"> | |
| <div class="bg-green-500 rounded-full p-2 mr-3"> | |
| <i class="fas fa-dollar-sign text-white"></i> | |
| </div> | |
| <div class="text-left"> | |
| <div class="font-bold text-green-500">+870$ FTD 5/7</div> | |
| <div class="text-sm text-gray-300">Только что • TMT CRM</div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-xl md:text-2xl mb-10 leading-relaxed"> | |
| Ты не кричал. Просто посмотрел на экран и понял — сработало.<br> | |
| Первый профит. Первая победа.<br> | |
| Это было только начало. | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#episode3" class="text-white px-6 py-2 rounded-full font-bold flex items-center border border-white"> | |
| <i class="fas fa-chevron-left mr-2"></i> Назад | |
| </a> | |
| <a href="#episode5" class="btn-red text-white px-8 py-3 rounded-full font-bold flex items-center"> | |
| Смотреть следующую серию <i class="fas fa-chevron-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Episode 5 --> | |
| <div id="episode5" class="episode"> | |
| <div class="grain-overlay"></div> | |
| <div class="episode-bg" style="background-image: url('https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1933&q=80');"></div> | |
| <div class="container mx-auto px-4 py-20 md:py-32 episode-content relative z-10"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <div class="episode-number mb-2">S01E05</div> | |
| <h1 class="episode-title text-4xl md:text-6xl mb-8">Новый ты</h1> | |
| <p class="text-xl md:text-2xl mb-10 leading-relaxed"> | |
| Ноут на берегу. Свобода. Время для семьи.<br> | |
| <span class="typewriter">Ты больше не просишь разрешения. Ты сам выбираешь.</span> | |
| </p> | |
| <div class="bg-black bg-opacity-70 rounded-lg p-6 mb-10 max-w-md mx-auto"> | |
| <h3 class="text-2xl font-bold mb-4">Начни свой сезон 1</h3> | |
| <p class="mb-4">Основано на реальных кейсах. Снято в команде TMT.</p> | |
| <button class="btn-red text-white w-full py-3 rounded-full font-bold"> | |
| Записаться на курс | |
| </button> | |
| </div> | |
| <div class="flex justify-center"> | |
| <a href="#episode4" class="text-white px-6 py-2 rounded-full font-bold flex items-center border border-white"> | |
| <i class="fas fa-chevron-left mr-2"></i> Назад | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Update navigation dots on scroll | |
| window.addEventListener('scroll', function() { | |
| const episodes = document.querySelectorAll('.episode'); | |
| const navDots = document.querySelectorAll('.nav-dot'); | |
| episodes.forEach((episode, index) => { | |
| const rect = episode.getBoundingClientRect(); | |
| if (rect.top <= 100 && rect.bottom >= 100) { | |
| // Remove active class from all dots | |
| navDots.forEach(dot => dot.classList.remove('active')); | |
| // Add active class to current dot | |
| navDots[index].classList.add('active'); | |
| } | |
| }); | |
| }); | |
| // Smooth scroll 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, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Typewriter effect | |
| setTimeout(() => { | |
| document.querySelector('.typewriter').style.animation = 'none'; | |
| setTimeout(() => { | |
| document.querySelector('.typewriter').style.animation = ''; | |
| }, 10); | |
| }, 3500); | |
| </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/landserial" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |