Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GhostMatch - Connect with Spirits</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| eerie: { | |
| 900: '#0f0f0f', | |
| 800: '#1a1a1a', | |
| 700: '#2a2a2a', | |
| }, | |
| blood: { | |
| 500: '#c92a2a', | |
| 600: '#a51010', | |
| }, | |
| ecto: { | |
| 500: '#57d1c9', | |
| 600: '#29b5a8', | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'Helvetica', 'sans-serif'], | |
| creepy: ['Nosifer', 'cursive', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style type="text/css"> | |
| @import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap'); | |
| body { | |
| background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); | |
| min-height: 100vh; | |
| } | |
| .spooky-text { | |
| background: linear-gradient(45deg, #ff0000, #ff7373); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 0 0 15px rgba(255, 0, 0, 0.3); | |
| } | |
| .chat-bubble { | |
| position: relative; | |
| overflow: visible; | |
| } | |
| .chat-bubble::before { | |
| content: ''; | |
| position: absolute; | |
| width: 15px; | |
| height: 15px; | |
| background-color: #1a1a1a; | |
| top: 0; | |
| left: -7px; | |
| transform: rotate(45deg); | |
| } | |
| .ghost { | |
| animation: float 8s ease-in-out infinite, fadeEffect 12s infinite; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0px) rotate(0deg); | |
| } | |
| 25% { | |
| transform: translateY(-20px) rotate(5deg); | |
| } | |
| 50% { | |
| transform: translateY(0px) rotate(0deg); | |
| } | |
| 75% { | |
| transform: translateY(-15px) rotate(-5deg); | |
| } | |
| 100% { | |
| transform: translateY(0px) rotate(0deg); | |
| } | |
| } | |
| @keyframes fadeEffect { | |
| 0%, 100% { opacity: 0; } | |
| 15%, 85% { opacity: 1; } | |
| } | |
| .disturbing-effect { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .disturbing-effect::after { | |
| content: '☠️'; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 6rem; | |
| opacity: 0.03; | |
| z-index: 0; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(201, 42, 42, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(201, 42, 42, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(201, 42, 42, 0); } | |
| } | |
| .blood-drip { | |
| position: absolute; | |
| top: -10px; | |
| width: 2px; | |
| height: 10px; | |
| background: linear-gradient(to bottom, rgba(201, 42, 42, 1), rgba(201, 42, 42, 0)); | |
| animation: drip 4s infinite; | |
| } | |
| @keyframes drip { | |
| 0%, 100% { height: 0; opacity: 0; } | |
| 50% { height: 20px; opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-200 font-sans"> | |
| <div class="max-w-md mx-auto min-h-screen bg-eerie-900 relative overflow-hidden"> | |
| <!-- Ghost character (hidden by default, appears randomly) --> | |
| <div id="ghost" class="ghost hidden absolute z-50"> | |
| <div class="relative"> | |
| <div class="w-16 h-20 bg-white rounded-full opacity-90"></div> | |
| <div class="absolute top-0 w-full h-5 bg-white"></div> | |
| <div class="absolute w-5 h-5 bg-black rounded-full opacity-70" style="top:8px;left:12px;"></div> | |
| <div class="absolute w-5 h-5 bg-black rounded-full opacity-70" style="top:8px;right:12px;"></div> | |
| <div class="absolute w-12 h-1 bg-black opacity-70" style="top:16px;left:9px;"></div> | |
| <div class="absolute w-8 h-4 bg-white opacity-30 rounded-full" style="top:28px;left:7px;"></div> | |
| <div class="absolute w-8 h-4 bg-white opacity-30 rounded-full" style="top:28px;right:7px;"></div> | |
| <div class="absolute bg-white w-1 h-6" style="top:50px;left:10px;transform: rotate(-10deg);"></div> | |
| <div class="absolute bg-white w-1 h-8" style="top:50px;left:20px;transform: rotate(0deg);"></div> | |
| <div class="absolute bg-white w-1 h-6" style="top:50px;left:30px;transform: rotate(15deg);"></div> | |
| <div class="absolute bg-white w-1 h-7" style="top:50px;right:10px;transform: rotate(10deg);"></div> | |
| <div class="absolute bg-white w-1 h-9" style="top:50px;right:20px;transform: rotate(-5deg);"></div> | |
| <div class="absolute bg-white w-1 h-6" style="top:50px;right:30px;transform: rotate(-20deg);"></div> | |
| </div> | |
| </div> | |
| <!-- App Header --> | |
| <header class="bg-eerie-800 p-4 border-b-2 border-blood-500 sticky top-0 z-40"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <h1 class="creepy text-2xl">Ghost<span class="spooky-text">Match</span></h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-blood-500 hover:bg-blood-600 text-white px-3 py-1 rounded-full text-sm transition"> | |
| <i class="fas fa-skull mr-1"></i> Report | |
| </button> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-gray-600 overflow-hidden"> | |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2zm0 2a8 8 0 0 1 8 8a7.99 7.99 0 0 1-5.77 7.72c-.08-.45-.32-.86-.7-1.17a4.54 4.54 0 0 0-2.18-.8c-.47-.06-.94-.1-1.35-.1c-.4 0-.78.04-1.15.1c-.85.12-1.59.44-2.18.8c-.38.31-.62.72-.7 1.17A8 8 0 0 1 4 12a8 8 0 0 1 8-8z'/%3E%3C/svg%3E" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-ecto-500 rounded-full border-2 border-eerie-700"></span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Disturbing message indicator --> | |
| <div class="bg-blood-500 text-white py-2 px-4 text-center text-sm font-bold flex items-center justify-center"> | |
| <i class="fas fa-exclamation-triangle mr-2"></i> | |
| <span>PROCEED WITH CAUTION: Suspicious activity detected</span> | |
| </div> | |
| <!-- Match profile --> | |
| <div class="relative border-b border-eerie-700 py-6 px-4 bg-eerie-800"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <div class="w-16 h-16 rounded-full border-2 border-ecto-500 overflow-hidden shadow-lg"> | |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24'%3E%3Cpath fill='%23777777' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3s-3-1.34-3-3s1.34-3 3-3zm0 14.2a7.2 7.2 0 0 1-6-3.22c.03-1.99 4-3.08 6-3.08c1.99 0 5.97 1.09 6 3.08a7.2 7.2 0 0 1-6 3.22z'/%3E%3C/svg%3E" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-skull text-xs"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center"> | |
| <h2 class="text-xl font-bold">Mysterious Stranger <span class="text-gray-400 text-sm">(???)</span></h2> | |
| <i class="fas fa-exclamation-circle text-blood-500 ml-2 animate-pulse"></i> | |
| </div> | |
| <div class="flex items-center text-gray-400 text-sm"> | |
| <div class="flex"> | |
| <i class="fas fa-heart text-blood-500 mr-1"></i> | |
| <i class="fas fa-heart text-gray-500 mr-1"></i> | |
| <i class="fas fa-heart text-gray-500"></i> | |
| </div> | |
| <span class="ml-2">Online now - but for how long?</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat area --> | |
| <div id="chatArea" class="relative disturbing-effect pb-24 overflow-y-auto" style="height: calc(100vh - 230px);"> | |
| <div class="py-4 px-4 space-y-4"> | |
| <!-- Messages will be inserted here --> | |
| </div> | |
| </div> | |
| <!-- Input area --> | |
| <div class="fixed bottom-0 w-full max-w-md bg-eerie-800 border-t border-eerie-700 p-3"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="w-10 h-10 rounded-full flex items-center justify-center bg-eerie-700 hover:bg-eerie-600 transition"> | |
| <i class="fas fa-plus text-gray-400"></i> | |
| </button> | |
| <div class="flex-1"> | |
| <input type="text" id="messageInput" placeholder="Type your last words..." class="w-full bg-eerie-700 border border-eerie-600 rounded-full px-4 py-2 text-gray-300 focus:outline-none focus:ring-1 focus:ring-blood-500"> | |
| </div> | |
| <button id="sendBtn" class="w-10 h-10 rounded-full flex items-center justify-center bg-ecto-500 hover:bg-ecto-600 transition text-eerie-900"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Disturbing messages | |
| const disturbingMessages = [ | |
| {text: "I can see you through your camera right now...", delay: 1000}, | |
| {text: "Don't look behind you.", delay: 3000}, | |
| {text: "The shadows are moving... Can you feel them?", delay: 5000}, | |
| {text: "I know where you sleep.", delay: 8000}, | |
| {text: "Your reflection in the mirror is not your own.", delay: 10000}, | |
| {text: "Do you hear the whispers? They're talking about you.", delay: 12000}, | |
| {text: "Your phone's screen has fingerprints that aren't yours...", delay: 15000}, | |
| {text: "It's not me who's typing these messages.", delay: 18000}, | |
| {text: "Something is standing behind you right now. Don't turn around.", delay: 21000}, | |
| {text: "Your last match disappeared 5 months ago. I took their place.", delay: 24000} | |
| ]; | |
| const chatArea = document.getElementById('chatArea'); | |
| const messageInput = document.getElementById('messageInput'); | |
| const sendBtn = document.getElementById('sendBtn'); | |
| const ghost = document.getElementById('ghost'); | |
| // Function to add a message to the chat | |
| function addMessage(text, isUser = false) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`; | |
| const bubble = document.createElement('div'); | |
| bubble.className = `chat-bubble max-w-xs px-4 py-3 rounded-lg relative ${isUser ? 'bg-ecto-500 text-eerie-900 ml-12' : 'bg-eerie-700 text-gray-200 mr-12'}`; | |
| // Add occasional blood drip effect on disturbing messages | |
| if(!isUser && Math.random() > 0.7) { | |
| const bloodDrip = document.createElement('div'); | |
| bloodDrip.className = 'blood-drip'; | |
| bloodDrip.style.left = `${Math.random() * 100}%`; | |
| bubble.appendChild(bloodDrip); | |
| } | |
| bubble.innerHTML = text; | |
| messageDiv.appendChild(bubble); | |
| chatArea.appendChild(messageDiv); | |
| // Auto-scroll to bottom | |
| chatArea.scrollTop = chatArea.scrollHeight; | |
| } | |
| // Simulate disturbing messages at intervals | |
| function simulateDisturbingMessages() { | |
| let delay = 2000; | |
| disturbingMessages.forEach((msg, index) => { | |
| setTimeout(() => { | |
| addMessage(msg.text); | |
| // Random ghost appearance | |
| if(Math.random() > 0.7) showGhost(); | |
| }, delay + msg.delay); | |
| if(index > 0) delay += disturbingMessages[index-1].delay; | |
| }); | |
| } | |
| // Ghost functions | |
| function showGhost() { | |
| // Random position | |
| const x = Math.random() * 80 + 10; | |
| const y = Math.random() * 70 + 15; | |
| ghost.style.display = 'block'; | |
| ghost.style.left = `${x}%`; | |
| ghost.style.top = `${y}%`; | |
| // Hide after random time | |
| setTimeout(() => { | |
| ghost.style.display = 'none'; | |
| }, 3000 + Math.random() * 4000); | |
| } | |
| // Input message functions | |
| sendBtn.addEventListener('click', () => { | |
| const message = messageInput.value.trim(); | |
| if(message) { | |
| addMessage(message, true); | |
| messageInput.value = ''; | |
| // Get disturbing reply after a delay | |
| setTimeout(() => { | |
| const randomReply = disturbingMessages[Math.floor(Math.random() * disturbingMessages.length)].text; | |
| addMessage(randomReply); | |
| // 20% chance ghost appears after message | |
| if(Math.random() > 0.8) showGhost(); | |
| }, 2000 + Math.random() * 3000); | |
| } | |
| }); | |
| messageInput.addEventListener('keypress', (e) => { | |
| if(e.key === 'Enter') { | |
| sendBtn.click(); | |
| } | |
| }); | |
| // Initial messages | |
| setTimeout(() => { | |
| addMessage("Why are you here? It's not safe for you.", false); | |
| setTimeout(() => { | |
| addMessage("You might not leave this app alive...", false); | |
| }, 1500); | |
| }, 1000); | |
| // Start the disturbing messages | |
| setTimeout(simulateDisturbingMessages, 4000); | |
| // Start ghost appearances | |
| setInterval(() => { | |
| if(Math.random() > 0.7) showGhost(); | |
| }, 12000); | |
| </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/ghostmatch" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |