# BRIEF_FrontendDesign — publiczny serwis FDMTech

## 1. Cel
Publiczny serwis FDMTech prezentuje firmę i produkt BlackBox Sensory.
FDMTech to marka firmy. BlackBox Sensory to nazwa produktu.
Serwis nie ujawnia telemetrii ani adresu panelu Sensory.
Tryb `APP_DEMO=true` służy wyłącznie odbiorowi wizualnemu.

## 2. Logotypy
Dwa warianty, każdy w wersji kolorowej i monochromatycznej.
Pliki: `public/assets/img/logo-pulse.svg`, `logo-pulse-mono.svg`,
`logo-counter.svg`, `logo-counter-mono.svg`.
Nagłówek używa wariantu impulsowego jako inline SVG.

### Wariant A — impuls / puls (główny)
Znak nawiązuje do liczenia pomiarów. Ciemne pole `#102C32`,
linia sygnału w kolorze limonki `#D7F171` z trzema pikami
rysowanymi jednym pociągnięciem. Obok napis FDMTech.
Wersja mono: jeden kolor `currentColor`, bez tła.

### Wariant B — geometryczny monogram „F" / licznik
Litera F zbudowana z modułów licznika. Poprzeczka F to rząd
trzech pól, w tym jedno w kolorze limonki. Koło licznika
w dolnym ramieniu. Wersja mono: sam obrys, `currentColor`.

Zasady: nie zmieniamy proporcji, nie dodajemy cieni,
nie umieszczamy znaku na zdjęciach bez kontrastu.
Minimalna wysokość 24 px.

## 3. Layout (`templates/layout.php`)
Pełny dokument HTML `lang="pl"`. Renderer przekazuje `$content`
jako `<main id="cms-content">…</main>`, layout dodaje nagłówek,
`<?= $content ?>`, stopkę i lokalny JS.

- SEO: `$meta` title, description, canonical, robots przez `$e`.
- Style CMS: `$cmsStyleTag` w head bez zmian.
- Arkusz projektanta: `/assets/css/site.css`.
- Skrypt: `/assets/js/site.js` z `defer`, bez inline handlerów.
- Nagłówek: logo inline SVG, nazwa z `$site['name']`,
  nawigacja z `$site['navigation']` (etykieta i URL przez `$e`),
  przycisk mobilny `aria-expanded` + `aria-controls`.
- Tryb demo: oznaczenie dokłada renderer jako `aside[role=note]`;
  layout dokłada atrybut `data-demo` na `body` i nie dubluje paska.
- Stan HTTP: `$statusCode` różnicuje tytuł błędu, layout działa
  też dla 404/503 i formularza `/kontakt`.
- Stopka: dane firmy FDMTech Bartosz Pulchny, Krakowska 67/1,
  71-017 Szczecin, NIP 852-251-80-36, tel. 533 873 555.
  Adres e-mail pomijamy w całości, bo dostarczalność
  kontakt@fdmtech.pl nie została potwierdzona. Kontakt
  z `$site` renderujemy tylko gdy CMS poda niepusty e-mail
  lub telefon. Zero adresów panelu Sensory w całym serwisie.
- Dostępność: skip-link, widoczny focus, nawigacja klawiaturą,
  `aria-current="page"` dla aktywnej pozycji.

## 4. Strona główna (`templates/home.php`)
Fragment bez własnego `<main>` i bez ID `cms-content`.
Używana wyłącznie jako jawne demo `/` przy `APP_DEMO=true`.
Produkcyjna strona główna pochodzi z publikacji slug `home`.

Sekcje:
1. Hero: nagłówek o wsparciu firm produkcyjnych, krótki opis,
   dwa CTA (`/kontakt`, kotwica do pomiarów), panel licznika
   z trzema liczbami oznaczonymi „demonstracyjne".
2. Co mierzy BlackBox: lista pomiarów środowiskowych i
   produkcyjnych, bez obietnic wyników.
3. Drukarnia i powtarzalna produkcja książek: stabilność
   parametrów między nakładami, zapis odczytów, rozmowa
   o audycie zamiast gwarancji.
4. Bezpłatny audyt: CTA prowadzi wyłącznie na `/kontakt`
   jako źródło zapytania (`source=home`, potem `source=audit`
   na stronie formularza). Brak cen i gwarancji.
5. Formularz kontaktowy home: POST `$formAction`, hidden
   `_csrf=$csrfToken` i `source=home`, pola name, email,
   company, phone, message, checkbox `consent=1`, honeypot
   `website` ukryty. Błędy z `$formErrors`, wartości
   z `$formValues`, stan z `$formStatus`, w demo przycisk
   zablokowany i komunikat 503 bez fikcyjnego sukcesu.
6. Podsumowanie kontaktu: adres, NIP, telefon, link `/kontakt`.
   Bez adresu e-mail.

Copy uczciwe: liczby demonstracyjne oznaczone, brak
wyników, gwarancji i cen. Bezpłatny audyt opisany jako
rozmowa i zapytanie, nie usługa z ceną.

## 5. Zasoby
- `public/assets/css/site.css`: tokeny, typografia, layout,
  responsywność 390 px / 1440 px, `prefers-reduced-motion`,
  kontrast AA (tekst na teal i mist sprawdzony).
- `public/assets/js/site.js`: szuflada nawigacji mobilnej,
  `aria-expanded`, zamykanie na Escape, drobne usprawnienia
  progresywne (aktywna pozycja nav, rok w stopce).
  Bez inline handlerów, ładowany z `defer`.
- Czcionki: stosy `"Bricolage Grotesque"` i `"DM Sans", Inter`,
  fallback systemowy. Bez zewnętrznych dostawców fontów,
  bo CSP dopuszcza tylko `font-src 'self'`; pliki woff2
  można dołożyć później do `/assets/fonts/`.

Paleta z portalu firmowego Sensory:
teal `#102C32`, limonka `#D7F171`, mgła `#EEF2EF`,
koral `#F47F5F`. Tło jasne (scena: czytanie oferty w dzień),
teal na nagłówek, stopkę i powierzchnie decyzyjne.

## 6. Treści demo
Wszystkie liczby na home oznaczone „demonstracyjne".
Formularz w demo nie zapisuje. SEO w demo: `noindex, nofollow`.
Zakaz: adresy panelu Sensory, adresy e-mail poza danymi
z `$site`, wyniki, gwarancje, ceny.

## 7. Zużycie zmiennych kontraktu
- layout: `$site`, `$meta`, `$content`, `$cmsStyleTag`,
  `$isDemo`, `$statusCode`, `$nonce`, `$e`.
- home: `$site`, `$page`, `$isDemo`, `$formAction`,
  `$csrfToken`, `$formValues`, `$formErrors`, `$formNotice`,
  `$formStatus`, `$e`.
- `$cmsHtml` zużywa renderer przy składaniu `$content`.
- `$smtpStatus` (`disabled`) opisany w briefie i stopce
  formularza: brak obietnicy wysyłki e-mail.

## 8. Weryfikacja
1. `php -l` dla `templates/layout.php` i `templates/home.php`.
2. Smoke test: `APP_DEMO=true php -S 127.0.0.1:8099 -t public`
   oraz GET `/` i `/kontakt`, sprawdzenie 200 i fraz.
3. `grep -Rni sensory\|cms-media\|panel public templates`
   poza `DOCS` i `app`: brak wycieków URL panelu.
4. Zrzuty desktop + mobile, jeśli dostępne narzędzia przeglądarki.
5. Kontrola kontrastu i nawigacji klawiaturą.

## 9. Decyzja projektowa (th frontend-design / impeccable)
Teza: strona miernika, nie agencji. Pierwszy widok pokazuje
licznik, nie kartę z metryką. Świat: ciemny teal warsztatu,
limonka sygnału, papierowa mgła treści. Ryzyko: mocny teal
hero zamiast jasnego szablonu SaaS.