sozday-sayt-na-temu-futbola/index.html

248 lines
16 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru" data-theme="auto">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Бумеранг на футбол — детский футбольный клуб</title>
<link rel="icon" href="design-system/brand/kt-ai-logo.png">
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
<link rel="stylesheet" href="design-system/kt-ai-components.css">
<link rel="stylesheet" href="design-system/kt-ai-page.css">
<style>
a.kt-ai-btn { text-decoration: none; }
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.star-avatar{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:0 auto 14px;border-radius:var(--kt-ai-radius-full);background:var(--kt-ai-primary);color:var(--kt-ai-bg)}
.star-avatar .kt-icon{width:36px;height:36px}
.schedule-table{width:100%;border-collapse:collapse;margin-top:var(--kt-ai-space-9);border-radius:var(--kt-ai-radius-lg);overflow:hidden}
.schedule-table th,.schedule-table td{padding:12px 14px;text-align:left;font-size:var(--kt-ai-text-sm);border-bottom:1px solid var(--kt-ai-divider)}
.schedule-table thead th{font-size:var(--kt-ai-text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--kt-ai-fg-muted)}
.schedule-table tbody tr:nth-child(even){background:var(--kt-ai-bg-soft)}
.schedule-table .time{font-weight:var(--kt-ai-weight-semibold);white-space:nowrap}
</style>
</head>
<body>
<script src="design-system/icons/kt-ai-icons.js"></script>
<header class="kt-ai-pagehead">
<div class="kt-ai-wrap kt-ai-pagehead-in">
<strong>Бумеранг на футбол</strong>
<span class="kt-ai-spacer"></span>
<a class="kt-ai-btn" data-variant="ghost" href="#stars">Звёзды</a>
<a class="kt-ai-btn" data-variant="primary" href="#start">Начать играть</a>
</div>
</header>
<section class="kt-ai-hero" data-align="center">
<div class="kt-ai-wrap">
<h1>Играй в футбол — растите чемпионом!</h1>
<p class="kt-ai-hero-sub">Детский футбольный проект: мультяшные звёзды, которые научат, как быть сильным, быстрым и дружным. Питание, режим дня и тренировки — всё, что нужно юному футболисту.</p>
<div class="kt-ai-hero-actions">
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#start">Начать играть</a>
<a class="kt-ai-btn" data-size="lg" href="#stars">Познакомиться со звёздами</a>
</div>
</div>
</section>
<section id="stars" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap">
<div class="kt-ai-section-head">
<h2>Наша звёздная команда</h2>
<p>Мультяшные герои, вдохновлённые великими футболистами мира. Каждый — с суперспособностью!</p>
</div>
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
<article class="kt-ai-tile reveal">
<div class="star-avatar"><svg class="kt-icon" aria-hidden="true"><use href="#rocket"></use></svg></div>
<h3>Лео-Зверь</h3>
<p>Хитрый полузащитник из джунглей, как в духе Неймара. Умеет делать «шаулу» — финт, после которого соперник попадает в переплёт. Говорит мячом, как на родном языке.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="star-avatar"><svg class="kt-icon" aria-hidden="true"><use href="#sparkles"></use></svg></div>
<h3>Месси-Воробушек</h3>
<p>Небольшой, но невероятно быстрый. Маленький защитник из Альпийских гор, как Криштиану Роналду, наделённый суперскоростью и меткостью удара. Никогда не отнимает мяч — только забивает.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="star-avatar"><svg class="kt-icon" aria-hidden="true"><use href="#check-circle"></use></svg></div>
<h3>Ким-Пандор</h3>
<p>Самый сильный вратарь. Панда с Севера, как Левандовски в воротах: вынослив, как марафонец, и никогда не пропускает — ни один мяч его не пройдёт!</p>
</article>
<article class="kt-ai-tile reveal">
<div class="star-avatar"><svg class="kt-icon" aria-hidden="true"><use href="#check"></use></svg></div>
<h3>Беккамбурро</h3>
<p>Рассудительный капитан из австралийского прерии. Как Бекхэм, он посылает мяч с любой дистанции и никогда не злится — аргументирует спокойно, как хороший капитан.</p>
</article>
</div>
</div>
</section>
<section id="benefits" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap">
<div class="kt-ai-section-head">
<h2>Чем полезен футбол для детей</h2>
<p>Футбол — это не только голы. Это тренировки для всего тела, характера и характера.</p>
</div>
<div class="kt-ai-grid" data-cols="3" style="margin-top:var(--kt-ai-space-9)">
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#arrowRight"></use></svg></div>
<h3>Выносливость и сила</h3>
<p>Многие движения: бег, спринт, прыжок. Укрепляется сердце, мышцы ног и пресса.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#compare"></use></svg></div>
<h3>Координация</h3>
<p>Управление мяч развивает баланс, ловкость и скорость реакции.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#users"></use></svg></div>
<h3>Командный дух</h3>
<p>Ребёнок учится слушать, работать в команде и помогать товарищам.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#trophy"></use></svg></div>
<h3>Уверенность в себе</h3>
<p>Первая победа, первый гол — и ребёнок понимает: я могу!</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#sparkles"></use></svg></div>
<h3>Стратегическое мышление</h3>
<p>Игра быстрее, чем школьный дедлайн: нужно принимать решения за секунды.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#check-circle"></use></svg></div>
<h3>Здоровое сердце</h3>
<p>Регулярные пробежки укрепляют сердечно-сосудистую систему с раннего возраста.</p>
</article>
</div>
</div>
</section>
<section id="nutrition" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap">
<div class="kt-ai-section-head">
<h2>Как питаться, чтобы быть чемпионом</h2>
<p>Топ-чемпионы питаются с умом: правильная еда даёт энергию для тренировок и игр.</p>
</div>
<div class="kt-ai-grid" data-cols="3" style="margin-top:var(--kt-ai-space-9)">
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#sun"></use></svg></div>
<h3>Завтрак — заряд на день</h3>
<p>Овощной или фруктовый салат, яйца, каши (овсянка, гречка), молоко. Бег — это энергия, а энергия — это еда.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#calendar"></use></svg></div>
<h3>Перекус перед тренировкой</h3>
<p>За 1,5–2 часа до тренировки: банан, yogurt или тост с сыром. Не натощак и не на полный желудок.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#moon"></use></svg></div>
<h3>Ужин — восстановление</h3>
<p>Кто есть белок (курица, рыба, творог) и овощи. Белок помогает мышцам расти после нагрузки.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#alert"></use></svg></div>
<h3>Чего избегать</h3>
<p>Большие количества сладкой газировки и чипсов — лишняя энергия без пользы. Лучше выбрать фрукты, орехи или yogurt.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#check-circle"></use></svg></div>
<h3>Вода — главный друг</h3>
<p>1,5–2 литра воды в день. На тренировке — глоток каждые 15–20 минут. Обезвоживание — враг скорости.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#check"></use></svg></div>
<h3>Правило «тарелки»</h3>
<p>Половина тарелки — овощи и фрукты, четверть — белок, четверть — гарнир (рис, гречка, картофель).</p>
</article>
</div>
</div>
</section>
<section id="schedule" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap">
<div class="kt-ai-section-head">
<h2>Режим дня юного футболиста</h2>
<p>Советы: чтобы тренировки шли хорошо, нужен правильный режим — сон, еда, отдых и спорт.</p>
</div>
<table class="schedule-table">
<thead>
<tr><th>Время</th><th>Что делать</th><th>Зачем</th></tr>
</thead>
<tbody>
<tr><td class="time">7:00</td><td>Подъём, умывание, зарядка</td><td>Разбудить тело и голову</td></tr>
<tr><td class="time">7:30</td><td>Завтрак</td><td>Энергия на день</td></tr>
<tr><td class="time">8:30–14:00</td><td>Школа / уроки</td><td>Знания тоже часть победы</td></tr>
<tr><td class="time">15:00</td><td>Перекус</td><td>Энергия перед тренировкой</td></tr>
<tr><td class="time">16:00–17:30</td><td>Футбольная тренировка</td><td>Сила, скорость, командная игра</td></tr>
<tr><td class="time">18:00</td><td>Ужин</td><td>Восстановление мышц</td></tr>
<tr><td class="time">19:00–21:00</td><td>Уроки, книги, творчество</td><td>Отдых для мозга</td></tr>
<tr><td class="time">21:30</td><td>Уложи спать (9–10 часов сна)</td><td>В сон мышцы растут и сила накапливается</td></tr>
</tbody>
</table>
</div>
</section>
<section id="training" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap">
<div class="kt-ai-section-head">
<h2>Как тренироваться, чтобы достичь успеха</h2>
<p>Простой план на неделю для новичка. Главное — регулярность, а не количество.</p>
</div>
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#check"></use></svg></div>
<h3>Разминка — всегда</h3>
<p>10 минут: бег на месте, приседания, вращения руками и ногами. Без разминки — риска получить травму больше.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#arrowRight"></use></svg></div>
<h3>Мяч каждый день</h3>
<p>15–20 минут: вести мяч, пробивать в стену, броски сверху и снизу. Чем чаще мяч — тем лучше контроль.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#clock"></use></svg></div>
<h3>Спринты и прыжки</h3>
<p>3 раза в неделю: 8 спринтов по 20 метров, прыжки на скакалке 2 минуты. Скорость — это победа.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#sync"></use></svg></div>
<h3>Отдых важнее</h3>
<p>Между тренировками — 1 день отдыха. Мышцы растут в отдыхе, а не в работе. И никогда не тренируйся устанным.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#history"></use></svg></div>
<h3>Веди свой дневник</h3>
<p>Записывай: сколько минут бегал, сколько голов забил, какие финты выучил. Через месяц увидишь прогресс.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#users"></use></svg></div>
<h3>Играй с друзьями</h3>
<p>Мини-футбол 3–4 раза в неделю на улице или в спортзале. Это лучший способ прокачать всё сразу.</p>
</article>
</div>
</div>
</section>
<section id="start" class="kt-ai-cta">
<div class="kt-ai-wrap">
<h2>Готов стать чемпионом?</h2>
<p>Самый важный шаг — первый удар по мячу. Возьми мяч, найди друзей и начни сегодня!</p>
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#stars">Ещё раз посмотреть наших звёзд</a>
</div>
</section>
<footer class="kt-ai-wrap kt-ai-pagefoot">
<span>© 2026 Бумеранг на футбол — детский футбольный проект</span>
<span class="kt-ai-spacer"></span>
<span>Играй с умом, играй с друзьями</span>
</footer>
<script>
var io=new IntersectionObserver(function(entries){
entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
},{threshold:.15});
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
</script>
</body>
</html>