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();
+    }
+  }
+});

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