Spaces:

timoon811
/

tmosnova

Running

App Files Files Community

timoon811 commited on Apr 30, 2025

Commit

3a7ef57

verified ·

1 Parent(s): f3d20ee

Add 2 files

Browse files

Files changed (2) hide show

index.html +42 -85
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -103,50 +103,38 @@
         .nav-link {
             position: relative;
         }
-        .nav-link::after {
-            content: '';
-            position: absolute;
-            width: 0;
-            height: 2px;
-            bottom: -2px;
-            left: 0;
-            background-color: #f6fc79;
-            transition: width 0.3s ease;
-        }
-        .nav-link:hover::after {
-            width: 100%;
         }
-        .process-line {
             position: absolute;
-            height: 2px;
-            background: linear-gradient(90deg, rgba(246,252,121,0.5) 0%, rgba(246,252,121,1) 50%, rgba(246,252,121,0.5) 100%);
             top: 50%;
-            left: 10%;
-            right: 10%;
             transform: translateY(-50%);
             z-index: 1;
         }
-        .process-dot {
-            position: absolute;
-            width: 8px;
-            height: 8px;
-            background-color: #f6fc79;
-            border-radius: 50%;
-            top: 50%;
-            transform: translateY(-50%);
-            z-index: 2;
-        }
         @media (max-width: 768px) {
             .dashboard {
                 transform: none;
             }
         }
     </style>
 </head>
 <body class="min-h-screen">
@@ -154,13 +142,12 @@
     <nav class="bg-black bg-opacity-80 border-b border-gray-800 backdrop-blur-sm sticky top-0 z-50">
         <div class="container mx-auto px-4 py-4">
             <div class="flex justify-between items-center">
-                <div class="text-2xl font-bold text-[#f6fc79]">
-                    Traffic Master
                 </div>
                 <div class="hidden md:flex space-x-8">
-                    <a href="#" class="nav-link text-white hover:text-[#f6fc79]">Главная</a>
-                    <a href="#" class="nav-link text-white hover:text-[#f6fc79]">Курсы</a>
-                    <a href="#" class="nav-link text-white hover:text-[#f6fc79]">Кейсы</a>
                     <a href="#" class="nav-link text-white hover:text-[#f6fc79]">Отзывы</a>
                     <a href="#" class="nav-link text-white hover:text-[#f6fc79]">Контакты</a>
                 </div>
@@ -203,7 +190,7 @@
                     </div>
                     <div>
                         <p class="text-sm text-gray-400">Уже прошли курс:</p>
-                        <p class="text-[#f6fc79] font-bold">1,247+ студентов</p>
                     </div>
                 </div>
             </div>
@@ -239,16 +226,6 @@
                         <!-- Process visualization -->
                         <div class="relative h-48 md:h-56">
-                            <!-- Process line -->
-                            <div class="process-line"></div>
-                            <!-- Process dots -->
-                            <div class="process-dot" style="left: 10%;"></div>
-                            <div class="process-dot" style="left: 30%;"></div>
-                            <div class="process-dot" style="left: 50%;"></div>
-                            <div class="process-dot" style="left: 70%;"></div>
-                            <div class="process-dot" style="left: 90%;"></div>
                             <!-- Source icons -->
                             <div class="flow-item" style="left: 10%; top: 50%; transform: translate(-50%, -50%);" data-tooltip="Источник: Facebook Ads">
                                 <div class="w-12 h-12 bg-green-500 bg-opacity-20 rounded-full flex items-center justify-center border-2 border-green-500">
@@ -259,6 +236,11 @@
                                 </div>
                             </div>
                             <div class="flow-item" style="left: 30%; top: 50%; transform: translate(-50%, -50%);" data-tooltip="Лендинг">
                                 <div class="w-12 h-12 bg-blue-500 bg-opacity-20 rounded-full flex items-center justify-center border-2 border-blue-500">
                                     <i class="fas fa-window-maximize text-blue-500 text-xl"></i>
@@ -268,6 +250,11 @@
                                 </div>
                             </div>
                             <div class="flow-item" style="left: 50%; top: 50%; transform: translate(-50%, -50%);" data-tooltip="Лид">
                                 <div class="w-12 h-12 bg-yellow-500 bg-opacity-20 rounded-full flex items-center justify-center border-2 border-yellow-500">
                                     <i class="fas fa-user text-yellow-500 text-xl"></i>
@@ -277,6 +264,11 @@
                                 </div>
                             </div>
                             <div class="flow-item" style="left: 70%; top: 50%; transform: translate(-50%, -50%);" data-tooltip="Подтверждённый лид">
                                 <div class="w-12 h-12 bg-purple-500 bg-opacity-20 rounded-full flex items-center justify-center border-2 border-purple-500">
                                     <i class="fas fa-check-circle text-purple-500 text-xl"></i>
@@ -286,6 +278,11 @@
                                 </div>
                             </div>
                             <div class="flow-item" style="left: 90%; top: 50%; transform: translate(-50%, -50%);" data-tooltip="Выплата">
                                 <div class="w-12 h-12 bg-red-500 bg-opacity-20 rounded-full flex items-center justify-center border-2 border-red-500">
                                     <i class="fas fa-coins text-red-500 text-xl"></i>
@@ -294,25 +291,6 @@
                                     Выплата
                                 </div>
                             </div>
-                            <!-- Animated arrow -->
-                            <div class="absolute left-10% right-90% top-50% h-2 bg-[#f6fc79] w-20% z-0" id="process-arrow"></div>
-                        </div>
-                        <!-- Graph background -->
-                        <div class="absolute bottom-0 left-0 right-0 h-16 bg-gray-900 bg-opacity-50 border-t border-gray-800 z-0">
-                            <svg viewBox="0 0 500 50" class="w-full h-full">
-                                <path d="M0,50 C50,30 100,40 150,20 C200,10 250,30 300,15 C350,5 400,25 450,10 C500,0 550,20 600,10"
-                                      stroke="#f6fc79" stroke-width="2" fill="none" stroke-dasharray="5,3" />
-                                <path d="M0,50 C50,30 100,40 150,20 C200,10 250,30 300,15 C350,5 400,25 450,10 C500,0 550,20 600,10"
-                                      stroke="url(#graph-gradient)" stroke-width="3" fill="transparent" />
-                                <defs>
-                                    <linearGradient id="graph-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-                                        <stop offset="0%" stop-color="#f6fc79" stop-opacity="0.7" />
-                                        <stop offset="100%" stop-color="#f6fc79" stop-opacity="0.2" />
-                                    </linearGradient>
-                                </defs>
-                            </svg>
                         </div>
                     </div>
                 </div>
@@ -416,27 +394,6 @@
             });
         });
