|
|
|
@@ -0,0 +1,132 @@
|
|
|
|
|
# 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.
|
FDMTech