Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>OilRig Crew :: Terminal</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=Source+Code+Pro:wght@400;700&display=swap'); | |
| :root { | |
| --base03: #002b36; | |
| --base02: #073642; | |
| --base01: #586e75; | |
| --base00: #657b83; | |
| --base0: #839496; | |
| --base1: #93a1a1; | |
| --base2: #eee8d5; | |
| --base3: #fdf6e3; | |
| --yellow: #b58900; | |
| --orange: #cb4b16; | |
| --red: #dc322f; | |
| --magenta: #d33682; | |
| --violet: #6c71c4; | |
| --blue: #268bd2; | |
| --cyan: #2aa198; | |
| --green: #859900; | |
| } | |
| body { | |
| font-family: 'Source Code Pro', monospace; | |
| background-color: var(--base03); | |
| color: var(--base0); | |
| overflow-x: hidden; | |
| height: 100vh; | |
| margin: 0; | |
| padding: 0; | |
| user-select: none; | |
| } | |
| .terminal { | |
| background-color: var(--base02); | |
| border: 1px solid var(--base01); | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); | |
| border-radius: 5px; | |
| height: 70vh; | |
| min-height: 500px; | |
| width: 80vw; | |
| min-width: 800px; | |
| margin: 0; | |
| padding: 20px; | |
| position: absolute; | |
| overflow: hidden; | |
| resize: both; | |
| cursor: move; | |
| } | |
| .terminal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| border-bottom: 1px solid var(--base01); | |
| padding-bottom: 10px; | |
| cursor: move; | |
| } | |
| .terminal-title { | |
| color: var(--cyan); | |
| font-weight: bold; | |
| font-size: 1.1rem; | |
| } | |
| .terminal-controls span { | |
| display: inline-block; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| margin-left: 5px; | |
| cursor: pointer; | |
| } | |
| .control-close { background-color: var(--red); } | |
| .control-minimize { background-color: var(--yellow); } | |
| .control-maximize { background-color: var(--green); } | |
| .prompt { | |
| color: var(--green); | |
| margin-right: 10px; | |
| } | |
| .cursor { | |
| display: inline-block; | |
| width: 10px; | |
| height: 20px; | |
| background-color: var(--base0); | |
| animation: blink 1s infinite; | |
| vertical-align: middle; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .command { | |
| color: var(--blue); | |
| } | |
| .output { | |
| margin: 10px 0; | |
| line-height: 1.5; | |
| white-space: pre-wrap; | |
| } | |
| .ascii-art { | |
| color: var(--cyan); | |
| line-height: 1.2; | |
| font-size: 0.6rem; | |
| margin: 15px 0; | |
| } | |
| .link { | |
| color: var(--blue); | |
| text-decoration: underline; | |
| cursor: pointer; | |
| } | |
| .link:hover { | |
| color: var(--cyan); | |
| } | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .glitch::before { | |
| left: 2px; | |
| text-shadow: -2px 0 var(--magenta); | |
| clip: rect(24px, 550px, 90px, 0); | |
| animation: glitch-anim-1 2s infinite linear alternate-reverse; | |
| } | |
| .glitch::after { | |
| left: -2px; | |
| text-shadow: -2px 0 var(--cyan); | |
| clip: rect(85px, 550px, 140px, 0); | |
| animation: glitch-anim-2 2s infinite linear alternate-reverse; | |
| } | |
| @keyframes glitch-anim-1 { | |
| 0% { clip: rect(32px, 9999px, 76px, 0); } | |
| 20% { clip: rect(108px, 9999px, 23px, 0); } | |
| 40% { clip: rect(91px, 9999px, 29px, 0); } | |
| 60% { clip: rect(98px, 9999px, 52px, 0); } | |
| 80% { clip: rect(60px, 9999px, 74px, 0); } | |
| 100% { clip: rect(38px, 9999px, 60px, 0); } | |
| } | |
| @keyframes glitch-anim-2 { | |
| 0% { clip: rect(65px, 9999px, 119px, 0); } | |
| 20% { clip: rect(25px, 9999px, 145px, 0); } | |
| 40% { clip: rect(50px, 9999px, 41px, 0); } | |
| 60% { clip: rect(30px, 9999px, 92px, 0); } | |
| 80% { clip: rect(82px, 9999px, 73px, 0); } | |
| 100% { clip: rect(60px, 9999px, 87px, 0); } | |
| } | |
| .scanlines { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| to bottom, | |
| rgba(0, 0, 0, 0.1) 0%, | |
| rgba(0, 0, 0, 0.1) 50%, | |
| transparent 50% | |
| ); | |
| background-size: 100% 3px; | |
| pointer-events: none; | |
| z-index: 10; | |
| } | |
| .typing { | |
| border-right: 2px solid var(--green); | |
| animation: blink-caret 0.75s step-end infinite; | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent; } | |
| 50% { border-color: var(--green); } | |
| } | |
| .resize-handle { | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| width: 20px; | |
| height: 20px; | |
| background: var(--base01); | |
| cursor: nwse-resize; | |
| z-index: 20; | |
| } | |
| #background-grid { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(var(--base01) 1px, transparent 1px), | |
| linear-gradient(90deg, var(--base01) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| z-index: -1; | |
| opacity: 0.2; | |
| } | |
| #watermark { | |
| position: fixed; | |
| bottom: 10px; | |
| right: 10px; | |
| color: var(--base01); | |
| font-size: 0.8rem; | |
| z-index: -1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="background-grid"></div> | |
| <div id="watermark">OILRIG TERMINAL v2.4.1</div> | |
| <div class="terminal" id="terminal-window"> | |
| <div class="scanlines"></div> | |
| <div class="terminal-header" id="terminal-header"> | |
| <div class="terminal-title">OilRig Crew Terminal v2.4.1</div> | |
| <div class="terminal-controls"> | |
| <span class="control-close" id="control-close"></span> | |
| <span class="control-minimize" id="control-minimize"></span> | |
| <span class="control-maximize" id="control-maximize"></span> | |
| </div> | |
| </div> | |
| <div class="ascii-art"> | |
| <pre> | |
| ___ _ _ _ ____ ___ _____ | |
| / _ \ | | | || | | _ \ / _ \ |_ _| | |
| | | | || | | || | | |_) | | | | | | | |
| | | | || | | || |___ | _ <| |_| | | | | |
| \___/ |_| |_||_____||_| \_\\___/ |_| | |
| </pre> | |
| </div> | |
| <div class="output"> | |
| <span class="text-yellow-400">SYSTEM INITIALIZED</span> - Solaris OS v4.2.1<br> | |
| <span class="text-green-400">SECURE CONNECTION ESTABLISHED</span> - AES-256 Encrypted<br> | |
| <span class="text-blue-400">REMOTE ACCESS GRANTED</span> - Welcome back, Operator<br><br> | |
| <span class="text-cyan-400">OilRig Crew Manifest v2.0</span><br> | |
| ------------------------------<br> | |
| <span class="text-green-400">> </span>Deep Sea Operations<br> | |
| <span class="text-green-400">> </span>Offshore Drilling<br> | |
| <span class="text-green-400">> </span>Subsurface Exploration<br> | |
| <span class="text-green-400">> </span>Resource Extraction<br> | |
| <span class="text-green-400">> </span>Black Site Maintenance<br><br> | |
| <span class="text-red-400">WARNING:</span> Unauthorized access will be met with immediate countermeasures.<br> | |
| All activities are logged and monitored by <span class="glitch" data-text="OVERWATCH">OVERWATCH</span>.<br><br> | |
| Type <span class="command">help</span> for available commands. | |
| </div> | |
| <div class="input-line flex items-center"> | |
| <span class="prompt">[root@oilrig ~]#</span> | |
| <input type="text" id="command-input" class="bg-transparent border-none outline-none flex-grow text-green-400" autofocus> | |
| <span class="cursor"></span> | |
| </div> | |
| <div id="output-container" class="overflow-y-auto max-h-[40vh]"></div> | |
| <div class="resize-handle" id="resize-handle"></div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const terminal = document.getElementById('terminal-window'); | |
| const terminalHeader = document.getElementById('terminal-header'); | |
| const commandInput = document.getElementById('command-input'); | |
| const outputContainer = document.getElementById('output-container'); | |
| const closeBtn = document.getElementById('control-close'); | |
| const minimizeBtn = document.getElementById('control-minimize'); | |
| const maximizeBtn = document.getElementById('control-maximize'); | |
| const resizeHandle = document.getElementById('resize-handle'); | |
| // Make terminal draggable | |
| let isDragging = false; | |
| let offsetX, offsetY; | |
| terminalHeader.addEventListener('mousedown', function(e) { | |
| if (e.target === terminalHeader || e.target.classList.contains('terminal-title')) { | |
| isDragging = true; | |
| offsetX = e.clientX - terminal.getBoundingClientRect().left; | |
| offsetY = e.clientY - terminal.getBoundingClientRect().top; | |
| terminal.style.cursor = 'grabbing'; | |
| } | |
| }); | |
| document.addEventListener('mousemove', function(e) { | |
| if (!isDragging) return; | |
| const x = e.clientX - offsetX; | |
| const y = e.clientY - offsetY; | |
| // Keep terminal within viewport | |
| const maxX = window.innerWidth - terminal.offsetWidth; | |
| const maxY = window.innerHeight - terminal.offsetHeight; | |
| terminal.style.left = Math.min(Math.max(0, x), maxX) + 'px'; | |
| terminal.style.top = Math.min(Math.max(0, y), maxY) + 'px'; | |
| }); | |
| document.addEventListener('mouseup', function() { | |
| isDragging = false; | |
| terminal.style.cursor = 'move'; | |
| }); | |
| // Make terminal resizable | |
| let isResizing = false; | |
| resizeHandle.addEventListener('mousedown', function(e) { | |
| isResizing = true; | |
| e.preventDefault(); | |
| }); | |
| document.addEventListener('mousemove', function(e) { | |
| if (!isResizing) return; | |
| const width = e.clientX - terminal.getBoundingClientRect().left; | |
| const height = e.clientY - terminal.getBoundingClientRect().top; | |
| terminal.style.width = Math.max(600, width) + 'px'; | |
| terminal.style.height = Math.max(400, height) + 'px'; | |
| // Adjust output container height | |
| outputContainer.style.maxHeight = (parseInt(terminal.style.height) - 300) + 'px'; | |
| }); | |
| document.addEventListener('mouseup', function() { | |
| isResizing = false; | |
| }); | |
| // Terminal controls | |
| closeBtn.addEventListener('click', function() { | |
| terminal.style.transform = 'scale(0.8)'; | |
| terminal.style.opacity = '0'; | |
| setTimeout(() => { | |
| terminal.style.display = 'none'; | |
| document.body.style.backgroundColor = 'var(--base03)'; | |
| document.body.innerHTML = '<div class="text-center text-red-400 text-2xl mt-20">TERMINAL DISCONNECTED</div>'; | |
| }, 300); | |
| }); | |
| minimizeBtn.addEventListener('click', function() { | |
| terminal.style.transform = 'scale(0.9)'; | |
| terminal.style.opacity = '0.5'; | |
| setTimeout(() => { | |
| terminal.style.display = 'none'; | |
| setTimeout(() => { | |
| terminal.style.display = 'block'; | |
| terminal.style.transform = 'scale(1)'; | |
| terminal.style.opacity = '1'; | |
| }, 1000); | |
| }, 300); | |
| }); | |
| maximizeBtn.addEventListener('click', function() { | |
| if (terminal.style.width === '90vw' && terminal.style.height === '90vh') { | |
| terminal.style.width = '80vw'; | |
| terminal.style.height = '70vh'; | |
| terminal.style.left = '10vw'; | |
| terminal.style.top = '15vh'; | |
| } else { | |
| terminal.style.width = '90vw'; | |
| terminal.style.height = '90vh'; | |
| terminal.style.left = '5vw'; | |
| terminal.style.top = '5vh'; | |
| } | |
| outputContainer.style.maxHeight = (parseInt(terminal.style.height) - 300) + 'px'; | |
| }); | |
| // Position terminal initially | |
| terminal.style.left = '10vw'; | |
| terminal.style.top = '15vh'; | |
| // Command processing | |
| const commands = { | |
| 'help': 'Available commands: about, crew, projects, contact, clear, status, map, login, panic', | |
| 'about': 'OilRig Crew - Specialized in deep sea operations and resource extraction. Established 2008.', | |
| 'crew': 'Crew Members:\n- CAPTAIN: ████████\n- ENGINEER: █████\n- GEOLOGIST: ███████\n- DIVER: ████████\n- SYSTEMS: ████████\n\n[ACCESS RESTRICTED]', | |
| 'projects': 'Active Projects:\n1. Project DEEPWELL (Status: Operational)\n2. Project BLACKTIDE (Status: Classified)\n3. Project SUNKEN (Status: In Development)\n\nType "projects [id]" for details', | |
| 'contact': 'Secure comms only. Use encrypted channels.\nFrequency: 147.870MHz\nEncryption Key: ORC-████-2023', | |
| 'clear': function() { outputContainer.innerHTML = ''; }, | |
| 'projects 1': 'Project DEEPWELL:\nLocation: ████████████\nDepth: 2,450m\nPurpose: Resource extraction\nStatus: Operational\n\n[FURTHER DETAILS CLASSIFIED]', | |
| 'projects 2': 'Project BLACKTIDE:\n[ACCESS DENIED]\nClearance level required: ORANGE-5', | |
| 'projects 3': 'Project SUNKEN:\nExperimental deep-sea habitat\nPhase: Testing\nETA: Q4 2023\n\n[LOGS CORRUPTED]', | |
| 'login': 'Already authenticated via secure channel.\nUser: OPERATOR\nAccess Level: 3\nPermissions: Read/Write', | |
| 'status': 'System Status:\n- Power: 98%\n- Pressure: Stable\n- Comms: Encrypted\n- Security: Active\n\nAll systems nominal.', | |
| 'map': 'Generating location map...\n\n████████████████████\n████ YOU ARE HERE ████\n████████████████████\n\nCoordinates encrypted.', | |
| 'panic': function() { | |
| outputContainer.innerHTML += '<div class="output text-red-400">EMERGENCY PROTOCOL INITIATED</div>'; | |
| outputContainer.innerHTML += '<div class="output text-red-400">PURGING DATA...</div>'; | |
| setTimeout(() => { | |
| outputContainer.innerHTML += '<div class="output text-red-400">TERMINAL LOCKED</div>'; | |
| commandInput.disabled = true; | |
| document.body.classList.add('bg-red-900'); | |
| setTimeout(() => { | |
| outputContainer.innerHTML += '<div class="output text-yellow-400">SYSTEM REBOOTING...</div>'; | |
| setTimeout(() => { | |
| location.reload(); | |
| }, 2000); | |
| }, 2000); | |
| }, 1500); | |
| }, | |
| 'echo': function(args) { | |
| return args.join(' '); | |
| }, | |
| 'date': function() { | |
| return new Date().toLocaleString(); | |
| }, | |
| 'whoami': 'operator', | |
| 'uname': 'Solaris 4.2.1', | |
| 'ls': 'bin/ etc/ home/ logs/ projects/ secure/ tmp/', | |
| 'cd': 'Directory change not permitted in secure terminal.', | |
| 'sudo': 'Access denied. Insufficient privileges.', | |
| 'exit': 'Terminal session cannot be closed from within. Use physical disconnect.' | |
| }; | |
| commandInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| const input = commandInput.value.trim(); | |
| commandInput.value = ''; | |
| // Display the command | |
| outputContainer.innerHTML += ` | |
| <div class="input-line flex items-center"> | |
| <span class="prompt">[root@oilrig ~]#</span> | |
| <span class="command">${input}</span> | |
| </div> | |
| `; | |
| // Process the command | |
| const parts = input.split(' '); | |
| const cmd = parts[0].toLowerCase(); | |
| const args = parts.slice(1); | |
| let response = 'Command not recognized. Type "help" for available commands.'; | |
| if (commands.hasOwnProperty(cmd)) { | |
| if (typeof commands[cmd] === 'function') { | |
| response = commands[cmd](args); | |
| } else { | |
| response = commands[cmd]; | |
| } | |
| } | |
| // Special Easter eggs | |
| if (cmd === 'hello') { | |
| response = '01001000 01100101 01101100 01101100 01101111 00100000 01110111 01101111 01110010 01101100 01100100'; | |
| } | |
| if (cmd === 'matrix') { | |
| response = 'Wake up, Operator...'; | |
| document.body.classList.add('bg-green-900'); | |
| setTimeout(() => { | |
| document.body.classList.remove('bg-green-900'); | |
| }, 1000); | |
| } | |
| if (cmd === 'reboot') { | |
| response = 'Initiating system reboot sequence...'; | |
| setTimeout(() => { | |
| location.reload(); | |
| }, 2000); | |
| } | |
| // Display the response | |
| outputContainer.innerHTML += `<div class="output">${response.replace(/\n/g, '<br>')}</div>`; | |
| // Scroll to bottom | |
| outputContainer.scrollTop = outputContainer.scrollHeight; | |
| } | |
| }); | |
| // Initial animation | |
| setTimeout(() => { | |
| outputContainer.innerHTML += ` | |
| <div class="output"> | |
| <span class="text-cyan-400">System Diagnostics:</span><br> | |
| <span class="text-green-400">></span> Memory: 78% available<br> | |
| <span class="text-green-400">></span> Storage: 42% utilized<br> | |
| <span class="text-green-400">></span> Network: 5 active connections<br> | |
| <span class="text-green-400">></span> Security: Firewall active<br> | |
| <span class="text-green-400">></span> Sensors: All nominal<br><br> | |
| <span class="text-yellow-400">Last system update: 24 hours ago</span><br> | |
| <span class="text-blue-400">Next maintenance window: 48 hours</span> | |
| </div> | |
| `; | |
| outputContainer.scrollTop = outputContainer.scrollHeight; | |
| }, 1000); | |
| // Focus input when clicking anywhere in terminal | |
| terminal.addEventListener('click', function() { | |
| commandInput.focus(); | |
| }); | |
| }); | |
| </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=gladiopeace/my-generic-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |