Spaces:

timoon811
/

landgame

Running

App Files Files Community

timoon811 commited on Apr 19, 2025

Commit

23f64ce

verified ·

1 Parent(s): e8dafb6

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +908 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Landgame
-emoji: 📈
-colorFrom: blue
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: landgame
+emoji: 🐳
+colorFrom: gray
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,908 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Квест арбитражника: от новичка до профи</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=Press+Start+2P&family=Roboto:wght@400;500;700&display=swap');
+        body {
+            font-family: 'Roboto', sans-serif;
+            background-color: #0a0a0a;
+            color: #e2e2e2;
+            scroll-behavior: smooth;
+        }
+        .pixel-font {
+            font-family: 'Press Start 2P', cursive;
+        }
+        .hero-card {
+            transition: all 0.3s ease;
+            border: 2px solid transparent;
+        }
+        .hero-card:hover {
+            transform: translateY(-5px);
+            border-color: #f59e0b;
+            box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3);
+        }
+        .checkpoint {
+            position: relative;
+            transition: all 0.3s ease;
+        }
+        .checkpoint::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            background-color: #1e293b;
+            border: 3px solid #334155;
+            z-index: 2;
+        }
+        .checkpoint.active::before {
+            background-color: #10b981;
+            border-color: #047857;
+            box-shadow: 0 0 15px rgba(16, 185, 129, 0.7);
+        }
+        .checkpoint.completed::before {
+            background-color: #3b82f6;
+            border-color: #1d4ed8;
+        }
+        .checkpoint::after {
+            content: '';
+            position: absolute;
+            top: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 3px;
+            height: 80px;
+            background-color: #334155;
+            z-index: 1;
+        }
+        .checkpoint:last-child::after {
+            display: none;
+        }
+        .checkpoint.active::after {
+            background: linear-gradient(to bottom, #10b981, #334155);
+        }
+        .checkpoint.completed::after {
+            background: linear-gradient(to bottom, #3b82f6, #334155);
+        }
+        .artifact-card {
+            transition: all 0.3s ease;
+            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+            border: 1px solid #334155;
+        }
+        .artifact-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
+            border-color: #10b981;
+        }
+        .skill-node {
+            position: relative;
+            transition: all 0.3s ease;
+        }
+        .skill-node::before {
+            content: '';
+            position: absolute;
+            top: -15px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 2px;
+            height: 15px;
+            background-color: #334155;
+        }
+        .skill-node.locked {
+            filter: grayscale(100%);
+            opacity: 0.6;
+        }
+        .testimonial-card {
+            transition: all 0.3s ease;
+            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+            border: 1px solid #334155;
+        }
+        .testimonial-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
+            border-color: #3b82f6;
+        }
+        .progress-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 5px;
+            background-color: #1e293b;
+            z-index: 100;
+        }
+        .progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, #10b981, #3b82f6);
+            width: 0%;
+            transition: width 0.3s ease;
+        }
+        .scroll-indicator {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            animation: bounce 2s infinite;
+        }
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% {
+                transform: translateY(0) translateX(-50%);
+            }
+            40% {
+                transform: translateY(-20px) translateX(-50%);
+            }
+            60% {
+                transform: translateY(-10px) translateX(-50%);
+            }
+        }
+        .glow-text {
+            text-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
+        }
+        .glow-box {
+            box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+        }
+        .section {
+            min-height: 100vh;
+            padding-top: 80px;
+            padding-bottom: 80px;
+        }
+        @media (max-width: 768px) {
+            .checkpoint::after {
+                height: 100px;
+            }
+            .pixel-font {
+                font-size: 1.2rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Прогресс бар -->
+    <div class="progress-container">
+        <div class="progress-bar" id="progressBar"></div>
+    </div>
+    <!-- Герой -->
+    <section id="hero" class="section flex items-center justify-center bg-gradient-to-b from-gray-900 to-gray-800 relative overflow-hidden">
+        <div class="absolute inset-0 opacity-20" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMDAwMDAwIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiMxMTExMTEiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=');"></div>
+        <div class="container mx-auto px-4 text-center">
+            <h1 class="text-4xl md:text-6xl font-bold mb-8 pixel-font glow-text text-green-400">
+                <span class="text-yellow-400">КВЕСТ</span> АРБИТРАЖНИКА
+            </h1>
+            <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto text-gray-300">
+                Пройди путь от новичка до профитного медиабайера и получи все инструменты для заработка
+            </p>
+            <div class="max-w-4xl mx-auto">
+                <h2 class="text-2xl md:text-3xl mb-8 pixel-font text-yellow-400">
+                    Кто ты сейчас?
+                </h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <!-- Новичок -->
+                    <div class="hero-card bg-gray-800 rounded-lg p-6 cursor-pointer" onclick="selectHero('novice')">
+                        <div class="text-5xl mb-4">🧑</div>
+                        <h3 class="text-xl font-bold mb-2">Новичок</h3>
+                        <p class="text-gray-400">Ничего не знаешь, но хочешь зарабатывать</p>
+                        <div class="mt-4 py-2 px-4 bg-gray-700 rounded-md inline-block">
+                            Выбрать путь
+                        </div>
+                    </div>
+                    <!-- Таргетолог -->
+                    <div class="hero-card bg-gray-800 rounded-lg p-6 cursor-pointer" onclick="selectHero('targeter')">
+                        <div class="text-5xl mb-4">🧠</div>
+                        <h3 class="text-xl font-bold mb-2">Таргетолог</h3>
+                        <p class="text-gray-400">Запускал рекламу, но не системно</p>
+                        <div class="mt-4 py-2 px-4 bg-gray-700 rounded-md inline-block">
+                            Выбрать путь
+                        </div>
+                    </div>
+                    <!-- Фрилансер -->
+                    <div class="hero-card bg-gray-800 rounded-lg p-6 cursor-pointer" onclick="selectHero('freelancer')">
+                        <div class="text-5xl mb-4">🧟</div>
+                        <h3 class="text-xl font-bold mb-2">Фрилансер</h3>
+                        <p class="text-gray-400">Есть опыт, но доход нестабильный</p>
+                        <div class="mt-4 py-2 px-4 bg-gray-700 rounded-md inline-block">
+                            Выбрать путь
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="scroll-indicator text-gray-400 text-xl animate-bounce hidden md:block">
+                <i class="fas fa-chevron-down"></i>
+            </div>
+        </div>
+    </section>
+    <!-- Карта пути -->
+    <section id="journey" class="section bg-gray-900 py-16">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center pixel-font text-green-400">
+                ��вой путь к профиту
+            </h2>
+            <div class="max-w-4xl mx-auto">
+                <!-- Прогресс -->
+                <div class="flex justify-between items-center mb-12 px-4">
+                    <div class="text-sm text-gray-400">0%</div>
+                    <div class="flex-1 mx-4">
+                        <div class="w-full bg-gray-700 rounded-full h-2.5">
+                            <div class="bg-gradient-to-r from-green-400 to-blue-500 h-2.5 rounded-full" id="journeyProgress" style="width: 0%"></div>
+                        </div>
+                    </div>
+                    <div class="text-sm text-gray-400">100%</div>
+                </div>
+                <!-- Чекпоинты -->
+                <div class="space-y-16">
+                    <!-- Старт -->
+                    <div class="checkpoint" id="checkpoint1">
+                        <div class="flex flex-col md:flex-row items-center gap-8">
+                            <div class="w-full md:w-1/2 order-2 md:order-1">
+                                <h3 class="text-2xl font-bold mb-4 text-yellow-400">📍 Старт</h3>
+                                <h4 class="text-xl font-semibold mb-3">Создание аккаунта</h4>
+                                <p class="text-gray-400 mb-4">
+                                    Регистрируешься в рекламных кабинетах, настраиваешь платежные системы и готовишься к первым запускам.
+                                </p>
+                                <div class="flex items-center text-green-400 mb-2">
+                                    <i class="fas fa-check-circle mr-2"></i>
+                                    <span>Навык разблокирован: "Основы арбитража"</span>
+                                </div>
+                                <div class="flex items-center text-blue-400">
+                                    <i class="fas fa-tools mr-2"></i>
+                                    <span>Инструмент открыт: "Google Ads"</span>
+                                </div>
+                            </div>
+                            <div class="w-full md:w-1/2 order-1 md:order-2">
+                                <div class="bg-gray-800 rounded-lg p-4 glow-box">
+                                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Создание аккаунта" class="rounded-lg w-full h-auto">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Первый оффер -->
+                    <div class="checkpoint" id="checkpoint2">
+                        <div class="flex flex-col md:flex-row items-center gap-8">
+                            <div class="w-full md:w-1/2">
+                                <div class="bg-gray-800 rounded-lg p-4 glow-box">
+                                    <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Первый оффер" class="rounded-lg w-full h-auto">
+                                </div>
+                            </div>
+                            <div class="w-full md:w-1/2">
+                                <h3 class="text-2xl font-bold mb-4 text-yellow-400">📍 Уровень 2</h3>
+                                <h4 class="text-xl font-semibold mb-3">Первый оффер</h4>
+                                <p class="text-gray-400 mb-4">
+                                    Выбираешь первое предложение, анализируешь конкурентов и определяешь целевую аудиторию.
+                                </p>
+                                <div class="flex items-center text-green-400 mb-2">
+                                    <i class="fas fa-check-circle mr-2"></i>
+                                    <span>Навык разблокирован: "Анализ офферов"</span>
+                                </div>
+                                <div class="flex items-center text-blue-400">
+                                    <i class="fas fa-tools mr-2"></i>
+                                    <span>Инструмент открыт: "Spy-сервисы"</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Прокладка + креатив -->
+                    <div class="checkpoint" id="checkpoint3">
+                        <div class="flex flex-col md:flex-row items-center gap-8">
+                            <div class="w-full md:w-1/2 order-2 md:order-1">
+                                <h3 class="text-2xl font-bold mb-4 text-yellow-400">📍 Уровень 3</h3>
+                                <h4 class="text-xl font-semibold mb-3">Прокладка + креатив</h4>
+                                <p class="text-gray-400 mb-4">
+                                    Создаешь цепочку взаимодействия с клиентом от рекламы до продажи, разрабатываешь креативы с высокой конверсией.
+                                </p>
+                                <div class="flex items-center text-green-400 mb-2">
+                                    <i class="fas fa-check-circle mr-2"></i>
+                                    <span>Навык разблокирован: "Создание креативов"</span>
+                                </div>
+                                <div class="flex items-center text-blue-400">
+                                    <i class="fas fa-tools mr-2"></i>
+                                    <span>Инструмент открыт: "Keitaro"</span>
+                                </div>
+                            </div>
+                            <div class="w-full md:w-1/2 order-1 md:order-2">
+                                <div class="bg-gray-800 rounded-lg p-4 glow-box">
+                                    <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1415&q=80" alt="Прокладка + креатив" class="rounded-lg w-full h-auto">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Запуск → минус -->
+                    <div class="checkpoint" id="checkpoint4">
+                        <div class="flex flex-col md:flex-row items-center gap-8">
+                            <div class="w-full md:w-1/2">
+                                <div class="bg-gray-800 rounded-lg p-4 glow-box">
+                                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Запуск → минус" class="rounded-lg w-full h-auto">
+                                </div>
+                            </div>
+                            <div class="w-full md:w-1/2">
+                                <h3 class="text-2xl font-bold mb-4 text-yellow-400">📍 Уровень 4</h3>
+                                <h4 class="text-xl font-semibold mb-3">Запуск → минус</h4>
+                                <p class="text-gray-400 mb-4">
+                                    Первые запуски, первые ошибки и первые потери. Учишься анализировать данные и быстро адаптироваться.
+                                </p>
+                                <div class="flex items-center text-green-400 mb-2">
+                                    <i class="fas fa-check-circle mr-2"></i>
+                                    <span>Навык разблокирован: "Анализ статистики"</span>
+                                </div>
+                                <div class="flex items-center text-blue-400">
+                                    <i class="fas fa-tools mr-2"></i>
+                                    <span>Инструмент открыт: "Google Analytics"</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Переделка → Профит + ROI -->
+                    <div class="checkpoint" id="checkpoint5">
+                        <div class="flex flex-col md:flex-row items-center gap-8">
+                            <div class="w-full md:w-1/2 order-2 md:order-1">
+                                <h3 class="text-2xl font-bold mb-4 text-yellow-400">📍 Финальный уровень</h3>
+                                <h4 class="text-xl font-semibold mb-3">Переделка → Профит + ROI</h4>
+                                <p class="text-gray-400 mb-4">
+                                    Оптимизируешь кампании, находишь рабочие связки и выходишь на стабильный профит с высоким ROI.
+                                </p>
+                                <div class="flex items-center text-green-400 mb-2">
+                                    <i class="fas fa-check-circle mr-2"></i>
+                                    <span>Навык разблокирован: "Оптимизация кампаний"</span>
+                                </div>
+                                <div class="flex items-center text-blue-400">
+                                    <i class="fas fa-tools mr-2"></i>
+                                    <span>Инструмент открыт: "Библиотека шаблонов"</span>
+                                </div>
+                            </div>
+                            <div class="w-full md:w-1/2 order-1 md:order-2">
+                                <div class="bg-gray-800 rounded-lg p-4 glow-box">
+                                    <img src="https://images.unsplash.com/photo-1534957753291-64d667ce2927?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Переделка → Профит + ROI" class="rounded-lg w-full h-auto">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Артефакты -->
+    <section id="artifacts" class="section bg-gray-800 py-16">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center pixel-font text-green-400">
+                Полученные артефакты
+            </h2>
+            <p class="text-xl text-center mb-16 max-w-3xl mx-auto text-gray-300">
+                Инструменты и знания, которые ты получишь на этом пути
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Артефакт 1 -->
+                <div class="artifact-card rounded-lg overflow-hidden p-6">
+                    <div class="text-4xl mb-4 text-yellow-400">🧩</div>
+                    <h3 class="text-xl font-bold mb-3">Связка "IN + Gambling + Telegram"</h3>
+                    <p class="text-gray-400 mb-4">
+                        Готовая рабочая связка для индийского трафика с конверсией до 8% и чеком $50+
+                    </p>
+                    <div class="flex items-center text-sm text-blue-400">
+                        <i class="fas fa-trophy mr-2"></i>
+                        <span>Редкость: Эпический</span>
+                    </div>
+                </div>
+                <!-- Артефакт 2 -->
+                <div class="artifact-card rounded-lg overflow-hidden p-6">
+                    <div class="text-4xl mb-4 text-green-400">💬</div>
+                    <h3 class="text-xl font-bold mb-3">Скрипт общения с лидами</h3>
+                    <p class="text-gray-400 mb-4">
+                        Пошаговый скрипт для работы с возражениями, увеличивающий конверсию в продажу на 35%
+                    </p>
+                    <div class="flex items-center text-sm text-purple-400">
+                        <i class="fas fa-trophy mr-2"></i>
+                        <span>Редкость: Редкий</span>
+                    </div>
+                </div>
+                <!-- Артефакт 3 -->
+                <div class="artifact-card rounded-lg overflow-hidden p-6">
+                    <div class="text-4xl mb-4 text-red-400">🎯</div>
+                    <h3 class="text-xl font-bold mb-3">Пример крео с CTR 17%</h3>
+                    <p class="text-gray-400 mb-4">
+                        Набор проверенных креативов с высокой кликабельностью для разных вертикалей
+                    </p>
+                    <div class="flex items-center text-sm text-yellow-400">
+                        <i class="fas fa-trophy mr-2"></i>
+                        <span>Редкость: Легендарный</span>
+                    </div>
+                </div>
+                <!-- Артефакт 4 -->
+                <div class="artifact-card rounded-lg overflow-hidden p-6">
+                    <div class="text-4xl mb-4 text-blue-400">📊</div>
+                    <h3 class="text-xl font-bold mb-3">Чек-лист аудита кампании</h3>
+                    <p class="text-gray-400 mb-4">
+                        27 пунктов для проверки и оптимизации рекламной кампании перед масштабированием
+                    </p>
+                    <div class="flex items-center text-sm text-green-400">
+                        <i class="fas fa-trophy mr-2"></i>
+                        <span>Редкость: Обычный</span>
+                    </div>
+                </div>
+                <!-- Артефакт 5 -->
+                <div class="artifact-card rounded-lg overflow-hidden p-6">
+                    <div class="text-4xl mb-4 text-purple-400">🔍</div>
+                    <h3 class="text-xl font-bold mb-3">База источников трафика</h3>
+                    <p class="text-gray-400 mb-4">
+                        120+ проверенных источников трафика с реальными цифрами ROI по каждой вертикали
+                    </p>
+                    <div class="flex items-center text-sm text-red-400">
+                        <i class="fas fa-trophy mr-2"></i>
+                        <span>Редкость: Эпический</span>
+                    </div>
+                </div>
+                <!-- Артефакт 6 -->
+                <div class="artifact-card rounded-lg overflow-hidden p-6">
+                    <div class="text-4xl mb-4 text-yellow-400">💰</div>
+                    <h3 class="text-xl font-bold mb-3">Схема вывода денег</h3>
+                    <p class="text-gray-400 mb-4">
+                        Проверенные схемы вывода средств с минимальными комиссиями и без блокировок
+                    </p>
+                    <div class="flex items-center text-sm text-purple-400">
+                        <i class="fas fa-trophy mr-2"></i>
+                        <span>Редкость: Легендарный</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Дерево навыков -->
+    <section id="skills" class="section bg-gray-900 py-16">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center pixel-font text-green-400">
+                Дерево навыков
+            </h2>
+            <p class="text-xl text-center mb-16 max-w-3xl mx-auto text-gray-300">
+                Полная программа обучения, которая превратит тебя в профессионального арбитражника
+            </p>
+            <div class="max-w-5xl mx-auto">
+                <!-- Основы -->
+                <div class="text-center mb-12">
+                    <div class="skill-node inline-block bg-gray-800 rounded-full p-6 border-4 border-green-400">
+                        <div class="text-3xl">📚</div>
+                        <h3 class="font-bold mt-2">Основы</h3>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
+                        <div class="skill-node bg-gray-800 rounded-lg p-6">
+                            <div class="text-2xl mb-2">🔍</div>
+                            <h4 class="font-bold mb-2">Терминология</h4>
+                            <p class="text-sm text-gray-400">CPA, ROI, CR, CTR и другие ключевые метрики</p>
+                        </div>
+                        <div class="skill-node bg-gray-800 rounded-lg p-6">
+                            <div class="text-2xl mb-2">🌍</div>
+                            <h4 class="font-bold mb-2">GEO-анализ</h4>
+                            <p class="text-sm text-gray-400">Выбор лучших стран для запуска</p>
+                        </div>
+                        <div class="skill-node bg-gray-800 rounded-lg p-6">
+                            <div class="text-2xl mb-2">📊</div>
+                            <h4 class="font-bold mb-2">Аналитика</h4>
+                            <p class="text-sm text-gray-400">Настройка отслеживания и метрик</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Источники -->
+                <div class="text-center mb-12">
+                    <div class="skill-node inline-block bg-gray-800 rounded-full p-6 border-4 border-blue-400">
+                        <div class="text-3xl">🚀</div>
+                        <h3 class="font-bold mt-2">Источники</h3>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
+                        <div class="skill-node bg-gray-800 rounded-lg p-6">
+                            <div class="text-2xl mb-2">🔎</div>
+                            <h4 class="font-bold mb-2">Таргетированная</h4>
+                            <p class="text-sm text-gray-400">Facebook, Google, TikTok Ads</p>
+                        </div>
+                        <div class="skill-node bg-gray-800 rounded-lg p-6">
+                            <div class="text-2xl mb-2">📱</div>
+                            <h4 class="font-bold mb-2">Push & Pop</h4>
+                            <p class="text-sm text-gray-400">Работа с рекламными сетями</p>
+                        </div>
+                        <div class="skill-node locked bg-gray-800 rounded-lg p-6">
+                            <div class="text-2xl mb-2">🤖</div>
+                            <h4 class="font-bold mb-2">Telegram</h4>
+                            <p class="text-sm text-gray-400">Методы привлечения трафика</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Креативы -->
+                <div class="text-center mb-12">
+                    <div class="skill-node inline-block bg-gray-800 rounded-full p-6 border-4 border-purple-400">
+                        <div class="text-3xl">🎨</div>
+                        <h3 class="font-bold mt-2">Креативы</h3>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
+                        <div class="skill-node locked bg-gray-800 rounded-lg p-6">
+                            <div class="text-2xl mb-2">🖼️</div>
+                            <h4 class="font-bold mb-2">Статика</h4>
+                            <p class="text-sm text-gray-400">Баннеры и изображения</p>
+                        </div>
+                        <div class="skill-node locked bg-gray-800 rounded-lg p-6">
+                            <div class="text-2xl mb-2">🎥</div>
+                            <h4 class="font-bold mb-2">Видео</h4>
+                            <p class="text-sm text-gray-400">Создание видео-креативов</p>
+                        </div>
+                        <div class="skill-node locked bg-gray-800 rounded-lg p-6">
+                            <div class="text-2xl mb-2">✏️</div>
+                            <h4 class="font-bold mb-2">Тексты</h4>
+                            <p class="text-sm text-gray-400">Цепляющие заголовки</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Скейл -->
+                <div class="text-center">
+                    <div class="skill-node inline-block bg-gray-800 rounded-full p-6 border-4 border-yellow-400">
+                        <div class="text-3xl">📈</div>
+                        <h3 class="font-bold mt-2">Скейл</h3>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
+                        <div class="skill-node locked bg-gray-800 rounded-lg p-6">
+                            <div class="text-2xl mb-2">🔄</div>
+                            <h4 class="font-bold mb-2">Оптимизация</h4>
+                            <p class="text-sm text-gray-400">Увеличение ROI</p>
+                        </div>
+                        <div class="skill-node locked bg-gray-800 rounded-lg p-6">
+                            <div class="text-2xl mb-2">🧩</div>
+                            <h4 class="font-bold mb-2">Автоматизация</h4>
+                            <p class="text-sm text-gray-400">Скрипты и инструменты</p>
+                        </div>
+                        <div class="skill-node locked bg-gray-800 rounded-lg p-6">
+                            <div class="text-2xl mb-2">💼</div>
+                            <h4 class="font-bold mb-2">Команда</h4>
+                            <p class="text-sm text-gray-400">Масштабирование бизнеса</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Отзывы -->
+    <section id="testimonials" class="section bg-gray-800 py-16">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center pixel-font text-green-400">
+                Герои квеста
+            </h2>
+            <p class="text-xl text-center mb-16 max-w-3xl mx-auto text-gray-300">
+                Реальные люди, которые уже прошли этот путь и получили результаты
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Отзыв 1 -->
+                <div class="testimonial-card rounded-lg overflow-hidden p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-16 h-16 rounded-full bg-purple-500 flex items-center justify-center text-2xl font-bold mr-4">А</div>
+                        <div>
+                            <h3 class="font-bold">Александр</h3>
+                            <div class="text-sm text-yellow-400">GEO: IN, BR</div>
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <span class="inline-block bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-green-400 mr-2">Gambling</span>
+                        <span class="inline-block bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-blue-400">Dating</span>
+                    </div>
+                    <div class="bg-gray-700 rounded-lg p-4 mb-4">
+                        <div class="flex justify-between items-center">
+                            <span class="text-sm text-gray-400">Лут:</span>
+                            <span class="font-bold text-yellow-400">$1,240 за 5 дней</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-sm text-gray-400">ROI:</span>
+                            <span class="font-bold text-green-400">182%</span>
+                        </div>
+                    </div>
+                    <p class="text-gray-400 mb-4 text-sm">
+                        "Сначала были только минуса, но после оптимизации связки вышел на стабильный профит. Теперь масштабируюсь на новые GEO."
+                    </p>
+                    <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md font-medium transition-colors">
+                        Посмотреть путь
+                    </button>
+                </div>
+                <!-- Отзыв 2 -->
+                <div class="testimonial-card rounded-lg overflow-hidden p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-16 h-16 rounded-full bg-green-500 flex items-center justify-center text-2xl font-bold mr-4">Д</div>
+                        <div>
+                            <h3 class="font-bold">Дмитрий</h3>
+                            <div class="text-sm text-yellow-400">GEO: TH, ID</div>
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <span class="inline-block bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-red-400 mr-2">Crypto</span>
+                        <span class="inline-block bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-purple-400">Nutra</span>
+                    </div>
+                    <div class="bg-gray-700 rounded-lg p-4 mb-4">
+                        <div class="flex justify-between items-center">
+                            <span class="text-sm text-gray-400">Лут:</span>
+                            <span class="font-bold text-yellow-400">14 FTD за неделю</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-sm text-gray-400">ROI:</span>
+                            <span class="font-bold text-green-400">215%</span>
+                        </div>
+                    </div>
+                    <p class="text-gray-400 mb-4 text-sm">
+                        "Благодаря курсу нашел нишевые офферы с минимальной конкуренцией. Теперь запускаю только их и получаю стабильный доход."
+                    </p>
+                    <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md font-medium transition-colors">
+                        Посмотреть путь
+                    </button>
+                </div>
+                <!-- Отзыв 3 -->
+                <div class="testimonial-card rounded-lg overflow-hidden p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-16 h-16 rounded-full bg-yellow-500 flex items-center justify-center text-2xl font-bold mr-4">Е</div>
+                        <div>
+                            <h3 class="font-bold">Екатерина</h3>
+                            <div class="text-sm text-yellow-400">GEO: MX, CO</div>
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <span class="inline-block bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-pink-400 mr-2">Dating</span>
+                        <span class="inline-block bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-green-400">Gambling</span>
+                    </div>
+                    <div class="bg-gray-700 rounded-lg p-4 mb-4">
+                        <div class="flex justify-between items-center">
+                            <span class="text-sm text-gray-400">Лут:</span>
+                            <span class="font-bold text-yellow-400">$3,700 за месяц</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-sm text-gray-400">ROI:</span>
+                            <span class="font-bold text-green-400">167%</span>
+                        </div>
+                    </div>
+                    <p class="text-gray-400 mb-4 text-sm">
+                        "Сначала не верила, что можно зарабатывать на арбитраже. Теперь имею стабильный доход и планирую уйти с основной работы."
+                    </p>
+                    <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md font-medium transition-colors">
+                        Посмотреть путь
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Финал -->
+    <section id="final" class="section flex items-center justify-center bg-gradient-to-b from-gray-900 to-gray-800 relative overflow-hidden">
+        <div class="absolute inset-0 opacity-20" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMDAwMDAwIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiMxMTExMTEiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=');"></div>
+        <div class="container mx-auto px-4 text-center">
+            <h1 class="text-4xl md:text-6xl font-bold mb-8 pixel-font glow-text text-green-400">
+                Ты прошёл путь. <span class="text-yellow-400">Ты в игре.</span>
+            </h1>
+            <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto text-gray-300">
+                Теперь у тебя есть все инструменты и знания, чтобы начать зарабатывать на арбитраже трафика. Что дальше?
+            </p>
+            <div class="max-w-2xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
+                <button class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 text-white font-bold py-4 px-6 rounded-lg text-lg transition-all transform hover:scale-105">
+                    🔓 Войти в курс
+                </button>
+                <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 px-6 rounded-lg text-lg transition-all transform hover:scale-105" onclick="showForm()">
+                    📝 Получить доступ бесплатно
+                </button>
+            </div>
+            <!-- Форма (скрыта по умолчанию) -->
+            <div id="accessForm" class="hidden max-w-md mx-auto mt-12 bg-gray-800 rounded-lg p-8">
+                <h3 class="text-2xl font-bold mb-6 text-yellow-400">Получить бесплатный доступ</h3>
+                <form>
+                    <div class="mb-4">
+                        <input type="text" placeholder="Ваше имя" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
+                    </div>
+                    <div class="mb-4">
+                        <input type="email" placeholder="Email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
+                    </div>
+                    <div class="mb-4">
+                        <input type="tel" placeholder="Телефон" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
+                    </div>
+                    <div class="mb-6">
+                        <select class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400">
+                            <option>Выберите ваш текущий уровень</option>
+                            <option>Новичок</option>
+                            <option>Таргетолог</option>
+                            <option>Фрилансер</option>
+                        </select>
+                    </div>
+                    <button type="submit" class="w-full bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 text-white font-bold py-3 px-6 rounded-lg transition-all">
+                        Отправить заявку
+                    </button>
+                </form>
+            </div>
+        </div>
+    </section>
+    <script>
+        // Выбор героя
+        function selectHero(heroType) {
+            // Здесь можно добавить логику для разных путей в зависимости от выбора
+            alert(`Вы выбрали путь: ${heroType === 'novice' ? 'Новичок' : heroType === 'targeter' ? 'Таргетолог' : 'Фрилансер'}`);
+            // Прокрутка к следующему разделу
+            document.getElementById('journey').scrollIntoView({ behavior: 'smooth' });
+        }
+        // Показать форму
+        function showForm() {
+            document.getElementById('accessForm').classList.remove('hidden');
+            document.getElementById('accessForm').scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+        // Отслеживание прогресса прокрутки
+        window.addEventListener('scroll', function() {
+            const heroSection = document.getElementById('hero');
+            const journeySection = document.getElementById('journey');
+            const artifactsSection = document.getElementById('artifacts');
+            const skillsSection = document.getElementById('skills');
+            const testimonialsSection = document.getElementById('testimonials');
+            const finalSection = document.getElementById('final');
+            const scrollPosition = window.scrollY;
+            const windowHeight = window.innerHeight;
+            const documentHeight = document.documentElement.scrollHeight;
+            // Общий прогресс страницы
+            const progress = (scrollPosition / (documentHeight - windowHeight)) * 100;
+            document.getElementById('progressBar').style.width = progress + '%';
+            // Прогресс по разделам для прогрессбара в journey
+            const journeyProgress = calculateSectionProgress(journeySection);
+            document.getElementById('journeyProgress').style.width = journeyProgress + '%';
+            // Активация чекпоинтов
+            activateCheckpoints();
+            // Активация секций
+            activateSection(heroSection, scrollPosition);
+            activateSection(journeySection, scrollPosition);
+            activateSection(artifactsSection, scrollPosition);
+            activateSection(skillsSection, scrollPosition);
+            activateSection(testimonialsSection, scrollPosition);
+            activateSection(finalSection, scrollPosition);
+        });
+        function calculateSectionProgress(section) {
+            const rect = section.getBoundingClientRect();
+            const windowHeight = window.innerHeight;
+            const sectionHeight = section.offsetHeight;
+            // Как далеко верх секции от верха окна
+            const sectionTop = rect.top;
+            // Если секция выше окна (уже прокручена)
+            if (sectionTop < 0) {
+                // Сколько прокручено внутри секции
+                const scrolled = Math.abs(sectionTop);
+                // Не больше чем высота секции
+                const progress = Math.min(scrolled, sectionHeight);
+                // Процент прокрутки секции
+                return (progress / sectionHeight) * 100;
+            }
+            return 0;
+        }
+        function activateCheckpoints() {
+            const checkpoints = [
+                { id: 'checkpoint1', offset: 500 },
+                { id: 'checkpoint2', offset: 1100 },
+                { id: 'checkpoint3', offset: 1700 },
+                { id: 'checkpoint4', offset: 2300 },
+                { id: 'checkpoint5', offset: 2900 }
+            ];
+            const scrollPosition = window.scrollY;
+            const windowHeight = window.innerHeight;
+            checkpoints.forEach((checkpoint, index) => {
+                const element = document.getElementById(checkpoint.id);
+                const elementOffset = checkpoint.offset;
+                // Очищаем все классы
+                element.classList.remove('active', 'completed');
+                // Если текущая позиция прокрутки достигла этого чекпоинта
+                if (scrollPosition >= elementOffset - windowHeight / 2) {
+                    // Помечаем все предыдущие чекпоинты как completed
+                    for (let i = 0; i < index; i++) {
+                        document.getElementById(checkpoints[i].id).classList.add('completed');
+                    }
+                    // Текущий чекпоинт active
+                    element.classList.add('active');
+                }
+            });
+        }
+        function activateSection(section, scrollPosition) {
+            const rect = section.getBoundingClientRect();
+            const sectionTop = rect.top;
+            const sectionHeight = section.offsetHeight;
+            const windowHeight = window.innerHeight;
+            // Если секция видна на экране (верх в пределах окна или выше, а низ еще не прокручен)
+            if (sectionTop < windowHeight && sectionTop + sectionHeight > 0) {
+                section.classList.add('active');
+            } else {
+                section.classList.remove('active');
+            }
+        }
+        // Инициализация при загрузке
+        document.addEventListener('DOMContentLoaded', function() {
+            // Активируем первый чекпоинт
+            document.getElementById('checkpoint1').classList.add('active');
+            // Активируем первую секцию
+            document.getElementById('hero').classList.add('active');
+        });
+    </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/landgame" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ ... ## 🧭 Техническое задание: Лендинг «Интерактивный квест» ### 🎯 Цель: Создать лендинг в формате **геймифицированного квеста**, где пользователь проходит путь арбитражника от новичка до профитного медиабайера. Каждый блок — это уровень. Каждый клик — это шаг к результату. Лендинг должен вызывать вовлечённость, азарт и ощущение “прокачки”. --- ### 🧠 Главная идея: Не просто текст. А **игра в реальность**. Визуально и логически пользователь как бы проходит игру: - выбирает персонажа (себя) - двигается по карте или маршрутной линии - получает достижения: навыки, инструменты, первые $ - в финале — превращается в готового арбитражника --- ### 🧱 Структура и блоки: #### 1. Экран выбора героя - Заголовок: “Кто ты сейчас?” - 3 варианта: - 🧑 Новичок (ничего не знаешь, но хочешь) - 🧠 Таргетолог (запускал, но не системно) - 🧟 Фрилансер (есть опыт, но нестабильно) - При выборе → стиль и маршрут чуть меняется #### 2. Карта пути (маршрут игрока) - Структура: визуальная линия (горизонтально или поэтапно вниз) - Чекпоинты: - 📍 Старт — Создание аккаунта - 📍 Первый оффер - 📍 Прокладка + креатив - 📍 Запуск → минус - 📍 Переделка → Профит + ROI - По мере прокрутки — каждый блок «проходится», а в углу появляется иконка: ✅ Навык разблокирован → “Понимание GEO” ✅ Инструмент открыт → “Keitaro” #### 3. Раздел “Полученные артефакты” - Сетка трофеев: - 🧩 Связка “IN + Gambling + Telegram” - 💬 Скрипт общения с лидами - 🎯 Пример крео с CTR 17% - При наведении — краткое описание и как используется #### 4. Программа курса — как skill tree - Визуально: дерево навыков / mind-map - Ветки: основы → источники → креативы → аналитика → скейл - Замыленные ветки → “откроется после регистрации” #### 5. Отзывы — карточки персонажей - Стиль карточек: - Имя - GEO - “Скилл”: Gambling / Dating / Crypto - “Лут”: $1 240 за 5 дней / 14 FTD / ROI 182% - С анимацией карточки + кнопка “Посмотреть путь” #### 6. Финал — выход из квеста - Слоган: “Ты прошёл путь. Ты в игре. Что дальше?” - Варианты: - 🔓 Войти в курс (платно) - 📝 Попробовать получить доступ бесплатно (форма) --- ### 🎨 Визуальный стиль: - Геймерский / RPG-интерфейс (в духе браузерных стратегий) - Цвета: тёмный фон + акценты (золото, зелёный, синий) - Иконки: артефакты, персонажи, прогресс-бары - Шрифт — tech или semi-pixel style --- ### ⚙️ Технические особенности: - Scroll-based: переход от уровня к уровню по мере прокрутки - Прогрессбар в шапке сайта (“% пути пройдено”) - Hover-анимации при наведении на скиллы / карточки / артефакты - Мобильная адаптация: шаг за шагом, вертикальные секции --- Все 5 концепций упакованы ✅ Хочешь выбрать одну и разработать на её основе визуальные макеты или лендинг? Или провести сравнение по эффективности?