Add Featured Servers page to GUI

GUI/index.html

@@ -35,6 +35,10 @@
                     <i class="fas fa-play"></i>
                     <span class="nav-tooltip" data-i18n="nav.play">Play</span>
                 </div>
+                <div class="nav-item" data-page="featured">
+                    <i class="fas fa-server"></i>
+                    <span class="nav-tooltip">Featured Servers</span>
+                </div>
                 <div class="nav-item" data-page="mods">
                     <i class="fas fa-box"></i>
                     <span class="nav-tooltip" data-i18n="nav.mods">Mods</span>
@@ -212,6 +216,40 @@
                         </div>
                     </div>
 
+                    <div id="featured-page" class="page">
+                        <div class="featured-layout">
+                            <div class="featured-left">
+                                <div class="featured-header">
+                                    <h2 class="featured-title">
+                                        <i class="fas fa-star mr-2"></i>
+                                        <span>FEATURED SERVERS</span>
+                                    </h2>
+                                </div>
+                                <div id="featuredServersList" class="featured-list">
+                                    <div class="loading-spinner">
+                                        <i class="fas fa-spinner fa-spin fa-2x"></i>
+                                        <p>Loading...</p>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="featured-right">
+                                <div class="featured-header">
+                                    <h2 class="featured-title">
+                                        <i class="fas fa-server mr-2"></i>
+                                        <span>HF2P SERVERS</span>
+                                    </h2>
+                                </div>
+                                <div id="myServersList" class="featured-list">
+                                    <div class="loading-spinner">
+                                        <i class="fas fa-spinner fa-spin fa-2x"></i>
+                                        <p>Loading...</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                     <div id="mods-page" class="page">
                         <div class="mods-header">
                             <div class="mods-search-container">
@@ -880,6 +918,7 @@
     </div>
 
     <script src="js/i18n.js"></script>
+    <script src="js/featured.js"></script>
     <script type="module" src="js/settings.js"></script>
     <script type="module" src="js/update.js"></script>
     <!-- updater.js disabled - using update.js instead which has skip button and macOS handling -->

GUI/js/featured.js

@@ -0,0 +1,165 @@
+// Featured Servers Management
+const FEATURED_SERVERS_API = 'https://assets.authbp.xyz/featured.json';
+
+/**
+ * Load and display featured servers
+ */
+async function loadFeaturedServers() {
+  const featuredContainer = document.getElementById('featuredServersList');
+  const myServersContainer = document.getElementById('myServersList');
+  
+  try {
+    console.log('[FeaturedServers] Fetching from', FEATURED_SERVERS_API);
+    
+    // Fetch featured servers from API (no cache)
+    const response = await fetch(FEATURED_SERVERS_API, {
+      cache: 'no-store',
+      headers: {
+        'Cache-Control': 'no-cache',
+        'Pragma': 'no-cache'
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    const featuredServers = data.featuredServers || [];
+    
+    console.log('[FeaturedServers] Loaded', featuredServers.length, 'featured servers');
+    
+    // Render featured servers
+    if (featuredServers.length === 0) {
+      featuredContainer.innerHTML = `
+        <div class="loading-spinner">
+          <i class="fas fa-info-circle fa-2x"></i>
+          <p>No featured servers</p>
+        </div>
+      `;
+    } else {
+      const featuredHTML = featuredServers.map((server, index) => {
+        console.log(`[FeaturedServers] Building featured card ${index + 1}:`, server.Name);
+        
+        const escapedName = (server.Name || 'Unknown Server').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        const escapedAddress = (server.Address || '').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+        const bannerUrl = server.img_Banner || 'https://via.placeholder.com/400x240/1e293b/ffffff?text=Server+Banner';
+        
+        return `
+          <div class="featured-server-card">
+            <img 
+              src="${bannerUrl}" 
+              alt="${escapedName}" 
+              class="featured-server-banner"
+              onerror="this.src='https://via.placeholder.com/400x240/1e293b/ffffff?text=Server'"
+            />
+            <div class="featured-server-content">
+              <h3 class="featured-server-name">${escapedName}</h3>
+              <div class="featured-server-address">
+                <span class="server-address-text">${escapedAddress}</span>
+                <button class="copy-address-btn" onclick="copyServerAddress('${escapedAddress}', this)">
+                  <i class="fas fa-copy"></i>
+                  <span>Copy</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        `;
+      }).join('');
+      
+      featuredContainer.innerHTML = featuredHTML;
+    }
+    
+    // Show "Coming Soon" for my servers
+    myServersContainer.innerHTML = `
+      <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 1.2rem;">
+        <p>Coming Soon</p>
+      </div>
+    `;
+    
+  } catch (error) {
+    console.error('[FeaturedServers] Error loading servers:', error);
+    featuredContainer.innerHTML = `
+      <div class="loading-spinner">
+        <i class="fas fa-exclamation-triangle fa-2x" style="color: #ef4444;"></i>
+        <p>Failed to load servers</p>
+        <p style="font-size: 0.9rem; color: #64748b;">${error.message}</p>
+      </div>
+    `;
+    myServersContainer.innerHTML = `
+      <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 1.2rem;">
+        <p>Coming Soon</p>
+      </div>
+    `;
+  }
+}
+
+/**
+ * Copy server address to clipboard
+ */
+async function copyServerAddress(address, button) {
+  try {
+    await navigator.clipboard.writeText(address);
+    
+    // Visual feedback
+    const originalHTML = button.innerHTML;
+    button.classList.add('copied');
+    button.innerHTML = '<i class="fas fa-check"></i><span>Copied!</span>';
+    
+    setTimeout(() => {
+      button.classList.remove('copied');
+      button.innerHTML = originalHTML;
+    }, 2000);
+    
+    console.log('[FeaturedServers] Copied address:', address);
+  } catch (error) {
+    console.error('[FeaturedServers] Failed to copy address:', error);
+    
+    // Fallback for older browsers
+    const textArea = document.createElement('textarea');
+    textArea.value = address;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    document.body.appendChild(textArea);
+    textArea.select();
+    
+    try {
+      document.execCommand('copy');
+      const originalHTML = button.innerHTML;
+      button.classList.add('copied');
+      button.innerHTML = '<i class="fas fa-check"></i><span>Copied!</span>';
+      
+      setTimeout(() => {
+        button.classList.remove('copied');
+        button.innerHTML = originalHTML;
+      }, 2000);
+    } catch (err) {
+      console.error('[FeaturedServers] Fallback copy also failed:', err);
+    }
+    
+    document.body.removeChild(textArea);
+  }
+}
+
+// Load featured servers when the featured page becomes visible
+document.addEventListener('DOMContentLoaded', () => {
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+        const featuredPage = document.getElementById('featured-page');
+        if (featuredPage && featuredPage.classList.contains('active')) {
+          loadFeaturedServers();
+        }
+      }
+    });
+  });
+  
+  const featuredPage = document.getElementById('featured-page');
+  if (featuredPage) {
+    observer.observe(featuredPage, { attributes: true });
+    
+    // Load immediately if already visible
+    if (featuredPage.classList.contains('active')) {
+      loadFeaturedServers();
+    }
+  }
+});

GUI/style.css

@@ -1107,6 +1107,216 @@ body {
     padding-bottom: 1rem;
 }
 
+/* Featured Servers Styles */
+.featured-layout {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    height: calc(100vh - 180px);
+    overflow: hidden;
+}
+
+.featured-left,
+.featured-right {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    min-height: 0;
+}
+
+.featured-header {
+    margin-bottom: 1.5rem;
+    flex-shrink: 0;
+}
+
+.featured-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: white;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.featured-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    min-height: 0;
+}
+
+.featured-list::-webkit-scrollbar {
+    width: 8px;
+}
+
+.featured-list::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+}
+
+.featured-list::-webkit-scrollbar-thumb {
+    background: rgba(147, 51, 234, 0.5);
+    border-radius: 4px;
+}
+
+.featured-list::-webkit-scrollbar-thumb:hover {
+    background: rgba(147, 51, 234, 0.7);
+}
+
+.featured-server-card {
+    position: relative;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    min-height: 120px;
+    flex-shrink: 0;
+}
+
+.featured-server-card:hover {
+    transform: translateX(4px);
+    border-color: rgba(147, 51, 234, 0.5);
+    box-shadow: 0 8px 40px rgba(147, 51, 234, 0.2);
+}
+
+.featured-server-banner {
+    width: 200px;
+    height: 100%;
+    min-height: 120px;
+    object-fit: cover;
+    background: linear-gradient(135deg, #1e293b, #334155);
+    flex-shrink: 0;
+}
+
+.featured-server-content {
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.75rem;
+}
+
+.featured-server-name {
+    font-size: 1.15rem;
+    font-weight: 600;
+    color: white;
+    line-height: 1.4;
+    margin: 0;
+}
+
+.featured-server-address {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 0.625rem 1rem;
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.server-address-text {
+    font-family: 'JetBrains Mono', monospace;
+    color: #94a3b8;
+    font-size: 0.9rem;
+}
+
+.copy-address-btn {
+    background: linear-gradient(135deg, #9333ea, #7c3aed);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    white-space: nowrap;
+}
+
+.copy-address-btn:hover {
+    background: linear-gradient(135deg, #7c3aed, #6d28d9);
+    transform: scale(1.05);
+}
+
+.copy-address-btn:active {
+    transform: scale(0.95);
+}
+
+.copy-address-btn.copied {
+    background: linear-gradient(135deg, #10b981, #059669);
+}
+
+.loading-spinner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+    color: #94a3b8;
+    gap: 1rem;
+}
+
+.loading-spinner i {
+    color: #9333ea;
+}
+
+/* My server card - without banner */
+.my-server-card {
+    position: relative;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    padding: 1.25rem;
+    flex-shrink: 0;
+}
+
+.my-server-card:hover {
+    transform: translateX(4px);
+    border-color: rgba(147, 51, 234, 0.5);
+    box-shadow: 0 8px 40px rgba(147, 51, 234, 0.2);
+}
+
+.my-server-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.my-server-name {
+    font-size: 1.15rem;
+    font-weight: 600;
+    color: white;
+    line-height: 1.4;
+    margin: 0;
+}
+
+.my-server-address {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 0.625rem 1rem;
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+
 .news-view-all:hover {
     color: white;
 }

backend/utils/serverListSync.js

@@ -90,7 +90,8 @@ async function syncServerList() {
         Id: uuidv4(), 
         Name: "@ " + remoteServer.Name, 
         Address: remoteServer.Address,
-        DateSaved: currentDate 
+        DateSaved: currentDate,
+        img_Banner: remoteServer.img_Banner || null // Copy banner if exists
       };
       apiServers.push(serverToAdd);
       console.log('[ServerListSync] Added/Updated server with new ID:', remoteServer.Name);