# 🎮 ServerSeek - Șablon pentru browser de servere de jocuri

**Un șablon HTML modern și adaptabil pentru platformele de navigare a serverelor de jocuri**

---

## 📋 Prezentare generală

ServerSeek este un șablon HTML premium conceput pentru platformele de căutare și monitorizare a serverelor de jocuri. Acesta prezintă o temă modernă în culori închise, cu degradee vibrante de violet și cyan, animații fluide și un layout complet adaptabil, optimizat pentru toate dispozitivele.

**Ideal pentru:**

- Site-uri web cu liste de servere de jocuri
- Platforme de monitorizare a serverelor
- Portaluri ale comunității de jocuri
- Servicii de închiriere de servere/găzduire

---

## ✨ Caracteristici

### 🎨 Design

- **Tema modernă în culori închise** – Schemă de culori elegantă, în nuanțe de albastru-gri închis
- **Gradiente vibrante** – Culori de accent: violet, cyan și roz
- **Efecte de glassmorfism** – Fundaluri estompate și elemente transparente
- **Animații fluide** – Efecte la trecerea cursorului, tranziții și microinteracțiuni
- **Stil VIP/Premium** – Accente aurii pentru serverele și conținutul VIP

### 📱 Adaptabil

- **Design „Mobile-First”** – Optimizat pentru toate dimensiunile de ecran
- **Navigare adaptabilă** – Meniu mobil pliabil
- **Aspecturi adaptive** – Sisteme de grilă care se adaptează la lățimea ecranului
- **Optimizat pentru ecranul tactil** – zone de atingere mari pentru utilizatorii de dispozitive mobile

### 🔧 Funcționalitate

- **Căutare și filtre pentru servere** – Opțiuni avansate de filtrare
- **Statistici server** – Numărul de jucători și ping-ul în timp real
- **Diagrame interactive** – Integrarea Chart.js pentru vizualizarea datelor
- **Evidențierea serverelor VIP** – Stilizare specială pentru anunțurile premium
- **Autentificarea utilizatorilor** – Paginile de conectare și înregistrare

### 🔍 Optimizat pentru SEO

- **Meta-etichete** – Completați meta-etichetele SEO pe toate paginile
- **Open Graph** – Optimizarea partajării pe rețelele sociale
- **Twitter Cards** – Previzualizări îmbogățite pe Twitter
- **HTML semantic** – Structura corectă HTML5
- **URL-uri canonice** – Previn problemele legate de conținutul duplicat

---

## 📄 Pagini

| Pagină | Descriere |
| ----------------- | ---------------------------------------------------------------------------------------- |
| `index.html` | Pagina de start cu secțiunea „Hero”, caracteristici, planuri tarifare, statistici și jocuri compatibile |
| `servers.html` | Browser de servere cu funcție de căutare, filtre, servere VIP, servere populare și tabel complet al serverelor |
| `serverinfo.html` | Pagină cu informații detaliate despre server, cu grafice, statistici și detalii despre server |
| `contact.html` | Formular de contact cu date de contact, linkuri către rețelele sociale și întrebări frecvente |
| `login.html` | Pagina de autentificare a utilizatorilor cu opțiuni de autentificare prin rețele sociale (Discord, Steam) |
| `register.html` | Pagina de înregistrare a utilizatorilor cu validarea formularului |
| `docs.html` | Pagina de documentație cu structura proiectului și ghiduri de utilizare |

---

## 🛠 Tehnologii

### Nucleu

- **HTML5** – Marcaj semantic
- **CSS3** – Proprietăți personalizate, flexbox, grid
- **JavaScript** – Vanilla JS pentru interacțiuni

### Framework-uri și biblioteci

- **TailwindCSS** – Framework CSS bazat pe utilități (prin CDN)
- **Icoane Bootstrap** - Bibliotecă de icoane
- **Chart.js** – Diagrame și grafice interactive
- **Google Fonts** – Familia de fonturi Rajdhani

### Paleta de culori

```
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)
```

---

## 📦 Instalare

### Opțiunea 1: Descărcare directă

1. Descărcați sau clonați acest depozit
2. Deschideți `index.html`în browserul dvs.
3. Asta e tot! Nu este necesar niciun proces de compilare

### Opțiunea 2: Server local

Pentru dezvoltare, folosiți un server local:

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

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

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

Apoi deschideți pagina în`http://localhost:8000` browserul dumneavoastră.

---

## 🎨 Personalizare

### Schimbarea culorilor

Editați proprietățile personalizate CSS în`assets/css/style.css`:

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

### Adăugarea de pagini noi

1. Copiază un fișier HTML existent ca șablon
2. Actualizați titlul și etichetele meta
3. Modificați conținutul după cum este necesar
4. Actualizați linkurile de navigare din toate paginile

### Modificarea navigării

Bara de navigare se află în partea de sus a fiecărui fișier HTML. Actualizați atât secțiunile din meniul pentru desktop, cât și cele din meniul pentru dispozitive mobile atunci când adăugați linkuri noi.

### Personalizarea graficelor

Graficele utilizează Chart.js. Configurația se găsește în secțiunea de scripturi a fișierului `serverinfo.html`.

---

## 📁 Structura proiectului

```
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
```

---

## 🎮 Jocuri compatibile (versiune demo)

Șablonul include pictograme demonstrative pentru:

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

Adăugați mai multe jocuri plasând pictograme în `assets/images/games/`.

---

## 📱 Compatibilitate cu browserele

| Browser | Asistență |
| ------- | ---------------- |
| Chrome | ✅ Complet |
| Firefox | ✅ Complet |
| Safari | ✅ Complet |
| Margine | ✅ Complet |
| Operă | ✅ Complet |
| IE 11 | ❌ Nu este acceptat |

---

## 🔧 Componente cheie

### Bara de navigare

- Poziție fixă cu efect de estompare
- Se micșorează la derulare
- Chenar animat cu gradient
- Meniu adaptabil pentru dispozitive mobile
- Butoanele „Autentificare” și „Înregistrare”

### Plăci de server

- Pictograma jocului și numele serverului
- Numărul de jucători cu bara de progres
- Ping și informații despre locație
- Indicator de stare online/offline
- Insignă VIP pentru serverele premium

### Fișe de prețuri

- Sistem de tarifare pe trei niveluri (săptămânal, lunar, anual)
- Opțiunea evidențiată „Cel mai bun raport calitate-preț”
- Liste de caracteristici cu bife
- Butoane CTA animate

---

## 📊 Secțiunea de statistici

Secțiunea de statistici include contoare animate:

- Numărul total de utilizatori
- Ultimul utilizator înregistrat
- Număr total de servere
- Servere VIP
- Jocuri compatibile
- Țări
- Numărul total de jucători
- Procentul de disponibilitate

---

## 🤝 Mulțumiri

- **Proiectare și dezvoltare**: illusion @ CodeStrike.STORE
- **Icoane**: Icoane Bootstrap
- **Framework CSS**: TailwindCSS
- **Diagrame**: Chart.js
- **Fonturi**: Google Fonts - Rajdhani

---

## 📄 Licență

Acest șablon este pus la dispoziție atât pentru uz personal, cât și pentru uz comercial. Menționarea sursei este apreciată, dar nu este obligatorie.

---

## 🆘 Asistență

Pentru întrebări, probleme sau solicitări de personalizare:

- 🌐 Site web: codestrike.store
- 💬 Discord: Alătură-te serverului comunității noastre

---

Realizat cu ❤️ de CodeStrike.STORE

© 2025 ServerSeek. Toate drepturile rezervate.