Spaces:

gladiopeace
/

glitched-terminal

Running

App Files Files Community

gladiopeace commited on Jul 18

Commit

1f3730f

verified ·

1 Parent(s): ed675d3

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +379 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Glitched Terminal
-emoji: 🏢
-colorFrom: indigo
 colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: glitched-terminal
+emoji: 🐳
+colorFrom: purple
 colorTo: yellow
 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,379 @@
-<!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>QTerm-4730 :: Quantum Linux 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=Major+Mono+Display&family=Share+Tech+Mono&display=swap');
+        body {
+            font-family: 'Share Tech Mono', monospace;
+            background-color: #0a0a12;
+            color: #0af;
+            overflow: hidden;
+        }
+        .terminal {
+            background: rgba(5, 5, 20, 0.8);
+            border: 1px solid rgba(0, 170, 255, 0.3);
+            box-shadow: 0 0 30px rgba(0, 170, 255, 0.2);
+            position: relative;
+        }
+        .terminal::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                linear-gradient(90deg, rgba(0, 170, 255, 0.1) 1px, transparent 1px),
+                linear-gradient(rgba(0, 170, 255, 0.1) 1px, transparent 1px);
+            background-size: 10px 10px;
+            pointer-events: none;
+            opacity: 0.3;
+        }
+        .glitch {
+            position: relative;
+        }
+        .glitch::before, .glitch::after {
+            content: attr(data-text);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .glitch::before {
+            color: #f0f;
+            z-index: -1;
+            animation: glitch-effect 3s infinite;
+        }
+        .glitch::after {
+            color: #0f0;
+            z-index: -2;
+            animation: glitch-effect 2s infinite reverse;
+        }
+        @keyframes glitch-effect {
+            0% { transform: translate(0); }
+            20% { transform: translate(-3px, 3px); }
+            40% { transform: translate(-3px, -3px); }
+            60% { transform: translate(3px, 3px); }
+            80% { transform: translate(3px, -3px); }
+            100% { transform: translate(0); }
+        }
+        .scanline {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 100%;
+            background: linear-gradient(
+                to bottom,
+                transparent 0%,
+                rgba(0, 170, 255, 0.05) 50%,
+                transparent 100%
+            );
+            background-size: 100% 8px;
+            pointer-events: none;
+            animation: scanline 8s linear infinite;
+        }
+        @keyframes scanline {
+            0% { transform: translateY(-100%); }
+            100% { transform: translateY(100%); }
+        }
+        .quantum-pulse {
+            animation: quantum-pulse 4s infinite alternate;
+        }
+        @keyframes quantum-pulse {
+            0% { box-shadow: 0 0 5px rgba(0, 170, 255, 0.5); }
+            100% { box-shadow: 0 0 20px rgba(0, 170, 255, 0.8); }
+        }
+        .cursor {
+            animation: blink 1s infinite;
+        }
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0; }
+        }
+        .command-output {
+            border-left: 2px solid rgba(0, 170, 255, 0.5);
+            padding-left: 10px;
+            margin: 10px 0;
+        }
+        .quantum-particle {
+            position: absolute;
+            width: 3px;
+            height: 3px;
+            background-color: rgba(0, 170, 255, 0.7);
+            border-radius: 50%;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body class="min-h-screen flex items-center justify-center p-4">
+    <div class="terminal w-full max-w-4xl h-96 md:h-[32rem] rounded-lg overflow-hidden flex flex-col quantum-pulse">
+        <!-- Header -->
+        <div class="bg-black bg-opacity-50 p-2 flex items-center justify-between border-b border-blue-400 border-opacity-30">
+            <div class="flex items-center space-x-2">
+                <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-3 h-3 rounded-full bg-green-500"></div>
+            </div>
+            <div class="text-xs md:text-sm font-mono text-blue-300 glitch" data-text="QTerm-4730 :: Quantum Linux Terminal">
+                QTerm-4730 :: Quantum Linux Terminal
+            </div>
+            <div class="text-xs md:text-sm font-mono text-blue-300">
+                <span id="quantum-date">4730.12.31</span> <span id="quantum-time">23:59:59</span>
+            </div>
+        </div>
+        <!-- Terminal Content -->
+        <div class="flex-1 overflow-y-auto p-4 relative" id="terminal-content">
+            <div class="scanline"></div>
+            <!-- Initial output -->
+            <div class="command-output">
+                <p class="text-green-400">QTerm-4730 v12.7.9 (quantum-kernel 47.30.1-xQ)</p>
+                <p class="text-blue-300">Quantum Entanglement Protocol: <span class="text-green-400">ACTIVE</span></p>
+                <p class="text-blue-300">Superposition Layer: <span class="text-green-400">STABLE</span></p>
+                <p class="text-blue-300">Temporal Sync: <span class="text-yellow-400">±0.0007s</span></p>
+                <br>
+                <p class="text-purple-400">Last login: 4730-12-31 23:59:47 from quantum-entanglement-node-47</p>
+                <p class="text-purple-400">Warning: Temporal anomalies detected in sector 47</p>
+            </div>
+            <!-- Command prompt -->
+            <div class="flex items-center mt-4" id="command-prompt">
+                <span class="text-green-400 mr-2">user@quantum-node:~$</span>
+                <input type="text" class="bg-transparent border-none outline-none flex-1 text-blue-300 font-mono"
+                       id="command-input" autocomplete="off" spellcheck="false" autofocus>
+                <span class="cursor ml-1">|</span>
+            </div>
+            <!-- Command output will be inserted here -->
+            <div id="command-output"></div>
+        </div>
+        <!-- Footer -->
+        <div class="bg-black bg-opacity-50 p-2 text-xs text-blue-300 border-t border-blue-400 border-opacity-30 flex justify-between">
+            <div>
+                <span class="text-purple-400">STATUS:</span>
+                <span class="text-green-400">QUANTUM_READY</span> |
+                <span class="text-purple-400">NODES:</span>
+                <span class="text-yellow-400">47/∞</span>
+            </div>
+            <div>
+                <span class="text-purple-400">Q-BITS:</span>
+                <span class="text-green-400">1.6e+47</span> |
+                <span class="text-purple-400">ENTANGLEMENT:</span>
+                <span class="text-yellow-400">98.7%</span>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Create quantum particles
+        function createQuantumParticles() {
+            const terminal = document.querySelector('.terminal');
+            const particleCount = 30;
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.classList.add('quantum-particle');
+                // Random position
+                const x = Math.random() * 100;
+                const y = Math.random() * 100;
+                particle.style.left = `${x}%`;
+                particle.style.top = `${y}%`;
+                // Random animation
+                const duration = 5 + Math.random() * 10;
+                const delay = Math.random() * 5;
+                particle.style.animation = `quantumFloat ${duration}s ease-in-out ${delay}s infinite`;
+                // Add to terminal
+                terminal.appendChild(particle);
+            }
+        }
+        // Add quantum float animation
+        const style = document.createElement('style');
+        style.innerHTML = `
+            @keyframes quantumFloat {
+                0% { transform: translate(0, 0); opacity: 0; }
+                10% { opacity: 0.7; }
+                50% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); }
+                100% { transform: translate(0, 0); opacity: 0; }
+            }
+        `;
+        document.head.appendChild(style);
+        // Update quantum date and time
+        function updateQuantumDateTime() {
+            const now = new Date();
+            const dateElement = document.getElementById('quantum-date');
+            const timeElement = document.getElementById('quantum-time');
+            // Future date format: 4730.12.31
+            dateElement.textContent = `4730.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`;
+            // Time with milliseconds
+            timeElement.textContent = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
+            // Random glitch effect
+            if (Math.random() < 0.1) {
+                dateElement.classList.add('glitch');
+                timeElement.classList.add('glitch');
+                setTimeout(() => {
+                    dateElement.classList.remove('glitch');
+                    timeElement.classList.remove('glitch');
+                }, 500);
+            }
+        }
+        // Command processor
+        function processCommand(command) {
+            const outputDiv = document.getElementById('command-output');
+            const promptDiv = document.createElement('div');
+            promptDiv.className = 'flex items-center mt-4';
+            promptDiv.innerHTML = `
+                <span class="text-green-400 mr-2">user@quantum-node:~$</span>
+                <span class="text-blue-300">${command}</span>
+            `;
+            outputDiv.appendChild(promptDiv);
+            // Create response div
+            const responseDiv = document.createElement('div');
+            responseDiv.className = 'command-output';
+            // Process commands
+            command = command.trim().toLowerCase();
+            if (command === 'help' || command === '?') {
+                responseDiv.innerHTML = `
+                    <p class="text-yellow-400">Available commands:</p>
+                    <p>help - Display this help message</p>
+                    <p>status - Show quantum system status</p>
+                    <p>entangle - Initiate quantum entanglement</p>
+                    <p>superpose - Enter superposition state</p>
+                    <p>temporal - Check temporal stability</p>
+                    <p>nodes - List connected quantum nodes</p>
+                    <p>clear - Clear terminal</p>
+                `;
+            }
+            else if (command === 'status') {
+                responseDiv.innerHTML = `
+                    <p class="text-yellow-400">Quantum System Status:</p>
+                    <p>Core Temperature: <span class="text-green-400">${(Math.random() * 0.5 + 2.7).toFixed(2)}K</span></p>
+                    <p>Q-Bit Stability: <span class="text-green-400">${(Math.random() * 5 + 95).toFixed(1)}%</span></p>
+                    <p>Entanglement Rate: <span class="text-green-400">${(Math.random() * 20 + 80).toFixed(1)}%</span></p>
+                    <p>Temporal Variance: <span class="text-yellow-400">±${(Math.random() * 0.001).toFixed(4)}s</span></p>
+                `;
+            }
+            else if (command === 'entangle') {
+                responseDiv.innerHTML = `
+                    <p class="text-purple-400">Initiating quantum entanglement protocol...</p>
+                    <p>Establishing connection with parallel universes...</p>
+                    <p class="text-green-400">Entanglement successful! Connected to ${Math.floor(Math.random() * 47) + 1} alternate realities.</p>
+                `;
+            }
+            else if (command === 'superpose') {
+                responseDiv.innerHTML = `
+                    <p class="text-purple-400">Entering quantum superposition state...</p>
+                    <p>Collapsing wavefunction in 3... 2... 1...</p>
+                    <p class="text-green-400">Superposition achieved! You are now in ${Math.floor(Math.random() * 10) + 2} states simultaneously.</p>
+                `;
+            }
+            else if (command === 'temporal') {
+                responseDiv.innerHTML = `
+                    <p class="text-yellow-400">Temporal Stability Report:</p>
+                    <p>Local Timeline Integrity: <span class="text-green-400">${(Math.random() * 10 + 90).toFixed(1)}%</span></p>
+                    <p>Chroniton Particles: <span class="text-yellow-400">${(Math.random() * 1000).toFixed(0)}/cm³</span></p>
+                    <p>Temporal Anomalies: <span class="text-red-400">${Math.floor(Math.random() * 5)} detected</span></p>
+                    <p>Recommendation: ${Math.random() > 0.5 ? "No action required" : "Initiate temporal recalibration"}</p>
+                `;
+            }
+            else if (command === 'nodes') {
+                const nodeCount = Math.floor(Math.random() * 10) + 5;
+                let nodesHTML = `<p class="text-yellow-400">Connected Quantum Nodes (${nodeCount}):</p>`;
+                for (let i = 0; i < nodeCount; i++) {
+                    const status = Math.random() > 0.2 ? "ONLINE" : "OFFLINE";
+                    const statusClass = status === "ONLINE" ? "text-green-400" : "text-red-400";
+                    nodesHTML += `<p>quantum-node-${i} <span class="${statusClass}">${status}</span> ${Math.random().toFixed(4)}Q</p>`;
+                }
+                responseDiv.innerHTML = nodesHTML;
+            }
+            else if (command === 'clear') {
+                document.getElementById('command-output').innerHTML = '';
+                return;
+            }
+            else if (command === '') {
+                // Do nothing for empty command
+                return;
+            }
+            else {
+                responseDiv.innerHTML = `
+                    <p class="text-red-400">Command not found: ${command}</p>
+                    <p>Type 'help' for available commands</p>
+                `;
+            }
+            outputDiv.appendChild(responseDiv);
+            // Random glitch effect
+            if (Math.random() < 0.3) {
+                responseDiv.classList.add('glitch');
+                setTimeout(() => {
+                    responseDiv.classList.remove('glitch');
+                }, 500);
+            }
+            // Scroll to bottom
+            document.getElementById('terminal-content').scrollTop = document.getElementById('terminal-content').scrollHeight;
+        }
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            createQuantumParticles();
+            updateQuantumDateTime();
+            setInterval(updateQuantumDateTime, 1000);
+            const commandInput = document.getElementById('command-input');
+            commandInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    const command = commandInput.value;
+                    commandInput.value = '';
+                    processCommand(command);
+                }
+            });
+            // Focus input when clicking anywhere in terminal
+            document.getElementById('terminal-content').addEventListener('click', () => {
+                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/glitched-terminal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>