Add 2 files

index.html

@@ -272,6 +272,200 @@
             filter: drop-shadow(0 0 10px var(--neon-blue));
         }
         
+        /* New styles for improvements */
+        .parallax-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -2;
+            background: url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop') center/cover no-repeat;
+            opacity: 0.1;
+        }
+        
+        .progress-nav {
+            position: fixed;
+            top: 50%;
+            right: 20px;
+            transform: translateY(-50%);
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+        
+        .progress-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .progress-dot.active {
+            background: var(--neon-blue);
+            box-shadow: 0 0 10px var(--neon-blue);
+            transform: scale(1.3);
+        }
+        
+        .progress-dot.completed {
+            background: var(--gold);
+        }
+        
+        .avatar-container {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 100;
+            transition: all 0.3s ease;
+        }
+        
+        .avatar {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: rgba(0, 0, 0, 0.7);
+            border: 2px solid var(--neon-blue);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .avatar:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 15px var(--neon-blue);
+        }
+        
+        .achievement-badge {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            width: 25px;
+            height: 25px;
+            background: var(--gold);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            color: black;
+            font-weight: bold;
+        }
+        
+        .achievement-popup {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.9);
+            border: 2px solid var(--gold);
+            padding: 20px;
+            border-radius: 10px;
+            z-index: 1000;
+            display: none;
+            text-align: center;
+            max-width: 300px;
+            animation: popIn 0.5s ease-out;
+        }
+        
+        @keyframes popIn {
+            0% {
+                transform: translate(-50%, -50%) scale(0.5);
+                opacity: 0;
+            }
+            100% {
+                transform: translate(-50%, -50%) scale(1);
+                opacity: 1;
+            }
+        }
+        
+        .micro-interaction {
+            transition: all 0.2s ease;
+        }
+        
+        .micro-interaction:hover {
+            transform: translateY(-3px);
+        }
+        
+        .cta-button {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .cta-button::after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(transparent, rgba(255, 255, 255, 0.2), transparent);
+            transform: rotate(45deg);
+            transition: all 0.6s ease;
+            opacity: 0;
+        }
+        
+        .cta-button:hover::after {
+            opacity: 1;
+            animation: shine 1.5s ease infinite;
+        }
+        
+        @keyframes shine {
+            0% {
+                left: -50%;
+                top: -50%;
+            }
+            100% {
+                left: 150%;
+                top: 150%;
+            }
+        }
+        
+        .tooltip {
+            position: relative;
+        }
+        
+        .tooltip:hover .tooltip-text {
+            visibility: visible;
+            opacity: 1;
+            transform: translateY(0);
+        }
+        
+        .tooltip-text {
+            visibility: hidden;
+            opacity: 0;
+            position: absolute;
+            z-index: 1;
+            bottom: 125%;
+            left: 50%;
+            transform: translateX(-50%) translateY(10px);
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-size: 14px;
+            width: max-content;
+            max-width: 200px;
+            transition: all 0.3s ease;
+            pointer-events: none;
+        }
+        
+        .tooltip-text::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border-width: 5px;
+            border-style: solid;
+            border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
+        }
+        
         @media (max-width: 768px) {
             .section {
                 padding: 3rem 1rem;
@@ -286,13 +480,59 @@
                 width: 200px;
                 height: 300px;
             }
+            
+            .progress-nav {
+                right: 10px;
+                gap: 10px;
+            }
+            
+            .progress-dot {
+                width: 8px;
+                height: 8px;
+            }
         }
     </style>
 </head>
 <body>
+    <!-- Parallax Background -->
+    <div class="parallax-bg" id="parallaxBg"></div>
+    
     <!-- Money Flow Background -->
     <div class="money-flow" id="moneyFlow"></div>
     
+    <!-- Progress Navigation -->
+    <div class="progress-nav" id="progressNav">
+        <div class="progress-dot" data-section="level1"></div>
+        <div class="progress-dot" data-section="level2"></div>
+        <div class="progress-dot" data-section="level3"></div>
+        <div class="progress-dot" data-section="level4"></div>
+        <div class="progress-dot" data-section="level5"></div>
+        <div class="progress-dot" data-section="level6"></div>
+        <div class="progress-dot" data-section="level7"></div>
+        <div class="progress-dot" data-section="level8"></div>
+        <div class="progress-dot" data-section="level9"></div>
+        <div class="progress-dot" data-section="level10"></div>
+        <div class="progress-dot" data-section="level11"></div>
+        <div class="progress-dot" data-section="level12"></div>
+    </div>
+    
+    <!-- Avatar Container -->
+    <div class="avatar-container" id="avatarContainer">
+        <div class="avatar tooltip" id="userAvatar">
+            <span>👤</span>
+            <div class="tooltip-text">Ваш прогресс: 0%</div>
+        </div>
+        <div class="achievement-badge" id="achievementBadge" style="display: none;">0</div>
+    </div>
+    
+    <!-- Achievement Popup -->
+    <div class="achievement-popup" id="achievementPopup">
+        <div class="text-4xl mb-2">🏆</div>
+        <h3 class="text-xl font-bold mb-2 gold-text" id="achievementTitle">Достижение разблокировано!</h3>
+        <p id="achievementDesc">Вы получили новое достижение</p>
+        <button class="mt-4 bg-gold text-black px-4 py-1 rounded" onclick="closeAchievementPopup()">OK</button>
+    </div>
+    
     <!-- Level 1: Entrance -->
     <section class="section flex items-center justify-center text-center" id="level1">
         <div class="portal"></div>
