Spaces:

gladiopeace
/

my-generic-space

Running

App Files Files Community

gladiopeace commited on 23 days ago

Commit

2d8346a

verified ·

1 Parent(s): 324b882

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +530 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: My Generic Space
-emoji: 🦀
-colorFrom: red
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: my-generic-space
+emoji: 🐳
+colorFrom: purple
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,530 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>