519 lines
30 KiB
HTML
519 lines
30 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;--green:#22C55E;--orange:#F97316}
|
||
*{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:80px 24px}
|
||
.hero h1{font-size:clamp(36px,6vw,56px);font-weight:800;line-height:1.05;margin-bottom:24px}
|
||
.hero p{font-size:clamp(18px,3vw,20px);color:#9aa3b2;max-width:700px;margin-bottom:32px}
|
||
.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}
|
||
.card h3{font-size:22px;font-weight:700;margin-bottom:16px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-size:17px}
|
||
.btn:hover{opacity:0.9}
|
||
input,select{width:100%;padding:14px;border:1px solid #ddd;border-radius:8px;font-size:17px;margin-bottom:16px}
|
||
input:focus,select:focus{outline:2px solid var(--cyan);border-color:transparent}
|
||
.result-box{background:var(--cyan-50);border-radius:12px;padding:24px;margin-top:24px;border:2px solid var(--cyan)}
|
||
.result-box h3{color:var(--ink);margin-bottom:12px}
|
||
.result-value{font-size:32px;font-weight:800;color:var(--ink)}
|
||
.direction-card{background:var(--white);border:2px solid var(--gray-100);border-radius:16px;padding:24px;margin-bottom:20px;transition:border-color 0.3s}
|
||
.direction-card:hover{border-color:var(--cyan)}
|
||
.direction-card h3{font-size:24px;font-weight:700;margin-bottom:12px;color:var(--ink)}
|
||
.direction-card .price{font-size:28px;font-weight:800;color:var(--green);margin:12px 0}
|
||
.direction-card .details{color:var(--gray-500);font-size:15px;line-height:1.8}
|
||
.direction-card .badge{display:inline-block;background:var(--cyan-50);color:var(--ink);padding:6px 12px;border-radius:20px;font-size:14px;font-weight:600;margin-right:8px;margin-bottom:8px}
|
||
.timeline{position:relative;padding-left:32px}
|
||
.timeline-item{position:relative;padding-bottom:32px;border-left:3px solid var(--cyan);padding-left:24px;margin-bottom:16px}
|
||
.timeline-item:last-child{border-left-color:transparent}
|
||
.timeline-item::before{content:'';position:absolute;left:-9px;top:0;width:15px;height:15px;border-radius:50%;background:var(--cyan)}
|
||
.timeline-item h4{font-weight:700;margin-bottom:8px}
|
||
.timeline-item p{color:var(--gray-500);font-size:15px}
|
||
.checklist{list-style:none}
|
||
.checklist li{padding:12px 16px;background:var(--gray-100);margin-bottom:12px;border-radius:8px;display:flex;align-items:center;gap:12px}
|
||
.checklist li input[type="checkbox"]{width:20px;height:20px;margin:0}
|
||
.tip-box{background:linear-gradient(135deg,#fff9e6,#fff);border-left:4px solid var(--orange);padding:20px;border-radius:8px;margin-bottom:20px}
|
||
.tip-box h4{color:var(--orange);margin-bottom:8px;font-weight:700}
|
||
@media (max-width:640px){.container{padding:48px 20px}.hero{padding:48px 20px}.card{padding:24px}.direction-card{padding:20px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Накопить на отдых семьёй из 7 человек</h1>
|
||
<p>Калькулятор накоплений + готовые направления с расписанием. Дети 15, 12, 10, 5, 2 года — учтём скидки и бесплатное!</p>
|
||
<a class="btn" href="#calculator">Начать расчёт</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="calculator" class="section">
|
||
<div class="container">
|
||
<h2>💰 Калькулятор накоплений</h2>
|
||
<div class="card">
|
||
<h3>Сколько можете откладывать в месяц?</h3>
|
||
<input type="number" id="monthly" placeholder="Например: 50000" min="0" value="50000">
|
||
<h3>На какой срок?</h3>
|
||
<select id="months">
|
||
<option value="3">3 месяца</option>
|
||
<option value="6">6 месяцев</option>
|
||
<option value="12">12 месяцев (1 год)</option>
|
||
<option value="18">18 месяцев (1.5 года)</option>
|
||
<option value="24" selected>24 месяца (2 года)</option>
|
||
</select>
|
||
<h3>Уже есть накопления?</h3>
|
||
<input type="number" id="initial" placeholder="Например: 50000" min="0" value="50000">
|
||
<button class="btn" onclick="calculate()">Рассчитать</button>
|
||
<button class="btn" onclick="showDailyTable()" style="margin-left:12px;background:var(--green);color:#fff">📊 Таблица по дням</button>
|
||
|
||
<div class="result-box" id="result" style="display:none">
|
||
<h3>💵 Итого накопите:</h3>
|
||
<div class="result-value" id="total">0 ₸</div>
|
||
<p style="margin-top:12px;color:var(--gray-500)">
|
||
<span id="breakdown"></span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="dailyTable" class="card" style="display:none;margin-top:24px">
|
||
<h3>📅 Таблица накоплений по дням и месяцам</h3>
|
||
<p style="color:var(--gray-500);margin-bottom:16px">Откладывайте эту сумму ежедневно + 50 000 ₸ с зарплаты</p>
|
||
<div id="tableContent"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="destinations" class="section" style="background:var(--gray-100)">
|
||
<div class="container">
|
||
<h2>🏖 Куда поехать семье из 7 человек</h2>
|
||
|
||
<div class="tip-box">
|
||
<h4>💡 Ваша экономия с детьми</h4>
|
||
<p>Малышу 2 года — почти везде бесплатно! Ребёнку 5 лет — скидки 30-50%. Старшим (10, 12, 15 лет) — детские тарифы. Экономия на семью до 40% по сравнению со взрослыми ценами.</p>
|
||
</div>
|
||
|
||
<div class="direction-card">
|
||
<h3>🇹🇷 Турция, Аланья/Анталия</h3>
|
||
<span class="badge">Всё включено</span>
|
||
<span class="badge">Дети бесплатно</span>
|
||
<span class="badge">Рекомендуем!</span>
|
||
<div class="price">от 750 000 ₸ / 7 ночей</div>
|
||
<div class="details">
|
||
<strong>Перелёт:</strong> Алматы → Анталья (4.5 часа, есть прямые рейсы)<br>
|
||
<strong>Проживание:</strong> Отель 3-4* всё включено (семейный номер или 2 смежных)<br>
|
||
<strong>Питание:</strong> Всё включено (алкоголь, snacks 24/7)<br>
|
||
<strong>Дети:</strong> до 2 лет бесплатно, 2-6 лет ~50% скидка, 6-12 лет ~20-30%<br>
|
||
<strong>Когда:</strong> май-июнь, сентябрь (дешевле и комфортнее для малышей)<br>
|
||
<strong>Бронировать:</strong> за 3-4 месяца (январь-февраль для лета)<br>
|
||
<strong>Итого на семью:</strong> ~750 000 - 950 000 ₸ (7 ночей) — <strong>вам хватит!</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="direction-card">
|
||
<h3>🇪🇬 Египет, Шарм-эль-Шейх</h3>
|
||
<span class="badge">Всё включено</span>
|
||
<span class="badge">Самый бюджетный</span>
|
||
<span class="badge">Тёплое море</span>
|
||
<div class="price">от 550 000 ₸ / 7 ночей</div>
|
||
<div class="details">
|
||
<strong>Перелёт:</strong> Алматы → Шарм (6 часов, чартеры)<br>
|
||
<strong>Проживание:</strong> Отель 3-4* всё включено<br>
|
||
<strong>Питание:</strong> Всё включено<br>
|
||
<strong>Дети:</strong> до 2 лет бесплатно, до 12 лет ~30-50% скидки<br>
|
||
<strong>Когда:</strong> март-май, сентябрь-ноябрь (летом жарко для малыша 2 года)<br>
|
||
<strong>Бронировать:</strong> за 2-3 месяца<br>
|
||
<strong>Итого на семью:</strong> ~550 000 - 750 000 ₸ (7 ночей) — <strong>останутся деньги!</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="direction-card">
|
||
<h3>🇰🇿 Казахстан, Щучинск/Боровое</h3>
|
||
<span class="badge">Без визы</span>
|
||
<span class="badge">Супер-дёшево</span>
|
||
<span class="badge">Природа</span>
|
||
<div class="price">от 200 000 ₸ / 7 дней</div>
|
||
<div class="details">
|
||
<strong>Дорога:</strong> Алматы → Щучинск (1.5 часа самолёт или 12 часов поезд/машина)<br>
|
||
<strong>Проживание:</strong> База отдыха/санаторий (семейный номер)<br>
|
||
<strong>Питание:</strong> Кухня самостоятельно или полупансион<br>
|
||
<strong>Дети:</strong> до 5 лет часто бесплатно, скидки на развлечения<br>
|
||
<strong>Когда:</strong> июнь-август (купание), май-сентябрь (прогулки)<br>
|
||
<strong>Бронировать:</strong> за 1-2 месяца<br>
|
||
<strong>Итого на семью:</strong> ~200 000 - 350 000 ₸ (7 дней) — <strong>можно съездить 2 раза!</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="direction-card">
|
||
<h3>🇰🇿 Казахстан, Актау/Каспий</h3>
|
||
<span class="badge">Море</span>
|
||
<span class="badge">Без визы</span>
|
||
<span class="badge">Выгодно</span>
|
||
<div class="price">от 350 000 ₸ / 7 дней</div>
|
||
<div class="details">
|
||
<strong>Перелёт:</strong> Алматы → Актау (~2 часа, есть прямые)<br>
|
||
<strong>Проживание:</strong> Отель/апартаменты у моря<br>
|
||
<strong>Питание:</strong> Самостоятельно (кафе, магазины)<br>
|
||
<strong>Дети:</strong> без ограничений по возрасту, детские площадки<br>
|
||
<strong>Когда:</strong> июль-август (тёплое море)<br>
|
||
<strong>Бронировать:</strong> за 1-2 месяца<br>
|
||
<strong>Итого на семью:</strong> ~350 000 - 500 000 ₸ (7 дней) — <strong>отличный вариант!</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="direction-card">
|
||
<h3>🇺🇿 Узбекистан, Ташкент/Самарканд</h3>
|
||
<span class="badge">Экскурсии</span>
|
||
<span class="badge">Без визы</span>
|
||
<span class="badge">Культура</span>
|
||
<div class="price">от 300 000 ₸ / 5 дней</div>
|
||
<div class="details">
|
||
<strong>Перелёт:</strong> Алматы → Ташкент (1.5 часа, дешёвые рейсы)<br>
|
||
<strong>Проживание:</strong> Отель 3-4* в городе<br>
|
||
<strong>Питание:</strong> Национальная кухня (недорого)<br>
|
||
<strong>Дети:</strong> скидки на экскурсии, бесплатный транспорт до 7 лет<br>
|
||
<strong>Когда:</strong> апрель-май, сентябрь-октябрь (не жарко)<br>
|
||
<strong>Бронировать:</strong> за 1 месяц<br>
|
||
<strong>Итого на семью:</strong> ~300 000 - 450 000 ₸ (5 дней) — <strong>познавательно для детей!</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="direction-card">
|
||
<h3>🇷🇺 Россия, Сочи/Адлер</h3>
|
||
<span class="badge">Море + горы</span>
|
||
<span class="badge">Инфраструктура</span>
|
||
<div class="price">от 650 000 ₸ / 7 ночей</div>
|
||
<div class="details">
|
||
<strong>Перелёт:</strong> Алматы → Сочи (4.5 часа, бывают прямые)<br>
|
||
<strong>Проживание:</strong> Отель/гостевой дом<br>
|
||
<strong>Питание:</strong> Самостоятельно или полупансион<br>
|
||
<strong>Дети:</strong> до 5 лет скидки, парки развлечений (Сочи Парк, океанариум)<br>
|
||
<strong>Когда:</strong> май-июнь, сентябрь (летом дорого и много людей)<br>
|
||
<strong>Бронировать:</strong> за 2-3 месяца<br>
|
||
<strong>Итого на семью:</strong> ~650 000 - 900 000 ₸ (7 ночей)
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section id="timeline" class="section">
|
||
<div class="container">
|
||
<h2>📅 Расписание подготовки (на 2 года)</h2>
|
||
<div class="card">
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<h4>Сейчас (месяц 1)</h4>
|
||
<p>Открыть накопительный счёт, настроить автопополнение, выбрать 2-3 приоритетных направления</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Месяц 2-6</h4>
|
||
<p>Копить без снятия, отслеживать акции авиакомпаний и туроператоров, подписаться на рассылки</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Месяц 7-12</h4>
|
||
<p>Сравнить цены на выбранные даты, проверить сроки действия паспортов/свидетельств о рождении</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>За 4 месяца до поездки</h4>
|
||
<p>Забронировать тур/билеты и отель (раннее бронирование даёт скидку до 30%)</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>За 2 месяца</h4>
|
||
<p>Оформить страховку, проверить документы, начать собирать аптечку для детей</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>За 1 месяц</h4>
|
||
<p>Купить детское снаряжение (коляска, круги, игрушки), обновить гардероб</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>За 1 неделя</h4>
|
||
<p>Распечатать брони, проверить погоду, скачать офлайн-карты, подготовить развлечения в дорогу</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="tips" class="section" style="background:var(--gray-100)">
|
||
<div class="container">
|
||
<h2>💡 Как сэкономить до 40%</h2>
|
||
|
||
<div class="tip-box">
|
||
<h4>🎁 Скидки детям</h4>
|
||
<p>До 2 лет: бесплатно перелёт (без места), проживание, питание. 2-6 лет: 30-50% скидки. 6-12 лет: 20-30%. Всегда уточняйте детские тарифы!</p>
|
||
</div>
|
||
|
||
<div class="tip-box">
|
||
<h4>📅 Сезонность</h4>
|
||
<p>Май-июнь и сентябрь дешевле июля-августа на 20-30%, при этом погода комфортнее для малышей. Избегайте праздников и школьных каникул.</p>
|
||
</div>
|
||
|
||
<div class="tip-box">
|
||
<h4>🏨 Семейные номера</h4>
|
||
<p>Family room или 2 смежных номера дешевле, чем 3 отдельных. Всё включено выгоднее для семьи из 7 человек — не тратитесь на еду отдельно.</p>
|
||
</div>
|
||
|
||
<div class="tip-box">
|
||
<h4>✈️ Авиабилеты</h4>
|
||
<p>Покупайте за 3-4 месяца, используйте кэшбэк-карты, подписывайтесь на распродажи. Гибкие даты ±3 дня экономят до 25%.</p>
|
||
</div>
|
||
|
||
<div class="tip-box">
|
||
<h4>💳 Кэшбэки и карты</h4>
|
||
<p>Оформите карту с кэшбэком на путешествия (5-10%). Некоторые банки дают скидки на бронирование отелей и авиабилетов.</p>
|
||
</div>
|
||
|
||
<div class="tip-box">
|
||
<h4>🍽 Питание с малышами</h4>
|
||
<p>Для ребёнка 2 года берите апартаменты с кухней или отель с детским меню. Экономия на питании до 50% по сравнению с ресторанами.</p>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section id="checklist" class="section">
|
||
<div class="container">
|
||
<h2>✅ Чек-лист подготовки</h2>
|
||
<div class="card">
|
||
<ul class="checklist">
|
||
<li><input type="checkbox"> Открыть накопительный счёт с процентом</li>
|
||
<li><input type="checkbox"> Настроить автопополнение каждый месяц (30 000 ₸)</li>
|
||
<li><input type="checkbox"> Оформить карту с кэшбэком на путешествия</li>
|
||
<li><input type="checkbox"> Повесить фото цели на холодильник</li>
|
||
<li><input type="checkbox"> Выбрать 2-3 направления на год</li>
|
||
<li><input type="checkbox"> Проверить паспорта/свидетельства всех детей</li>
|
||
<li><input type="checkbox"> Подписаться на рассылки туроператоров</li>
|
||
<li><input type="checkbox"> Сравнить цены на разные даты</li>
|
||
<li><input type="checkbox"> Забронировать за 3-4 месяца</li>
|
||
<li><input type="checkbox"> Оформить страховку на всю семью</li>
|
||
<li><input type="checkbox"> Собрать аптечку (жаропонижающее, пластыри, средства от солнца)</li>
|
||
<li><input type="checkbox"> Купить/взять коляску, круги, игрушки</li>
|
||
<li><input type="checkbox"> Распечатать все брони и документы</li>
|
||
<li><input type="checkbox"> Скачать офлайн-карты и развлечения в дорогу</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" style="background:var(--ink);color:var(--white)">
|
||
<div class="container" style="text-align:center">
|
||
<h2>🚀 Начните копить прямо сейчас!</h2>
|
||
<p style="font-size:20px;color:#9aa3b2;margin-bottom:32px">
|
||
Через 2 года вы сможете поехать на отдых всей семьёй, не влезая в долги.
|
||
</p>
|
||
<a class="btn" href="#calculator">Рассчитать сумму</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" style="background:var(--cyan-50)">
|
||
<div class="container">
|
||
<h2>📊 Ваш личный план (Алматы, 30 000 ₸/месяц)</h2>
|
||
<div class="card">
|
||
<h3>💰 Ваши накопления за 2 года:</h3>
|
||
<div class="result-box" style="display:block">
|
||
<div class="result-value">770 000 ₸</div>
|
||
<p style="margin-top:12px;color:var(--gray-500)">
|
||
50 000 ₸ (уже есть) + 30 000 ₸ × 24 месяца = 720 000 ₸<br>
|
||
<strong>Итого: 770 000 ₸</strong>
|
||
</p>
|
||
</div>
|
||
|
||
<h3 style="margin-top:32px">🔄 Отдых НЕСКОЛЬКО РАЗ В ГОД</h3>
|
||
<p style="color:var(--gray-500);margin-bottom:20px">Для семьи из 7 человек лучше ездить 2-3 раза в год на короткие поездки — дешевле и детям не скучно</p>
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:20px">
|
||
<div class="direction-card" style="margin:0">
|
||
<h3>📅 Вариант 1: 2 поездки в год</h3>
|
||
<div class="price">Бюджет: 600 000 ₸/год</div>
|
||
<ul style="margin-top:12px;line-height:1.8">
|
||
<li><strong>Лето (июль):</strong> Боровое — 250 000 ₸ (7 дней)</li>
|
||
<li><strong>Осень (сентябрь):</strong> Египет — 350 000 ₸ (5 дней)</li>
|
||
<li><strong>Нужно откладывать:</strong> 25 000 ₸/месяц</li>
|
||
</ul>
|
||
<p style="color:var(--green);font-weight:700;margin-top:12px">✅ Вам подходит! Останется 5 000 ₸/мес на карманные</p>
|
||
</div>
|
||
|
||
<div class="direction-card" style="margin:0">
|
||
<h3>📅 Вариант 2: 3 поездки в год</h3>
|
||
<div class="price">Бюджет: 850 000 ₸/год</div>
|
||
<ul style="margin-top:12px;line-height:1.8">
|
||
<li><strong>Весна (май):</strong> Актау — 300 000 ₸ (5 дней)</li>
|
||
<li><strong>Лето (июль):</strong> Боровое — 250 000 ₸ (7 дней)</li>
|
||
<li><strong>Осень (октябрь):</strong> Египет — 300 000 ₸ (5 дней)</li>
|
||
<li><strong>Нужно откладывать:</strong> 35 000 ₸/месяц</li>
|
||
</ul>
|
||
<p style="color:var(--orange);font-weight:700;margin-top:12px">⚠️ Нужно +5 000 ₸ к вашему бюджету</p>
|
||
</div>
|
||
|
||
<div class="direction-card" style="margin:0">
|
||
<h3>📅 Вариант 3: 4 поездки в год</h3>
|
||
<div class="price">Бюджет: 1 100 000 ₸/год</div>
|
||
<ul style="margin-top:12px;line-height:1.8">
|
||
<li><strong>Зима (январь):</strong> Щучинск (лыжи) — 200 000 ₸</li>
|
||
<li><strong>Весна (апрель):</strong> Узбекистан — 250 000 ₸</li>
|
||
<li><strong>Лето (июль):</strong> Актау — 350 000 ₸</li>
|
||
<li><strong>Осень (сентябрь):</strong> Египет — 300 000 ₸</li>
|
||
<li><strong>Нужно откладывать:</strong> 45 000 ₸/месяц</li>
|
||
</ul>
|
||
<p style="color:var(--orange);font-weight:700;margin-top:12px">⚠️ Нужно +15 000 ₸ к вашему бюджету</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="margin-top:32px">🎯 Что можете себе позволить:</h3>
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:20px">
|
||
<div class="direction-card" style="margin:0;border-color:var(--green)">
|
||
<h3>🇪🇬 Египет</h3>
|
||
<div class="price">550 000 - 750 000 ₸</div>
|
||
<p style="color:var(--green);font-weight:700">✅ Хватит с запасом!</p>
|
||
<p style="color:var(--gray-500);font-size:15px">Останется 20 000 - 220 000 ₸ на сувениры и экскурсии</p>
|
||
</div>
|
||
<div class="direction-card" style="margin:0;border-color:var(--green)">
|
||
<h3>🇹🇷 Турция</h3>
|
||
<div class="price">750 000 - 950 000 ₸</div>
|
||
<p style="color:var(--orange);font-weight:700">⚠️ Почти хватает!</p>
|
||
<p style="color:var(--gray-500);font-size:15px">Не хватает 0-180 000 ₸ — можно подкопить ещё 2-3 месяца</p>
|
||
</div>
|
||
<div class="direction-card" style="margin:0;border-color:var(--green)">
|
||
<h3>🇰🇿 Актау/Боровое</h3>
|
||
<div class="price">200 000 - 500 000 ₸</div>
|
||
<p style="color:var(--green);font-weight:700">✅ Хватит на 2 поездки!</p>
|
||
<p style="color:var(--gray-500);font-size:15px">Можно съездить летом в Боровое и в августе в Актау</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="margin-top:32px">📅 Ваш календарь (2 года):</h3>
|
||
<div class="timeline" style="margin-top:20px">
|
||
<div class="timeline-item">
|
||
<h4>Январь 2026 — Март 2026</h4>
|
||
<p>Старт: откладывайте 30 000 ₸ каждый месяц. К марту будет ~140 000 ₸</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Апрель 2026 — Декабрь 2026</h4>
|
||
<p>Копите дальше. К декабрю ~410 000 ₸. Смотрите акции на лето 2027</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Январь 2027 — Февраль 2027</h4>
|
||
<p><strong>Бронируйте Турцию/Египет на лето 2027!</strong> Раннее бронирование даст скидку 20-30%</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Март 2027 — Май 2027</h4>
|
||
<p>К маю ~650 000 ₸. Оформляйте страховку, готовьте документы</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Июнь 2027 — Июль 2027</h4>
|
||
<p><strong>ПОЕЗДКА!</strong> К отъезду соберётся ~740 000 ₸. Езжайте в Египет или Турцию</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Август 2027 — Декабрь 2027</h4>
|
||
<p>Продолжайте копить 30 000 ₸/мес. К декабрю ~920 000 ₸ — на вторую поездку!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tip-box" style="margin-top:24px">
|
||
<h4>🎁 Совет для вашей семьи</h4>
|
||
<p>С детьми 15, 12, 10 лет — берите 2 смежных номера или family room. Малыш 2 года бесплатно везде. Ребёнку 5 лет — скидка 30-50%. <strong>Ваша экономия на детских скидках: ~150 000 - 200 000 ₸!</strong></p>
|
||
</div>
|
||
|
||
<h3 style="margin-top:32px">🏦 ТЕХНИКА НАКОПЛЕНИЯ: 5 шагов</h3>
|
||
<div class="timeline" style="margin-top:20px">
|
||
<div class="timeline-item">
|
||
<h4>Шаг 1: Отдельный счёт</h4>
|
||
<p>Откройте накопительный счёт в банке (Kaspi, Halyk, Freedom). Назовите его «Отдых». Не трогайте эти деньги!</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Шаг 2: Автопополнение</h4>
|
||
<p>Настройте автоперевод в день зарплаты: 30 000 ₸ сразу на счёт «Отдых». Сначала заплати себе, потом трать!</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Шаг 3: Кэшбэк на путешествия</h4>
|
||
<p>Оформите карту с кэшбэком 5-10% на авиабилеты и отели. За год вернётся 30 000 - 50 000 ₸!</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Шаг 4: Дополнительные источники</h4>
|
||
<p>Премии, подарки на дни рождения, продажа ненужных вещей — всё на счёт «Отдых». Даже 10 000 ₸ дополнительно ускорят цель на 2-3 месяца!</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<h4>Шаг 5: Визуализация</h4>
|
||
<p>Повесьте на холодильник фото места, куда едете. Дети видят цель = меньше просят деньги на мелочи. Экономия 5 000 - 10 000 ₸/месяц!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tip-box" style="margin-top:24px">
|
||
<h4>💡 Лайфхак: Конверты для детей</h4>
|
||
<p>Старшим (15, 12, 10 лет) выдавайте карманные деньги в конвертах на месяц. Учатся планировать + вы контролируете расходы. Экономия до 15 000 ₸/месяц!</p>
|
||
</div>
|
||
|
||
<div class="tip-box" style="margin-top:24px">
|
||
<h4>📱 Приложения для накоплений</h4>
|
||
<p>Kaspi.kz — «Копилка» (округляет покупки, копит сдачу). Halyk Homebank — «Копилка мечты». Freedom Finance — автосбережения. За год набегает 50 000 - 100 000 ₸ из «невидимых» денег!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
function calculate() {
|
||
var monthly = parseFloat(document.getElementById('monthly').value) || 0;
|
||
var months = parseInt(document.getElementById('months').value);
|
||
var initial = parseFloat(document.getElementById('initial').value) || 0;
|
||
|
||
var total = initial + (monthly * months);
|
||
var years = months / 12;
|
||
|
||
document.getElementById('total').textContent = total.toLocaleString('ru-RU') + ' ₸';
|
||
document.getElementById('breakdown').textContent =
|
||
'Из них: первые накопления ' + initial.toLocaleString('ru-RU') + ' ₸ + ' +
|
||
monthly.toLocaleString('ru-RU') + ' ₸ × ' + months + ' мес. = ' +
|
||
(monthly * months).toLocaleString('ru-RU') + ' ₸ (' + years + ' года)';
|
||
|
||
document.getElementById('result').style.display = 'block';
|
||
}
|
||
|
||
function showDailyTable() {
|
||
var monthly = parseFloat(document.getElementById('monthly').value) || 50000;
|
||
var months = parseInt(document.getElementById('months').value);
|
||
var initial = parseFloat(document.getElementById('initial').value) || 50000;
|
||
|
||
var daily = Math.round(monthly / 30);
|
||
var tableHtml = '<div style="overflow-x:auto"><table style="width:100%;border-collapse:collapse;font-size:15px">';
|
||
tableHtml += '<tr style="background:var(--cyan-50)"><th style="padding:12px;border:1px solid #ddd">Месяц</th><th style="padding:12px;border:1px solid #ddd">Ежедневно</th><th style="padding:12px;border:1px solid #ddd">С зарплаты</th><th style="padding:12px;border:1px solid #ddd">Всего в месяц</th><th style="padding:12px;border:1px solid #ddd">Накоплено</th></tr>';
|
||
|
||
var cumulative = initial;
|
||
for (var i = 1; i <= months; i++) {
|
||
var fromDaily = daily * 30;
|
||
var fromSalary = 50000;
|
||
var monthTotal = fromDaily + fromSalary;
|
||
cumulative += monthTotal;
|
||
|
||
var rowColor = i % 2 === 0 ? '#fff' : '#f9f9f9';
|
||
tableHtml += '<tr style="background:' + rowColor + '">';
|
||
tableHtml += '<td style="padding:12px;border:1px solid #ddd;font-weight:700">' + i + ' мес.</td>';
|
||
tableHtml += '<td style="padding:12px;border:1px solid #ddd;color:var(--green)">' + daily.toLocaleString('ru-RU') + ' ₸</td>';
|
||
tableHtml += '<td style="padding:12px;border:1px solid #ddd;color:var(--cyan)">50 000 ₸</td>';
|
||
tableHtml += '<td style="padding:12px;border:1px solid #ddd;font-weight:700">' + monthTotal.toLocaleString('ru-RU') + ' ₸</td>';
|
||
tableHtml += '<td style="padding:12px;border:1px solid #ddd;font-weight:700;color:var(--ink)">' + cumulative.toLocaleString('ru-RU') + ' ₸</td>';
|
||
tableHtml += '</tr>';
|
||
}
|
||
|
||
tableHtml += '</table></div>';
|
||
tableHtml += '<div style="margin-top:20px;padding:16px;background:var(--green);color:#fff;border-radius:8px">';
|
||
tableHtml += '<strong>💰 Итого за ' + months + ' мес.:</strong> ' + cumulative.toLocaleString('ru-RU') + ' ₸<br>';
|
||
tableHtml += '<small>Ежедневно: ' + daily.toLocaleString('ru-RU') + ' ₸ + с зарплаты: 50 000 ₸</small></div>';
|
||
|
||
document.getElementById('tableContent').innerHTML = tableHtml;
|
||
document.getElementById('dailyTable').style.display = 'block';
|
||
document.getElementById('dailyTable').scrollIntoView({behavior:'smooth'});
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|