v2: сезоны + игры для 3-летки
This commit is contained in:
parent
415ace6272
commit
85676d1134
78
index.html
78
index.html
@ -69,6 +69,15 @@ header{position:sticky;top:0;z-index:50;background:rgba(255,249,240,.92);backdro
|
||||
.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}
|
||||
|
||||
/* 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}
|
||||
@ -126,7 +135,8 @@ footer .heart{color:var(--accent)}
|
||||
</div>
|
||||
<div class="hero-cta">
|
||||
<a class="btn" href="#catalog">Открыть каталог</a>
|
||||
<a class="btn ghost" href="#big">Праздники и дни рождения →</a>
|
||||
<a class="btn ghost" href="#seasons">По сезонам →</a>
|
||||
<a class="btn ghost" href="#big">Праздники →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -146,6 +156,11 @@ footer .heart{color:var(--accent)}
|
||||
<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>
|
||||
@ -159,6 +174,14 @@ footer .heart{color:var(--accent)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="byseason" id="seasons">
|
||||
<div class="wrap">
|
||||
<h2>📅 Игры по сезонам</h2>
|
||||
<p class="sub">Что играть весной, летом, осенью и зимой — все игры собраны по временам года.</p>
|
||||
<div id="bySeason"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bigco" id="big">
|
||||
<div class="wrap">
|
||||
<h2>🎂 Для большой компании</h2>
|
||||
@ -193,6 +216,10 @@ const SEASONS=[
|
||||
{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)'};
|
||||
@ -227,7 +254,27 @@ const GAMES=[
|
||||
{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:'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=[
|
||||
@ -239,7 +286,7 @@ const BIG=[
|
||||
{e:'📸',t:'Фотобудка + челленджи',p:'6–20 чел',a:'4+',h:'Тематическая фотозона с реквизитом и челленджи: фото всей командой в прыжке, повторить позу с картины. Голосуем за лучшее — приз имениннику.',d:'Креатив, творчество, общение'}
|
||||
];
|
||||
|
||||
const state={cat:'all',season:'all',q:''};
|
||||
const state={cat:'all',season:'all',age:'all',q:''};
|
||||
|
||||
function chips(container,items,activeKey,onClick){
|
||||
container.innerHTML='';
|
||||
@ -256,10 +303,12 @@ function chips(container,items,activeKey,onClick){
|
||||
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){
|
||||
@ -286,6 +335,7 @@ 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;
|
||||
});
|
||||
@ -306,6 +356,25 @@ 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;
|
||||
}
|
||||
|
||||
/* Surprise modal */
|
||||
const modal=document.getElementById('modal');
|
||||
const modalCard=document.getElementById('modalCard');
|
||||
@ -336,10 +405,11 @@ modal.addEventListener('click',e=>{if(e.target===modal)modal.classList.add('hidd
|
||||
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();};
|
||||
document.getElementById('reset').onclick=()=>{state.cat='all';state.season='all';state.age='all';state.q='';document.getElementById('search').value='';refreshChips();renderGrid();};
|
||||
|
||||
renderChips();
|
||||
renderGrid();
|
||||
renderBySeason();
|
||||
renderBig();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user