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:

Hero: nagłówek o wsparciu firm produkcyjnych, krótki opis, dwa CTA (/kontakt, kotwica do pomiarów), panel licznika z trzema liczbami oznaczonymi „demonstracyjne".
Co mierzy BlackBox: lista pomiarów środowiskowych i produkcyjnych, bez obietnic wyników.
Drukarnia i powtarzalna produkcja książek: stabilność parametrów między nakładami, zapis odczytów, rozmowa o audycie zamiast gwarancji.
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.
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.
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

php -l dla templates/layout.php i templates/home.php.
Smoke test: APP_DEMO=true php -S 127.0.0.1:8099 -t public oraz GET / i /kontakt, sprawdzenie 200 i fraz.
grep -Rni sensory\|cms-media\|panel public templates poza DOCS i app: brak wycieków URL panelu.
Zrzuty desktop + mobile, jeśli dostępne narzędzia przeglądarki.
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.

6.0 KiB Raw Blame History