226 lines
11 KiB
HTML
226 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Моё число жизненного пути</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>✨</text></svg>">
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:var(--ink);color:var(--white);padding:100px 24px}
|
||
.hero h1{font-size:clamp(36px,6vw,56px);font-weight:800;line-height:1.05;margin-bottom:24px}
|
||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;cursor:pointer;border:none}
|
||
.section{padding:80px 24px}
|
||
.section h2{font-size:clamp(28px,4vw,36px);font-weight:700;margin-bottom:32px;text-align:center}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:24px}
|
||
.calc-form{background:var(--ink);color:var(--white);border-radius:16px;padding:40px;max-width:500px;margin:0 auto}
|
||
.calc-form label{display:block;margin-bottom:16px}
|
||
.calc-form input{width:100%;padding:12px;border-radius:8px;border:1px solid #333;background:#1a1f28;color:#fff;font-size:16px}
|
||
.calc-form button{width:100%;margin-top:24px}
|
||
.result{background:var(--cyan-50);border-radius:16px;padding:40px;text-align:center;margin-top:32px;display:none}
|
||
.result h3{font-size:48px;color:var(--ink);margin-bottom:8px}
|
||
.result p{color:var(--gray-500);margin-bottom:24px}
|
||
.meaning{background:#fff;border:1px solid var(--gray-100);border-radius:12px;padding:24px;margin-top:24px;text-align:left}
|
||
.meaning h4{color:var(--ink);margin-bottom:12px}
|
||
.meaning ul{padding-left:20px}
|
||
.meaning li{margin-bottom:8px}
|
||
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
@media (max-width:640px){.container{padding:48px 20px}.section{padding:48px 20px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Узнай своё число жизненного пути</h1>
|
||
<p>Нумерология помогает понять свои сильные стороны и предназначение. Введите дату рождения — получите расчёт и толкование.</p>
|
||
<a class="btn" href="#calculator">Рассчитать</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="calculator" class="section">
|
||
<div class="container">
|
||
<h2>Калькулятор</h2>
|
||
<form class="calc-form" id="calcForm">
|
||
<label>
|
||
Дата рождения
|
||
<input type="date" id="birthdate" required>
|
||
</label>
|
||
<button type="submit" class="btn">Рассчитать число</button>
|
||
</form>
|
||
<div class="result" id="result">
|
||
<h3 id="numberValue">7</h3>
|
||
<p>Ваше число жизненного пути</p>
|
||
<div class="meaning" id="meaningText"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>Значения чисел</h2>
|
||
<div class="grid">
|
||
<div class="card reveal">
|
||
<h3>1 — Лидер</h3>
|
||
<p>Независимость, амбиции, лидерские качества. Вы созданы, чтобы вести за собой.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<h3>2 — Дипломат</h3>
|
||
<p>Чувствительность, партнёрство, гармония. Вы умеете находить общий язык.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<h3>3 — Творец</h3>
|
||
<p>Креативность, самовыражение, оптимизм. Ваш дар — вдохновлять других.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<h3>4 — Строитель</h3>
|
||
<p>Практичность, надёжность, дисциплина. Вы создаёте прочный фундамент.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<h3>5 — Свободный дух</h3>
|
||
<p>Приключения, перемены, свобода. Вы не терпите рутины.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<h3>6 — Наставник</h3>
|
||
<p>Забота, ответственность, семья. Вы призваны помогать другим.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<h3>7 — Мыслитель</h3>
|
||
<p>Анализ, мудрость, духовность. Вы ищете истину и глубину.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<h3>8 — Достигатель</h3>
|
||
<p>Власть, успех, материальный достаток. Вы умеете зарабатывать.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<h3>9 — Гуманист</h3>
|
||
<p>Сострадание, щедрость, служение миру. Вы меняете мир к лучшему.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
const meanings = {
|
||
1: {
|
||
title: "Лидер и первопроходец",
|
||
strengths: ["Независимость и самостоятельность", "Лидерские качества", "Амбициозность", "Оригинальность мышления"],
|
||
career: ["Предпринимательство", "Управленческие должности", "Инженерия", "Изобретательство"],
|
||
wealth: "Богатство приходит через собственные проекты и лидерские позиции. Избегайте партнёрств — вы эффективнее в одиночку."
|
||
},
|
||
2: {
|
||
title: "Дипломат и миротворец",
|
||
strengths: ["Чувствительность к другим", "Умение сотрудничать", "Тактичность", "Интуиция"],
|
||
career: ["Психология", "Переговоры", "Медицина", "Искусство"],
|
||
wealth: "Деньги приходят через партнёрства и помощь другим. Ваша сила — в команде."
|
||
},
|
||
3: {
|
||
title: "Творец и вдохновитель",
|
||
strengths: ["Креативность", "Оптимизм", "Коммуникабельность", "Артистизм"],
|
||
career: ["Искусство", "Маркетинг", "Журналистика", "Развлечения"],
|
||
wealth: "Богатство через творчество и публичные выступления. Монетизируйте свой талант."
|
||
},
|
||
4: {
|
||
title: "Строитель систем",
|
||
strengths: ["Практичность", "Дисциплина", "Надёжность", "Организованность"],
|
||
career: ["Финансы", "Строительство", "Администрирование", "IT"],
|
||
wealth: "Деньги приходят через системную работу и инвестиции. Богатство накопительное."
|
||
},
|
||
5: {
|
||
title: "Исследователь свободы",
|
||
strengths: ["Адаптивность", "Любопытство", "Энергичность", "Смелость"],
|
||
career: ["Туризм", "Продажи", "Журналистика", "Стартапы"],
|
||
wealth: "Богатство через перемены и риски. Не застревайте на одном месте."
|
||
},
|
||
6: {
|
||
title: "Наставник и защитник",
|
||
strengths: ["Забота", "Ответственность", "Гармоничность", "Преданность"],
|
||
career: ["Образование", "Медицина", "Дизайн", "Социальная работа"],
|
||
wealth: "Деньги через служение другим. Семейный бизнес — ваш путь."
|
||
},
|
||
7: {
|
||
title: "Мыслитель и искатель истины",
|
||
strengths: ["Аналитический ум", "Мудрость", "Интуиция", "Глубина"],
|
||
career: ["Наука", "Исследования", "IT", "Философия"],
|
||
wealth: "Богатство через экспертизу и уникальные знания. Интеллектуальный капитал."
|
||
},
|
||
8: {
|
||
title: "Достигатель успеха",
|
||
strengths: ["Амбициозность", "Организованность", "Финансовая грамотность", "Властность"],
|
||
career: ["Бизнес", "Финансы", "Банковское дело", "Корпоративное управление"],
|
||
wealth: "Крупные деньги через бизнес и инвестиции. Вы созданы для материального успеха."
|
||
},
|
||
9: {
|
||
title: "Гуманист и филантроп",
|
||
strengths: ["Сострадание", "Щедрость", "Широта взглядов", "Идеализм"],
|
||
career: ["Благотворительность", "Искусство", "Медицина", "Экология"],
|
||
wealth: "Богатство приходит, когда вы служите миру. Деньги — побочный эффект пользы."
|
||
}
|
||
};
|
||
|
||
function calculateNumber(dateStr) {
|
||
if (!dateStr) return null;
|
||
const parts = dateStr.split('-');
|
||
if (parts.length !== 3) return null;
|
||
|
||
let sum = 0;
|
||
for (const part of parts) {
|
||
for (const digit of part) {
|
||
sum += parseInt(digit, 10);
|
||
}
|
||
}
|
||
|
||
while (sum > 9 && sum !== 11 && sum !== 22 && sum !== 33) {
|
||
let newSum = 0;
|
||
while (sum > 0) {
|
||
newSum += sum % 10;
|
||
sum = Math.floor(sum / 10);
|
||
}
|
||
sum = newSum;
|
||
}
|
||
|
||
if (sum === 11 || sum === 22 || sum === 33) {
|
||
let finalSum = 0;
|
||
while (sum > 0) {
|
||
finalSum += sum % 10;
|
||
sum = Math.floor(sum / 10);
|
||
}
|
||
return finalSum;
|
||
}
|
||
|
||
return sum;
|
||
}
|
||
|
||
document.getElementById('calcForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
const date = document.getElementById('birthdate').value;
|
||
const number = calculateNumber(date);
|
||
|
||
if (number && meanings[number]) {
|
||
const m = meanings[number];
|
||
document.getElementById('numberValue').textContent = number;
|
||
document.getElementById('meaningText').innerHTML =
|
||
'<h4>' + m.title + '</h4>' +
|
||
'<p><strong>Сильные стороны:</strong> ' + m.strengths.join(', ') + '</p>' +
|
||
'<p><strong>Подходящие сферы:</strong> ' + m.career.join(', ') + '</p>' +
|
||
'<p><strong>О богатстве:</strong> ' + m.wealth + '</p>';
|
||
document.getElementById('result').style.display = 'block';
|
||
document.getElementById('result').scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
});
|
||
|
||
var io = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(e) {
|
||
if (e.isIntersecting) e.target.classList.add('in');
|
||
});
|
||
}, { threshold: 0.15 });
|
||
document.querySelectorAll('.reveal').forEach(function(el) { io.observe(el); });
|
||
</script>
|
||
</body>
|
||
</html>
|