490 lines
41 KiB
HTML
490 lines
41 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Семейные игры — каталог для всей семьи</title>
|
||
<style>
|
||
:root{
|
||
--bg:#FFF9F0; --ink:#2A2530; --card:#FFFFFF; --muted:#7A7382; --line:#EEE6D8;
|
||
--accent:#FF6B5B; --accent-soft:#FFE7E2; --accent2:#2EC4B6; --accent2-soft:#DDF6F3; --gold:#FFB627;
|
||
--cat-outdoor:#5BBF8A; --cat-board:#8B6FD0; --cat-dev:#FF9149; --cat-pc:#4A90E2; --cat-other:#E85A8C; --cat-big:#F2A900;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
html{scroll-behavior:smooth}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg)}
|
||
img{max-width:100%}
|
||
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
|
||
|
||
/* Header */
|
||
header{position:sticky;top:0;z-index:50;background:rgba(255,249,240,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
|
||
.header-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;max-width:1140px;margin:0 auto}
|
||
.logo{font-weight:800;font-size:20px;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
|
||
.logo .dice{font-size:24px}
|
||
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:12px 20px;border-radius:10px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-size:15px;font-family:inherit}
|
||
.btn:hover{background:#ff5446}
|
||
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
|
||
.btn.ghost:hover{border-color:var(--ink)}
|
||
|
||
/* Hero */
|
||
.hero{background:linear-gradient(160deg,var(--accent-soft) 0%,var(--bg) 70%);padding:64px 0 56px}
|
||
.hero h1{font-size:48px;font-weight:800;line-height:1.08;margin-bottom:16px;max-width:760px}
|
||
.hero p.lead{font-size:19px;color:var(--muted);max-width:620px;margin-bottom:24px}
|
||
.fam{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
|
||
.badge{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:6px}
|
||
.badge b{color:var(--accent)}
|
||
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
|
||
|
||
/* Filters */
|
||
.filters{padding:48px 0 8px}
|
||
.filters h2{font-size:30px;font-weight:800;margin-bottom:6px}
|
||
.filters .sub{color:var(--muted);margin-bottom:22px}
|
||
.row{margin-bottom:18px}
|
||
.row .lbl{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
|
||
.chips{display:flex;flex-wrap:wrap;gap:10px}
|
||
.chip{padding:9px 15px;border-radius:999px;border:1.5px solid var(--line);background:#fff;cursor:pointer;font-weight:600;font-size:14px;display:inline-flex;gap:7px;align-items:center;font-family:inherit;color:var(--ink);transition:.15s}
|
||
.chip:hover{border-color:var(--ink)}
|
||
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
|
||
.chip .dot{width:11px;height:11px;border-radius:50%;flex:none}
|
||
.search-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px}
|
||
.search{flex:1;min-width:220px;padding:13px 16px;border-radius:10px;border:1.5px solid var(--line);font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
|
||
.search:focus{outline:none;border-color:var(--accent)}
|
||
.countbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:28px 0 18px}
|
||
.count{font-weight:700;font-size:16px}
|
||
.count b{color:var(--accent)}
|
||
|
||
/* Cards grid */
|
||
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;padding-bottom:16px}
|
||
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:.18s}
|
||
.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(42,37,48,.10);border-color:#e0d6c2}
|
||
.card-top{padding:18px 18px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}
|
||
.card-top .emoji{font-size:34px;line-height:1}
|
||
.cat-tag{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;color:#fff;white-space:nowrap}
|
||
.card-body{padding:14px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
|
||
.card-body h3{font-size:19px;font-weight:800;line-height:1.25}
|
||
.meta{display:flex;flex-wrap:wrap;gap:8px}
|
||
.meta span{font-size:13px;font-weight:600;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:3px 9px;color:var(--muted)}
|
||
.how{font-size:15px;color:var(--ink);line-height:1.55}
|
||
.dev{font-size:14px;color:var(--accent2);font-weight:600;background:var(--accent2-soft);border-radius:10px;padding:8px 12px;margin-top:auto}
|
||
.empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted)}
|
||
.empty .big{font-size:46px;margin-bottom:10px}
|
||
|
||
/* By season section */
|
||
.byseason{padding:56px 0}
|
||
.byseason h2{font-size:32px;font-weight:800;margin-bottom:6px}
|
||
.byseason .sub{color:var(--muted);margin-bottom:10px}
|
||
.season-head{display:flex;align-items:center;gap:12px;margin:42px 0 18px;font-size:26px;font-weight:800}
|
||
.season-head:first-child{margin-top:18px}
|
||
.season-head .ic{font-size:30px}
|
||
.season-head .cnt{font-size:13px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-left:2px}
|
||
|
||
/* Riddles section */
|
||
.riddles{padding:56px 0;background:linear-gradient(160deg,var(--accent2-soft),var(--bg));border-top:1px solid var(--line)}
|
||
.riddles h2{font-size:32px;font-weight:800;margin-bottom:6px}
|
||
.riddles .sub{color:var(--muted);margin-bottom:10px}
|
||
.grp-h{font-size:22px;font-weight:800;margin:34px 0 16px;display:flex;align-items:center;gap:10px}
|
||
.grp-h .tag{font-size:13px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 10px}
|
||
.r-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:.15s;user-select:none}
|
||
.r-card:hover{border-color:#e0d6c2;transform:translateY(-2px)}
|
||
.r-card .q{font-size:17px;line-height:1.5;display:flex;gap:10px}
|
||
.r-card .q .em{font-size:26px;line-height:1;flex:none}
|
||
.r-card .ans{display:none;font-weight:800;color:var(--accent);background:var(--accent-soft);border-radius:10px;padding:9px 12px}
|
||
.r-card.open .ans{display:block}
|
||
.r-card .ans-lbl{font-size:11px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;opacity:.8}
|
||
.r-card .hint{font-size:13px;color:var(--muted)}
|
||
.r-card.open .hint{display:none}
|
||
|
||
/* Big company section */
|
||
.bigco{background:linear-gradient(160deg,var(--accent2-soft),var(--bg));margin-top:24px;padding:64px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
|
||
.bigco h2{font-size:34px;font-weight:800;margin-bottom:8px}
|
||
.bigco .sub{color:var(--muted);max-width:680px;margin-bottom:8px;font-size:18px}
|
||
.bigco .note{color:var(--accent2);font-weight:700;margin-bottom:28px}
|
||
.bigco .card .dev{background:var(--accent-soft);color:var(--accent)}
|
||
|
||
footer{padding:40px 0 60px;text-align:center;color:var(--muted);font-size:14px}
|
||
footer .heart{color:var(--accent)}
|
||
|
||
/* Modal */
|
||
.modal{position:fixed;inset:0;z-index:100;background:rgba(42,37,48,.55);display:flex;align-items:center;justify-content:center;padding:20px}
|
||
.modal.hidden{display:none}
|
||
.modal-card{background:#fff;border-radius:22px;max-width:440px;width:100%;padding:28px;box-shadow:0 24px 60px rgba(0,0,0,.3);text-align:center}
|
||
.modal-card .emoji{font-size:56px;margin-bottom:8px}
|
||
.modal-card h3{font-size:24px;font-weight:800;margin-bottom:14px}
|
||
.modal-card .meta{justify-content:center;margin-bottom:16px}
|
||
.modal-card .how{text-align:left;background:var(--bg);border-radius:14px;padding:14px 16px;margin-bottom:8px}
|
||
.modal-card .dev{text-align:left;margin-bottom:22px}
|
||
.modal-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
|
||
|
||
@media (max-width:640px){
|
||
.hero{padding:44px 0 40px}
|
||
.hero h1{font-size:33px}
|
||
.hero p.lead{font-size:17px}
|
||
.filters h2{font-size:25px}
|
||
.bigco h2{font-size:27px}
|
||
.bigco{padding:48px 0}
|
||
.header-in{padding:12px 20px}
|
||
.wrap{padding:0 20px}
|
||
.chips{gap:8px}
|
||
.chip{padding:8px 12px;font-size:13px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="header-in">
|
||
<a class="logo" href="#"><span class="dice">🎲</span> Семейные игры</a>
|
||
<button class="btn" id="surprise">🎲 Сюрприз!</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<div class="wrap">
|
||
<h1>Во что поиграем сегодня всей семьёй?</h1>
|
||
<p class="lead">Каталог игр для уютных вечеров и активных выходных. Подобрано так, чтобы было интересно и трёхлетке, и родителям, и взрослому ребёнку — а кошки тоже участвуют.</p>
|
||
<div class="fam">
|
||
<span class="badge">👨 43 года</span>
|
||
<span class="badge">👩 44 года</span>
|
||
<span class="badge">🧑 22 года</span>
|
||
<span class="badge">👶 3 года</span>
|
||
<span class="badge">🐱🐱 2 кошки</span>
|
||
</div>
|
||
<div class="hero-cta">
|
||
<a class="btn" href="#catalog">Каталог</a>
|
||
<a class="btn ghost" href="#seasons">По сезонам</a>
|
||
<a class="btn ghost" href="#riddles">Загадки</a>
|
||
<a class="btn ghost" href="#big">Праздники</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="filters" id="catalog">
|
||
<div class="wrap">
|
||
<h2>Что поиграем?</h2>
|
||
<p class="sub">Выбери категорию и сезон — или нажми «Сюрприз», и мы выберем игру за вас.</p>
|
||
|
||
<div class="row">
|
||
<div class="lbl">Категория</div>
|
||
<div class="chips" id="catChips"></div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="lbl">Время года</div>
|
||
<div class="chips" id="seasonChips"></div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="lbl">Возраст</div>
|
||
<div class="chips" id="ageChips"></div>
|
||
</div>
|
||
|
||
<div class="search-row">
|
||
<input class="search" id="search" type="search" placeholder="🔍 Найти игру по названию…" autocomplete="off">
|
||
<button class="btn ghost" id="reset">Сбросить</button>
|
||
</div>
|
||
|
||
<div class="countbar">
|
||
<div class="count">🎉 Найдено игр: <b id="count">0</b></div>
|
||
</div>
|
||
|
||
<div class="grid" id="grid"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="byseason" id="seasons">
|
||
<div class="wrap">
|
||
<h2>📅 Игры по сезонам</h2>
|
||
<p class="sub">Что играть весной, летом, осенью и зимой — все игры собраны по временам года.</p>
|
||
<div id="bySeason"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="riddles" id="riddles">
|
||
<div class="wrap">
|
||
<h2>🤔 Шарады и загадки</h2>
|
||
<p class="sub">Угадывайте всей семьёй. Нажми на карточку — откроется ответ.</p>
|
||
|
||
<div class="grp-h">🔍 Загадки <span class="tag">для всех возрастов</span></div>
|
||
<div class="grid" id="riddleGrid"></div>
|
||
|
||
<div class="grp-h">🔤 Шарады <span class="tag">сложи слово из частей</span></div>
|
||
<div class="grid" id="charadeGrid"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="bigco" id="big">
|
||
<div class="wrap">
|
||
<h2>🎂 Для большой компании</h2>
|
||
<p class="sub">Когда пришли гости, праздник или день рождения — игры, в которые весело играть большой толпой любого возраста.</p>
|
||
<p class="note">👨👩👧👦 6 человек и больше · малыши и взрослые вместе</p>
|
||
<div class="grid" id="bigGrid"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="wrap">Сделано с <span class="heart">♥</span> для семьи · каталог семейных игр</div>
|
||
</footer>
|
||
|
||
<!-- Modal -->
|
||
<div class="modal hidden" id="modal">
|
||
<div class="modal-card" id="modalCard"></div>
|
||
</div>
|
||
|
||
<script>
|
||
const CATS=[
|
||
{id:'all',name:'Все',color:'#2A2530'},
|
||
{id:'outdoor',name:'🌳 На улице',color:'var(--cat-outdoor)'},
|
||
{id:'board',name:'♟️ Настольные',color:'var(--cat-board)'},
|
||
{id:'dev',name:'🧠 Развивающие',color:'var(--cat-dev)'},
|
||
{id:'pc',name:'💻 Компьютерные',color:'var(--cat-pc)'},
|
||
{id:'other',name:'✨ Прочие',color:'var(--cat-other)'}
|
||
];
|
||
const SEASONS=[
|
||
{id:'all',name:'В любое время',icon:'🔄'},
|
||
{id:'spring',name:'Весна',icon:'🌸'},
|
||
{id:'summer',name:'Лето',icon:'☀️'},
|
||
{id:'autumn',name:'Осень',icon:'🍂'},
|
||
{id:'winter',name:'Зима',icon:'❄️'}
|
||
];
|
||
const AGES=[
|
||
{id:'all',name:'Все возраста'},
|
||
{id:'toddler',name:'👶 Для 3-летки'}
|
||
];
|
||
const SEASON_MAP={spring:'🌸 Весна',summer:'☀️ Лето',autumn:'🍂 Осень',winter:'❄️ Зима',anytime:'🔄 В любое время'};
|
||
const CAT_NAME={outdoor:'На улице',board:'Настольные',dev:'Развивающие',pc:'Компьютерные',other:'Прочие',big:'Большая компания'};
|
||
const CAT_COLOR={outdoor:'var(--cat-outdoor)',board:'var(--cat-board)',dev:'var(--cat-dev)',pc:'var(--cat-pc)',other:'var(--cat-other)',big:'var(--cat-big)'};
|
||
|
||
const GAMES=[
|
||
{e:'🗺️',t:'Охота за сокровищами',c:'outdoor',s:'summer',p:'2–6 чел',a:'3+',h:'Нарисуйте карту двора или парка с крестиком-кладом. Идите от подсказки к подсказке, пока малыш не найдёт спрятанную игрушку или угощение. Подсказки простые: «где большие деревья», «у скамейки».',d:'Ориентирование, воображение, речь'},
|
||
{e:'⛄',t:'Снежный город',c:'outdoor',s:'winter',p:'2–6 чел',a:'3+',h:'Лепим крепость, туннели и снежных котов. Малыш катает «колобки», взрослые строят стены. Потом пьём чай с маршмеллоу прямо на снегу.',d:'Моторика, командная работа'},
|
||
{e:'🍁',t:'Листовой художник',c:'outdoor',s:'autumn',p:'2–6 чел',a:'3+',h:'Собираем листья разных цветов и форм, дома делаем аппликации и гирлянды. Сортируем по цвету и размеру — кто быстрее найдёт пять красных листьев.',d:'Цвета, классификация, творчество'},
|
||
{e:'🌱',t:'Маленький огород',c:'outdoor',s:'spring',p:'2–6 чел',a:'3+',h:'Сажаем семена в стаканчики или на грядку, ведём дневник роста: рисуем и фотографируем. Поливаем по очереди и отмечаем, кто выше — росток или кошка.',d:'Терпение, наблюдательность, ответственность'},
|
||
{e:'🟦',t:'Классики и дорожки',c:'outdoor',s:'summer',p:'2–6 чел',a:'3+',h:'Мелом рисуем классики, лабиринты и «речку», через которую надо перепрыгнуть. Малыш прыгает за руку со взрослым и называет цифры.',d:'Счёт, координацию, баланс'},
|
||
{e:'🐾',t:'Следы на снегу',c:'outdoor',s:'winter',p:'2–6 чел',a:'3+',h:'Идём по парку и угадываем следы: птица, кошка или собака, человек. Малашка сравнивает след со своей варежкой — кто больше?',d:'Наблюдательность, речь'},
|
||
{e:'🌲',t:'Шишкобол',c:'outdoor',s:'autumn',p:'2–6 чел',a:'3+',h:'Собираем шишки и забрасываем в ведро или корзину с разного расстояния. Считаем попадания и устраиваем чемпионат.',d:'Меткость, счёт'},
|
||
|
||
{e:'⭕',t:'Доббль',c:'board',s:'anytime',p:'2–6 чел',a:'3+',h:'На круглых карточках найди одинаковую картинку быстрее всех. С малышом играем без таймера — просто находя пары и называя их вслух.',d:'Внимание, реакцию, узнавание символов'},
|
||
{e:'🏰',t:'Каркассон (детское)',c:'board',s:'anytime',p:'2–4 чел',a:'4+',h:'Выкладываем плитки и строим дороги с замками. Малашка помогает выбирать и класть плитку, взрослые додумывают стратегию.',d:'Стратегию, пространственное мышление'},
|
||
{e:'🃏',t:'УНО',c:'board',s:'anytime',p:'2–10 чел',a:'5+',h:'Кладём карту по цвету или цифре. Малашка играет в команде со взрослым: называет цвет и цифру, взрослый помогает с тактикой.',d:'Цвета, цифры, очерёдность'},
|
||
{e:'🁫',t:'Домино с картинками',c:'board',s:'anytime',p:'2–6 чел',a:'3+',h:'Подбираем картинки друг к другу: животные, фрукты, транспорт. Называем вслух то, что приложили.',d:'Парные образы, речь, классификацию'},
|
||
{e:'♟️',t:'Шахматы-знакомство',c:'board',s:'winter',p:'2 чел',a:'5+',h:'22-летний играет партию со взрослым, а малыш тем временем учится, как ходят фигуры: «конь прыгает буквой Г», «слон по диагонали».',d:'Логику, память, планирование'},
|
||
|
||
{e:'🧱',t:'Лего-город',c:'dev',s:'anytime',p:'2–6 чел',a:'3+',h:'Вместе строим город: у каждого свой квартал. Малашка ставит простые башни, взрослые — детали. Обыгрываем машинками и человечками, селят и кошек.',d:'Моторику, фантазию, сотрудничество'},
|
||
{e:'🫘',t:'Сортировка: фасоль и макароны',c:'dev',s:'anytime',p:'1–4 чел',a:'3+',h:'Перемешиваем разные виды круп, малыш раскладывает по цвету и форме в миски. Взрослые считают и придумывают истории про каждую фасолинку.',d:'Классификацию, щипковый захват, счёт'},
|
||
{e:'👾',t:'Лепка монстров',c:'dev',s:'anytime',p:'2–6 чел',a:'3+',h:'Лепим из пластилина смешных монстров, потом устраиваем выставку и каждый рассказывает историю своего монстра.',d:'Творчество, речь, мелкую моторику'},
|
||
{e:'🔤',t:'Азбука-лото',c:'dev',s:'anytime',p:'2–6 чел',a:'3+',h:'Карточки с буквами и картинками: малыш находит «А — арбуз», а взрослые наперебой называют слова на эту букву.',d:'Буквы, словарь, память'},
|
||
{e:'💃',t:'Стоп-танец',c:'dev',s:'anytime',p:'2–8 чел',a:'3+',h:'Включаем музыку и танцуем. Музыка стоп — замираем в позе. Кто пошевелится — выбывает, или просто всем смешно.',d:'Ритм, внимание, контроль тела'},
|
||
{e:'🥣',t:'Сенсорная коробка',c:'dev',s:'anytime',p:'1–4 чел',a:'2+',h:'В контейнере: рис, разные крупы и мелкие игрушки. Малашка копается щипцами и ложкой, находит «клады», а взрослые называют, что нашли.',d:'Тактильность, мелкую моторику, речь'},
|
||
|
||
{e:'⛏️',t:'Minecraft: семейный мир',c:'pc',s:'anytime',p:'2–4 чел',a:'5+',h:'Строим общий дом и ферму животных — приручаем и кошек! 22-летний и взрослые строят, а малыш выбирает блоки и цвет стен.',d:'Кооперацию, планирование, креатив'},
|
||
{e:'🕺',t:'Just Dance / танцы',c:'pc',s:'anytime',p:'1–6 чел',a:'3+',h:'Танцуем под хореографию на экране. Малашка повторяет движения как умеет — важен не счёт, а смех и движение.',d:'Координацию, ритм, физическую активность'},
|
||
{e:'🍳',t:'Overcooked! 2',c:'pc',s:'anytime',p:'2–4 чел',a:'8+',h:'Кооперативная готовка на кухне-хаосе: нужно кричать и договариваться. Малашка «помогает» на свободном геймпаде, пока взрослые спасают суп.',d:'Командную работу, общение под давлением'},
|
||
{e:'📱',t:'Детские приложения: рисуем и считаем',c:'pc',s:'anytime',p:'1–2 чел',a:'3+',h:'Малашка рисует пальцем и считает предметы в приложении, взрослый рядом комментирует и хвалит. Не больше 15–20 минут за раз.',d:'Буквы, цифры, причинно-следствие'},
|
||
|
||
{e:'🐱',t:'Кошачьи Олимпийские игры',c:'other',s:'anytime',p:'2–6 + 2 кошки',a:'3+',h:'Лазерная указка, удочка-дразнилка, коробки-лабиринты. Малашка — судья: считает прыжки кошек. Обязательно снимаем на видео.',d:'Заботу о животных, наблюдательность, смех'},
|
||
{e:'🍕',t:'Пицца-вечеринка',c:'other',s:'anytime',p:'2–6 чел',a:'3+',h:'Каждый лепит свою мини-пиццу, малыш раскладывает начинку. Пока пекутся — накрываем на стол и придумываем названия пиццам.',d:'Кулинарию, самостоятельность, терпение'},
|
||
{e:'🎬',t:'Кино-вечер с меню',c:'other',s:'anytime',p:'2–6 чел',a:'3+',h:'Выбираем мультфильм, готовим «кино-меню»: попкорн, фрукты, какао. Строим подушечный дом-крепость и смотрим вместе.',d:'Традиции, уют, умение выбирать'},
|
||
{e:'📷',t:'Фотокросс из окна',c:'other',s:'winter',p:'2–6 чел',a:'3+',h:'Тема дня — например «зима», «красное» или «круглое». Каждый фотографирует с телефона, вечером устраиваем выставку на экране ТВ.',d:'Наблюдательность, творчество, внимание'},
|
||
|
||
{e:'🚢',t:'Лужи и кораблики',c:'outdoor',s:'spring',p:'2–6 чел',a:'3+',h:'После дождя пускаем бумажные или из листьев кораблики по ручейкам и лужам. Чей кораблик доплывёт до финиша первым — кричим «ура».',d:'Наблюдение, речь, причина и следствие'},
|
||
{e:'🐛',t:'Жучки под лупой',c:'outdoor',s:'spring',p:'1–4 чел',a:'3+',h:'Поднимаем камни и листья, ищем жучков и червячков. Рассматриваем через лупу, не трогая руками, и называем, кто ползёт.',d:'Наблюдательность, бережное отношение к природе'},
|
||
{e:'🌼',t:'Весенние мелки',c:'outdoor',s:'spring',p:'2–6 чел',a:'3+',h:'Рисуем на асфальте цветы, солнышко и радугу. Малашка называет цвета, а взрослые дорисовывают стебельки и пчёлок.',d:'Цвета, мелкую моторику, творчество'},
|
||
{e:'💦',t:'Водный бой губками',c:'outdoor',s:'summer',p:'2–6 чел',a:'3+',h:'Две миски с водой на расстоянии. Переносим воду губкой из одной в другую — кто больше натаскает за минуту.',d:'Моторику, координацию, ловкость'},
|
||
{e:'🫧',t:'Ловцы мыльных пузырей',c:'outdoor',s:'summer',p:'2–8 чел',a:'3+',h:'Взрослый пускает пузыри, малыш ловит и лопает. Считаем, кто больше поймал, и кто подует самый большой пузырь.',d:'Координацию, счёт, зрительное отслеживание'},
|
||
{e:'🏖️',t:'Песочный город',c:'outdoor',s:'summer',p:'2–6 чел',a:'3+',h:'Лепим куличики, роем каналы и рвы, строим крепость. Малашка лепит простые формы, взрослые соединяют всё в город.',d:'Моторику, воображение, сотрудничество'},
|
||
{e:'🌿',t:'Гербарий',c:'outdoor',s:'summer',p:'2–6 чел',a:'3+',h:'Собираем цветочки и листики, сушим между страниц книги пару дней, потом вклеиваем в альбом и подписываем названия.',d:'Терпение, классификацию, речь'},
|
||
{e:'🌰',t:'Жёлуди и каштаны',c:'outdoor',s:'autumn',p:'2–6 чел',a:'3+',h:'Собираем жёлуди и каштаны, дома сортируем по размеру в баночки. Делаем поделки-человечков с зубочистками.',d:'Классификацию, мелкую моторику, творчество'},
|
||
{e:'🍎',t:'Яблочная дегустация',c:'other',s:'autumn',p:'2–6 чел',a:'3+',h:'Режем разные сорта яблок, пробуем и описываем: сладкое, кислое, твёрдое. Голосуем за любимое и рисуем его.',d:'Вкусовые ощущения, речь, умение выбирать'},
|
||
{e:'🦔',t:'Кормушка для птиц',c:'outdoor',s:'autumn',p:'2–6 чел',a:'3+',h:'Делаем кормушку из коробки, насыпаем семечки и вешаем во дворе. Каждый день наблюдаем, кто прилетает обедать.',d:'Заботу о животных, наблюдательность, рутину'},
|
||
{e:'❄️',t:'Снежинки под лупой',c:'outdoor',s:'winter',p:'1–4 чел',a:'3+',h:'Ловим снежинки на тёмную варежку и рассматриваем форму через лупу, пока не растаяли. Ищем самые «звёздчатые».',d:'Наблюдательность, внимание, терпение'},
|
||
{e:'🧣',t:'Кормим синичек',c:'outdoor',s:'winter',p:'2–6 чел',a:'3+',h:'Каждое утро насыпаем семечки в кормушку. Отмечаем в дневнике, кто прилетел: синица, воробей, снегирь.',d:'Рутину, заботу, наблюдение за природой'},
|
||
{e:'⛄',t:'Снеговик-модник',c:'outdoor',s:'winter',p:'2–6 чел',a:'3+',h:'Лепим снеговика и наряжаем его: шарф, шапка, нос-морковка, пуговицы. Устраиваем модное дефиле с фотосессией.',d:'Моторику, творчество, воображение'},
|
||
{e:'🎵',t:'Музыка из крупы',c:'dev',s:'anytime',p:'2–6 чел',a:'3+',h:'Насыпаем разную крупу в одинаковые баночки — рис, гречку, горох. Трясём и сравниваем звук, собираем «оркестр».',d:'Слух, ритм, различение звуков'},
|
||
{e:'📚',t:'Сказка по ролям',c:'dev',s:'anytime',p:'2–6 чел',a:'3+',h:'Читаем любимую сказку и разыгрываем: взрослые — звери, малыш — герой. Повторяем фразы и добавляем свои.',d:'Речь, воображение, память'},
|
||
{e:'🎈',t:'Шарик не дай упасть',c:'dev',s:'anytime',p:'2–8 чел',a:'3+',h:'Подбрасываем воздушный шарик и не даём коснуться пола. Считаем, сколько раз ударили, пока он не упал.',d:'Координацию, счёт, реакцию'},
|
||
{e:'🔦',t:'Теневой театр',c:'dev',s:'anytime',p:'2–6 чел',a:'3+',h:'В тёмной комнате светим фонариком на стену, показываем тени из рук. Угадываем животное и придумываем сценку.',d:'Воображение, речь, внимание'},
|
||
{e:'🖐️',t:'Пальчиковые краски',c:'dev',s:'anytime',p:'1–4 чел',a:'2+',h:'Красим ладошки и оставляем отпечатки на большом листе, потом дорисовываем их в животных и цветы.',d:'Тактильность, креатив, речь'},
|
||
{e:'🧩',t:'Пазл вместе',c:'dev',s:'anytime',p:'2–6 чел',a:'3+',h:'Большой пазл 24–48 деталей: малыш ищет края и детали по цвету, взрослые собирают середину. Чья сторона быстрее?',d:'Пространственное мышление, сотрудничество'}
|
||
];
|
||
|
||
const BIG=[
|
||
{e:'🎭',t:'Мафия',p:'6–15 чел',a:'8+',h:'Классическая ролевая игра на дедукцию. Ведущий раздаёт роли, город «спит» и «просыпается». Идеально для вечера праздника, когда малыш уже уснул.',d:'Дедукцию, выступление, интригу'},
|
||
{e:'🎨',t:'Крокодил / Шарады',p:'6–20 чел',a:'4+',h:'Две команды показывают слова без слов. Малашке даём простые — кошка, мяч, машина. Смешно для всех возрастов, никто не скучает.',d:'Выразительность, командный дух'},
|
||
{e:'🪑',t:'Музыкальные стулья',p:'5–15 чел',a:'3+',h:'Стульев на один меньше игроков. Под музыку идём по кругу, музыка стоп — садимся. Кто без стула — становится диджеем и ведёт музыку.',d:'Реакцию, веселье для всех'},
|
||
{e:'❓',t:'Семейный квиз',p:'6–20 чел',a:'5+',h:'Команды отвечают на вопросы про семью: «в каком году свадьба родителей?», «любимая каша малыша?». Малашке — карточки с картинками-ответами.',d:'Память, сплочение, смех'},
|
||
{e:'🎪',t:'Квест по станциям (на день рождения)',p:'6–15 чел',a:'3+',h:'5–6 станций во дворе или квартире: загадки, прыжки, поиск сокровища, кошачья станция (покормить котов). В финале — торт и призы для всех.',d:'Командную работу, ловкость, радость'},
|
||
{e:'📸',t:'Фотобудка + челленджи',p:'6–20 чел',a:'4+',h:'Тематическая фотозона с реквизитом и челленджи: фото всей командой в прыжке, повторить позу с картины. Голосуем за лучшее — приз имениннику.',d:'Креатив, творчество, общение'}
|
||
];
|
||
|
||
const state={cat:'all',season:'all',age:'all',q:''};
|
||
|
||
function chips(container,items,activeKey,onClick){
|
||
container.innerHTML='';
|
||
items.forEach(it=>{
|
||
const b=document.createElement('button');
|
||
b.className='chip'+(state[activeKey]===it.id?' active':'');
|
||
const colorDot=it.color?`<span class="dot" style="background:${it.color}"></span>`:'';
|
||
b.innerHTML=(it.icon?`<span>${it.icon}</span>`:'')+colorDot+`<span>${it.name}</span>`;
|
||
b.onclick=()=>{state[activeKey]=it.id;onClick();};
|
||
container.appendChild(b);
|
||
});
|
||
}
|
||
|
||
function renderChips(){
|
||
chips(document.getElementById('catChips'),CATS,'cat',()=>{refreshChips();renderGrid();});
|
||
chips(document.getElementById('seasonChips'),SEASONS,'season',()=>{refreshChips();renderGrid();});
|
||
chips(document.getElementById('ageChips'),AGES,'age',()=>{refreshChips();renderGrid();});
|
||
}
|
||
function refreshChips(){
|
||
document.querySelectorAll('#catChips .chip').forEach((c,i)=>c.classList.toggle('active',state.cat===CATS[i].id));
|
||
document.querySelectorAll('#seasonChips .chip').forEach((c,i)=>c.classList.toggle('active',state.season===SEASONS[i].id));
|
||
document.querySelectorAll('#ageChips .chip').forEach((c,i)=>c.classList.toggle('active',state.age===AGES[i].id));
|
||
}
|
||
|
||
function cardHTML(g,big){
|
||
const cat=big?'big':g.c;
|
||
return `<div class="card">
|
||
<div class="card-top">
|
||
<span class="emoji">${g.e}</span>
|
||
<span class="cat-tag" style="background:${CAT_COLOR[cat]}">${CAT_NAME[cat]}</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>${g.t}</h3>
|
||
<div class="meta">
|
||
<span>${SEASON_MAP[g.s]||'🔄 В любое время'}</span>
|
||
<span>👥 ${g.p}</span>
|
||
<span>🎂 ${g.a}</span>
|
||
</div>
|
||
<p class="how">${g.h}</p>
|
||
<p class="dev">🎯 Развивает: ${g.d}</p>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
function filtered(){
|
||
return GAMES.filter(g=>{
|
||
if(state.cat!=='all'&&g.c!==state.cat)return false;
|
||
if(state.season!=='all'&&g.s!==state.season)return false;
|
||
if(state.age==='toddler'&&g.a!=='3+'&&g.a!=='2+')return false;
|
||
if(state.q&&g.t.toLowerCase().indexOf(state.q.toLowerCase())===-1)return false;
|
||
return true;
|
||
});
|
||
}
|
||
|
||
function renderGrid(){
|
||
const grid=document.getElementById('grid');
|
||
const list=filtered();
|
||
document.getElementById('count').textContent=list.length;
|
||
if(!list.length){
|
||
grid.innerHTML=`<div class="empty"><div class="big">🤷</div>Ничего не нашлось. Попробуй сбросить фильтры.</div>`;
|
||
return;
|
||
}
|
||
grid.innerHTML=list.map(g=>cardHTML(g,false)).join('');
|
||
}
|
||
|
||
function renderBig(){
|
||
document.getElementById('bigGrid').innerHTML=BIG.map(g=>cardHTML(g,true)).join('');
|
||
}
|
||
|
||
const SEASON_GROUPS=[
|
||
{id:'spring',icon:'🌸',name:'Весна'},
|
||
{id:'summer',icon:'☀️',name:'Лето'},
|
||
{id:'autumn',icon:'🍂',name:'Осень'},
|
||
{id:'winter',icon:'❄️',name:'Зима'},
|
||
{id:'anytime',icon:'🔄',name:'В любое время'}
|
||
];
|
||
function renderBySeason(){
|
||
const wrap=document.getElementById('bySeason');
|
||
let html='';
|
||
SEASON_GROUPS.forEach(sg=>{
|
||
const items=GAMES.filter(g=>g.s===sg.id);
|
||
if(!items.length)return;
|
||
html+=`<div class="season-head"><span class="ic">${sg.icon}</span>${sg.name}<span class="cnt">${items.length} игр</span></div>`;
|
||
html+=`<div class="grid">${items.map(g=>cardHTML(g,false)).join('')}</div>`;
|
||
});
|
||
wrap.innerHTML=html;
|
||
}
|
||
|
||
const RIDDLES=[
|
||
{e:'🐱',q:'Мягкие лапки, а в лапках — царапки. Любит молоко.',a:'Кошка'},
|
||
{e:'🐶',q:'С хозяином дружит, дом сторожит, хвостом виляет.',a:'Собака'},
|
||
{e:'🐮',q:'Хвост кисточкой, рога, жуёт траву и даёт молоко.',a:'Корова'},
|
||
{e:'🐎',q:'Грива есть, быстро скачет, везёт поклажу.',a:'Лошадь'},
|
||
{e:'🐭',q:'Маленькая, серая, от кошки прячется, любит сыр.',a:'Мышка'},
|
||
{e:'🐰',q:'Длинные уши, короткий хвост, прыгает по полю.',a:'Заяц'},
|
||
{e:'🐻',q:'Зимой спит в берлоге, летом по малину ходит.',a:'Медведь'},
|
||
{e:'🦔',q:'Вместо шубки — иголки, носит грибы на спине.',a:'Ёжик'},
|
||
{e:'⚽',q:'Круглый да прыгучий, его пинают ногой.',a:'Мяч'},
|
||
{e:'☂️',q:'В дождь его раскрывают, в солнце — прячут.',a:'Зонт'},
|
||
{e:'⏰',q:'Без рук, без ног, а стучит и будит по утрам.',a:'Часы'},
|
||
{e:'☀️',q:'Светит и греет, но рукой не тронешь.',a:'Солнце'},
|
||
{e:'🌧️',q:'С неба капает, в лужи собирается.',a:'Дождь'},
|
||
{e:'🌈',q:'Семицветная дуга появляется после дождя.',a:'Радуга'},
|
||
{e:'❄️',q:'Белый да пушистый, зимой с неба падает.',a:'Снег'},
|
||
{e:'🕳️',q:'Чем больше из неё берёшь, тем больше она становится.',a:'Яма'},
|
||
{e:'📛',q:'Что твоё, но другие пользуются этим чаще, чем ты?',a:'Имя'},
|
||
{e:'⏳',q:'Что идёт, но не двигается с места?',a:'Время'},
|
||
{e:'📚',q:'Что можно приготовить, но нельзя съесть?',a:'Уроки'},
|
||
{e:'🧺',q:'Что становится мокрым, пока сушит?',a:'Полотенце'}
|
||
];
|
||
const CHARADES=[
|
||
{e:'⛵',q:'Первое — ПАР (от кипящей воды), второе — УС (у кота на мордочке).',a:'ПАРУС'},
|
||
{e:'🦡',q:'Первое — БАР (заведение), второе — СУК (ветка дерева).',a:'БАРСУК'},
|
||
{e:'🍂',q:'Первое — ЛИСТ (на дереве), второе — ПАД (от слова «падать»).',a:'ЛИСТОПАД'},
|
||
{e:'✈️',q:'Первое — САМ (самостоятельно), второе — ЛЁТ (от слова «полёт»).',a:'САМОЛЁТ'},
|
||
{e:'🚂',q:'Первое — ПАР, второе — ВОЗ (от слова «возить»).',a:'ПАРОВОЗ'},
|
||
{e:'🚢',q:'Первое — ЛЁД, второе — КОЛ (от слова «колоть»).',a:'ЛЕДОКОЛ'}
|
||
];
|
||
function riddleCard(r){
|
||
return `<div class="r-card" onclick="this.classList.toggle('open')">
|
||
<div class="q"><span class="em">${r.e}</span><span>${r.q}</span></div>
|
||
<div class="ans"><div class="ans-lbl">Ответ</div>${r.a}</div>
|
||
<div class="hint">👆 Нажми, чтобы увидеть ответ</div>
|
||
</div>`;
|
||
}
|
||
function renderRiddles(){
|
||
document.getElementById('riddleGrid').innerHTML=RIDDLES.map(riddleCard).join('');
|
||
document.getElementById('charadeGrid').innerHTML=CHARADES.map(riddleCard).join('');
|
||
}
|
||
|
||
/* Surprise modal */
|
||
const modal=document.getElementById('modal');
|
||
const modalCard=document.getElementById('modalCard');
|
||
function showRandom(){
|
||
let pool=filtered();
|
||
if(!pool.length)pool=GAMES;
|
||
const g=pool[Math.floor(Math.random()*pool.length)];
|
||
modalCard.innerHTML=`
|
||
<div class="emoji">${g.e}</div>
|
||
<h3>${g.t}</h3>
|
||
<div class="meta">
|
||
<span>${SEASON_MAP[g.s]||'🔄 В любое время'}</span>
|
||
<span>👥 ${g.p}</span>
|
||
<span>🎂 ${g.a}</span>
|
||
</div>
|
||
<p class="how">${g.h}</p>
|
||
<p class="dev">🎯 Развивает: ${g.d}</p>
|
||
<div class="modal-btns">
|
||
<button class="btn" id="again">🎲 Другая игра</button>
|
||
<button class="btn ghost" id="close">Закрыть</button>
|
||
</div>`;
|
||
modal.classList.remove('hidden');
|
||
document.getElementById('again').onclick=showRandom;
|
||
document.getElementById('close').onclick=()=>modal.classList.add('hidden');
|
||
}
|
||
document.getElementById('surprise').onclick=showRandom;
|
||
modal.addEventListener('click',e=>{if(e.target===modal)modal.classList.add('hidden');});
|
||
document.addEventListener('keydown',e=>{if(e.key==='Escape')modal.classList.add('hidden');});
|
||
|
||
document.getElementById('search').addEventListener('input',e=>{state.q=e.target.value;renderGrid();});
|
||
document.getElementById('reset').onclick=()=>{state.cat='all';state.season='all';state.age='all';state.q='';document.getElementById('search').value='';refreshChips();renderGrid();};
|
||
|
||
renderChips();
|
||
renderGrid();
|
||
renderBySeason();
|
||
renderRiddles();
|
||
renderBig();
|
||
</script>
|
||
</body>
|
||
</html>
|