| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CreepyChat</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <style> |
| @keyframes typing { |
| 0% { opacity: 0; } |
| 50% { opacity: 1; } |
| 100% { opacity: 0; } |
| } |
| .typing-indicator span { |
| animation: typing 1.5s infinite; |
| } |
| .typing-indicator span:nth-child(2) { |
| animation-delay: 0.3s; |
| } |
| .typing-indicator span:nth-child(3) { |
| animation-delay: 0.6s; |
| } |
| .video-container { |
| transition: all 0.5s ease; |
| transform: scale(0.95); |
| } |
| .video-container:hover { |
| transform: scale(1); |
| box-shadow: 0 0 30px rgba(255, 0, 0, 0.3); |
| } |
| .glitch-effect { |
| position: relative; |
| } |
| .glitch-effect::before, .glitch-effect::after { |
| content: attr(data-text); |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: transparent; |
| } |
| .glitch-effect::before { |
| left: 2px; |
| text-shadow: -2px 0 #ff0000; |
| clip: rect(44px, 450px, 56px, 0); |
| animation: glitch-anim-1 2s infinite linear alternate-reverse; |
| } |
| .glitch-effect::after { |
| left: -2px; |
| text-shadow: -2px 0 #00ff00; |
| clip: rect(44px, 450px, 56px, 0); |
| animation: glitch-anim-2 2s infinite linear alternate-reverse; |
| } |
| @keyframes glitch-anim-1 { |
| 0% { clip: rect(62px, 9999px, 119px, 0); } |
| 20% { clip: rect(33px, 9999px, 43px, 0); } |
| 40% { clip: rect(43px, 9999px, 30px, 0); } |
| 60% { clip: rect(68px, 9999px, 92px, 0); } |
| 80% { clip: rect(85px, 9999px, 96px, 0); } |
| 100% { clip: rect(61px, 9999px, 85px, 0); } |
| } |
| @keyframes glitch-anim-2 { |
| 0% { clip: rect(10px, 9999px, 99px, 0); } |
| 20% { clip: rect(53px, 9999px, 115px, 0); } |
| 40% { clip: rect(22px, 9999px, 109px, 0); } |
| 60% { clip: rect(68px, 9999px, 72px, 0); } |
| 80% { clip: rect(107px, 9999px, 13px, 0); } |
| 100% { clip: rect(1px, 9999px, 49px, 0); } |
| } |
| </style> |
| </head> |
| <body class="bg-[url('http://static.photos/black/1200x630/13')] bg-cover bg-fixed text-gray-100 min-h-screen flex flex-col"> |
| <div id="chat-container" class="flex-1 container mx-auto px-4 py-8 max-w-3xl"> |
| <div class="bg-gray-800 bg-opacity-80 backdrop-blur-sm rounded-lg shadow-xl overflow-hidden"> |
| <div class="p-4 border-b border-gray-700 flex items-center justify-between"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center border-2 border-red-300"> |
| <i data-feather="user" class="w-5 h-5"></i> |
| </div> |
| <div> |
| <h2 class="font-bold">Group Chat</h2> |
| <p class="text-xs text-gray-400">5 members</p> |
| </div> |
| </div> |
| <button class="text-gray-400 hover:text-white"> |
| <i data-feather="more-vertical" class="w-5 h-5"></i> |
| </button> |
| </div> |
| <div id="messages" class="p-4 space-y-4 h-96 overflow-y-auto bg-gray-800 bg-opacity-50"> |
| |
| </div> |
| |
| <div class="p-4 border-t border-gray-700"> |
| <div id="typing-indicator" class="text-sm text-gray-400 mb-2 hidden"> |
| <div class="typing-indicator flex items-center space-x-1"> |
| <span>•</span> |
| <span>•</span> |
| <span>•</span> |
| <span class="ml-1">Unknown is typing</span> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-2"> |
| <input type="text" id="message-input" |
| class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500" |
| placeholder="Type a message..."> |
| <button id="send-btn" class="bg-red-600 hover:bg-red-700 text-white rounded-lg p-2"> |
| <i data-feather="send" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="video-modal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden"> |
| <div class="video-container relative w-full max-w-4xl"> |
| <video id="creepy-video" controls class="w-full rounded-lg" poster="http://static.photos/black/1024x576/666"> |
| <source src="https://example.com/your-creepy-video.mp4" type="video/mp4"> |
| Your browser does not support the video tag. |
| </video> |
| <button id="close-video" class="absolute top-4 right-4 bg-red-600 rounded-full p-2 hover:bg-red-700"> |
| <i data-feather="x" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| const normalMessages = [ |
| { sender: "Alex", text: "Hey everyone! How's it going?", time: "10:30 AM" }, |
| { sender: "Jamie", text: "Just finished work, finally!", time: "10:32 AM" }, |
| { sender: "Taylor", text: "Anyone want to hang out later?", time: "10:33 AM" }, |
| { sender: "Morgan", text: "I'm down! What time?", time: "10:35 AM" }, |
| { sender: "Alex", text: "How about 7pm at the usual place?", time: "10:36 AM" }, |
| { sender: "Jamie", text: "Sounds good to me 👍", time: "10:37 AM" } |
| ]; |
| |
| const weirdMessages = [ |
| { |
| sender: "Unknown", |
| text: "Have you seen this?", |
| time: "10:38 AM", |
| hasVideo: true, |
| videoUrl: "https://example.com/your-creepy-video.mp4" |
| }, |
| { |
| sender: "Unknown", |
| text: "I found this picture of you...", |
| time: "10:39 AM", |
| hasImage: true, |
| imageUrl: "http://static.photos/people/320x240/666" |
| } |
| ]; |
| |
| const messagesContainer = document.getElementById('messages'); |
| function addMessage(sender, text, time, isCurrentUser = false, hasVideo = false, hasImage = false) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `flex ${isCurrentUser ? 'justify-end' : 'justify-start'}`; |
| |
| messageDiv.innerHTML = ` |
| <div class="max-w-xs lg:max-w-md ${isCurrentUser ? 'bg-red-600' : 'bg-gray-700'} rounded-lg p-3 shadow"> |
| <div class="flex items-center space-x-2 mb-1"> |
| <span class="font-bold ${hasVideo ? 'text-red-400 glitch-effect' : ''}" ${hasVideo ? 'data-text="'+sender+'"' : ''}>${sender}</span> |
| <span class="text-xs text-gray-300">${time}</span> |
| </div> |
| <p class="${hasVideo ? 'text-red-300 font-medium' : ''}">${text}</p> |
| ${hasVideo ? ` |
| <div class="mt-2 cursor-pointer" onclick="showVideo('${weirdMessages[0].videoUrl}')"> |
| <div class="relative"> |
| <img src="http://static.photos/black/320x240/666" alt="Video thumbnail" class="rounded-lg w-full"> |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> |
| <i data-feather="play" class="w-8 h-8 text-red-500"></i> |
| </div> |
| </div> |
| <p class="text-xs text-gray-300 mt-1">Click to play video</p> |
| </div> |
| ` : ''} |
| ${hasImage ? ` |
| <div class="mt-2"> |
| <img src="${weirdMessages[1].imageUrl}" alt="Unknown image" class="rounded-lg w-full border border-red-500"> |
| <p class="text-xs text-gray-300 mt-1">Why do I have this?</p> |
| </div> |
| ` : ''} |
| </div> |
| `; |
| |
| messagesContainer.appendChild(messageDiv); |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; |
| feather.replace(); |
| } |
| |
| |
| normalMessages.forEach(msg => { |
| addMessage(msg.sender, msg.text, msg.time); |
| }); |
| |
| |
| setTimeout(() => { |
| document.getElementById('typing-indicator').classList.remove('hidden'); |
| |
| setTimeout(() => { |
| document.getElementById('typing-indicator').classList.add('hidden'); |
| |
| const randomWeirdMessage = weirdMessages[Math.floor(Math.random() * weirdMessages.length)]; |
| addMessage(randomWeirdMessage.sender, randomWeirdMessage.text, randomWeirdMessage.time, false, randomWeirdMessage.hasVideo, randomWeirdMessage.hasImage); |
| |
| document.body.classList.add('overflow-hidden'); |
| setTimeout(() => { |
| document.body.classList.remove('overflow-hidden'); |
| }, 500); |
| |
| }, 3000); |
| }, 5000); |
| |
| |
| function showVideo(url) { |
| const modal = document.getElementById('video-modal'); |
| const video = document.getElementById('creepy-video'); |
| video.src = url; |
| modal.classList.remove('hidden'); |
| video.play(); |
| } |
| |
| function hideVideo() { |
| const modal = document.getElementById('video-modal'); |
| const video = document.getElementById('creepy-video'); |
| video.pause(); |
| modal.classList.add('hidden'); |
| } |
| |
| |
| document.getElementById('close-video').addEventListener('click', hideVideo); |
| |
| |
| document.getElementById('send-btn').addEventListener('click', () => { |
| const input = document.getElementById('message-input'); |
| if (input.value.trim() !== '') { |
| addMessage("You", input.value, new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}), true); |
| input.value = ''; |
| |
| |
| if (Math.random() > 0.7) { |
| setTimeout(() => { |
| document.getElementById('typing-indicator').classList.remove('hidden'); |
| |
| setTimeout(() => { |
| document.getElementById('typing-indicator').classList.add('hidden'); |
| const creepyReplies = [ |
| "I can see you.", |
| "Don't look behind you.", |
| "Why haven't you watched the video?", |
| "They know you're here.", |
| "It's already too late.", |
| "I have more pictures of you.", |
| "You should check your camera roll...", |
| "Why are you ignoring me in the photos?" |
| ]; |
| const randomReply = creepyReplies[Math.floor(Math.random() * creepyReplies.length)]; |
| addMessage("Unknown", randomReply, new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})); |
| }, 2000); |
| }, 1000); |
| } |
| } |
| }); |
| |
| |
| document.getElementById('message-input').addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') { |
| document.getElementById('send-btn').click(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
