Minecraft Server Website templates v1.0

The Hive - Minecraft Server Website
A modern, responsive website for The Hive Minecraft server featuring real-time player counts, game mode showcases, voting integration, and community features.

Table of Contents

• [Overview](#overview)
• [Features](#features)
• [Pages](#pages)
• [Configuration](#configuration)
• [File Structure](#file-structure)
• [Customization Guide](#customization-guide)
• [Technologies Used](#technologies-used)

Overview
This website serves as the official landing page for The Hive Minecraft server. It provides players with essential information about the server, game modes, rules, and support options. The design features a dark purple/blue theme with cyan accents, optimized for both desktop and mobile devices.

Features
Real-Time Player Count

• Live player count displayed in the navigation bar
• Automatically updates every 30 seconds
• Uses the mcstatus.io API to fetch server status
• Visual indicator (green dot) shows server online/offline status

Copy Server IP

• One-click button to copy the server IP to clipboard
• Toast notification confirms successful copy
• Fallback support for older browsers

Game Modes Showcase

• Free For All (FFA): PvP arena mode with economy, duels, and more
• LifeSteal: Survival mode where defeating players steals their hearts
• Configurable game mode images

Voting System

• Integration with PlanetMinecraft voting
• Integration with Servers-Minecraft voting
• Clickable vote cards with visual feedback
• Toast notifications when opening voting pages

Discord Integration

• Discord banner section with join button
• Discord links in navigation (desktop & mobile)
• All Discord links controlled via single CONFIG setting

FAQ Section

• Expandable/collapsible FAQ items
• Smooth animations
• Common questions pre-loaded

Responsive Design

• Mobile-friendly navigation with hamburger menu
• Adapts to all screen sizes (mobile, tablet, desktop)
• Touch-friendly interactive elements

Pages
1. Home Page (index.html)
The main landing page featuring:

• Hero section with server branding
• Game modes showcase
• Voting section
• Discord banner
• FAQ section
• Footer

2. Rules Page (rules.html)
Server rules including:

• Minecraft Server Rules
• LifeSteal-specific Rules
• FFA-specific Rules
• Discord Rules
• Punishment information

3. Support Page (support.html)
Help and support resources:

• Discord contact card
• Email contact card
• How to get help guide
• Common issues and solutions
• Response time information

Configuration
All configurable options are located in the CONFIG object at the top of each HTML file's script section.

# Main Configuration (index.html)

JavaScript:

const CONFIG = {
    // Your Minecraft Server IP (used for player count and copy button)
    SERVER_IP: 'spymc.xyz',
 
    // Your Discord invite link
    DISCORD_LINK: 'https://discord.gg/YOUR_INVITE_CODE',
 
    // Voting Links - Replace with your actual voting page URLs
    VOTE_PLANETMINECRAFT: 'https://www.planetminecraft.com/server/YOUR_SERVER_ID/vote/',
    VOTE_SERVERS_MINECRAFT: 'https://servers-minecraft.net/server-YOUR_SERVER_ID.vote',
 
    // Game Mode Images - Replace with your own image URLs
    FFA_IMAGE: 'https://i.ibb.co/8ntPYV3X/OIP.webp',
    LIFESTEAL_IMAGE: 'https://i.ibb.co/cchdnRrC/OIP-1.webp',
 
    // Player count refresh interval (in milliseconds)
    // 30000 = 30 seconds, 60000 = 1 minute
    PLAYER_COUNT_REFRESH: 30000
};

# Configuration Options

| Option | Description | Example |
|--------|-------------|---------|
| SERVER_IP | Your Minecraft server IP address | 'play.yourserver.net' |
| DISCORD_LINK | Your Discord server invite link | 'https://discord.gg/abcd1234' |
| VOTE_PLANETMINECRAFT | PlanetMinecraft voting page URL | 'https://www.planetminecraft.com/server/123/vote/' |
| VOTE_SERVERS_MINECRAFT | Servers-Minecraft voting page URL | 'https://servers-minecraft.net/server-123.vote' |
| FFA_IMAGE | Image URL for FFA game mode | 'https://example.com/ffa.jpg' |
| LIFESTEAL_IMAGE | Image URL for LifeSteal game mode | 'https://example.com/lifesteal.jpg' |
| PLAYER_COUNT_REFRESH | How often to update player count (ms) | 30000 (30 seconds) |


File Structure

Code:

/
├── index.html          # Main landing page
├── rules.html          # Server rules page
├── support.html        # Help and support page
├── server.js           # Express server for hosting
├── package.json        # Node.js dependencies
├── README.md           # This documentation file
└── attached_assets/    # Image assets folder
    └── *.png           # Various image files

Customization Guide

### Changing the Server Name
1. Update the <title> tag in each HTML file
2. Change the .logo text in the hero section (index.html)
3. Update the footer copyright text

Changing Colors
The website uses CSS custom properties. Main colors:

• Primary accent: #00bfff (cyan)
• Background: #0f0a15 (dark purple)
• Secondary background: #1a1a2e (darker purple)
• Text: #ffffff (white)
• Highlight: #ffd700 (gold)

Adding New Game Modes
1. Copy an existing .gamemode div in index.html
2. Update the content (title, description, features)
3. Add image URL to CONFIG if needed
4. Use .reverse class for alternating layout

Updating Hero Background
Change the background URL in the .hero-bg CSS:

CSS:

.hero-bg {
    background: url('YOUR_IMAGE_URL') center center / cover no-repeat;
}

Modifying Navigation Links
Edit the .nav-links and .mobile-menu sections in each HTML file.

Technologies Used

• HTML5: Semantic markup
• CSS3: Modern styling with flexbox, grid, animations
• JavaScript (ES6+): Interactive features, API calls
• Google Fonts: Press Start 2P (logo), Inter (body text)
• mcstatus.io API: Real-time Minecraft server status
• Express.js: Server-side hosting

API Integration

### Player Count API
The website uses the mcstatus.io API:

Code:

https://api.mcstatus.io/v2/status/java/{SERVER_IP}

Response includes:

• online: Boolean indicating if server is online
• players.online: Current player count

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome for Android)

Running the Website

# Development

Bash:

npm install
node server.js

The server runs on port 5000 by default.

Production
Deploy the HTML files to any static hosting service or use the included Express server.

Credits

• Design and Development: The Hive Team
• Fonts: Google Fonts
• Server Status API: mcstatus.io

License
© 2025 The Hive. All rights reserved.