# Protan Elmark — frontend Frontend odtworzony na podstawie projektów graficznych z katalogu `pdfs/`. Czysty HTML + CSS + vanilla JS, bez build-stepu i bez zależności. | projekt (PDF) | plik | rozmiar makiety | |---|---|---| | `home-desktop.pdf` | `index.html` | 1512 × 10463 px | | `oferta-desktop.pdf` | `oferta-desktop.html` | 1512 × 6340 px | | `oferta-magazynowe-desktop.pdf` | `oferta-magazynowe-desktop.html` | 1512 × 12373 px | | `oferta-przemyslowe.pdf` | `oferta-przemyslowe.html` | 1512 × 12425 px | | `oferta-wojskowe-desktop.pdf` | `oferta-wojskowe-desktop.html` | 1512 × 5577 px | | — (propozycja wg [protan-elmark.com.pl/kontakt](https://protan-elmark.com.pl/kontakt/)) | `kontakt.html` | — | | — (nowa wersja obecnej strony startowej [protan-elmark.com.pl](https://protan-elmark.com.pl/)) | `old-new.html` | — | | — (przepisanie [protan-elmark.com.pl](https://protan-elmark.com.pl/) — teksty 1:1) | `old-new-1.html` | — | | — (przepisanie [/kontakt/](https://protan-elmark.com.pl/kontakt/) — teksty 1:1) | `old-new-kontakt.html` | — | | — (przepisanie [/oferta/hale-magazynowe/](https://protan-elmark.com.pl/oferta/hale-magazynowe/) — teksty 1:1) | `old-new-hale-magazynowe.html` | — | Nagłówek, stopka, `head` i sprite ikon są wspólne — podstrony składa `./build.sh`, pobierając te części wprost z `index.html`. ## Uruchomienie ```bash cd /home/widoczni/pe python3 -m http.server 8899 # http://localhost:8899 ``` Otwarcie `index.html` bezpośrednio z dysku (`file://`) też działa — jedyna zewnętrzna zależność to Google Fonts. ## Struktura ``` index.html strona główna + sprite SVG z ikonami oferta-desktop.html pełna oferta (8 kategorii hal) oferta-magazynowe-desktop.html oferta-przemyslowe.html oferta-wojskowe-desktop.html kontakt.html kontakt (formularz, działy, dane rejestrowe) old-new.html nowa wersja obecnej strony startowej (26 sekcji) old-new-1.html strona startowa — teksty przeniesione 1:1 (30 sekcji) old-new-kontakt.html kontakt — 10 działów, 29 osób, dane rejestrowe old-new-hale-magazynowe.html hale magazynowe — pełna treść podstrony oferty build.sh składa podstrony z części wspólnych index.html parts/ treść
każdej podstrony + dodatkowe ikony do sprite'a assets/css/style.css tokeny → reset → typografia → komponenty → sekcje → RWD assets/js/main.js menu, dropdowny, karuzele, zakładki, akordeon, wideo, reveal assets/img/ grafiki wyekstrahowane z PDF-ów (4,6 MB) ``` ### Przebudowa podstron ```bash ./build.sh # wszystkie podstrony ./build.sh oferta-desktop # jedna wybrana ``` Skrypt wycina `head`, sprite ikon, nagłówek i stopkę wprost z `index.html` (po znacznikach, nie po numerach linii) i skleja je z `parts/.main.html`. Zmiana nagłówka lub stopki w `index.html` + `./build.sh` = spójne wszystkie widoki. Uruchomienie jest idempotentne. ## Sekcje strony głównej (kolejność z projektu) 1. Pasek informacyjny (telefon 24/7, spotkanie on-line, linki, język) 2. Nagłówek / nawigacja (sticky, 3 rozwijane menu, 2 CTA) 3. Hero — „Producent hal namiotowych" + 3 znaczki (98%, AQAP 2110, TÜV Rheinland) 4. **— pominięte —** „Skonfiguruj halę w 3D" (konfigurator 3D) 5. Nasze rozwiązania dla Twojego biznesu (2 + 3 kafle oferty) 6. Dlaczego my? (karuzela) 7. Wybrane realizacje (duży kafel + siatka 8 miniatur) 8. Opinie od naszych klientów (sekcja granatowa, slider referencji) 9. Od projektu do sukcesu (case study + lista materiałów wideo) 10. Dlaczego nasze hale? (karuzela) 11. Jakie poszycia hal oferujemy? (4 zakładki numerowane) 12. Jakie konstrukcje produkujemy? (2 zakładki numerowane) 13. Poznaj nas bliżej (panel granatowy + lista wideo) 14. Proces budowy hali + Etapy realizacji (7 kroków) 15. Hale dopasowane do Twoich potrzeb (6 zakładek z ikonami) 16. FAQ (akordeon, 3 pytania) 17. Realizacje od A do Z (16 województw) 18. Stopka — pasek CTA, kolumny linków, dane kontaktowe, social, tekst SEO Sekcja z konfiguratorem 3D została pominięta zgodnie z ustaleniami. W `index.html` zostało po niej komentarzem oznaczone miejsce — wystarczy wstawić tam `
`; linki „Konfigurator hali" już na to `id` wskazują. ## Podstrony oferty **`oferta-desktop.html`** — hero, „Hale namiotowe od Protan Elmark” (8 kafli oferty), poszycia (4 zakładki), konstrukcje (2 zakładki), „Dlaczego my?”, dodatkowe wyposażenie (5 zakładek), FAQ, województwa. **`oferta-wojskowe-desktop.html`** — hero z certyfikatami, konfigurator 3D, 3 kafle rozwiązań militarnych, „Niezawodne hale wojskowe” (6 zakładek), wyposażenie (5 zakładek), materiały dla sektora militarnego (karuzela), „Dlaczego nasze hale?”, blok „Współpracuj z fachowcami”. **`oferta-magazynowe-desktop.html`** i **`oferta-przemyslowe.html`** — hero, konfigurator 3D, wybrane realizacje, typy poszycia i konstrukcji, „Od projektu do sukcesu”, opinie, wyposażenie, proces budowy + etapy realizacji, „Dlaczego nasze hale?”, standardy bezpieczeństwa (6 zakładek), zastosowania na granatowym tle (5 / 9 kafli), „Co wyróżnia nas na rynku”, pozwolenie na budowę + 10 etapów legislacji, FAQ, województwa. ## Kontakt (`kontakt.html`) Widok bez PDF-a — propozycja zbudowana z istniejących komponentów na podstawie treści obecnej strony `protan-elmark.com.pl/kontakt/`. 1. Hero podstrony z infolinią i adresem e-mail jako znaczkami 2. „Jak możemy pomóc?” — 5 kafli kanałów kontaktu (`.feature--action`) 3. „Napisz do nas” — formularz + granatowa karta z danymi (`.contact`) 4. „Kontakt bezpośredni do działów” — 9 działów w `.flattabs`, 32 osoby w siatce `.person` 5. „Odwiedź nas w Dębnie pod Poznaniem” — `.mediabox` z adresem i dojazdem 6. „Dane rejestrowe i numery kont” — dwie karty `.infobox` z `.datalist` Formularz działa na natywnej walidacji HTML (`required`, `type="email"`, `type="tel"`) — bez linijki JS-a. `action` i endpoint są oznaczone jako `TODO`. ## Nowa strona startowa (`old-new.html`) Widok bez PDF-a — cała treść obecnej strony `protan-elmark.com.pl` przełożona na komponenty tego systemu. 26 sekcji, kolejność ustawiona pod ścieżkę decyzyjną (czym są hale → co oferujemy → jak są zbudowane → ile kosztują → jak przebiega realizacja → dowody jakości → kontakt): | # | sekcja | komponent | |---|---|---| | 1 | Hero „Hale namiotowe" + 3 znaczki (35+ lat, ~500 hal, 5 kontynentów) | `.hero` | | 2 | Skonfiguruj halę w 3D | `.configurator` | | 3 | Nowoczesne hale od polskiego producenta + 3 filary zaufania | `.feature` w `.offer__grid--3` | | 4 | Rodzaje hal — 11 kategorii | 4 × `.offer__grid` (2 + 3 + 3 + 3) | | 5 | Co wyróżnia nasze hale — 14 cech | `.flattabs` + `.infobox` | | 6 | Wymiary hal (10–40 m, 3–9 m, dowolna, 10–30°) | `.stats` | | 7 | Małe i duże hale + popularne formaty | `.textblock` + `.chips` | | 8 | Dostępne rozmiary — 9 wariantów z pełną specyfikacją | `.carousel` + `.infobox` + `.datalist` | | 9 | Zastosowania — 7 branż z listami zastosowań | `.icontabs` + `.usecase` + `.chips` | | 10 | Co wyróżnia Protan Elmark? — 9 atutów | `.carousel` + `.feature__num` | | 11 | Poznaj nas i nasze hale — 2 filmy z YouTube | `.casestudy` + `.videolist` | | 12 | Wybrane realizacje hal magazynowych | `.cases` | | 13 | Z nami będziesz w dobrym towarzystwie | `.reviews` na `--navy` | | 14 | Konstrukcje i poszycia — 6 wariantów | `.flattabs` + `.mediabox` | | 15 | Wyposażenie hali — 12 pozycji | `.feature` w `.offer__grid--3` | | 16 | Hale całoroczne (śnieg/wiatr, woda, UV) | `.feature` + `.feature__value` | | 17 | Hale ocieplane (dach, ściany, wilgoć) | `.feature` + `.feature__value` | | 18 | Cena hali + „jak poznasz cenę" | `.feature` + `.steps` | | 19 | Jak przebiega realizacja — 7 etapów | `.process` + `.steps` | | 20 | Montaż i demontaż | `.feature` w `.offer__grid` | | 21 | Cztery ruchy jednej hali (relokacja, rozbudowa) | `.navycards--4` na `--navy` | | 22 | Jakość i bezpieczeństwo — 4 etapy z dowodami | `.numtabs` + `.pill` | | 23 | FAQ — 10 pytań | `.faq` + `.accordion` | | 24 | Gdzie montujemy hale — 16 województw | `.linklist` | | 25 | Wyślij zapytanie — formularz + dane kontaktowe | `.contact` | | 26 | Bezpośrednio z działem sprzedaży — 6 osób | `.people` / `.person` | Dwa identyfikatory filmów z YouTube są już wpisane (`jXZHJIeperg`, `G08x3f7_TJY`) — te odtwarzacze działają bez uzupełniania `TODO`. ## Rodzina `old-new-*` — przepisanie obecnego serwisu Trzy widoki zbudowane wprost z HTML-a strony produkcyjnej. Nagłówek, stopka, sprite ikon i cały język wizualny pochodzą z nowego projektu (`index.html`), a **teksty są przeniesione dosłownie** — to warunek utrzymania pozycji w wyszukiwarce. | widok | źródło | sekcji | komponenty | |---|---|---|---| | `old-new-1.html` | strona startowa | 30 | `.hero` · `.configurator` · `.flattabs` (14 cech, 6 konstrukcji) · `.icontabs` (7 zastosowań) · `.stats` · 3 × `.carousel` (9 rozmiarów, 9 atutów, opinie) · `.casestudy` · `.cases` · `.numtabs` (jakość) · `.navycards--4` · 3 × `.steps` (fazy realizacji) · `.faq` · `.linklist` · `.contact` · `.people` | | `old-new-kontakt.html` | `/kontakt/` | 5 | `.hero--sub` · `.feature--action` · `.deptlist` (10 działów) → `.people` (29 osób ze zdjęciami) · `.details` + `.datalist` (dane rejestrowe, konta) · `.linklist` (certyfikaty) · `.contact` | | `old-new-hale-magazynowe.html` | `/oferta/hale-magazynowe/` | 21 | `.hero--sub` · `.textblock` + `.bullets` · `.cases` · `.carousel` (9 rozmiarów) · `.split` · `.mediabox` · `.numtabs--3` (poszycia) · `.flattabs` (konstrukcje) · `.icontabs` (usługi) · `.navycards` (8 zastosowań) · `.permit` + `.steps` · `.faq` · `.contact` | Wierność treści sprawdzana skryptem porównującym każdy akapit źródła (≥110 znaków) z tekstem zbudowanego `
` po normalizacji interpunkcji: **176/185 akapitów 1:1**, reszta przeniesiona ze zmianą struktury (podział „Nazwa – opis” na tytuł kafla i treść, rozbicie akapitu na kroki `.steps`) albo należąca do nagłówka/stopki/cookies. Zero braków. Zgodność architektury informacji sprawdzana osobno — lista `h2` źródła kontra lista `h2` naszego `
`: **każdy nagłówek strony produkcyjnej ma odpowiednik** (7 typów hal na stronie głównej siedzi o poziom niżej, w `.icontabs`). Formularz zapytania jest kopią formularza produkcyjnego: `Email`, `Phone`, `Content` (Uwagi / Miejscowość), dwie zgody w `.consent` (checkbox + zwijana klauzula), przycisk „Wyślij”. Klauzule RODO i zgody marketingowe przepisane znak w znak — łącznie z powtórzoną frazą, którą zawiera oryginał. Cała trójka (ok. 370 użytych klas) wymagała **jednej nowej klasy CSS**: `.bullets`. ### Nowe komponenty dodane przy podstronach `.hero--sub` · `.configurator` · `.flattabs` (+ `.infobox`, `.mediabox`) · `.navycards` / `.navycard` · `.feature__num` / `.feature__kicker` · `.permit` / `.pill` · `.textblock` · `.section-note` · `.numtabs--3` · `.offer__grid--3` · `.field` / `.input` / `.textarea` / `.checkbox` · `.contact` · `.people` / `.person` · `.details` / `.datalist` · `.feature--action` / `.feature__value` Dodane przy `old-new-*`: `.bullets` (+ `--2`) — wypunktowanie w prozie, jedyny element brakujący przy przenoszeniu tekstów 1:1 (reset zdejmuje markery z `ul`). Dodane przy przeglądzie zgodności z serwisem produkcyjnym: `.consents` / `.consent` (checkbox + zwijana klauzula RODO — struktura `details`/`summary` ze źródła), `.person__head` / `.person__photo` (portret przy nazwisku), `.deptlist` (powtarzalne pary „nagłówek działu + siatka osób”), `.logos` / `.logos__item` (ściana logotypów „Wybrani Klienci”), `.videolist__heading`. Przy okazji naprawiony `.offer__grid--3`: modyfikator nie ustawiał `display: grid`, więc użyty samodzielnie (15 sekcji w czterech widokach) układał kafle jeden pod drugim zamiast w trzech kolumnach. Dodane przy `old-new.html`: `.stats` / `.stat` (+ `__value`, `__label`) · `.navycards--4` · reguła odstępu `.container > * + .steps` · 14 nowych ikon w sprite'cie (`i-arrows-h`, `i-arrows-v`, `i-angle`, `i-drop`, `i-tag`, `i-wrench`, `i-fan`, `i-gate`, `i-door`, `i-window`, `i-lightbulb`, `i-grid`, `i-users`, `i-sun`). Żaden z nich nie wymagał zmian w `main.js` — `.flattabs` korzysta z istniejącego `initTabs` (`data-tabs` + `role="tab"` + `aria-controls`). ## Design tokens Wartości wypróbkowane bezpośrednio z pliku PDF: | token | wartość | użycie | |---|---|---| | `--navy` | `#11344F` | nagłówki, sekcje granatowe, stopka | | `--navy-600` | `#1E4A72` | karta referencji na granatowym tle | | `--blue` | `#0070BA` | przyciski, ikony, linki, akcenty | | `--grey-100` | `#F4F4F4` | tła kafli, pasek informacyjny | | `--grey-300` | `#D9D9D9` | tory postępu, linie kroków | | `--gold` | `#FFC72E` | gwiazdki oceny | | `--container` | `1348px` | zmierzone: treść od 80 px do 1428 px | | `--gutter` | `24px` | odstępy w siatkach | ### Fonty W PDF-ie kroje są osadzone bez nazw (Type 3), więc dobrane zostały najbliższe odpowiedniki z Google Fonts: **Rubik** (nagłówki) + **Open Sans** (treść). Podmiana na docelowy krój brandowy to dwie zmienne w `:root`: ```css --font-heading: "Rubik", …; --font-body: "Open Sans", …; ``` ## Grafiki Wszystkie zdjęcia i logotypy pochodzą z PDF-a (`pdfimages`), przeskalowane do rozsądnych rozmiarów. Ikony (trofeum, globus, błyskawica, ciężarówka, tarcza, pudełko, fabryka, konfetti, piłka, koń, traktor, social media) są odtworzone jako inline SVG w sprite'cie na początku `index.html` — w projekcie były wektorami bez możliwości eksportu. ## Do uzupełnienia (oznaczone w kodzie ``) Projekt pokazuje część treści w stanie zwiniętym / tylko pierwszy slajd. Miejsca, gdzie treść trzeba wstawić lub zatwierdzić: - **ID filmów YouTube** — atrybuty `data-video-id=""` (odtwarzacze) i `data-video-open=""` (pozycje listy „Materiały wideo"). Do momentu ich wpisania klik pozostawia poster. Mechanizm: klik podmienia poster na `