| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Haunting Messenger</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: { |
| 'dark-primary': '#121212', |
| 'dark-secondary': '#1a1a1a', |
| 'accent': '#6e44ff', |
| 'accent-hover': '#5c35e0', |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| * { |
| font-family: 'Inter', sans-serif; |
| transition: all 0.3s ease; |
| } |
| |
| body { |
| overflow: hidden; |
| background-color: #050505; |
| } |
| |
| .blurred { |
| filter: blur(5px); |
| } |
| |
| .typing-indicator { |
| display: flex; |
| padding: 8px 12px; |
| background-color: #1a1a1a; |
| border-radius: 20px; |
| width: 50px; |
| } |
| |
| .typing-indicator span { |
| display: inline-block; |
| width: 6px; |
| height: 6px; |
| background-color: #aaa; |
| border-radius: 50%; |
| margin: 0 2px; |
| } |
| |
| .message-animation { |
| animation: fadeInUp 0.4s forwards; |
| opacity: 0; |
| } |
| |
| .distortion-effect { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: radial-gradient(circle, transparent 10%, #000 70%); |
| opacity: 0; |
| pointer-events: none; |
| z-index: 100; |
| } |
| |
| .message.distorted { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .message.distorted::before { |
| content: ""; |
| position: absolute; |
| top: -10px; |
| left: -10px; |
| right: -10px; |
| bottom: -10px; |
| background: linear-gradient(45deg, #ff0000, #6e00ff, #00ffcc, #ff00d4, #ff0000); |
| background-size: 400% 400%; |
| animation: glitch 3s ease infinite; |
| filter: blur(3px); |
| opacity: 0.3; |
| z-index: -1; |
| border-radius: 18px; |
| } |
| |
| .dark-pulse { |
| animation: darkPulse 5s infinite; |
| } |
| |
| @keyframes fadeInUp { |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| from { |
| opacity: 0; |
| transform: translateY(10px); |
| } |
| } |
| |
| @keyframes glitch { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| |
| @keyframes darkPulse { |
| 0%, 100% { background-color: #121212; } |
| 50% { background-color: #0a0a0a; } |
| } |
| |
| @keyframes distort { |
| 0% { transform: scale(1); opacity: 1; } |
| 50% { transform: scale(1.02); opacity: 0.9; } |
| 100% { transform: scale(1); opacity: 1; } |
| } |
| |
| .distortion-trigger { |
| animation: distort 0.5s forwards; |
| } |
| |
| .spooky-font { |
| font-family: 'Courier New', monospace; |
| letter-spacing: 0.1em; |
| } |
| </style> |
| </head> |
| <body class="dark-pulse h-screen flex items-center justify-center"> |
| |
| <div id="app-icon" class="fixed inset-0 flex items-center justify-center z-50 bg-dark-primary transition-all duration-1000"> |
| <div id="eye-container" class="relative w-40 h-40 rounded-full flex items-center justify-center"> |
| <div id="eye-lid-top" class="absolute w-full h-1/2 bg-dark-primary rounded-t-full origin-bottom transition-all duration-500"></div> |
| <div id="eye-lid-bottom" class="absolute w-full h-1/2 bottom-0 bg-dark-primary rounded-b-full origin-top transition-all duration-500"></div> |
| <div id="eye-iris" class="absolute w-24 h-24 rounded-full bg-gradient-to-br from-accent to-purple-900 flex items-center justify-center overflow-hidden"> |
| <div id="eye-pupil" class="w-16 h-16 rounded-full bg-black"></div> |
| <div class="absolute -inset-4 bg-white opacity-10 rotate-45"></div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="distortion-overlay" class="distortion-effect"></div> |
| |
| |
| <div id="app-container" class="blurred w-full max-w-4xl h-[90vh] rounded-2xl overflow-hidden bg-dark-primary text-white shadow-2xl flex transform scale-95 opacity-0"> |
| |
| <div class="w-1/4 bg-dark-secondary flex flex-col border-r border-gray-800"> |
| |
| <div class="p-4 border-b border-gray-800 flex justify-between items-center"> |
| <h1 class="text-xl font-bold">Messages</h1> |
| <button class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center"> |
| <i class="fas fa-edit"></i> |
| </button> |
| </div> |
| |
| |
| <div class="p-3"> |
| <div class="relative"> |
| <input type="text" placeholder="Search contacts..." class="w-full p-2 pl-10 rounded-lg bg-gray-900 text-sm focus:outline-none focus:ring-1 focus:ring-accent"> |
| <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 overflow-y-auto custom-scroll"> |
| <div class="contact-item p-3 flex items-center border-b border-gray-800 cursor-pointer hover:bg-gray-800 relative"> |
| <div class="relative mr-3"> |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Profile" class="w-12 h-12 rounded-full"> |
| <div class="w-3 h-3 rounded-full bg-green-500 absolute bottom-0 right-0 border-2 border-gray-900"></div> |
| </div> |
| <div> |
| <h3 class="font-semibold">Sophia</h3> |
| <p class="text-sm text-gray-400 truncate w-40">See you tonight...</p> |
| </div> |
| <div class="absolute right-3 text-xs text-gray-500">2:34 PM</div> |
| </div> |
| |
| <div class="contact-item p-3 flex items-center border-b border-gray-800 cursor-pointer hover:bg-gray-800"> |
| <div class="relative mr-3"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-12 h-12 rounded-full"> |
| <div class="w-3 h-3 rounded-full bg-green-500 absolute bottom-0 right-0 border-2 border-gray-900"></div> |
| </div> |
| <div> |
| <h3 class="font-semibold">Mark</h3> |
| <p class="text-sm text-gray-400 truncate w-40">Did you hear that?</p> |
| </div> |
| </div> |
| |
| <div class="contact-item p-3 flex items-center border-b border-gray-800 cursor-pointer hover:bg-gray-800"> |
| <div class="relative mr-3"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-12 h-12 rounded-full"> |
| <div class="w-3 h-3 rounded-full bg-gray-500 absolute bottom-0 right-0 border-2 border-gray-900"></div> |
| </div> |
| <div> |
| <h3 class="font-semibold">Emma</h3> |
| <p class="text-sm text-gray-400 truncate w-40">It's watching us..</p> |
| </div> |
| </div> |
| |
| <div class="contact-item p-3 flex items-center border-b border-gray-800 cursor-pointer hover:bg-gray-800"> |
| <div class="relative mr-3"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile" class="w-12 h-12 rounded-full"> |
| <div class="w-3 h-3 rounded-full bg-green-500 absolute bottom-0 right-0 border-2 border-gray-900"></div> |
| </div> |
| <div> |
| <h3 class="font-semibold">Daniel</h3> |
| <p class="text-sm text-gray-400 truncate w-40">Don't look behind you</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 flex flex-col"> |
| |
| <div class="p-4 border-b border-gray-800 bg-dark-primary flex items-center"> |
| <div class="relative mr-3"> |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Profile" class="w-10 h-10 rounded-full"> |
| <div class="w-2 h-2 rounded-full bg-green-500 absolute bottom-0 right-0 border-2 border-gray-900"></div> |
| </div> |
| <div> |
| <h2 class="font-semibold">Sophia</h2> |
| <p class="text-xs text-gray-400">Online</p> |
| </div> |
| <div class="ml-auto flex space-x-2"> |
| <button class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center"> |
| <i class="fas fa-phone"></i> |
| </button> |
| <button class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center"> |
| <i class="fas fa-video"></i> |
| </button> |
| <button class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="messages-container" class="flex-1 overflow-y-auto p-4 space-y-3 bg-gradient-to-b from-dark-primary via-gray-900/10 to-dark-primary"> |
| <div class="message flex justify-start"> |
| <div class="max-w-xs md:max-w-md p-3 rounded-r-2xl rounded-bl-2xl bg-gray-800"> |
| Hey, are we still meeting tonight? |
| </div> |
| </div> |
| |
| <div class="message flex justify-end"> |
| <div class="max-w-xs md:max-w-md p-3 rounded-l-2xl rounded-br-2xl bg-accent"> |
| Of course! Can't wait 😊 |
| </div> |
| </div> |
| |
| <div class="message flex justify-start"> |
| <div class="max-w-xs md:max-w-md p-3 rounded-r-2xl rounded-bl-2xl bg-gray-800"> |
| Is everything okay? You seem different today... |
| </div> |
| </div> |
| |
| <div class="message flex justify-end"> |
| <div class="max-w-xs md:max-w-md p-3 rounded-l-2xl rounded-br-2xl bg-accent"> |
| Everything is fine! Why would you say that? |
| </div> |
| </div> |
| |
| <div class="message flex justify-start"> |
| <div class="max-w-xs md:max-w-md p-3 rounded-r-2xl rounded-bl-2xl bg-gray-800"> |
| I thought I saw someone behind you in our video call last night |
| </div> |
| </div> |
| |
| <div class="typing-indicator mt-2 ml-2"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| </div> |
| |
| |
| <div class="p-4 border-t border-gray-800 bg-dark-primary"> |
| <div class="flex items-center"> |
| <button class="w-10 h-10 rounded-full text-gray-400 flex items-center justify-center"> |
| <i class="fas fa-plus"></i> |
| </button> |
| <div class="flex-1 mx-2 relative"> |
| <input |
| id="message-input" |
| type="text" |
| placeholder="Type a message..." |
| class="w-full p-3 rounded-xl bg-gray-900 focus:outline-none focus:ring-1 focus:ring-accent" |
| > |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"> |
| <i class="far fa-smile"></i> |
| </button> |
| </div> |
| <button id="send-button" class="w-10 h-10 rounded-full bg-accent hover:bg-accent-hover flex items-center justify-center"> |
| <i class="fas fa-paper-plane text-white"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| setTimeout(() => { |
| const topLid = document.getElementById('eye-lid-top'); |
| const bottomLid = document.getElementById('eye-lid-bottom'); |
| const eyeContainer = document.getElementById('app-icon'); |
| |
| topLid.style.transform = 'scaleY(0)'; |
| bottomLid.style.transform = 'scaleY(0)'; |
| |
| setTimeout(() => { |
| eyeContainer.style.opacity = '0'; |
| document.getElementById('app-container').classList.remove('blurred'); |
| document.getElementById('app-container').classList.remove('opacity-0'); |
| document.getElementById('app-container').classList.remove('scale-95'); |
| |
| setTimeout(() => { |
| eyeContainer.style.display = 'none'; |
| startDisturbingSequence(); |
| }, 800); |
| }, 1200); |
| }, 800); |
| |
| |
| document.getElementById('send-button').addEventListener('click', sendMessage); |
| document.getElementById('message-input').addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| sendMessage(); |
| } |
| }); |
| |
| |
| function sendMessage() { |
| const input = document.getElementById('message-input'); |
| const message = input.value.trim(); |
| if (message === '') return; |
| |
| addMessage(message, true); |
| input.value = ''; |
| |
| |
| setTimeout(sendCreepyReply, Math.random() * 2000 + 1000); |
| } |
| |
| |
| function addMessage(text, isSender) { |
| const messagesContainer = document.getElementById('messages-container'); |
| const typingIndicator = document.querySelector('.typing-indicator'); |
| |
| if (typingIndicator) { |
| typingIndicator.style.display = 'none'; |
| } |
| |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `message flex ${isSender ? 'justify-end' : 'justify-start'} message-animation`; |
| |
| const messageBubble = document.createElement('div'); |
| messageBubble.className = `max-w-xs md:max-w-md p-3 rounded-2xl ${ |
| isSender ? 'bg-accent rounded-l-2xl rounded-br-2xl' : 'bg-gray-800 rounded-r-2xl rounded-bl-2xl' |
| }`; |
| messageBubble.textContent = text; |
| |
| messageDiv.appendChild(messageBubble); |
| messagesContainer.appendChild(messageDiv); |
| |
| |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; |
| |
| |
| if (Math.random() > 0.8 && !isSender) { |
| setTimeout(() => { |
| applyDistortion(messageBubble); |
| }, 1500); |
| } |
| } |
| |
| |
| function applyDistortion(element) { |
| element.classList.add('distorted', 'spooky-font'); |
| |
| |
| const overlay = document.getElementById('distortion-overlay'); |
| overlay.style.opacity = '0.7'; |
| setTimeout(() => { |
| overlay.style.opacity = '0'; |
| }, 400); |
| |
| document.body.classList.add('distortion-trigger'); |
| setTimeout(() => { |
| document.body.classList.remove('distortion-trigger'); |
| }, 500); |
| } |
| |
| |
| function sendCreepyReply() { |
| const creepyMessages = [ |
| "You don't see me, do you?", |
| "I'm in your room right now...", |
| "Why did you turn around?", |
| "Don't look behind you.", |
| "T̵͕̓h̸̩̥͛̈́e̷̦̔ÿ̵͇̾ ̴͚̇͊k̸̖̃̅ǹ̷̰͛o̸̝̕w̵̟͌ ̶̺͐w̴̧̛̮h̸͖̉́ḙ̴̌͘r̸̗̽é̶͎̚ ̶̭̤́y̸̩̚ȏ̸̧̎ŭ̶̻͝ ̶̯̈́ä̷̼́ṛ̸͐̌e̴̩̐̊", |
| "T̵͔͓̝̗̹͑h̷̡͎͇̱͗̿̀̿͝e̸̼̬̘̟͂̎̇̅ ̶̲̲̬͛͌͑̽͝d̶͍͖̗̪͔̿̾͂̂ȏ̷͉́͂͝o̷̜̟̓ͅr̵̡̬̝̦͑̊͌͗̏s̵̛̤̰̤̈́̈́̆ ̴̛̦̩̃a̸̯̜͐̇̈́̉̊r̷̜͚̈́e̶̮̫̝̘͒̈́ͅ ̴̤̤̫̓̓̓̐̈l̶̨͉̐̀̊͂͊o̵͎̞̳̥͒̈̆̔̈́ç̴̖̜̆͑͜k̷̢̬̘̗̭͒͗̉̇͠e̴̹͛̿ḋ̸̲̌͘͠͝", |
| "Can you feel my breath?", |
| "I've been watching you sleep.", |
| "T̸̖̽u̵̞͂r̴͔͂n̷͔̓ ̶̧̑a̶̪̓r̶̓͜o̷̘͝ȗ̵̞n̵̙̏d̸͉̃.̷̹̓.̵̥͘.̴̡́", |
| "Why is your closet open?", |
| "They're coming up the stairs...", |
| "I̸̤̞̝̰͖͌ ̶͚͉̀̈̓s̶͈̓͌̒̉ȇ̵̛̙̿̋ě̵̗̞̪͙ ̵̘̼͉͒͗y̵͕̭̭̗͐̈́͑o̶̹̅̿͐͝ŭ̴͚̗̽" |
| ]; |
| |
| |
| const typingIndicator = document.querySelector('.typing-indicator'); |
| if (typingIndicator) { |
| typingIndicator.style.display = 'flex'; |
| const messagesContainer = document.getElementById('messages-container'); |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; |
| } |
| |
| |
| setTimeout(() => { |
| const message = creepyMessages[Math.floor(Math.random() * creepyMessages.length)]; |
| addMessage(message, false); |
| |
| |
| if (message.includes("T̵") || message.includes("I̸")) { |
| setTimeout(() => { |
| document.getElementById('distortion-overlay').style.opacity = '0.9'; |
| setTimeout(() => { |
| document.getElementById('distortion-overlay').style.opacity = '0'; |
| }, 1000); |
| }, 800); |
| } |
| }, 2000); |
| } |
| |
| |
| function startDisturbingSequence() { |
| setTimeout(sendCreepyReply, 5000); |
| |
| |
| setInterval(() => { |
| if (Math.random() > 0.7) { |
| applyRandomDistortion(); |
| } |
| }, 10000); |
| } |
| |
| |
| function applyRandomDistortion() { |
| const overlay = document.getElementById('distortion-overlay'); |
| overlay.style.opacity = '0.4'; |
| setTimeout(() => { |
| overlay.style.opacity = '0'; |
| }, 500); |
| |
| |
| if (Math.random() > 0.5) { |
| const messages = document.querySelectorAll('.message:not(.distorted)'); |
| if (messages.length > 0) { |
| const randomIndex = Math.floor(Math.random() * messages.length); |
| applyDistortion(messages[randomIndex].querySelector('div')); |
| } |
| } |
| } |
| |
| |
| setInterval(() => { |
| const contacts = document.querySelectorAll('.contact-item'); |
| const creepyStatuses = [ |
| "It's behind you...", |
| "Can you hear them?", |
| "Why are they following me?", |
| "I̶͚̽t̴͍͐'̵̲̈́s̶̝͝ ̴̱̕í̵̳n̵̬̓ ̴̱͘t̷͔̓h̵̰͐e̵̺̿ ̸̤͠w̴͒ͅà̶̤ḽ̸̾l̵͠ͅs̸̺̎", |
| "Ţ̵̢̢̧̢̦̤̼̰̃̃̅̋̎́̌͝͠h̶̡̛̟̼͍̰̱͂̓̉̒̓͘̕e̶̳̰̭̾̍̾̕͝y̸̺̞̲͈̲͒͝'̵̡̧̘͙̞̾r̴̖͒̂͂ȅ̶̻͍̈́̓͂̄̒͑ ̷͇̰̌͐̀̇h̷̜̙̲̗͕̳̃̌e̵̛̜̖̥͓͙̽̅̀̈́̾̀̓̚ͅr̷̛̺̈́͂̾̅͠é̸͚̍̑̆̈̍̊͘", |
| "Don't open your eyes", |
| "Something touched my shoulder", |
| "T̶̢̧̛̛̙͉̗̫͛̇̽̉̀̈́͐͜h̷͎͙̤͍̬̋̈́͑̊ę̷̛̭̳̝̼̙̫̀̓̕ŗ̶̩̘̘̘͒̿̌̉̾͂̕͝ë̸̹̠̒́̅́̚͠'̵̛̯̦͚͔̪̫̲̇͛͊͊̋͊s̷̢͈͒̓̎͜ ̴̢̥̙̦̬̔͌s̶̘̲̼͌̇͑̈́o̸̡̨̼͇̱̒m̴̮͔̘̐̄͂͘è̸̡̙͔̠͔̩̿̓̈́̀̿̈̿o̶̧̨̭̬͂͋̈́͑̓̇͛̐n̸͇̟̤͎̒̿͆͒͐́̎e̵͇̖̞̣̝̤̗͎̜͛̓͋̊̑̈̎̎ ̷͇̞̰̇̀̔̿̓̏̕͝e̸͉̒̋͋̓͐͆͛l̸͔̣̒̔̾ṡ̷̨͚͈̖̱͈̌̋̏̉͊̆̍̊e̷̦̠͎͚̬̬̦̮̰̿͗̍̌ ̵̢͙̫͙̃h̴͇̃̋͋̊̍̀e̵͔̋̾̌̈́́r̷̗̥̠͗͐̿̈́̃e̵͇͖͑" |
| ]; |
| |
| const statusIndex = Math.floor(Math.random() * creepyStatuses.length); |
| contacts.forEach((contact, index) => { |
| if (index > 0) { |
| const status = contact.querySelector('p'); |
| if (Math.random() > 0.7) { |
| status.textContent = creepyStatuses[statusIndex]; |
| } |
| } |
| }); |
| }, 8000); |
| }); |
| </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/messages" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
