firefrost-operations-manual/docs/planning/ideas/features/ghost-server-listing-design.md

# 🎮 GHOST SERVER LISTING PAGE - DESIGN

**Purpose:** Display all Firefrost Gaming servers with join info  
**URL:** `/servers`  
**Template:** Custom grid layout  
**Version:** 1.0  
**Created:** February 14, 2026

---

## 📋 SERVER INVENTORY (Current)

### TX1 Dallas Servers (5 Minecraft + 1 TTRPG)
1. **Stoneblock 4** - 38.68.14.26:25565
2. **Reclamation** - 38.68.14.27:25565
3. **Society: Sunlit Valley** - 38.68.14.28:25565
4. **Vanilla 1.21.11** - 38.68.14.29:25565
5. **All The Mons** - 38.68.14.30:25565
6. **FoundryVTT** - 38.68.14.26:30000 (Virtual Tabletop)

### NC1 Charlotte Servers (6 Minecraft)
7. **The Ember Project** - 216.239.104.130:25565
8. **Minecolonies: Create and Conquer** - 216.239.104.130:25566
9. **All The Mods 10** - 216.239.104.130:25569
10. **EMC Subterra Tech** - 216.239.104.130:25571
11. **Homestead** - 216.239.104.130:25572
12. **Hytale** - 216.239.104.130:25520

**Total:** 11 Minecraft servers + 1 TTRPG platform

---

## 🎨 PAGE LAYOUT

### Header Section
```markdown
# Firefrost Gaming Servers

**13 active servers** | **99.9% uptime** | **DDoS protected**

Choose your adventure. All Frost Path servers welcome players 13+.  
The Fire Path (Ignis Protocol) is coming soon for 18+ verified players.
```

### Filter Buttons (Above Grid)
```html
<div class="server-filters">
  <button class="filter-btn active" data-filter="all">All Servers</button>
  <button class="filter-btn" data-filter="frost">❄️ Frost Path</button>
  <button class="filter-btn" data-filter="modpack">Modded</button>
  <button class="filter-btn" data-filter="vanilla">Vanilla</button>
  <button class="filter-btn" data-filter="ttrpg">TTRPG</button>
</div>
```

**Note:** All servers are currently Frost Path (all-ages). Fire filter disabled until Ignis launches.

---

## 🃏 SERVER CARD DESIGN

Each server gets a **card** with this structure:

```html
<div class="server-card frost-path" data-type="modpack">
  <div class="server-header">
    <h3 class="server-name">Stoneblock 4</h3>
    <span class="server-status online">● Online</span>
  </div>
  
  <div class="server-details">
    <p class="server-description">
      Sky-based modpack where you start on a single stone block. Expand, automate, and thrive in the void.
    </p>
    
    <ul class="server-features">
      <li>🔧 Tech-heavy automation</li>
      <li>🏗️ Sky island expansion</li>
      <li>⚡ Quest-driven progression</li>
    </ul>
    
    <div class="server-meta">
      <span class="server-location">📍 Dallas, TX</span>
      <span class="server-path">❄️ Frost Path</span>
    </div>
  </div>
  
  <div class="server-connect">
    <p class="server-ip">
      <strong>IP:</strong> <code>38.68.14.26:25565</code>
      <button class="copy-btn" data-clipboard="38.68.14.26:25565">Copy</button>
    </p>
    <a href="#how-to-join" class="button">How to Join</a>
  </div>
</div>
```

---

## 📝 COMPLETE SERVER CONTENT

### 1. Stoneblock 4 ❄️
**Type:** Modded (Tech/Automation)  
**Location:** Dallas, TX  
**IP:** 38.68.14.26:25565  
**Path:** Frost

**Description:**  
Sky-based modpack where you start on a single stone block floating in the void. Expand your island, master complex automation, and thrive in extreme minimalism.

**Features:**
- 🔧 Tech-heavy automation (Applied Energistics, Refined Storage)
- 🏗️ Infinite sky island expansion
- ⚡ Quest-driven progression system
- 🌟 Perfect for automation enthusiasts

---

### 2. Reclamation ❄️
**Type:** Modded (Exploration/Building)  
**Location:** Dallas, TX  
**IP:** 38.68.14.27:25565  
**Path:** Frost

**Description:**  
Reclaim a post-apocalyptic world. Survive, build, and restore civilization with a mix of magic and technology.

**Features:**
- 🌍 Post-apocalyptic survival theme
- 🔮 Magic + Tech progression
- 🏰 Large-scale building opportunities
- 🤝 Community-focused gameplay

---

### 3. Society: Sunlit Valley ❄️
**Type:** Modded (Community/Building)  
**Location:** Dallas, TX  
**IP:** 38.68.14.28:25565  
**Path:** Frost

**Description:**  
Build a thriving society together. Focus on community creation, trading, and collaborative infrastructure.

**Features:**
- 🏘️ Society-building mechanics
- 💰 Player-driven economy
- 🤝 Collaborative town projects
- 🌞 Peaceful, creative focus

---

### 4. Vanilla 1.21.11 ❄️
**Type:** Vanilla Minecraft  
**Location:** Dallas, TX  
**IP:** 38.68.14.29:25565  
**Path:** Frost

**Description:**  
Pure Minecraft experience on the latest version. No mods, no complexity—just you, blocks, and creativity.

**Features:**
- ⚒️ Pure vanilla gameplay
- 🎯 Latest Minecraft version (1.21.11)
- 🌲 Fresh world (no reset planned)
- 👥 Great for new players

---

### 5. All The Mons ❄️
**Type:** Modded (Pokémon/Adventure)  
**Location:** Dallas, TX  
**IP:** 38.68.14.30:25565  
**Path:** Frost

**Description:**  
Gotta catch 'em all in Minecraft! Pokémon-themed modpack with battling, trading, and exploration.

**Features:**
- 🎮 Full Pokémon mechanics
- ⚔️ PvP battles enabled
- 🗺️ Custom gyms and quests
- 🏆 Competitive leaderboards

---

### 6. The Ember Project ❄️
**Type:** Modded (Magic/Adventure)  
**Location:** Charlotte, NC  
**IP:** 216.239.104.130:25565  
**Path:** Frost

**Description:**  
Magic-focused adventure modpack. Master arcane arts, explore custom dimensions, and uncover ancient secrets.

**Features:**
- 🔮 Deep magic system
- 🌌 Custom dimensions
- 📜 Story-driven quests
- ✨ Spellcrafting mechanics

---

### 7. Minecolonies: Create and Conquer ❄️
**Type:** Modded (Colony Management)  
**Location:** Charlotte, NC  
**IP:** 216.239.104.130:25566  
**Path:** Frost

**Description:**  
Build and manage your own medieval colony. Assign workers, automate production, and expand your empire with Create mod integration.

**Features:**
- 🏰 Colony management system
- 🔧 Create mod integration
- 👷 NPC workers and automation
- 📈 Progressive town expansion

---

### 8. All The Mods 10 ❄️
**Type:** Modded (Kitchen Sink)  
**Location:** Charlotte, NC  
**IP:** 216.239.104.130:25569  
**Path:** Frost

**Description:**  
The ultimate kitchen sink modpack. Over 400 mods—every playstyle, every progression path. Your way, your pace.

**Features:**
- 🎯 400+ mods (tech, magic, exploration, building)
- 🔬 No forced progression path
- 💪 High-performance server (20GB RAM)
- 🌟 For experienced modded players

**Note:** Resource-intensive pack. Recommended: 8GB+ RAM allocated to Minecraft.

---

### 9. EMC Subterra Tech ❄️
**Type:** Modded (Tech/Underground)  
**Location:** Charlotte, NC  
**IP:** 216.239.104.130:25571  
**Path:** Frost

**Description:**  
Underground tech survival. Build sprawling subterranean bases and master advanced automation in the depths.

**Features:**
- ⛏️ Underground-focused gameplay
- 🔧 Advanced tech progression
- 🏭 Large-scale automation
- 🌑 Unique survival challenge

---

### 10. Homestead ❄️
**Type:** Modded (Farming/Building)  
**Location:** Charlotte, NC  
**IP:** 216.239.104.130:25572  
**Path:** Frost

**Description:**  
Peaceful farming and homesteading. Build your dream farm, raise animals, and live the simple life.

**Features:**
- 🌾 Farming-focused mods
- 🐄 Advanced animal husbandry
- 🏡 Detailed building options
- ☮️ Peaceful, relaxing gameplay

---

### 11. Hytale ❄️
**Type:** Modded (Adventure)  
**Location:** Charlotte, NC  
**IP:** 216.239.104.130:5520  
**Path:** Frost

**Description:**  
Adventure-focused modpack with custom quests, dungeons, and boss fights. Explore, conquer, loot.

**Features:**
- ⚔️ RPG progression system
- 🗺️ Custom dungeons & bosses
- 💎 Unique loot system
- 🏆 Challenging endgame content

---

### 12. FoundryVTT (TTRPG Platform) ❄️
**Type:** Virtual Tabletop (D&D, Pathfinder, etc.)  
**Location:** Dallas, TX  
**URL:** https://foundry.firefrostgaming.com  
**Path:** Frost

**Description:**  
Not Minecraft! Our FoundryVTT server hosts tabletop RPG sessions. Run Dungeons & Dragons, Pathfinder, and more with rich digital tools.

**Features:**
- 🎲 Full TTRPG support (D&D 5e, Pathfinder, etc.)
- 🗺️ Dynamic maps and tokens
- 📚 Shared character sheets
- 🎭 Voice/video integration

