Spaces:

timoon811
/

tmosnova

Running

App Files Files Community

timoon811 commited on Apr 30, 2025

Commit

f3d20ee

verified ·

1 Parent(s): 48f8db6

Add 2 files

Browse files

Files changed (2) hide show

index.html +143 -54
prompts.txt +3 -1

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <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>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
@@ -101,6 +101,47 @@
             opacity: 1;
         }
         @media (max-width: 768px) {
             .dashboard {
                 transform: none;
@@ -109,19 +150,40 @@
     </style>
 </head>
 <body class="min-h-screen">
     <div class="container mx-auto px-4 py-12 md:py-24">
         <div class="flex flex-col md:flex-row items-center">
             <!-- Left side - Text content -->
             <div class="w-full md:w-1/2 mb-16 md:mb-0 md:pr-12">
                 <h1 class="text-4xl md:text-5xl lg:text-6xl font-black uppercase tracking-wide mb-6 text-[#f6fc79] glow-text">
-                    Освой арбитраж трафика
                 </h1>
                 <h2 class="text-2xl md:text-3xl lg:text-4xl font-black uppercase tracking-wide mb-6 text-[#f6fc79] glow-text">
                     и начни зарабатывать от $2,000 в месяц
                 </h2>
                 <p class="text-lg md:text-xl mb-10 font-medium text-gray-300 leading-relaxed">
-                    Полный курс от команды TMT. Настоящие связки, кейсы, поддержка, первые выплаты уже в процессе обучения.
                 </p>
                 <div class="flex flex-col sm:flex-row gap-4">
@@ -171,14 +233,24 @@
                             </div>
                             <div class="bg-gray-900 bg-opacity-50 rounded-lg p-3 border border-gray-800">
                                 <p class="text-xs text-gray-400">Выплата</p>
-                                <p class="text-xl font-bold text-red-400" id="payout-counter">$137.60 payout</p>
                             </div>
                         </div>
-                        <!-- Flow visualization -->
                         <div class="relative h-48 md:h-56">
                             <!-- Source icons -->
-                            <div class="flow-item" style="left: 5%; top: 30%;" 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">
                                     <i class="fab fa-facebook-f text-green-500 text-xl"></i>
                                 </div>
@@ -187,68 +259,44 @@
                                 </div>
                             </div>
-                            <div class="flow-item" style="left: 5%; top: 50%;" data-tooltip="Источник: TikTok 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">
-                                    <i class="fab fa-tiktok text-green-500 text-xl"></i>
                                 </div>
                                 <div class="tooltip absolute bg-gray-900 text-white text-xs p-2 rounded mt-2 whitespace-nowrap">
-                                    Источник: TikTok Ads
                                 </div>
                             </div>
-                            <div class="flow-item" style="left: 5%; top: 70%;" data-tooltip="Источник: Google 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">
-                                    <i class="fab fa-google text-green-500 text-xl"></i>
                                 </div>
                                 <div class="tooltip absolute bg-gray-900 text-white text-xs p-2 rounded mt-2 whitespace-nowrap">
-                                    Источник: Google Ads
                                 </div>
                             </div>
-                            <!-- Arrow -->
-                            <div class="flow-item" style="left: 20%; top: 50%;">
-                                <i class="fas fa-arrow-right text-blue-500 text-2xl"></i>
-                            </div>
-                            <!-- Landing page -->
-                            <div class="flow-item" style="left: 35%; top: 50%;" data-tooltip="Лендинг: Gamble DE">
-                                <div class="w-14 h-14 bg-blue-500 bg-opacity-20 rounded-lg flex items-center justify-center border-2 border-blue-500">
-                                    <i class="fas fa-window-maximize text-blue-500 text-2xl"></i>
                                 </div>
                                 <div class="tooltip absolute bg-gray-900 text-white text-xs p-2 rounded mt-2 whitespace-nowrap">
-                                    Лендинг: Gamble DE
                                 </div>
                             </div>
-                            <!-- Arrow -->
-                            <div class="flow-item" style="left: 50%; top: 50%;">
-                                <i class="fas fa-arrow-right text-yellow-500 text-2xl"></i>
-                            </div>
-                            <!-- Conversion -->
-                            <div class="flow-item" style="left: 65%; top: 50%;" data-tooltip="Лид подтверждён">
-                                <div class="w-14 h-14 bg-yellow-500 bg-opacity-20 rounded-lg flex items-center justify-center border-2 border-yellow-500">
-                                    <i class="fas fa-check-circle text-yellow-500 text-2xl"></i>
                                 </div>
                                 <div class="tooltip absolute bg-gray-900 text-white text-xs p-2 rounded mt-2 whitespace-nowrap">
-                                    Лид подтверждён
                                 </div>
                             </div>
-                            <!-- Arrow -->
-                            <div class="flow-item" style="left: 80%; top: 50%;">
-                                <i class="fas fa-arrow-right text-red-500 text-2xl"></i>
-                            </div>
-                            <!-- Payout -->
-                            <div class="flow-item" style="left: 90%; top: 50%;" data-tooltip="Выплата отправлена">
-                                <div class="w-14 h-14 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center border-2 border-red-500">
-                                    <i class="fas fa-coins text-red-500 text-2xl"></i>
-                                </div>
-                                <div class="tooltip absolute bg-gray-900 text-white text-xs p-2 rounded mt-2 whitespace-nowrap">
-                                    Выплата отправлена
-                                </div>
-                            </div>
                         </div>
                         <!-- Graph background -->
@@ -290,7 +338,7 @@
                 if (elementId === 'traffic-counter') {
                     element.textContent = Math.floor(current) + ' ' + suffix;
                 } else if (elementId === 'payout-counter') {
-                    element.textContent = '$' + current.toFixed(2) + ' ' + suffix;
                 } else if (elementId === 'roi-counter') {
                     element.textContent = Math.floor(current) + suffix;
                 } else if (elementId === 'conversion-counter') {
@@ -301,7 +349,7 @@
         // Start counters
         animateCounter('traffic-counter', 1848, 'визитов');
-        animateCounter('payout-counter', 137.60, 'payout');
         animateCounter('roi-counter', 210, '%');
         animateCounter('conversion-counter', 1, 'конверсия');
@@ -368,18 +416,59 @@
             });
         });
