/* Кнопка "All" */ .all-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;background:transparent;border:1px solid #ddd;cursor:pointer} .all-btn:focus{outline:3px solid rgba(0,120,212,0.15);outline-offset:2px}
/* Оверлей и панель */ .overlay{position:fixed;inset:0;display:none;background:rgba(0,0,0,0.18);z-index:40} .overlay.open{display:block} .panel{position:fixed;left:0;right:0;top:56px;margin:0 auto;max-width:1200px;background:var(--panel);border-radius:8px;box-shadow:0 8px 24px var(--shadow);padding:20px;z-index:50;transform-origin:top;display:none} .panel.open{display:block}
/* Сетка меню */ .mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .group{background:transparent} .group h4{margin:0 0 8px 0;font-size:15px} .group ul{list-style:none;padding:0;margin:0} .group li{margin:6px 0} .link{display:block;padding:6px 8px;border-radius:6px;text-decoration:none;color:var(--text)} .link:hover{background:#fff}
/* Footer of panel */ .panel-footer{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid #e6e6e6;margin-top:16px}
/* Responsive */ @media (max-width:900px){ .panel{left:12px;right:12px;top:64px} .mega-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .mega-grid{grid-template-columns:1fr} }
Этот файл демонстрирует кнопку, похожую на "All Microsoft": выпадающая панель, оверлей, адаптивность и базовая доступность.
// Простая логика открытия/закрытия + базовая доступность const btn = document.getElementById('allToggle'); const panel = document.getElementById('megaPanel'); const overlay = document.getElementById('overlay');
function openPanel(){ btn.setAttribute('aria-expanded','true'); panel.setAttribute('aria-hidden','false'); panel.classList.add('open'); overlay.classList.add('open'); // запомнить первый фокус panel.querySelector('.link')?.focus(); document.addEventListener('keydown', onKeyDown); } function closePanel(){ btn.setAttribute('aria-expanded','false'); panel.setAttribute('aria-hidden','true'); panel.classList.remove('open'); overlay.classList.remove('open'); btn.focus(); document.removeEventListener('keydown', onKeyDown); }
btn.addEventListener('click', ()=>{ const expanded = btn.getAttribute('aria-expanded') === 'true'; if(expanded) closePanel(); else openPanel(); });
// клик по оверлею закрывает overlay.addEventListener('click', closePanel);
// клавиши: Esc закрывает; Tab — простая ловушка фокуса (не идеальна, но рабочая) function onKeyDown(e){ if(e.key === 'Escape') closePanel(); if(e.key === 'Tab'){ const focusable = panel.querySelectorAll('a, button'); if(!focusable.length) return; const first = focusable[0]; const last = focusable[focusable.length-1]; if(e.shiftKey && document.activeElement === first){ e.preventDefault(); last.focus(); } else if(!e.shiftKey && document.activeElement === last){ e.preventDefault(); first.focus(); } } }
// Закрывать при клике вне: полезно, но не переусердствуйте с перехватом кликов по документу document.addEventListener('click', (e)=>{ if(panel.classList.contains('open')){ const insidePanel = panel.contains(e.target) || btn.contains(e.target); if(!insidePanel) closePanel(); } });
// На сенсорных экранах можно добавить элемент управления типом открытия — по-умолчанию используется клик
What Is a Nonprofit- and What It Is Not An educational note from Prima Nota Inc, with a quiet nod to Mother’s Day At Prima Nota Inc, we often work alongside other multicultural and ethnic community organisations. Many are formally registered as nonprofits- yet the core purpose of a nonprofit is not always well understood. […]
What Is a Nonprofit- and What It Is Not Read More »
2025-04-09 🎥 We’re proud to present our “About Prima Nota Founding Members” video – and what better moment to reflect on what we accomplished together at Folk Pancake Festival Maslenitsa 2025! The Prima Nota team took the lead by:🌞 Developing the festival’s overall structure and artistic concept🎭 Coordinating participants, volunteers, and artistic groups📬 Managing communications
We’re proud to present our “About Prima Nota Founding Members” video Read More »
Welcome to Prima Nota! Where voices rise, stories unfold, and communities connect. We’re so excited to introduce Prima Nota, a South Australian not-for-profit cultural hub dedicated to celebrating heritage, music, and creativity. Through folk choirs, art workshops, cultural festivals, and our signature Cultural Strategy Game Nights, we bring people together to share stories, traditions, and
Welcome to Prima Nota! Read More »
On March 2nd, 2025, Prima Nota brought Maslenitsa to life with a joyful open-air festival in the heart of Adelaide. With singing, dancing, sizzling blinis, folk games, and bright costumes, the event created a space where cultures met with laughter and warmth. Organised entirely by volunteers, Maslenitsa 2025 was more than a celebration – it
Maslenitsa 2025 – Sunshine, Songs, and Pancakes! Read More »
Prima Nota VolkHauz Mafia Night | Easter Edition THANK YOU, наш незабываемый пасхальный десант! Сегодня мы доказали: яйца могут трескаться, куличи могут стрелять, а бабушки с разделочными ножами — это не шутка! Our players brought pure chaos, dark humour, and brilliant strategy into every round. Было всё: — предательства, — дуэли глазами, — и, конечно,
Prima Nota VolkHauz Mafia Night | Easter Edition Read More »
**Русская версия ниже** VolkHauz is Adelaide’s first Russian/English-speaking Mafia game club for adults and kids aike- created as an initiative of Prima Nota, a cultural nonprofit supporting community connection through arts and social games. We host professional-level and beginner-level Mafia nights with tournament-style rules, printed role cards, timed rounds, and structured moderation. New players welcome-
VolkHauz is Adelaide’s first Russian/English-speaking Mafia game club… Read More »