Food & Mind · WEB 2 · Handoff makiet dla wdrożenia w Astro

Dla: Dawid (wdrożenie Astro) · Od: Ideavo · Stan na 27.10.2026

Ten dokument opisuje komplet makiet strony foodandmind.org w kierunku „Edukacja przez doświadczenie” (WEB 1). Makiety są działającym prototypem HTML/CSS/JS: jedna strona = jeden widok, wszystkie zbudowane z jednego zestawu tokenów i komponentów. Prototyp jest wzorem wyglądu i zachowań, nie kodem produkcyjnym. Nic nie zostało opublikowane na domenie klienta.

Spis treści

1. Co jest w paczce i jak to otworzyć
2. Widoki (14) i ich zawartość
3. Fundamenty: kolory i kontrast, typografia, odstępy, siatka, breakpointy
4. Komponenty i ich odpowiedniki w Astro
5. Stany komponentów
6. Nawigacja: desktop i telefon
7. Formularze, walidacja i komunikaty
8. Klawiatura, focus i WCAG 2.1 AA
9. Zdjęcia: przypisanie, źródła, proporcje
10. SEO: adresy, nagłówki, meta, odstępstwa od specyfikacji Jakuba
11. Pominięte moduły (brak potwierdzonych danych)
12. Decyzje otwarte i rzeczy do dostarczenia przez fundację
13. Testy wykonane i testy do wykonania po wdrożeniu

---

1. Co jest w paczce i jak to otworzyć

07_HANDOFF/
  HANDOFF.md                 ten dokument
  prototyp/
    index.html               przegląd: wszystkie widoki, zrzuty 1440 / 390 / 320, stany formularza
    handoff.html             ten dokument jako strona
    strona-glowna.html … 404.html   14 widoków (lista w rozdz. 2)
    system-ui.html           plansza systemu UI (tokeny, komponenty, stany, mapa Astro)
    nawigacja.html           specyfikacja nagłówka, menu mobilnego i stopki
    assets/fm.css            wszystkie tokeny i komponenty (jeden plik, komentarze po polsku)
    assets/fm.js             zachowania: panel Programy, menu mobilne, akordeony, formularze, kopiowanie e-maila
    assets/fonts/            WOFF2 Bricolage Grotesque i Instrument Sans (latin + latin-ext, licencja OFL)
    img/                     34 obrazy przygotowanych tylko do prototypu (zmniejszone kopie, rozdz. 9)
    shots/                   zrzuty całych stron i stanów
    dokumenty/               2 archiwa ZIP „W sieci reklam” (kopie 1:1 plików klientki, rozdz. 7.4)
    src/                     źródła widoków (treść + znaczniki partiali)
    build.py                 składa widoki z src/ i partiali (nagłówek, menu, stopka, formularze)
    shots.py                 testy (Playwright/Chromium) i zrzuty
    mkhub.py                 buduje index.html i handoff.html

Uruchomienie lokalne: w folderze prototyp/ python3 -m http.server 8765, potem http://localhost:8765/. Linki w prototypie używają docelowych adresów (/programy/ciastoterapia/ itd.); skrypt prototypu mapuje je na pliki HTML. Ciemny pasek na górze widoków służy tylko do przeglądu (link do przeglądu wszystkich widoków, na stronie Kontakt także przełącznik stanów formularza) i nie jest częścią strony.

Oryginalne zdjęcia i dokumenty klientki zostały nienaruszone (03_TRESCI_KLIENTA, 05_ZDJECIA). Obrazy w img/ to kopie zmniejszone do 1400 px wyłącznie dla prototypu; do Astro trzeba przygotować je z oryginałów (rozdz. 9).

---

2. Widoki (14) i ich zawartość

Każdy widok ma makietę desktop 1440 px i telefon 390 px; reflow sprawdzony przy 320 px (oraz 1024 i 768). Zrzuty: shots/{widok}-1440.jpg, -390.jpg, -320.jpg.

Zasada treści: wyłącznie prawdziwe treści, w pierwszej kolejności z dokumentów klientki (03_TRESCI_KLIENTA, najnowszy 1a zawiera temat „Oddech i zimno”), potem z obecnej strony foodandmind.org. Teksty wstawione w całości, bez skrótów i parafraz. Zdjęcia stockowe (przekazane 28.10.2026) są użyte wyłącznie jako ilustracje w sekcjach dla firm i w Nakarmionych Emocjach (rozdz. 9.1); placeholderów zdjęć nie ma. Sekcje bez danych zostały pominięte (rozdz. 11), nie oznaczone jako braki.

2.1 Strona główna / · strona-glowna.html

Źródło: obecna strona główna, „Nasza historia”, dla firm.docx (zajawka), w sieci reklam.docx (opis karty KMO).

1. Hero: H1 Jakuba „Fundacja Food & Mind - edukacja żywieniowa, która karmi ciało i emocje”, lead, przyciski „Poznaj programy” / „Wellbeing w firmie: oferta dla firm”; zdjęcie: dziewczynki z warzywami (Ciastoterapia).
2. Dlaczego to ważne: 3 fakty z obecnej strony (35% uczniów - źródło MEN / Nowa Era 2023; Horizon Europe; 30-60% żywności ultraprzetworzonej - na obecnej stronie bez źródła, więc bez linii źródła) + zdanie zamykające.
3. Nasze programy: wstęp z obecnej strony, 3 karty (Ciastoterapia, Zdrowe wybory - nie daj się reklamie, Nakarmione Emocje).
4. Komu pomagamy: lista-odnośniki (AudienceList).
5. Współpraca z firmami: tekst z dla firm.docx, zdjęcie ilustracyjne (stock: współpracownicy przy stole, rozdz. 9.1).
6. Partnerzy i finansujący: logo MEN + adnotacja grantu (jedyny potwierdzony finansujący).
7. Zespół i eksperci: tekst w dwóch kolumnach (lewa: H2, lead i akapit o zespole; prawa: „Dlaczego powstało Food & Mind?” i link „Poznaj naszą misję”), pod spodem 4 osoby z etykietą grupy i link do /zespol/. Bez kompozycji zdjęć (usunięta 30.10.2026).
8. Pas CTA „Porozmawiajmy” → „Napisz do nas”.

