Comprehensive guide to the project structure, styling, and functionality
ServerSeek is a modern gaming server tracking template designed to help gamers find and track servers across multiple gaming platforms. The project is built with a combination of HTML, CSS, JavaScript, and utilizes TailwindCSS for responsive layouts.
ServerSeek/
├── index.html # Main homepage
├── servers.html # Server listing page
├── contact.html # Contact page
├── docs.html # Documentation page
├── assets/
│ ├── css/
│ │ ├── style.css # Main stylesheet
│ │ └── docs.css # Documentation stylesheet
│ ├── js/
│ │ └── main.js # Main JavaScript file
│ └── images/
│ ├── games/ # Game icon images
│ ├── seo/ # SEO images (og_image.png, etc.)
│ └── ... # Other images
└── ...
The HTML structure is organized to provide a clean, semantic layout. The project uses modern HTML5 elements and follows best practices for accessibility and SEO.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ServerSeek - Page Title</title>
<!-- CSS & Fonts -->
</head>
<body>
<!-- Navbar -->
<header class="navbar-container">
<!-- Navigation content -->
</header>
<!-- Main content sections -->
<section class="section-name">
<div class="container">
<!-- Section content -->
</div>
</section>
<!-- Footer -->
<footer class="footer-section">
<!-- Footer content -->
</footer>
<!-- JavaScript -->
<script src="assets/js/main.js"></script>
</body>
</html>The CSS styling for ServerSeek is organized into modular components with a focus on maintainability and reusability. The main stylesheet uses custom CSS variables for consistent theming across the site.
The CSS follows component-based organization, where each UI element has its own dedicated styles. This makes it easier to maintain and update specific parts of the UI without affecting others.
/* Component-based organization */
/* Global Styles */
body {
background-color: var(--color-dark-900);
color: var(--color-light-100);
font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
line-height: 1.6;
}
/* Typography */
.text-gradient {
background: linear-gradient(
90deg,
var(--color-primary) 0%,
var(--color-secondary) 50%,
var(--color-tertiary) 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
}
/* Buttons */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.875rem 1.75rem;
background-color: var(--color-primary);
color: var(--color-light-100);
font-weight: 600;
border-radius: 0.5rem;
transition: all 0.3s ease;
/* ... more styles ... */
}ServerSeek uses a modern, vibrant color palette defined with CSS variables in the :root section. This enables easy theming and consistent color usage throughout the application.
:root {
/* Main Colors */
--color-primary: #7e22ce; /* Primary purple */
--color-primary-hover: #9333ea; /* Lighter purple for hover states */
--color-secondary: #06b6d4; /* Cyan accent color */
--color-tertiary: #db2777; /* Pink accent color */
/* Background Colors */
--color-dark-900: #0f172a; /* Main background (almost black) */
--color-dark-800: #1e293b; /* Secondary background (dark blue-gray) */
--color-dark-700: #334155; /* Lighter background for cards, etc. */
/* Text Colors */
--color-light-100: #f1f5f9; /* Main text color (off-white) */
--color-light-200: #cbd5e1; /* Secondary text color (light gray) */
--color-light-300: #94a3b8; /* Muted text color */
/* Additional Colors */
--color-vip-gold: #fbbf24; /* Gold color for VIP elements */
--color-vip-glow: rgba(251, 191, 36, 0.3); /* Glow for VIP elements */
--color-success: #10b981; /* Success/positive color */
}The JavaScript in ServerSeek enhances the user experience with interactive elements, animations, and dynamic functionality. The code is organized in a modular way with separate functions for specific features.
// Navbar scroll effect
const navbar = document.querySelector(".navbar-container");
let lastScrollTop = 0;
let isScrollingUp = false;
// Initial check in case the page is loaded partially scrolled
if (window.scrollY > 50) {
navbar.classList.add("navbar-scrolled");
} else {
navbar.classList.remove("navbar-scrolled");
}
window.addEventListener("scroll", function() {
// Detect scroll position
const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
// Determine scroll direction
isScrollingUp = currentScroll < lastScrollTop;
// Add or remove classes based on scroll position and direction
if (currentScroll > 50) {
navbar.classList.add("navbar-scrolled");
// If scrolling down and navbar is visible, hide it
if (!isScrollingUp && currentScroll > 300) {
navbar.classList.add("navbar-hidden");
} else {
// If scrolling up, always show navbar
navbar.classList.remove("navbar-hidden");
}
} else {
// At the top of the page
navbar.classList.remove("navbar-scrolled");
navbar.classList.remove("navbar-hidden");
}
lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
}, { passive: true });// Counter animation for statistics
function animateCounters() {
const counters = document.querySelectorAll(".counter");
const speed = 200; // Lower is faster
counters.forEach((counter) => {
const target = +counter.getAttribute("data-target");
const increment = target / speed;
let count = 0;
const updateCount = () => {
if (count < target) {
count += increment;
counter.innerText = Math.floor(count).toLocaleString();
setTimeout(updateCount, 1);
} else {
counter.innerText = target.toLocaleString();
}
};
// Start animation when element is in viewport
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
updateCount();
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.1 }
);
observer.observe(counter);
});
}ServerSeek is built with a mobile-first approach, ensuring optimal display and usability across all device sizes. The responsive design is achieved using a combination of TailwindCSS utility classes and custom media queries.
/* Small devices (phones, 576px and up) */
@media (max-width: 576px) {
/* Small device specific styles */
}
/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
/* Medium device specific styles */
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
/* Large device specific styles */
}
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
/* Extra large device specific styles */
}For smaller screens, the navigation collapses into a hamburger menu that can be toggled to show/hide navigation links. This provides a clean interface without sacrificing functionality.
Content sections such as feature cards, pricing plans, and statistics use responsive grid layouts that adjust based on screen size:
ServerSeek includes several custom-designed UI components that are reused throughout the site. Each component has its own set of styles and sometimes JavaScript functionality.
Used in the "Why Us" section to showcase platform features with icons and descriptions.
Display different VIP plan options with pricing, features, and CTAs.
Present platform statistics with animated counters and progress bars.
Showcase supported games with interactive hover effects.
Various button styles with hover effects and animations.
<!-- Primary Button -->
<a href="servers.html" class="btn-primary">
<i class="bi bi-search mr-2"></i> Browse Servers
</a>
<!-- Secondary Button -->
<a href="servers.html#add-server" class="btn-secondary">
<i class="bi bi-plus-circle mr-2"></i> Add Server
</a>
<!-- VIP Button -->
<a href="#plans" class="btn-vip">
<i class="bi bi-gem mr-2"></i> Explore VIP Benefits
</a>Each page in the ServerSeek template follows a consistent structure while featuring unique content sections. Here's a breakdown of the main pages:
The main landing page that showcases the platform's features and value proposition.
Dedicated page for browsing and adding gaming servers.
The servers.html page provides a comprehensive interface for users to search, filter, and browse gaming servers across multiple platforms. The page is organized into several key sections:
The search and filtering system allows users to quickly find servers matching specific criteria:
VIP servers receive special visual treatment to highlight their premium status:
<!-- VIP Server Row Styling -->
<tr
class="hover:bg-[#293548] transition-colors bg-gradient-to-r from-[#fbbf24]/20 via-[#f59e0b]/15 to-[#d97706]/20"
style="border-left: 6px solid #f59e0b !important;"
>
<!-- Row content -->
</tr>The server listings are displayed in different formats throughout the page:
Each server listing contains essential information:
The All Servers table section uses a carefully structured HTML table with the following features:
<!-- All Servers Table Structure -->
<div class="overflow-x-auto bg-[#1e293b] rounded-lg shadow-lg border border-[#334155]">
<table class="min-w-full">
<thead>
<tr class="bg-[#0f172a] text-left">
<!-- Table headers -->
</tr>
</thead>
<tbody class="divide-y divide-[#334155]">
<!-- Server rows -->
</tbody>
</table>
</div>Detailed server information page that provides comprehensive statistics, performance metrics, and real-time data about a specific gaming server.
The serverinfo.html page is organized into several key sections that provide detailed information about a specific server:
The page uses Chart.js for visualizing server statistics. Here's an example of the chart configuration:
// Chart.js Configuration
Chart.defaults.color = "#94a3b8";
Chart.defaults.borderColor = "#334155";
// Player Count History Chart
const playerCountCtx = document
.getElementById("playerCountChart")
.getContext("2d");
new Chart(playerCountCtx, {
type: "line",
data: {
labels: ["12 AM", "3 AM", "6 AM", "9 AM", "12 PM", "3 PM", "6 PM", "9 PM"],
datasets: [{
label: "Players Online",
data: [15, 8, 5, 12, 25, 30, 28, 22],
borderColor: "#7e22ce",
backgroundColor: "rgba(126, 34, 206, 0.1)",
tension: 0.4,
fill: true,
}],
},
options: {
responsive: true,
plugins: {
legend: {
display: false,
},
},
scales: {
y: {
beginAtZero: true,
max: 32,
},
},
},
});The contact page provides multiple ways for users to get in touch with support and find answers to common questions.
The contact page is structured with the following components:
The contact form uses a responsive grid layout with styled form elements:
<form class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-light-200 text-sm mb-2">Name</label>
<input
type="text"
class="w-full bg-[#0f172a] border border-[#334155] text-light-100 px-4 py-3 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
placeholder="Your name"
/>
</div>
<div>
<label class="block text-light-200 text-sm mb-2">Email</label>
<input
type="email"
class="w-full bg-[#0f172a] border border-[#334155] text-light-100 px-4 py-3 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
placeholder="your@email.com"
/>
</div>
</div>
<!-- Additional form elements -->
</form>The login page provides a secure and user-friendly interface for users to access their ServerSeek accounts.
The login page features a clean, centered design with the following elements:
The password field includes a visibility toggle feature:
// Password visibility toggle
const passwordInput = document.querySelector('input[type="password"]');
const toggleButton = passwordInput.nextElementSibling;
let passwordVisible = false;
toggleButton.addEventListener("click", () => {
passwordVisible = !passwordVisible;
passwordInput.type = passwordVisible ? "text" : "password";
toggleButton.innerHTML = passwordVisible
? ''
: '';
});The registration page allows new users to create their ServerSeek account with comprehensive form validation and security features.
The registration page includes several key components:
Example of the registration form structure with validation attributes:
<form class="space-y-6">
<div>
<label class="block text-light-200 text-sm mb-2">Username</label>
<input
type="text"
class="w-full bg-[#0f172a] border border-[#334155] text-light-100 px-4 py-3 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
placeholder="Choose a username"
required
/>
</div>
<div>
<label class="block text-light-200 text-sm mb-2">Password</label>
<div class="relative">
<input
type="password"
class="w-full bg-[#0f172a] border border-[#334155] text-light-100 px-4 py-3 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
placeholder="••••••••"
required
/>
<button type="button" class="password-toggle">
<i class="bi bi-eye"></i>
</button>
</div>
<p class="mt-1 text-sm text-light-300">
Must be at least 8 characters long
</p>
</div>
<div class="flex items-start">
<input
type="checkbox"
id="terms"
class="w-4 h-4 mt-1 bg-[#0f172a] border border-[#334155] rounded focus:ring-primary"
required
/>
<label for="terms" class="ml-2 text-sm text-light-200">
I agree to the Terms of Service and Privacy Policy
</label>
</div>
</form>JavaScript implementation for handling multiple password visibility toggles:
// Password visibility toggle for multiple fields
const passwordInputs = document.querySelectorAll('input[type="password"]');
const toggleButtons = document.querySelectorAll('button[type="button"]');
toggleButtons.forEach((button, index) => {
let passwordVisible = false;
button.addEventListener("click", () => {
passwordVisible = !passwordVisible;
passwordInputs[index].type = passwordVisible ? "text" : "password";
button.innerHTML = passwordVisible
? ''
: '';
});
});Documentation page (current page) providing detailed information about the project.
ServerSeek is optimized for search engines to ensure better visibility and ranking. The template includes best practices for SEO that can be customized for specific implementations.
Each page includes essential meta tags in the
<head> section for improved search engine
visibility and social media sharing:
<!-- SEO Meta Tags -->
<meta name="description" content="Find and track the best gaming servers for CS2, CS16, Minecraft, and more with ServerSeek." />
<meta name="keywords" content="gaming servers, CS2 servers, Minecraft servers, server tracking, server finder" />
<meta name="author" content="ServerSeek" />
<meta name="theme-color" content="#7e22ce" />
<link rel="canonical" href="https://serverseek.com/page.html" />Social media optimization is implemented through Open Graph and Twitter Card meta tags, allowing rich previews when content is shared:
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://serverseek.com/" />
<meta property="og:title" content="ServerSeek - Find Your Perfect Gaming Server" />
<meta property="og:description" content="Find and track the best gaming servers for CS2, CS16, Minecraft, and more." />
<meta property="og:image" content="assets/images/seo/og_image.png" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://serverseek.com/" />
<meta property="twitter:title" content="ServerSeek - Find Your Perfect Gaming Server" />
<meta property="twitter:description" content="Find and track the best gaming servers for CS2, CS16, Minecraft, and more." />
<meta property="twitter:image" content="assets/images/seo/og_image.png" />
The template uses semantic HTML5 elements
(<header>, <nav>,
<section>, <footer>, etc.)
to provide clear structure that search engines can understand.
Search engines prioritize fast-loading websites. ServerSeek template includes several performance optimizations:
preconnect and
crossorigin attributes
Google primarily uses the mobile version of a site for indexing and ranking. ServerSeek is built with mobile-first design principles to ensure excellent performance across all devices.
// SEO Checklist for Implementation
1. Create unique title and meta description for each page
2. Ensure all images have descriptive alt attributes
3. Implement proper heading structure (H1, H2, H3)
4. Create an XML sitemap and submit to search engines
5. Set up robots.txt file to guide crawlers
6. Register with Google Search Console and Bing Webmaster Tools
7. Ensure site has SSL certificate (https)
8. Implement schema.org structured data where appropriate
9. Optimize page load speed (aim for < 3 seconds)
10. Create a content strategy with relevant keywords