Egzamin zawodowy - Rok 2026 Część praktyczna
	Nazwa kwalifikacji: Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych Oznaczenie kwalifikacji: INF.03     Numer zadania: 10     Wersja: SG

Zadanie egzaminacyjne

Wykonaj witrynę internetową „Strefa Podróżnika”, która prezentuje atrakcyjne kierunki wycieczek oraz umożliwia interaktywne filtrowanie ofert i obliczanie kosztu wyjazdu. Witryna ma wykorzystywać HTML, CSS oraz skrypty JavaScript po stronie klienta i być wizualnie atrakcyjna (efekty animacji, karty ofert, sekcja hero).

Do wykonania zadania wykorzystaj edytor kodu, przeglądarkę internetową oraz program do edycji grafiki rastrowej. Czas przeznaczony na wykonanie zadania wynosi 150 minut.

1. Struktura witryny i pliki

1. W folderze roboczym utwórz pliki:
   • index.html – strona główna „Strefy Podróżnika”,
   • oferta.html – strona z listą ofert i filtrowaniem,
   • kalkulator.html – strona z kalkulatorem ceny wycieczki,
   • style_travel.css – zewnętrzny arkusz stylów,
   • skrypt.js – zewnętrzny plik JavaScript.
2. Na wszystkich stronach zastosuj nagłówek meta z kodowaniem UTF‑8 oraz podepnij pliki style_travel.css i skrypt.js.

2. Strona index.html – strona główna

W pliku index.html zaprojektuj efektowną stronę główną z sekcją hero i kartami wycieczek.

• Baner i nawigacja:
  • baner z logo (obraz logo_travel.png) oraz nagłówkiem H1 „Strefa Podróżnika”,
  • pod banerem poziome menu z linkami: „Strona główna”, „Oferta”, „Kalkulator ceny”, prowadzącymi odpowiednio do index.html, oferta.html, kalkulator.html.
• Sekcja hero:
  • sekcja o pełnej szerokości z tłem z pliku hero.jpg,
  • na tle umieszczony nagłówek H2 (np. „Odkryj świat z nami”) oraz przycisk z napisem „Poznaj ofertę”,
  • po kliknięciu w przycisk strona powinna płynnie przewinąć się do sekcji z kartami wycieczek (skrypt 1 w skrypt.js).
• Karty wycieczek:
  • utwórz sekcję z co najmniej trzema „kartami” wycieczek (np. Grecja, Norwegia, Japonia),
  • każda karta zawiera:
    • nagłówek H3 z nazwą kierunku,
    • krótki opis wycieczki,
    • przycisk „Szczegóły”,
  • w CSS zastosuj cień, zaokrąglone rogi i efekt powiększenia karty lub przyciemnienia tła przy najechaniu (transition).
• Stopka:
  • stopka ze zdaniem: „Stronę opracował: [Twój numer PESEL]”. Numer PESEL wpisz jako 11 cyfr, bez spacji, kropek i innych znaków.

3. Strona oferta.html – lista ofert z filtrowaniem

W pliku oferta.html utwórz stronę prezentującą listę ofert z możliwością filtrowania po kontynencie.

• Na górze strony umieść ten sam baner i menu nawigacyjne co w index.html.
• Pod banerem dodaj nagłówek H2 „Oferta wycieczek”.
• Pod nagłówkiem umieść formularz filtrowania zawierający:
  • listę rozwijaną <select> z opcjami: „Wszystkie”, „Europa”, „Azja”, „Ameryka”,
  • przycisk „Filtruj”.
• Poniżej formularza utwórz kafelki ofert (np. w układzie 2 kolumny):
  • każdy kafelek zawiera nazwę kierunku, kontynent, krótki opis i cenę,
  • każdemu kafelkowi ustaw atrybut danych, np. data-kontynent="Europa", data-kontynent="Azja".
• Skrypt 2 (filtrowanie ofert):
  • po kliknięciu przycisku „Filtruj” skrypt pobiera wybraną wartość z listy rozwijanej,
  • ukrywa wszystkie kafelki, których atrybut data-kontynent jest różny od wybranej wartości (z wyjątkiem „Wszystkie”),
  • jeśli wybrano „Wszystkie”, wszystkie kafelki są ponownie widoczne.

4. Strona kalkulator.html – kalkulator ceny wycieczki

W pliku kalkulator.html zaimplementuj formularz, który pozwala obliczyć koszt wycieczki dla zadanej liczby osób i wybranych opcji dodatkowych.

• Na górze strony umieść ten sam baner i menu jak w pozostałych plikach.
• Pod banerem dodaj nagłówek H2 „Kalkulator ceny wycieczki”.
• Formularz powinien zawierać:
  • listę rozwijaną z wyborem kierunku (np. „Grecja – 2500”, „Norwegia – 3200”, „Japonia – 5400” – możesz przekazać cenę w atrybucie value),
  • pole liczby osób dorosłych,
  • pole liczby dzieci,
  • checkbox „All inclusive (+500 zł za osobę)”,
  • checkbox „Ubezpieczenie podróżne (+150 zł za osobę)”,
  • checkbox „Wycieczka fakultatywna (+300 zł za osobę)”,
  • przycisk „Oblicz cenę”.
• Poniżej formularza umieść pusty akapit o identyfikatorze wynik, w którym skrypt pokaże obliczoną cenę.
• Skrypt 3 (kalkulator):
  • pobiera z formularza cenę podstawową wybranego kierunku oraz liczbę dorosłych i dzieci,
  • sprawdza, czy podano liczby większe lub równe 0 (w przeciwnym razie wyświetla komunikat „Podaj poprawną liczbę osób” i nie liczy dalej),
  • oblicza koszt podstawowy: dorośli płacą 100% ceny, dzieci 50% ceny,
  • dla zaznaczonych opcji dodatkowych dolicza podane kwoty dla każdej osoby,
  • wyświetla w akapicie wynik tekst w formie: „Wycieczka do [kierunek] dla [liczba osób] osób: [kwota] zł”.

5. Styl CSS (style_travel.css)

W pliku style_travel.css zdefiniuj styl całej witryny tak, aby strona była nowoczesna i atrakcyjna.

• Układ ogólny: maksymalna szerokość 1000px, wyśrodkowanie strony, tło strony w jasnym kolorze (np. #E0F7FA), czcionka bezszeryfowa.
• Baner i menu: gradient tła, biały tekst, menu poziome (linki obok siebie), efekt zmiany koloru tła linku przy najechaniu.
• Sekcja hero: tło z obrazem hero.jpg, tekst wyśrodkowany, przycisk z zaokrąglonymi rogami i efektem hover (zmiana koloru/skalowanie).
• Karty ofert: tło białe, cień, zaokrąglone rogi, przejście (transition) przy zmianie skali lub cienia na :hover.
• Formularze: spójne formatowanie pól i przycisków (szerokość, marginesy, padding), przyciski z wyróżniającym kolorem.

6. Skrypt JavaScript (skrypt.js)

W pliku skrypt.js umieść wszystkie skrypty wykorzystywane przez witrynę. Skorzystaj z modelu DOM oraz obsługi zdarzeń JavaScript.

• Skrypt 1 (płynne przewijanie na index.html):
  • po kliknięciu przycisku w sekcji hero przewija stronę do sekcji z kartami wycieczek z użyciem płynnego przewijania (np. scrollIntoView z opcją behavior: "smooth").
• Skrypt 2 (filtrowanie na oferta.html):
  • po kliknięciu przycisku „Filtruj” odczytuje wybrany kontynent i ukrywa/pokazuje kafelki ofert zgodnie z opisem w punkcie 3.
• Skrypt 3 (kalkulator na kalkulator.html):
  • obsługuje kliknięcie przycisku „Oblicz cenę”, pobiera dane z formularza, wykonuje obliczenia i wyświetla wynik,
  • waliduje dane wejściowe (liczby osób) i wyświetla komunikat o błędzie w przypadku nieprawidłowych wartości.

7. Wizualizacja wyglądu (Obraz 1)

Na rysunku poniżej przedstawiono przykładowy wygląd strony index.html. Rozmieszczenie elementów oraz ich kolory powinny być zbliżone do wzoru.

8. Wizualizacja wyglądu (Obraz 2 – kalkulator.html)

Na rysunku poniżej przedstawiono przykładowy wygląd strony kalkulator.html. Rozmieszczenie elementów oraz ich kolory powinny być zbliżone do wzoru.