Projekt strony Strona meczu

Techniczne zadanie (TZ) dla projektanta na stworzenie projektu strony internetowej 
To techniczne zadanie dotyczy całego projektu,  ale teraz należy wykonać tylko Stronę meczu!!!

1. Ogólne informacje o projekcie

Typ strony: Informacyjna strona o meczach piłkarskich.
Liczba stron: 2 strony – Strona główna i Strona meczu.
Główny cel strony: Dostarczanie użytkownikom informacji o meczach piłkarskich, w tym harmonogram, wyniki, statystyki i analizy.
Docelowa grupa odbiorców: Kibice piłkarscy, analitycy, dziennikarze oraz miłośnicy sportu.

2. Wymagania dotyczące projektu

2.1. Ogólny styl i forma

• Styl projektu: Nowoczesny, minimalistyczny, z naciskiem na wygodę użytkownika.

• Paleta kolorów: Świeża, dynamiczna – dominacja niebieskich, zielonych i białych kolorów (skojarzenie ze sportem).

• Typografia: Prosta, czytelna, ale nowoczesna. Czcionki bezszeryfowe (np. Roboto lub Open Sans).

• Ikonografia: Używać zrozumiałych ikon do nawigacji i elementów funkcjonalnych.

• Interaktywność: Dodawać efekty hover dla przycisków i elementów interaktywnych.

• Technologia: Figma

• Funkcje technologiczne: demonstracja efektów po najechaniu w prototypie, UI Kit, komponentowość, auto layouts i elastyczne elementy do demonstracji działania strony na różnych urządzeniach

3. Strona główna

Przykład do odniesienia: tips.gg

3.1. Struktura strony:

1. Nagłówek (górny panel):

   • Logo (po lewej).

   • Menu nawigacyjne: "Strona główna", "Mecze", "Aktualności", "Kontakt".

   • Ikony do mediów społecznościowych i przycisk wyszukiwania (po prawej).

2. Główny blok:

   • Duży baner z zapowiedzią najważniejszego meczu (zdjęcie, data, drużyny).

   • Zachęta do działania: “Dowiedz się więcej”.

   • 

3. Lista meczów:

   • Wyświetlanie listy meczów w formie kart (jak na tips.gg).

   • Każda karta zawiera:

     • Nazwy drużyn i logotypy.

     • Data i godzina meczu.

     • Główne wskaźniki (np. liczba zwycięstw lub statystyki).

   • Filtry do selekcji meczów według daty, ligi lub turnieju.

4. Sidebar (po prawej):

   • Ranking drużyn piłkarskich

   • Lista bukmacherów, u których można obstawiać (zob. zdjęcie)

   • Najbardziej popularne mecze (trendy).

   • Ostatnie prognozy

5. Stopka (dolny panel):

   • Logo

   • Tekst praw autorskich.

4. Strona meczu (Na stronie meczu musi być cała informacja, która jest na https://oddspedia.com/football/oman-saudi-arabia-2137 z wyjątkiem informacji o zakładach i innych informacji o bukmacherach, ale wszystkie informacje dotyczące statystyk muszą być OBOWIĄZKOWE) 

Przykład do odniesienia: oddspedia.com 

4.1. Struktura strony:

1. Nagłówek:

   • Taki sam, jak na stronie głównej.

2. Główny blok informacji o meczu:

   • Informacje o drużynach (nazwy, logotypy).

   • Data, godzina i miejsce odbywania się meczu.

   • Aktualny wynik (jeśli mecz już się rozpoczął lub zakończył).

   • Tabela statystyk drużyn (strzały, posiadanie piłki, kartki itp.).

   • Porównanie wyników wcześniejszych spotkań między drużynami.

   • Forma drużyn (wyniki ostatnich 5 meczów).

3. Sidebar (po prawej):

   • Inne mecze, które mogą zainteresować użytkownika.

   • Aktualności, analizy lub ciekawe fakty o drużynach.

4. Blok analityki i statystyki:

   • Wykresy i diagramy dotyczące efektywności drużyn.

   • Porównanie kluczowych graczy (bramki, asysty, kartki).

5. Opinie i komentarze:

   • Miejsce na komentarze użytkowników lub dyskusje o meczu.

6. Stopka:

   • Jak na stronie głównej.
     
     NALEŻY WYKONAĆ TYLKO Stronę meczu!!!