# 🚀 ПОЛНЫЙ ПРОМПТ ДЛЯ НАПИСАНИЯ КОДА --- ## 📋 ЗАДАНИЕ Напиши полностью рабочий HTML-файл (HTML + CSS + JavaScript в одном файле) для квиза "Конструктор воронки продаж". Код будет встроен в блок T123 на Tilda. --- ## 🎯 ТРЕБОВАНИЯ ### Технические: - Один файл, всё внутри (HTML + CSS в ` ``` --- ### ЭКРАН 2: Средний чек ```html ``` --- ### ЭКРАН 3: Аудитория ```html ``` --- ### ЭКРАН 4: Бюджет ```html ``` --- ### ЭКРАН 5: Основной способ коммуникации ```html ``` --- ### ЭКРАН 6: Дополнительные способы ```html ``` --- ### ЭКРАН 7: Текущие продажи ```html ``` --- ### ЭКРАН 8: Уникальность ```html ``` --- ### ЭКРАН 9: Деньги ```html ``` --- ### ЭКРАН 10: Энергия ```html ``` --- ### ЭКРАН 11: Контакты (опциональный) ```html ``` --- ### ЭКРАН 12: Загрузка ```html ``` --- ### ЭКРАН 13: Результат ```html ``` --- ## 🧠 ЛОГИКА ГЕНЕРАЦИИ РЕЗУЛЬТАТА ```javascript function generateResult() { // Показываем экран загрузки showLoadingScreen(); // Генерируем все блоки результата setTimeout(() => { generateFunnelName(); generateArchetype(); generateFunnelSteps(); generateTools(); generateSecretTip(); generateAntiFunnel(); generateFirstStep(); generateSevenDayPlan(); showTildaForm(); }, 100); } // БЛОК 1: Название воронки function generateFunnelName() { const names = { 'style_video': 'Воронка Говорящего Эксперта', 'style_text': 'Глубокий Лабиринт Текстовика', 'style_tech': 'Автоматическая Машина Системщика', 'style_visual': 'Эстетичная Витрина Мастера' }; document.getElementById('funnel-name').innerText = names[userData.style_main] || 'Персональная воронка'; } // БЛОК 2: Архетип function generateArchetype() { const productNames = { 'product_knowledge': 'знания', 'product_service': 'услуги', 'product_physical': 'физический товар', 'product_digital': 'цифровой товар', 'product_media': 'рекламу/контент' }; const styleNames = { 'style_video': 'видео', 'style_text': 'тексты', 'style_tech': 'технологии и системы', 'style_visual': 'визуал' }; const audienceText = userData.audience === 'audience_warm' ? 'есть аудитория' : 'нет аудитории'; const salesText = { 'sales_none': 'нет продаж', 'sales_chaos': 'хаотичные продажи', 'sales_stable': 'стабильные продажи' }; let text = `Ты продаёшь ${productNames[userData.product]} через ${styleNames[userData.style_main]}. У тебя ${audienceText} и ${salesText[userData.sales]}.\n\n`; if (userData.unique_skill) { text += `Твоя суперсила: ${userData.unique_skill}\n`; } if (userData.unique_hate) { text += `Твой конфликт: ${userData.unique_hate}\n`; } text += `\nИменно поэтому тебе подходит эта стратегия.`; document.getElementById('archetype-text').innerText = text; } // БЛОК 3: Схема воронки function generateFunnelSteps() { const steps = [ generateTrafficStep(), generateEntryStep(), generateWarmupStep(), generateConversionStep(), generateRetentionStep() ]; const container = document.getElementById('funnel-steps'); container.innerHTML = ''; steps.forEach(step => { const div = document.createElement('div'); div.className = 'funnel-step'; div.innerHTML = `

${step.icon} ${step.name}

${step.description}

${step.details ? `

${step.details}

` : ''} `; container.appendChild(div); }); } function generateTrafficStep() { const traffic = { icon: '1️⃣', name: 'ТРАФИК', description: '', details: '', tools: [] }; // База всегда первая if (userData.audience === 'audience_warm') { traffic.description = 'Прогрев существующей базы'; traffic.details = 'Email-рассылка / Telegram-канал / Instagram Stories для тёплой аудитории'; traffic.tools.push('SendPulse', 'Telegram', 'Instagram'); } // Основной формат const style = userData.style_main; const budget = userData.budget; if (style === 'style_video') { if (budget === 'budget_no') { traffic.description += (traffic.description ? ' + ' : '') + 'Вирусные короткие видео'; traffic.details += '\nReels, TikTok, YouTube Shorts — 3-5 видео в неделю'; traffic.tools.push('Instagram Reels', 'TikTok', 'CapCut'); } else { traffic.description += (traffic.description ? ' + ' : '') + 'Таргетированная реклама видео'; traffic.details += '\nПлатное продвижение Reels/TikTok (от 10 000 ₽/мес)'; traffic.tools.push('VK Реклама', 'CapCut'); } } else if (style === 'style_text') { if (budget === 'budget_no') { traffic.description += (traffic.description ? ' + ' : '') + 'SEO-статьи и публикации'; traffic.details += '\nVC.ru, Habr, Яндекс.Дзен — 1-2 статьи в неделю'; traffic.tools.push('VC.ru', 'Habr', 'Notion'); } else { traffic.description += (traffic.description ? ' + ' : '') + 'Промо статей + посевы'; traffic.details += '\nРеклама статей + посевы в Telegram (от 15 000 ₽/мес)'; traffic.tools.push('VC.ru промо', 'Telegram Ads'); } } else if (style === 'style_visual') { if (budget === 'budget_no') { traffic.description += (traffic.description ? ' + ' : '') + 'Pinterest как источник трафика'; traffic.details += '\nSEO-пины → переход на сайт/профиль (10-15 пинов в неделю)'; traffic.tools.push('Pinterest', 'Canva'); } else { traffic.description += (traffic.description ? ' + ' : '') + 'Реклама визуального контента'; traffic.details += '\nКарусели в Instagram/VK (от 10 000 ₽/мес)'; traffic.tools.push('VK Реклама', 'Canva'); } } else if (style === 'style_tech') { if (budget === 'budget_no') { traffic.description += (traffic.description ? ' + ' : '') + 'Технические статьи + инструменты'; traffic.details += '\nHabr, VC.ru + бесплатные калькуляторы (1-2 статьи в месяц)'; traffic.tools.push('Habr', 'Notion', 'Google Sheets'); } else { traffic.description += (traffic.description ? ' + ' : '') + 'Реклама инструментов'; traffic.details += '\nЯндекс.Директ на калькуляторы/шаблоны (от 20 000 ₽/мес)'; traffic.tools.push('Яндекс.Директ'); } } return traffic; } function generateEntryStep() { const entry = { icon: '2️⃣', name: 'ТОЧКА ВХОДА', description: '', details: '', tools: [] }; const product = userData.product; const check = userData.check; if (product === 'product_knowledge') { if (check === 'check_low') { entry.description = 'Лид-магнит (гайд/чек-лист)'; entry.details = 'Бесплатный материал в обмен на контакты'; entry.tools = ['Tilda', 'Canva', 'SendPulse']; } else if (check === 'check_medium') { entry.description = 'Вебинар/Эфир'; entry.details = '60-90 мин: 70% ценность + 30% продажа'; entry.tools = ['Zoom', 'Bizon365', 'Getcourse']; } else { entry.description = 'Диагностический созвон'; entry.details = 'Бесплатная консультация → КП на программу'; entry.tools = ['Zoom', 'Telegram']; } } else if (product === 'product_service') { if (check === 'check_low') { entry.description = 'Портфолио + форма заказа'; entry.details = 'Витрина работ → простая форма'; entry.tools = ['Behance', 'Tilda', 'Google Forms']; } else if (check === 'check_medium') { entry.description = 'Бриф → Созвон'; entry.details = 'Форма с вопросами → обсуждение → КП'; entry.tools = ['Tilda', 'Telegram']; } else { entry.description = 'Персональный аудит'; entry.details = 'Созвон → глубокий разбор → детальное КП'; entry.tools = ['Zoom', 'Notion']; } } else if (product === 'product_physical') { if (check === 'check_low') { entry.description = 'Лендинг в 1 экран'; entry.details = 'Фото товара + цена + кнопка'; entry.tools = ['Tilda', 'ЮКасса']; } else if (check === 'check_medium') { entry.description = 'Каталог + консультация'; entry.details = 'Витрина → вопросы в чате → заказ'; entry.tools = ['Instagram', 'Telegram', 'Tilda']; } else { entry.description = 'Выезд замерщика/дизайнера'; entry.details = 'Индивидуальный подход → производство под заказ'; entry.tools = ['Calendly', 'CRM']; } } else if (product === 'product_digital') { entry.description = 'Бесплатный пробник'; entry.details = '1 шаблон/пресет бесплатно → покупка полного пакета'; entry.tools = ['Tilda', 'ЮКасса']; } else if (product === 'product_media') { entry.description = 'Портфолио → обсуждение в личке'; entry.details = 'Кейсы работ → переписка → договор'; entry.tools = ['Behance', 'Notion', 'Telegram']; } return entry; } function generateWarmupStep() { const warmup = { icon: '3️⃣', name: 'ПРОГРЕВ', description: '', details: '', tools: [] }; const check = userData.check; const style = userData.style_main; if (check === 'check_low') { warmup.description = 'Быстрый прогрев (1-3 дня)'; if (style === 'style_video') { warmup.details = '3-5 Stories/Reels с ценностью'; warmup.tools = ['Instagram', 'CapCut']; } else { warmup.details = '3 поста/письма с пользой'; warmup.tools = ['SendPulse', 'Telegram']; } } else if (check === 'check_medium') { warmup.description = 'Средний прогрев (5-7 дней)'; if (style === 'style_video') { warmup.details = 'Серия видео с экспертностью'; warmup.tools = ['YouTube', 'Instagram']; } else { warmup.details = 'Email-цепочка (7 писем): кейсы + инсайты'; warmup.tools = ['SendPulse', 'Notion']; } } else { warmup.description = 'Долгий прогрев (2-4 недели)'; warmup.details = 'Глубокие разборы + персональное видео-приветствие'; warmup.tools = ['Email', 'Telegram', 'Zoom']; } return warmup; } function generateConversionStep() { const conversion = { icon: '4️⃣', name: 'КОНВЕРСИЯ', description: '', details: '', tools: [] }; const check = userData.check; const product = userData.product; if (check === 'check_low') { conversion.description = 'Автоматическая продажа'; conversion.details = 'Лендинг/бот → Оплата → Выдача'; conversion.tools = ['Tilda', 'ЮКасса', 'Bothelp']; } else if (check === 'check_medium') { if (product === 'product_knowledge') { conversion.description = 'Вебинар с автопродажей'; conversion.details = 'Эфир → Оффер → Оплата'; conversion.tools = ['Zoom', 'Bizon365', 'ЮКасса']; } else { conversion.description = 'Созвон → КП'; conversion.details = 'Обсуждение задачи → коммерческое предложение'; conversion.tools = ['Zoom', 'Telegram', 'Notion']; } } else { if (product === 'product_service') { conversion.description = 'Личная продажа (созвон обязательно)'; conversion.details = 'Консультация → Детальное КП → Договор'; conversion.tools = ['Zoom', 'Telegram']; } else if (product === 'product_physical') { conversion.description = 'Выезд/индивидуальный подход'; conversion.details = 'Замер → Расчёт → Производство'; conversion.tools = ['Calendly', 'CRM']; } else { conversion.description = 'Диагностика → КП на программу'; conversion.details = 'Глубокий разбор → Персональное предложение'; conversion.tools = ['Zoom', 'Notion']; } } return conversion; } function generateRetentionStep() { const retention = { icon: '5️⃣', name: 'УДЕРЖАНИЕ', description: '', details: '', tools: [] }; const product = userData.product; const style = userData.style_main; if (product === 'product_knowledge') { retention.description = 'Апсейл / Даунсейл'; retention.details = 'Следующий уровень курса или комьюнити'; retention.tools = style === 'style_video' ? ['Telegram (видео-кружки)'] : ['Email', 'Getcourse']; } else if (product === 'product_service') { retention.description = 'Повторные заказы / Абонемент'; retention.details = 'Напоминание через X месяцев'; retention.tools = style === 'style_tech' ? ['CRM', 'Автонапоминания'] : ['Email', 'Telegram']; } else if (product === 'product_physical') { retention.description = 'Повторные покупки / Подписка'; retention.details = 'Рассылка о новинках / Коробка подписки'; retention.tools = ['Email', 'Telegram', 'Tilda']; } else if (product === 'product_digital') { retention.description = 'Кросс-селл / Подписка'; retention.details = 'Другие шаблоны/пресеты или месячная подписка'; retention.tools = ['Email', 'Boosty']; } else { retention.description = 'Долгосрочные контракты'; retention.details = 'Ретейнер с брендами'; retention.tools = ['Email', 'Notion']; } return retention; } // БЛОК 4: Инструменты function generateTools() { const allTools = new Set(); // Собираем инструменты из всех шагов const steps = [ generateTrafficStep(), generateEntryStep(), generateWarmupStep(), generateConversionStep(), generateRetentionStep() ]; steps.forEach(step => { step.tools.forEach(tool => allTools.add(tool)); }); // Группируем по категориям const categories = { 'Платформы': ['Instagram', 'TikTok', 'YouTube', 'Telegram', 'VC.ru', 'Habr', 'Pinterest', 'Behance'], 'Для контента': ['CapCut', 'Canva', 'Notion', 'Figma'], 'Автоматизация': ['SendPulse', 'Bothelp', 'Bizon365', 'Getcourse'], 'Приём платежей': ['ЮКасса', 'CloudPayments'], 'Аналитика': ['Яндекс.Метрика', 'Google Analytics'] }; let html = ''; for (let category in categories) { const tools = categories[category].filter(t => allTools.has(t)); if (tools.length > 0) { html += `

${category}: ${tools.join(', ')}

`; } } document.getElementById('tools-list').innerHTML = html; } // БЛОК 5: Секретная фишка function generateSecretTip() { let tip = ''; const skill = (userData.unique_skill || '').toLowerCase(); const hate = (userData.unique_hate || '').toLowerCase(); // Триггерные слова if (skill.includes('быстр') || skill.includes('скор') || skill.includes('срок')) { tip = `⚡ Используй скорость как УТП.\n\nДобавь в контент: таймлапсы процесса, таймеры обратного отсчёта, гарантию сроков. Покажи, как ты делаешь за 2 дня то, на что у других уходит 2 недели.`; } else if (skill.includes('качеств') || skill.includes('детал') || skill.includes('идеал')) { tip = `💎 Качество — твоя фишка.\n\nПокажи процесс: что проверяешь, на что обращаешь внимание. Сделай чек-лист "На что я смотрю при проверке" — это лид-магнит.`; } else if (skill.includes('прост') || skill.includes('понятн') || skill.includes('легк')) { tip = `🎯 Простота — твоё конкурентное преимущество.\n\nСнимай "объясняю за 60 секунд", делай инфографики, визуализируй сложное. Формат: "Было сложно → стало просто".`; } else if (skill.includes('индивид') || skill.includes('персональ')) { tip = `👤 Индивидуальный подход — твоя сила.\n\nПокажи разницу: "шаблонное решение vs персональное". Делай разборы "до знакомства со мной" и "после". Кейсы с именами и деталями.`; } if (hate.includes('обман') || hate.includes('врут') || hate.includes('обещ')) { tip += (tip ? '\n\n' : '') + `🎯 Бей в конфликт "обещания vs реальность".\n\nТвой контент: разоблачение мифов, честные кейсы с цифрами, показывай процесс без прикрас. Это создаст мощное доверие.`; } else if (hate.includes('тян') || hate.includes('долг') || hate.includes('срыв')) { tip += (tip ? '\n\n' : '') + `⏱ Ненавидишь затягивание? Сделай из этого фишку.\n\nДавай жёсткие дедлайны, публично обещай сроки, покажи как работаешь "в режиме реального времени". Это выделит тебя.`; } // Парадоксы энергии if (userData.energy.includes('energy_talking') && userData.drain.includes('drain_calls')) { tip += (tip ? '\n\n' : '') + `🤖 Парадокс: любишь общение, но выматываешься от созвонов?\n\nРешение: групповые форматы (эфиры, чаты) + бот для квалификации. Общаешься с теми, кто уже "прогрет".`; } if (!tip) { tip = '💡 Твоя уникальность — в сочетании навыков и подхода. Покажи это через контент и кейсы.'; } document.getElementById('secret-tip').innerText = tip; } // БЛОК 6: Анти-воронка function generateAntiFunnel() { const anti = []; // Стиль if (userData.style_main !== 'style_video') { anti.push('НЕ делай ежедневные Reels и прямые эфиры — ты в них выгоришь за неделю. Твоя сила в глубине, не в частоте.'); } if (userData.style_main !== 'style_text') { anti.push('НЕ пиши длинные статьи каждый день — это не твоя сила. Используй короткие форматы.'); } if (userData.style_main !== 'style_visual') { anti.push('НЕ тратишь силы на Pinterest и визуальную эстетику — это не твоя зона роста.'); } // Энергия if (userData.drain.includes('drain_calls')) { anti.push('НЕ делай воронку с обязательным созвоном на входе. Сначала автоматизируй квалификацию через бот/форму.'); } if (userData.drain.includes('drain_content')) { anti.push('НЕ пытайся постить каждый день — сосредоточься на качестве, а не частоте. 1 сильный пост в неделю лучше 7 слабых.'); } if (userData.drain.includes('drain_selling')) { anti.push('НЕ продавай в лоб. Используй автоворонку с прогревом — пусть контент продаёт за тебя.'); } if (userData.drain.includes('drain_personal')) { anti.push('НЕ строй личный бренд через лицо. Делай бренд через продукт, кейсы, результаты.'); } // Продажи if (userData.sales === 'sales_stable') { anti.push('НЕ ломай то, что работает. Сейчас твоя задача — масштабировать текущую воронку, а не строить новую с нуля.'); } let html = ''; anti.forEach(item => { html += `

❌ ${item}

`; }); document.getElementById('anti-funnel-list').innerHTML = html; } // БЛОК 7: Первый шаг function generateFirstStep() { const sales = userData.sales; const product = userData.product; let step = ''; if (sales === 'sales_none') { if (product === 'product_knowledge') { step = `

1. Запиши короткое вводное видео на YouTube (5-7 мин)
   "Как я помогаю [ЦА] получить [результат]"
2. Оформи профиль:
   ❌ Плохо: "Бизнес-коуч"
   ✅ Хорошо: "Помогаю выйти на 500к/мес без инстаграма"
3. Запости один кейс (проблема → решение → результат с цифрами)

`; } else if (product === 'product_service') { step = `

1. Оформи портфолио из 3 кейсов
   Формат: задача → процесс → результат (с фото)
2. Добавь форму "Хочу так же" в шапку профиля
3. Запости процесс работы (таймлапс/фото)

`; } else if (product === 'product_physical') { step = `

1. Сними распаковку товара (ASMR, детали, текстуры)
2. Создай лендинг в 1 экран: фото + цена + кнопка
3. Запусти рекламу на 3000 ₽ (тест)

`; } else if (product === 'product_digital') { step = `

1. Создай бесплатный пробник (1 из 20 шаблонов/пресетов)
2. Запости "До/После" применения
3. Добавь ссылку на скачивание в обмен на email

`; } else { step = `

1. Запости кейс работы с брендом (формат: задача → процесс → результат)
2. Оформи Notion с портфолио
3. Напиши 5 брендам напрямую с предложением

`; } } else if (sales === 'sales_chaos') { step = `

1. Создай типовой бриф (5-7 вопросов)
   Это отсечёт 50% неподходящих заявок
2. Запиши 3 видео-ответа на частые вопросы
   Кинь ссылку вместо переписки — экономия 80% времени
3. Поставь фиксированные слоты для созвонов
   (например, вторник и четверг 15:00-18:00)

`; } else { step = `

1. Подними средний чек: добавь "Премиум" (+30% к цене, +10% услуг)
2. Запусти реферальную программу
   (дай клиентам 10% за приведённых)
3. Автоматизируй повторные продажи
   (email через 3 месяца после покупки)

`; } document.getElementById('first-step').innerHTML = step; } // БЛОК 8: План на 7 дней function generateSevenDayPlan() { const plan = ` `; document.getElementById('seven-day-plan').innerHTML = plan; } // БЛОК 9: Показать форму Tilda function showTildaForm() { // Форма Tilda уже встроена в HTML с id #rec2200978741 // Здесь можно добавить логику показа, если форма изначально скрыта const form = document.getElementById('rec2200978741'); if (form) { form.style.display = 'block'; } } // Шеринг function shareToTelegram() { const url = encodeURIComponent(window.location.href); const text = encodeURIComponent('Прошёл квиз "Конструктор воронки продаж" — получил персональную стратегию! Попробуй и ты:'); window.open(`https://t.me/share/url?url=${url}&text=${text}`, '_blank'); } function shareToVK() { const url = encodeURIComponent(window.location.href); window.open(`https://vk.com/share.php?url=${url}`, '_blank'); } function copyLink() { navigator.clipboard.writeText(window.location.href).then(() => { alert('✅ Ссылка скопирована!'); }); } function resetQuiz() { if (confirm('Точно хочешь начать заново? Все ответы будут сброшены.')) { localStorage.removeItem('funnelQuizData'); location.reload(); } } ``` --- ## 🎨 ОБЩИЕ СТИЛИ ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg-primary); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif; color: var(--text-primary); line-height: 1.6; } .container { max-width: 800px; margin: 0 auto; padding: 40px 24px; } @media (max-width: 768px) { .container { padding: 24px 16px; } } .screen { min-height: 100vh; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } h1, h2, h3 { margin-bottom: 16px; } .subtitle { font-size: 18px; color: var(--text-secondary); margin-bottom: 32px; } .benefits { margin: 32px 0; } .benefit-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; font-size: 16px; } .benefit-item .icon { font-size: 24px; flex-shrink: 0; } .options { display: flex; flex-direction: column; gap: 16px; margin: 32px 0; } .navigation { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; } @media (max-width: 768px) { .navigation { flex-direction: column; } .navigation .button { width: 100%; } } ``` --- ## 🚀 ИНИЦИАЛИЗАЦИЯ ```javascript // При загрузке страницы window.addEventListener('DOMContentLoaded', () => { // Пытаемся загрузить сохранённый прогресс const hasProgress = loadProgress(); if (hasProgress) { // Спросить, хочет ли продолжить if (confirm('Найдены сохранённые ответы. Продолжить с того места, где остановился?')) { showScreen(currentScreen); } else { localStorage.removeItem('funnelQuizData'); showScreen(0); } } else { showScreen(0); } }); ``` --- ## ✅ ИТОГО Этот код: 1. ✅ Полностью автономный (один файл) 2. ✅ Работает в блоке T123 на Tilda 3. ✅ Сохраняет прогресс в LocalStorage 4. ✅ Валидация обязательных вопросов 5. ✅ Адаптивный дизайн 6. ✅ Генерация персонализированного результата 7. ✅ Интеграция с формой Tilda (#rec2200978741) 8. ✅ Кнопка "Сохранить PDF" через window.print() 9. ✅ Шеринг в соцсети 10. ✅ Триггерные слова для персонализации --- **Готово для вставки в HTML-блок Tilda!** 🎯