Hugging Face's logo

Spaces:
timoon811
/
storyarbitrage
Running

App Files Community
storyarbitrage / index.html
timoon811's picture
timoon811
Add 2 files
542b8dc verified
raw
history blame contribute delete
74.7 kB
<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>30 дней арбитражника трафика - Полная интерактивная история</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">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
body {
 font-family: 'Manrope', sans-serif;
 background-color: #f8fafc;
 scroll-behavior: smooth;
 }
.gradient-bg {
 background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
 }
.card-hover:hover {
 transform: translateY(-5px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
.day-card {
 transition: all 0.3s ease;
 perspective: 1000px;
 }
.day-card-inner {
 transition: transform 0.6s;
 transform-style: preserve-3d;
 }
.day-card:hover .day-card-inner {
 transform: rotateY(10deg);
 }
.pulse-animation {
 animation: pulse 2s infinite;
 }
@keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.05); }
 100% { transform: scale(1); }
 }
.progress-bar {
 height: 6px;
 background-color: #e2e8f0;
 border-radius: 3px;
 overflow: hidden;
 }
.progress-fill {
 height: 100%;
 background: linear-gradient(90deg, #4f46e5, #a855f7);
 transition: width 0.5s ease;
 }
.floating {
 animation: floating 3s ease-in-out infinite;
 }
@keyframes floating {
 0% { transform: translateY(0px); }
 50% { transform: translateY(-10px); }
 100% { transform: translateY(0px); }
 }
.highlight-text {
 position: relative;
 display: inline-block;
 }
.highlight-text::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 30%;
 background-color: rgba(165, 180, 252, 0.5);
 z-index: -1;
 transition: all 0.3s ease;
 }
.highlight-text:hover::after {
 height: 100%;
 background-color: rgba(165, 180, 252, 0.8);
 }
.timeline {
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
 }
.timeline::after {
 content: '';
 position: absolute;
 width: 6px;
 background-color: #e2e8f0;
 top: 0;
 bottom: 0;
 left: 50%;
 margin-left: -3px;
 border-radius: 3px;
 }
.timeline-card {
 padding: 10px 40px;
 position: relative;
 width: 50%;
 box-sizing: border-box;
 }
.timeline-card::after {
 content: '';
 position: absolute;
 width: 25px;
 height: 25px;
 right: -12px;
 background-color: #4f46e5;
 border: 4px solid #a855f7;
 top: 15px;
 border-radius: 50%;
 z-index: 1;
 }
.left {
 left: 0;
 }
.right {
 left: 50%;
 }
.left::before {
 content: " ";
 height: 0;
 position: absolute;
 top: 22px;
 width: 0;
 z-index: 1;
 right: 30px;
 border: medium solid #e2e8f0;
 border-width: 10px 0 10px 10px;
 border-color: transparent transparent transparent #fff;
 }
.right::before {
 content: " ";
 height: 0;
 position: absolute;
 top: 22px;
 width: 0;
 z-index: 1;
 left: 30px;
 border: medium solid #e2e8f0;
 border-width: 10px 10px 10px 0;
 border-color: transparent #fff transparent transparent;
 }
.right::after {
 left: -12px;
 }
@media screen and (max-width: 768px) {
 .timeline::after {
 left: 31px;
 }
.timeline-card {
 width: 100%;
 padding-left: 70px;
 padding-right: 25px;
 }
.timeline-card::before {
 left: 60px;
 border: medium solid #e2e8f0;
 border-width: 10px 10px 10px 0;
 border-color: transparent #fff transparent transparent;
 }
.left::after, .right::after {
 left: 18px;
 }
.right {
 left: 0%;
 }
 }
/* Quiz styles */
 .quiz-option {
 transition: all 0.3s ease;
 cursor: pointer;
 }
.quiz-option:hover {
 background-color: #f3f4f6;
 }
.quiz-option.selected {
 background-color: #e0e7ff;
 border-color: #818cf8;
 }
.quiz-option.correct {
 background-color: #d1fae5;
 border-color: #10b981;
 }
.quiz-option.wrong {
 background-color: #fee2e2;
 border-color: #ef4444;
 }
/* Checklist styles */
 .checklist-item {
 transition: all 0.3s ease;
 }
.checklist-item:hover {
 background-color: #f8fafc;
 }
.checklist-item input:checked ~ .checklist-label {
 text-decoration: line-through;
 color: #9ca3af;
 }
/* Calculator styles */
 .calculator-input {
 transition: all 0.3s ease;
 }
.calculator-input:focus {
 border-color: #818cf8;
 box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
 }
/* Interactive elements */
 .interactive-element {
 transition: all 0.3s ease;
 cursor: pointer;
 }
.interactive-element:hover {
 transform: translateY(-2px);
 }
/* Decision buttons */
 .decision-btn {
 transition: all 0.3s ease;
 }
.decision-btn:hover {
 transform: scale(1.05);
 }
/* Hidden elements */
 .hidden-content {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.5s ease;
 }
.hidden-content.show {
 max-height: 1000px;
 }
/* Tooltip */
 .tooltip {
 position: relative;
 display: inline-block;
 }
.tooltip .tooltip-text {
 visibility: hidden;
 width: 200px;
 background-color: #4f46e5;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px;
 position: absolute;
 z-index: 1;
 bottom: 125%;
 left: 50%;
 transform: translateX(-50%);
 opacity: 0;
 transition: opacity 0.3s;
 }
.tooltip:hover .tooltip-text {
 visibility: visible;
 opacity: 1;
 }
/* Day navigation */
 .day-navigation {
 position: fixed;
 right: 20px;
 top: 50%;
 transform: translateY(-50%);
 z-index: 100;
 }
