To galeria koncepcji — Panel nie jest tu aktywny Demo hubGaleria← aios
01·Witaj · desktop · owner · 1440 × 1280·Klient owner·data-role="client" · linia zgięcia 810 · data-anim="off"
ADMIN· aion-marketingAION
ADMIN

Witaj, Andrzej.

aion-marketing.pl · wtorek, 3 września · 09:51

puls sprawny·gate 4 blockery·build ok 12 minLIVE · 09:51

Widok podstawowy

Zalecany dla większości. Start, treść, SEO, obrazy, ustawienia.

  • Start
  • Treść
  • SEO
  • Obrazy
  • Ustawienia

Widok pełny

Konfiguracja modułów, build i deploy, usage, WebMCP, exit.

  • Puls
  • Moduły
  • Treść
  • SEO
  • Obrazy
  • WebMCP
  • Tracking
  • Usage
  • Build & Deploy
  • Exit
  • Ustawienia
  • Commerce

Tryb zmienisz w każdej chwili w stopce menu lub w Ustawieniach → Widok.

linia zgięcia · 810 px
02·Witaj · operator · „przy każdym logowaniu” zaznaczone·Operator Aion·data-role="operator" · accent-op · ten sam dark
ADMIN· aion-marketingAION
ADMIN

Witaj, Andrzej.

aion-marketing.pl · wtorek, 3 września · 09:51

puls sprawny·gate 4 blockery·build ok 12 minLIVE · 09:51

Widok podstawowy

Zalecany dla większości. Start, treść, SEO, obrazy, ustawienia.

  • Start
  • Treść
  • SEO
  • Obrazy
  • Ustawienia

Widok pełny

Konfiguracja modułów, build i deploy, usage, WebMCP, exit.

  • Puls
  • Moduły
  • Treść
  • SEO
  • Obrazy
  • WebMCP
  • Tracking
  • Usage
  • Build & Deploy
  • Exit
  • Ustawienia
  • Commerce

Tryb zmienisz w każdej chwili w stopce menu lub w Ustawieniach → Widok.

03·Stany·Klient owner / member / standalone·a reduce-motion · b brak imienia · c błąd zapisu · d standalone
aprefers-reduced-motioncrossfade 140 ms bez translateY, wszystkie linie od 0 ms — data-anim="reduce"
ADMIN· aion-marketingAION
ADMIN

Witaj, Andrzej.

aion-marketing.pl · wtorek, 3 września · 09:51

puls sprawny·gate 4 blockery·build ok 12 minLIVE · 09:51

Widok podstawowy

Zalecany dla większości. Start, treść, SEO, obrazy, ustawienia.

  • Start
  • Treść
  • SEO
  • Obrazy
  • Ustawienia

Widok pełny

Konfiguracja modułów, build i deploy, usage, WebMCP, exit.

  • Puls
  • Moduły
  • Treść
  • SEO
  • Obrazy
  • WebMCP
  • Tracking
  • Usage
  • Build & Deploy
  • Exit
  • Ustawienia
  • Commerce

Tryb zmienisz w każdej chwili w stopce menu lub w Ustawieniach → Widok.

bbrak imieniaDirectus first_name pusty → „Witaj.” — reszta bez zmian
ADMIN· aion-marketingAION
ADMIN

Witaj.

aion-marketing.pl · wtorek, 3 września · 09:51

puls sprawny·gate 4 blockery·build ok 12 minLIVE · 09:51

Widok podstawowy

Zalecany dla większości. Start, treść, SEO, obrazy, ustawienia.

  • Start
  • Treść
  • SEO
  • Obrazy
  • Ustawienia

Widok pełny

Konfiguracja modułów, build i deploy, usage, WebMCP, exit.

  • Puls
  • Moduły
  • Treść
  • SEO
  • Obrazy
  • WebMCP
  • Tracking
  • Usage
  • Build & Deploy
  • Exit
  • Ustawienia
  • Commerce

Tryb zmienisz w każdej chwili w stopce menu lub w Ustawieniach → Widok.

cbłąd zapisu preferencjiPOST nie przeszedł — baner --critical + retry, kafelki nadal klikalne
ADMIN· aion-marketingAION
ADMIN

Witaj, Andrzej.

aion-marketing.pl · wtorek, 3 września · 09:51

puls sprawny·gate 4 blockery·build ok 12 minLIVE · 09:51

Nie udało się zapisać wyboruSerwer nie odpowiedział · 09:51 · wybierz ponownie lub spróbuj jeszcze raz

Widok podstawowy

Zalecany dla większości. Start, treść, SEO, obrazy, ustawienia.

  • Start
  • Treść
  • SEO
  • Obrazy
  • Ustawienia

Widok pełny

Konfiguracja modułów, build i deploy, usage, WebMCP, exit.

  • Puls
  • Moduły
  • Treść
  • SEO
  • Obrazy
  • WebMCP
  • Tracking
  • Usage
  • Build & Deploy
  • Exit
  • Ustawienia
  • Commerce

Tryb zmienisz w każdej chwili w stopce menu lub w Ustawieniach → Widok.

dstandalonebez AionLine, ModeBadge STANDALONE, ten sam układ
ADMIN· aion-marketingSTANDALONE
ADMIN

Witaj, Andrzej.

aion-marketing.pl · wtorek, 3 września · 09:51

puls sprawny·gate 4 blockery·build ok 12 minLIVE · 09:51

Widok podstawowy

Zalecany dla większości. Start, treść, SEO, obrazy, ustawienia.

  • Start
  • Treść
  • SEO
  • Obrazy
  • Ustawienia

Widok pełny

Konfiguracja modułów, build i deploy, usage, WebMCP, exit.

  • Puls
  • Moduły
  • Treść
  • SEO
  • Obrazy
  • WebMCP
  • Tracking
  • Usage
  • Build & Deploy
  • Exit
  • Ustawienia
  • Commerce

Tryb zmienisz w każdej chwili w stopce menu lub w Ustawieniach → Widok.

04·Witaj · mobile 390 × 844·Klient owner·kafelki w kolumnie, oba widoczne bez scrolla, „Pomiń” w zasięgu kciuka
ADMIN· aion-marketingAION
ADMIN

Witaj, Andrzej.

aion-marketing.pl · wtorek, 3 września · 09:51

puls sprawny·gate 4 blockery·build ok 12 minLIVE · 09:51

Widok podstawowy

Zalecany dla większości. Start, treść, SEO, obrazy, ustawienia.

Start · Treść · SEO · Obrazy · Ustawienia

Widok pełny

Konfiguracja modułów, build i deploy, usage, WebMCP, exit.

Puls · Moduły · Treść · SEO · Obrazy · WebMCP · Tracking · Usage · Build & Deploy · Exit · Ustawienia · Commerce

Tryb zmienisz w każdej chwili w stopce menu lub w Ustawieniach → Widok.

Decyzje mobile

  • Hero skrócony: wordmark 36 px, h1 32 px (bez × 1,45), halo 320 px, fala 0,4. Kule znikają — za mało miejsca, żeby nie dotykały tekstu.
  • Mini-podgląd menu = jedna linia tekstu zamiast listy — kafelki mieszczą się razem nad krawędzią 844 px.
  • „Pomiń” i zdanie o zmianie trybu dopięte do dołu (margin-top:auto) — kciuk, nie sięganie do góry.
  • AionLine schowany do menu ⋯ — na 390 px kolumna 56 px odbierałaby 15 % szerokości.
  • Checkbox „przy każdym logowaniu” zostaje (owner) pod „Pomiń”, 44 px wysokości.
05·Spec · Witaj·Operator Aion·timeline · copy · stany · klasy

Timeline animacji nagłówka (one-shot, 420 ms)

