PowerBot

Sleeping

App Files Files Community

OrbitMC commited on Nov 4, 2025

Commit

202d0a1

verified ·

1 Parent(s): a7fec23

Update index.html

Browse files

Files changed (1) hide show

index.html +92 -171

index.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html>
 <head>
@@ -40,7 +41,6 @@ body {
     opacity: 0.9;
 }
-/* Server Status Card */
 .server-card {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
@@ -92,6 +92,12 @@ body {
     height: 10px;
     border-radius: 50%;
     background: white;
 }
 .server-info {
@@ -118,7 +124,6 @@ body {
     font-weight: bold;
 }
-/* Rotation Card */
 .rotation-card {
     background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
     border-radius: 20px;
@@ -209,7 +214,55 @@ button.primary:hover {
     background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
 }
-/* Bot Grid */
 .bot-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -340,54 +393,30 @@ button.primary:hover {
     color: #f093fb;
 }
-/* Queue Section */
-.queue-section {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-radius: 20px;
-    padding: 25px;
-    margin-bottom: 25px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-.queue-title {
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: 20px;
-    text-align: center;
-}
-.queue-list {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 15px;
-    flex-wrap: wrap;
 }
-.queue-item {
     background: rgba(255, 255, 255, 0.1);
-    padding: 15px 25px;
-    border-radius: 15px;
-    font-weight: bold;
-    transition: all 0.3s;
-    border: 2px solid transparent;
-}
-.queue-item.active {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-    transform: scale(1.15);
-    box-shadow: 0 5px 20px rgba(240, 147, 251, 0.4);
 }
-.queue-item.next {
-    border-color: rgba(245, 158, 11, 0.6);
-    background: rgba(245, 158, 11, 0.2);
 }
-.queue-arrow {
-    font-size: 24px;
-    opacity: 0.5;
 }
 .msg {
@@ -433,7 +462,6 @@ button.primary:hover {
         <p>OrbitMC Server Monitor & Bot Rotation System</p>
     </div>
-    <!-- Server Status -->
     <div class="server-card">
         <div class="server-header">
             <div class="server-title">📡 Server Status</div>
@@ -462,7 +490,6 @@ button.primary:hover {
         </div>
     </div>
-    <!-- Current Rotation -->
     <div class="rotation-card">
         <div class="rotation-title">🔄 CURRENT ACTIVE BOT</div>
         <div class="current-bot" id="current-bot">-</div>
@@ -482,116 +509,30 @@ button.primary:hover {
         </div>
     </div>
-    <!-- Queue -->
     <div class="queue-section">
         <div class="queue-title">📋 Rotation Queue</div>
         <div class="queue-list" id="queue-list"></div>
     </div>
-    <!-- Bot Grid -->
     <div class="bot-grid" id="bot-grid"></div>
     <div id="msg-container"></div>
 </div>
 <script>
-// Simulated data for demo (replace with actual API calls)
-let data = {};
-let updateTimer;
-let serverCheckTimer;
-let simulatedTime = 0;
-let currentBotIndex = 0;
-const BOT_NAMES = ["moderator_1", "moderator_2", "moderator_3", "moderator_4", "moderator_5"];
-const ROTATION_DURATION = 3600; // 1 hour
-// Initialize with demo data
-function initializeDemoData() {
-    data = {
-        server_info: {
-            host: "orbitmc.progamer.me",
-            port: 40675,
-            version: "1.21.1"
-        },
-        server_status: {
-            online: true,
-            players: "12/100",
-            latency: 45,
-            last_check: new Date()
-        },
-        rotation: {
-            current_bot: BOT_NAMES[currentBotIndex],
-            next_bot: BOT_NAMES[(currentBotIndex + 1) % BOT_NAMES.length],
-            elapsed: simulatedTime,
-            remaining: ROTATION_DURATION - simulatedTime,
-            queue: BOT_NAMES
-        },
-        bots: BOT_NAMES.map((name, index) => ({
-            name: name,
-            status: index === currentBotIndex ? 'online' : 'offline',
-            is_active: index === currentBotIndex,
-            uptime: index === currentBotIndex ? simulatedTime : 0,
-            deaths: Math.floor(Math.random() * 5),
-            reconnects: Math.floor(Math.random() * 3),
-            position: index === currentBotIndex ? `${Math.floor(Math.random() * 100)}, 64, ${Math.floor(Math.random() * 100)}` : '0, 0, 0'
-        }))
-    };
-}
-// Simulate time passing
-function updateSimulation() {
-    simulatedTime++;
-    if (simulatedTime >= ROTATION_DURATION) {
-        simulatedTime = 0;
-        currentBotIndex = (currentBotIndex + 1) % BOT_NAMES.length;
-        showMsg('🔄 Rotated to next bot!', 'success');
-    }
-    // Update data
-    data.rotation.elapsed = simulatedTime;
-    data.rotation.remaining = ROTATION_DURATION - simulatedTime;
-    data.rotation.current_bot = BOT_NAMES[currentBotIndex];
-    data.rotation.next_bot = BOT_NAMES[(currentBotIndex + 1) % BOT_NAMES.length];
-    // Update bots
-    data.bots = BOT_NAMES.map((name, index) => ({
-        name: name,
-        status: index === currentBotIndex ? 'online' : 'offline',
-        is_active: index === currentBotIndex,
-        uptime: index === currentBotIndex ? simulatedTime : 0,
-        deaths: data.bots[index]?.deaths || 0,
-        reconnects: data.bots[index]?.reconnects || 0,
-        position: index === currentBotIndex ? `${100 + Math.floor(Math.random() * 10)}, 64, ${100 + Math.floor(Math.random() * 10)}` : '0, 0, 0'
-    }));
-    // Simulate random server status changes
-    if (Math.random() > 0.98) {
-        data.server_status.online = !data.server_status.online;
-    }
-    if (data.server_status.online) {
-        data.server_status.latency = 30 + Math.floor(Math.random() * 30);
-        data.server_status.players = `${10 + Math.floor(Math.random() * 20)}/100`;
-    }
-}
-// For production, use this instead:
 async function fetchStatus() {
     try {
         const r = await fetch('/api/status');
-        data = await r.json();
-        renderStatus();
     } catch(e) {
         console.error('Failed to fetch status', e);
-        // Fallback to demo mode
-        initializeDemoData();
-        renderStatus();
     }
 }
-function renderStatus() {
-    // Server Status
     const server = data.server_status;
     const badge = document.getElementById('server-badge');
@@ -608,21 +549,16 @@ function renderStatus() {
     document.getElementById('server-latency').textContent = server.latency > 0 ? `${server.latency}ms` : 'N/A';
     document.getElementById('server-version').textContent = data.server_info.version;
-    // Rotation Info
     const rotation = data.rotation;
     document.getElementById('current-bot').textContent = rotation.current_bot || '-';
     document.getElementById('rotation-timer').textContent = formatTime(rotation.elapsed);
     document.getElementById('next-bot').textContent = rotation.next_bot || '-';
     document.getElementById('time-until-next').textContent = formatTime(rotation.remaining);
-    // Progress Bar
     const progress = (rotation.elapsed / 3600) * 100;
     document.getElementById('progress-fill').style.width = progress + '%';
-    // Queue
     renderQueue(rotation.queue, rotation.current_bot, rotation.next_bot);
-    // Bot Grid
     renderBots(data.bots);
 }
@@ -669,6 +605,8 @@ function renderBots(bots) {
         const statusClass = bot.is_active ? 'active' : bot.status;
         const statusText = bot.is_active ? '⚡ ACTIVE & ONLINE' : bot.status.toUpperCase();
         card.innerHTML = `
             <div class="bot-header">
                 <div class="bot-name">${bot.name}</div>
@@ -689,7 +627,17 @@ function renderBots(bots) {
                 </div>
                 <div class="stat-item">
                     <div class="stat-label">Position</div>
-                    <div class="stat-value">${bot.position}</div>
                 </div>
             </div>
             <div class="bot-status-text ${statusClass}">${statusText}</div>
@@ -718,14 +666,6 @@ function formatTimeShort(seconds) {
 async function forceRotation() {
     if (!confirm('Switch to the next bot now?')) return;
-    // For demo mode
-    simulatedTime = ROTATION_DURATION;
-    updateSimulation();
-    renderStatus();
-    showMsg('✅ Switching to next bot...', 'success');
-    // For production, uncomment this:
-    /*
     try {
         const r = await fetch('/api/next_rotation', {method: 'POST'});
         const res = await r.json();
@@ -734,16 +674,15 @@ async function forceRotation() {
             showMsg('✅ Switching to next bot...', 'success');
             setTimeout(fetchStatus, 1000);
         } else {
-            showMsg('❌ ' + (res.error || 'Failed to rotate'), 'error');
         }
     } catch(e) {
         showMsg('❌ Failed to switch bot', 'error');
     }
-    */
 }
 function refreshStatus() {
-    renderStatus();
     showMsg('🔄 Refreshing...', 'success');
 }
@@ -759,26 +698,8 @@ function showMsg(text, type = 'success') {
     }, 3000);
 }
-function startAutoUpdate() {
-    if (updateTimer) clearInterval(updateTimer);
-    // Update every second for demo
-    updateTimer = setInterval(() => {
-        updateSimulation();
-        renderStatus();
-    }, 1000);
-}
-// Initialize
-initializeDemoData();
-renderStatus();
-startAutoUpdate();
-// For production with backend API, use this instead:
-/*
 fetchStatus();
-setInterval(fetchStatus, 2000); // Update every 2 seconds
-*/
 </script>
 </body>
 </html>

+<!-- index.html -->
 <!DOCTYPE html>
 <html>
 <head>
     opacity: 0.9;
 }
 .server-card {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     height: 10px;
     border-radius: 50%;
     background: white;
+    animation: blink 1s infinite;
+}
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
 }
 .server-info {
     font-weight: bold;
 }
 .rotation-card {
     background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
     border-radius: 20px;
     background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
 }
+.queue-section {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 25px;
+    margin-bottom: 25px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+.queue-title {
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    text-align: center;
+}
+.queue-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    flex-wrap: wrap;
+}
+.queue-item {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 15px 25px;
+    border-radius: 15px;
+    font-weight: bold;
+    transition: all 0.3s;
+    border: 2px solid transparent;
+}
+.queue-item.active {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    transform: scale(1.15);
+    box-shadow: 0 5px 20px rgba(240, 147, 251, 0.4);
+}
+.queue-item.next {
+    border-color: rgba(245, 158, 11, 0.6);
+    background: rgba(245, 158, 11, 0.2);
+}
+.queue-arrow {
+    font-size: 24px;
+    opacity: 0.5;
+}
 .bot-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     color: #f093fb;
 }
+.health-bar {
     display: flex;
+    gap: 5px;
+    margin-top: 10px;
 }
+.health-item {
     background: rgba(255, 255, 255, 0.1);
+    padding: 8px;
+    border-radius: 8px;
+    flex: 1;
+    text-align: center;
 }
+.health-item small {
+    display: block;
+    font-size: 10px;
+    opacity: 0.7;
 }
+.health-item strong {
+    display: block;
+    font-size: 16px;
+    margin-top: 3px;
 }
 .msg {
         <p>OrbitMC Server Monitor & Bot Rotation System</p>
     </div>
     <div class="server-card">
         <div class="server-header">
             <div class="server-title">📡 Server Status</div>
         </div>
     </div>
     <div class="rotation-card">
         <div class="rotation-title">🔄 CURRENT ACTIVE BOT</div>
         <div class="current-bot" id="current-bot">-</div>
         </div>
     </div>
     <div class="queue-section">
         <div class="queue-title">📋 Rotation Queue</div>
         <div class="queue-list" id="queue-list"></div>
     </div>
     <div class="bot-grid" id="bot-grid"></div>
     <div id="msg-container"></div>
 </div>
 <script>
+let updateInterval;
 async function fetchStatus() {
     try {
         const r = await fetch('/api/status');
+        const data = await r.json();
+        renderStatus(data);
     } catch(e) {
         console.error('Failed to fetch status', e);
     }
 }
+function renderStatus(data) {
     const server = data.server_status;
     const badge = document.getElementById('server-badge');
     document.getElementById('server-latency').textContent = server.latency > 0 ? `${server.latency}ms` : 'N/A';
     document.getElementById('server-version').textContent = data.server_info.version;
     const rotation = data.rotation;
     document.getElementById('current-bot').textContent = rotation.current_bot || '-';
     document.getElementById('rotation-timer').textContent = formatTime(rotation.elapsed);
     document.getElementById('next-bot').textContent = rotation.next_bot || '-';
     document.getElementById('time-until-next').textContent = formatTime(rotation.remaining);
     const progress = (rotation.elapsed / 3600) * 100;
     document.getElementById('progress-fill').style.width = progress + '%';
     renderQueue(rotation.queue, rotation.current_bot, rotation.next_bot);
     renderBots(data.bots);
 }
         const statusClass = bot.is_active ? 'active' : bot.status;
         const statusText = bot.is_active ? '⚡ ACTIVE & ONLINE' : bot.status.toUpperCase();
+        const pos = bot.position;
         card.innerHTML = `
             <div class="bot-header">
                 <div class="bot-name">${bot.name}</div>
                 </div>
                 <div class="stat-item">
                     <div class="stat-label">Position</div>
+                    <div class="stat-value">${pos.x}, ${pos.y}, ${pos.z}</div>
+                </div>
+            </div>
+            <div class="health-bar">
+                <div class="health-item">
+                    <small>❤️ Health</small>
+                    <strong>${bot.health}</strong>
+                </div>
+                <div class="health-item">
+                    <small>🍖 Food</small>
+                    <strong>${bot.food}</strong>
                 </div>
             </div>
             <div class="bot-status-text ${statusClass}">${statusText}</div>
 async function forceRotation() {
     if (!confirm('Switch to the next bot now?')) return;
     try {
         const r = await fetch('/api/next_rotation', {method: 'POST'});
         const res = await r.json();
             showMsg('✅ Switching to next bot...', 'success');
             setTimeout(fetchStatus, 1000);
         } else {
+            showMsg('❌ Failed to rotate', 'error');
         }
     } catch(e) {
         showMsg('❌ Failed to switch bot', 'error');
     }
 }
 function refreshStatus() {
+    fetchStatus();
     showMsg('🔄 Refreshing...', 'success');
 }
     }, 3000);
 }
 fetchStatus();
+updateInterval = setInterval(fetchStatus, 1000);
 </script>
 </body>
 </html>