-        // Animate process arrow
-        function animateProcessArrow() {
-            const arrow = document.getElementById('process-arrow');
-            gsap.to(arrow, {
-                width: '80%',
-                duration: 2,
-                ease: 'power1.inOut',
-                onComplete: () => {
-                    gsap.to(arrow, {
-                        width: '0%',
-                        duration: 0.5,
-                        delay: 0.5,
-                        onComplete: animateProcessArrow
-                    });
-                }
-            });
-        }
-        // Start arrow animation
-        animateProcessArrow();
         // Random payout generator
         let payoutAmount = 137.60;
         setInterval(() => {

         .nav-link {
             position: relative;
+            transition: all 0.3s ease;
         }
+        .nav-link:hover {
+            text-shadow: 0 0 10px rgba(246, 252, 121, 0.7);
+            color: #f6fc79 !important;
         }
+        .process-arrow {
             position: absolute;
+            color: #f6fc79;
+            font-size: 24px;
             top: 50%;
             transform: translateY(-50%);
             z-index: 1;
         }
         @media (max-width: 768px) {
             .dashboard {
                 transform: none;
             }
         }
+        .arrow-animation {
+            animation: arrowPulse 1.5s infinite;
+        }
+        @keyframes arrowPulse {
+            0% { opacity: 0.5; transform: translateY(-50%) translateX(0); }
+            50% { opacity: 1; transform: translateY(-50%) translateX(5px); }
+            100% { opacity: 0.5; transform: translateY(-50%) translateX(0); }
+        }
     </style>
 </head>
 <body class="min-h-screen">
     <nav class="bg-black bg-opacity-80 border-b border-gray-800 backdrop-blur-sm sticky top-0 z-50">
         <div class="container mx-auto px-4 py-4">
             <div class="flex justify-between items-center">
+                <div class="text-2xl font-bold">
+                    <span class="text-[#f6fc79]">Traffic</span> <span class="text-white">Master</span>
                 </div>
                 <div class="hidden md:flex space-x-8">
+                    <a href="#" class="nav-link text-white hover:text-[#f6fc79]">О курсе</a>
+                    <a href="#" class="nav-link text-white hover:text-[#f6fc79]">Программа</a>
                     <a href="#" class="nav-link text-white hover:text-[#f6fc79]">Отзывы</a>
                     <a href="#" class="nav-link text-white hover:text-[#f6fc79]">Контакты</a>
                 </div>
                     </div>
                     <div>
                         <p class="text-sm text-gray-400">Уже прошли курс:</p>
+                        <p class="text-[#f6fc79] font-bold">356+ студентов</p>
                     </div>
                 </div>
             </div>
                         <!-- Process visualization -->
                         <div class="relative h-48 md:h-56">
                             <!-- Source icons -->
                             <div class="flow-item" style="left: 10%; top: 50%; transform: translate(-50%, -50%);" data-tooltip="Источник: Facebook Ads">
                                 <div class="w-12 h-12 bg-green-500 bg-opacity-20 rounded-full flex items-center justify-center border-2 border-green-500">
                                 </div>
                             </div>
+                            <!-- Arrow -->
+                            <div class="process-arrow arrow-animation" style="left: 20%;">
+                                <i class="fas fa-arrow-right"></i>
+                            </div>
                             <div class="flow-item" style="left: 30%; top: 50%; transform: translate(-50%, -50%);" data-tooltip="Лендинг">
                                 <div class="w-12 h-12 bg-blue-500 bg-opacity-20 rounded-full flex items-center justify-center border-2 border-blue-500">
                                     <i class="fas fa-window-maximize text-blue-500 text-xl"></i>
                                 </div>
                             </div>
+                            <!-- Arrow -->
+                            <div class="process-arrow arrow-animation" style="left: 40%;">
+                                <i class="fas fa-arrow-right"></i>
+                            </div>
                             <div class="flow-item" style="left: 50%; top: 50%; transform: translate(-50%, -50%);" data-tooltip="Лид">
                                 <div class="w-12 h-12 bg-yellow-500 bg-opacity-20 rounded-full flex items-center justify-center border-2 border-yellow-500">
                                     <i class="fas fa-user text-yellow-500 text-xl"></i>
                                 </div>
                             </div>
+                            <!-- Arrow -->
+                            <div class="process-arrow arrow-animation" style="left: 60%;">
+                                <i class="fas fa-arrow-right"></i>
+                            </div>
                             <div class="flow-item" style="left: 70%; top: 50%; transform: translate(-50%, -50%);" data-tooltip="Подтверждённый лид">
                                 <div class="w-12 h-12 bg-purple-500 bg-opacity-20 rounded-full flex items-center justify-center border-2 border-purple-500">
                                     <i class="fas fa-check-circle text-purple-500 text-xl"></i>
                                 </div>
                             </div>
+                            <!-- Arrow -->
+                            <div class="process-arrow arrow-animation" style="left: 80%;">
+                                <i class="fas fa-arrow-right"></i>
+                            </div>
                             <div class="flow-item" style="left: 90%; top: 50%; transform: translate(-50%, -50%);" data-tooltip="Выплата">
                                 <div class="w-12 h-12 bg-red-500 bg-opacity-20 rounded-full flex items-center justify-center border-2 border-red-500">
                                     <i class="fas fa-coins text-red-500 text-xl"></i>
                                     Выплата
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             });
         });
         // Random payout generator
         let payoutAmount = 137.60;
         setInterval(() => {

prompts.txt CHANGED Viewed

@@ -1,3 +1,4 @@
    🔧 Структура 	•	Слева — заголовок, подзаголовок, кнопки (вся основная подача и CTA) 	•	Справа — анимированная 3D-схема/дашборд, стилизованный под Keitaro или аналитический интерфейс трекера/CRM.  ⸻  📍 Левая часть (текст):  🔹 Заголовок:  Освой арбитраж трафика   и начни зарабатывать от $2,000 в месяц  	•	Шрифт: жирный, caps, без засечек 	•	Цвет: #f6fc79 (яркий лимон), с лёгким свечением  🔸 Подзаголовок:  Полный курс от команды TMT. Настоящие связки, кейсы, поддержка, первые выплаты уже в процессе обучения.  	•	Цвет: #E1E1E1, medium-weight 	•	Отступы, читаемость, адаптивность  🔘 Кнопки: 	1.	[🔥 Получить бесплатный урок] — яркая, с hover glow 	2.	[📘 Посмотреть программу курса] — прозрачная, с лимонным бордером  ⸻  📊 Правая часть (визуал: “Арбитраж в действии”):  💡 Анимационная 3D-схема или интерактивный элемент:  Тематика: “Как из трафика появляются деньги”  📐 Элементы визуала: 	•	В центре — дашборд, похожий на Keitaro или Google Analytics, в 3D-перспективе 	•	Слева направо проходят “данные”: 	•	🟢 Источник трафика (иконки FB, TikTok, Google) 	•	→ 🔵 Прокладка / сайт / оффер (иконка прокладки или лендинга) 	•	→ 🟡 Лид / заявка (всплывающее окно с $ или кнопкой “Конвертирован”) 	•	→ 🔴 Выплата (монета падает в “баланс”) 	•	Цифры обновляются в real-time: 	•	“$137.60 payout” 	•	“+1 конверсия” 	•	“ROI: 210%” 	•	“Трафик: 1848 визитов”  ⚙️ Реализация: 	•	Сделать через WebGL/Lottie/Canvas или видеофон 	•	Цветовая палитра: чёрный фон, линии неоновые (зеленый, лимонный, фиолетовый) 	•	Лёгкий партикл-эффект (поток цифровых точек), создающий динамику  ⸻  ✨ Дополнительные детали: 	•	🔁 Элемент “пульсации прибыли” — график на заднем фоне, который колышется в плюс 	•	👆 Наведение на блоки вызывает всплывающие подсказки: “Лид подтверждён”, “Выплата отправлена”, “Оффер: Gamble — GEO: DE”  ⸻  📱 Адаптив: 	•	На мобилках: визуал упрощён, заменяется статическим изображением схемы “трафик → лид → деньги” 	•	Текст занимает 100% ширины  ⸻
 Давай правки сделаем: 1) Поменяй текст Освой Арбитраж трафика на Освой Affiliate Marketing 2) В блое справа - где у тебя изображены значки источников трафика и тд - все немного съехало вниз - выглядит не красиво! Поправь! И еще сделай меню навигационное сверху! и там где у тебя идет графа выплаты - сгенерируй так, чтобы выплата поступала каждые 1-2 секунду - и убери слово "payout"