-        // Randomize counters periodically
         setInterval(() => {
             const randomTraffic = Math.floor(Math.random() * 500) + 1500;
-            const randomPayout = (Math.random() * 50 + 100).toFixed(2);
             const randomROI = Math.floor(Math.random() * 50) + 180;
             const randomConversion = Math.floor(Math.random() * 3) + 1;
             animateCounter('traffic-counter', randomTraffic, 'визитов', 1000);
-            animateCounter('payout-counter', parseFloat(randomPayout), 'payout', 1000);
             animateCounter('roi-counter', randomROI, '%', 1000);
             animateCounter('conversion-counter', randomConversion, 'конверсия', 1000);
-        }, 5000);
     </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/tmosnova" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Освой Affiliate Marketing | 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>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
             opacity: 1;
         }
+        .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">
+    <!-- Navigation Menu -->
+    <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>
+                <button class="md:hidden text-white">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+            </div>
+        </div>
+    </nav>
     <div class="container mx-auto px-4 py-12 md:py-24">
         <div class="flex flex-col md:flex-row items-center">
             <!-- Left side - Text content -->
             <div class="w-full md:w-1/2 mb-16 md:mb-0 md:pr-12">
                 <h1 class="text-4xl md:text-5xl lg:text-6xl font-black uppercase tracking-wide mb-6 text-[#f6fc79] glow-text">
+                    Освой Affiliate Marketing
                 </h1>
                 <h2 class="text-2xl md:text-3xl lg:text-4xl font-black uppercase tracking-wide mb-6 text-[#f6fc79] glow-text">
                     и начни зарабатывать от $2,000 в месяц
                 </h2>
                 <p class="text-lg md:text-xl mb-10 font-medium text-gray-300 leading-relaxed">
+                    Полный курс от команды Traffic Master. Настоящие связки, кейсы, поддержка, первые выплаты уже в процессе обучения.
                 </p>
                 <div class="flex flex-col sm:flex-row gap-4">
                             </div>
                             <div class="bg-gray-900 bg-opacity-50 rounded-lg p-3 border border-gray-800">
                                 <p class="text-xs text-gray-400">Выплата</p>
+                                <p class="text-xl font-bold text-red-400" id="payout-counter">$137.60</p>
                             </div>
                         </div>
+                        <!-- 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">
                                     <i class="fab fa-facebook-f text-green-500 text-xl"></i>
                                 </div>
                                 </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>
                                 </div>
                                 <div class="tooltip absolute bg-gray-900 text-white text-xs p-2 rounded mt-2 whitespace-nowrap">
+                                    Лендинг
                                 </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>
                                 </div>
                                 <div class="tooltip absolute bg-gray-900 text-white text-xs p-2 rounded mt-2 whitespace-nowrap">
+                                    Лид
                                 </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>
                                 </div>
                                 <div class="tooltip absolute bg-gray-900 text-white text-xs p-2 rounded mt-2 whitespace-nowrap">
+                                    Подтверждённый лид
                                 </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>
                                 </div>
                                 <div class="tooltip absolute bg-gray-900 text-white text-xs p-2 rounded mt-2 whitespace-nowrap">
+                                    Выплата
                                 </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 -->
                 if (elementId === 'traffic-counter') {
                     element.textContent = Math.floor(current) + ' ' + suffix;
                 } else if (elementId === 'payout-counter') {
+                    element.textContent = '$' + current.toFixed(2);
                 } else if (elementId === 'roi-counter') {
                     element.textContent = Math.floor(current) + suffix;
                 } else if (elementId === 'conversion-counter') {
         // Start counters
         animateCounter('traffic-counter', 1848, 'визитов');
+        animateCounter('payout-counter', 137.60);
         animateCounter('roi-counter', 210, '%');
         animateCounter('conversion-counter', 1, 'конверсия');
             });
         });
+        // 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(() => {
+            // Generate random payout between 50 and 200
+            const randomIncrement = (Math.random() * 10 + 5).toFixed(2);
+            payoutAmount = (parseFloat(payoutAmount) + parseFloat(randomIncrement)).toFixed(2);
+            // Animate the payout counter
+            const element = document.getElementById('payout-counter');
+            gsap.to(element, {
+                scale: 1.1,
+                color: '#ff5555',
+                duration: 0.3,
+                onComplete: () => {
+                    element.textContent = '$' + payoutAmount;
+                    gsap.to(element, {
+                        scale: 1,
+                        color: '#ff6b6b',
+                        duration: 0.3
+                    });
+                }
+            });
+            // Also update other stats periodically
             const randomTraffic = Math.floor(Math.random() * 500) + 1500;
             const randomROI = Math.floor(Math.random() * 50) + 180;
             const randomConversion = Math.floor(Math.random() * 3) + 1;
             animateCounter('traffic-counter', randomTraffic, 'визитов', 1000);
             animateCounter('roi-counter', randomROI, '%', 1000);
             animateCounter('conversion-counter', randomConversion, 'конверсия', 1000);
+        }, 1500); // Update every 1.5 seconds
     </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/tmosnova" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

	@@ -1 +1,3 @@
1	- 🔧 Структура • Слева — заголовок, подзаголовок, кнопки (вся основная подача и 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% ширины ⸻

+   🔧 Структура 	•	Слева — заголовок, подзаголовок, кнопки (вся основная подача и 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 и в блоке "Арбитраж в действии" - снизу изобрази путь по другому - чтобы было более красивее! Как сейчас не нравится! То есть Источник - Лид - подтвержденный лид - выплата! Сейчас он как-будто съехал внизу и выглядит не красиво! Сделай нормально!