0–140 · linia 1140–280 · linia 2280–420 · linia 3420–600 · rezerwa, nic się nie dzieje
0 msLinia 1 (h1 „Witaj, Andrzej.”): opacity 0→1, translateY 6→0 px, 140 ms ease-out, both.140 msLinia 2 (site · data · godzina) — ta sama krzywa, delay 140 ms przez klasę .w2.280 msLinia 3 (status mono z ikonami + LIVE) — delay 280 ms, klasa .w3.420 msKoniec. Kafelki, halo, fala, kule — statyczne od 0 ms, bez animacji, bez pętli, bez typewritera.reduce@media (prefers-reduced-motion): wszystkie linie fadeonly 140 ms od 0 ms, zero translate. Tweak reducedMotion wymusza ten sam stan przez data-anim="reduce".SSRPierwszy render ma data-anim="off" → treść w stanie końcowym bez JS. Po hydratacji JS ustawia on w następnym ticku i sekwencja gra raz.

Decyzje copy

  • „Witaj, Andrzej.” — imię z Directus first_name; brak → „Witaj.” Kropka, nie wykrzyknik: premium quiet.
  • Linia 2 to kontekst, nie dekoracja: site, dzień tygodnia, data, godzina — użytkownik wie, gdzie jest i czy dane są dzisiejsze.
  • Linia 3 używa nazw modułów z menu (puls, gate, build) — dozwolone, bo to etykiety nawigacji; kafelki są bez żargonu: zero „snapshot / job / health / tenant”.
  • Kafelki: „Zalecany dla większości.” zamiast „Domyślny” — mówi klientowi, że wybór podstawowego jest bezpieczny. Primary tylko na podstawowym: jeden akcent na ekran.
  • „Pomiń — zapisz domyślny dla mojej roli” nazywa skutek, nie akcję. Zdanie o stopce menu i Ustawieniach → Widok zdejmuje presję z decyzji.

Mapowanie stanów → komponenty

StanCo się zmieniaKlasy / atrybuty
pierwsze logowanie / „zawsze”Pełna sekwencja, kafelki, „Pomiń”, checkbox tylko owner/operator.data-anim="on" · .check
reduce-motionCrossfade bez ruchu, brak stagger.data-anim="reduce" · @media
brak imieniah1 „Witaj.”; layout bez zmian..wl
błąd zapisuBaner nad kafelkami: powód, godzina, „Spróbuj ponownie”. Kafelki aktywne — ponowny wybór = ponowny POST..blocked-banner
standaloneBez AionLine (siatka 1 kolumna), ModeBadge STANDALONE.data-eco="standalone" · .mode-badge.is-standalone
memberBez checkboxa (powitanie ustawia właściciel)..skip-row bez .check
po wyborzePOST mode=basic|full → zapis aios_ui_mode, aios_welcome_seen → redirect do Start/Puls.form[method=post]

Klasy użyte na planszy

.wpage · .wtop · .wmainsiatka strony bez menu: topbar 56 + treść + AionLine 56 (aion)
.hero · .hero-brand · .wl .w2 .w3hero z halo, falą i kulami; trzy animowane linie
.decor.halo · .decor.wave.hwave · .decor.sphere · .decor.wmmotywy marki, position absolute, pointer-events none, z-index 0
.choice-wrap · .choice-grid · .choice-tile · .ct-ic · .mini-menu(.cols3) · .mini-inlineformularz wyboru trybu; karty jak na ulotce; podgląd menu 5 / 12
.skip-row · .skip · .check · .cb„Pomiń”, zdanie o zmianie trybu, checkbox owner/operator (tap 44)
.blocked-banner · .mode-badge · .aionline · .foldbłąd zapisu, ekosystem, kolumna Aion, linia zgięcia (tylko artboard)

Akceptacja: keyframes tylko rise i fadeonly; opacity poza nimi wyłącznie na .decor; kafelki i przyciski ≥ 44 px; zero hex poza blokami tokenów.