site
This commit is contained in:
commit
415ace6272
346
index.html
Normal file
346
index.html
Normal file
@ -0,0 +1,346 @@
|
|||||||
|
<!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}
|
||||||
|
|
||||||
|
/* 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="#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="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="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 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:'Наблюдательность, творчество, внимание'}
|
||||||
|
];
|
||||||
|
|
||||||
|
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',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();});
|
||||||
|
}
|
||||||
|
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));
|
||||||
|
}
|
||||||
|
|
||||||
|
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.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('');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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.q='';document.getElementById('search').value='';refreshChips();renderGrid();};
|
||||||
|
|
||||||
|
renderChips();
|
||||||
|
renderGrid();
|
||||||
|
renderBig();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user