@@ -300,7 +540,7 @@
             <h1 class="text-5xl md:text-7xl font-bold mb-6 neon-text neon-blue">Ты в Игре</h1>
             <p class="text-xl md:text-2xl mb-8 neon-pink">Ты попал в игру, где нажатие = деньги. Это арбитраж, детка.</p>
             <p class="text-lg md:text-xl mb-10">Traffic Master — курс, где учат зарабатывать, а не слушать лекции</p>
-            <button class="bg-transparent border-2 border-neon-blue text-neon-blue px-8 py-3 text-lg font-bold hover:bg-neon-blue hover:text-black transition-all duration-300 glow-box" onclick="scrollToLevel('level2')">
+            <button class="bg-transparent border-2 border-neon-blue text-neon-blue px-8 py-3 text-lg font-bold hover:bg-neon-blue hover:text-black transition-all duration-300 glow-box cta-button micro-interaction" onclick="scrollToLevel('level2')">
                 Начать игру <i class="fas fa-gamepad ml-2"></i>
             </button>
         </div>
@@ -330,7 +570,7 @@
             <div>
                 <h2 class="text-3xl md:text-4xl font-bold mb-6 neon-text">Твой путь начинается здесь</h2>
                 <p class="text-lg mb-6">Ты стоишь на пороге новой жизни. Впереди — обучение, которое перевернет твое представление о заработке в интернете.</p>
-                <button class="bg-neon-blue text-black px-6 py-2 font-bold hover:bg-neon-purple hover:text-white transition-all duration-300" onclick="scrollToLevel('level3')">
+                <button class="bg-neon-blue text-black px-6 py-2 font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 cta-button micro-interaction" onclick="scrollToLevel('level3')">
                     Выбрать персонажа <i class="fas fa-arrow-down ml-2"></i>
                 </button>
             </div>
@@ -344,7 +584,7 @@
             
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                 <!-- Newbie -->
-                <div class="character-card hologram p-6 rounded-lg cursor-pointer" onclick="selectCharacter('newbie')">
+                <div class="character-card hologram p-6 rounded-lg cursor-pointer micro-interaction" onclick="selectCharacter('newbie')">
                     <div class="text-5xl text-center mb-4">🧑</div>
                     <h3 class="text-xl font-bold text-center mb-3 neon-blue">Новичок</h3>
                     <div class="hidden character-desc">
@@ -355,7 +595,7 @@
                 </div>
                 
                 <!-- Targetologist -->
-                <div class="character-card hologram p-6 rounded-lg cursor-pointer" onclick="selectCharacter('targetologist')">
+                <div class="character-card hologram p-6 rounded-lg cursor-pointer micro-interaction" onclick="selectCharacter('targetologist')">
                     <div class="text-5xl text-center mb-4">🧑‍💻</div>
                     <h3 class="text-xl font-bold text-center mb-3 neon-pink">Таргетолог</h3>
                     <div class="hidden character-desc">
@@ -366,7 +606,7 @@
                 </div>
                 
                 <!-- Team Lead -->
-                <div class="character-card hologram p-6 rounded-lg cursor-pointer" onclick="selectCharacter('teamlead')">
+                <div class="character-card hologram p-6 rounded-lg cursor-pointer micro-interaction" onclick="selectCharacter('teamlead')">
                     <div class="text-5xl text-center mb-4">🧙‍♂️</div>
                     <h3 class="text-xl font-bold text-center mb-3 neon-purple">Тимлид</h3>
                     <div class="hidden character-desc">
@@ -377,7 +617,7 @@
                 </div>
                 
                 <!-- Freelancer -->
-                <div class="character-card hologram p-6 rounded-lg cursor-pointer" onclick="selectCharacter('freelancer')">
+                <div class="character-card hologram p-6 rounded-lg cursor-pointer micro-interaction" onclick="selectCharacter('freelancer')">
                     <div class="text-5xl text-center mb-4">🧟</div>
                     <h3 class="text-xl font-bold text-center mb-3 gold-text">Фрилансер</h3>
                     <div class="hidden character-desc">
@@ -389,7 +629,7 @@
             </div>
             
             <div class="mt-16 text-center">
-                <button class="bg-transparent border-2 border-neon-blue text-neon-blue px-8 py-3 text-lg font-bold hover:bg-neon-blue hover:text-black transition-all duration-300 glow-box" onclick="scrollToLevel('level4')">
+                <button class="bg-transparent border-2 border-neon-blue text-neon-blue px-8 py-3 text-lg font-bold hover:bg-neon-blue hover:text-black transition-all duration-300 glow-box cta-button micro-interaction" onclick="scrollToLevel('level4')">
                     Получить арсенал <i class="fas fa-arrow-right ml-2"></i>
                 </button>
             </div>
