| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>JARVIS AI Interface</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> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto+Mono:wght@300;400;500&display=swap'); |
| |
| body { |
| font-family: 'Roboto Mono', monospace; |
| background-color: #0a0a0a; |
| color: #00ff41; |
| overflow-x: hidden; |
| } |
| |
| .hacker-text { |
| font-family: 'Roboto Mono', monospace; |
| color: #00ff41; |
| text-shadow: 0 0 5px #00ff41; |
| } |
| |
| .jarvis-pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.7); } |
| 70% { box-shadow: 0 0 0 10px rgba(0, 255, 65, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0); } |
| } |
| |
| .data-stream { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .data-stream::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(transparent 0%, rgba(0, 255, 65, 0.1) 50%, transparent 100%); |
| animation: stream 5s linear infinite; |
| } |
| |
| @keyframes stream { |
| 0% { transform: translateY(-100%); } |
| 100% { transform: translateY(100%); } |
| } |
| |
| .code-line { |
| animation: typing 3s steps(40) 1s 1 normal both; |
| white-space: nowrap; |
| overflow: hidden; |
| } |
| |
| @keyframes typing { |
| from { width: 0 } |
| to { width: 100% } |
| } |
| |
| .glow { |
| text-shadow: 0 0 8px #00ff41; |
| } |
| |
| .terminal-cursor { |
| animation: blink 1s step-end infinite; |
| } |
| |
| @keyframes blink { |
| from, to { opacity: 1 } |
| 50% { opacity: 0 } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen bg-black"> |
| <div class="container mx-auto px-4 py-8"> |
| |
| <header class="flex flex-col md:flex-row justify-between items-center mb-8 border-b border-green-500 pb-4"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <div class="w-16 h-16 rounded-full bg-black border-2 border-green-500 flex items-center justify-center jarvis-pulse mr-4"> |
| <i class="fas fa-robot text-3xl text-green-500"></i> |
| </div> |
| <div> |
| <h1 class="text-3xl md:text-4xl font-bold hacker-text glow">J.A.R.V.I.S.</h1> |
| <p class="text-sm text-green-300">Just A Rather Very Intelligent System</p> |
| </div> |
| </div> |
| <div class="flex space-x-4"> |
| <div class="text-center"> |
| <p class="text-green-300">STATUS</p> |
| <p class="text-green-500 font-bold">ONLINE</p> |
| </div> |
| <div class="text-center"> |
| <p class="text-green-300">VERSION</p> |
| <p class="text-green-500 font-bold">4.2.7</p> |
| </div> |
| <div class="text-center"> |
| <p class="text-green-300">POWER</p> |
| <p class="text-green-500 font-bold">98%</p> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="lg:col-span-2 bg-black bg-opacity-50 border border-green-500 rounded-lg p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-4"></div> |
| <p class="text-green-400">TERMINAL_INTERFACE</p> |
| </div> |
| |
| <div class="data-stream bg-black p-4 rounded mb-6 h-48 overflow-y-auto"> |
| <p class="text-green-400 mb-2">> Initializing J.A.R.V.I.S. systems...</p> |
| <p class="text-green-400 mb-2">> Checking security protocols...</p> |
| <p class="text-green-400 mb-2">> Connecting to Stark Industries network...</p> |
| <p class="text-green-400 mb-2">> Scanning global threat assessment...</p> |
| <p class="text-green-400 mb-2">> Analyzing environmental data...</p> |
| <p class="text-green-400 mb-2">> Synchronizing with Iron Man armor systems...</p> |
| <p class="text-green-400 mb-2">> Establishing satellite uplink...</p> |
| <p class="text-green-400 mb-2">> All systems nominal. Ready for commands.</p> |
| <p class="text-green-400 mb-2">> <span class="terminal-cursor">|</span></p> |
| </div> |
| |
| <div class="flex items-center"> |
| <span class="text-green-500 mr-2">JARVIS></span> |
| <input type="text" class="flex-grow bg-transparent border-b border-green-500 text-green-400 outline-none hacker-text" placeholder="Enter command..."> |
| <button class="ml-4 px-4 py-2 bg-green-500 bg-opacity-20 border border-green-500 text-green-400 rounded hover:bg-opacity-40 transition"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-black bg-opacity-50 border border-green-500 rounded-lg p-6"> |
| <h2 class="text-xl font-bold hacker-text mb-4 flex items-center"> |
| <i class="fas fa-chart-line mr-2"></i> SYSTEM STATUS |
| </h2> |
| |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-green-300">CPU Usage</span> |
| <span class="text-green-500">78%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2.5"> |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 78%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-green-300">Memory Allocation</span> |
| <span class="text-green-500">64%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2.5"> |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 64%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-green-300">Network Bandwidth</span> |
| <span class="text-green-500">42%</span> |
| </div> |
| <div class="w-full bg-gray-800 rounded-full h-2.5"> |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 42%"></div> |
| </div> |
| </div> |
| |
| <div class="mt-6"> |
| <h3 class="text-lg font-bold hacker-text mb-2">ACTIVE SYSTEMS</h3> |
| <ul class="space-y-2"> |
| <li class="flex items-center"> |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span> |
| <span class="text-green-400">Weapons Systems</span> |
| </li> |
| <li class="flex items-center"> |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span> |
| <span class="text-green-400">Flight Navigation</span> |
| </li> |
| <li class="flex items-center"> |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span> |
| <span class="text-green-400">Life Support</span> |
| </li> |
| <li class="flex items-center"> |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span> |
| <span class="text-green-400">Defense Protocols</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6"> |
| <div class="bg-black bg-opacity-50 border border-green-500 rounded-lg p-4 data-stream"> |
| <h3 class="text-lg font-bold hacker-text mb-2 flex items-center"> |
| <i class="fas fa-satellite-dish mr-2"></i> NETWORK TRAFFIC |
| </h3> |
| <div class="h-40 overflow-hidden"> |
| <p class="text-green-400 text-sm code-line">> Packet received from 192.168.1.105</p> |
| <p class="text-green-400 text-sm code-line">> Establishing secure connection to Stark HQ</p> |
| <p class="text-green-400 text-sm code-line">> Uploading diagnostics (3.7MB/s)</p> |
| <p class="text-green-400 text-sm code-line">> Scanning for intrusions...</p> |
| <p class="text-green-400 text-sm code-line">> Firewall active - no threats detected</p> |
| <p class="text-green-400 text-sm code-line">> Bandwidth utilization: 340Mbps</p> |
| <p class="text-green-400 text-sm code-line">> Latency: 12ms</p> |
| </div> |
| </div> |
| |
| <div class="bg-black bg-opacity-50 border border-green-500 rounded-lg p-4 data-stream"> |
| <h3 class="text-lg font-bold hacker-text mb-2 flex items-center"> |
| <i class="fas fa-shield-alt mr-2"></i> SECURITY ALERTS |
| </h3> |
| <div class="h-40 overflow-hidden"> |
| <p class="text-green-400 text-sm code-line">> Running deep system scan...</p> |
| <p class="text-green-400 text-sm code-line">> 0 critical vulnerabilities found</p> |
| <p class="text-green-400 text-sm code-line">> 3 low priority updates available</p> |
| <p class="text-green-400 text-sm code-line">> Encryption protocols active</p> |
| <p class="text-green-400 text-sm code-line">> Biometric authentication required</p> |
| <p class="text-green-400 text-sm code-line">> Unauthorized access attempt blocked</p> |
| <p class="text-green-400 text-sm code-line">> Security level: MAXIMUM</p> |
| </div> |
| </div> |
| |
| <div class="bg-black bg-opacity-50 border border-green-500 rounded-lg p-4 data-stream"> |
| <h3 class="text-lg font-bold hacker-text mb-2 flex items-center"> |
| <i class="fas fa-microchip mr-2"></i> ARMOR SYSTEMS |
| </h3> |
| <div class="h-40 overflow-hidden"> |
| <p class="text-green-400 text-sm code-line">> Mark XLII systems online</p> |
| <p class="text-green-400 text-sm code-line">> Power core at 97% capacity</p> |
| <p class="text-green-400 text-sm code-line">> Repulsors charged and ready</p> |
| <p class="text-green-400 text-sm code-line">> Flight systems nominal</p> |
| <p class="text-green-400 text-sm code-line">> Weapon systems armed</p> |
| <p class="text-green-400 text-sm code-line">> Life support functioning optimally</p> |
| <p class="text-green-400 text-sm code-line">> All systems green</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8 bg-black bg-opacity-50 border border-green-500 rounded-lg p-6"> |
| <h2 class="text-xl font-bold hacker-text mb-4 flex items-center"> |
| <i class="fas fa-microphone mr-2"></i> VOICE INTERFACE |
| </h2> |
| |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="relative mb-4 md:mb-0 md:mr-6"> |
| <div class="w-32 h-32 rounded-full border-4 border-green-500 flex items-center justify-center"> |
| <div class="w-24 h-24 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center"> |
| <i class="fas fa-microphone text-3xl text-green-500"></i> |
| </div> |
| </div> |
| <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-green-900 text-green-300 px-3 py-1 rounded-full text-xs"> |
| LISTENING |
| </div> |
| </div> |
| |
| <div class="flex-grow"> |
| <div class="bg-black p-4 rounded mb-4 h-24 overflow-y-auto"> |
| <p class="text-green-400">> Ready for voice commands, Sir.</p> |
| <p class="text-green-400">> Current recognition accuracy: 98.7%</p> |
| </div> |
| |
| <div class="flex space-x-4"> |
| <button class="flex-grow px-4 py-2 bg-green-500 bg-opacity-20 border border-green-500 text-green-400 rounded hover:bg-opacity-40 transition flex items-center justify-center"> |
| <i class="fas fa-comment mr-2"></i> Text Input |
| </button> |
| <button class="flex-grow px-4 py-2 bg-green-500 bg-opacity-20 border border-green-500 text-green-400 rounded hover:bg-opacity-40 transition flex items-center justify-center"> |
| <i class="fas fa-microphone mr-2"></i> Voice Command |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| function updateDataStreams() { |
| const streams = document.querySelectorAll('.data-stream'); |
| const messages = [ |
| "> Analyzing satellite imagery...", |
| "> Calculating optimal flight path...", |
| "> Monitoring global news feeds...", |
| "> Updating threat database...", |
| "> Synchronizing with Stark Industries mainframe...", |
| "> Running diagnostics on repulsor tech...", |
| "> Scanning for life signs...", |
| "> Adjusting environmental controls...", |
| "> Optimizing energy consumption...", |
| "> Checking weather patterns...", |
| "> Verifying biometric data...", |
| "> Encrypting sensitive communications..." |
| ]; |
| |
| streams.forEach(stream => { |
| const randomMessage = messages[Math.floor(Math.random() * messages.length)]; |
| const newLine = document.createElement('p'); |
| newLine.className = 'text-green-400 text-sm'; |
| newLine.textContent = randomMessage; |
| |
| if(stream.scrollHeight - stream.scrollTop === stream.clientHeight) { |
| stream.scrollTop = stream.scrollHeight; |
| } |
| |
| stream.appendChild(newLine); |
| |
| |
| if(stream.children.length > 10) { |
| stream.removeChild(stream.children[0]); |
| } |
| }); |
| |
| |
| document.querySelectorAll('.text-green-500.font-bold').forEach(el => { |
| if(el.textContent.includes('%')) { |
| const current = parseInt(el.textContent); |
| const change = Math.floor(Math.random() * 5) - 2; |
| const newVal = Math.min(100, Math.max(0, current + change)); |
| el.textContent = newVal + '%'; |
| |
| |
| if(el.parentElement.previousElementSibling && el.parentElement.previousElementSibling.querySelector('.bg-green-500')) { |
| const progressBar = el.parentElement.previousElementSibling.querySelector('.bg-green-500'); |
| progressBar.style.width = newVal + '%'; |
| } |
| } |
| }); |
| } |
| |
| |
| setInterval(updateDataStreams, Math.random() * 3000 + 2000); |
| |
| |
| updateDataStreams(); |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| const terminalInput = document.querySelector('input[type="text"]'); |
| const commands = [ |
| "run diagnostics", |
| "scan perimeter", |
| "activate defense protocols", |
| "calculate trajectory", |
| "initiate launch sequence", |
| "access satellite feed", |
| "run facial recognition", |
| "analyze threat level" |
| ]; |
| |
| let currentCommand = 0; |
| let typing = false; |
| |
| function typeCommand() { |
| if(typing) return; |
| |
| typing = true; |
| terminalInput.placeholder = ''; |
| const command = commands[currentCommand]; |
| let i = 0; |
| |
| const typeInterval = setInterval(() => { |
| terminalInput.placeholder = command.substring(0, i); |
| i++; |
| |
| if(i > command.length) { |
| clearInterval(typeInterval); |
| |
| setTimeout(() => { |
| const deleteInterval = setInterval(() => { |
| terminalInput.placeholder = command.substring(0, i); |
| i--; |
| |
| if(i < 0) { |
| clearInterval(deleteInterval); |
| typing = false; |
| currentCommand = (currentCommand + 1) % commands.length; |
| setTimeout(typeCommand, 1000); |
| } |
| }, 50); |
| }, 2000); |
| } |
| }, 100); |
| } |
| |
| typeCommand(); |
| }); |
| </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=themurat/jarvis" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
