Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: enhance terminal display with animated command typing effect for improved user interaction

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-22 19:54:17 -05:00
parent 45b7434a97
commit be8038262f
1 changed files with 73 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
themes/lucentui/views/home.blade.php
View File

@@ -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">