2.2 Programy /programy/ · programy.html

Źródło: obecna strona Projekty i Oferta. Intro (pełny akapit z obecnej strony) · AnchorNav · wiersze programów: Ciastoterapia (zdjęcie warsztatów), Nakarmione Emocje (zdjęcie ilustracyjne: rozmowa w kręgu, jak w hero programu), Zdrowe wybory - nie daj się reklamie (infografika projektu) · Głodni Zmian: 3 projekty (H3 Jakuba) + galeria 4 zdjęć projektów bez przypisywania do konkretnego projektu · Który program wybrać? (tabela, na telefonie karty) · Instytut Food & Mind (zdjęcie z konferencji) · CTA „Dołącz do programu”.

2.3 Ciastoterapia /programy/ciastoterapia/ · ciastoterapia.html

Źródło: obecna strona (Projekty, Oferta), ciastoterapia.pl (link do kursu edukatora). Hero (H1 Jakuba, etykieta „Dla żłobków, przedszkoli i szkół”, zdjęcie: stół z przedszkolakami) · Czym jest Ciastoterapia · Jak wyglądają zajęcia (3 zdjęcia: ilustrowany przepis, karta pracy z roślinnym bohaterem, materiały na stole; podpisy to elementy metody wymienione w tekście) · Co rozwija u dzieci (lista + 2 zdjęcia) · Dla kogo (tekst + Chips) · Jak wdrożyć Ciastoterapię w placówce (5 form z obecnej Oferty jako OptionList z „Zapytaj”) · blok: edukatorzy Ciastoterapii w programie „W sieci reklam” · Zapytaj o wdrożenie (CTA) + Zostań edukatorem (link zewnętrzny ciastoterapia.pl).

2.4 Nakarmione Emocje /programy/nakarmione-emocje/ · nakarmione-emocje.html

