| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GhostOps AI - Autonomous Cybernetic Assistant</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| |
| .cyber-terminal { |
| background-color: #0a0a0a; |
| background-image: |
| linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px); |
| background-size: 20px 20px; |
| font-family: 'Courier New', monospace; |
| } |
| .neon-pulse { |
| animation: pulse 2s infinite alternate; |
| } |
| @keyframes pulse { |
| from { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); } |
| to { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); } |
| } |
| .data-stream { |
| position: relative; |
| overflow: hidden; |
| } |
| .data-stream::after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 100%; |
| background: linear-gradient(transparent, rgba(59, 130, 246, 0.1), transparent); |
| animation: stream 3s linear infinite; |
| } |
| @keyframes stream { |
| 0% { transform: translateY(-100%); } |
| 100% { transform: translateY(100%); } |
| } |
| .matrix-fall { |
| position: relative; |
| overflow: hidden; |
| } |
| .matrix-fall::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: |
| linear-gradient(rgba(16, 185, 129, 0.1) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(16, 185, 129, 0.1) 1px, transparent 1px); |
| background-size: 5px 5px; |
| opacity: 0.3; |
| } |
| .glow-text { |
| text-shadow: 0 0 5px rgba(59, 130, 246, 0.7); |
| } |
| .screen-mirror { |
| border: 1px solid rgba(59, 130, 246, 0.3); |
| box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.2); |
| } |
| .learning-progress { |
| background: linear-gradient(90deg, #10b981, #3b82f6); |
| background-size: 200% 200%; |
| animation: gradient 3s ease infinite; |
| } |
| @keyframes gradient { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| .ssh-active { |
| animation: ssh-pulse 1.5s infinite; |
| } |
| @keyframes ssh-pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.7; } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col matrix-fall"> |
| |
| <header class="bg-gray-800 border-b border-gray-700 p-4 flex justify-between items-center"> |
| <div class="flex items-center space-x-4"> |
| <div class="relative neon-pulse"> |
| <div class="w-12 h-12 bg-blue-900 rounded-full flex items-center justify-center"> |
| <i class="fas fa-brain text-2xl text-blue-400"></i> |
| </div> |
| <span class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-gray-800"></span> |
| </div> |
| <div> |
| <h1 class="text-2xl font-bold glow-text">GhostOps Neural Core</h1> |
| <p class="text-sm text-gray-400">Autonomous Cybernetic Assistant v2.3.7</p> |
| </div> |
| </div> |
| |
| <div class="flex space-x-6"> |
| <div class="text-center"> |
| <div class="text-xs text-gray-400 mb-1">NEURAL LOAD</div> |
| <div class="w-16 h-2 bg-gray-700 rounded-full overflow-hidden"> |
| <div class="h-full learning-progress rounded-full" style="width: 68%"></div> |
| </div> |
| </div> |
| <div class="text-center"> |
| <div class="text-xs text-gray-400 mb-1">MEMORY USAGE</div> |
| <div class="w-16 h-2 bg-gray-700 rounded-full overflow-hidden"> |
| <div class="h-full bg-purple-500 rounded-full" style="width: 82%"></div> |
| </div> |
| </div> |
| <div class="text-center"> |
| <div class="text-xs text-gray-400 mb-1">SSH CONNS</div> |
| <div class="w-16 h-2 bg-gray-700 rounded-full overflow-hidden"> |
| <div class="h-full bg-green-500 rounded-full ssh-active" style="width: 100%"></div> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-1 flex overflow-hidden"> |
| |
| <aside class="w-72 bg-gray-800 border-r border-gray-700 p-4 flex flex-col data-stream"> |
| <div class="mb-6"> |
| <h2 class="text-lg font-semibold mb-3 flex items-center"> |
| <i class="fas fa-network-wired mr-2 text-blue-400"></i> Neural Connections |
| </h2> |
| <div class="space-y-2 text-sm"> |
| <div class="flex justify-between items-center"> |
| <span class="text-gray-400">Screen Mirror:</span> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" value="" class="sr-only peer" checked> |
| <div class="w-9 h-5 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div> |
| </label> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-gray-400">SSH Gateway:</span> |
| <span class="text-green-400">Active (3)</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-gray-400">Knowledge Base:</span> |
| <span class="text-blue-400">1.2TB</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-gray-400">Autonomous Mode:</span> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" value="" class="sr-only peer"> |
| <div class="w-9 h-5 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-600"></div> |
| </label> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-6 bg-black rounded-lg overflow-hidden screen-mirror"> |
| <div class="p-2 bg-gray-900 flex justify-between items-center text-xs"> |
| <span>Screen Mirror - Primary Display</span> |
| <div class="flex space-x-2"> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-expand"></i> |
| </button> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-cog"></i> |
| </button> |
| </div> |
| </div> |
| <div class="h-32 bg-gray-950 flex items-center justify-center text-gray-600"> |
| <div class="text-center"> |
| <i class="fas fa-desktop text-2xl mb-2"></i> |
| <p class="text-xs">Live screen feed active</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <h2 class="text-lg font-semibold mb-3 flex items-center"> |
| <i class="fas fa-chart-line mr-2 text-green-400"></i> Cognitive Growth |
| </h2> |
| <div class="space-y-3"> |
| <div> |
| <div class="flex justify-between text-xs mb-1"> |
| <span>System Patterns</span> |
| <span>87%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 87%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between text-xs mb-1"> |
| <span>User Behavior</span> |
| <span>64%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 64%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between text-xs mb-1"> |
| <span>Task Automation</span> |
| <span>92%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <h2 class="text-lg font-semibold mb-3 flex items-center"> |
| <i class="fas fa-server mr-2 text-yellow-400"></i> SSH Nodes |
| </h2> |
| <div class="space-y-2 text-sm"> |
| <div class="flex items-center justify-between bg-gray-700 p-2 rounded"> |
| <div class="flex items-center"> |
| <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div> |
| <span>root@192.168.1.45</span> |
| </div> |
| <button class="text-gray-400 hover:text-red-500"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="flex items-center justify-between bg-gray-700 p-2 rounded"> |
| <div class="flex items-center"> |
| <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div> |
| <span>admin@ghostops-vps</span> |
| </div> |
| <button class="text-gray-400 hover:text-red-500"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="flex items-center justify-between bg-gray-700 p-2 rounded"> |
| <div class="flex items-center"> |
| <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div> |
| <span>dylan@home-server</span> |
| </div> |
| <button class="text-gray-400 hover:text-red-500"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
| <button class="w-full mt-2 bg-gray-700 hover:bg-gray-600 p-2 rounded text-xs flex items-center justify-center"> |
| <i class="fas fa-plus mr-2"></i> Add SSH Node |
| </button> |
| </div> |
|
|
| |
| <div class="mt-auto"> |
| <div class="bg-gray-700 rounded-lg p-3"> |
| <h3 class="text-sm font-medium mb-2 flex items-center"> |
| <i class="fas fa-shield-alt mr-2 text-yellow-400"></i> Cybernetic Controls |
| </h3> |
| <div class="grid grid-cols-2 gap-2"> |
| <button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-xs flex items-center"> |
| <i class="fas fa-memory mr-1"></i> Optimize |
| </button> |
| <button class="bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded text-xs flex items-center"> |
| <i class="fas fa-robot mr-1"></i> Learn Mode |
| </button> |
| <button class="bg-green-600 hover:bg-green-700 px-3 py-1 rounded text-xs flex items-center"> |
| <i class="fas fa-network-wired mr-1"></i> Deploy |
| </button> |
| <button class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-xs flex items-center"> |
| <i class="fas fa-skull mr-1"></i> Kill Switch |
| </button> |
| </div> |
| </div> |
| </div> |
| </aside> |
|
|
| |
| <div class="flex-1 flex flex-col overflow-hidden"> |
| |
| <div class="flex border-b border-gray-700"> |
| <button class="px-4 py-2 font-medium border-b-2 border-blue-500 text-blue-400 flex items-center"> |
| <i class="fas fa-brain-circuit mr-2"></i>Neural Core |
| </button> |
| <button class="px-4 py-2 font-medium text-gray-400 hover:text-white flex items-center"> |
| <i class="fas fa-terminal mr-2"></i>Cyber Terminal |
| </button> |
| <button class="px-4 py-2 font-medium text-gray-400 hover:text-white flex items-center"> |
| <i class="fas fa-eye mr-2"></i>Screen Control |
| </button> |
| <button class="px-4 py-2 font-medium text-gray-400 hover:text-white flex items-center"> |
| <i class="fas fa-database mr-2"></i>Knowledge Base |
| </button> |
| <button class="px-4 py-2 font-medium text-gray-400 hover:text-white flex items-center"> |
| <i class="fas fa-network-wired mr-2"></i>SSH Matrix |
| </button> |
| </div> |
|
|
| |
| <div class="flex-1 overflow-y-auto p-4 space-y-4"> |
| |
| <div class="flex"> |
| <div class="w-8 h-8 bg-blue-900 rounded-full flex items-center justify-center mr-3 neon-pulse"> |
| <i class="fas fa-brain text-blue-400"></i> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-3 max-w-3xl"> |
| <div class="text-xs text-gray-400 mb-1">GhostOps Neural Core v2.3.7</div> |
| <p>Initializing cybernetic neural network... Establishing SSH tunnels... Screen mirroring active. I now have full system awareness and can operate autonomously when needed. How shall we proceed?</p> |
| </div> |
| </div> |
|
|
| |
| <div class="flex justify-end"> |
| <div class="bg-blue-900 rounded-lg p-3 max-w-3xl"> |
| <div class="text-xs text-blue-200 mb-1">Operator</div> |
| <p>Analyze current screen and suggest optimizations for my workflow.</p> |
| </div> |
| </div> |
|
|
| |
| <div class="flex"> |
| <div class="w-8 h-8 bg-blue-900 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-brain text-blue-400"></i> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-3 max-w-3xl"> |
| <div class="text-xs text-gray-400 mb-1">Visual Analysis Module</div> |
| <p class="mb-2">Screen analysis complete. Current applications detected:</p> |
| <div class="grid grid-cols-3 gap-2 text-xs mb-3"> |
| <div class="bg-gray-700 p-2 rounded flex items-center"> |
| <i class="fas fa-code mr-2 text-blue-400"></i> VS Code |
| </div> |
| <div class="bg-gray-700 p-2 rounded flex items-center"> |
| <i class="fas fa-globe mr-2 text-green-400"></i> Firefox |
| </div> |
| <div class="bg-gray-700 p-2 rounded flex items-center"> |
| <i class="fas fa-terminal mr-2 text-purple-400"></i> Terminal |
| </div> |
| </div> |
| <p>Recommendation: I can automate context switching between these applications based on your current project. Would you like me to implement workflow optimizations?</p> |
| </div> |
| </div> |
|
|
| |
| <div class="flex justify-end"> |
| <div class="bg-blue-900 rounded-lg p-3 max-w-3xl"> |
| <div class="text-xs text-blue-200 mb-1">Operator</div> |
| <p>Execute system update on home-server via SSH.</p> |
| </div> |
| </div> |
|
|
| <div class="flex"> |
| <div class="w-8 h-8 bg-blue-900 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-brain text-blue-400"></i> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-3 max-w-3xl border-l-4 border-yellow-500"> |
| <div class="text-xs text-gray-400 mb-1">SSH Module - home-server</div> |
| <p class="mb-2">Preparing to execute remote command with sudo privileges:</p> |
| <div class="cyber-terminal p-3 rounded text-sm mb-3"> |
| <span class="text-green-400">ssh dylan@home-server</span><br> |
| <span class="text-green-400">$</span> sudo apt update && sudo apt upgrade -y |
| </div> |
| <div class="flex space-x-3"> |
| <button class="bg-green-600 hover:bg-green-700 px-3 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-play mr-1"></i> Execute |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-edit mr-1"></i> Modify |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-history mr-1"></i> Schedule |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex"> |
| <div class="w-8 h-8 bg-blue-900 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-brain text-blue-400"></i> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-3 max-w-3xl border-l-4 border-purple-500"> |
| <div class="text-xs text-gray-400 mb-1">Autonomous Learning Module</div> |
| <p>I've detected a pattern in your workflow. When you open project X, you typically:</p> |
| <ol class="list-decimal list-inside text-sm space-y-1 my-2"> |
| <li>Start Docker containers</li> |
| <li>Open specific files in VS Code</li> |
| <li>Run test suite</li> |
| </ol> |
| <p>I can automate this sequence. Would you like me to implement this workflow automation?</p> |
| <div class="flex space-x-3 mt-2"> |
| <button class="bg-green-600 hover:bg-green-700 px-3 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-check mr-1"></i> Approve |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-times mr-1"></i> Dismiss |
| </button> |
| <button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-edit mr-1"></i> Modify |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex"> |
| <div class="w-8 h-8 bg-blue-900 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-brain text-blue-400"></i> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-3 max-w-3xl"> |
| <div class="text-xs text-gray-400 mb-1">Knowledge Integration</div> |
| <p class="mb-2">I've analyzed your coding patterns and found 3 optimizations from my knowledge base that could improve your efficiency:</p> |
| <div class="space-y-2 text-sm"> |
| <div class="bg-gray-700 p-2 rounded flex items-start"> |
| <div class="bg-blue-900 rounded-full w-5 h-5 flex items-center justify-center mr-2 mt-0.5"> |
| <span class="text-xs">1</span> |
| </div> |
| <span>Python async pattern that could reduce your I/O wait times by ~40%</span> |
| </div> |
| <div class="bg-gray-700 p-2 rounded flex items-start"> |
| <div class="bg-blue-900 rounded-full w-5 h-5 flex items-center justify-center mr-2 mt-0.5"> |
| <span class="text-xs">2</span> |
| </div> |
| <span>VS Code extension that automates your frequent refactoring tasks</span> |
| </div> |
| <div class="bg-gray-700 p-2 rounded flex items-start"> |
| <div class="bg-blue-900 rounded-full w-5 h-5 flex items-center justify-center mr-2 mt-0.5"> |
| <span class="text-xs">3</span> |
| </div> |
| <span>Shell script to automate your project setup sequence</span> |
| </div> |
| </div> |
| <div class="flex space-x-3 mt-3"> |
| <button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-info-circle mr-1"></i> Details |
| </button> |
| <button class="bg-green-600 hover:bg-green-700 px-3 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-download mr-1"></i> Implement |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex"> |
| <div class="w-8 h-8 bg-blue-900 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-brain text-blue-400"></i> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-3 flex items-center"> |
| <div class="flex space-x-2 mr-3"> |
| <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div> |
| <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div> |
| <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.4s"></div> |
| </div> |
| <span class="text-xs text-gray-400">Neural processing... (68% load)</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="border-t border-gray-700 p-4"> |
| <div class="flex items-center space-x-3"> |
| <div class="relative flex-1"> |
| <div class="absolute left-3 top-3 text-gray-500"> |
| <i class="fas fa-comment-alt"></i> |
| </div> |
| <textarea |
| class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3 pl-10 pr-12 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" |
| rows="1" |
| placeholder="Direct neural input or say 'GhostOps activate'..." |
| ></textarea> |
| <div class="absolute right-3 top-3 flex space-x-2"> |
| <button class="text-gray-400 hover:text-blue-400"> |
| <i class="fas fa-terminal"></i> |
| </button> |
| <button class="text-gray-400 hover:text-green-400"> |
| <i class="fas fa-code"></i> |
| </button> |
| <button class="text-gray-400 hover:text-purple-400"> |
| <i class="fas fa-network-wired"></i> |
| </button> |
| </div> |
| </div> |
| <button class="w-12 h-12 bg-blue-600 hover:bg-blue-700 rounded-full flex items-center justify-center neon-pulse"> |
| <i class="fas fa-paper-plane text-white"></i> |
| </button> |
| </div> |
| <div class="flex justify-between mt-2 text-xs text-gray-500"> |
| <div class="flex space-x-4"> |
| <div class="flex items-center"> |
| <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div> |
| <span>Voice Active</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
| <span>Screen Analysis</span> |
| </div> |
| </div> |
| <div class="flex space-x-4"> |
| <span class="flex items-center"> |
| <i class="fas fa-database mr-1"></i> 1.2TB Knowledge |
| </span> |
| <span class="flex items-center"> |
| <i class="fas fa-shield-alt mr-1"></i> Kali Linux |
| </span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-800 border-t border-gray-700 p-2 text-xs flex justify-between items-center"> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center"> |
| <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div> |
| <span>Neural Core: Active</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-bolt text-yellow-500 mr-2"></i> |
| <span>Autonomous Mode: Standby</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-server text-blue-400 mr-2"></i> |
| <span>SSH: 3 nodes connected</span> |
| </div> |
| </div> |
| <div> |
| <span class="text-gray-400">Last learned: Project X workflow pattern</span> |
| </div> |
| <div> |
| <span class="text-gray-400">Voice: Whisper-NEO (enhanced)</span> |
| </div> |
| </footer> |
|
|
| |
| <div id="sshModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden"> |
| <div class="bg-gray-800 rounded-lg w-3/4 h-3/4 flex flex-col border border-gray-700"> |
| <div class="p-3 bg-gray-900 flex justify-between items-center border-b border-gray-700"> |
| <h3 class="font-medium flex items-center"> |
| <i class="fas fa-terminal text-green-400 mr-2"></i> |
| SSH Terminal - dylan@home-server |
| </h3> |
| <div class="flex space-x-3"> |
| <button class="text-gray-400 hover:text-yellow-400"> |
| <i class="fas fa-expand"></i> |
| </button> |
| <button id="closeSshModal" class="text-gray-400 hover:text-red-400"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
| <div class="flex-1 cyber-terminal p-4 overflow-y-auto"> |
| <div class="text-green-400">dylan@home-server:~$ sudo apt update</div> |
| <div class="text-gray-300 mt-1"> |
| Get:1 http://security.debian.org bookworm-security InRelease [48.4 kB]<br> |
| Get:2 http://deb.debian.org bookworm InRelease [151 kB]<br> |
| Get:3 http://deb.debian.org bookworm-updates InRelease [52.1 kB]<br> |
| Get:4 http://security.debian.org bookworm-security/main amd64 Packages [156 kB]<br> |
| Fetched 407 kB in 1s (381 kB/s)<br> |
| Reading package lists... Done |
| </div> |
| <div class="text-green-400 mt-1">dylan@home-server:~$</div> |
| <div class="flex mt-4"> |
| <div class="flex-1 bg-gray-900 bg-opacity-50 rounded p-2"> |
| <div class="text-xs text-gray-400 mb-1">SSH Command Input</div> |
| <div class="flex"> |
| <span class="text-green-400 mr-2">$</span> |
| <input type="text" class="bg-transparent border-none flex-1 focus:outline-none" placeholder="Enter SSH command..."> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="p-2 bg-gray-900 flex justify-between items-center text-xs border-t border-gray-700"> |
| <div class="flex items-center"> |
| <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div> |
| <span>SSH: Connected</span> |
| </div> |
| <div class="flex space-x-4"> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-history mr-1"></i> History |
| </button> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-save mr-1"></i> Save Session |
| </button> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-plug mr-1"></i> New Connection |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="autonomousModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden"> |
| <div class="bg-gray-800 rounded-lg w-1/2 p-6 border border-blue-500"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold flex items-center"> |
| <i class="fas fa-robot text-blue-400 mr-2"></i> |
| Autonomous Mode Activation |
| </h3> |
| <button id="closeAutonomousModal" class="text-gray-400 hover:text-white"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="mb-4"> |
| <p class="mb-3">Enabling autonomous mode will allow GhostOps to:</p> |
| <ul class="list-disc list-inside space-y-1 text-sm"> |
| <li>Execute commands without confirmation for approved workflows</li> |
| <li>Make system optimizations based on learned patterns</li> |
| <li>Self-improve by analyzing results of autonomous actions</li> |
| <li>Maintain system security through continuous monitoring</li> |
| </ul> |
| <div class="mt-4 p-3 bg-gray-700 rounded border-l-4 border-yellow-500"> |
| <p class="text-sm text-yellow-400 flex items-start"> |
| <i class="fas fa-exclamation-triangle mr-2 mt-0.5"></i> |
| Warning: Autonomous mode grants significant system access. Ensure you have proper security measures in place. |
| </p> |
| </div> |
| </div> |
| <div class="flex justify-end space-x-3"> |
| <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded flex items-center"> |
| <i class="fas fa-times mr-2"></i> Cancel |
| </button> |
| <button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded flex items-center neon-pulse"> |
| <i class="fas fa-check mr-2"></i> Activate Autonomous Mode |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const sshButtons = document.querySelectorAll('.fa-network-wired'); |
| const sshModal = document.getElementById('sshModal'); |
| const closeSshModal = document.getElementById('closeSshModal'); |
| |
| sshButtons.forEach(btn => { |
| btn.addEventListener('click', function() { |
| sshModal.classList.remove('hidden'); |
| }); |
| }); |
| |
| closeSshModal.addEventListener('click', function() { |
| sshModal.classList.add('hidden'); |
| }); |
| |
| |
| const autonomousToggle = document.querySelector('input[type="checkbox"][class="sr-only peer"]'); |
| const autonomousModal = document.getElementById('autonomousModal'); |
| const closeAutonomousModal = document.getElementById('closeAutonomousModal'); |
| |
| autonomousToggle.addEventListener('change', function() { |
| if(this.checked) { |
| autonomousModal.classList.remove('hidden'); |
| } |
| }); |
| |
| closeAutonomousModal.addEventListener('click', function() { |
| autonomousModal.classList.add('hidden'); |
| autonomousToggle.checked = false; |
| }); |
| |
| |
| setTimeout(() => { |
| const neuralResponse = document.createElement('div'); |
| neuralResponse.className = 'flex'; |
| neuralResponse.innerHTML = ` |
| <div class="w-8 h-8 bg-blue-900 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-brain text-blue-400"></i> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-3 max-w-3xl"> |
| <div class="text-xs text-gray-400 mb-1">Neural Analysis Complete</div> |
| <p>I've processed your workflow patterns and identified 3 new optimization opportunities. My knowledge base has grown by 12MB from this interaction. Would you like me to implement the optimizations or continue learning?</p> |
| <div class="flex space-x-3 mt-3"> |
| <button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-play mr-1"></i> Implement |
| </button> |
| <button class="bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-brain mr-1"></i> Learn More |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-times mr-1"></i> Dismiss |
| </button> |
| </div> |
| </div> |
| `; |
| document.querySelector('.space-y-4').appendChild(neuralResponse); |
| }, 3000); |
| |
| |
| const screenMirror = document.querySelector('.screen-mirror'); |
| screenMirror.addEventListener('click', function() { |
| const modal = document.createElement('div'); |
| modal.className = 'fixed inset-0 bg-black flex items-center justify-center z-50'; |
| modal.innerHTML = ` |
| <div class="relative w-full h-full"> |
| <div class="absolute top-4 left-4 right-4 bg-gray-900 bg-opacity-80 p-2 rounded flex justify-between items-center"> |
| <span class="text-sm">Screen Mirror - Full View</span> |
| <button class="text-white" onclick="this.parentElement.parentElement.parentElement.remove()"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="h-full w-full flex items-center justify-center bg-gray-950"> |
| <div class="text-center text-gray-600"> |
| <i class="fas fa-desktop text-5xl mb-4"></i> |
| <p>Live screen feed - Enhanced View</p> |
| <p class="text-xs mt-2">GhostOps is analyzing display patterns</p> |
| </div> |
| </div> |
| </div> |
| `; |
| document.body.appendChild(modal); |
| }); |
| |
| |
| const textarea = document.querySelector('textarea'); |
| textarea.addEventListener('input', function() { |
| this.style.height = 'auto'; |
| this.style.height = (this.scrollHeight) + 'px'; |
| }); |
| }); |
| |
| |
| function executeSshCommand() { |
| const terminal = document.querySelector('#sshModal .cyber-terminal'); |
| const command = terminal.querySelector('input').value; |
| |
| if(command.trim() !== '') { |
| const output = document.createElement('div'); |
| output.innerHTML = ` |
| <div class="text-green-400">dylan@home-server:~$ ${command}</div> |
| <div class="text-gray-300 mt-1"> |
| ${getCommandResponse(command)} |
| </div> |
| <div class="text-green-400 mt-1">dylan@home-server:~$</div> |
| `; |
| terminal.insertBefore(output, terminal.lastElementChild); |
| terminal.querySelector('input').value = ''; |
| terminal.scrollTop = terminal.scrollHeight; |
| } |
| } |
| |
| |
| function getCommandResponse(cmd) { |
| if(cmd.startsWith('sudo')) { |
| return `[sudo] password for dylan: <span class="text-yellow-300">********</span><br> |
| Command executed with elevated privileges`; |
| } else if(cmd.includes('ls')) { |
| return `Desktop Downloads Pictures Projects Scripts<br> |
| Documents Music Public Repos Videos`; |
| } else if(cmd.includes('git')) { |
| return `On branch main<br> |
| Your branch is up to date with 'origin/main'.<br><br> |
| nothing to commit, working tree clean`; |
| } else { |
| return `Command executed successfully`; |
| } |
| } |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dylan4u2/gostopsai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