@@ -402,25 +642,25 @@
             <h2 class="text-4xl md:text-5xl font-bold mb-16 text-center neon-text neon-pink">Твой арсенал</h2>
             
             <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16">
-                <div class="inventory-item hologram p-6 rounded-lg text-center cursor-pointer" onclick="showInventoryDetail('video')">
+                <div class="inventory-item hologram p-6 rounded-lg text-center cursor-pointer micro-interaction" onclick="showInventoryDetail('video')">
                     <div class="text-5xl mb-4 neon-blue">🎥</div>
                     <h3 class="text-xl font-bold mb-2">Видеоуроки</h3>
                     <p class="text-sm opacity-70">Практические разборы</p>
                 </div>
                 
-                <div class="inventory-item hologram p-6 rounded-lg text-center cursor-pointer" onclick="showInventoryDetail('trackers')">
+                <div class="inventory-item hologram p-6 rounded-lg text-center cursor-pointer micro-interaction" onclick="showInventoryDetail('trackers')">
                     <div class="text-5xl mb-4 neon-pink">📊</div>
                     <h3 class="text-xl font-bold mb-2">Трекеры</h3>
                     <p class="text-sm opacity-70">Контроль эффективности</p>
                 </div>
                 
-                <div class="inventory-item hologram p-6 rounded-lg text-center cursor-pointer" onclick="showInventoryDetail('templates')">
+                <div class="inventory-item hologram p-6 rounded-lg text-center cursor-pointer micro-interaction" onclick="showInventoryDetail('templates')">
                     <div class="text-5xl mb-4 neon-purple">📁</div>
                     <h3 class="text-xl font-bold mb-2">Шаблоны</h3>
                     <p class="text-sm opacity-70">Готовые решения</p>
                 </div>
                 
-                <div class="inventory-item hologram p-6 rounded-lg text-center cursor-pointer" onclick="showInventoryDetail('knowledge')">
+                <div class="inventory-item hologram p-6 rounded-lg text-center cursor-pointer micro-interaction" onclick="showInventoryDetail('knowledge')">
                     <div class="text-5xl mb-4 gold-text">🔒</div>
                     <h3 class="text-xl font-bold mb-2">База знаний</h3>
                     <p class="text-sm opacity-70">Эксклюзивные материалы</p>
@@ -428,12 +668,12 @@
             </div>
             
             <div id="inventoryDetail" class="hologram p-8 rounded-lg hidden">
-                <button class="float-right text-neon-blue" onclick="hideInventoryDetail()"><i class="fas fa-times"></i></button>
+                <button class="float-right text-neon-blue micro-interaction" onclick="hideInventoryDetail()"><i class="fas fa-times"></i></button>
                 <div id="detailContent"></div>
             </div>
             
             <div class="mt-10 text-center">
-                <button class="bg-transparent border-2 border-neon-pink text-neon-pink px-8 py-3 text-lg font-bold hover:bg-neon-pink hover:text-black transition-all duration-300 glow-box" onclick="scrollToLevel('level5')">
+                <button class="bg-transparent border-2 border-neon-pink text-neon-pink px-8 py-3 text-lg font-bold hover:bg-neon-pink hover:text-black transition-all duration-300 glow-box cta-button micro-interaction" onclick="scrollToLevel('level5')">
                     Прокачать навыки <i class="fas fa-arrow-right ml-2"></i>
                 </button>
             </div>
@@ -487,7 +727,7 @@
             </div>
             
             <div class="mt-20 text-center">
-                <button class="bg-transparent border-2 border-neon-purple text-neon-purple px-8 py-3 text-lg font-bold hover:bg-neon-purple hover:text-black transition-all duration-300 glow-box" onclick="scrollToLevel('level6')">
+                <button class="bg-transparent border-2 border-neon-purple text-neon-purple px-8 py-3 text-lg font-bold hover:bg-neon-purple hover:text-black transition-all duration-300 glow-box cta-button micro-interaction" onclick="scrollToLevel('level6')">
                     Увидеть результаты <i class="fas fa-arrow-right ml-2"></i>
                 </button>
             </div>
@@ -501,7 +741,7 @@
             
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <!-- Testimonial 1 -->
-                <div class="hologram p-6 rounded-lg">
+                <div class="hologram p-6 rounded-lg micro-interaction">
                     <div class="flex items-center mb-4">
                         <div class="w-16 h-16 rounded-full border-2 border-neon-blue bg-cover bg-center" style="background-image: url('https://randomuser.me/api/portraits/women/44.jpg');"></div>
                         <div class="ml-4">
@@ -519,7 +759,7 @@
                 </div>
                 
                 <!-- Testimonial 2 -->
-                <div class="hologram p-6 rounded-lg">
+                <div class="hologram p-6 rounded-lg micro-interaction">
                     <div class="flex items-center mb-4">
                         <div class="w-16 h-16 rounded-full border-2 border-neon-pink bg-cover bg-center" style="background-image: url('https://randomuser.me/api/portraits/men/22.jpg');"></div>
                         <div class="ml-4">
@@ -537,7 +777,7 @@
                 </div>
                 
                 <!-- Testimonial 3 -->