@media (max-width: 1024px) {
 .day-navigation {
 display: none;
 }
 }
 </style>
</head>
<body>
 <!-- Hero Section -->
 <section class="gradient-bg text-white py-20 px-4">
 <div class="container mx-auto max-w-6xl">
 <div class="flex flex-col md:flex-row items-center">
 <div class="md:w-1/2 mb-10 md:mb-0">
 <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
 <span class="highlight-text">30 дней</span> в мире арбитража трафика
 </h1>
 <p class="text-xl md:text-2xl opacity-90 mb-8">
 Интерактивная хроника каждого дня: принимай решения, проходи тесты и учись на ошибках героя
 </p>
 <div class="flex flex-col sm:flex-row gap-4">
 <a href="#day1" class="bg-white text-indigo-700 hover:bg-gray-100 font-bold py-3 px-6 rounded-lg text-center transition duration-300 transform hover:scale-105">
 Начать путешествие <i class="fas fa-arrow-down ml-2"></i>
 </a>
 <a href="#final" class="border-2 border-white text-white hover:bg-white hover:text-indigo-700 font-bold py-3 px-6 rounded-lg text-center transition duration-300 transform hover:scale-105">
 Чем всё закончилось? <i class="fas fa-fast-forward ml-2"></i>
 </a>
 </div>
 </div>
 <div class="md:w-1/2 flex justify-center">
 <img src="https://illustrations.popsy.co/amber/digital-nomad.svg" alt="Арбитражник" class="w-full max-w-md floating">
 </div>
 </div>
 </div>
 </section>
<!-- Progress Bar -->
 <div class="bg-white shadow-sm sticky top-0 z-50">
 <div class="container mx-auto px-4">
 <div class="py-2">
 <div class="progress-bar">
 <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
 </div>
 <div class="flex justify-between mt-2 text-sm text-gray-600">
 <span>День 1</span>
 <span id="current-day">0/30</span>
 <span>День 30</span>
 </div>
 </div>
 </div>
 </div>
<!-- Day Navigation -->
 <div class="day-navigation hidden lg:block">
 <div class="bg-white rounded-lg shadow-lg p-4">
 <h3 class="font-bold text-lg mb-3 text-indigo-700">Навигация по дням</h3>
 <div class="space-y-2 max-h-96 overflow-y-auto">
 <a href="#day1" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 1</a>
 <a href="#day2" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 2</a>
 <a href="#day3" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 3</a>
 <a href="#day4" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 4</a>
 <a href="#day5" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 5</a>
 <a href="#day6" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 6</a>
 <a href="#day7" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 7</a>
 <a href="#day8" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 8</a>
 <a href="#day9" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 9</a>
 <a href="#day10" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 10</a>
 <a href="#day11" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 11</a>
 <a href="#day12" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 12</a>
 <a href="#day13" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 13</a>
 <a href="#day14" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 14</a>
 <a href="#day15" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 15</a>
 <a href="#day16" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 16</a>
 <a href="#day17" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 17</a>
 <a href="#day18" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 18</a>
 <a href="#day19" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 19</a>
 <a href="#day20" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 20</a>
 <a href="#day21" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 21</a>
 <a href="#day22" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 22</a>
 <a href="#day23" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 23</a>
 <a href="#day24" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 24</a>
 <a href="#day25" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 25</a>
 <a href="#day26" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 26</a>
 <a href="#day27" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 27</a>
 <a href="#day28" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 28</a>
 <a href="#day29" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 29</a>
 <a href="#day30" class="block text-sm py-1 px-2 rounded hover:bg-indigo-50 text-indigo-600">День 30</a>
 </div>
 </div>
 </div>
<!-- Stats Section -->
 <section class="bg-white py-12 px-4">
 <div class="container mx-auto max-w-6xl">
 <h2 class="text-3xl font-bold text-center mb-12">Цифры, которые вас шокируют</h2>
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div class="bg-gray-50 p-6 rounded-xl text-center border border-gray-200">
 <div class="text-5xl font-bold text-indigo-600 mb-4">30</div>
 <h3 class="text-xl font-semibold mb-2">Дней борьбы</h3>
 <p class="text-gray-600">Каждый день - новая попытка, ошибка или маленькая победа</p>
 </div>
 <div class="bg-gray-50 p-6 rounded-xl text-center border border-gray-200">
 <div class="text-5xl font-bold text-indigo-600 mb-4">97%</div>
 <h3 class="text-xl font-semibold mb-2">Новичков теряют деньги</h3>
 <p class="text-gray-600">В первые 30 дней работы с арбитражем трафика</p>
 </div>
 <div class="bg-gray-50 p-6 rounded-xl text-center border border-gray-200">
 <div class="text-5xl font-bold text-indigo-600 mb-4">50+</div>
 <h3 class="text-xl font-semibold mb-2">Попыток настроить рекламу</h3>
 <p class="text-gray-600">Прежде чем найти работающую связку</p>
 </div>
 <div class="bg-gray-50 p-6 rounded-xl text-center border border-gray-200">
 <div class="text-5xl font-bold text-indigo-600 mb-4">$2000</div>
 <h3 class="text-xl font-semibold mb-2">Средние вложения</h3>
 <p class="text-gray-600">Которые теряют новички до первых результатов</p>
 </div>
 </div>
 </div>
 </section>
<!-- Interactive Quiz Before Start -->
 <section class="py-12 px-4 bg-indigo-50">
 <div class="container mx-auto max-w-4xl">
 <div class="bg-white p-8 rounded-xl shadow-md border border-gray-200">
 <h2 class="text-2xl font-bold mb-6 text-center">Проверь свою готовность к арбитражу трафика</h2>
 <p class="text-gray-600 mb-8 text-center">Ответь на 5 вопросов, чтобы понять, насколько ты готов к этому сложному пути</p>
<div id="quiz-container">
 <div class="quiz-question mb-8">
 <h3 class="text-lg font-semibold mb-4">1. Какой минимальный бюджет ты готов выделить на тестирование?</h3>
 <div class="space-y-3">
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q1" class="hidden">
 <span>$100-300 - хочу начать с малого</span>
 </div>
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q1" class="hidden">
 <span>$500-1000 - готов к небольшим потерям</span>
 </div>
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q1" class="hidden">
 <span>$2000+ - понимаю, что это необходимо</span>
 </div>
 </div>
 </div>
<div class="quiz-question mb-8">
 <h3 class="text-lg font-semibold mb-4">2. Как ты отреагируешь, если первые 10 кампаний не принесут результата?</h3>
 <div class="space-y-3">
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q2" class="hidden">
 <span>Решу, что арбитраж - не моё</span>
 </div>
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q2" class="hidden">
 <span>Попробую ещё несколько раз</span>
 </div>
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q2" class="hidden">
 <span>Буду тестировать дальше, анализировать ошибки</span>
 </div>
 </div>
 </div>
<div class="quiz-question mb-8">
 <h3 class="text-lg font-semibold mb-4">3. Сколько времени ты готов уделять арбитражу ежедневно?</h3>
 <div class="space-y-3">
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q3" class="hidden">
 <span>1-2 часа - в свободное время</span>
 </div>
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q3" class="hidden">
 <span>3-5 часов - могу серьезно заняться</span>
 </div>
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q3" class="hidden">
 <span>6+ часов - готов погрузиться полностью</span>
 </div>
 </div>
 </div>
<div class="quiz-question mb-8">
 <h3 class="text-lg font-semibold mb-4">4. Как ты относишься к риску потерять вложенные деньги?</h3>
 <div class="space-y-3">
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q4" class="hidden">
 <span>Очень тяжело - для меня это критично</span>
 </div>
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q4" class="hidden">
 <span>Готов к небольшим потерям в процессе обучения</span>
 </div>
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q4" class="hidden">
 <span>Понимаю, что это неизбежная часть процесса</span>
 </div>
 </div>
 </div>
<div class="quiz-question mb-8">
 <h3 class="text-lg font-semibold mb-4">5. Что ты будешь делать, если аккаунт в рекламной сети заблокируют?</h3>
 <div class="space-y-3">
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q5" class="hidden">
 <span>Отправлюсь жаловаться в поддержку</span>
 </div>
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q5" class="hidden">
 <span>Попробую зарегистрировать новый аккаунт</span>
 </div>
 <div class="quiz-option p-3 border rounded-lg" onclick="selectOption(this)">
 <input type="radio" name="q5" class="hidden">
 <span>Разберу причины и найду обходные пути</span>
 </div>
 </div>
 </div>
<button onclick="calculateQuizResults()" class="w-full bg-indigo-600 text-white py-3 px-6 rounded-lg font-bold hover:bg-indigo-700 transition duration-300">
 Узнать результат теста
 </button>
 </div>
<div id="quiz-results" class="hidden mt-8 p-6 bg-indigo-50 rounded-lg">
 <h3 class="text-xl font-bold mb-4 text-center">Твой уровень готовности:</h3>
 <div class="text-center mb-4">
 <div class="inline-block text-4xl font-bold" id="quiz-score">0%</div>
 </div>
 <p class="text-gray-700 mb-4" id="quiz-feedback">На основе твоих ответов мы подготовили персонализированные рекомендации для старта в арбитраже трафика.</p>
 <div id="quiz-actions" class="flex justify-center">
 <button onclick="startJourney()" class="bg-indigo-600 text-white py-2 px-6 rounded-lg font-bold hover:bg-indigo-700 transition duration-300 mr-3">
 Начать 30-дневный путь
 </button>
 <button onclick="retakeQuiz()" class="bg-white text-indigo-600 py-2 px-6 rounded-lg font-bold hover:bg-gray-100 transition duration-300 border border-indigo-600">
 Пройти тест заново
 </button>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- 30 Days Timeline -->
 <section class="py-16 px-4 bg-gray-50">
 <div class="container mx-auto max-w-6xl">
 <h2 class="text-3xl font-bold text-center mb-4">Интерактивная хроника 30 дней</h2>
 <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Каждый день - это отдельная история с тестами, задачами и возможностью принять решение. Листай вниз и взаимодействуй!</p>
<div class="timeline">
 <!-- Day 1 -->
 <div id="day1" class="timeline-card left">
 <div class="day-card bg-white p-6 rounded-xl shadow-md border border-gray-200">
 <div class="flex justify-between items-center mb-4">
 <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 1</span>
 <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$50</span>
 </div>
 <h3 class="text-xl font-bold mb-3">Эйфория начала</h3>
 <p class="text-gray-600 mb-4">Регистрация в 5 рекламных сетях, чтение форумов до 3 ночи. Первая кампания запущена с бюджетом $50. "Как же всё просто!"</p>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Пройди мини-тест по первому дню:</h4>
 <div class="space-y-2">
 <div class="flex items-center">
 <input type="radio" id="day1-q1-a" name="day1-q1" class="mr-2">
 <label for="day1-q1-a">Арбитраж трафика - это просто и быстро</label>
 </div>
 <div class="flex items-center">
 <input type="radio" id="day1-q1-b" name="day1-q1" class="mr-2">
 <label for="day1-q1-b">Нужно быть готовым к сложностям и потерям</label>
 </div>
 <div class="flex items-center">
 <input type="radio" id="day1-q1-c" name="day1-q1" class="mr-2">
 <label for="day1-q1-c">Главное - верить в успех</label>
 </div>
 </div>
 <button class="mt-3 text-sm text-indigo-600 hover:text-indigo-800" onclick="checkAnswer('day1-q1', 'b')">Проверить ответ</button>
 <p id="day1-q1-feedback" class="hidden text-sm mt-2 text-green-600">Верно! Арбитраж требует подготовки и готовности к потерям.</p>
 </div>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Твой план действий:</h4>
 <div class="space-y-2">
 <div class="checklist-item flex items-center p-2 rounded-lg">
 <input type="checkbox" id="day1-task1" class="mr-3 h-5 w-5">
 <label for="day1-task1" class="checklist-label">Зарегистрироваться в 2-3 рекламных сетях</label>
 </div>
 <div class="checklist-item flex items-center p-2 rounded-lg">
 <input type="checkbox" id="day1-task2" class="mr-3 h-5 w-5">
 <label for="day1-task2" class="checklist-label">Выбрать 1 оффер для тестирования</label>
 </div>
 <div class="checklist-item flex items-center p-2 rounded-lg">
 <input type="checkbox" id="day1-task3" class="mr-3 h-5 w-5">
 <label for="day1-task3" class="checklist-label">Изучить политики рекламных сетей</label>
 </div>
 </div>
 </div>
<div class="flex items-center text-sm text-gray-500">
 <i class="fas fa-smile-beam text-indigo-500 mr-2"></i>
 <span>Настроение: Восторг</span>
 </div>
 </div>
 </div>
<!-- Day 2 -->
 <div id="day2" class="timeline-card right">
 <div class="day-card bg-white p-6 rounded-xl shadow-md border border-gray-200">
 <div class="flex justify-between items-center mb-4">
 <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 2</span>
 <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$100</span>
 </div>
 <h3 class="text-xl font-bold mb-3">Первые сливы</h3>
 <p class="text-gray-600 mb-4">$50 сгорели за 2 часа без ни одного лида. Добавил ещё $50, изменил креативы. "Наверное, просто неудачный оффер..."</p>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Прими решение:</h4>
 <p class="text-gray-600 mb-3">Твоя кампания не работает. Что будешь делать?</p>
 <div class="space-y-3">
 <button class="decision-btn w-full bg-indigo-50 text-indigo-700 p-3 rounded-lg border border-indigo-100" onclick="showDecisionFeedback(this, 'Правильно! Нужно анализировать данные перед увеличением бюджета.')">
 Остановлю кампанию и проанализирую данные
 </button>
 <button class="decision-btn w-full bg-indigo-50 text-indigo-700 p-3 rounded-lg border border-indigo-100" onclick="showDecisionFeedback(this, 'Рискованный выбор. Без анализа можно потерять ещё больше.')">
 Увеличу бюджет в 2 раза
 </button>
 <button class="decision-btn w-full bg-indigo-50 text-indigo-700 p-3 rounded-lg border border-indigo-100" onclick="showDecisionFeedback(this, 'Не самый лучший вариант. Нужно сначала понять причину провала.')">
 Запущу новый оффер без изменений
 </button>
 </div>
 <p id="day2-decision-feedback" class="hidden text-sm mt-3 p-2 bg-indigo-50 text-indigo-700 rounded"></p>
 </div>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Калькулятор потерь:</h4>
 <div class="grid grid-cols-2 gap-4 mb-3">
 <div>
 <label class="block text-sm text-gray-600 mb-1">Первоначальный бюджет</label>
 <input type="number" value="50" class="calculator-input w-full p-2 border rounded-lg">
 </div>
 <div>
 <label class="block text-sm text-gray-600 mb-1">Дополнительный бюджет</label>
 <input type="number" value="50" class="calculator-input w-full p-2 border rounded-lg">
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg">
 <p class="text-sm text-gray-600">Общие потери: <span class="font-bold">$100</span></p>
 <p class="text-sm text-gray-600">Лидов: <span class="font-bold">0</span></p>
 <p class="text-sm text-gray-600">CTR: <span class="font-bold">0%</span></p>
 </div>
 </div>
<div class="flex items-center text-sm text-gray-500">
 <i class="fas fa-meh text-indigo-500 mr-2"></i>
 <span>Настроение: Лёгкое недоумение</span>
 </div>
 </div>
 </div>
<!-- Day 3 -->
 <div id="day3" class="timeline-card left">
 <div class="day-card bg-white p-6 rounded-xl shadow-md border border-gray-200">
 <div class="flex justify-between items-center mb-4">
 <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 3</span>
 <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$150</span>
 </div>
 <h3 class="text-xl font-bold mb-3">Первая блокировка</h3>
 <p class="text-gray-600 mb-4">Аккаунт в Facebook заблокирован за "нестандартную активность". Начал изучать антифрод системы. "Почему они такие строгие?"</p>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Тест на знание политик Facebook:</h4>
 <div class="space-y-3">
 <div class="quiz-option p-3 border rounded-lg" onclick="selectQuizOption(this)">
 <input type="radio" name="day3-q1" class="hidden">
 <span>Можно запускать любые офферы, если они не нарушают законы</span>
 </div>
 <div class="quiz-option p-3 border rounded-lg" onclick="selectQuizOption(this)">
 <input type="radio" name="day3-q1" class="hidden">
 <span>Нужно соблюдать политики как рекламной сети, так и самого Facebook</span>
 </div>
 <div class="quiz-option p-3 border rounded-lg" onclick="selectQuizOption(this)">
 <input type="radio" name="day3-q1" class="hidden">
 <span>Главное - чтобы креативы выглядели прилично</span>
 </div>
 </div>
 <button class="mt-3 text-sm text-indigo-600 hover:text-indigo-800" onclick="checkQuizAnswer('day3-q1', 1)">Проверить ответ</button>
 <p id="day3-q1-feedback" class="hidden text-sm mt-2 text-green-600">Верно! Нужно соблюдать все политики платформы.</p>
 </div>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Советы по обходу блокировок:</h4>
 <button onclick="toggleHiddenContent('day3-tips')" class="text-indigo-600 font-semibold flex items-center">
 <span>Показать советы</span>
 <i class="fas fa-chevron-down ml-2 text-sm"></i>
 </button>
 <div id="day3-tips" class="hidden-content mt-2 pl-4 border-l-2 border-indigo-200">
 <ul class="space-y-2 text-sm text-gray-600">
 <li>Используйте качественные аккаунты с историей</li>
 <li>Начинайте с малых бюджетов</li>
 <li>Избегайте агрессивных креативов</li>
 <li>Разогревайте аккаунты перед запуском рекламы</li>
 <li>Используйте разные платежные методы</li>
 </ul>
 </div>
 </div>
<div class="flex items-center text-sm text-gray-500">
 <i class="fas fa-frown text-indigo-500 mr-2"></i>
 <span>Настроение: Раздражение</span>
 </div>
 </div>
 </div>
<!-- Day 4 -->
 <div id="day4" class="timeline-card right">
 <div class="day-card bg-white p-6 rounded-xl shadow-md border border-gray-200">
 <div class="flex justify-between items-center mb-4">
 <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 4</span>
 <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$200</span>
 </div>
 <h3 class="text-xl font-bold mb-3">Новые попытки</h3>
 <p class="text-gray-600 mb-4">Зарегистрировал новый аккаунт, попробовал другой оффер. Потратил ещё $50. "На этот раз точно получится!"</p>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Выбери оффер для тестирования:</h4>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
 <div class="offer-card p-4 border rounded-lg cursor-pointer hover:border-indigo-300 transition" onclick="selectOffer(this, 'health')">
 <div class="font-bold mb-1">Здоровье</div>
 <div class="text-sm text-gray-500">CR: 1-3%</div>
 <div class="text-sm text-gray-500">EPC: $0.5-1.2</div>
 </div>
 <div class="offer-card p-4 border rounded-lg cursor-pointer hover:border-indigo-300 transition" onclick="selectOffer(this, 'finance')">
 <div class="font-bold mb-1">Финансы</div>
 <div class="text-sm text-gray-500">CR: 0.5-2%</div>
 <div class="text-sm text-gray-500">EPC: $1-3</div>
 </div>
 <div class="offer-card p-4 border rounded-lg cursor-pointer hover:border-indigo-300 transition" onclick="selectOffer(this, 'dating')">
 <div class="font-bold mb-1">Знакомства</div>
 <div class="text-sm text-gray-500">CR: 2-5%</div>
 <div class="text-sm text-gray-500">EPC: $0.3-0.8</div>
 </div>
 </div>
 <p id="day4-offer-feedback" class="hidden text-sm mt-3 p-2 bg-indigo-50 text-indigo-700 rounded"></p>
 </div>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Чек-лист перед запуском:</h4>
 <div class="space-y-2">
 <div class="checklist-item flex items-center p-2 rounded-lg">
 <input type="checkbox" id="day4-task1" class="mr-3 h-5 w-5">
 <label for="day4-task1" class="checklist-label">Проверил политики оффера</label>
 </div>
 <div class="checklist-item flex items-center p-2 rounded-lg">
 <input type="checkbox" id="day4-task2" class="mr-3 h-5 w-5">
 <label for="day4-task2" class="checklist-label">Настроил UTM-метки</label>
 </div>
 <div class="checklist-item flex items-center p-2 rounded-lg">
 <input type="checkbox" id="day4-task3" class="mr-3 h-5 w-5">
 <label for="day4-task3" class="checklist-label">Подготовил 3 варианта креативов</label>
 </div>
 <div class="checklist-item flex items-center p-2 rounded-lg">
 <input type="checkbox" id="day4-task4" class="mr-3 h-5 w-5">
 <label for="day4-task4" class="checklist-label">Установил лимит бюджета</label>
 </div>
 </div>
 </div>
<div class="flex items-center text-sm text-gray-500">
 <i class="fas fa-smile text-indigo-500 mr-2"></i>
 <span>Настроение: Осторожный оптимизм</span>
 </div>
 </div>
 </div>
<!-- Day 5 -->
 <div id="day5" class="timeline-card left">
 <div class="day-card bg-white p-6 rounded-xl shadow-md border border-gray-200">
 <div class="flex justify-between items-center mb-4">
 <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 5</span>
 <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$250</span>
 </div>
 <h3 class="text-xl font-bold mb-3">Первые лиды</h3>
 <p class="text-gray-600 mb-4">Получил 3 лида! Но конверсия в продажу - 0. Потратил ещё $50. "Почему они не покупают? Может, лендинг плохой?"</p>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Анализ конверсии:</h4>
 <div class="bg-gray-50 p-4 rounded-lg mb-3">
 <div class="flex justify-between mb-2">
 <span>Потрачено:</span>
 <span class="font-bold">$250</span>
 </div>
 <div class="flex justify-between mb-2">
 <span>Лиды:</span>
 <span class="font-bold">3</span>
 </div>
 <div class="flex justify-between mb-2">
 <span>Продажи:</span>
 <span class="font-bold">0</span>
 </div>
 <div class="flex justify-between">
 <span>CR (конверсия):</span>
 <span class="font-bold">0%</span>
 </div>
 </div>
 <p class="text-sm text-gray-600">Средний CR по нише: 1-3%. Ваш результат ниже среднего.</p>
 </div>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Что улучшить? Выбери 2 главные проблемы:</h4>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
 <div class="problem-option p-3 border rounded-lg cursor-pointer" onclick="toggleProblemSelection(this)">
 <div class="font-semibold">Плохой трафик</div>
 <div class="text-sm text-gray-500">Нецелевые посетители</div>
 </div>
 <div class="problem-option p-3 border rounded-lg cursor-pointer" onclick="toggleProblemSelection(this)">
 <div class="font-semibold">Слабый лендинг</div>
 <div class="text-sm text-gray-500">Не продает продукт</div>
 </div>
 <div class="problem-option p-3 border rounded-lg cursor-pointer" onclick="toggleProblemSelection(this)">
 <div class="font-semibold">Неправильный оффер</div>
 <div class="text-sm text-gray-500">Не соответствует аудитории</div>
 </div>
 <div class="problem-option p-3 border rounded-lg cursor-pointer" onclick="toggleProblemSelection(this)">
 <div class="font-semibold">Высокая цена</div>
 <div class="text-sm text-gray-500">Товар слишком дорогой</div>
 </div>
 </div>
 <button class="mt-3 w-full bg-indigo-600 text-white py-2 rounded-lg" onclick="analyzeProblems()">Проанализировать</button>
 <p id="day5-problem-feedback" class="hidden text-sm mt-3 p-2 bg-indigo-50 text-indigo-700 rounded"></p>
 </div>
<div class="flex items-center text-sm text-gray-500">
 <i class="fas fa-meh-rolling-eyes text-indigo-500 mr-2"></i>
 <span>Настроение: Разочарование</span>
 </div>
 </div>
 </div>
<!-- Day 6 -->
 <div id="day6" class="timeline-card right">
 <div class="day-card bg-white p-6 rounded-xl shadow-md border border-gray-200">
 <div class="flex justify-between items-center mb-4">
 <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 6</span>
 <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$300</span>
 </div>
 <h3 class="text-xl font-bold mb-3">Изучение аналитики</h3>
 <p class="text-gray-600 mb-4">Понял, что не настроил UTM-метки и не видит откуда идут переходы. Начал изучать Google Analytics. "Как же всё сложно..."</p>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Тест на знание аналитики:</h4>
 <div class="space-y-3">
 <div class="quiz-option p-3 border rounded-lg" onclick="selectQuizOption(this)">
 <input type="radio" name="day6-q1" class="hidden">
 <span>UTM-метки нужны только для красоты</span>
 </div>
 <div class="quiz-option p-3 border rounded-lg" onclick="selectQuizOption(this)">
 <input type="radio" name="day6-q1" class="hidden">
 <span>UTM-метки помогают отслеживать источники трафика</span>
 </div>
 <div class="quiz-option p-3 border rounded-lg" onclick="selectQuizOption(this)">
 <input type="radio" name="day6-q1" class="hidden">
 <span>Достаточно смотреть статистику в рекламном кабинете</span>
 </div>
 </div>
 <button class="mt-3 text-sm text-indigo-600 hover:text-indigo-800" onclick="checkQuizAnswer('day6-q1', 1)">Проверить ответ</button>
 <p id="day6-q1-feedback" class="hidden text-sm mt-2 text-green-600">Верно! UTM-метки критически важны для анализа эффективности.</p>
 </div>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Собери UTM-метку:</h4>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
 <div>
 <label class="block text-sm text-gray-600 mb-1">Источник (utm_source)</label>
 <select class="w-full p-2 border rounded-lg">
 <option>facebook</option>
 <option>google</option>
 <option>taboola</option>
 </select>
 </div>
 <div>
 <label class="block text-sm text-gray-600 mb-1">Канал (utm_medium)</label>
 <select class="w-full p-2 border rounded-lg">
 <option>cpc</option>
 <option>banner</option>
 <option>native</option>
 </select>
 </div>
 <div>
 <label class="block text-sm text-gray-600 mb-1">Кампания (utm_campaign)</label>
 <input type="text" value="test1" class="w-full p-2 border rounded-lg">
 </div>
 <div>
 <label class="block text-sm text-gray-600 mb-1">Ключевое слово (utm_term)</label>
 <input type="text" value="offer1" class="w-full p-2 border rounded-lg">
 </div>
 </div>
 <div class="p-3 bg-gray-100 rounded-lg">
 <p class="text-sm font-mono break-all">Результат: ?utm_source=facebook&utm_medium=cpc&utm_campaign=test1&utm_term=offer1</p>
 </div>
 </div>
<div class="flex items-center text-sm text-gray-500">
 <i class="fas fa-book text-indigo-500 mr-2"></i>
 <span>Настроение: Учёба</span>
 </div>
 </div>
 </div>
<!-- Day 7 -->
 <div id="day7" class="timeline-card left">
 <div class="day-card bg-white p-6 rounded-xl shadow-md border border-gray-200">
 <div class="flex justify-between items-center mb-4">
 <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 7</span>
 <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$350</span>
 </div>
 <h3 class="text-xl font-bold mb-3">Неделя без результата</h3>
 <p class="text-gray-600 mb-4">Потрачено $350, 0 продаж. Начал сомневаться, стоит ли продолжать. "Может, это не моё?"</p>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Мотивационный тест:</h4>
 <p class="text-gray-600 mb-3">Что ты скажешь себе в этот сложный момент?</p>
 <div class="space-y-3">
 <button class="decision-btn w-full bg-indigo-50 text-indigo-700 p-3 rounded-lg border border-indigo-100" onclick="showDecisionFeedback(this, 'Правильный настрой! Именно так и рождаются успешные арбитражники.')">
 Это нормально, я только учусь. Буду анализировать и пробовать дальше.
 </button>
 <button class="decision-btn w-full bg-indigo-50 text-indigo-700 p-3 rounded-lg border border-indigo-100" onclick="showDecisionFeedback(this, 'Не сдавайся! Первые результаты уже близко.')">
 Сложно, но я не сдамся. Вложу ещё $200.
 </button>
 <button class="decision-btn w-full bg-indigo-50 text-indigo-700 p-3 rounded-lg border border-indigo-100" onclick="showDecisionFeedback(this, 'Попробуй ещё немного. Успех ближе, чем кажется.')">
 Наверное, это не моё. Лучше поищу другую сферу.
 </button>
 </div>
 <p id="day7-decision-feedback" class="hidden text-sm mt-3 p-2 bg-indigo-50 text-indigo-700 rounded"></p>
 </div>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Истории успеха:</h4>
 <div class="space-y-4">
 <div class="p-4 bg-indigo-50 rounded-lg">
 <div class="font-bold mb-1">Алексей, 28 лет</div>
 <div class="text-sm text-gray-600">Первые продажи только на 9-й день. Сейчас зарабатывает $5000/мес.</div>
 </div>
 <div class="p-4 bg-indigo-50 rounded-lg">
 <div class="font-bold mb-1">Ольга, 32 года</div>
 <div class="text-sm text-gray-600">Потратила $1500 до первой прибыльной кампании. Сейчас ROI 120%.</div>
 </div>
 <button onclick="toggleHiddenContent('day7-more-stories')" class="text-indigo-600 text-sm flex items-center">
 <span>Показать ещё истории</span>
 <i class="fas fa-chevron-down ml-2"></i>
 </button>
 <div id="day7-more-stories" class="hidden-content">
 <div class="p-4 bg-indigo-50 rounded-lg">
 <div class="font-bold mb-1">Дмитрий, 25 лет</div>
 <div class="text-sm text-gray-600">Полгода без прибыли. Сейчас владелец CPA-сети.</div>
 </div>
 </div>
 </div>
 </div>
<div class="flex items-center text-sm text-gray-500">
 <i class="fas fa-sad-tear text-indigo-500 mr-2"></i>
 <span>Настроение: Депрессия</span>
 </div>
 </div>
 </div>
<!-- Day 8 -->
 <div id="day8" class="timeline-card right">
 <div class="day-card bg-white p-6 rounded-xl shadow-md border border-gray-200">
 <div class="flex justify-between items-center mb-4">
 <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 8</span>
 <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$400</span>
 </div>
 <h3 class="text-xl font-bold mb-3">Новая стратегия</h3>
 <p class="text-gray-600 mb-4">Решил попробовать TikTok Ads. Потратил ещё $50. "Здесь точно проще, все говорят!"</p>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Выбери тип креатива для TikTok:</h4>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div class="creative-option p-4 border rounded-lg cursor-pointer hover:border-indigo-300 transition" onclick="selectCreative(this)">
 <div class="font-bold mb-2">Видео с эффектом "до/после"</div>
 <div class="text-sm text-gray-500">Показывает результат использования продукта</div>
 </div>
 <div class="creative-option p-4 border rounded-lg cursor-pointer hover:border-indigo-300 transition" onclick="selectCreative(this)">
 <div class="font-bold mb-2">Отзыв клиента</div>
 <div class="text-sm text-gray-500">Реальный человек рассказывает о продукте</div>
 </div>
 <div class="creative-option p-4 border rounded-lg cursor-pointer hover:border-indigo-300 transition" onclick="selectCreative(this)">
 <div class="font-bold mb-2">Обзор продукта</div>
 <div class="text-sm text-gray-500">Детальный разбор характеристик</div>
 </div>
 <div class="creative-option p-4 border rounded-lg cursor-pointer hover:border-indigo-300 transition" onclick="selectCreative(this)">
 <div class="font-bold mb-2">Юмористический ролик</div>
 <div class="text-sm text-gray-500">Смешная ситуация, связанная с продуктом</div>
 </div>
 </div>
 <p id="day8-creative-feedback" class="hidden text-sm mt-3 p-2 bg-indigo-50 text-indigo-700 rounded"></p>
 </div>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Советы по TikTok Ads:</h4>
 <div class="p-4 bg-indigo-50 rounded-lg">
 <ul class="list-disc pl-5 space-y-2 text-sm text-gray-700">
 <li>Первые 3 секунды видео должны зацепить</li>
 <li>Используйте популярную музыку и тренды</li>
 <li>Добавляйте субтитры - 85% пользователей смотрят без звука</li>
 <li>Оптимальная длина видео - 15-25 секунд</li>
 <li>Заканчивайте видео призывом к действию</li>
 </ul>
 </div>
 </div>
<div class="flex items-center text-sm text-gray-500">
 <i class="fas fa-smile-wink text-indigo-500 mr-2"></i>
 <span>Настроение: Новая надежда</span>
 </div>
 </div>
 </div>
<!-- Day 9 -->
 <div id="day9" class="timeline-card left">
 <div class="day-card bg-white p-6 rounded-xl shadow-md border border-gray-200">
 <div class="flex justify-between items-center mb-4">
 <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 9</span>
 <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$450</span>
 </div>
 <h3 class="text-xl font-bold mb-3">Бан номер два</h3>
 <p class="text-gray-600 mb-4">TikTok заблокировал аккаунт за "нарушение политик". Потрачено ещё $50. "Да как так-то?!"</p>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Разбор полётов:</h4>
 <p class="text-gray-600 mb-3">Твой аккаунт заблокирован. Какие действия предпримешь?</p>
 <div class="space-y-3">
 <button class="decision-btn w-full bg-indigo-50 text-indigo-700 p-3 rounded-lg border border-indigo-100" onclick="showDecisionFeedback(this, 'Правильно! Сначала нужно понять причину.')">
 Проанализирую, какое правило нарушил
 </button>
 <button class="decision-btn w-full bg-indigo-50 text-indigo-700 p-3 rounded-lg border border-indigo-100" onclick="showDecisionFeedback(this, 'Так можно потерять все аккаунты. Лучше разобраться в причинах.')">
 Зарегистрирую новый аккаунт на подругу
 </button>
 <button class="decision-btn w-full bg-indigo-50 text-indigo-700 p-3 rounded-lg border border-indigo-100" onclick="showDecisionFeedback(this, 'Не сдавайся! Попробуй другие платформы.')">
 Забью на TikTok и пойду в другую сеть
 </button>
 </div>
 <p id="day9-decision-feedback" class="hidden text-sm mt-3 p-2 bg-indigo-50 text-indigo-700 rounded"></p>
 </div>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Чек-лист восстановления:</h4>
 <div class="space-y-2">
 <div class="checklist-item flex items-center p-2 rounded-lg">
 <input type="checkbox" id="day9-task1" class="mr-3 h-5 w-5">
 <label for="day9-task1" class="checklist-label">Проверить точную причину блокировки</label>
 </div>
 <div class="checklist-item flex items-center p-2 rounded-lg">
 <input type="checkbox" id="day9-task2" class="mr-3 h-5 w-5">
 <label for="day9-task2" class="checklist-label">Подготовить документы для верификации</label>
 </div>
 <div class="checklist-item flex items-center p-2 rounded-lg">
 <input type="checkbox" id="day9-task3" class="mr-3 h-5 w-5">
 <label for="day9-task3" class="checklist-label">Найти альтернативные платформы</label>
 </div>
 <div class="checklist-item flex items-center p-2 rounded-lg">
 <input type="checkbox" id="day9-task4" class="mr-3 h-5 w-5">
 <label for="day9-task4" class="checklist-label">Изучить политики TikTok</label>
 </div>
 </div>
 </div>
<div class="flex items-center text-sm text-gray-500">
 <i class="fas fa-angry text-indigo-500 mr-2"></i>
 <span>Настроение: Ярость</span>
 </div>
 </div>
 </div>
<!-- Day 10 -->
 <div id="day10" class="timeline-card right">
 <div class="day-card bg-white p-6 rounded-xl shadow-md border border-gray-200">
 <div class="flex justify-between items-center mb-4">
 <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 10</span>
 <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$500</span>
 </div>
 <h3 class="text-xl font-bold mb-3">Первая продажа!</h3>
 <p class="text-gray-600 mb-4">Наконец-то первая продажа! Комиссия $20. Потрачено $500. ROI = -96%. "Хоть что-то..."</p>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Калькулятор эффективности:</h4>
 <div class="grid grid-cols-2 gap-4 mb-3">
 <div>
 <label class="block text-sm text-gray-600 mb-1">Общие затраты</label>
 <input type="number" value="500" class="calculator-input w-full p-2 border rounded-lg">
 </div>
 <div>
 <label class="block text-sm text-gray-600 mb-1">Доход</label>
 <input type="number" value="20" class="calculator-input w-full p-2 border rounded-lg">
 </div>
 </div>
 <div class="p-3 bg-gray-50 rounded-lg">
 <p class="text-sm text-gray-600">ROI: <span class="font-bold">-96%</span></p>
 <p class="text-sm text-gray-600">CPL: <span class="font-bold">$166.67</span></p>
 <p class="text-sm text-gray-600">Продажи: <span class="font-bold">1</span></p>
 </div>
 </div>
<div class="mb-6">
 <h4 class="font-semibold mb-3">Что дальше? Выбери стратегию:</h4>
 <div class="space-y-3">
 <button class="decision-btn w-full bg-indigo-50 text-indigo-700 p-3 rounded-lg border border-indigo-100" onclick="showDecisionFeedback(this, 'Хороший выбор! Масштабирование требует осторожности.')">
 Протестирую эту связку с другим креативом
 </button>
 <button class="decision-btn w-full bg-indigo-50 text-indigo-700 p-3 rounded-lg border border-indigo-100" onclick="showDecisionFeedback(this, 'Рискованный шаг. Лучше сначала убедиться в стабильности.')">
 Вложу ещё $500 в масштабирование
 </button>
 <button class="decision-btn w-full bg-indigo-50 text-indigo-700 p-3 rounded-lg border border-indigo-100" onclick="showDecisionFeedback(this, 'Разнообразие - это хорошо, но не распыляйся.')">
 Запущу 5 новых офферов одновременно
 </button>
 </div>
 <p id="day10-decision-feedback" class="hidden text-sm mt-3 p-2 bg-indigo-50 text-indigo-700 rounded"></p>
 </div>
<div class="flex items-center text-sm text-gray-500">
 <i class="fas fa-grin-stars text-indigo-500 mr-2"></i>
 <span>Настроение: Смешанные чувства</span>
 </div>
 </div>
 </div>
<!-- Day 11 -->
 <div id="day11" class="timeline-card left">
 <div class="day-card bg-white p-6 rounded-xl shadow-md border border-gray-200">
 <div class="flex justify-between items-center mb-4">
 <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded">День 11</span>
 <span class="text-gray-500 text-sm"><i class="fas fa-coins text-yellow-500 mr-1"></i> -$550</span>
 </div>
 <h3 class="text-xl font-bold mb-3">Новые креативы</h3>
 <p class="text-gray-600 mb-4">Создал 10 новых креативов, тестирую разные
</html>