Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SpookyChat - Dating That Haunts You</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=Creepster&family=Poppins:wght@300;400;600&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f0e17; | |
| color: #fff; | |
| } | |
| .creepster { | |
| font-family: 'Creepster', cursive; | |
| } | |
| .message-entering { | |
| animation: fadeInScale 0.3s ease-out; | |
| } | |
| @keyframes fadeInScale { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.8); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| .spooky-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .spooky-scrollbar::-webkit-scrollbar-track { | |
| background: #1f1d36; | |
| } | |
| .spooky-scrollbar::-webkit-scrollbar-thumb { | |
| background: #6a2c70; | |
| border-radius: 3px; | |
| } | |
| .pulse-glow { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(255, 69, 69, 0.4); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(255, 69, 69, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(255, 69, 69, 0); | |
| } | |
| } | |
| .typing-indicator span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| background-color: #ff6666; | |
| border-radius: 50%; | |
| margin: 0 2px; | |
| animation: bounce 1.4s infinite ease-in-out both; | |
| } | |
| .typing-indicator span:nth-child(1) { | |
| animation-delay: -0.32s; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation-delay: -0.16s; | |
| } | |
| @keyframes bounce { | |
| 0%, 80%, 100% { | |
| transform: scale(0); | |
| } | |
| 40% { | |
| transform: scale(1); | |
| } | |
| } | |
| .ghost-btn:hover::before { | |
| content: '👻'; | |
| margin-right: 5px; | |
| } | |
| .blood-drip { | |
| position: relative; | |
| } | |
| .blood-drip::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(to right, transparent, #ff3d3d, transparent); | |
| opacity: 0.7; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-black bg-opacity-80 py-4 px-6 border-b-2 border-red-900"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-skull text-3xl text-red-600"></i> | |
| <h1 class="creepster text-3xl text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-purple-600"> | |
| SpookyChat | |
| </h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="relative ghost-btn bg-red-900 hover:bg-red-800 text-white px-4 py-2 rounded-full transition-all duration-300"> | |
| Premium Coffins | |
| </button> | |
| <div class="relative group"> | |
| <img src="https://xsgames.co/randomusers/avatar.php?g=female&seed=haunted" | |
| class="w-10 h-10 rounded-full border-2 border-red-600 cursor-pointer" | |
| alt="Profile"> | |
| <div class="absolute right-0 mt-2 w-40 bg-gray-900 border border-red-900 rounded-md shadow-lg hidden group-hover:block z-10"> | |
| <a href="#" class="block px-4 py-2 text-white hover:bg-red-900">Profile</a> | |
| <a href="#" class="block px-4 py-2 text-white hover:bg-red-900">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-white hover:bg-red-900">Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="w-80 bg-gray-900 border-r border-gray-800 flex flex-col"> | |
| <div class="p-4 border-b border-gray-800"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search your nightmare..." | |
| class="w-full bg-gray-800 border border-gray-700 text-white px-4 py-2 rounded-full focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500"> | |
| <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto spooky-scrollbar"> | |
| <!-- Matches List --> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-red-400 mb-4">Your Hauntings <span class="text-xs bg-red-900 text-white px-2 py-1 rounded-full ml-1">5 new</span></h3> | |
| <!-- Match Item --> | |
| <div class="flex items-center space-x-3 p-3 hover:bg-gray-800 rounded-lg cursor-pointer active-match"> | |
| <div class="relative"> | |
| <img src="https://xsgames.co/randomusers/avatar.php?g=female&seed=vampire" | |
| class="w-12 h-12 rounded-full border-2 border-purple-500"> | |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-900"></span> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium text-white">Vampira</h4> | |
| <span class="text-xs text-gray-400">2 mins</span> | |
| </div> | |
| <p class="text-sm text-gray-300 truncate w-40">I can hear your heartbeat from here...</p> | |
| </div> | |
| </div> | |
| <!-- Match Item --> | |
| <div class="flex items-center space-x-3 p-3 hover:bg-gray-800 rounded-lg cursor-pointer"> | |
| <div class="relative"> | |
| <img src="https://xsgames.co/randomusers/avatar.php?g=male&seed=werewolf" | |
| class="w-12 h-12 rounded-full border-2 border-yellow-500"> | |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-900"></span> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium text-white">Lycan</h4> | |
| <span class="text-xs text-gray-400">12 mins</span> | |
| </div> | |
| <p class="text-sm text-gray-300 truncate w-40">Nice moon tonight... perfect for a first date?</p> | |
| </div> | |
| </div> | |
| <!-- Match Item --> | |
| <div class="flex items-center space-x-3 p-3 hover:bg-gray-800 rounded-lg cursor-pointer"> | |
| <div class="relative"> | |
| <img src="https://xsgames.co/randomusers/avatar.php?g=female&seed=witch" | |
| class="w-12 h-12 rounded-full border-2 border-green-500"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium text-white">Hex</h4> | |
| <span class="text-xs text-gray-400">45 mins</span> | |
| </div> | |
| <p class="text-sm text-gray-300 truncate w-40">I put a spell on you... did you feel it?</p> | |
| </div> | |
| </div> | |
| <!-- Match Item --> | |
| <div class="flex items-center space-x-3 p-3 hover:bg-gray-800 rounded-lg cursor-pointer"> | |
| <div class="relative"> | |
| <img src="https://xsgames.co/randomusers/avatar.php?g=male&seed=zombie" | |
| class="w-12 h-12 rounded-full border-2 border-gray-500"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium text-white">Rot</h4> | |
| <span class="text-xs text-gray-400">2 hrs</span> | |
| </div> | |
| <p class="text-sm text-gray-300 truncate w-40">Your brain looks delicious... wanna meet?</p> | |
| </div> | |
| </div> | |
| <!-- Match Item --> | |
| <div class="flex items-center space-x-3 p-3 hover:bg-gray-800 rounded-lg cursor-pointer"> | |
| <div class="relative"> | |
| <img src="https://xsgames.co/randomusers/avatar.php?g=female&seed=ghost" | |
| class="w-12 h-12 rounded-full border-2 border-blue-300 opacity-80"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium text-white">Spectra</h4> | |
| <span class="text-xs text-gray-400">1 day</span> | |
| </div> | |
| <p class="text-sm text-gray-300 truncate w-40">I'm watching you sleep right now.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-800"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://xsgames.co/randomusers/avatar.php?g=female&seed=haunted" | |
| class="w-10 h-10 rounded-full border-2 border-red-600"> | |
| <div> | |
| <p class="font-medium">GraveDweller</p> | |
| <p class="text-xs text-gray-400">Online</p> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Area --> | |
| <div class="flex-1 flex flex-col bg-gray-900"> | |
| <!-- Chat Header --> | |
| <div class="border-b border-gray-800 p-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://xsgames.co/randomusers/avatar.php?g=female&seed=vampire" | |
| class="w-10 h-10 rounded-full border-2 border-purple-500"> | |
| <div> | |
| <h3 class="font-semibold text-white">Vampira</h3> | |
| <div class="flex items-center"> | |
| <span class="w-2 h-2 bg-green-500 rounded-full mr-1"></span> | |
| <span class="text-xs text-gray-400">Typing...</span> | |
| <div class="typing-indicator ml-1"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-phone-alt"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-video"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Messages --> | |
| <div id="messages" class="flex-1 overflow-y-auto p-4 space-y-4 spooky-scrollbar"> | |
| <!-- Incoming Message --> | |
| <div class="flex items-start space-x-2 message-entering"> | |
| <img src="https://xsgames.co/randomusers/avatar.php?g=female&seed=vampire" | |
| class="w-8 h-8 rounded-full border border-purple-500 mt-1"> | |
| <div> | |
| <div class="bg-gray-800 text-white p-3 rounded-lg rounded-tl-none max-w-xs"> | |
| <p>I smell your blood... it's intoxicating.</p> | |
| </div> | |
| <span class="text-xs text-gray-500 mt-1 block">12:34 AM</span> | |
| </div> | |
| </div> | |
| <!-- Outgoing Message --> | |
| <div class="flex items-start justify-end space-x-2 message-entering"> | |
| <div> | |
| <div class="bg-red-900 text-white p-3 rounded-lg rounded-tr-none blood-drip"> | |
| <p>Would it be weird if I asked you to bite me?</p> | |
| </div> | |
| <span class="text-xs text-gray-500 mt-1 block text-right">12:35 AM</span> | |
| </div> | |
| <img src="https://xsgames.co/randomusers/avatar.php?g=female&seed=haunted" | |
| class="w-8 h-8 rounded-full border border-red-600 mt-1"> | |
| </div> | |
| <!-- Read Receipt --> | |
| <div class="text-center my-2"> | |
| <span class="text-xs text-gray-500 bg-gray-900 px-2 py-1 rounded-full">Read</span> | |
| </div> | |
| <!-- Incoming Message --> | |
| <div class="flex items-start space-x-2 message-entering"> | |
| <img src="https://xsgames.co/randomusers/avatar.php?g=female&seed=vampire" | |
| class="w-8 h-8 rounded-full border border-purple-500 mt-1"> | |
| <div> | |
| <div class="bg-gray-800 text-white p-3 rounded-lg rounded-tl-none max-w-xs"> | |
| <p>Not at all, pet. I was going to ask anyway.</p> | |
| <p class="mt-1">Shall we arrange a night for it? The graveyard at midnight?</p> | |
| </div> | |
| <span class="text-xs text-gray-500 mt-1 block">12:36 AM</span> | |
| </div> | |
| </div> | |
| <!-- Typing Indicator --> | |
| <div id="typingIndicator" class="flex items-start space-x-2"> | |
| <img src="https://xsgames.co/randomusers/avatar.php?g=female&seed=vampire" | |
| class="w-8 h-8 rounded-full border border-purple-500 mt-1"> | |
| <div> | |
| <div class="bg-gray-800 text-white p-3 rounded-lg rounded-tl-none max-w-xs"> | |
| <div class="typing-indicator"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message Input --> | |
| <div class="border-t border-gray-800 p-4"> | |
| <form id="messageForm" class="flex items-center space-x-2"> | |
| <div class="flex-1 bg-gray-800 rounded-full pl-4 pr-2 py-2 flex items-center"> | |
| <input type="text" | |
| id="messageInput" | |
| placeholder="Send a spooky message..." | |
| class="flex-1 bg-transparent text-white focus:outline-none"> | |
| <div class="flex space-x-2 text-gray-400"> | |
| <button type="button" class="hover:text-red-500"> | |
| <i class="far fa-grin-squint-tears"></i> | |
| </button> | |
| <button type="button" class="hover:text-red-500"> | |
| <i class="fas fa-skull"></i> | |
| </button> | |
| <button type="button" class="hover:text-red-500"> | |
| <i class="fas fa-coffin"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button type="submit" | |
| class="bg-red-900 hover:bg-red-800 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center pulse-glow"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Profile Sidebar --> | |
| <div class="w-80 bg-gray-900 border-l border-gray-800 p-6 hidden lg:block"> | |
| <div class="text-center mb-6"> | |
| <div class="relative mx-auto w-32 h-32 mb-4"> | |
| <img src="https://xsgames.co/randomusers/avatar.php?g=female&seed=vampire" | |
| class="w-full h-full rounded-full border-4 border-purple-500 object-cover"> | |
| <span class="absolute bottom-2 right-2 w-4 h-4 bg-green-500 rounded-full border-2 border-gray-900"></span> | |
| </div> | |
| <h2 class="creepster text-2xl text-purple-400 mb-1">Vampira</h2> | |
| <p class="text-gray-400 text-sm mb-3">Your eternal nightmare</p> | |
| <div class="flex justify-center space-x-2"> | |
| <span class="text-xs bg-red-900 text-white px-2 py-1 rounded-full">Vampire</span> | |
| <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">614 years old</span> | |
| </div> | |
| </div> | |
| <div class="space-y-4 mb-6"> | |
| <div> | |
| <h3 class="text-red-400 mb-2 flex items-center"> | |
| <i class="fas fa-book-dead mr-2"></i> | |
| Bio | |
| </h3> | |
| <p class="text-gray-300 text-sm"> | |
| "Seductive predator of the night. Looking for someone to share eternity with. | |
| Must have tasty blood in their veins and no allergies to coffins." | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-red-400 mb-2 flex items-center"> | |
| <i class="fas fa-flask mr-2"></i> | |
| Blood Type | |
| </h3> | |
| <p class="text-gray-300 text-sm">O-negative (favorite)</p> | |
| </div> | |
| <div> | |
| <h3 class="text-red-400 mb-2 flex items-center"> | |
| <i class="fas fa-cross mr-2"></i> | |
| Weaknesses | |
| </h3> | |
| <p class="text-gray-300 text-sm">Garlic, sunlight, holy water (it gives me hives)</p> | |
| </div> | |
| <div> | |
| <h3 class="text-red-400 mb-2 flex items-center"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| Turned On | |
| </h3> | |
| <p class="text-gray-300 text-sm">October 31, 1409</p> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-red-400 mb-3 flex items-center"> | |
| <i class="fas fa-images mr-2"></i> | |
| Spooky Pics | |
| </h3> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <div class="aspect-square bg-gray-800 rounded-lg overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/300x300/?vampire,gothic" | |
| class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" | |
| alt="Profile photo"> | |
| </div> | |
| <div class="aspect-square bg-gray-800 rounded-lg overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/300x300/?castle,night" | |
| class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" | |
| alt="Profile photo"> | |
| </div> | |
| <div class="aspect-square bg-gray-800 rounded-lg overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/300x300/?coffin,gothic" | |
| class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" | |
| alt="Profile photo"> | |
| </div> | |
| <div class="aspect-square bg-gray-800 rounded-lg overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/300x300/?bat,night" | |
| class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" | |
| alt="Profile photo"> | |
| </div> | |
| <div class="aspect-square bg-gray-800 rounded-lg overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/300x300/?graveyard,fog" | |
| class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" | |
| alt="Profile photo"> | |
| </div> | |
| <div class="aspect-square bg-gray-800 rounded-lg overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/300x300/?blood,red" | |
| class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" | |
| alt="Profile photo"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const messageForm = document.getElementById('messageForm'); | |
| const messageInput = document.getElementById('messageInput'); | |
| const messagesContainer = document.getElementById('messages'); | |
| const typingIndicator = document.getElementById('typingIndicator'); | |
| // Scary message examples | |
| const scaryMessages = [ | |
| "I can see your shadow moving even when you're standing still...", | |
| "Your heartbeat sounds delicious from here.", | |
| "Do you believe in ghosts? One is watching you right now.", | |
| "I can't wait to count your teeth... from the inside.", | |
| "Your hair would look beautiful in my collection.", | |
| "I dream about your bones... they're so symmetrical.", | |
| "Do you have a will prepared? Just curious.", | |
| "I learned how to make your skin into a lampshade.", | |
| "Your scent is intoxicating... like fresh fear.", | |
| "I found where you live. Beautiful curtains.", | |
| "Your screams would make a lovely ringtone.", | |
| "I've never tasted blood like yours before.", | |
| "I left something under your bed... don't look.", | |
| "We'll be together forever... in my basement.", | |
| "You look perfect for my human taxidermy collection.", | |
| "I dug up a grave for us to share tonight.", | |
| "Your shadows have been talking to me about you.", | |
| "Sweet dreams... I'll be watching.", | |
| "Let's play hide and seek... I'll find you.", | |
| "I've been studying the best ways to preserve eyes.", | |
| "Did you know the human body has 206 bones? Let's count yours.", | |
| "You smell different when you're afraid... I like it.", | |
| "I would never hurt you... much.", | |
| "Your veins are like a roadmap to heaven." | |
| ]; | |
| // Function to get a random scary message | |
| function getRandomScaryMessage() { | |
| return scaryMessages[Math.floor(Math.random() * scaryMessages.length)]; | |
| } | |
| // Function to scroll to bottom of messages | |
| function scrollToBottom() { | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| } | |
| // Function to add a message to the chat | |
| function addMessage(content, isOutgoing = false) { | |
| const messageTime = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); | |
| const messageElement = document.createElement('div'); | |
| messageElement.className = `flex items-start space-x-2 message-entering`; | |
| if (isOutgoing) { | |
| messageElement.className += ' justify-end'; | |
| } | |
| const avatar = isOutgoing | |
| ? `<img src="https://xsgames.co/randomusers/avatar.php?g=female&seed=haunted" class="w-8 h-8 rounded-full border border-red-600 mt-1">` | |
| : `<img src="https://xsgames.co/randomusers/avatar.php?g=female&seed=vampire" class="w-8 h-8 rounded-full border border-purple-500 mt-1">`; | |
| const messageBubble = isOutgoing | |
| ? `<div class="bg-red-900 text-white p-3 rounded-lg rounded-tr-none blood-drip">${content}</div>` | |
| : `<div class="bg-gray-800 text-white p-3 rounded-lg rounded-tl-none max-w-xs">${content}</div>`; | |
| messageElement.innerHTML = isOutgoing | |
| ? ` | |
| <div> | |
| ${messageBubble} | |
| <span class="text-xs text-gray-500 mt-1 block text-right">${messageTime}</span> | |
| </div> | |
| ${avatar} | |
| ` | |
| : ` | |
| ${avatar} | |
| <div> | |
| ${messageBubble} | |
| <span class="text-xs text-gray-500 mt-1 block">${messageTime}</span> | |
| </div> | |
| `; | |
| messagesContainer.insertBefore(messageElement, typingIndicator); | |
| scrollToBottom(); | |
| } | |
| // Function to show typing indicator with random delay | |
| function showTypingIndicator() { | |
| typingIndicator.style.display = 'flex'; | |
| scrollToBottom(); | |
| const delay = 2000 + Math.random() * 3000; | |
| setTimeout(() => { | |
| typingIndicator.style.display = 'none'; | |
| addMessage(getRandomScaryMessage(), false); | |
| }, delay); | |
| } | |
| // Handle message submission | |
| messageForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const message = messageInput.value.trim(); | |
| if (message) { | |
| addMessage(message, true); | |
| // Clear input after sending | |
| messageInput.value = ''; | |
| // Show typing indicator and reply after delay | |
| setTimeout(() => { | |
| showTypingIndicator(); | |
| }, 500); | |
| } | |
| }); | |
| // Initialize with some messages | |
| setTimeout(() => { | |
| addMessage("The voices are right... you're different.", false); | |
| }, 500); | |
| setTimeout(() => { | |
| addMessage("I think there's something under your bed.", true); | |
| }, 1500); | |
| setTimeout(() => { | |
| showTypingIndicator(); | |
| }, 2500); | |
| // Set focus to input when clicking on chat area | |
| messagesContainer.addEventListener('click', function() { | |
| messageInput.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=Agelly/spookychat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |