Made on
Tilda
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style>
body { background: #f9fafb; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1f2937; }
.container { max-width: 700px; margin: 0 auto; padding: 20px; }
.question-block { margin-bottom: 30px; padding: 25px; background: white; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.question-title { font-size: 24px; font-weight: 800; margin-bottom: 15px; color: #6366f1; text-align: center; }
.question-text { font-size: 19px; line-height: 1.5; margin-bottom: 25px; text-align: center; font-weight: 500; }
.answer-btn { display: block; width: 100%; text-align: left; padding: 18px 25px; margin: 10px 0; border: 2px solid #e5e7eb; border-radius: 16px; background: white; font-size: 17px; cursor: pointer; transition: all 0.25s; line-height: 1.4; }
.answer-btn:hover { border-color: #818cf8; background: #f9fafb; transform: translateY(-1px); }
.answer-btn.selected { border-color: #6366f1; background: #f0f4ff; font-weight: 600; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15); }
.result-container { display: none; max-width: 450px; margin: 40px auto; background: white; padding: 35px; border-radius: 24px; box-shadow: 0 12px 40px rgba(0,0,0,0.12); text-align: center; }
.result-title { font-size: 28px; font-weight: 800; margin-bottom: 30px; color: #1e293b; line-height: 1.3; }
.bar-item { margin-bottom: 22px; text-align: left; }
.bar-label { display: flex; justify-content: space-between; margin-bottom: 8px; font-weight: 700; font-size: 17px; }
.bar-track { height: 16px; background: #e2e8f0; border-radius: 8px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 8px; }
.bar-red { background: #ef4444; }
.bar-yellow { background: #f59e0b; }
.bar-green { background: #10b981; }
.sphere-section { margin: 30px 0; padding: 20px; background: #f8fafc; border-radius: 18px; }
.sphere-title { font-weight: 700; margin-bottom: 15px; color: #4b5563; font-size: 18px; }
.sphere-item { background: white; padding: 14px; border-radius: 12px; margin: 10px 0; font-size: 17px; box-shadow: 0 2px 6px rgba(0,0,0,0.03); }
.sources-section { margin: 30px 0; padding: 20px; background: #f0fdf4; border-radius: 18px; }
.sources-title { font-weight: 700; margin-bottom: 15px; color: #047857; font-size: 18px; }
.sources-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 10px; }
.source-item { background: white; padding: 12px; border-radius: 12px; text-align: center; font-size: 16px; font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,0.03); }
.loss-item { background: #fef2f2; color: #b91c1c; padding: 22px; border-radius: 18px; margin: 35px 0; font-weight: 700; font-size: 20px; line-height: 1.4; }
.btn-show { background: #6366f1; color: white; border: none; padding: 18px 45px; font-size: 20px; border-radius: 18px; cursor: pointer; margin: 35px auto; display: block; font-weight: 700; transition: all 0.3s; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); }
.btn-show:hover { background: #4f46e5; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); }
.btn-show:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-next { background: #10b981; color: white; border: none; padding: 16px 35px; font-size: 18px; border-radius: 16px; cursor: pointer; margin: 25px auto; display: block; font-weight: 600; }
.section-title { text-align: center; font-size: 26px; font-weight: 800; margin: 40px 0 25px; color: #4338ca; }
</style>
<div class="container">
<div id="questions-container">
<div class="question-block">
<div class="question-title">ВОПРОС 1</div>
<div class="question-text">Вы хотите похудеть или заняться собой, потому что:</div>
<div class="answer-btn" data-q="85,15,0" data-sphere="внешность" data-source="подруги">Подруга похудела, и я хочу так же</div>
<div class="answer-btn" data-q="30,70,0" data-sphere="внешность" data-source="страх">Боюсь осуждения за лишний вес</div>
<div class="answer-btn" data-q="0,0,100" data-sphere="внешность" data-source="истина">Самой хочется чувствовать лёгкость в теле</div>
<div class="answer-btn" data-q="90,10,0" data-sphere="внешность" data-source="соцсети">В инсте все худеют — и я хочу</div>
</div>
<div class="question-block">
<div class="question-title">ВОПРОС 2</div>
<div class="question-text">Вы мечтаете о повышении или новой работе, потому что:</div>
<div class="answer-btn" data-q="80,20,0" data-sphere="карьера" data-source="соцсети">Коллега получил повышение — хочу не отставать</div>
<div class="answer-btn" data-q="40,60,0" data-sphere="карьера" data-source="страх">Боюсь увольнения, если не выделюсь</div>
<div class="answer-btn" data-q="0,0,100" data-sphere="карьера" data-source="истина">Хочу развиваться в любимом деле</div>
<div class="answer-btn" data-q="70,30,0" data-sphere="карьера" data-source="родители">Родители говорят: «Ты можешь больше»</div>
</div>
<div class="question-block">
<div class="question-title">ВОПРОС 3</div>
<div class="question-text">Вы выбираете отпуск или путешествие, потому что:</div>
<div class="answer-btn" data-q="90,10,0" data-sphere="отдых" data-source="соцсети">Там красиво для сторис в инстаграм</div>
<div class="answer-btn" data-q="50,50,0" data-sphere="отдых" data-source="реклама">Увидели рекламу «идеального курорта»</div>
<div class="answer-btn" data-q="0,0,100" data-sphere="отдых" data-source="истина">Хочу именно туда — душа тянет</div>
<div class="answer-btn" data-q="75,25,0" data-sphere="отдых" data-source="подруги">Подруги советуют: «Ты обязана поехать!»</div>
</div>
<div class="question-block">
<div class="question-title">ВОПРОС 4</div>
<div class="question-text">Вы покупаете новую одежду или меняете образ, потому что:</div>
<div class="answer-btn" data-q="85,15,0" data-sphere="внешность" data-source="соцсети">Это носят все блогеры</div>
<div class="answer-btn" data-q="60,40,0" data-sphere="внешность" data-source="родители">Мама сказала: «Тебе нужно обновить гардероб»</div>
<div class="answer-btn" data-q="0,0,100" data-sphere="внешность" data-source="истина">Мне самой нравится, чувствую себя в ней уверенно</div>
<div class="answer-btn" data-q="70,30,0" data-sphere="внешность" data-source="реклама">Увидела рекламу и не смогла пройти мимо</div>
</div>
<div class="question-block">
<div class="question-title">ВОПРОС 5</div>
<div class="question-text">Вы хотите новых отношений или замужества, потому что:</div>
<div class="answer-btn" data-q="80,20,0" data-sphere="отношения" data-source="подруги">Подруги замужем — пора и мне</div>
<div class="answer-btn" data-q="30,70,0" data-sphere="отношения" data-source="страх">Боюсь остаться одна</div>
<div class="answer-btn" data-q="0,0,100" data-sphere="отношения" data-source="истина">Хочу разделить жизнь с близким человеком</div>
<div class="answer-btn" data-q="65,35,0" data-sphere="отношения" data-source="родители">Родители спрашивают: «Когда приведёшь?»</div>
</div>
<div class="question-block">
<div class="question-title">ВОПРОС 6</div>
<div class="question-text">Вы мечтаете о новом хобби или обучении, потому что:</div>
<div class="answer-btn" data-q="75,25,0" data-sphere="отдых" data-source="соцсети">Все вокруг учатся рисовать/танцевать</div>
<div class="answer-btn" data-q="40,60,0" data-sphere="отдых" data-source="реклама">Купили курс по импульсу после рекламы</div>
<div class="answer-btn" data-q="0,0,100" data-sphere="отдых" data-source="истина">Давно тянуло попробовать — сердце зовёт</div>
<div class="answer-btn" data-q="60,40,0" data-sphere="отдых" data-source="родители">Родители в детстве хотели, чтобы вы этим занимались</div>
</div>
<div class="question-block">
<div class="question-title">ВОПРОС 7</div>
<div class="question-text">Вы хотите сменить работу или сферу деятельности, потому что:</div>
<div class="answer-btn" data-q="70,30,0" data-sphere="карьера" data-source="соцсети">Друзья хвастаются крутой работой</div>
<div class="answer-btn" data-q="20,80,0" data-sphere="карьера" data-source="страх">Боюсь, что текущая работа исчезнет</div>
<div class="answer-btn" data-q="0,0,100" data-sphere="карьера" data-source="истина">Чувствую внутренний зов к другому делу</div>
<div class="answer-btn" data-q="55,45,0" data-sphere="карьера" data-source="реклама">Увидели «идеальную вакансию» в рекламе</div>
</div>
<button id="show-result" class="btn-show" disabled>Показать мой аудит желаний</button>
</div>
<div id="result-container" class="result-container">
<div class="result-title">ВАШ АУДИТ ЖЕЛАНИЙ</div>
<div class="bar-item">
<div class="bar-label"><span>🟥 ЧУЖИЕ желания</span><span id="percent-foreign">0</span>%</div>
<div class="bar-track"><div class="bar-fill bar-red" id="bar-foreign" style="width: 0%"></div></div>
</div>
<div class="bar-item">
<div class="bar-label"><span>🟨 КОМПЕНСАТОРНЫЕ</span><span id="percent-comp">0</span>%</div>
<div class="bar-track"><div class="bar-fill bar-yellow" id="bar-comp" style="width: 0%"></div></div>
</div>
<div class="bar-item">
<div class="bar-label"><span>🟩 ИСТИННЫЕ</span><span id="percent-true">0</span>%</div>
<div class="bar-track"><div class="bar-fill bar-green" id="bar-true" style="width: 0%"></div></div>
</div>
<div class="sphere-section">
<div class="sphere-title">РАЗБИВКА ПО СФЕРАМ:</div>
<div class="sphere-item">Внешность/гардероб: <span id="sphere-внешность">0</span>% чужих</div>
<div class="sphere-item">Карьера/работа: <span id="sphere-карьера">0</span>% чужих</div>
<div class="sphere-item">Отдых/отпуск: <span id="sphere-отдых">0</span>% чужих</div>
<div class="sphere-item">Отношения: <span id="sphere-отношения">0</span>% чужих</div>
</div>
<div class="sources-section">
<div class="sources-title">ВАШИ ИСТОЧНИКИ ЧУЖИХ ЖЕЛАНИЙ:</div>
<div class="sources-grid">
<div class="source-item">Инстаграм/соцсети — <span id="source-соцсети">0</span>%</div>
<div class="source-item">Мама/родители — <span id="source-родители">0</span>%</div>
<div class="source-item">Подруги — <span id="source-подруги">0</span>%</div>
<div class="source-item">Реклама — <span id="source-реклама">0</span>%</div>
</div>
</div>
<div class="loss-item">
Вы тратите <span id="hours-week">0</span> часов в неделю на желания, которые не ваши.<br>
Это <span id="hours-month">0</span> часа в месяц = почти 2 полных дня жизни.
</div>
<button class="btn-next" onclick="document.querySelector('#form-container').scrollIntoView({behavior: 'smooth'})">
Получить чек-лист «5 шагов к истинным желаниям»
</button>
</div>
<div id="form-container" style="margin-top: 60px; text-align: center; display: none;">
<div class="section-title">ПОЛУЧИТЕ ЧЕК-ЛИСТ</div>
<div style="background: white; max-width: 500px; margin: 0 auto; padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);">
<div style="font-size: 19px; margin-bottom: 25px; color: #4b5563;">
Укажите ваш email — и я пришлю вам бесплатный чек-лист с практиками для обретения истинных желаний
</div>
<input type="text" id="name-field" placeholder="Ваше имя" style="width: 100%; padding: 16px; margin-bottom: 15px; border: 2px solid #e2e8f0; border-radius: 14px; font-size: 17px; outline: none;">
<input type="email" id="email-field" placeholder="Ваш email" style="width: 100%; padding: 16px; margin-bottom: 20px; border: 2px solid #e2e8f0; border-radius: 14px; font-size: 17px; outline: none;">
<button class="btn-show" onclick="submitForm()">Получить чек-лист</button>
<div style="margin-top: 15px; font-size: 14px; color: #6b7280;">Ваши данные в безопасности. Без спама.</div>
</div>
</div>
</div>
<script>
const answers = { scores: [], spheres: {}, sources: {} };
const spheresList = ['внешность', 'карьера', 'отдых', 'отношения'];
const sourcesList = ['соцсети', 'родители', 'подруги', 'реклама', 'страх', 'истина'];
// Инициализация
spheresList.forEach(s => answers.spheres[s] = []);
sourcesList.forEach(s => answers.sources[s] = 0);
// Обработчик выбора ответа
document.querySelectorAll('.answer-btn').forEach((btn, index) => {
btn.addEventListener('click', function() {
// Снимаем выделение с других кнопок в этом вопросе
const questionBlock = this.closest('.question-block');
questionBlock.querySelectorAll('.answer-btn').forEach(b => b.classList.remove('selected'));
// Выделяем текущую
this.classList.add('selected');
// Сохраняем данные
const [foreign, comp, truth] = this.dataset.q.split(',').map(Number);
const sphere = this.dataset.sphere;
const source = this.dataset.source;
// Определяем номер вопроса (0-6)
const questionIndex = Array.from(document.querySelectorAll('.question-block')).indexOf(questionBlock);
answers.scores[questionIndex] = [foreign, comp, truth];
// Сохраняем сферу
if (sphere && answers.spheres[sphere] !== undefined) {
answers.spheres[sphere].push(foreign);
}
// Сохраняем источник
if (source && answers.sources[source] !== undefined) {
answers.sources[source] += 1;
}
// Проверяем, ответили ли на все вопросы
const allAnswered = answers.scores.filter(s => s).length === 7;
document.getElementById('show-result').disabled = !allAnswered;
});
});
// Показ результата
document.getElementById('show-result').addEventListener('click', calculateResult);
function calculateResult() {
// Суммируем баллы
let foreign = 0, comp = 0, truth = 0;
answers.scores.forEach(([f, c, t]) => {
foreign += f;
comp += c;
truth += t;
});
// Нормализуем в проценты
const total = 700; // 7 вопросов × 100 баллов
let pForeign = Math.round(foreign / total * 100);
let pComp = Math.round(comp / total * 100);
let pTruth = 100 - pForeign - pComp;
// Коррекция погрешности округления
if (pTruth < 0) {
const diff = -pTruth;
pTruth = 0;
if (pForeign > pComp) pForeign -= diff;
else pComp -= diff;
}
// Обновляем UI
document.getElementById('percent-foreign').textContent = pForeign;
document.getElementById('percent-comp').textContent = pComp;
document.getElementById('percent-true').textContent = pTruth;
document.getElementById('bar-foreign').style.width = pForeign + '%';
document.getElementById('bar-comp').style.width = pComp + '%';
document.getElementById('bar-true').style.width = pTruth + '%';
// Сферы
spheresList.forEach(sphere => {
const scores = answers.spheres[sphere];
if (scores.length > 0) {
const avg = Math.round(scores.reduce((a,b) => a+b, 0) / scores.length);
document.getElementById(`sphere-${sphere}`).textContent = avg;
}
});
// Источники (только "чужие" источники)
const foreignSources = {
соцсети: answers.sources.соцсети,
родители: answers.sources.родители,
подруги: answers.sources.подруги,
реклама: answers.sources.реклама
};
const totalForeignSources = Object.values(foreignSources).reduce((a,b) => a+b, 0) || 1;
Object.keys(foreignSources).forEach(src => {
const pct = Math.round(foreignSources[src] / totalForeignSources * 100);
document.getElementById(`source-${src}`).textContent = pct;
});
// Потеря времени (психологически усиленная формула)
let hoursWeek = Math.round(pForeign * 0.16) + 3;
if (hoursWeek < 7) hoursWeek = 7;
if (hoursWeek > 18) hoursWeek = 18;
const hoursMonth = (hoursWeek * 4.33).toFixed(1);
document.getElementById('hours-week').textContent = hoursWeek;
document.getElementById('hours-month').textContent = hoursMonth;
// Показываем результат и форму
document.getElementById('questions-container').style.display = 'none';
document.getElementById('result-container').style.display = 'block';
document.getElementById('form-container').style.display = 'block';
// Скролл к результату
document.getElementById('result-container').scrollIntoView({behavior: 'smooth'});
// Отправка в Яндекс.Метрику (если подключена)
if (window.ym) {
ym(99999999, 'reachGoal', 'test_complete', {
foreign: pForeign,
comp: pComp,
truth: pTruth
});
}
}
// Простая отправка формы (для демо)
window.submitForm = function() {
const name = document.getElementById('name-field').value.trim();
const email = document.getElementById('email-field').value.trim();
if (!name || !email) {
alert('Пожалуйста, заполните имя и email');
return;
}
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
alert('Проверьте правильность email');
return;
}
// Здесь можно добавить отправку на ваш сервис (SendPulse, Telegram-бот и т.д.)
// Пример для демо:
alert(`Спасибо, ${name}! Чек-лист отправлен на ${email}\n\nВ реальной версии здесь будет интеграция с вашей email-рассылкой.`);
// Скролл вверх
document.querySelector('.container').scrollIntoView({behavior: 'smooth'});
};
</script>
</body>