Update Dockerfile

Dockerfile

@@ -80,7 +80,7 @@ echo "✅ Auto-backup enabled (every 5 minutes)"
 echo ""
 
 # ==========================================
-# WEB TERMINAL SERVER (Fixed Uptime + Persistent Logs)
+# WEB TERMINAL SERVER (Real-time Typing + Status Icon)
 # ==========================================
 cat > /app/web_terminal.py << 'PYTHON_SCRIPT'
 import os
@@ -120,7 +120,6 @@ def load_logs_from_file():
         if os.path.exists(LOGS_FILE):
             with open(LOGS_FILE, 'r', encoding='utf-8') as f:
                 logs_history = f.read().splitlines()
-                # Keep only last 1000 lines
                 logs_history = logs_history[-1000:]
                 print(f"[LOGS] Loaded {len(logs_history)} lines from file", flush=True)
     except Exception as e:
@@ -141,22 +140,18 @@ def push_logs_to_github():
     try:
         if not GITHUB_TOKEN:
             return
-        
-        # Read current logs
         if not os.path.exists(LOGS_FILE):
             return
             
         with open(LOGS_FILE, 'r', encoding='utf-8') as f:
             content = f.read()
         
-        # GitHub API - get current file SHA
         api_url = f"https://api.github.com/repos/{GITHUB_REPO}/contents/logs/console_logs.txt"
         headers = {
             "Authorization": f"token {GITHUB_TOKEN}",
             "Accept": "application/vnd.github.v3+json"
         }
         
-        # Check if file exists
         sha = None
         try:
             resp = requests.get(api_url, headers=headers, timeout=10)
@@ -165,7 +160,6 @@ def push_logs_to_github():
         except:
             pass
         
-        # Create or update file
         import base64
         encoded_content = base64.b64encode(content.encode()).decode()
         
@@ -212,11 +206,9 @@ def add_log_line(line):
     timestamp = datetime.now().strftime('%H:%M:%S')
     log_entry = f"[{timestamp}] {line}"
     logs_history.append(log_entry)
-    # Keep only last 1000 lines
     if len(logs_history) > 1000:
         logs_history = logs_history[-1000:]
     output_queue.put(log_entry)
-    # Save to file periodically (every 10 lines)
     if len(logs_history) % 10 == 0:
         save_logs_to_file()
 
@@ -227,7 +219,6 @@ def start_minecraft():
     print("[MC] Starting Minecraft server...", flush=True)
     add_log_line("[SYSTEM] Starting Minecraft server...")
     
-    # Record start time
     server_start_time = time.time()
     save_uptime_to_file()
     
@@ -356,10 +347,27 @@ HTML_TEMPLATE = """
             display: flex;
             align-items: center;
             justify-content: center;
+            position: relative;
         }
         
         .nav-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
         
+        /* Status indicator dot on status icon */
+        .nav-btn .status-dot {
+            position: absolute;
+            bottom: 6px;
+            right: 6px;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #22c55e;
+            border: 2px solid #252a30;
+        }
+        
+        .nav-btn .status-dot.offline {
+            background: #ef4444;
+        }
+        
         /* Main Layout */
         .main-container { 
             display: flex; 
@@ -457,6 +465,23 @@ HTML_TEMPLATE = """
         .terminal-line.success { color: #3fb950; }
         .terminal-line.system { color: #a855f7; font-weight: 500; }
         
+        /* Typing Preview Line */
+        .typing-preview {
+            color: #6e7681;
+            font-style: italic;
+            opacity: 0.8;
+        }
+        
+        .typing-preview .cursor {
+            animation: blink 1s infinite;
+            color: #58a6ff;
+        }
+        
+        @keyframes blink {
+            0%, 50% { opacity: 1; }
+            51%, 100% { opacity: 0; }
+        }
+        
         /* Command Input Area */
         .command-area {
             background: #161b22;
@@ -642,6 +667,90 @@ HTML_TEMPLATE = """
         
         .sidebar-overlay.active { display: block; }
         
+        /* Status Modal */
+        .status-modal {
+            display: none;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: #1f2428;
+            border: 1px solid #363b42;
+            border-radius: 12px;
+            padding: 20px;
+            z-index: 300;
+            min-width: 300px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+        }
+        
+        .status-modal.active {
+            display: block;
+        }
+        
+        .status-modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #363b42;
+        }
+        
+        .status-modal-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: #f0f6fc;
+        }
+        
+        .status-modal-close {
+            background: transparent;
+            border: none;
+            color: #9ca3af;
+            cursor: pointer;
+            font-size: 18px;
+        }
+        
+        .status-modal-close:hover {
+            color: #fff;
+        }
+        
+        .status-item {
+            display: flex;
+            justify-content: space-between;
+            padding: 8px 0;
+            border-bottom: 1px solid #2a2f35;
+        }
+        
+        .status-item:last-child {
+            border-bottom: none;
+        }
+        
+        .status-label-modal {
+            color: #9ca3af;
+            font-size: 13px;
+        }
+        
+        .status-value-modal {
+            color: #f0f6fc;
+            font-weight: 500;
+            font-size: 13px;
+        }
+        
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.7);
+            z-index: 250;
+        }
+        
+        .modal-overlay.active {
+            display: block;
+        }
+        
         /* ============================================
            MOBILE RESPONSIVE BREAKPOINTS
            ============================================ */
@@ -750,7 +859,7 @@ HTML_TEMPLATE = """
             }
             
             #commandInput {
-                font-size: 16px; /* Prevents zoom on iOS */
+                font-size: 16px;
             }
             
             .send-btn {
@@ -776,6 +885,11 @@ HTML_TEMPLATE = """
             .stat-value {
                 font-size: 14px;
             }
+            
+            .status-modal {
+                min-width: 90vw;
+                max-width: 350px;
+            }
         }
         
         /* Landscape mobile */
@@ -826,11 +940,59 @@ HTML_TEMPLATE = """
             </a>
         </div>
         <div class="nav-right">
-            <button class="nav-btn" title="Settings"><i class="fas fa-cog"></i></button>
-            <button class="nav-btn" title="Full Screen" onclick="toggleFullscreen()"><i class="fas fa-expand"></i></button>
+            <button class="nav-btn" id="statusBtn" title="Server Status" onclick="toggleStatusModal()">
+                <i class="fas fa-heartbeat"></i>
+                <span class="status-dot offline" id="navStatusDot"></span>
+            </button>
+            <button class="nav-btn" title="Full Screen" onclick="toggleFullscreen()">
+                <i class="fas fa-expand"></i>
+            </button>
         </div>
     </nav>
     
+    <!-- Status Modal -->
+    <div class="modal-overlay" id="modalOverlay" onclick="toggleStatusModal()"></div>
+    <div class="status-modal" id="statusModal">
+        <div class="status-modal-header">
+            <div class="status-modal-title">
+                <i class="fas fa-server"></i> Server Status
+            </div>
+            <button class="status-modal-close" onclick="toggleStatusModal()">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div class="status-content">
+            <div class="status-item">
+                <span class="status-label-modal">WebSocket</span>
+                <span class="status-value-modal" id="modalWsStatus">Connecting...</span>
+            </div>
+            <div class="status-item">
+                <span class="status-label-modal">Minecraft Server</span>
+                <span class="status-value-modal" id="modalMcStatus">Offline</span>
+            </div>
+            <div class="status-item">
+                <span class="status-label-modal">Server Uptime</span>
+                <span class="status-value-modal" id="modalUptime">--</span>
+            </div>
+            <div class="status-item">
+                <span class="status-label-modal">CPU Usage</span>
+                <span class="status-value-modal" id="modalCpu">--%</span>
+            </div>
+            <div class="status-item">
+                <span class="status-label-modal">Memory Usage</span>
+                <span class="status-value-modal" id="modalMemory">--%</span>
+            </div>
+            <div class="status-item">
+                <span class="status-label-modal">Active Players</span>
+                <span class="status-value-modal" id="modalPlayers">--</span>
+            </div>
+            <div class="status-item">
+                <span class="status-label-modal">Server Address</span>
+                <span class="status-value-modal" id="modalAddress">--</span>
+            </div>
+        </div>
+    </div>
+    
     <!-- Sidebar Overlay -->
     <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>
     
@@ -952,6 +1114,9 @@ HTML_TEMPLATE = """
         const connectionBar = document.getElementById('connectionBar');
         const sidebar = document.getElementById('sidebar');
         const sidebarOverlay = document.getElementById('sidebarOverlay');
+        const statusModal = document.getElementById('statusModal');
+        const modalOverlay = document.getElementById('modalOverlay');
+        const navStatusDot = document.getElementById('navStatusDot');
         
         let ws = null;
         let reconnectAttempts = 0;
@@ -959,6 +1124,8 @@ HTML_TEMPLATE = """
         let isServerRunning = false;
         let sidebarOpen = false;
         let serverStartTime = null;
+        let typingPreviewLine = null;
+        let currentStats = {};
         
         function updateConnectionStatus(status, message) {
             connectionBar.className = 'connection-bar ' + status;
@@ -968,6 +1135,16 @@ HTML_TEMPLATE = """
                 'connecting': 'fa-circle-notch fa-spin'
             };
             connectionBar.innerHTML = '<i class="fas ' + icons[status] + '"></i><span>' + message + '</span>';
+            
+            // Update modal status
+            const wsStatus = document.getElementById('modalWsStatus');
+            if (status === 'connected') {
+                wsStatus.innerHTML = '<span style="color: #22c55e;">● Connected</span>';
+            } else if (status === 'disconnected') {
+                wsStatus.innerHTML = '<span style="color: #ef4444;">● Disconnected</span>';
+            } else {
+                wsStatus.innerHTML = '<span style="color: #eab308;">● Connecting...</span>';
+            }
         }
         
         function updateServerStatus(running, startTime = null) {
@@ -982,9 +1159,11 @@ HTML_TEMPLATE = """
                 stopBtn.disabled = false;
                 commandInput.disabled = false;
                 sendBtn.disabled = false;
+                navStatusDot.className = 'status-dot';
                 if (startTime) {
-                    serverStartTime = startTime * 1000; // Convert to milliseconds
+                    serverStartTime = startTime * 1000;
                 }
+                document.getElementById('modalMcStatus').innerHTML = '<span style="color: #22c55e;">● Online</span>';
             } else {
                 statusEl.className = 'status-indicator status-offline';
                 statusEl.innerHTML = '<span class="pulse"></span>Offline';
@@ -993,15 +1172,22 @@ HTML_TEMPLATE = """
                 stopBtn.disabled = true;
                 commandInput.disabled = true;
                 sendBtn.disabled = true;
+                navStatusDot.className = 'status-dot offline';
                 serverStartTime = null;
+                document.getElementById('modalMcStatus').innerHTML = '<span style="color: #ef4444;">● Offline</span>';
             }
         }
         
         function addTerminalLine(text, type = '') {
+            // Remove typing preview if exists
+            if (typingPreviewLine && typingPreviewLine.parentNode) {
+                typingPreviewLine.parentNode.removeChild(typingPreviewLine);
+                typingPreviewLine = null;
+            }
+            
             const line = document.createElement('div');
             line.className = 'terminal-line ' + type;
             
-            // Check if it's a system message
             if (text.includes('[SYSTEM]')) {
                 line.className += ' system';
             } else if (text.includes('> ')) {
@@ -1018,12 +1204,36 @@ HTML_TEMPLATE = """
             terminal.appendChild(line);
             terminal.scrollTop = terminal.scrollHeight;
             
-            // Limit terminal lines for performance on mobile
             while (terminal.children.length > 500) {
                 terminal.removeChild(terminal.firstChild);
             }
         }
         
+        function updateTypingPreview() {
+            const text = commandInput.value.trim();
+            
+            // Remove old preview
+            if (typingPreviewLine && typingPreviewLine.parentNode) {
+                typingPreviewLine.parentNode.removeChild(typingPreviewLine);
+                typingPreviewLine = null;
+            }
+            
+            // Show preview if text exists
+            if (text && isServerRunning) {
+                typingPreviewLine = document.createElement('div');
+                typingPreviewLine.className = 'terminal-line typing-preview';
+                typingPreviewLine.innerHTML = '> ' + escapeHtml(text) + '<span class="cursor">_</span>';
+                terminal.appendChild(typingPreviewLine);
+                terminal.scrollTop = terminal.scrollHeight;
+            }
+        }
+        
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+        
         function formatUptime(seconds) {
             if (!seconds || seconds <= 0) return 'Offline';
             
@@ -1042,11 +1252,14 @@ HTML_TEMPLATE = """
             if (serverStartTime && isServerRunning) {
                 const now = Date.now();
                 const uptime = Math.floor((now - serverStartTime) / 1000);
-                document.getElementById('uptime').textContent = formatUptime(uptime);
+                const formatted = formatUptime(uptime);
+                document.getElementById('uptime').textContent = formatted;
                 document.getElementById('uptimeSub').textContent = 'Running';
+                document.getElementById('modalUptime').textContent = formatted;
             } else {
                 document.getElementById('uptime').textContent = 'Offline';
                 document.getElementById('uptimeSub').textContent = 'Not running';
+                document.getElementById('modalUptime').textContent = 'Offline';
             }
         }
         
@@ -1069,19 +1282,24 @@ HTML_TEMPLATE = """
                 if (data.type === 'output') {
                     addTerminalLine(data.data);
                 } else if (data.type === 'stats') {
+                    currentStats = data;
                     document.getElementById('cpuLoad').textContent = data.cpu.toFixed(1) + '%';
                     document.getElementById('memoryUsage').textContent = data.memory.toFixed(1) + '%';
                     const memTotal = (data.memoryTotal / 1024 / 1024 / 1024).toFixed(2);
                     const memUsed = ((data.memoryTotal * data.memory / 100) / 1024 / 1024 / 1024).toFixed(2);
                     document.getElementById('memorySub').textContent = memUsed + ' / ' + memTotal + ' GB';
                     
+                    // Update modal stats
+                    document.getElementById('modalCpu').textContent = data.cpu.toFixed(1) + '%';
+                    document.getElementById('modalMemory').textContent = data.memory.toFixed(1) + '%';
+                    
                     updateServerStatus(data.running, data.serverStartTime);
                     
                     if (data.players !== undefined) {
                         document.getElementById('playerCount').textContent = data.players;
+                        document.getElementById('modalPlayers').textContent = data.players;
                     }
                 } else if (data.type === 'history') {
-                    // Load history logs
                     data.logs.forEach(log => {
                         addTerminalLine(log);
                     });
@@ -1108,6 +1326,11 @@ HTML_TEMPLATE = """
         function sendInput() {
             const cmd = commandInput.value.trim();
             if (cmd && ws && ws.readyState === WebSocket.OPEN) {
+                // Remove preview immediately on send
+                if (typingPreviewLine && typingPreviewLine.parentNode) {
+                    typingPreviewLine.parentNode.removeChild(typingPreviewLine);
+                    typingPreviewLine = null;
+                }
                 ws.send(JSON.stringify({type: 'command', data: cmd}));
                 commandInput.value = '';
             }
@@ -1119,8 +1342,27 @@ HTML_TEMPLATE = """
             }
         }
         
+        // Input event listeners for real-time typing preview
+        commandInput.addEventListener('input', updateTypingPreview);
+        commandInput.addEventListener('keyup', updateTypingPreview);
+        
         commandInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') sendInput();
+            if (e.key === 'Enter') {
+                // Remove preview immediately on enter
+                if (typingPreviewLine && typingPreviewLine.parentNode) {
+                    typingPreviewLine.parentNode.removeChild(typingPreviewLine);
+                    typingPreviewLine = null;
+                }
+                sendInput();
+            }
+        });
+        
+        // Clear preview when input loses focus
+        commandInput.addEventListener('blur', () => {
+            if (typingPreviewLine && typingPreviewLine.parentNode) {
+                typingPreviewLine.parentNode.removeChild(typingPreviewLine);
+                typingPreviewLine = null;
+            }
         });
         
         function switchTab(tab, element) {
@@ -1147,6 +1389,14 @@ HTML_TEMPLATE = """
             }
         }
         
+        function toggleStatusModal() {
+            statusModal.classList.toggle('active');
+            modalOverlay.classList.toggle('active');
+            
+            // Update address in modal
+            document.getElementById('modalAddress').textContent = window.location.hostname;
+        }
+        
         // Close sidebar when clicking outside on mobile
         document.addEventListener('click', (e) => {
             if (window.innerWidth <= 768 && sidebarOpen) {
@@ -1214,7 +1464,7 @@ def websocket(ws):
         if logs_history:
             ws.send(json.dumps({
                 'type': 'history',
-                'logs': logs_history[-100:]  # Send last 100 lines
+                'logs': logs_history[-100:]
             }))
     except Exception as e:
         print(f"[WS] History send error: {e}", flush=True)
@@ -1226,7 +1476,6 @@ def websocket(ws):
                 memory = psutil.virtual_memory()
                 running = mc_process is not None and mc_process.poll() is None
                 
-                # Calculate actual uptime from server_start_time
                 uptime_to_send = None
                 if running and server_start_time:
                     uptime_to_send = server_start_time
@@ -1302,17 +1551,14 @@ signal.signal(signal.SIGTERM, cleanup)
 signal.signal(signal.SIGINT, cleanup)
 
 if __name__ == '__main__':
-    # Load previous logs and uptime
     load_logs_from_file()
     load_uptime_from_file()
     
     print("[MAIN] Starting web server...", flush=True)
     
-    # Start Minecraft immediately
     mc_thread = threading.Thread(target=start_minecraft, daemon=True)
     mc_thread.start()
     
-    # Start GitHub push thread (every 5 minutes)
     def github_push_loop():
         while True:
             time.sleep(300)
@@ -1339,11 +1585,13 @@ fi
 
 echo ""
 echo "=========================================="
-echo "✅ Minecraft Server with Fixed Uptime + Persistent Logs is LIVE!"
+echo "✅ Minecraft Server with Real-time Typing + Status Icon is LIVE!"
 echo "🌐 Access at: https://your-space.hf.space"
 echo "📱 Mobile optimized interface enabled"
 echo "💾 Logs are now persistent across refreshes"
 echo "⏰ Uptime tracking fixed"
+echo "⌨️ Real-time command typing preview enabled"
+echo "📊 Status modal with heartbeat icon added"
 echo "=========================================="
 
 # Keep container alive