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

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

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

<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

/* ═══════════════════════════════════════════════════════════
   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:

---

## 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:

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