-Название поменяй сверху слева на Traffic Master и в блоке "Арбитраж в действии" - снизу изобрази путь по другому - чтобы было более красивее! Как сейчас не нравится! То есть Источник - Лид - подтвержденный лид - выплата! Сейчас он как-будто съехал внизу и выглядит не красиво! Сделай нормально!

    🔧 Структура 	•	Слева — заголовок, подзаголовок, кнопки (вся основная подача и CTA) 	•	Справа — анимированная 3D-схема/дашборд, стилизованный под Keitaro или аналитический интерфейс трекера/CRM.  ⸻  📍 Левая часть (текст):  🔹 Заголовок:  Освой арбитраж трафика   и начни зарабатывать от $2,000 в месяц  	•	Шрифт: жирный, caps, без засечек 	•	Цвет: #f6fc79 (яркий лимон), с лёгким свечением  🔸 Подзаголовок:  Полный курс от команды TMT. Настоящие связки, кейсы, поддержка, первые выплаты уже в процессе обучения.  	•	Цвет: #E1E1E1, medium-weight 	•	Отступы, читаемость, адаптивность  🔘 Кнопки: 	1.	[🔥 Получить бесплатный урок] — яркая, с hover glow 	2.	[📘 Посмотреть программу курса] — прозрачная, с лимонным бордером  ⸻  📊 Правая часть (визуал: “Арбитраж в действии”):  💡 Анимационная 3D-схема или интерактивный элемент:  Тематика: “Как из трафика появляются деньги”  📐 Элементы визуала: 	•	В центре — дашборд, похожий на Keitaro или Google Analytics, в 3D-перспективе 	•	Слева направо проходят “данные”: 	•	🟢 Источник трафика (иконки FB, TikTok, Google) 	•	→ 🔵 Прокладка / сайт / оффер (иконка прокладки или лендинга) 	•	→ 🟡 Лид / заявка (всплывающее окно с $ или кнопкой “Конвертирован”) 	•	→ 🔴 Выплата (монета падает в “баланс”) 	•	Цифры обновляются в real-time: 	•	“$137.60 payout” 	•	“+1 конверсия” 	•	“ROI: 210%” 	•	“Трафик: 1848 визитов”  ⚙️ Реализация: 	•	Сделать через WebGL/Lottie/Canvas или видеофон 	•	Цветовая палитра: чёрный фон, линии неоновые (зеленый, лимонный, фиолетовый) 	•	Лёгкий партикл-эффект (поток цифровых точек), создающий динамику  ⸻  ✨ Дополнительные детали: 	•	🔁 Элемент “пульсации прибыли” — график на заднем фоне, который колышется в плюс 	•	👆 Наведение на блоки вызывает всплывающие подсказки: “Лид подтверждён”, “Выплата отправлена”, “Оффер: Gamble — GEO: DE”  ⸻  📱 Адаптив: 	•	На мобилках: визуал упрощён, заменяется статическим изображением схемы “трафик → лид → деньги” 	•	Текст занимает 100% ширины  ⸻
 Давай правки сделаем: 1) Поменяй текст Освой Арбитраж трафика на Освой Affiliate Marketing 2) В блое справа - где у тебя изображены значки источников трафика и тд - все немного съехало вниз - выглядит не красиво! Поправь! И еще сделай меню навигационное сверху! и там где у тебя идет графа выплаты - сгенерируй так, чтобы выплата поступала каждые 1-2 секунду - и убери слово "payout"
+Название поменяй сверху слева на Traffic Master и в блоке "Арбитраж в действии" - снизу изобрази путь по другому - чтобы было более красивее! Как сейчас не нравится! То есть Источник - Лид - подтвержденный лид - выплата! Сейчас он как-будто съехал внизу и выглядит не красиво! Сделай нормаль��о!
+Правки: 1) Название - Traffic желтым оставь, Master - белым сделай! Пункты меню - при наведении чтобы светились неоном - как текст в заголовке! Пункты меню - О курсе, Программа, Отзывы, контакты 3) Уже прошли курс - уменьши кол-во до 356+ 4) блок справка "Арбитраж в действии" - Пунктирную линию убери снизу - она не нужна! УБери полоску которая связывает этапы пути - сделай стрелками, чтобы сами этапы не закрывались полоской!