Hugging Face's logo

Spaces:
timoon811
/
webinar2-0
Running

App Files Community
timoon811 commited on
Commit
ed918cc
·
verified ·
1 Parent(s): 598c18a

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +84 -2
  2. prompts.txt +2 -1
index.html CHANGED
@@ -85,6 +85,56 @@
85
  border-color: #f6fc79;
86
  box-shadow: 0 0 0 2px rgba(246, 252, 121, 0.3);
87
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  </style>
89
  </head>
90
  <body class="min-h-screen">
@@ -118,7 +168,7 @@
118
  </h1>
119
  <p class="text-xl md:text-2xl text-master mb-10">Бесплатно. Проверенные стратегии. Реальные кейсы.</p>
120
  <div class="flex flex-col sm:flex-row justify-center gap-4">
121
- <a href="#about" class="btn-primary px-8 py-4 rounded-full text-lg font-bold">СМОТРЕТЬ ПРОМО</a>
122
  <div class="flex items-center justify-center">
123
  <div class="w-12 h-12 rounded-full bg-traffic flex items-center justify-center text-black mr-3">
124
  <i class="fas fa-play"></i>
@@ -135,6 +185,25 @@
135
  </div>
136
  </section>
137
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
  <!-- About Section -->
139
  <section id="about" class="py-20 px-4 sm:px-6 lg:px-8">
140
  <div class="container mx-auto">
@@ -194,7 +263,7 @@
194
  </div>
195
  <div>
196
  <h3 class="text-xl font-bold mb-2">УВЕЛИЧЕНИЕ ПРИБЫЛИ</h3>
197
- <p class="text-master">Как масштабировать прибыль с минимальными вложениями.</p>
198
  </div>
199
  </div>
200
 
@@ -501,6 +570,19 @@
501
  });
502
  });
503
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
504
  </script>
505
  <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/webinar2-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
506
  </html>
 
85
  border-color: #f6fc79;
86
  box-shadow: 0 0 0 2px rgba(246, 252, 121, 0.3);
87
  }
88
+ .video-container {
89
+ position: relative;
90
+ padding-bottom: 56.25%; /* 16:9 */
91
+ height: 0;
92
+ overflow: hidden;
93
+ border-radius: 12px;
94
+ box-shadow: 0 20px 40px rgba(246, 252, 121, 0.2);
95
+ }
96
+ .video-container iframe {
97
+ position: absolute;
98
+ top: 0;
99
+ left: 0;
100
+ width: 100%;
101
+ height: 100%;
102
+ border: none;
103
+ }
104
+ .play-button {
105
+ position: absolute;
106
+ top: 50%;
107
+ left: 50%;
108
+ transform: translate(-50%, -50%);
109
+ width: 80px;
110
+ height: 80px;
111
+ background-color: rgba(246, 252, 121, 0.9);
112
+ border-radius: 50%;
113
+ display: flex;
114
+ align-items: center;
115
+ justify-content: center;
116
+ cursor: pointer;
117
+ transition: all 0.3s;
118
+ z-index: 2;
119
+ }
120
+ .play-button:hover {
121
+ transform: translate(-50%, -50%) scale(1.1);
122
+ background-color: rgba(246, 252, 121, 1);
123
+ }
124
+ .play-button i {
125
+ color: #000;
126
+ font-size: 30px;
127
+ margin-left: 5px;
128
+ }
129
+ .video-thumbnail {
130
+ position: absolute;
131
+ top: 0;
132
+ left: 0;
133
+ width: 100%;
134
+ height: 100%;
135
+ object-fit: cover;
136
+ z-index: 1;
137
+ }
138
  </style>
139
  </head>
140
  <body class="min-h-screen">
 
168
  </h1>
169
  <p class="text-xl md:text-2xl text-master mb-10">Бесплатно. Проверенные стратегии. Реальные кейсы.</p>
170
  <div class="flex flex-col sm:flex-row justify-center gap-4">
171
+ <a href="#video-preview" class="btn-primary px-8 py-4 rounded-full text-lg font-bold">СМОТРЕТЬ ПРОМО</a>
172
  <div class="flex items-center justify-center">
173
  <div class="w-12 h-12 rounded-full bg-traffic flex items-center justify-center text-black mr-3">
174
  <i class="fas fa-play"></i>
 
185
  </div>
186
  </section>
187
 
188
+ <!-- Video Preview Section -->
189
+ <section id="video-preview" class="py-20 px-4 sm:px-6 lg:px-8 bg-black">
190
+ <div class="container mx-auto max-w-4xl">
191
+ <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center section-title">ПРОМО ВЕБИНАРА</h2>
192
+
193
+ <div class="video-container mb-10">
194
+ <div class="play-button" onclick="loadVideo()">
195
+ <i class="fas fa-play"></i>
196
+ </div>
197
+ <img src="https://img.youtube.com/vi/XdFXlnzF7QQ/maxresdefault.jpg" alt="Превью вебинара" class="video-thumbnail">
198
+ <iframe id="youtube-video" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="display: none;"></iframe>
199
+ </div>
200
+
201
+ <div class="text-center">
202
+ <a href="#registration" class="btn-primary px-8 py-4 rounded-full text-lg font-bold">ЗАБРОНИРОВАТЬ МЕСТО</a>
203
+ </div>
204
+ </div>
205
+ </section>
206
+
207
  <!-- About Section -->
208
  <section id="about" class="py-20 px-4 sm:px-6 lg:px-8">
209
  <div class="container mx-auto">
 
263
  </div>
264
  <div>
265
  <h3 class="text-xl font-bold mb-2">УВЕЛИЧЕНИЕ ПРИБЫЛИ</h3>
266
+ <p class="text-master">Как масштабировать прибыль с минимальными вложениями.</p>
267
  </div>
268
  </div>
269
 
 
570
  });
571
  });
572
  });
573
+
574
+ // YouTube video loader
575
+ function loadVideo() {
576
+ const videoContainer = document.querySelector('.video-container');
577
+ const playButton = document.querySelector('.play-button');
578
+ const thumbnail = document.querySelector('.video-thumbnail');
579
+ const iframe = document.getElementById('youtube-video');
580
+
581
+ iframe.src = "https://www.youtube.com/embed/XdFXlnzF7QQ?autoplay=1&rel=0";
582
+ iframe.style.display = 'block';
583
+ playButton.style.display = 'none';
584
+ thumbnail.style.display = 'none';
585
+ }
586
  </script>
587
  <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/webinar2-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
588
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- Техническое задание на лендинг “Вебинар по трафику” - вебинар состоится 9 мая в 20:00 по времени Алматы 1. Структура страницы Блок 1: Промо-заголовок + кнопка CTA • Большой броский заголовок (“Эксклюзивный вебинар по трафику”) • Подзаголовок (“Бесплатно. Проверенные стратегии. Реальные кейсы.”) • Кнопка: “Смотреть промо” (якорная ссылка на следующий блок) ⸻ Блок 2: О чём вебинар • Заголовок: “О чём этот вебинар?” • 3 подпункта с иконками: • Конкретные кейсы • Работающие инструменты • Эксклюзивные фишки • Кнопка: “Забронировать место” ⸻ Блок 3: Что вы получите на вебинаре • Заголовок: “Что вы получите” • Список преимуществ (иконка + заголовок + короткий текст): • 5+ источников трафика • Увеличение прибыли • Быстрый результат • Готовые инструменты • Анализ и оптимизация • Бонусы для участников • Кнопка: “Хочу на вебинар” ⸻ Блок 4: Спикер • Заголовок: “Кто ведет вебинар” • Фото спикера • Имя и описание: • Имя: Тимур В. • Позиция: Эксперт в арбитраже трафика с 2021 года! • Описание достижений: опыт, обороты, количество обученных. • Цитата от спикера ⸻ Блок 5: Отзывы участников • Заголовок: “Отзывы участников” • 3 карточки отзывов: • Фото пользователя • Имя • Текст отзыва • Дата вебинара • Кнопка: “Смотреть все отзывы” (переход или разворот) ⸻ Блок 6: Остались вопросы • Краткий текст: “Напишите нам в любое время — мы ответим!” • Кнопка: “Написать в Telegram” (ссылка на чат) ⸻ Блок 7: Регистрация на вебинар • Заголовок: “Регистрация на вебинар” • Форма: • Имя • Email • Телефон (опционально) • Кнопка “Зарегистрироваться бесплатно” • Подпись о согласии с политикой конфиденциальности ⸻ Футер • Логотип TRAFFIC MASTER • Описание компании (год основания, сколько обучено) • Навигация по якорям: • О вебинаре • Что вы получите • Автор • Отзывы • Регистрация • Копирайт © 2025 Traffic Master 3. Требования к контенту • Все тексты короткие, без воды • Акцент на результатах и выгодах для пользователя • Фотографии спикера и реальные скриншоты кейсов • Отзывы с реальными датами и цифрами • Минимальное количество кликов до регистрации ⸻ 4. Функционал • Адаптивность под все устройства • Якорная навигация по странице • Интеграция формы с email-рассылкой • Быстрая загрузка • Кнопки CTA дублируются в каждом основном блоке ⸻ 5. Особенности • Легкий акцент на срочность (места ограничены) • Подчеркнуть эксклюзивность знаний и практическую ценность • Бонусы для зарегистрированных пользователей (чек-листы, доступ в закрытый чат) Дизайн делай исходя из брендбука - представленного ниже! BRANDBOOK: TRAFFIC MASTER --- ### 1. ОСНОВА БРЕНДА Название: Traffic Master Суть бренда: Система обучения арбитражников, которая транслирует свободу, кайф, силу, деньги, рост и драйв. Кор-месседж: Арбитраж не для всех. Но если ты вошел — ты в игре. --- ### 2. ЛОГОТИП #### Основна�� версия: - TRAFFIC — цвет: #f6fc79 (ярко-лимонный), гладкая текстура - MASTER — цвет: #E1E1E1 (30% серее белого) - Шрифт: Bold Sans-Serif - Версал, без курсивов #### Стилистика: - Минимализм - Объем на слове "TRAFFIC" - Горизонтальное расположение --- ### 3. ПРИМЕНЕНИЕ ЛОГОТИПА #### Черный фон (основной): - Используется стандартный логотип (цвета: #f6fc79 и `#E1E1E1`) - Не допускается добавление теней или фонов #### Белый фон: - "TRAFFIC" — #bcc20e (неоново-оливковый) - "MASTER" — #1A1A1A (почти-черный) #### Серый фон (середина UI): - Слово TRAFFIC становится #f7ff9f - MASTER остается белым (`#FFFFFF`) #### Стикеры и картинки: - Используйте лого без фона (.png) - Отступ от края не менее 20px --- ### 4. ЦВЕТОВАЯ ПАЛИТРА - #f6fc79 — главный акцент (на TRAFFIC) - #E1E1E1 — нейтральный серый (на MASTER) - #000000 — фон - #FFFFFF — дополнительный цвет для текстов и фонов --- ### 5. ТИПОГРАФИЯ - Шрифт: Inter, Montserrat, Suisse Int'l (Bold / Regular) - Только в верхнем регистре - Растояние между буквами: 2–3% ---
 
 
1
+ Техническое задание на лендинг “Вебинар по трафику” - вебинар состоится 9 мая в 20:00 по времени Алматы 1. Структура страницы Блок 1: Промо-заголовок + кнопка CTA • Большой броский заголовок (“Эксклюзивный вебинар по трафику”) • Подзаголовок (“Бесплатно. Проверенные стратегии. Реальные кейсы.”) • Кнопка: “Смотреть промо” (якорная ссылка на следующий блок) ⸻ Блок 2: О чём вебинар • Заголовок: “О чём этот вебинар?” • 3 подпункта с иконками: • Конкретные кейсы • Работающие инструменты • Эксклюзивные фишки • Кнопка: “Забронировать место” ⸻ Блок 3: Что вы получите на вебинаре • Заголовок: “Что вы получите” • Список преимуществ (иконка + заголовок + короткий текст): • 5+ источников трафика • Увеличение прибыли • Быстрый результат • Готовые инструменты • Анализ и оптимизация • Бонусы для участников • Кнопка: “Хочу на вебинар” ⸻ Блок 4: Спикер • Заголовок: “Кто ведет вебинар” • Фото спикера • Имя и описание: • Имя: Тимур В. • Позиция: Эксперт в арбитраже трафика с 2021 года! • Описание достижений: опыт, обороты, количество обученных. • Цитата от спикера ⸻ Блок 5: Отзывы участников • Заголовок: “Отзывы участников” • 3 карточки отзывов: • Фото пользователя • Имя • Текст отзыва • Дата вебинара • Кнопка: “Смотреть все отзывы” (переход или разворот) ⸻ Блок 6: Остались вопросы • Краткий текст: “Напишите нам в любое время — мы ответим!” • Кнопка: “Написать в Telegram” (ссылка на чат) ⸻ Блок 7: Регистрация на вебинар • Заголовок: “Регистрация на вебинар” • Форма: • Имя • Email • Телефон (опционально) • Кнопка “Зарегистрироваться бесплатно” • Подпись о согласии с политикой конфиденциальности ⸻ Футер • Логотип TRAFFIC MASTER • Описание компании (год основания, сколько обучено) • Навигация по якорям: • О вебинаре • Что вы получите • Автор • Отзывы • Регистрация • Копирайт © 2025 Traffic Master 3. Требования к контенту • Все тексты короткие, без воды • Акцент на результатах и выгодах для пользователя • Фотографии спикера и реальные скриншоты кейсов • Отзывы с реальными датами и цифрами • Минимальное количество кликов до регистрации ⸻ 4. Функционал • Адаптивность под все устройства • Якорная навигация по странице • Интеграция формы с email-рассылкой • Быстрая загрузка • Кнопки CTA дублируются в каждом основном блоке ⸻ 5. Особенности • Легкий акцент на срочность (места ограничены) • Подчеркнуть эксклюзивность знаний и практическую ценность • Бонусы для зарегистрированных пользователей (чек-листы, доступ в закрытый чат) Дизайн делай исходя из брендбука - представленного ниже! BRANDBOOK: TRAFFIC MASTER --- ### 1. ОСНОВА БРЕНДА Название: Traffic Master Суть бренда: Система обучения арбитражников, которая транслирует свободу, кайф, силу, деньги, рост и драйв. Кор-месседж: Арбитраж не для всех. Но если ты вошел — ты в игре. --- ### 2. ЛОГОТИП #### Основная версия: - TRAFFIC — цвет: #f6fc79 (ярко-лимонный), гладкая текстура - MASTER — цвет: #E1E1E1 (30% серее белого) - Шрифт: Bold Sans-Serif - Версал, без курсивов #### Стилистика: - Минимализм - Объем на слове "TRAFFIC" - Горизонтальное расположение --- ### 3. ПРИМЕНЕНИЕ ЛОГОТИПА #### Черный фон (основной): - Используется стандартный логотип (цвета: #f6fc79 и `#E1E1E1`) - Не допускается добавление теней или фонов #### Белый фон: - "TRAFFIC" — #bcc20e (неоново-оливковый) - "MASTER" — #1A1A1A (почти-черный) #### Серый фон (середина UI): - Слово TRAFFIC становится #f7ff9f - MASTER остается белым (`#FFFFFF`) #### Стикеры и картинки: - Используйте лого без фона (.png) - Отступ от края не менее 20px --- ### 4. ЦВЕТОВАЯ ПАЛИТРА - #f6fc79 — главный акцент (на TRAFFIC) - #E1E1E1 — нейтральный серый (на MASTER) - #000000 — фон - #FFFFFF — дополнительный цвет для текстов и фонов --- ### 5. ТИПОГРАФИЯ - Шрифт: Inter, Montserrat, Suisse Int'l (Bold / Regular) - Только в верхнем регистре - Растояние между буквами: 2–3% ---
2
+ Добавь блок с превью - https://www.youtube.com/watch?v=XdFXlnzF7QQ&ab_channel=%D0%94%D0%95%D0%9D%D0%98%D0%A1%D0%9B%D0%90%D0%93%D0%A3%D0%A2%D0%95%D0%9D%D0%9A%D0%9E