# 🎮 ServerSeek - Gaming Server Browser Template

**A modern, responsive HTML template for gaming server browser platforms**

---

## 📋 Overview

ServerSeek is a premium HTML template designed for gaming server browser and tracking platforms. It features a modern dark theme with vibrant purple/cyan gradients, smooth animations, and a fully responsive layout optimized for all devices.

**Perfect for:**

- Gaming server listing websites
- Server tracking platforms
- Gaming community portals
- Server rental/hosting services

---

## ✨ Features

### 🎨 Design

- **Modern Dark Theme** - Sleek dark blue-gray color scheme
- **Vibrant Gradients** - Purple, cyan, and pink accent colors
- **Glassmorphism Effects** - Blurred backgrounds and transparent elements
- **Smooth Animations** - Hover effects, transitions, and micro-interactions
- **VIP/Premium Styling** - Gold accents for VIP servers and content

### 📱 Responsive

- **Mobile-First Design** - Optimized for all screen sizes
- **Responsive Navigation** - Collapsible mobile menu
- **Adaptive Layouts** - Grid systems that adjust to screen width
- **Touch-Friendly** - Large tap targets for mobile users

### 🔧 Functionality

- **Server Search & Filters** - Advanced filtering options
- **Server Statistics** - Real-time player counts and ping
- **Interactive Charts** - Chart.js integration for data visualization
- **VIP Server Highlighting** - Special styling for premium listings
- **User Authentication** - Login and Register pages

### 🔍 SEO Optimized

- **Meta Tags** - Complete SEO meta tags on all pages
- **Open Graph** - Social media sharing optimization
- **Twitter Cards** - Rich Twitter previews
- **Semantic HTML** - Proper HTML5 structure
- **Canonical URLs** - Prevents duplicate content issues

---

## 📄 Pages

| Page | Description |
| ----------------- | ---------------------------------------------------------------------------------------- |
| `index.html` | Homepage with hero section, features, pricing plans, statistics, and supported games |
| `servers.html` | Server browser with search, filters, VIP servers, popular servers, and full server table |
| `serverinfo.html` | Detailed server information page with charts, stats, and server details |
| `contact.html` | Contact form with contact information, social links, and FAQ |
| `login.html` | User login page with social login options (Discord, Steam) |
| `register.html` | User registration page with form validation |
| `docs.html` | Documentation page with project structure and usage guides |

---

## 🛠 Technologies

### Core

- **HTML5** - Semantic markup
- **CSS3** - Custom properties, flexbox, grid
- **JavaScript** - Vanilla JS for interactions

### Frameworks & Libraries

- **TailwindCSS** - Utility-first CSS framework (via CDN)
- **Bootstrap Icons** - Icon library
- **Chart.js** - Interactive charts and graphs
- **Google Fonts** - Rajdhani font family

### Color Palette

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

---

## 📦 Installation

### Option 1: Direct Download

1. Download or clone this repository
2. Open `index.html` in your browser
3. That's it! No build process required

### Option 2: Local Server

For development, use a local server:

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

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

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

Then open `http://localhost:8000` in your browser.

---

## 🎨 Customization

### Changing Colors

Edit the CSS custom properties in `assets/css/style.css`:

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

### Adding New Pages

1. Copy an existing HTML file as a template
2. Update the title and meta tags
3. Modify the content as needed
4. Update navigation links in all pages

### Modifying Navigation

The navigation is located at the top of each HTML file. Update both desktop and mobile menu sections when adding new links.

### Customizing Charts

Charts use Chart.js. Configuration is in the script section of `serverinfo.html`.

---

## 📁 Project Structure

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

---

## 🎮 Supported Games (Demo)

The template includes demo icons for:

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

Add more games by placing icons in `assets/images/games/`.

---

## 📱 Browser Support

| Browser | Support |
| ------- | ---------------- |
| Chrome | ✅ Full |
| Firefox | ✅ Full |
| Safari | ✅ Full |
| Edge | ✅ Full |
| Opera | ✅ Full |
| IE 11 | ❌ Not Supported |

---

## 🔧 Key Components

### Navigation Bar

- Fixed position with blur effect
- Shrinks on scroll
- Gradient animated border
- Responsive mobile menu
- Login/Register buttons

### Server Cards

- Game icon and server name
- Player count with progress bar
- Ping and location info
- Online/Offline status indicator
- VIP badge for premium servers

### Pricing Cards

- Three-tier pricing (Weekly, Monthly, Yearly)
- Highlighted "Best Value" option
- Feature lists with checkmarks
- Animated CTA buttons

---

## 📊 Statistics Section

The statistics section includes animated counters:

- Total Users
- Last Registered User
- Total Servers
- VIP Servers
- Games Supported
- Countries
- Total Players
- Uptime Percentage

---

## 🤝 Credits

- **Design & Development**: illusion @ CodeStrike.STORE
- **Icons**: Bootstrap Icons
- **CSS Framework**: TailwindCSS
- **Charts**: Chart.js
- **Fonts**: Google Fonts - Rajdhani

---

## 📄 License

This template is provided for personal and commercial use. Attribution is appreciated but not required.

---

## 🆘 Support

For questions, issues, or customization requests:

- 🌐 Website: codestrike.store
- 💬 Discord: Join our community server

---

Made with ❤️ by CodeStrike.STORE

© 2025 ServerSeek. All rights reserved.