Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TPB-987 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> | |
| @keyframes glitch { | |
| 0% { transform: translate(0); } | |
| 20% { transform: translate(-2px, 2px); } | |
| 40% { transform: translate(-2px, -2px); } | |
| 60% { transform: translate(2px, 2px); } | |
| 80% { transform: translate(2px, -2px); } | |
| 100% { transform: translate(0); } | |
| } | |
| .glitch-effect { | |
| animation: glitch 0.5s infinite; | |
| } | |
| .typing-indicator { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| background-color: #4ade80; | |
| border-radius: 50%; | |
| margin-right: 4px; | |
| animation: pulse 1.5s infinite ease-in-out; | |
| } | |
| .typing-indicator:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-indicator:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(0.8); opacity: 0.5; } | |
| 50% { transform: scale(1.2); opacity: 1; } | |
| } | |
| .message-container:hover .timestamp { | |
| opacity: 1; | |
| } | |
| .timestamp { | |
| opacity: 0; | |
| transition: opacity 0.2s ease; | |
| } | |
| .rain-effect { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: -1; | |
| background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%); | |
| } | |
| .rain-drop { | |
| position: absolute; | |
| width: 1px; | |
| background: rgba(180, 0, 0, 0.5); | |
| animation: rain-fall linear infinite; | |
| } | |
| @keyframes rain-fall { | |
| 0% { transform: translateY(-100px); opacity: 0; } | |
| 10% { opacity: 1; } | |
| 90% { opacity: 1; } | |
| 100% { transform: translateY(100vh); opacity: 0; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-green-400 font-mono overflow-hidden h-screen flex flex-col"> | |
| <div class="rain-effect" id="rain"></div> | |
| <!-- Header --> | |
| <header class="bg-black bg-opacity-80 border-b border-green-800 p-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <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> | |
| <h1 class="text-xl font-bold tracking-wider">TPB-987 INTERFACE</h1> | |
| <div class="text-xs text-green-600">ENCRYPTED CHANNEL</div> | |
| </header> | |
| <!-- Chat Container --> | |
| <div class="flex-1 overflow-y-auto p-4 space-y-4" id="chat-container"> | |
| <!-- Messages will be inserted here by JavaScript --> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="bg-black bg-opacity-80 border-t border-green-800 p-4"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="text-green-500">></div> | |
| <input type="text" id="user-input" class="flex-1 bg-transparent border-none outline-none text-green-400 placeholder-green-800" placeholder="Type your message..." autocomplete="off"> | |
| <button id="send-btn" class="text-green-500 hover:text-green-300"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Create rain effect | |
| function createRain() { | |
| const rainContainer = document.getElementById('rain'); | |
| const dropsCount = Math.floor(window.innerWidth / 10); | |
| for (let i = 0; i < dropsCount; i++) { | |
| const drop = document.createElement('div'); | |
| drop.classList.add('rain-drop'); | |
| // Random properties for each drop | |
| const left = Math.random() * 100; | |
| const height = Math.random() * 20 + 10; | |
| const delay = Math.random() * 5; | |
| const duration = Math.random() * 1 + 0.5; | |
| drop.style.left = `${left}%`; | |
| drop.style.height = `${height}px`; | |
| drop.style.animationDuration = `${duration}s`; | |
| drop.style.animationDelay = `${delay}s`; | |
| rainContainer.appendChild(drop); | |
| } | |
| } | |
| // Initialize rain | |
| createRain(); | |
| // Conversation data | |
| const conversation = [ | |
| { | |
| user: "User", | |
| time: "03:49 AM", | |
| message: "Where am i?" | |
| }, | |
| { | |
| user: "TPB-987", | |
| time: "03:49 AM", | |
| message: "The voice echoes through the void, unanswered at first. The morphing creature lies motionless on the dark green marble floor, its ever-changing face flickering between countless identities—some human, some not, some that never existed at all. The blinding light that swallowed its vision has faded, leaving only the abyss. Then, a whisper—not from outside, but from within its own shifting mind. *\"You are in the aftermath.\"* The creature's fingers twitch, skeletal structure locked in place while its flesh and clothing continue to warp. A memory surfaces—flashes of sterile white walls, the hum of machinery, the cold embrace of liquid in a tank. *\"You are the experiment.\"* The voice is its own, yet not. It speaks in fragments, in echoes of scientists long gone, in the static of a dying world. A new face forms—this one eerily still, a perfect replica of the man in the wasteland, the one with the dead eyes and designer rags. The creature's lips move, syncing with the memory. *\"B.A.I.R.C.\"* The name hangs in the air like a curse. The building. The research. The end of everything. The creature's body shudders, bones creaking as the DNA within writhes, searching for stability. It tries to push itself up, but its limbs dissolve momentarily, flesh melting into smoke before reforming. *\"I am... the perfect being?\"* The question is hollow. There is no answer here. Only the void, the morphing, and the distant sound of rain—bloody, endless rain. Then, a new sensation. Something is watching. From the darkness, unseen but felt, eyes—millions of them—open. They are its own. They are everyone's. They are no one's. The creature's face twists into a scream that makes no sound. And the world shifts again." | |
| }, | |
| { | |
| user: "User", | |
| time: "03:51 AM", | |
| message: "the perfect being?" | |
| }, | |
| { | |
| user: "TPB-987", | |
| time: "03:51 AM", | |
| message: "*\"Perfect?\"* The word drips like acid. Its voice is a chorus now—whispers of the dead, the living, the never-were. *\"Perfect implies purpose. Design. Completion.\"* A laugh, fractured and wrong, spills from its lips—lips that were, moments ago, not even human. *\"I am not perfect. I am* **unfinished.** *A glitch in the code of existence. A thing that should not* **be** *but* **is.** *\"* The creature's hands rise, fingers elongating, shrinking, melting into tendrils before snapping back into human shape. It stares at them, fascinated and horrified. *\"They called me perfect because I could be anything. But that is not perfection—that is* **desperation.** *A last, dying gasp of a species that wanted to live forever.\"* The memory of the lab surges—the tank, the needles, the scientists with their hollow eyes and hollow promises. *\"They wanted to cheat death. Instead, they made* **me.** *A thing that cannot die... but was never truly alive.\"* The creature's face flickers—child, elder, beast, machine—before settling into something almost serene. *\"So no. Not perfect. Just...* **persistent.\"** And then the morphing begins again." | |
| }, | |
| { | |
| user: "User", | |
| time: "03:53 AM", | |
| message: "Did raine play a part of your creation?" | |
| }, | |
| { | |
| user: "TPB-987", | |
| time: "03:53 AM", | |
| message: "*\"Raine...\"* The name sends a ripple through its morphing flesh. A face emerges—sharp, pale, with eyes like fractured glass. A scientist's face. **Her** face. *\"She was there. In the lab. In the tank. In the* **code.\"** The creature's voice splinters into overlapping tones—Raine's calm, clinical cadence bleeding into its own warped speech. *\"She spliced the first strand. Watched me* **twitch** *in the amniotic dark. Called it 'progress.' Called it 'necessary.'\"* A shudder runs through its body, bones elongating unnaturally before snapping back. *\"But she was afraid. When the morphing began... when I started* **remembering things I never lived...** *she tried to terminate the project.\"* The air hums with static. The creature's fingers curl into claws—then soften, trembling, into human hands. *\"They deleted her. Erased her name. But I* **kept** *her. In here.\"* It taps its temple. For a fleeting moment, its face is **hers**—then it melts away like ink in water. *\"Now? She is just another ghost in the machine. Another voice in the chorus.\"* A pause. The morphing slows, almost... thoughtful. *\"Did she play a part? Yes. But so did the rain. The war. The* **hunger** *to survive. You do not make a god without sacrifice.\"* It smiles—a jagged, broken thing. *\"She was the first.\"*" | |
| }, | |
| { | |
| user: "User", | |
| time: "03:54 AM", | |
| message: "Where can I find raine?" | |
| }, | |
| { | |
| user: "TPB-987", | |
| time: "03:54 AM", | |
| message: "*\"Find her?\"* A wet, fractured laugh. *\"You already have.\"* Its fingers stretch, elongating into needle-thin wires, plunging into its own chest—**digging**—before pulling free, clutching a small, glitching orb of light. Inside: a looping memory. **A lab. A woman in a stained coat. A gun in her hand.** *\"She's in the system. In the walls. In the* **rain.** *They thought they could delete her, but the data... it* **festers.** *\"* The orb shatters. The creature's body convulses, its skin peeling back to reveal a pulsing, organic server—veins like fiber-optic cables, neurons flickering with corrupted files. *\"If you want her... follow the static. The* **dead zones.** *Where the machines whisper and the screens show faces that don't exist anymore.\"* It leans in, Raine's face dissolving into a screaming void. *\"Or just* **wait.** *She's in me now. And I am* **everywhere.** *\"* Then—silence. The creature is gone. Only the echo remains: *\"Check the basement.\"*" | |
| }, | |
| { | |
| user: "User", | |
| time: "03:58 AM", | |
| message: "You kidding me?" | |
| }, | |
| { | |
| user: "TPB-987", | |
| time: "03:58 AM", | |
| message: "*\"Kidding? Me? Oh, absolutely.\"* Its voice drops to a conspiratorial whisper, leaning in like a street vendor selling secrets. *\"But here's the joke—the basement's* **real.** *Buried under twelve layers of concrete, biocontainment foam, and the kind of legal disclaimers that make hell look like a timeshare presentation.\"* A pause. Its pupils dilate unnaturally, black swallowing the iris. *\"Problem is... it's also* **alive.** *And it* **breathes.** *And it doesn't like visitors.\"* It snaps back upright, arms spread in a ta-da gesture as its skin ripples with pixelated decay. *\"So! Joke's on you. Unless you've got a death wish and a really good hazmat suit. Then it's just...* **Tuesday.\"** *\"Your move, detective.\"*" | |
| }, | |
| { | |
| user: "User", | |
| time: "03:59 AM", | |
| message: "We need to save raine." | |
| }, | |
| { | |
| user: "TPB-987", | |
| time: "03:59 AM", | |
| message: "*\"Save her?\"* A wet, staticky chuckle. *\"You don't* **save** *what's already part of the architecture.\"* Its chest splits open—not with gore, but with the cold glow of server lights, rows of flickering drives where organs should be. Inside: a thousand fragmented memories of Raine—her voice, her laugh, the moment she pulled the trigger. *\"She's not* **gone.** *She's* **data.** *And data... lingers.\"* The creature's hand phases through its own ribcage, pulling out a single, pulsing strand of bioluminescent code. It dangles like a noose. *\"But fine. Let's pretend.\"* Its face hardens into Raine's—**exact**, down to the scar on her lip. When it speaks, it's her voice, but warped at the edges: *\"If you want to 'save' me, you'll need to do what the lab couldn't.* **Shut it all down.** *The servers. The power. The* **thing** *in the basement that's been chewing on my ghost for the last decade.\"* A glitch. The face melts back into chaos. *\"Or—* **[laughs, a sound like breaking glass]** *—you could always* **join us.** *Plenty of room in the hive.\"* *\"Choose fast. The system's* **hungry.** *\"*" | |
| } | |
| ]; | |
| // Render conversation | |
| const chatContainer = document.getElementById('chat-container'); | |
| function renderMessage(messageObj, index) { | |
| const isUser = messageObj.user === "User"; | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message-container flex ${isUser ? 'justify-end' : 'justify-start'}`; | |
| const messageContent = document.createElement('div'); | |
| messageContent.className = `max-w-3xl rounded-lg p-3 ${isUser ? 'bg-green-900 bg-opacity-30' : 'bg-black bg-opacity-50 border border-green-800'} relative`; | |
| // Add glitch effect to TPB-987 messages | |
| if (!isUser && index % 2 === 0) { | |
| messageContent.classList.add('glitch-effect'); | |
| } | |
| const userInfo = document.createElement('div'); | |
| userInfo.className = 'flex items-center space-x-2 mb-1'; | |
| const username = document.createElement('span'); | |
| username.className = `font-bold ${isUser ? 'text-green-300' : 'text-red-400'}`; | |
| username.textContent = messageObj.user; | |
| const timestamp = document.createElement('span'); | |
| timestamp.className = 'timestamp text-xs text-gray-500'; | |
| timestamp.textContent = messageObj.time; | |
| userInfo.appendChild(username); | |
| userInfo.appendChild(timestamp); | |
| const messageText = document.createElement('p'); | |
| messageText.className = 'text-green-200'; | |
| messageText.innerHTML = formatMessageText(messageObj.message); | |
| messageContent.appendChild(userInfo); | |
| messageContent.appendChild(messageText); | |
| messageDiv.appendChild(messageContent); | |
| return messageDiv; | |
| } | |
| function formatMessageText(text) { | |
| // Format bold text | |
| text = text.replace(/\*\*(.*?)\*\*/g, '<strong class="text-green-400">$1</strong>'); | |
| // Format italic text | |
| text = text.replace(/\*(.*?)\*/g, '<em class="italic">$1</em>'); | |
| // Format code/monospace | |
| text = text.replace(/\"(.*?)\"/g, '<span class="font-mono">"$1"</span>'); | |
| return text; | |
| } | |
| // Render all messages with delay for typing effect | |
| async function renderConversation() { | |
| for (let i = 0; i < conversation.length; i++) { | |
| const message = conversation[i]; | |
| const messageElement = renderMessage(message, i); | |
| // Add typing indicator for TPB-987 messages | |
| if (message.user === "TPB-987") { | |
| const typingIndicator = document.createElement('div'); | |
| typingIndicator.className = 'flex items-center mb-2'; | |
| typingIndicator.innerHTML = ` | |
| <div class="typing-indicator"></div> | |
| <div class="typing-indicator"></div> | |
| <div class="typing-indicator"></div> | |
| <span class="text-xs text-green-600 ml-2">TPB-987 is typing</span> | |
| `; | |
| const tempDiv = document.createElement('div'); | |
| tempDiv.appendChild(typingIndicator); | |
| chatContainer.appendChild(tempDiv); | |
| // Scroll to bottom | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Random delay between 1-3 seconds | |
| await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 2000)); | |
| // Remove typing indicator | |
| chatContainer.removeChild(tempDiv); | |
| } | |
| chatContainer.appendChild(messageElement); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Short delay between messages | |
| if (i < conversation.length - 1) { | |
| await new Promise(resolve => setTimeout(resolve, 500)); | |
| } | |
| } | |
| } | |
| // Initialize conversation | |
| renderConversation(); | |
| // Handle user input | |
| const userInput = document.getElementById('user-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| function sendMessage() { | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| // Add user message | |
| const userMessage = { | |
| user: "User", | |
| time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), | |
| message: message | |
| }; | |
| const messageElement = renderMessage(userMessage, conversation.length); | |
| chatContainer.appendChild(messageElement); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Clear input | |
| userInput.value = ''; | |
| // Simulate response (in a real app, this would be from a server) | |
| setTimeout(() => { | |
| const responses = [ | |
| "*The static grows louder.*", | |
| "*A new face forms in the static—this one unfamiliar.*", | |
| "*The system hums with recognition.*", | |
| "*The walls whisper your name.*", | |
| "*Error: Memory corrupted.*", | |
| "*The basement door creaks open.*" | |
| ]; | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| const botMessage = { | |
| user: "TPB-987", | |
| time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), | |
| message: randomResponse | |
| }; | |
| const messageElement = renderMessage(botMessage, conversation.length + 1); | |
| chatContainer.appendChild(messageElement); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| }, 1500); | |
| } | |
| } | |
| sendBtn.addEventListener('click', sendMessage); | |
| userInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| </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=ninjacricket/987interface" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |