# 🎮 ServerSeek – szablon przeglądarki serwerów gier

**Nowoczesny, responsywny szablon HTML przeznaczony dla platform przeglądających serwery gier**

---

## 📋 Przegląd

ServerSeek to wysokiej jakości szablon HTML przeznaczony dla przeglądarek serwerów gier i platform monitorujących. Charakteryzuje się nowoczesnym ciemnym motywem z wyrazistymi gradientami w odcieniach fioletu i cyjanu, płynnymi animacjami oraz w pełni responsywnym układem zoptymalizowanym pod kątem wszystkich urządzeń.

**Idealny do:**

- Witryny internetowe zawierające wykazy serwerów gier
- Platformy do śledzenia serwerów
- Portale społeczności graczy
- Wynajem serwerów/usługi hostingowe

---

## ✨ Funkcje

### 🎨 Projektowanie

- **Nowoczesny ciemny motyw** — elegancka ciemnoniebiesko-szara kolorystyka
- **Żywe gradienty** – akcenty w kolorach fioletowym, cyjanowym i różowym
- **Efekty glassmorfizmu** – rozmyte tło i przezroczyste elementy
- **Płynne animacje** – efekty po najechaniu kursorem, przejścia i mikrointerakcje
- **Stylizacja VIP/Premium** – złote akcenty dla serwerów VIP i treści

### 📱 Responsywny

- **Projektowanie z priorytetem dla urządzeń mobilnych** – zoptymalizowane pod kątem wszystkich rozmiarów ekranów
- **Nawigacja responsywna** – zwijane menu mobilne
- **Układy adaptacyjne** – systemy siatek dostosowujące się do szerokości ekranu
- **Optymalizacja pod kątem ekranów dotykowych** – duże obszary klikalne dla użytkowników urządzeń mobilnych

### 🔧 Funkcjonalność

- **Wyszukiwanie serwerów i filtry** – zaawansowane opcje filtrowania
- **Statystyki serwera** – liczba graczy w czasie rzeczywistym i ping
- **Wykresy interaktywne** – integracja z biblioteką Chart.js w celu wizualizacji danych
- **Wyróżnianie serwerów VIP** – specjalna stylizacja ogłoszeń premium
- **Uwierzytelnianie użytkowników** – strony logowania i rejestracji

### 🔍 Zoptymalizowane pod kątem SEO

- **Metatagi** – kompletne metatagi SEO na wszystkich stronach
- **Open Graph** – optymalizacja udostępniania treści w mediach społecznościowych
- **Karty Twittera** – rozbudowane podglądy na Twitterze
- **Semantyczny HTML** – Prawidłowa struktura HTML5
- **Adresy URL kanoniczne** – zapobiegają problemom związanym z powielaniem treści

---

## 📄 Strony

| Strona | Opis |
| ----------------- | ---------------------------------------------------------------------------------------- |
| `index.html` | Strona główna zawierająca sekcję „Hero”, opis funkcji, plany cenowe, statystyki oraz listę obsługiwanych gier |
| `servers.html` | Przeglądarka serwerów z funkcją wyszukiwania, filtrami, serwerami VIP, popularnymi serwerami oraz pełną tabelą serwerów |
| `serverinfo.html` | Strona zawierająca szczegółowe informacje o serwerze wraz z wykresami, statystykami i danymi serwera |
| `contact.html` | Formularz kontaktowy zawierający dane kontaktowe, linki do mediów społecznościowych oraz sekcję „Najczęściej zadawane pytania” |
| `login.html` | Strona logowania użytkownika z opcjami logowania przez serwisy społecznościowe (Discord, Steam) |
| `register.html` | Strona rejestracji użytkownika z walidacją formularza |
| `docs.html` | Strona z dokumentacją zawierająca strukturę projektu oraz instrukcje obsługi |

---

## 🛠 Technologie

### Rdzeń

- **HTML5** – znacznikowanie semantyczne
- **CSS3** – właściwości niestandardowe, flexbox, grid
- **JavaScript** – Vanilla JS do tworzenia interakcji

### Frameworki i biblioteki

- **TailwindCSS** – framework CSS oparty na podejściu „utility-first” (dostępny przez CDN)
- **Ikony Bootstrap** – biblioteka ikon
- **Chart.js** – interaktywne wykresy i diagramy
- **Google Fonts** – rodzina czcionek Rajdhani

### Paleta kolorów

```
Primary: #7e22ce (Purple)
Secondary: #06b6d4 (Cyan)
Tertiary: #db2777 (Pink)
VIP Gold: #fbbf24 (Gold)

Dark 900: #0f172a (Main background)
Dark 800: #1e293b (Secondary background)
Dark 700: #334155 (Card backgrounds)

Light 100: #f1f5f9 (Primary text)
Light 200: #cbd5e1 (Secondary text)
Light 300: #94a3b8 (Muted text)
```

---

## 📦 Instalacja

### Opcja 1: Bezpośrednie pobranie

1. Pobierz lub sklonuj to repozytorium
2. Otwórz `index.html`w przeglądarce
3. To wszystko! Nie trzeba przeprowadzać procesu kompilacji

### Opcja 2: Serwer lokalny

W celu tworzenia oprogramowania należy skorzystać z serwera lokalnego:

```bash
# Using Python
python -m http.server 8000

# Using Node.js (http-server)
npx http-server

# Using PHP
php -S localhost:8000
```

Następnie otwórz stronę w`http://localhost:8000` przeglądarce.

---

## 🎨 Personalizacja

### Zmiana kolorów

Edytuj niestandardowe właściwości CSS w`assets/css/style.css`:

```css
:root {
--color-primary: #7e22ce; /* Change main purple */
--color-secondary: #06b6d4; /* Change cyan accent */
--color-tertiary: #db2777; /* Change pink accent */
}
```

### Dodawanie nowych stron

1. Skopiuj istniejący plik HTML jako szablon
2. Zaktualizuj tytuł i metatagi
3. Zmodyfikuj treść zgodnie z potrzebami
4. Zaktualizuj linki nawigacyjne na wszystkich stronach

### Modyfikowanie nawigacji

Pasek nawigacyjny znajduje się u góry każdego pliku HTML. Dodając nowe linki, należy zaktualizować zarówno sekcję menu przeznaczoną dla komputerów stacjonarnych, jak i dla urządzeń mobilnych.

### Dostosowywanie wykresów

Wykresy wykorzystują bibliotekę Chart.js. Konfiguracja znajduje się w sekcji skryptów pliku `serverinfo.html`.

---

## 📁 Struktura projektu

```
ServerSeek/
├── assets/
│ ├── css/
│ │ └── style.css # Main stylesheet
│ ├── js/
│ │ └── main.js # JavaScript functionality
│ └── images/
│ ├── games/ # Game icons
│ ├── maps/ # Map images
│ ├── seo/ # OG images
│ ├── favicon.png # Favicon
│ └── hero.webp # Hero background
├── index.html # Homepage
├── servers.html # Server browser
├── serverinfo.html # Server details
├── contact.html # Contact page
├── login.html # Login page
├── register.html # Registration page
├── docs.html # Documentation
└── README.md # This file
```

---

## 🎮 Obsługiwane gry (wersja demo)

Szablon zawiera ikony demonstracyjne dla:

- Counter-Strike 2 (CS2)
- Counter-Strike 1.6
- Minecraft
- Rdza
- ARK: Survival Evolved
- FiveM (GTA V)

Dodaj więcej gier, umieszczając ikony w `assets/images/games/`.

---

## 📱 Obsługa przeglądarek

| Przeglądarka | Pomoc techniczna |
| ------- | ---------------- |
| Chrome | ✅ Pełna wersja |
| Firefox | ✅ Pełna wersja |
| Safari | ✅ Pełna wersja |
| Krawędź | ✅ Pełna wersja |
| Opera | ✅ Pełna wersja |
| IE 11 | ❌ Nieobsługiwane |

---

## 🔧 Główne elementy

### Pasek nawigacyjny

- Stała pozycja z efektem rozmycia
- Zmniejsza się podczas przewijania
- Animowana ramka z gradientem
- Responsywne menu mobilne
- Przyciski „Zaloguj się” i „Zarejestruj się”

### Karty serwerowe

- Ikona gry i nazwa serwera
- Liczba graczy z paskiem postępu
- Ping i informacje o lokalizacji
- Wskaźnik stanu online/offline
- Identyfikator VIP dla serwerów premium

### Karty cenowe

- Trzy poziomy cenowe (tygodniowy, miesięczny, roczny)
- Wyróżniona opcja „Najlepszy stosunek jakości do ceny”
- Listy funkcji z zaznaczeniami
- Animowane przyciski CTA

---

## 📊 Sekcja statystyk

Sekcja statystyk zawiera animowane liczniki:

- Łączna liczba użytkowników
- Ostatni zarejestrowany użytkownik
- Łączna liczba serwerów
- Serwery VIP
- Obsługiwane gry
- Kraje
- Łączna liczba graczy
- Procent czasu sprawności

---

## 🤝 Podziękowania

- **Projekt i realizacja**: illusion @ CodeStrike.STORE
- **Ikony**: Ikony Bootstrap
- **Framework CSS**: TailwindCSS
- **Wykresy**: Chart.js
- **Czcionki**: Google Fonts – Rajdhani

---

## 📄 Licencja

Niniejszy szablon jest przeznaczony do użytku osobistego i komercyjnego. Podanie źródła jest mile widziane, ale nie jest wymagane.

---

## 🆘 Pomoc techniczna

W przypadku pytań, problemów lub próśb o dostosowanie:

- 🌐 Strona internetowa: codestrike.store
- 💬 Discord: Dołącz do naszego serwera społecznościowego

---

Stworzone z miłością ❤️ przez CodeStrike.STORE

© 2025 ServerSeek. Wszelkie prawa zastrzeżone.