Spaces:

zman6969
/

deploying-the-unknown

Running

App Files Files Community

zman6969 commited on May 12, 2025

Commit

a016282

verified ·

1 Parent(s): bfa4a59

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +366 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Deploying The Unknown
-emoji: 🚀
-colorFrom: gray
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: deploying-the-unknown
+emoji: 🐳
+colorFrom: pink
+colorTo: purple
 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,366 @@
-<!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>THE UNKNOWN</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=Space+Mono:wght@400;700&display=swap');
+        body {
+            font-family: 'Space Mono', monospace;
+            background-color: #0a0a0a;
+            color: #e0e0e0;
+            overflow-x: hidden;
+        }
+        .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 #ff00ff;
+            clip: rect(44px, 450px, 56px, 0);
+            animation: glitch-anim 5s infinite linear alternate-reverse;
+        }
+        .glitch::after {
+            left: -2px;
+            text-shadow: -2px 0 #00ffff;
+            clip: rect(44px, 450px, 56px, 0);
+            animation: glitch-anim2 5s infinite linear alternate-reverse;
+        }
+        @keyframes glitch-anim {
+            0% { clip: rect(31px, 9999px, 94px, 0); }
+            10% { clip: rect(112px, 9999px, 76px, 0); }
+            20% { clip: rect(85px, 9999px, 77px, 0); }
+            30% { clip: rect(27px, 9999px, 97px, 0); }
+            40% { clip: rect(64px, 9999px, 98px, 0); }
+            50% { clip: rect(61px, 9999px, 85px, 0); }
+            60% { clip: rect(99px, 9999px, 114px, 0); }
+            70% { clip: rect(34px, 9999px, 115px, 0); }
+            80% { clip: rect(98px, 9999px, 129px, 0); }
+            90% { clip: rect(43px, 9999px, 96px, 0); }
+            100% { clip: rect(82px, 9999px, 64px, 0); }
+        }
+        @keyframes glitch-anim2 {
+            0% { clip: rect(65px, 9999px, 119px, 0); }
+            10% { clip: rect(66px, 9999px, 151px, 0); }
+            20% { clip: rect(33px, 9999px, 149px, 0); }
+            30% { clip: rect(86px, 9999px, 102px, 0); }
+            40% { clip: rect(82px, 9999px, 129px, 0); }
+            50% { clip: rect(84px, 9999px, 84px, 0); }
+            60% { clip: rect(61px, 9999px, 92px, 0); }
+            70% { clip: rect(15px, 9999px, 16px, 0); }
+            80% { clip: rect(37px, 9999px, 39px, 0); }
+            90% { clip: rect(68px, 9999px, 72px, 0); }
+            100% { clip: rect(14px, 9999px, 87px, 0); }
+        }
+        .terminal {
+            background: rgba(10, 10, 10, 0.8);
+            border: 1px solid #333;
+            box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
+        }
+        .terminal-header {
+            background: linear-gradient(90deg, #111, #222);
+            border-bottom: 1px solid #333;
+        }
+        .terminal-body {
+            font-family: 'Major Mono Display', monospace;
+        }
+        .cursor {
+            animation: blink 1s infinite;
+        }
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0; }
+        }
+        .particles {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        .portal {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(0,255,255,0.8) 0%, rgba(0,0,255,0.2) 70%, transparent 100%);
+            box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
+            animation: pulse 4s infinite alternate;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); opacity: 0.8; }
+            100% { transform: scale(1.1); opacity: 1; }
+        }
+        .hidden-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.5s ease-out;
+        }
+        .revealed {
+            max-height: 500px;
+            transition: max-height 0.5s ease-in;
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col items-center justify-center p-4">
+    <div class="particles" id="particles-js"></div>
+    <div class="max-w-4xl w-full mx-auto">
+        <header class="text-center mb-10">
+            <h1 class="glitch text-5xl md:text-7xl font-bold mb-4" data-text="UNKNOWN">UNKNOWN</h1>
+            <p class="text-lg md:text-xl text-cyan-300 font-mono">Exploring the boundaries of the unexplained</p>
+        </header>
+        <div class="terminal rounded-lg overflow-hidden mb-10">
+            <div class="terminal-header flex items-center p-3">
+                <div class="flex space-x-2 mr-4">
+                    <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-sm font-mono">terminal.exe</div>
+            </div>
+            <div class="terminal-body p-4 font-mono text-green-400" id="terminal">
+                <div class="mb-2">> Initializing system...</div>
+                <div class="mb-2">> Loading encrypted data...</div>
+                <div class="mb-2">> Establishing secure connection...</div>
+                <div class="mb-2">> Welcome to UNKNOWN network</div>
+                <div class="mb-2">> Type <span class="text-cyan-300">'help'</span> for available commands</div>
+                <div class="flex items-center">
+                    <span>> </span>
+                    <input type="text" id="command-input" class="bg-transparent border-none outline-none flex-grow text-green-400 font-mono" autocomplete="off" spellcheck="false">
+                    <span class="cursor">█</span>
+                </div>
+            </div>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
+            <div class="bg-gray-900 bg-opacity-70 rounded-lg p-6 border border-gray-800 hover:border-cyan-500 transition-all cursor-pointer" onclick="revealContent('content1')">
+                <div class="flex items-center mb-4">
+                    <div class="w-10 h-10 rounded-full bg-cyan-900 flex items-center justify-center mr-3">
+                        <i class="fas fa-question text-cyan-400"></i>
+                    </div>
+                    <h3 class="text-xl font-bold">The Unexplained</h3>
+                </div>
+                <p class="text-gray-400">Discover phenomena that defy conventional understanding...</p>
+                <div id="content1" class="hidden-content mt-4">
+                    <p class="text-gray-300">From mysterious disappearances to inexplicable cosmic signals, our world is filled with events that challenge our perception of reality. What lies beyond our current understanding?</p>
+                    <button class="mt-3 px-4 py-2 bg-cyan-800 hover:bg-cyan-700 rounded text-sm">Learn More</button>
+                </div>
+            </div>
+            <div class="bg-gray-900 bg-opacity-70 rounded-lg p-6 border border-gray-800 hover:border-purple-500 transition-all cursor-pointer" onclick="revealContent('content2')">
+                <div class="flex items-center mb-4">
+                    <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center mr-3">
+                        <i class="fas fa-eye text-purple-400"></i>
+                    </div>
+                    <h3 class="text-xl font-bold">Hidden Realities</h3>
+                </div>
+                <p class="text-gray-400">Dimensions beyond our perception may hold secrets...</p>
+                <div id="content2" class="hidden-content mt-4">
+                    <p class="text-gray-300">Theoretical physics suggests there may be up to 11 dimensions. What if some of these dimensions contain civilizations or phenomena we can't perceive with our limited senses?</p>
+                    <button class="mt-3 px-4 py-2 bg-purple-800 hover:bg-purple-700 rounded text-sm">Explore</button>
+                </div>
+            </div>
+            <div class="bg-gray-900 bg-opacity-70 rounded-lg p-6 border border-gray-800 hover:border-pink-500 transition-all cursor-pointer" onclick="revealContent('content3')">
+                <div class="flex items-center mb-4">
+                    <div class="w-10 h-10 rounded-full bg-pink-900 flex items-center justify-center mr-3">
+                        <i class="fas fa-brain text-pink-400"></i>
+                    </div>
+                    <h3 class="text-xl font-bold">Consciousness</h3>
+                </div>
+                <p class="text-gray-400">The greatest mystery may be within us...</p>
+                <div id="content3" class="hidden-content mt-4">
+                    <p class="text-gray-300">Consciousness remains one of science's greatest unsolved mysteries. Is it purely a product of the brain, or could it be something more fundamental to the universe itself?</p>
+                    <button class="mt-3 px-4 py-2 bg-pink-800 hover:bg-pink-700 rounded text-sm">Investigate</button>
+                </div>
+            </div>
+        </div>
+        <div class="flex flex-col items-center justify-center mb-10">
+            <div class="portal flex items-center justify-center mb-6">
+                <div class="text-center p-4">
+                    <p class="text-xl font-bold mb-2">ACCESS PORTAL</p>
+                    <p class="text-sm">Enter if you dare</p>
+                </div>
+            </div>
+            <button id="portal-btn" class="px-8 py-3 bg-transparent border-2 border-cyan-500 text-cyan-400 hover:bg-cyan-900 hover:text-white rounded-full font-bold transition-all">
+                ACTIVATE
+            </button>
+        </div>
+        <footer class="text-center text-gray-500 text-sm mt-10">
+            <p>© 2023 UNKNOWN NETWORK | All rights reserved (or not)</p>
+            <p class="mt-2">This website may or may not exist in your current reality</p>
+        </footer>
+    </div>
+    <script>
+        // Terminal functionality
+        const commandInput = document.getElementById('command-input');
+        const terminal = document.getElementById('terminal');
+        commandInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                const command = commandInput.value.trim();
+                commandInput.value = '';
+                // Add the command to terminal history
+                const commandLine = document.createElement('div');
+                commandLine.className = 'mb-2';
+                commandLine.textContent = '> ' + command;
+                terminal.insertBefore(commandLine, commandInput.parentNode);
+                // Process command
+                processCommand(command);
+                // Scroll to bottom
+                terminal.scrollTop = terminal.scrollHeight;
+            }
+        });
+        function processCommand(command) {
+            const response = document.createElement('div');
+            response.className = 'mb-2';
+            switch(command.toLowerCase()) {
+                case 'help':
+                    response.innerHTML = `
+                        Available commands:<br>
+                        - <span class="text-cyan-300">help</span>: Show this help<br>
+                        - <span class="text-cyan-300">about</span>: About this project<br>
+                        - <span class="text-cyan-300">contact</span>: Contact information<br>
+                        - <span class="text-cyan-300">clear</span>: Clear terminal<br>
+                        - <span class="text-cyan-300">access</span>: Request portal access
+                    `;
+                    break;
+                case 'about':
+                    response.textContent = 'UNKNOWN is a research initiative exploring unexplained phenomena at the boundaries of science and perception.';
+                    break;
+                case 'contact':
+                    response.textContent = 'Contact not available through conventional means. Try alternative methods.';
+                    break;
+                case 'clear':
+                    // Remove all children except the last one (input line)
+                    while (terminal.children.length > 1) {
+                        terminal.removeChild(terminal.firstChild);
+                    }
+                    return;
+                case 'access':
+                    response.innerHTML = 'Access request received. <span class="text-green-500">Portal activated.</span>';
+                    activatePortal();
+                    break;
+                default:
+                    response.textContent = 'Command not recognized. Type "help" for available commands.';
+            }
+            terminal.insertBefore(response, commandInput.parentNode);
+        }
+        // Content reveal functionality
+        let currentlyOpen = null;
+        function revealContent(id) {
+            const content = document.getElementById(id);
+            if (currentlyOpen && currentlyOpen !== content) {
+                currentlyOpen.classList.remove('revealed');
+            }
+            content.classList.toggle('revealed');
+            currentlyOpen = content.classList.contains('revealed') ? content : null;
+        }
+        // Portal activation
+        const portalBtn = document.getElementById('portal-btn');
+        function activatePortal() {
+            portalBtn.textContent = 'ENTERING...';
+            portalBtn.classList.remove('border-cyan-500', 'text-cyan-400', 'hover:bg-cyan-900');
+            portalBtn.classList.add('border-purple-500', 'text-purple-400', 'hover:bg-purple-900');
+            // Create particles effect
+            const particles = document.getElementById('particles-js');
+            particles.innerHTML = '';
+            for (let i = 0; i < 50; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'absolute rounded-full bg-cyan-500';
+                particle.style.width = Math.random() * 5 + 2 + 'px';
+                particle.style.height = particle.style.width;
+                particle.style.left = Math.random() * 100 + '%';
+                particle.style.top = Math.random() * 100 + '%';
+                particle.style.opacity = Math.random();
+                particle.style.animation = `float ${Math.random() * 5 + 3}s infinite ease-in-out`;
+                // Add animation
+                const keyframes = `
+                    @keyframes float {
+                        0% { transform: translate(0, 0); opacity: ${Math.random()}; }
+                        50% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); opacity: ${Math.random()}; }
+                        100% { transform: translate(0, 0); opacity: ${Math.random()}; }
+                    }
+                `;
+                const style = document.createElement('style');
+                style.innerHTML = keyframes;
+                document.head.appendChild(style);
+                particles.appendChild(particle);
+            }
+            // Change background
+            document.body.style.background = 'radial-gradient(circle, #0a0a0a 0%, #111126 100%)';
+            // After delay, reset
+            setTimeout(() => {
+                portalBtn.textContent = 'ACTIVATED';
+                portalBtn.classList.remove('border-purple-500', 'text-purple-400', 'hover:bg-purple-900');
+                portalBtn.classList.add('border-green-500', 'text-green-400', 'hover:bg-green-900');
+                setTimeout(() => {
+                    portalBtn.textContent = 'ACTIVATE';
+                    portalBtn.classList.remove('border-green-500', 'text-green-400', 'hover:bg-green-900');
+                    portalBtn.classList.add('border-cyan-500', 'text-cyan-400', 'hover:bg-cyan-900');
+                    document.body.style.background = '#0a0a0a';
+                    particles.innerHTML = '';
+                }, 3000);
+            }, 2000);
+        }
+        portalBtn.addEventListener('click', activatePortal);
+        // Initial terminal focus
+        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=zman6969/deploying-the-unknown" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Build a unknown website