**Access:** Discord members only (request invite in #ttrpg channel)

---

## 🎨 CSS FOR SERVER CARDS

```css
/* ═══════════════════════════════════════════════════════════
   SERVER LISTING GRID
   ═══════════════════════════════════════════════════════════ */

.servers-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
  gap: var(--spacing-lg) !important;
  margin-top: var(--spacing-lg) !important;
}

@media (max-width: 768px) {
  .servers-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SERVER CARD
   ═══════════════════════════════════════════════════════════ */

.server-card {
  background: var(--frost-glass) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--frost-border) !important;
  border-radius: 0 !important;
  padding: var(--spacing-lg) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.server-card:hover {
  border-color: var(--frost-primary) !important;
  box-shadow: 0 0 24px var(--frost-glow) !important;
  transform: translateY(-4px) !important;
}

/* Server Header */
.server-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: var(--spacing-md) !important;
}

.server-name {
  font-family: var(--font-heading) !important;
  color: var(--frost-primary) !important;
  font-size: 1.5rem !important;
  margin: 0 !important;
}

.server-status {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

.server-status.online {
  color: #00FF00 !important;
}

.server-status.offline {
  color: #FF0000 !important;
}

/* Server Details */
.server-description {
  font-size: 0.9rem !important;
  color: var(--frost-text) !important;
  margin-bottom: var(--spacing-md) !important;
  line-height: 1.6 !important;
}

.server-features {
  list-style: none !important;
  padding: 0 !important;
  margin: var(--spacing-md) 0 !important;
}

.server-features li {
  padding: 0.25rem 0 !important;
  font-size: 0.9rem !important;
  color: var(--frost-text) !important;
}

.server-meta {
  display: flex !important;
  gap: var(--spacing-md) !important;
  margin: var(--spacing-md) 0 !important;
  font-size: 0.85rem !important;
}

.server-meta span {
  color: var(--frost-text) !important;
  opacity: 0.8 !important;
}

/* Server Connect Section */
.server-connect {
  margin-top: var(--spacing-md) !important;
  padding-top: var(--spacing-md) !important;
  border-top: 1px solid var(--frost-border) !important;
}

.server-ip {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-sm) !important;
  margin-bottom: var(--spacing-md) !important;
}

.server-ip code {
  background: rgba(0, 229, 255, 0.1) !important;
  border: 1px solid var(--frost-border) !important;
  padding: 0.5rem !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  flex: 1 !important;
}

.copy-btn {
  background: var(--frost-secondary) !important;
  border: 1px solid var(--frost-border) !important;
  color: var(--frost-text) !important;
  padding: 0.5rem 1rem !important;
  cursor: pointer !important;
  font-size: 0.85rem !important;
  transition: all 0.2s ease !important;
}

.copy-btn:hover {
  background: var(--frost-primary) !important;
  color: var(--frost-background) !important;
}

/* ═══════════════════════════════════════════════════════════
   FILTER BUTTONS
   ═══════════════════════════════════════════════════════════ */

.server-filters {
  display: flex !important;
  gap: var(--spacing-sm) !important;
  margin-bottom: var(--spacing-lg) !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.filter-btn {
  background: var(--frost-secondary) !important;
  border: 1px solid var(--frost-border) !important;
  color: var(--frost-text) !important;
  padding: 0.5rem 1.5rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: var(--font-heading) !important;
  font-size: 0.9rem !important;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--frost-primary) !important;
  color: var(--frost-background) !important;
}
```

---

## 📱 "HOW TO JOIN" SECTION

Add this at bottom of /servers page:

```markdown
---

## How to Join a Server

### Step 1: Get Minecraft
- **Java Edition** required (not Bedrock)
- Purchase from minecraft.net
- Recommended version: Latest stable

### Step 2: Join Our Discord
- Get support, meet players, find server events
- [Join Discord](https://discord.gg/firefrost)

### Step 3: Connect to Server
1. Open Minecraft launcher
2. Click "Multiplayer"
3. Click "Add Server"
4. Paste the server IP (from card above)
5. Click "Done" → Double-click server to join

### For Modded Servers:
1. Download modpack (links in Discord #modpacks channel)
2. Install via launcher (CurseForge, Prism Launcher, etc.)
3. Launch modpack
4. Connect to server IP

**Need help?** Ask in Discord #support channel!

---

## Server Rules

✅ Be respectful  
✅ No griefing (unless PvP server)  
✅ No cheating/hacking  
✅ Follow staff instructions  
✅ Keep chat family-friendly (Frost Path)

**Read full rules:** [Link to /rules page]

---
```

---

## 🚀 IMPLEMENTATION STEPS

### 1. Create Page in Ghost
- Pages → New Page → Title: "Servers"
- URL slug: `/servers`

### 2. Add Content
- Paste header section
- Add filter buttons (HTML block)
- Create server cards (12 cards total)
- Add "How to Join" section at bottom

### 3. Add CSS
- Append server card CSS to your main Frost CSS injection
- OR add in page-specific code injection

### 4. Test Functionality
- [ ] Filter buttons work (or remove if not implementing JS)
- [ ] Copy IP buttons work (or make them manual copy)
- [ ] Cards display properly on mobile
- [ ] All IPs are correct

### 5. Future Enhancements
- Add player count (if Pterodactyl API integration)
- Add "Online/Offline" status (ping servers)
- Add modpack download links
- Add server-specific screenshots

---

## 💡 OPTIONAL: JAVASCRIPT FOR FILTERS

If you want filter buttons to actually work:

```javascript
// Simple filter functionality
document.addEventListener('DOMContentLoaded', function() {
  const filterBtns = document.querySelectorAll('.filter-btn');
  const serverCards = document.querySelectorAll('.server-card');
  
  filterBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      // Remove active class from all buttons
      filterBtns.forEach(b => b.classList.remove('active'));
      // Add active to clicked button
      this.classList.add('active');
      
      const filter = this.dataset.filter;
      
      serverCards.forEach(card => {
        if (filter === 'all') {
          card.style.display = 'flex';
        } else if (card.dataset.type === filter) {
          card.style.display = 'flex';
        } else {
          card.style.display = 'none';
        }
      });
    });
  });
});
```

Add to Ghost: Settings → Code Injection → Site Footer

---

**Fire + Frost + Forever** 🔥❄️💡

**Created by:** Catalyst the Second  
**Date:** February 14, 2026  
**Status:** Ready to build