From be8038262f3e8c2304a20df71569d7eb58c09ef4 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Mon, 22 Dec 2025 19:54:17 -0500
Subject: [PATCH] feat: enhance terminal display with animated command typing
 effect for improved user interaction

---
 themes/lucentui/views/home.blade.php | 75 +++++++++++++++++++++++++++-
 1 file changed, 73 insertions(+), 2 deletions(-)

diff --git a/themes/lucentui/views/home.blade.php b/themes/lucentui/views/home.blade.php
index a645a437d..d85b3cd79 100644
--- a/themes/lucentui/views/home.blade.php
+++ b/themes/lucentui/views/home.blade.php
@@ -281,12 +281,83 @@
                         </div>
                         <h3 class="text-xl font-bold text-color-base mb-2">VNC Console</h3>
                         <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Direct web-based access to your VPS. Perfect for OS installation and recovery mode.</p>
-                        <div class="p-3 bg-background/80 rounded-xl font-mono text-xs text-success border border-neutral/20">
-                            <span class="text-color-muted">root@vps:~$</span> <span class="animate-pulse">_</span>
+                        <div class="terminal-box" style="padding: 12px; background: rgba(0,0,0,0.3); border-radius: 12px; font-family: monospace; font-size: 12px; border: 1px solid rgba(255,255,255,0.1);">
+                            <span style="color: #888;">root@vps:~$</span> <span id="terminal-text" style="color: #22c55e;"></span><span id="terminal-cursor" style="color: #22c55e;">█</span>
                         </div>
                     </div>
                 </div>
 
+                <script>
+                (function() {
+                    const commands = [
+                        'systemctl status nginx',
+                        'htop',
+                        'df -h',
+                        'free -m',
+                        'uname -a',
+                        'ls -la /var/www',
+                        'tail -f /var/log/syslog',
+                        'netstat -tulpn',
+                        'docker ps',
+                        'cat /etc/os-release',
+                        'uptime',
+                        'whoami',
+                        'pwd',
+                        'ip addr show'
+                    ];
+                    
+                    const textEl = document.getElementById('terminal-text');
+                    const cursorEl = document.getElementById('terminal-cursor');
+                    let currentText = '';
+                    let isTyping = true;
+                    let commandIndex = Math.floor(Math.random() * commands.length);
+                    let charIndex = 0;
+                    
+                    // Cursor blink
+                    setInterval(() => {
+                        cursorEl.style.opacity = cursorEl.style.opacity === '0' ? '1' : '0';
+                    }, 530);
+                    
+                    function type() {
+                        const command = commands[commandIndex];
+                        
+                        if (isTyping) {
+                            if (charIndex < command.length) {
+                                currentText += command[charIndex];
+                                textEl.textContent = currentText;
+                                charIndex++;
+                                setTimeout(type, 50 + Math.random() * 100);
+                            } else {
+                                // Finished typing, wait then delete
+                                setTimeout(() => {
+                                    isTyping = false;
+                                    type();
+                                }, 2000 + Math.random() * 1500);
+                            }
+                        } else {
+                            if (currentText.length > 0) {
+                                currentText = currentText.slice(0, -1);
+                                textEl.textContent = currentText;
+                                setTimeout(type, 30 + Math.random() * 40);
+                            } else {
+                                // Finished deleting, pick new command
+                                isTyping = true;
+                                charIndex = 0;
+                                let newIndex;
+                                do {
+                                    newIndex = Math.floor(Math.random() * commands.length);
+                                } while (newIndex === commandIndex && commands.length > 1);
+                                commandIndex = newIndex;
+                                setTimeout(type, 500 + Math.random() * 500);
+                            }
+                        }
+                    }
+                    
+                    // Start after a short delay
+                    setTimeout(type, 1000);
+                })();
+                </script>
+
                 <!-- Storage - Medium Card -->
                 <div class="lg:col-span-4 group relative overflow-hidden bg-gradient-to-br from-purple-500/5 via-background-secondary to-background-secondary border border-purple-500/20 hover:border-purple-500/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-purple-500/10">
                     <div class="relative z-10 h-full flex flex-col">