add new dynamic tag line for paid users

public/index.html

@@ -61,8 +61,8 @@
                 <h1
                     class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
                     My-MC Panel</h1>
-                <p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Manage Your Minecraft Server</p>
+                    <p id="tagline" class="text-lg mt-4 opacity-90 tracking-wide font-medium">Manage Your Minecraft Server</p>
-            </div>
+                                                            </div>
             <!-- Navigation Buttons (hidden on mobile) -->
             <nav class="flex items-center gap-2 hidden md:flex">
                 <a href="https://my-mc.link" class="nav-btn">Home</a>

public/js/app.js

@@ -252,7 +252,9 @@ document.addEventListener('DOMContentLoaded', () => {
     sftpStatus: '',
     activeNotifications: new Map(),
     allMods: [],
-    currentPlayers: []
+    currentPlayers: [],
+    taglineUpdated: false 
+
   };
 
   function showNotification(message, type = 'loading', key = null) {
@@ -584,12 +586,18 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   function updateDockerUI(message) {
+    console.log('updateDockerUI called with message:', message);
     if (message.error) {
+      console.log('Docker message error:', message.error);
       if (elements.serverStatus) elements.serverStatus.textContent = 'Not Running';
       toggleSections('Not Running');
       return;
     }
 
+    // Reinitialize tagline element to handle dynamic DOM changes
+    elements.tagline = document.getElementById('tagline');
+    console.log('Tagline element in updateDockerUI:', elements.tagline);
+
     const memoryPercent = parseFloat(message.data?.memory?.percent) || 0;
     if (state.memoryPercent !== memoryPercent && elements.memoryPercent && memoryMeter) {
       memoryMeter.data.datasets[0].data = [memoryPercent, 100 - memoryPercent];
@@ -613,8 +621,51 @@ document.addEventListener('DOMContentLoaded', () => {
       state.serverStatus = status;
       toggleSections(status);
     }
+
+    // Update tagline based on RAM only if not already updated
+    if (!state.taglineUpdated && elements.tagline) {
+      let totalRam = 0;
+      if (message.data?.memory?.raw) {
+        // Extract total RAM from "2231.52MiB / 8.20GiB" format
+        const rawMemory = message.data.memory.raw;
+        const totalPart = rawMemory.split('/')[1]?.trim(); // Get "8.20GiB"
+        if (totalPart) {
+          const match = totalPart.match(/^(\d+\.\d+|\d+)(GiB|MiB)$/);
+          if (match) {
+            const value = parseFloat(match[1]);
+            const unit = match[2];
+            totalRam = unit === 'GiB' ? value * 1024 : value; // Convert GiB to MiB
+          }
+        }
+      }
+      console.log('Total RAM (MiB):', totalRam);
+      console.log('Tagline element before update:', elements.tagline.textContent);
+      // Use tolerance to account for floating-point discrepancies
+      const tolerance = 50; // Allow 50 MiB leeway
+      if (totalRam >= 11000 - tolerance) {
+        elements.tagline.textContent = 'Manage Your Super Premium Minecraft Server';
+        console.log('Set tagline to: Manage Your Super Premium Minecraft Server');
+      } else if (totalRam >= 8000 - tolerance) {
+        elements.tagline.textContent = 'Manage Your Premium Minecraft Server';
+        console.log('Set tagline to: Manage Your Premium Minecraft Server');
+      } else {
+        elements.tagline.textContent = 'Manage Your Minecraft Server';
+        console.log('Set tagline to: Manage Your Minecraft Server');
+      }
+      console.log('Tagline element after update:', elements.tagline.textContent);
+      state.taglineUpdated = true; // Mark tagline as updated
+    } else if (!elements.tagline) {
+      console.error('Tagline element not found in updateDockerUI');
+      showNotification('Failed to update tagline: Element not found', 'error', 'tagline-error');
+    } else {
+      console.log('Tagline already updated, skipping calculations');
+    }
   }
 
+
+    // Reinitialize tagline element to handle dynamic DOM changes
+    elements.tagline = document.getElementById('tagline');
+
   function toggleSections(status) {
     const sections = document.querySelectorAll('.section-bg');
     const serverStatusSection = document.querySelector('.section-bg[data-section="server-status"]');