-                <div class="hologram p-6 rounded-lg">
+                <div class="hologram p-6 rounded-lg micro-interaction">
                     <div class="flex items-center mb-4">
                         <div class="w-16 h-16 rounded-full border-2 border-neon-purple bg-cover bg-center" style="background-image: url('https://randomuser.me/api/portraits/women/32.jpg');"></div>
                         <div class="ml-4">
@@ -556,7 +796,7 @@
             </div>
             
             <div class="mt-16 text-center">
-                <button class="bg-transparent border-2 border-gold text-gold px-8 py-3 text-lg font-bold hover:bg-gold hover:text-black transition-all duration-300 glow-box" onclick="scrollToLevel('level7')">
+                <button class="bg-transparent border-2 border-gold text-gold px-8 py-3 text-lg font-bold hover:bg-gold hover:text-black transition-all duration-300 glow-box cta-button micro-interaction" onclick="scrollToLevel('level7')">
                     Программа курса <i class="fas fa-arrow-right ml-2"></i>
                 </button>
             </div>
@@ -642,7 +882,7 @@
                 
                 <div class="mt-10 text-center">
                     <p class="mb-6">Разблокируй полную программу после регистрации</p>
-                    <button class="bg-neon-blue text-black px-8 py-3 text-lg font-bold hover:bg-neon-purple hover:text-white transition-all duration-300" onclick="scrollToLevel('level8')">
+                    <button class="bg-neon-blue text-black px-8 py-3 text-lg font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 cta-button micro-interaction" onclick="scrollToLevel('level8')">
                         Узнать награды <i class="fas fa-arrow-right ml-2"></i>
                     </button>
                 </div>
@@ -657,21 +897,21 @@
             
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <!-- Reward 1 -->
-                <div class="hologram p-6 rounded-lg text-center">
+                <div class="hologram p-6 rounded-lg text-center micro-interaction">
                     <div class="text-5xl mb-4 neon-blue">🏆</div>
                     <h3 class="text-xl font-bold mb-3">Доход от $1000/мес</h3>
                     <p class="text-sm">Средний результат через 2 месяца</p>
                 </div>
                 
                 <!-- Reward 2 -->
-                <div class="hologram p-6 rounded-lg text-center">
+                <div class="hologram p-6 rounded-lg text-center micro-interaction">
                     <div class="text-5xl mb-4 neon-pink">🛡️</div>
                     <h3 class="text-xl font-bold mb-3">Доступ к TMT</h3>
                     <p class="text-sm">Закрытое сообщество арбитражников</p>
                 </div>
                 
                 <!-- Reward 3 -->
-                <div class="hologram p-6 rounded-lg text-center">
+                <div class="hologram p-6 rounded-lg text-center micro-interaction">
                     <div class="text-5xl mb-4 neon-purple">📈</div>
                     <h3 class="text-xl font-bold mb-3">ROI 250%+</h3>
                     <p class="text-sm">Оптимизированные стратегии</p>
@@ -679,7 +919,7 @@
             </div>
             
             <div class="mt-16 text-center">
-                <button class="bg-transparent border-2 border-gold text-gold px-8 py-3 text-lg font-bold hover:bg-gold hover:text-black transition-all duration-300 glow-box" onclick="scrollToLevel('level9')">
+                <button class="bg-transparent border-2 border-gold text-gold px-8 py-3 text-lg font-bold hover:bg-gold hover:text-black transition-all duration-300 glow-box cta-button micro-interaction" onclick="scrollToLevel('level9')">
                     Увидеть команду <i class="fas fa-arrow-right ml-2"></i>
                 </button>
             </div>
@@ -744,7 +984,7 @@
             </div>
             
             <div class="mt-16 text-center">
-                <button class="bg-transparent border-2 border-neon-pink text-neon-pink px-8 py-3 text-lg font-bold hover:bg-neon-pink hover:text-black transition-all duration-300 glow-box" onclick="scrollToLevel('level10')">
+                <button class="bg-transparent border-2 border-neon-pink text-neon-pink px-8 py-3 text-lg font-bold hover:bg-neon-pink hover:text-black transition-all duration-300 glow-box cta-button micro-interaction" onclick="scrollToLevel('level10')">
                     Выбрать пакет <i class="fas fa-arrow-right ml-2"></i>
                 </button>
             </div>
@@ -758,7 +998,7 @@
             
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <!-- Package 1 -->
-                <div class="treasure-chest hologram p-8 rounded-lg text-center">
+                <div class="treasure-chest hologram p-8 rounded-lg text-center micro-interaction">
                     <div class="chest-lid mb-6">
                         <div class="text-6xl">📦</div>
                     </div>
@@ -778,13 +1018,13 @@
                             <span>Общий чат</span>
                         </li>
                     </ul>
-                    <button class="bg-gold text-black px-6 py-2 font-bold hover:bg-neon-blue hover:text-white transition-all duration-300 w-full">
+                    <button class="bg-gold text-black px-6 py-2 font-bold hover:bg-neon-blue hover:text-white transition-all duration-300 w-full cta-button">
                         Открыть сундук
                     </button>
                 </div>
                 
                 <!-- Package 2 -->
-                <div class="treasure-chest hologram p-8 rounded-lg text-center border-2 border-gold">
+                <div class="treasure-chest hologram p-8 rounded-lg text-center border-2 border-gold micro-interaction">
                     <div class="chest-lid mb-6">
                         <div class="text-6xl">🎁</div>
                     </div>
@@ -808,13 +1048,13 @@
                             <span>Разбор кампаний</span>
                         </li>
                     </ul>
-                    <button class="bg-gold text-black px-6 py-2 font-bold hover:bg-neon-pink hover:text-white transition-all duration-300 w-full">
+                    <button class="bg-gold text-black px-6 py-2 font-bold hover:bg-neon-pink hover:text-white transition-all duration-300 w-full cta-button">
                         Открыть сундук
                     </button>
                 </div>
                 
                 <!-- Package 3 -->
-                <div class="treasure-chest hologram p-8 rounded-lg text-center">
+                <div class="treasure-chest hologram p-8 rounded-lg text-center micro-interaction">
                     <div class="chest-lid mb-6">
                         <div class="text-6xl">💎</div>
                     </div>
@@ -842,14 +1082,14 @@
                             <span>Закрытые офферы</span>
                         </li>
                     </ul>
-                    <button class="bg-gold text-black px-6 py-2 font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 w-full">
+                    <button class="bg-gold text-black px-6 py-2 font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 w-full cta-button">
                         Открыть сундук
                     </button>
                 </div>
             </div>
             
             <div class="mt-16 text-center">
-                <button class="bg-transparent border-2 border-neon-purple text-neon-purple px-8 py-3 text-lg font-bold hover:bg-neon-purple hover:text-black transition-all duration-300 glow-box" onclick="scrollToLevel('level11')">
+                <button class="bg-transparent border-2 border-neon-purple text-neon-purple px-8 py-3 text-lg font-bold hover:bg-neon-purple hover:text-black transition-all duration-300 glow-box cta-button micro-interaction" onclick="scrollToLevel('level11')">
                     Нет денег? <i class="fas fa-arrow-right ml-2"></i>
                 </button>
             </div>
@@ -874,7 +1114,7 @@
                     <input type="email" placeholder="Твой email" class="w-full bg-black bg-opacity-30 border border-neon-blue px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-neon-blue">
                     <input type="tel" placeholder="Твой телефон" class="w-full bg-black bg-opacity-30 border border-neon-blue px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-neon-blue">
                     <textarea placeholder="Твоя история" class="w-full bg-black bg-opacity-30 border border-neon-blue px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-neon-blue" rows="3"></textarea>
-                    <button type="submit" class="bg-neon-blue text-black px-6 py-2 font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 w-full">
+                    <button type="submit" class="bg-neon-blue text-black px-6 py-2 font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 w-full cta-button">
                         Отправить сигнал <i class="fas fa-paper-plane ml-2"></i>
                     </button>
                 </form>
@@ -894,7 +1134,7 @@
                         <input type="text" placeholder="Твое имя" class="w-full bg-black bg-opacity-30 border border-neon-blue px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-neon-blue">
                         <input type="email" placeholder="Твой email" class="w-full bg-black bg-opacity-30 border border-neon-blue px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-neon-blue">
                         <textarea placeholder="Твое сообщение" class="w-full bg-black bg-opacity-30 border border-neon-blue px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-neon-blue" rows="4"></textarea>
-                        <button type="submit" class="bg-neon-blue text-black px-6 py-2 font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 w-full">
+                        <button type="submit" class="bg-neon-blue text-black px-6 py-2 font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 w-full cta-button">
                             Отправить <i class="fas fa-paper-plane ml-2"></i>
                         </button>
                     </form>
@@ -904,7 +1144,7 @@
                     <h3 class="text-2xl font-bold mb-6 neon-pink">Наши координаты</h3>
                     <div class="space-y-6">
                         <div class="flex items-center">
-                            <a href="#" class="social-icon text-3xl neon-blue mr-4"><i class="fab fa-telegram"></i></a>
+                            <a href="#" class="social-icon text-3xl neon-blue mr-4 micro-interaction"><i class="fab fa-telegram"></i></a>
                             <div>
                                 <h4 class="font-bold">Telegram</h4>
                                 <p class="text-sm opacity-80">@traffic_master</p>
@@ -912,7 +1152,7 @@
                         </div>
                         
                         <div class="flex items-center">
-                            <a href="#" class="social-icon text-3xl neon-pink mr-4"><i class="fab fa-youtube"></i></a>
+                            <a href="#" class="social-icon text-3xl neon-pink mr-4 micro-interaction"><i class="fab fa-youtube"></i></a>
                             <div>
                                 <h4 class="font-bold">YouTube</h4>
                                 <p class="text-sm opacity-80">Traffic Master</p>
@@ -920,7 +1160,7 @@
                         </div>
                         
                         <div class="flex items-center">
-                            <a href="#" class="social-icon text-3xl neon-purple mr-4"><i class="fas fa-envelope"></i></a>
+                            <a href="#" class="social-icon text-3xl neon-purple mr-4 micro-interaction"><i class="fas fa-envelope"></i></a>
                             <div>
                                 <h4 class="font-bold">Email</h4>
                                 <p class="text-sm opacity-80">support@trafficmaster.com</p>
@@ -938,6 +1178,28 @@
     </section>
     
     <script>
+        // User progress and achievements
+        const userProgress = {
+            currentLevel: 1,
+            completedLevels: [],
+            achievements: [],
+            selectedCharacter: null,
+            unlockedContent: []
+        };
+        
+        // Achievement definitions
+        const achievements = [
+            { id: 'start', title: 'Первые шаги', description: 'Вы начали свое путешествие в арбитраже', level: 1 },
+            { id: 'character', title: 'Выбор пути', description: 'Вы выбрали своего персонажа', level: 3 },
+            { id: 'inventory', title: 'Снаряжение', description: 'Вы ознакомились со своим арсеналом', level: 4 },
+            { id: 'halfway', title: 'Середина пути', description: 'Вы прошли половину программы', level: 6 },
+            { id: 'program', title: 'Знание - сила', description: 'Вы изучили программу курса', level: 7 },
+            { id: 'rewards', title: 'Охота за наградами', description: 'Вы узнали о своих возможных наградах', level: 8 },
+            { id: 'team', title: 'Командный дух', description: 'Вы познакомились с командой', level: 9 },
+            { id: 'packages', title: 'Выбор пакета', description: 'Вы рассмотрели варианты участия', level: 10 },
+            { id: 'contact', title: 'На связи', description: 'Вы связались с нами', level: 12 }
+        ];
+        
         // Create money flow
         function createMoneyFlow() {
             const moneyFlow = document.getElementById('moneyFlow');
@@ -975,6 +1237,11 @@
             
             selectedCard.classList.add('border-2', borderColor);
             selectedDesc.classList.remove('hidden');
+            
+            // Update user progress
+            userProgress.selectedCharacter = character;
+            checkAchievement('character');
+            updateAvatar();
         }
         
         // Show inventory detail
@@ -1019,13 +1286,25 @@
                 <h3 class="text-2xl font-bold mb-4 text-center ${color}">${title}</h3>
                 <p class="mb-6">${description}</p>
                 <div class="text-center">
-                    <button class="bg-${color.split('-')[1]} text-black px-6 py-2 font-bold hover:bg-black hover:text-${color.split('-')[1]} transition-all duration-300">
+                    <button class="bg-${color.split('-')[1]} text-black px-6 py-2 font-bold hover:bg-black hover:text-${color.split('-')[1]} transition-all duration-300 cta-button" onclick="unlockContent('${type}')">
                         Хочу это в свой арсенал
                     </button>
                 </div>
             `;
             
             detail.classList.remove('hidden');
+            
+            // Check achievement
+            checkAchievement('inventory');
+        }
+        
+        // Unlock content
+        function unlockContent(type) {
+            if (!userProgress.unlockedContent.includes(type)) {
+                userProgress.unlockedContent.push(type);
+                showAchievement('Содержимое разблокировано', `Вы получили доступ к "${type}"`);
+            }
+            hideInventoryDetail();
         }
         
         function hideInventoryDetail() {
@@ -1051,11 +1330,106 @@
             });
         }
         
+        // Update progress navigation
+        function updateProgressNav() {
+            const dots = document.querySelectorAll('.progress-dot');
+            dots.forEach(dot => {
+                const section = dot.getAttribute('data-section');
+                const sectionNum = parseInt(section.replace('level', ''));
+                
+                dot.classList.remove('active', 'completed');
+                
+                if (sectionNum === userProgress.currentLevel) {
+                    dot.classList.add('active');
+                } else if (userProgress.completedLevels.includes(sectionNum)) {
+                    dot.classList.add('completed');
+                }
+            });
+            
+            // Update avatar tooltip
+            const progressPercentage = Math.floor((userProgress.completedLevels.length / 12) * 100);
+            document.querySelector('.tooltip-text').textContent = `Ваш прогресс: ${progressPercentage}%`;
+            
+            // Update achievement badge
+            const achievementBadge = document.getElementById('achievementBadge');
+            if (userProgress.achievements.length > 0) {
+                achievementBadge.style.display = 'flex';
+                achievementBadge.textContent = userProgress.achievements.length;
+            } else {
+                achievementBadge.style.display = 'none';
+            }
+        }
+        
+        // Check for achievements
+        function checkAchievement(id) {
+            const achievement = achievements.find(a => a.id === id);
+            if (achievement && !userProgress.achievements.includes(id)) {
+                userProgress.achievements.push(id);
+                showAchievement(achievement.title, achievement.description);
+                updateProgressNav();
+            }
+        }
+        
+        // Show achievement popup
+        function showAchievement(title, description) {
+            const popup = document.getElementById('achievementPopup');
+            document.getElementById('achievementTitle').textContent = title;
+            document.getElementById('achievementDesc').textContent = description;
+            popup.style.display = 'block';
+        }
+        
+        // Close achievement popup
+        function closeAchievementPopup() {
+            document.getElementById('achievementPopup').style.display = 'none';
+        }
+        
+        // Update user avatar
+        function updateAvatar() {
+            const avatar = document.getElementById('userAvatar');
+            if (userProgress.selectedCharacter) {
+                let emoji = '👤';
+                if (userProgress.selectedCharacter === 'newbie') emoji = '🧑';
+                if (userProgress.selectedCharacter === 'targetologist') emoji = '🧑‍💻';
+                if (userProgress.selectedCharacter === 'teamlead') emoji = '🧙‍♂️';
+                if (userProgress.selectedCharacter === 'freelancer') emoji = '🧟';
+                
+                avatar.innerHTML = emoji;
+            }
+        }
+        
+        // Parallax effect
+        function setupParallax() {
+            const parallaxBg = document.getElementById('parallaxBg');
+            window.addEventListener('scroll', function() {
+                const offset = window.pageYOffset;
+                parallaxBg.style.transform = `translateY(${offset * 0.5}px)`;
+            });
+        }
+        
         // Initialize
         window.onload = function() {
             createMoneyFlow();
+            setupParallax();
+            
+            // Set up progress navigation click events
+            document.querySelectorAll('.progress-dot').forEach(dot => {
+                dot.addEventListener('click', function() {
+                    const section = this.getAttribute('data-section');
+                    scrollToLevel(section);
+                });
+            });
             
-            // Animate progress bar on scroll
+            // Set up avatar click event
+            document.getElementById('userAvatar').addEventListener('click', function() {
+                const popup = document.getElementById('achievementPopup');
+                if (userProgress.achievements.length > 0) {
+                    document.getElementById('achievementTitle').textContent = 'Ваши достижения';
+                    document.getElementById('achievementDesc').textContent = `У вас ${userProgress.achievements.length} достижений`;
+                    popup.style.display = 'block';
+                }
+            });
+            
+            // Track scroll position for progress
             window.addEventListener('scroll', function() {
                 const scrollPosition = window.scrollY;
                 const windowHeight = window.innerHeight;
@@ -1064,6 +1438,36 @@
                 
                 document.querySelector('.progress-track').style.setProperty('--progress', `${scrollPercentage}%`);
                 
+                // Determine current level based on scroll
+                const sections = document.querySelectorAll('.section');
+                let currentLevel = 1;
+                
+                sections.forEach((section, index) => {
+                    const rect = section.getBoundingClientRect();
+                    if (rect.top <= windowHeight * 0.5) {
+                        currentLevel = index + 1;
+                    }
+                });
+                
+                if (currentLevel !== userProgress.currentLevel) {
+                    userProgress.currentLevel = currentLevel;
+                    
+                    // Mark previous levels as completed
+                    for (let i = 1; i < currentLevel; i++) {
+                        if (!userProgress.completedLevels.includes(i)) {
+                            userProgress.completedLevels.push(i);
+                            
+                            // Check for achievements
+                            const achievement = achievements.find(a => a.level === i);
+                            if (achievement && !userProgress.achievements.includes(achievement.id)) {
+                                checkAchievement(achievement.id);
+                            }
+                        }
+                    }
+                    
+                    updateProgressNav();
+                }
+                
                 // Activate checkpoints based on scroll
                 const checkpoints = document.querySelectorAll('.checkpoint');
                 checkpoints.forEach((checkpoint, index) => {
@@ -1074,6 +1478,9 @@
                     }
                 });
             });
+            
+            // Initial check for first achievement
+            checkAchievement('start');
         };
     </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/course21" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt

@@ -1 +1 @@
-Тема - курс по арбитражу трафика! ТЗ: Новая идея лендинга Traffic Master: “ТЫ В ИГРЕ”  🎮 Концепция:  Лендинг — это интерактивная визуальная игра/вселённая, в которой пользователь ощущает себя героем: он попадает в “мир арбитража”, где за каждым свайпом, скроллом — шаг к деньгам, к карьере, к свободе.  Это не просто скроллинг текста. Это погружение. Каждая секция — как “левел”, визуально и эмоционально отличающаяся. Никакого “корпоративного” стиля. Только эффект “Вау, я в будущем”.  ⸻  🧠 Общий стиль: 	•	Киберпанк + luxury: тёмный мир, неон, золото, голограммы, 3D-окружение, мерцающие интерфейсы 	•	UX: максимально плавный, с “живыми” блоками — всё двигается, переливается, шевелится 	•	UI: каждый блок визуально — как карточка в метавселенной, карточка миссии  ⸻  💸 Главная фишка — интерактивный поток денег 	•	Видеофон или WebGL сцена, где пользователь как бы скользит по реке денег. 	•	В потоке: 💵 купюры, 🪙 монеты, 💬 всплывающие подсказки (”+1 200$”, “FTD 14 шт”, “Запущена воронка в Германии”) 	•	Можно сделать “перелёт” по блокам — как бы по течению  ⸻  🧱 Блоки лендинга — в формате «уровней»  📍 Уровень 1 — Вход в мир  Слоган: “Ты попал в игру, где нажатие = деньги. Это арбитраж, детка.” 	•	На фоне — портал, в который ты как бы влетаешь 	•	Подзаголовок: “Traffic Master — курс, где учат зарабатывать, а не слушать лекции” 	•	Кнопка “Начать игру” ведёт к следующему блоку  ⸻  📍 Уровень 2 — Создатель мира  Блок “О нас” как карточка NPC (персонажа) 	•	Фото Тимура — в виде голограммы 	•	Заголовок: “Создатель этой реальности: Тимур В.” 	•	Всплывают характеристики: 🧠 Мастер арбитража 💰 $5M оборота 🔥 TMT — топ-3 команда 	•	Цитата появляется, как диалог в игре  ⸻  📍 Уровень 3 — Выбор класса игрока  Блок “Кому подойдёт курс” 	•	Представлен как выбор персонажа: 	•	🧑 Новичок 	•	🧑‍💻 Таргетолог 	•	🧙‍♂️ Тимлид 	•	🧟 Фрилансер 	•	При наведении — описания всплывают в стиле карточек персонажей из RPG-игры  ⸻  📍 Уровень 4 — Арсенал  Что ты получишь в обучении 	•	Представлено как инвентарь героя: 	•	🎥 Видеоуроки 	•	📊 Трекеры 	•	📁 Шаблоны 	•	🔒 Доступ к базе знаний 	•	Все элементы — в анимированной «витрине» 	•	При клике — раскрываются детальные описания  ⸻  📍 Уровень 5 — Путь прокачки  Как проходит обучение 	•	Визуально: карта прохождения с чекпоинтами 	•	Анимация скроллом: от “Регистрации” до “Первого профита” 	•	Над каждым чекпоинтом — иконка, описание, и пример (видео/скрин)  ⸻  📍 Уровень 6 — Боссы повержены  Блок отзывов 	•	Отзывы — как карточки победителей 	•	3D-слайдер в стиле “герой с достижением” 	•	Цифры успеха — как параметры прокачки  ⸻  📍 Уровень 7 — Программа прокачки  Программа курса = Дерево умений 	•	Вместо аккордеона — интерактивная mind-map, по нажатию раскрываются уроки 	•	Уроки замылены, кроме первых двух → «разблокировать»  ⸻  📍 Уровень 8 — Награды  Результаты после курса 	•	Визуально: трофеи, бейджи, скины 	•	Инфографика: ROI, $ заработано, уровень, статус в TMT  ⸻  📍 Уровень 9 — Энергия команды  Результаты TMT 	•	Скриншоты = стены славы 	•	Анимация: “выплывающие” отчёты, как hologram stats 	•	Все кейсы с подписями, гиф-анимациями роста  ⸻  📍 Уровень 10 — Выбор пакета доступа 	•	3 “сундука” с бонусами 	•	При наведении — распаковываются (анимация) 	•	CTA “Открыть сундук” — ведёт на заявку  ⸻  📍 Уровень 11 — Скрытый портал  Нет денег — получи шанс 	•	Иллюстрация: персонаж у замочной скважины 	•	Форма заявки с историей 	•	Эффект: после отправки — “дверь” приоткрывается  ⸻  📍 Уровень 12 — Врата связи  Контакты 	•	Футуристическая панель: Telegram, YouTube, почта 	•	Анимация на иконках при наведении — световой эффект 	•	Форма “отправить сигнал”  ⸻  📦 Функциональные особенности: 	•	Скроллинг — как полёт через уровни 	•	Lazy Load + WebGL-анимации 	•	Оптимизация для мобилки — вертикальный квест 	•	Gamification + Storytelling + Реальные пруфы
+Я ознакомился с результатом по ссылке https://huggingface.co/spaces/timoon811/course21. Отличная работа по воплощению концепции! Для дальнейшего улучшения лендинга предлагаю следующие идеи: 	1.	Углубление интерактивности: 	•	Геймификация: Реализуйте систему достижений или прогресса, где пользователи могут “разблокировать” контент по мере прохождения лендинга. Это усилит ощущение игры и вовлечет посетителей. 	•	Персонализация: Добавьте возможность выбора “аватара” или “персонажа”, который будет сопровождать пользователя по сайту, отражая его путь в арбитраже. 	2.	Улучшение визуальных эффектов: 	•	Анимация фона: Используйте параллакс-эффект для создания глубины и движения фона, что подчеркнет киберпанковскую эстетику. 	•	Микро-анимации: Добавьте небольшие анимации при наведении на элементы (например, кнопки, иконки), чтобы сделать взаимодействие более живым. 	3.	Оптимизация пользовательского пути: 	•	Четкие CTA (Call to Action): Убедитесь, что призывы к действию выделяются и логически вписываются в контекст каждого блока. 	•	Навигация: Предусмотрите фиксированное меню или индикатор прогресса, чтобы пользователь понимал, на каком этапе находится и мог легко перемещаться по разделам. 	4.	Техническая оптимизация: 	•	Производительность: Убедитесь, что анимации и эффекты не замедляют загрузку страницы, особенно на мобильных устройствах. 	•	Кросс-браузерность: Проверьте корректность отображения и работы функционала во всех популярных браузерах.  Внедрение этих улучшений поможет сделать лендинг еще более привлекательным и эффективным для пользователей.