Źródło: obecna strona główna i Oferta (#firmy). Hero (zdjęcie ilustracyjne: rozmowa w kręgu; nie przedstawia zajęć fundacji) · Dieta a zdrowie psychiczne: co mówią badania (manifest + fakt Horizon Europe) · Jak działa program (3 × H3 Jakuba: Warsztaty i szkolenia, Integracyjne warsztaty Ciastoterapii, Programy długofalowe) · Tematy programu (7) · Kto prowadzi program · Dla kogo · CTA z linkiem do /dla-firm/.

2.5 Zdrowe wybory żywieniowe - nie daj się reklamie /programy/nie-daj-sie-reklamie/ · w-sieci-reklam.html

Źródło: w sieci reklam.docx w całości i w kolejności dokumentu. Hero wariant A (R-01): nadtytuł „W sieci reklam” + H1 Jakuba · Wpływ reklamy na dzieci (z wyróżnionym „2,5-krotnie”) · Bezpłatne materiały #materialy (2 × DownloadCard z bezpośrednim pobieraniem archiwów ZIP od klientki: „Pobierz materiały dla klas 1–3 (ZIP)”, 21,5 MB i „Pobierz materiały dla klas 4–8 (ZIP)”, 20,3 MB; bez Dysku Google, rozdz. 7.4) · Projekt w skrócie (3 × H3) · Ekspertka projektu: dr Magdalena Muc · Dlaczego ten program jest potrzebny? (link do artykułu) · Edukacja medialna i żywieniowa (wprowadzenie jako lead, 5 cech jako RowList: numer, tytuł, opis w wierszach) · Cel programu (wprowadzenie, 3 równe etapy Rozpoznawanie / Rozumienie / Tworzenie, podsumowanie oddzielone linią: pytanie po lewej, wyjaśnienie i link po prawej) · Razem możemy wyplątać dzieci z sieci reklam (CTA; przyciski wyśrodkowane w pionie, ta sama szerokość i te same marginesy co blok wsparcia) · SupportBlock z przyciskiem „Wesprzyj nasze działania” → ten sam adres płatności co „Wesprzyj” w nagłówku (rozdz. 6.1) · GrantNotice (adnotacja MEN jako tekst HTML + logo). Korekta redakcyjna: „w etamacie” → „w temacie”.

2.6 Dla firm /dla-firm/ · dla-firm.html

Źródło: dla firm.docx, 1a. Szkolenia i warsztaty dla firm.docx, 1b. CSR dla firm.docx - wszystkie trzy w całości. Szkolenia i CSR to sekcje tej strony (#szkolenia, #csr), nie osobne adresy (R-02). Hero: H1 Jakuba w dwóch stopniach („Wellbeing w firmie:” / „warsztaty, programy i współpraca CSR”), hasło klientki, zdjęcie ilustracyjne (stock: współpracownicy przy stole) · AnchorNav (Korzyści, Formy współpracy, Szkolenia i warsztaty, CSR, Kontakt) · Co zyskuje Twój zespół (6) · Dlaczego Food & Mind? (4 × H3) · Formy współpracy (2 kafelki do kotwic ze zdjęciami ilustracyjnymi + link do Nakarmionych Emocji) · #szkolenia Tematy warsztatów: 5 tematów (OfferTile z numerem i zdjęciem ilustracyjnym; 04 „Oddech i zimno”) + bloki „Szkolenia wspierające cele CSR” i „Program dopasowany” · #csr Współpraca CSR (5 korzyści jako RowList: tytuł po lewej, opis po prawej, 3 obszary, link do /programy/, CTA) · #kontakt-firmy formularz z tematem „Współpraca z firmą / CSR” + kolumna kontaktowa: karta „Dane fundacji” (nazwa i adres, e-mail z kopiowaniem, Facebook i Instagram - te same dane co na stronie Kontakt) i „Gdzie działamy”.

2.7 Oferta /oferta/ · oferta.html

Źródło: obecna strona Oferta. Hero (zdjęcie: warsztat dla dorosłych przy stole) · AnchorNav · #placowki Warsztaty dla przedszkoli, szkół i placówek terapeutycznych (2 zdjęcia, 5 form, link do Ciastoterapii) · #firmy Dla firm (tekst Nakarmione Emocje + obowiązkowy link do /dla-firm/) · #instytucje Dla samorządów, uczelni i organizacji / Instytut Food & Mind (zakres współpracy, zdjęcie z konferencji) · Dlaczego Food & Mind (4 punkty) · CTA „Zostań naszym partnerem”.

2.8 Kontakt /kontakt/ · kontakt.html

H1 · lead z obecnej strony · formularz kontaktowy (pełne stany, rozdz. 7) · Dane fundacji (nazwa, adres, KRS, NIP, REGON, e-mail z przyciskiem „Kopiuj adres”, Facebook, Instagram) · Gdzie działamy · Szybkie linki do oferty (AudienceList). Temat formularza można ustawić z adresu: /kontakt/?temat=firma (w prototypie #temat-firma).

2.9 Artykuły /artykuly/ · artykuly.html

H1 Jakuba · kategoria „Projekty fundacji” · jedna wyróżniona karta artykułu (jedyny istniejący tekst) · CTA. Lista nie udaje większej liczby artykułów; siatka kart (ArticleCard) jest w planszy UI do użycia, gdy powstaną kolejne teksty.

2.10 Szablon artykułu /artykuly/wplyw-reklamy-na-dzieci/ · artykul.html

Szablon pokazany na prawdziwym tekście: fragmenty w sieci reklam.docx (adres i H1 z planu Jakuba). Okruszki · kategoria · H1 · lead · autor „Fundacja Food & Mind” · infografika z podpisem · spis treści (desktop: przyklejony obok tekstu; telefon: akordeon nad tekstem) · 3 × H2 z nagłówków dokumentu · wyróżnione zdanie · lista numerowana · RelatedProgram · CTA. Bez czasu czytania i dat (brak danych). Uwaga SEO: tekst powiela fragmenty strony KMO; docelowo potrzebny osobny tekst artykułu (rozdz. 10).

2.11 Misja /misja/ · misja.html

Źródło: obecna strona Misja w całości. Nagłówki Jakuba: Dlaczego to robimy · W co wierzymy · Jak działamy (z wyróżnionym zdaniem) · Co potwierdzają dane (35%, 30-60%) · Kto za tym stoi (po lewej nagłówek, oba akapity i link „Poznaj nasz zespół”; po prawej jedno zdjęcie z wydarzenia fundacji misja-wydarzenie-ciastoterapia.jpg w pełnym kadrze 4:3, z brązowym prostokątem i pomarańczowym akcentem .kadra--single; na mobile zdjęcie pod tekstem; kompozycja trzech portretów usunięta 30.10.2026) · myśl przewodnia · CTA „Zmieniamy edukację od kuchni”.

2.12 Zespół /zespol/ · zespol.html

Źródło: obecna strona Zespół + poprawione zdjęcia bio od klientki. Założycielka (Magdalena Przybyłka, pełny biogram, zdjęcie Magda.jpg) · Zespół programowy (4) · Zespół operacyjny (2) · Eksperci (2; dr Magdalena Muc z linkiem do KMO) · CTA. Imię i nazwisko każdej osoby jako H3 (wymóg Jakuba). Pełne biogramy, bez skracania.

2.13 Wariant dokumentu prawnego · /standardy-ochrony-maloletnich/ · standardy.html

Szablon dla stron dokumentów (standardy, polityka prywatności, regulamin newslettera). Pokazany na treści standardów fundacji opublikowanej dziś na ciastoterapia.pl (dokument fundacji, z numerem telefonu 512 029 139), przeniesionej dosłownie, + przycisk pobrania PDF. Żadnych dopisanych klauzul.

2.14 404 · 404.html

Duże „404”, H1 „Nie znaleźliśmy tej strony”, zdanie pomocy, 3 odnośniki (Programy, Oferta, Kontakt), przycisk „Strona główna”. Teksty to propozycja UI do akceptacji. noindex, status 404.

Wspólne dla wszystkich widoków: SkipLink, nagłówek, okruszki (poza główną i 404), pas CTA w kontenerze, stopka z newsletterem.

---

3. Fundamenty

3.1 Kolory (tokeny w :root w fm.css)

Dozwolone pary (kontrast WCAG):

Zakazane: Orange jako zwykły tekst (3.20), jakikolwiek tekst Orange na Sand (2.79), biały zwykły tekst na Orange / Muted Teal (3.48 / 4.28), Orange / Orange Dark / Teal Dark na Brown (1.40-2.46; na Brown focus i tekst w Ivory), Sand jako jedyna granica karty na Ivory (1.15), kolor jako jedyny sygnał (linki podkreślone, błąd z ikoną i słowem „Błąd:”, aktywna pozycja menu z belką).

3.2 Typografia

• Nagłówki: Bricolage Grotesque 600 (H2-H3) i 700 (H1). Tekst i UI: Instrument Sans 400 / 500 / 600.
• Fonty hostowane lokalnie (WOFF2, latin + latin-ext, font-display: swap), polskie znaki sprawdzone we wszystkich wagach.
• Skala płynna clamp() między 390 a 1280 px:

• Długość wiersza tekstu ciągłego: maks. ok. 70 znaków (.prose-wrap).
• H1 dwustopniowy (.h1-split--name + .h1-split__sub) to jeden element <h1> z dwoma <span>; czytnik ekranu czyta całość.

3.3 Odstępy, siatka, breakpointy

• Skala: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 px (--s1…--s10).
• Odstęp sekcji: 112 px desktop / 64 px telefon (--section); nagłówek sekcji → treść 32 / 24 px; odstęp kart 28 / 16 px; wnętrze karty 24-28 / 20 px.
• Kontener 1200 px; margines boczny 32 px (≥ 1024), 24 px (768-1023), 16 px (< 768).
• Siatka 12 kolumn na desktopie, 4 kolumny / jedna kolumna treści na telefonie.
• Breakpointy: 480, 768, 1024 (menu mobilne poniżej 1024), makiety 1440 i 390, kontrola 320.
• Nagłówek: 80 px (≥ 1024), 64 px (< 1024), przyklejony (position: sticky; top: 0; z-index: 50, tło Ivory, bez animacji). Zmienna --header-h (80 / 64 px); wszystkie elementy z id mają scroll-margin-top: calc(var(--header-h) + 16px), więc kotwice i elementy z focusem nie chowają się pod nagłówkiem. Przyklejony spis treści artykułu: top: calc(var(--header-h) + 24px).
• Podkreślenia linków i tekstów: text-underline-offset: 4px we wszystkich komponentach (polskie znaki i litery z ogonkami nie nachodzą na linię).
• Promienie: przycisk 8 px, zdjęcie 12 px, karta 14 px, etykieta / chip pełny.
• Cele dotykowe min. 44 px (przyciski 48 px), odstęp między elementami interaktywnymi min. 8 px.
• Sekcje dzielone tłem: Ivory (podstawowe) / Sand (wyróżnione) / Brown (pas CTA, stopka).

---

4. Komponenty i odpowiedniki w Astro

Plansza system-ui.html pokazuje każdy komponent we wszystkich stanach.

---

5. Stany komponentów

---

6. Nawigacja

Pełna specyfikacja z zrzutami: nawigacja.html.

Menu (kolejność WEB 1): Programy ▾ (Ciastoterapia, W sieci reklam, Nakarmione Emocje, Wszystkie programy) · Oferta · Artykuły · Misja · Zespół · Kontakt · przyciski „Dla firm” (główny, btn--primary) i „Wesprzyj” (drugorzędny, btn--secondary: jasne tło, brązowy tekst i obramowanie) - oba stałe na każdej podstronie, „Wesprzyj” po prawej od „Dla firm”, odstęp 12 px.

Desktop (≥ 1024 px), panel „Programy” jako disclosure (nie ARIA menu):

• klik / Enter / Spacja otwiera i zamyka; aria-expanded; strzałka obraca się o 180°;
• najechanie otwiera po 150 ms, panel nie znika przy przejściu kursorem z przycisku do panelu, zamyka się 300 ms po opuszczeniu (jeśli otwarty najechaniem);
• Tab / Shift+Tab po pozycjach panelu w kolejności wizualnej; wyjście focusem poza panel zamyka go;
• Esc zamyka i przywraca focus na „Programy”; klik poza panelem zamyka;
• „Programy” nie jest linkiem; /programy/ dostępne przez „Wszystkie programy”.
• Na stronach programów „Programy” ma stan aktywny, a link do bieżącego programu aria-current="page".

Telefon i tablet (< 1024 px):

• przycisk „Menu” (ikona + słowo, 44 px) otwiera panel role="dialog", aria-modal="true", nazwa „Menu”; focus na „Zamknij”; tło strony zablokowane;
• Tab krąży wewnątrz panelu; Esc lub „Zamknij” zamyka i przywraca focus na „Menu”;
• „Programy” jako akordeon (domyślnie zwinięty), pozycje 56 px, na dole „Dla firm” i pod nim „Wesprzyj” (pełna szerokość);
• wybór linku zamyka panel; poszerzenie okna ≥ 1024 px zamyka panel.

Stopka: tło Brown, tekst Ivory, linki podkreślone, focus Ivory. Kolumny: dane fundacji (nazwa, adres, KRS, NIP, e-mail) · Strony · Programy + social media · Newsletter; dolny pas: Statut (PDF), Polityka prywatności, Standardy ochrony małoletnich, Regulamin newslettera po lewej; po prawej © i „Wdrożenie strony: Ideavo”, wyrównane w jednej linii z linkami. Na telefonie jedna kolumna, dolny pas: linki, potem © i informacja o Ideavo. Logo bezpośrednio na tle Brown, bez jasnej plakietki: plik logo ma przezroczyste tło (tak samo SVG źródłowy - brak prostokąta tła), a białe litery znaku są czytelne na ciemnym tle. Plakietkę dawało wyłącznie tło kontenera .footer__logo w CSS, usunięte 28.10.2026. W Astro: ten sam plik logo co w nagłówku, bez tła kontenera.

6.1 Adres „Wesprzyj” (Stripe) - wymaganie konfiguracyjne

Wszystkie przyciski wsparcia fundacji („Wesprzyj” w nagłówku i w menu mobilnym, „Wesprzyj nasze działania” na stronie „W sieci reklam”) prowadzą do jednego adresu płatności Stripe (np. Stripe Payment Link fundacji). Nie ma osobnej podstrony darowizn ani formularza płatności na stronie.

• Adres nie został jeszcze podany. W prototypie jest pustą stałą SUPPORT_URL w build.py; przyciski mają href="#" i data-support-missing, a kliknięcie pokazuje komunikat o brakującej konfiguracji. Nie użyto żadnego adresu zastępczego.
• W Astro: zmienna środowiskowa PUBLIC_STRIPE_DONATION_URL, czytana w jednym miejscu (np. src/config.ts) i używana przez Header, MobileMenu i SupportBlock. Wszystkie przyciski mają atrybut data-support.
• Build produkcyjny powinien zakończyć się błędem, jeśli zmienna jest pusta, żeby na stronę nie trafił martwy przycisk.
• Link otwierany w tej samej karcie, bez target="_blank"; w tekście przycisku nic nie zmieniamy.

---

7. Formularze, walidacja i komunikaty

7.1 Formularz kontaktowy (Kontakt, Dla firm)

Pola: Imię i nazwisko (wymagane, autocomplete="name") · E-mail (wymagane, email) · Nazwa placówki / firmy (organization) · Temat (wymagane, lista) · Wiadomość (wymagane) · ukryte pole-pułapka www (honeypot, poza widokiem i poza kolejnością Tab).

Lista tematów: Wdrożenie Ciastoterapii · Oferta dla placówek · Współpraca z firmą / CSR · Materiały „W sieci reklam” · Media i partnerstwa · Inne. Temat ustawiany z adresu (?temat=ciastoterapia|placowki|firma|materialy|media|inne); przyciski „Zapytaj…” na stronach programów prowadzą do formularza z wybranym tematem.

Etykiety zawsze nad polem, „(wymagane)” słownie. Pod formularzem: „Informacje o przetwarzaniu danych osobowych znajdziesz w Polityce prywatności.” (link). Treść klauzuli informacyjnej do dostarczenia przez fundację (B-13), nie została dopisana.

Walidacja:

1. Pierwsza próba wysłania: walidacja wszystkich pól, nad formularzem podsumowanie „Formularz zawiera N błędy/błędów” z listą linków do pól; podsumowanie dostaje focus.
2. Potem walidacja przy opuszczeniu pola; błąd znika w trakcie poprawiania (nie przy każdym znaku pokazuje nowy).
3. Pole z błędem: aria-invalid="true", komunikat połączony przez aria-describedby, ikona + słowo „Błąd:”.

Komunikaty (propozycja Ideavo, do akceptacji):

Stany pokazane na zrzutach: shots/form-{pusty|bledy|wysylanie|wyslano|blad}-{1440|390}.jpg, form-podsumowanie.jpg; na żywo na stronie Kontakt (ciemny pasek przeglądu).

Technicznie (do ustalenia przez Dawida, B-27): obsługa formularza na Cloudflare, odbiorca wiadomości (klientka wskazała magda@foodandmind.org, na stronie widoczny kontakt@foodandmind.org, R-07), ochrona przed spamem bez CAPTCHA wizualnej (honeypot + limit po stronie serwera).

7.2 Newsletter (stopka)

Pole „Adres e-mail” + przycisk „Zapisz się”; pod polem tekst zgody klientki z linkiem do Polityki prywatności. Stany: pusty, błąd formatu („Błąd: wpisz adres e-mail w formacie nazwa@domena.pl”), wysyłanie, sukces „Sprawdź skrzynkę i potwierdź zapis” / „Wysłaliśmy wiadomość z linkiem potwierdzającym.” (double opt-in), błąd zapisu. Wariant ze zgodą jako pole wyboru na planszy UI (R-12, decyzja prawna). Integracja MailerLite do ustalenia.

7.3 Kopiowanie adresu e-mail

Przycisk „Kopiuj adres” obok widocznego adresu; wynik ogłaszany w role="status" („Skopiowano adres.” lub „Zaznacz adres i skopiuj go ręcznie.”). Adres zawsze widoczny i zaznaczalny.

7.4 Pobieranie materiałów „W sieci reklam” (ZIP)

Źródło: 03_TRESCI_KLIENTA/materialy-kmo/ - dwa archiwa przekazane przez klientkę. Bez formularza e-mail i bez dodatkowego etapu.

Pełne sumy: 40fbea8fb9ad6696f14414fe997e9692dca5b3e7398de971885f08e5b6f5e20a (1-3), e63b6472505fa1c2e9845d887f7e87576a7dc599ca8ce8cd4dcf14d77047edc4 (4-8). Archiwa sprawdzone (unzip -t: bez błędów), nie są zamienione miejscami, zawartość i struktura bez zmian; zmieniona tylko nazwa pliku na adres bez spacji.

Wdrożenie w Astro:

1. Skopiować oba pliki 1:1 do public/dokumenty/ pod nazwami z tabeli (Astro kopiuje public/ bez przetwarzania, pliki będą pod https://www.foodandmind.org/dokumenty/…). Po skopiowaniu porównać sumę SHA-256.
2. Znacznik przycisku (jak w prototypie): ```html
   

   Archiwum ZIP, 21,5 MB

Pobierz materiały dla klas 1–3 (ZIP) `` Rozmiar na karcie zaktualizować przy każdej podmianie pliku (najprościej odczytać go w czasie budowania przezfs.statSync). 3. Nagłówki odpowiedzi:Content-Type: application/zip, opcjonalnieContent-Disposition: attachment(np. wpublic/_headersna Cloudflare: reguła dla/dokumenty/*.zip). 4. Limit Cloudflare Pages to 25 MiB na pojedynczy plik; obecne archiwa mają 20,5 MiB i 19,3 MiB. Jeśli kolejna wersja przekroczy limit, plik trzeba podać z R2 pod domeną fundacji (np. subdomena plików), nadal bez Dysku Google. 5. Nie dodawaćnoindex` do strony KMO z powodu plików; pliki ZIP nie są indeksowane jako strony.

Prototyp: w kodzie przycisku jest adres docelowy /dokumenty/…; skrypt prototypu zamienia go na ścieżkę względną i sprawdza, czy plik istnieje w danym podglądzie. W lokalnym prototypie pobieranie działa (test w Chromium: pobrany plik identyczny bajt w bajt ze źródłem). W opublikowanym podglądzie claude.ai pliki nie mogą być umieszczone (limit 16 MB na plik), więc przycisk wyświetla tam komunikat o braku pliku w podglądzie zamiast udawać pobieranie.

---

8. Klawiatura, focus i WCAG 2.1 AA

Kolejność focusu: Przejdź do treści → logo → Programy (→ 4 pozycje po otwarciu) → Oferta, Artykuły, Misja, Zespół, Kontakt → Dla firm → Wesprzyj → treść strony w kolejności wizualnej → stopka. Na telefonie: logo, Menu; w panelu: Zamknij, Programy, linki, Dla firm.

Focus: obrys 3 px Teal Dark z odsunięciem 2-3 px na jasnych tłach, Ivory na Brown; nigdy outline: none bez zamiennika.

Wymagania do zachowania przy wdrożeniu:

• jeden H1 na stronę, hierarchia nagłówków bez przeskoków (sprawdzone testem na wszystkich widokach);
• landmarki: header, nav (menu, okruszki z różnymi aria-label), main id="tresc", footer; sekcje z aria-labelledby;
• zdjęcia treściowe z opisowym alt, dekoracje alt="" / aria-hidden; logo MEN z nazwą instytucji;
• linki opisują cel („Poznaj Ciastoterapię”, nie „Więcej”); ta sama funkcja = ta sama nazwa („Napisz do nas” w pasach CTA, WCAG 3.2.4);
• linki zewnętrzne: nazwa domeny w tekście linku + ikona (aria-hidden), otwierane w tej samej karcie; jeśli fundacja zdecyduje o nowej karcie, dodać tekst dla czytnika „(otwiera się w nowej karcie)”;
• tabela porównania z <th scope>, na telefonie zamieniana na karty z tymi samymi danymi;
• reflow 320 px bez przewijania w poziomie (sprawdzone), powiększenie 200%, odstępy tekstu (SC 1.4.12) - tekst w kontenerach bez stałych wysokości;
• prefers-reduced-motion wyłącza przejścia; brak autoodtwarzania;
• formularze: etykiety, autocomplete, błędy tekstowe, podsumowanie z focusem, statusy w role="status" / role="alert";
• kontrast wg tabeli w rozdz. 3.1.

Projekt uwzględnia WCAG 2.1 AA, ale nie jest deklaracją zgodności; zgodność potwierdzają testy po wdrożeniu (rozdz. 13).

---

9. Zdjęcia

Zasada: zdjęcie przypisane do sekcji według tego, co faktycznie przedstawia, sprawdzone z kontekstem na foodandmind.org. Zdjęcia innych warsztatów nie są pokazywane jako projekt „W sieci reklam”; programy nie są mieszane.

Komponent TeamPhotos (wycofany 30.10.2026 ze strony głównej i z Misji zgodnie z poprawkami; kod i kadry zostają w prototypie na wypadek powrotu, w Astro nie wdrażać):

• Kadry wyrównane optycznie: górna krawędź głowy ok. 8-12% od góry kadru, wysokość głowy ok. 37-38% kadru w portretach bocznych i 34% w centralnym (centralny jest większy, ale twarz nie przytłacza bocznych); linia oczu w każdym kadrze na ok. 30-33% wysokości. Okulary, włosy i okulary na głowie Amelii mieszczą się w kadrze.
• Pliki mają zapas wysokości ponad kadr 4:5; kadr ustawia indywidualne object-position (--pos), więc przy innej proporcji kontenera głowy zostają na miejscu. Wartości są zapisane raz, w liście zdjęć komponentu (w prototypie KADRA_PHOTOS w build.py).
• Układ: siatka 1fr 1.32fr 1fr, wyrównanie do dolnej krawędzi, odstęp 10-16 px (telefon 8 px); centralny portret ~1,32 raza wyższy. Za portretami brązowy prostokąt (#594941, dolne 46% wysokości, od lewej krawędzi do 78% szerokości), pomarańczowy kwadrat (#D86A32, 22 px, na telefonie 16 px) przy prawym górnym rogu prawego portretu. Ta sama kompozycja na telefonie, skalowana do szerokości (boczne ok. 103 px przy 390, 82 px przy 320), bez zmiany kolejności osób.

Uwagi:

• Portret założycielki: Magda.jpg (zaktualizowany w zestawie bio) to Magdalena Przybyłka, potwierdzone porównaniem z portretem na obecnej stronie. Wcześniej błędnie pominięty (R-16 nieaktualne).
• Lokalne zdjęcia Joanny Kamińskiej i dr Magdaleny Muc różnią się od tych na obecnej stronie; użyto plików klientki (nowsze, nazwane imieniem).
• Nie użyto: „lekcja o wodzie”, „zdjęcie 1”, _MA_0112, _MA_5431 - to inne projekty („Roślinne czarodziejki w szkolnej kuchni”), nie KMO.
• Przed publikacją potwierdzić zgody na wizerunek dzieci (B-20).

9.1 Zdjęcia stockowe (ilustracyjne)

Przekazane 28.10.2026 jako komplet do sekcji szkoleń, CSR i Nakarmionych Emocji. Folder 05_ZDJECIA/stocki-foodmind/ nie istniał na dysku w chwili podmiany, więc pliki zidentyfikowano po zawartości na podstawie przesłanych zdjęć. Pozostałe przesłane zdjęcia (kobieta z kawą i burgerem, dłonie wałkujące ciasto, sałatka przy laptopie, notes z croissantami) nie mają przypisania w poprawkach i nie zostały użyte. Jedyne zdjęcie z dwoma możliwymi kandydatami to businesswoman-writing-diary-with-breakfast - użyto kalendarza z datami przy laptopie i owsiance (dosłowny „diary”), a nie notesu z croissantami; do potwierdzenia po dodaniu folderu.

Zdjęcia są ilustracjami: alty opisują to, co widać, bez sugerowania, że to zajęcia fundacji. W prototypie: kopie zmniejszone do 1600 px (bez powiększania, oryginały nienaruszone) w img/stock-<nazwa>.jpg. W Astro przygotować je z oryginałów przez astro:assets.

• Stare zdjęcie „szkolenie Nakarmione Emocje w sali konferencyjnej” ani zdjęcie zespołu z cytrusami nie są już używane (zastąpione stockami).
• Przed publikacją: potwierdzić licencje stocków (źródło i warunki użycia, ewentualny wymóg podpisu autora).

Proporcje kadrów (w CSS aspect-ratio + object-fit: cover):

Do Astro: obrazy z oryginałów przez astro:assets (AVIF/WebP, srcset, sizes), szerokości ok. 400 / 800 / 1200 / 1600; hero loading="eager" + fetchpriority="high", reszta lazy; zawsze width/height. Logo: zoptymalizowany SVG (obecny ma 2,28 MB, B-16).

---

10. SEO

Adresy zgodne z architekturą Jakuba; żadnych nowych adresów. Szkolenia i CSR są sekcjami /dla-firm/ (#szkolenia, #csr). /polityka-prywatnosci/ i /regulamin-newslettera/ są w planie Jakuba. Opcjonalna strona /wesprzyj/ z planu Jakuba nie powstaje: przyciski wsparcia prowadzą bezpośrednio do płatności Stripe (rozdz. 6.1).

Meta description: gotowe teksty w arkuszu Jakuba (zakładka „Struktura”), bez zmian. Przekierowania 301: zakładka „Przekierowania” (np. /nie-daj-sie-reklamie.html → /programy/nie-daj-sie-reklamie/, /projekty.html → /programy/). 404 i strony techniczne: noindex.

Odstępstwa od planu nagłówków Jakuba (wszystkie wynikają z braku treści albo z treści klientki):

• Główna: brak H2 „Efekty w liczbach” (brak ujednoliconych liczb, B-01) i „Najnowsze artykuły” (opcjonalny; jest jeden artykuł).
• Ciastoterapia: H3 pod „Czym jest” i „Co rozwija” nie zostały wydzielone - treść to 2 akapity i lista; H3 bez treści byłyby puste. „Jak wdrożyć”: 5 form z obecnej Oferty zamiast 4 H3 Jakuba (obecna strona wymienia też szkolenia dla terapeutów, R-19). Pominięte: „Efekty i opinie placówek”, „Najczęstsze pytania”, „Bezpieczeństwo…”, „Zajęcia kulinarne i ruch”. Dodany H2 „Edukatorzy Ciastoterapii w programie »W sieci reklam«” (z tekstu KMO).
• Nakarmione Emocje: brak H3 „Jedzenie emocjonalne…”, „Stres, zmęczenie…”, „Rola psychodietetyki…” (brak tekstów, B-24).
• KMO: kolejność wg dokumentu klientki; „Wpływ reklamy…” przed „Projekt w skrócie”; „Co robimy w projekcie” połączone z „Projekt w skrócie” (H3 Szkolenie edukatorów, Zajęcia w szkołach zachowane); „Efekty i bezpłatne materiały” → „Bezpłatne materiały” (wyników brak, B-08); pominięte: Konkurs, Harmonogram, Jak szkoła może dołączyć, Aktualności (R-14). Dodane z dokumentu: „Dlaczego ten program jest potrzebny?”, „Cel programu”, „Razem możemy…”.
• Dla firm: struktura z trzech dokumentów klientki. Zgodne z Jakubem: H1, „Co zyskuje Twój zespół”, „Formy współpracy”, „Tematy warsztatów”. Tematy to 5 tematów klientki zamiast 4 H3 Jakuba („Warsztaty dietetyczne dla firm”, „Wypalenie zawodowe i stres”, „Energia i koncentracja”, „Komunikacja i przywództwo”) - fraza „warsztaty dietetyczne dla firm” nie występuje w tekstach klientki; do decyzji Jakuba, czy dopisać ją w treści po akceptacji klientki. Pominięte: krok po kroku, raport ESG, kto prowadzi, firmy które zaufały, wycena, wolontariat, FAQ (B-10, B-11, B-02).
• Oferta: „Warsztaty dla przedszkoli i żłobków”, „…szkół”, „Dla poradni…”, „Szkolenia dla rad…” połączone w jedną sekcję zgodnie z obecnym tekstem (jedna lista form); pominięte „Dla rodziców” (opcjonalny), „Jak zamówić” (B-23); „Badania, diagnozy…” i „Partnerstwa grantowe” jako punkty listy zamiast H3.
• Artykuł: H2 to nagłówki z dokumentu KMO zamiast „Jak reklama żywności działa…”, „Jak uczyć…”, „Wnioski z projektu…”, „Źródła”. Szablon pokazany na istniejącym tekście; docelowy artykuł wymaga własnego tekstu (inaczej powiela treść strony KMO) i listy źródeł.
• Misja, Zespół, Kontakt, Programy, Standardy: zgodne z planem.

---

11. Pominięte moduły (brak potwierdzonych danych)

Nie projektowano z wymyślonymi danymi; komponenty istnieją na planszy UI i można je włączyć, gdy fundacja dostarczy treści.

---

12. Decyzje otwarte i rzeczy do dostarczenia

Decyzje (klientka / Jakub):

• R-01 wariant hero KMO (pokazany A: nadtytuł „W sieci reklam” + H1 Jakuba).
• R-07 adres widoczny (kontakt@foodandmind.org) i odbiorca formularza.
• R-12 forma zgody newslettera, MailerLite, double opt-in.
• R-17 kolejność menu (WEB 1: Programy pierwsze).
• Teksty UI zaproponowane przez Ideavo: komunikaty formularzy, 404, podpisy zdjęć w sekcji „Jak wyglądają zajęcia”, etykiety celów w AudienceList, lista tematów formularza.
• Kolory pochodne (rozdz. 3.1).

Do dostarczenia przez fundację:

• Polityka prywatności dla foodandmind.org (obecna na ciastoterapia.pl dotyczy sklepu i wymaga dostosowania) i klauzula informacyjna formularza (B-13); regulamin newslettera z poprawionym adresem (R-07); statut PDF (B-26); PDF standardów ochrony małoletnich.
• Adres strony Ideavo do informacji w stopce: nie występuje w materiałach projektu, więc nie został wpisany; prototyp pokazuje „Wdrożenie strony: Ideavo” bez linku, a po wpisaniu adresu w IDEAVO_URL (build.py) link pojawi się automatycznie.
• Adres płatności Stripe dla przycisków „Wesprzyj” (rozdz. 6.1) - fundacja przekazuje Payment Link, Dawid wpisuje go w PUBLIC_STRIPE_DONATION_URL.
• Zgody na wizerunek dzieci (B-20), licencje zdjęć stockowych (rozdz. 9.1), zoptymalizowany SVG logo (B-16).
• Treści z rozdz. 11, gdy fundacja chce włączyć te moduły.
• Dostęp do Search Console / stara mapa strony do pełnej listy 301 (B-14).

Inne ustalenia redakcyjne w makietach:

• Literówka w tekście KMO „w etamacie” poprawiona na „w temacie” (B-28) - do potwierdzenia przez klientkę.
• Zapis ekspertki: „dr Magdalena Muc” (R-15).
• Pasy CTA ujednolicone: „Napisz do nas”.
• Numer telefonu 512 029 139 występuje w standardach ochrony małoletnich; na stronie Kontakt nie jest pokazany (brak na obecnej stronie Kontakt) - do decyzji fundacji.

---

13. Testy

Wykonane na prototypie (Playwright, Chromium), shots.py, wynik 272/272:

• brak znaczników „[DO …]” na widokach, brak półpauz/pauz w tekstach UI, jeden H1, poprawna hierarchia nagłówków, wszystkie obrazy się ładują - każdy widok;
• brak przewijania w poziomie przy 1440, 1024, 768, 390, 320 - każdy widok, plansza UI i nawigacja;
• panel Programy: klik, Esc z powrotem focusu, Tab po panelu, zamknięcie przy wyjściu focusem, otwarcie najechaniem, ciągłość przy przejściu kursorem, zamknięcie po opuszczeniu;
• SkipLink pierwszy w kolejności; nagłówek 80 px; przy 1024 px menu i dwa przyciski w jednym wierszu;
• na telefonie główne wezwanie do działania widoczne na pierwszym ekranie (7 widoków);
• menu mobilne: dialog, focus na „Zamknij”, pułapka focusu, Esc z powrotem focusu, akordeon Programy, 320 px;
• formularz kontaktowy: podsumowanie z focusem, 4 błędy z aria-invalid, walidacja przy opuszczeniu pola, wysyłanie, sukces z focusem, temat z adresu;
• newsletter: błąd formatu, sukces;
• pobieranie ZIP: oba przyciski pobierają właściwe archiwum, plik identyczny ze źródłem (SHA-256), brak linków do Dysku Google;
• stopka: kontener logo bez tła;
• „Wesprzyj” na każdym z 14 widoków: widoczny obok „Dla firm” przy 1440 i w menu mobilnym przy 390; brak przełącznika wariantów; wszystkie przyciski wsparcia mają jeden adres;
• poprawki kompozycji (29.10.2026) przy 1440, 390 i 320: 5 wyróżników „W sieci reklam” w jednej siatce z wyrównanymi tytułami, 3 etapy równej szerokości, CTA i „Wesprzyj” z tymi samymi marginesami, 5 korzyści CSR w wierszach, kolumna kontaktowa na Dla firm, stopka z linkami i © w jednej linii oraz informacją o Ideavo;
• zdjęcia stockowe: każde z 9 zastosowań ma właściwy plik przy 1440 i 390, object-fit: cover, opis alternatywny; w tematach szkoleń nie ma placeholderów;
• strona główna: „Zespół i eksperci” bez kompozycji zdjęć, tekst w dwóch kolumnach przy 1440 i jednej przy 390/320; podkreślenia z offsetem 4px na 14 widokach; nagłówek przyklejony po przewinięciu (1440, 390, 320), panel „Programy” działa po przewinięciu, nagłówek sekcji z kotwicy nie jest zasłonięty, menu mobilne przykrywa nagłówek;
• Misja „Kto za tym stoi”: tekst po lewej i jedno zdjęcie z wydarzenia (pełny kadr 4:3) po prawej przy 1440, zdjęcie pod tekstem przy 390/320; portrety osób na stronie Zespół (9) i na głównej (4) zostają;

Przegląd wizualny: wszystkie 14 widoków obejrzane na zrzutach 1440 i 390 (i 320); poprawione m.in. łamanie bloku edukatorów na Ciastoterapii przy 768-1024 px, kafelki tematów na telefonie, układ faktów na Misji, wyrównanie kart CSR.

Do wykonania po wdrożeniu (lista kontrolna Jakuba + 04_WCAG_SEO_CHECKLIST.md):

• axe / WAVE na każdym szablonie; test tylko klawiaturą; VoiceOver (iOS, macOS) i NVDA na głównej, stronie programu, Dla firm i Kontakcie;
• powiększenie 200% i 400% (reflow), odstępy tekstu SC 1.4.12, orientacja pozioma telefonu;
• formularz i newsletter z prawdziwym backendem: błędy serwera, spam, potwierdzenie zapisu;
• Lighthouse / Core Web Vitals (LCP hero, CLS przez stałe proporcje obrazów);
• crawl (Screaming Frog): statusy 200, canonical, meta, nagłówki, przekierowania 301, noindex na 404; walidacja danych strukturalnych;
• sprawdzenie w Safari i Firefox (prototyp testowany w Chromium).