Portal NIO 3.0 · jedno źródło prawdy
Kompletny system wizualny portalu Narodowego Instytutu Onkologii: każdy komponent starego serwisu zinwentaryzowany z realnych treści, każdy nasz nowy wzorzec opisany i przypisany do kanonu. Na tej stronie bazują wszystkie widoki — publiczne, panel i moduły jednostek.
Pełna paleta z :root oryginalnego style.css (linia 4863) plus kolory używane w komponentach poza :root. W portalu 3.0 kolory wolno brać WYŁĄCZNIE z tokenów — każdy hex dopisany w widoku to dług, który kiedyś rozjedzie serwis.
Trzy filary marki: granat #21425D, koral #FC6558 i rodzina beżów na złamanej bieli. Tekst nigdy nie jest czysto czarny.
--bg-primary#21425DGranat NIO — kolor wiodący: header, stopka, sekcje, przyciski, mega menu
--bg-secondary#FC6558Koral NIO — akcent: CTA, hovery, maski hero, wyróżnienia
--nio-navy-deep#12364ECiemny granat — obrysy przycisków hero, hovery menu (--hl-primary z kryciem CC)
--nio-navy-ink#212E38Najciemniejszy — tekst treści na beżu, kółka strzałek
--nio-navy-soft#2A4B66Jaśniejszy granat — tło karty newslettera w stopce (#294D69), obramowania
--text-primary#35424CPodstawowy kolor tekstu treści — NIE czysty czarny
--text-dark#4A4741Ciepła ciemna szarość — teksty na tłach beżowych
--bg-light#FEFDFAZłamana biel — tło całej strony (body)
--bg-beige#F6F3EEBeż — nagłówki akordeonów, karty osób, cytaty, sekcje na przemian
--nio-cream#FEFBF6Krem — karty hero (z blur), tagi, tekst na granacie
--nio-line#E1DFDALinie podziału, obramowania kart, tekst stopki
--bg-info#FFB096Łosoś — alerty informacyjne (.alert-info, .nio-alert-warning)
Pastelowe tła alertów treściowych oraz warianty hover kolorów głównych (krycie CC = 80%). Używane w infoboksach .alert-* i maskach hero.
--bg-success--bg-warning--bg-danger--hl-primary--hl-secondaryJeden font: Work Sans w wagach 400 / 500 / 600 — innych wag nie dogrywamy. Nagłówki są LEKKIE (najczęściej waga 400) z ujemnym letter-spacingiem — to najbardziej rozpoznawalny rys serwisu. „Pogrubienie” w tym systemie to waga 500, nie 700.
Cztery rozmiary tytułów. Wzorzec „tytuł dwukolorowy”: druga linia w <span> o obniżonym kryciu (h32 → #35424CB2, h28 → #21425DCC).
Granatowe kapitaliki 18px/500 z rozstrzelonym światłem — stoją NAD tytułem (np. „DLA PACJENTA” nad title-h42). Trzy klasy o identycznym wyglądzie — w 3.0 scalamy do jednej.
Bazowy akapit: 18px, interlinia 1,5, letter-spacing -0.02em, margines dolny 30px, kolor #35424C. Tekst pomocniczy .info-text: 16px, #212E38. UWAGA-PUŁAPKA: klasy pages-list-content oraz info-list NIE MAJĄ własnego CSS w oryginale — wyglądają dobrze tylko przez dziedziczenie; w 3.0 dostają jawną definicję.
Na pierwszą wizytę pacjent zgłasza się do rejestracji z dokumentem tożsamości oraz skierowaniem. Rejestracja stacjonarna czynna jest od poniedziałku do piątku.
Tekst pomocniczy 16 px — objaśnienia, adresy, przypisy przy zdjęciach i w kartach kontaktowych.
Semantyczny blockquote to beżowa karta (radius 8px, padding 3rem) — standard wypowiedzi ekspertów w aktualnościach. Obok istnieje kompozycja ozdobna quote-text/author (italic, granat) z szablonu Element K.
Program przesiewowy jest przeznaczony dla osób bez objawów choroby, które znajdują się w grupie podwyższonego ryzyka.
„Wczesne wykrycie nowotworu daje największe szanse na pełne wyleczenie.”
Płaskie ikony liniowe: własne SVG layoutu (strzałki, pobieranie, plik, wyszukiwanie, uwaga) + Font Awesome w treściach (chevrony, koperta, telefon, socialmedia). ZAKAZ emoji i ikon wielokolorowych — obowiązuje w całym portalu.
arrow-down.svg
arrow-right-light.svg
arrow-right.svg
arrow.svg
download.svg
file.svg
grid.svg
hamburger.svg
home-dark.svg
home-light.svg
list.svg
search.svg
sort.svg
uwaga.svgKontener treści 1314px (Bootstrap 5.3 grid — oryginał na nim stoi). Promienie: karty 6-10px, przyciski-pigułki 30-100px, wyjątek: kafle nawigacyjne 28px. Cienie zawsze subtelne (0 4px 6px / 0 10px 20px, krycie ≤10%). Sekcje treści na przemian: złamana biel / beż / granat.
Szkielet każdej odsłony: header z top-barem i mega menu, hero w pięciu realnie używanych wariantach z systemem masek, okruszki, stopka z newsletterem. Liczby wariantów hero pochodzą z bazy — nie z szablonów (szablonowy page-head-big NIE jest używany na żadnej z 213 opublikowanych stron).
Pas 850px ze zdjęciem, tytułem 88px i kartami-„szkłem” (rgba(254,251,246,.8) + blur 24px). UWAGA: tabela website_slides jest PUSTA — „slider” to w praktyce statyczny hero z jednym tłem. Karty linkują do najważniejszych ścieżek pacjenta.
W służbie zdrowiu i nauce
Rozkład zmierzony na opublikowanych stronach. Wariant niski (bez zdjęcia, border-top 1px #CBCBCB) jest DOMYŚLNY i najczęstszy. HeaderContent bywa bogaty — np. strona Kliniki niesie w hero kartę kontaktową z przyciskiem „Zobacz na planie”.
Trzy osie konfiguracji nakładki na zdjęcie: typ (jednolita/gradient), kolor (ciemna/jasna/granat/koral) i intensywność (krycie .4/.6/.8). Sterowane z CMS przez header_settings — w 3.0 zachowujemy identyczny mechanizm.
18px / waga 500 / kolor #143254B2 (granat 70%). Zaczynają się ikoną domu (home-dark.svg na jasnym, home-light.svg na zdjęciu), ostatni element z klasą .active. Występują samodzielnie (wariant page-head-breadcrumb) albo wewnątrz hero.
Menu „Dla pracowników” w górnym pasku: Intranet, poczta, systemy wewnętrzne. Otwierany klasą .nio-dd--open (JS), wariant mobilny z ikoną użytkownika. Kliknij, żeby przetestować.
Paski komunikatów całoserwisowych (awarie, przerwy w pracy infolinii): warning na łososiowym #FFB096, primary na granacie; 14px, przycisk zamknięcia. Pod hero strony głównej dodatkowo „niezbędnik” — szybkie linki (inline CSS w sekcji CMS; uwaga: używa czerwieni #EF4D3C zamiast koralu — do decyzji przy unifikacji).
W dniu 07.05 w godz. 14:00-16:00 infolinia będzie niedostępna.
Trwa rekrutacja do programu badań przesiewowych płuc.
Granatowy pas: karta newslettera na tle #294D69 (input 520px, transparentny, animowane podkreślenie przy focus), kolumny linków (h6 + listy), dane kontaktowe, social (FA brands jako inline SVG), pasek dolny z BIP. Tekst w kolorze linii #E1DFDA.
Sticky pasek 64px z przewijanymi aktualnościami (nawigacja poprzedni/pauza/następny + modal szczegółów) — cały HTML+CSS+JS siedzi inline w rekordzie sekcji CMS, poza systemem. W 3.0: przenieść do arkusza i komponentu, zachowując wygląd. Widget „do góry” — kółko z chevronem, prawy dolny róg.
Demo poglądowe — oryginalny ticker działa na JS z rekordu CMS; tu pokazany stan statyczny.
Jeden wzorzec pokrywa ~160 z 286 stron i jednostek: sekcja article-section z wierszem 4/8 — wąski sidebar (nadtytuł + tytuł, w jednostkach menu kotwic) i szeroka kolumna treści. To pierwszy komponent, który odtwarzamy w 3.0.
Kanoniczny szkielet podstrony: w sidebarze kapitalikowy nadtytuł i tytuł title-h42, w treści akapity pages-list-content. Na stronach sidebar zajmuje 4 kolumny, w jednostkach 3. Sekcje układane na przemian na bieli i beżu.
Na pierwszą wizytę pacjent zgłasza się do rejestracji z dokumentem tożsamości oraz skierowaniem od lekarza.
Rejestracja stacjonarna czynna jest od poniedziałku do piątku w godzinach 7:30-18:00.
Nawigacja wewnątrz strony jednostki: nagłówek kategorii (KLINIKI), pozycja z chevronem i rozwijane kotwice sekcji (Dane kontaktowe, Informacje ogólne, Nasz Zespół…). Scroll-spy podświetla aktywną kotwicę; przy przewijaniu menu dostaje wariant sticky z blurem. Kliknij pozycję, by zwinąć/rozwinąć.
Treść jednostki dzieli się na segmenty z id — cele kotwic menu bocznego. Pierwszy segment to zawsze „Dane kontaktowe”: tabela kontaktowa obok zdjęcia budynku (radius 10px).
Wszystkie przyciski serwisu to pigułki (radius 30-100px) w trzech rodzinach + linki tekstowe ze strzałką. Uwaga: strzałka bywa pisana znakiem „→” w treści — w 3.0 ujednolicamy do ikony SVG.
article-button: wypełniony granatem (CTA w artykułach). research-button: obrys 2px #12364E, waga 500 (sekcje naukowe, akordeony klinik). contact-button: obrys granat 14px (bloki kontaktu i hero). Pokrewne: btn-read-more (karty hero) i calendar-btn („Zobacz wszystkie aktualności”).
Trzy niezależne implementacje tej samej idei: podkreślony link akcji (event-link), strzałka przy nazwiskach kadry (arrow-link), link z obramowaniem (custom-border-text). W 3.0: jeden komponent „link akcji” z wariantami.
Beżowy kafel radius 28px (jedyne odstępstwo od promieni 6-10px), tytuł 32px, w rogu kółko 40px ze strzałką — na hover kółko koraleje, strzałka obraca się o -45°. Mimo jednego użycia to najbardziej dopracowany kafel serwisu — kandydat na standard nawigacji kategorii w 3.0.
Listy aktualności używają kółek 50px (obrys 2px #ccc, aktywna wypełniona #e0e0e0) generowanych sekcjami CMS; obok żyje drugi, niezależny zestaw pagination-container. W 3.0 zostaje jeden system — wizualnie wariant kółek.
Największy dług spójności starego serwisu: CZTERY niezależne implementacje akordeonu. W 3.0 budujemy JEDEN komponent z trzema wariantami (treściowy / sekcyjny / lista osób) na natywnym details/summary — wizualnie 1:1 z oryginałami.
Beżowy nagłówek (radius 6px, hover #EDEDED) z tytułem title-h28 i tekstową ikoną „>” obracającą się o 90°. Renderuje też FAQ i „Dobry posiłek”. Kliknij nagłówek.
Duże „rozdziały” strony jednostki (Publikacje naukowe, Zespół): pełny tytuł title-h42 między liniami 1px #41444A, po prawej kółko 40px na beżu ze znakiem +. Kliknij nagłówek.
Treść rozdziału — listy publikacji, opisy, karty zespołu.
Dwukolumnowa lista nazwisk z tytułami naukowymi, wiersze oddzielone liniami, opcjonalna strzałka przy osobach z podstroną. Nazwa rodziny celowo z literówką („accordition”) — tak jest w produkcyjnym CSS; w 3.0 klasa dostaje poprawną nazwę z aliasem zgodności.
Najmłodsze strony używają natywnego HTML — zero JS, dostępny z klawiatury. To docelowy MECHANIZM akordeonu 3.0 (details/summary), który dostanie skórki wariantów 1-3.
Molecular profiling of neuroendocrine tumors in a national cohort
Journal of Clinical Oncology, 44(2)
Najważniejszy komponent komunikacji z pacjentem: karta alert z ikoną i listą kontrolną. Pięć wariantów kolorystycznych na wspólnej geometrii (radius 8px, padding 40px, ikona 32px).
Domyślny wariant: obrys 2px w kolorze tekstu. alert-primary: granat z białym tekstem i ikoną info-white. alert-info: łosoś #FFB096. Pastelowe success/warning/danger z tokenów stanów. Listy .checklist żyją wyłącznie wewnątrz alertów.
Aby wizyta przebiegła bez zakłóceń, prosimy:
alert-info — łosoś
alert-success
alert-warning
alert-danger
Miękka karta „Skontaktuj się z nami”: kapitalikowa etykieta granatowa + tekst. Szablon CMS „Kontener lightblue z przyciskiem” — wariant z CTA.
Rozumiemy, jak trudny i stresujący może być czas diagnozy. Nasz zespół odpowie na pytania dotyczące leczenia dzieci.
Zadzwoń: 22 546 20 00Standard załączników to wiersz pobrania z ikoną pliku i rozszerzeniem — na hover CAŁY wiersz robi się granatowy. Danych tabelarycznych serwis prawie nie trzyma w <table> (2 strony!) — używa wierszy grida.
Wiersz-link: ikona pliku, nazwa (info-text), rozszerzenie (.PDF/.DOCX), ikona pobrania. Hover: tło granatowe, tekst biały, ikony w negatywie, ikona pobrania rośnie. Najedź na wiersz.
Niezależna implementacja tej samej idei co wiersz pobrania (strona Wewnętrznego Systemu Zarządzania Jakością). W 3.0: scalamy z file-download-container, kategorie zostają jako nagłówki grup.
Procedury ogólne
PO-01 Nadzór nad dokumentacjąPO-02 Audyty wewnętrzneResponsywna „tabela” bez <table>: nagłówek znika na mobile, wiersze z liniami, przycisk „więcej” prowadzi do jednostki.
Wykaz z kolumnami: lp / numer / tytuł / kierownik / daty / agencja / kwota (bold #1d3f91). Na mobile kolumny dostają etykiety ::before („Kierownik:”, „Kwota:”), nagłówek jest sticky.
Serwis pokazuje ludzi w czterech formach: karta ze zdjęciem (kierownictwo), lista nazwisk (zespół), karta koordynatora z filtrowaniem oraz tabela kontaktowa. Wzorzec „rola → linia → tytuł naukowy → nazwisko” powtarza się wszędzie.
Beżowa karta: zdjęcie 237×310 (object-fit cover, kadr od góry, radius 4px), rola kapitalikami 14px, pozioma linia #D8D8D8, tytuł naukowy 20px, nazwisko 32px. Kontakt jako doctor-phone z linkami event-link.
Specjalista onkologii klinicznej. Przyjmuje w ramach Poradni Onkologicznej.
Pionowa karta z dużym zdjęciem i stopką rola+nazwisko, min-height 400px. Wariant bio-team-card (Biobank) — uproszczony, z CSS inline.
Karty koordynatorów z żywym filtrem (atrybut data-search po nazwisku i klinice), kontakt z ikonami koperty/telefonu. CSS był inline — w 3.0 wchodzi do arkusza.
Klinika Nowotworów Piersi i Chirurgii Rekonstrukcyjnej
mgr Katarzyna Zawadzka
Wiersze etykieta-wartość rozparte na całą szerokość, etykiety kapitalikami, wartości granatowe z hoverem koralowym, linie #D8D8D8. Demo — patrz też segment „Dane kontaktowe” w grupie 04.
Karty list: aktualność (przygaszony granat), program NSO (obraz z overlayem), lokalizacja (beż z kółkiem-strzałką), logotypy partnerów. Wspólny język: radius 6-8px, subtelny cień, hover z lekkim uniesieniem lub przyciemnieniem.
Tło rgba(6,49,77,.1), miniatura 420×300 z zaokrąglonym topem, tagi na kremie, tytuł 28px z ujemnym światłem, data #255E6E. Hover: ciemniejsze tło + podkreślony tytuł. Wariant wyróżniony (sekcja 210) — bez zdjęcia, większy tytuł.
Na granatowym pasie (h2 56px na kremie): karty obrazkowe 370px z pigułką kategorii na zdjęciu i overlayem z tytułem + kółkiem-strzałką. Hover: scale 1.02 i cień.
Beżowa karta #F7F3EE z tytułem 24px i kółkiem 40px (bg #FEF6EE, znak „>” w ::before, hover scale 1.1). Obraz lokalizacji z tagiem-etykietą na zdjęciu.
Dwa tryby: karuzela logotypów z przyciskami prev/next (home: „Organizacje i Programy”, „Fundusze zewnętrzne”) i statyczna siatka na stronie Partnerów. Loga monochromatyczne lub oryginalne na białych kaflach.
Zdjęcia w treści mają jeden standard (pełna szerokość, radius 10px). Galerie działają na lightboksie z sekcji systemowej, karuzele na wspólnym kółku-strzałce. Wideo w treściach praktycznie nie ma — osadzenia to mapy Google i flipbooki.
Obraz na pełną szerokość kolumny, radius 10px. W CMS wstawiany placeholderem imagePath — system generuje miniatury (np. thumb=420x300 dla kart).
Kafle miniatur w granatowej sekcji article-section bg-primary; klik otwiera lightbox (vendor plyr/lightbox z layoutu). Galerie podpinane z CMS przez pole pictures.
Wspólny mechanizm przewijania: kółka z chevronami po bokach, treść w carousel-inner. Używany dla wydarzeń, logotypów i galerii multimedialnej.
Mapy dojazdu (Kontakt, oddziały) i flipbook raportu PCMH. W 3.0 osadzenia dostają fasadę zgodną z RODO (klik → załaduj) i wspólną ramkę radius 10px.
Poza newsletterem w stopce serwis ma jeden formularz treściowy (zapisy na badania profilaktyczne, z PESEL-em w 11 kratkach) i cztery wyszukiwarki kontekstowe. Wyszukiwarka globalna to pełnoekranowy popup React.
Jedyny formularz w treściach: pola tekstowe + PESEL jako 11 pojedynczych kratek (maxlength=1, auto-przeskok). W 3.0 przechodzi na wspólne pola formularzy z walidacją i dostępnością.
Cztery poziomy szukania: pasek w top-barze, pełnoekranowy popup („Szukaj artykułów, wpisów, stron…”), szukajka sidebra jednostki i filtry żywe na stronach specjalnych (publikacje Biobanku z licznikiem wyników, koordynatorzy). W 3.0: jeden komponent input-szukajki w trzech rozmiarach.
Strony-narzędzia zbudowane poza systemem CSS (style inline w treści): rejestr badań klinicznych, publikacje Biobanku, nabory grantowe, kalendarium wydarzeń i książka kontaktów (React AProAdmin). W 3.0 każdy dostaje miejsce w arkuszu i wspólne prymitywy.
Sortowalna tabela z ikoną jednostki w łososiowym kółku, protokołem, biomarkerami jako badge i linkiem do ClinicalTrials.gov. Min-width 800px w poziomym scrollu na mobile.
| Jednostka | Badanie | Biomarkery | Rejestr |
|---|---|---|---|
Klinika Nowotworów Piersi | Badanie III fazy — terapia celowana HER2+ Protokół: NIO-2026-014 | HER2+BRCA n/d | NCT0482… |
Karta naboru: badge terminu („do 21.07.2026”) i agencji (NCBR/NCN na granacie), tytuł, treść po rozwinięciu. Natywny details — wzorzec akordeonu 3.0.
Oś dat (kafelki dzień+numer, aktywny na granacie) + wiersze wydarzeń z godziną, tagami i linkiem. Komponent dynamiczny React — w 3.0 wymaga odpowiednika funkcjonalnego, nie tylko stylu.
Filtrowana lista telefonów i e-maili: select kategorii, szukajka, wiersze z etykietą kategorii. Komponent dynamiczny — odpowiednik funkcjonalny w 3.0.
Dzienny jadłospis w akordeonie: kolumny diet (lekkostrawna / druga), posiłki jako zdjęcia 400×400 w lightboksie z etykietą (Śniadanie / Obiad / Kolacja).
Home to 14 sekcji CMS w stałej kolejności. Tabela pokazuje realny stan z bazy — łącznie z sekcją multimedia, która jest WYŁĄCZONA, i pustą tabelą slajdów (hero jest statyczny).
Kolumna „Komponent” wskazuje grupę katalogu, w której sekcja ma swoje demo.
| # | Sekcja | Co to jest | Komponent |
|---|---|---|---|
| 1 | slider | Hero statyczny 850px (website_slides pusta) | grupa 03 — hero |
| 2 | alertbox | Niezbędnik pacjenta (szybkie linki) | grupa 03 — alerty |
| 3 | about | „Największa w Polsce placówka…” (intro) | typografia |
| 4 | homeexamination | Badania — wariant mobilny (.no-desktop) | — |
| 5-6 | profilactic / clinical | Pasy 50/50 obraz + tekst | media / typografia |
| 7 | newsMain | Aktualności: wyróżniony + karty | grupa 10 — news-box |
| 8 | links | Karuzela „Organizacje i Programy” | grupa 10 — logotypy |
| 9 | nso | Granatowy pas NSO + karty obrazkowe | grupa 10 — nso-card |
| 10 | locations | „Jeden Instytut, cztery lokalizacje” | grupa 10 — location-card |
| — | multimedia | Galeria — WYŁĄCZONA (published=0) | grupa 11 |
| 11 | education | Centrum Edukacyjno-Konferencyjne (pas 50/50) | — |
| 12 | calendar | Kalendarium React nio_timeline | grupa 13 |
| 13 | funds | Karuzela „Projekty i fundusze zewnętrzne” | grupa 10 |
| 14 | history | Patronka — Maria Skłodowska-Curie | — |
69 wzorców zbudowanych w widokach roboczych (jednostki naukowe, pracownia, sprawozdanie, cennik, ZMK, DiLO, media hub, CEK) — tu pokazujemy flagowe. Pełna lista z snippetami: analiza/INWENTARZ-NOWE.md. Piętnaście z nich to unikaty bez żadnego odpowiednika w starym serwisie.
Granatowy pas liczb kluczowych pod hero — luka, której stary layout nie miał. Liczby animują się przy wejściu w viewport; dostępność: prefers-reduced-motion wyłącza animację.
Dwie warstwy narracji na jednej stronie: „Dla ciekawych” (język popularny) i „Dla badaczy” (metodyka, aparatura, protokoły). Przełącznik pływa w rogu ekranu; stan przełącza klasę na kontenerze. Kliknij, żeby przetestować.
Szukamy w krwi pacjentów mikroskopijnych śladów nowotworu — trochę jak odcisków palców, które komórki rakowe zostawiają, zanim guz będzie widoczny w badaniach obrazowych.
Analiza ctDNA metodą ddPCR oraz sekwencjonowania NGS paneli genowych (czułość 0,1% VAF); walidacja na kohorcie 300+ próbek z biobanku NIO-PIB, protokoły zgodne z ISO 20186.
Publikacje grupowane rocznikami (2026 → starsze), każda z pełną afiliacją i linkiem DOI/PubMed. Wyszukiwarka publikacji auto-otwiera roczniki z trafieniami. Kanon akordeonu 3.0: details/summary.
Circulating tumor DNA dynamics during neoadjuvant therapy
Nature Communications, 17
Żywy filtr po nazwisku/roli, karta z identyfikatorem ORCID i fallbackiem inicjałów, gdy brak zdjęcia (w legacy brak zdjęcia = dziura). Decyzja z mapy: wygląd karty scalamy z legacy team-card.
Wzorzec „znajdź w dużym zbiorze”: sticky pole odporne na polskie znaki (NFD, ł→l), chipy kategorii z licznikami pozycji, podświetlenie trafień. Trzy niezależne implementacje — w 3.0 jeden konfigurowalny komponent. Kliknij chip.
…rezonans magnetyczny piersi z kontrastem — wynik z podświetleniem trafienia
Zero zależności: poziome słupki czystym CSS-em i pełny silnik SVG (słupki 2025 + linia 2024 + tooltipy + animacje wejścia). Dane w jednym obiekcie JS — podmiana liczb bez dotykania markupu. To biblioteka wykresów portalu 3.0.
Film ładuje się dopiero po kliknięciu (wydajność + RODO, domena nocookie). Suwak porównuje obraz mikroskopowy przed/po barwieniu — przeciągnij po demie.
Pacjent szuka jednego: numeru. Karta stawia telefon w rozmiarze nagłówka, z godzinami dostępności pod spodem. Mapa unifikacji: wzorzec dla wszystkich poradni 3.0 (legacy miał suche listy contact-item).
pon.-pt. 7:30-18:00 · zapisy także przez e-rejestrację
System rezerwacji sal Centrum Edukacyjno-Konferencyjnego: publiczny kalendarz zajętości, wniosek z taryfami i kalkulacją, panel administracyjny z rozliczeniami. Wchodzi do 3.0 jako moduł pod uprawnieniami jednostki (stary AProBooking miał puste tabele). Stylistyka „formalna” (radius 3px) — celowa, zostaje wariantem aplikacyjnym.
Nota: uczciwe oznaczenie pochodzenia danych (np. „wartości odczytane z wykresów — robocze”). Znacznik .todo: widoczna żółta plomba na treści do uzupełnienia przez klienta — wychwytywana skanem przed publikacją.
Kierownik pracowni: [DO UZUPEŁNIENIA — portret od klienta]
Redaktor składa stronę bez dotykania kodu: (1) HERO — kicker, tytuł z drugim wierszem w kolorze akcentu, lead, dwa CTA z wyborem ikony i celu-kotwicy, statystyki count-up; (2) MENU NAWIGACYJNE pod hero — włącz/wyłącz, pozycje ręczne albo generowane automatycznie z sekcji strony (sticky pasek z aktywną kotwicą); (3) MOTYW — 4 gotowe zestawy (Żywienie, Badania kliniczne, Onkologia, Niebieski) + zaawansowana paleta 9 tokenów per strona. Wszystko z podglądem na żywo. To jest kanon edycji stron w panelu Portal 3.0 — motywy realizują ideę kolorów sekcyjnych na wspólnym szkielecie granat+beż.
Demo poglądowe efektu na stronie publicznej: hero złożony z pól edytora + pasek menu z sekcji + karty motywów.
Sekcje tematyczne wykształciły własne akcenty: zieleń Żywienia #3A9D5C i teal (4 niespójne odcienie → proponowany #1F9E8F). Rekomendacja: zalegalizować jako KOLORY SEKCYJNE — akcent modułu na bazie granatowo-beżowego szkieletu. Do decyzji klienta.
#3A9D5C#1F9E8F (unifikacja 4 teali)zawsze granat + koralKażdy nasz wzorzec zderzony z odpowiednikiem legacy i rozstrzygnięty: co jest kanonem 3.0, co scalamy, a gdzie wygrywa wersja legacy (spójność portalu ważniejsza od nowinki). Wybór 20 kluczowych decyzji — pełna mapa (48 pozycji) w analiza/INWENTARZ-NOWE.md.
PRZYJĄĆ NASZ = komponent NOWE staje się kanonem. SCALIĆ = wygląd legacy + mechanika NOWE. ZASTĄPIĆ WERSJĄ LEGACY = nasz wariant schodzi ze sceny.
| Komponent NOWE | Odpowiednik legacy | Decyzja |
|---|---|---|
| Hero jednostki (kicker + tagline + CTA) | .article-hero-section / .page-head | SCALIĆ — siatka legacy 1:1, warianty z NOWE jako rozszerzenie |
| Pasek statystyk z licznikami count-up | .highlight-number (statyczne) | PRZYJĄĆ NASZ — jeden silnik liczników (IO + rAF) |
| Karta kierownika z ORCID (.leader) | .doctor-container / .cadre-* | SCALIĆ — typografia legacy + fallback inicjałów i ORCID z NOWE |
| Zespół z wyszukiwarką filterTeam | .team-card (bez szukajki) | SCALIĆ — wygląd legacy + nasza wyszukiwarka data-q |
| Akordeon publikacji z DOI | tab-accordion / accordion / accordition (3 duplikaty!) | PRZYJĄĆ NASZ silnik; jedna klasa nio-accordion + skórki legacy |
| Modal jednostki (.nm-overlay) | .popup / .popup-container | PRZYJĄĆ NASZ (backdrop-blur, ESC, klik w tło) |
| Wyszukiwarka cennika (chipy + highlight) | .sidebar-search + wyszukiwarka globalna | PRZYJĄĆ NASZ lokalnie; globalna zostaje silnikiem portalu (143 tys. zapytań!) |
| Lista wydarzeń z filtrami (.evt + .chipf) | .event-row / .calendar-section | SCALIĆ — kalendarz home z legacy, lista filtrowana NOWE dla archiwów |
| Silnik wykresów SVG combo (DiLO) | brak (obrazki wykresów) | PRZYJĄĆ NASZ — biblioteka wykresów 3.0 |
| YouTube facade (nocookie) | Plyr (biblioteka wideo) | PRZYJĄĆ NASZ — wydajność i RODO; Plyr wycofać |
| Sticky nav kotwic + TOC scroll-spy | .sticky-submenu / .sidebar-menu (statyczne) | SCALIĆ — klasy legacy, zachowanie (blur, scroll-spy) z NOWE |
| Breadcrumb | .article-breadcrumbs (ikona domu) | ZASTĄPIĆ WERSJĄ LEGACY — spójność portalu |
| Karuzela aktualności (echos) | .carousel-controls | ZASTĄPIĆ WERSJĄ LEGACY — spójność ze stroną główną |
| Pliki do pobrania (karty) | .file-download-container | ZASTĄPIĆ WERSJĄ LEGACY + wariant PDF i DOCX obok siebie z NOWE |
| Przełącznik Popularnie/Naukowo | brak | PRZYJĄĆ NASZ — flagowy unikat 3.0 |
| Suwak przed/po (mikroskopia) | brak | PRZYJĄĆ NASZ — unikat |
| Moduł rezerwacji CEK (formularz + kalendarze + panel) | AProBooking/AProForms (tabele puste) | PRZYJĄĆ NASZ jako moduł 3.0 pod uprawnienia per jednostka |
| Nota/callout metodologiczna | .alert / .alert-section | SCALIĆ — warianty semantyczne na bazie naszej noty |
| Karta poradni z wielkim telefonem | .contact-item (suche listy) | PRZYJĄĆ NASZ — wzorzec akcji pacjenckiej dla poradni |
| Szablony e-mail 640px | AProMessages (gołe templatki) | SCALIĆ — nasz layout jako mail_brand NIO w module wiadomości |
Najważniejsze odstępstwa od palety wykryte w warstwie NOWE — naprawiane przy wchłanianiu widoków (etap 5), nie doraźnie.
| Rozjazd | Gdzie | Plan |
|---|---|---|
| Font Inter zamiast Work Sans | 4 panele React (badania, żywienie, struktura, hub) | globalna podmiana na Work Sans |
| Obca paleta indygo/slate (#6366F1, #0F172A) | nio-struktura (cały panel) | mapowanie na granat/koral — 90% w bloku :root; presety NIO już są w ThemeEditor |
| 4 niespójne teale (#1F9E8F/#1F8D7F/#2FA98C/#0D7377) | pracownia, zmk, hub, CEK | jeden teal #1F9E8F jako kolor sekcyjny |
| Odcienie hover koralu (#E24B3E/#E0524A/#E55A4D/#EF4D3C) | cennik, koordynatorzy, badania, piknik + maile NIO | token --coral-hover: #E24B3E |
| 4 czernie tekstu + 6 szarości muted | wszystkie widoki statyczne | jedna para --text / --muted |
| 8 skal border-radius, 3 szerokości kontenera | przekrojowo | tokeny geometrii z grupy 02 |
| Sub-brand poradników (koral #F4553F, Archivo + Source Serif) | poradniki | decyzja klienta: pod-styl „editorial” albo pełne mapowanie |
| PIN „123” zahardkodowany w kliencie | nio-struktura App.jsx:18 | auth serwerowy w 3.0 (bezpieczeństwo, nie styl) |
Twarde liczby z analizy treści: ile rekordów (strony + jednostki + aktualności) używa każdej rodziny komponentów. To ranking ważności przy migracji — komponenty z górnej połowy muszą być pixel-perfect od pierwszego dnia.
Pełny inwentarz (47 rodzin, ponad 60 z podwariantami): analiza/INWENTARZ-LEGACY.md w repo projektu.
| Komponent | Klasa wiodąca | Użycia | CSS |
|---|---|---|---|
| Kontener artykułu | article-section | 161 | style.css:4956 |
| Sidebar układu 4/8 | sidebar | 146 | style.css:2541 |
| Tytuł 42px | title-h42 | 122 | style.css:4925 |
| Listy treści | info-list | 145 | BRAK CSS — dziedziczy! |
| Akapit podstron | pages-list-content | 109 | dziedziczy z article-content |
| Tytuł 32px | title-h32 | 83 | style.css:4930 |
| Tekst pomocniczy | info-text | 79 | style.css:3511 |
| Etykieta kapitalikowa | info-header / calendar-title | 89 | style.css:3499 / 776 |
| Akordeon treściowy | tab-accordion | 45 | style.css:5217 |
| Karty osób ze zdjęciem | doctor-* | 50 | style.css:3563 |
| Tabela kontaktowa | contact-item | 54 | style.css:2768 |
| Menu boczne kotwic | sidebar-menu + submenu | 48 | style.css:2573 |
| Kadra (listy nazwisk) | accordition-cadre / cadre-list | 39 | style.css:3878 |
| Akordeon sekcyjny | accordion + toggle-button | 36 | style.css:3675 |
| Zdjęcie treści | article-image-new | 42 | style.css:3463 |
| Infoboks | alert + checklist | 37 | style.css:5160 |
| Link akcji | event-link | 34 | style.css:893 |
| Wiersz pobrania pliku | file-download-container | 20 + sekcje | style.css:5107 |
| Cytaty | blockquote | 48 | style.css:4978 |
| Karta aktualności | news-box | 218 newsów | style.css:244 |
| Książka kontaktów | publication-row (React) | 71 kontaktów | style.css:4275 |
| Kalendarium | nio_timeline / event-row (React) | 22 wydarzenia | style.css:772 |
Katalog jest źródłem prawdy dla wszystkich widoków portalu 3.0 — publicznych, panelu i modułów specjalnych. Każdy nowy komponent MUSI najpierw trafić tutaj.
Dziesięć reguł — od klasyfikacji pochodzenia po dostępność.