| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Spooky Group Chat</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'); |
| |
| :root { |
| --primary-dark: #1a1a2e; |
| --primary-light: #16213e; |
| --accent-red: #e94560; |
| --accent-green: #00b894; |
| --text-light: #f5f5f5; |
| } |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #0a0a10; |
| color: var(--text-light); |
| } |
| |
| .title-font { |
| font-family: 'Creepster', cursive; |
| } |
| |
| .message-container { |
| scrollbar-width: thin; |
| scrollbar-color: var(--accent-red) var(--primary-dark); |
| } |
| |
| .message-container::-webkit-scrollbar { |
| width: 6px; |
| } |
| |
| .message-container::-webkit-scrollbar-track { |
| background: var(--primary-dark); |
| } |
| |
| .message-container::-webkit-scrollbar-thumb { |
| background-color: var(--accent-red); |
| border-radius: 6px; |
| } |
| |
| .typing-indicator:after { |
| content: '...'; |
| animation: typing 1.5s infinite; |
| } |
| |
| @keyframes typing { |
| 0% { content: ''; } |
| 33% { content: '.'; } |
| 66% { content: '..'; } |
| 100% { content: '...'; } |
| } |
| |
| .ghost-pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { opacity: 0.4; } |
| 50% { opacity: 1; } |
| 100% { opacity: 0.4; } |
| } |
| |
| .spoiler { |
| background-color: #222; |
| color: transparent; |
| cursor: pointer; |
| transition: all 0.3s; |
| } |
| |
| .spoiler:hover { |
| background-color: #333; |
| } |
| |
| .spoiler.revealed { |
| background-color: transparent; |
| color: white; |
| } |
| |
| .image-upload::before { |
| content: 'Upload Spooky Image'; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: rgba(26, 26, 46, 0.7); |
| border: 2px dashed var(--accent-red); |
| border-radius: 8px; |
| color: var(--text-light); |
| font-weight: bold; |
| cursor: pointer; |
| } |
| |
| .image-upload input { |
| display: none; |
| } |
| |
| .glow { |
| animation: glow 2s infinite alternate; |
| } |
| |
| @keyframes glow { |
| from { |
| box-shadow: 0 0 5px -5px var(--accent-red); |
| } |
| to { |
| box-shadow: 0 0 5px 5px var(--accent-red); |
| } |
| } |
| |
| .profile-avatar { |
| object-fit: cover; |
| object-position: center; |
| border: 2px solid; |
| } |
| |
| .avatar-alex { |
| border-color: #991b1b; |
| } |
| |
| .avatar-sam { |
| border-color: #1e40af; |
| } |
| |
| .avatar-jordan { |
| border-color: #7e22ce; |
| } |
| |
| .avatar-taylor { |
| border-color: #b45309; |
| } |
| |
| .avatar-casey { |
| border-color: #047857; |
| } |
| |
| .avatar-you { |
| border-color: #15803d; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex flex-col"> |
| |
| <header class="bg-gradient-to-r from-gray-900 to-gray-800 py-4 px-6 shadow-lg"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-3"> |
| <i class="fas fa-ghost text-2xl text-red-500 ghost-pulse"></i> |
| <h1 class="title-font text-2xl md:text-3xl text-red-500">SpookChat</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button id="notifications-btn" class="relative p-2 rounded-full hover:bg-gray-700 transition"> |
| <i class="fas fa-bell text-xl text-gray-300"></i> |
| <span class="absolute top-0 right-0 h-3 w-3 bg-red-500 rounded-full animate-ping opacity-75"></span> |
| <span class="absolute top-0 right-0 h-3 w-3 bg-red-500 rounded-full"></span> |
| </button> |
| <div class="flex items-center space-x-2"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-8 w-8 rounded-full profile-avatar avatar-you" alt="Your profile"> |
| <span class="hidden md:inline">You</span> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-grow container mx-auto py-6 px-4 flex flex-col md:flex-row"> |
| |
| <aside class="w-full md:w-64 bg-gray-900 rounded-lg shadow-md mb-4 md:mb-0 md:mr-6"> |
| <div class="p-4 border-b border-gray-800"> |
| <h2 class="text-xl font-bold flex items-center"> |
| <i class="fas fa-users mr-2"></i> |
| Paranormal Society |
| </h2> |
| <p class="text-xs text-gray-400 mt-1">Investigating the unknown since 2020</p> |
| </div> |
| |
| <div class="p-4 border-b border-gray-800"> |
| <div class="flex justify-between items-center mb-2"> |
| <h3 class="font-medium">Active Ghost Hunters</h3> |
| <span class="bg-red-500 text-xs px-2 py-1 rounded-full">6 online</span> |
| </div> |
| |
| <div class="space-y-3 mt-3"> |
| <div class="flex items-center"> |
| <div class="h-8 w-8 rounded-full bg-red-900 flex items-center justify-center relative overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="h-full w-full profile-avatar avatar-alex" alt="Alex profile"> |
| <span class="absolute bottom-0 right-0 h-2 w-2 bg-green-500 rounded-full border border-gray-900"></span> |
| </div> |
| <span class="ml-2">Alex (Tech)</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="h-8 w-8 rounded-full bg-blue-900 flex items-center justify-center relative overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/28.jpg" class="h-full w-full profile-avatar avatar-sam" alt="Sam profile"> |
| <span class="absolute bottom-0 right-0 h-2 w-2 bg-green-500 rounded-full border border-gray-900"></span> |
| </div> |
| <span class="ml-2">Sam (Historian)</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="h-8 w-8 rounded-full bg-purple-900 flex items-center justify-center relative overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" class="h-full w-full profile-avatar avatar-jordan" alt="Jordan profile"> |
| <span class="absolute bottom-0 right-0 h-2 w-2 bg-green-500 rounded-full border border-gray-900"></span> |
| </div> |
| <span class="ml-2">Jordan (Photog)</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="h-8 w-8 rounded-full bg-yellow-900 flex items-center justify-center relative overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/63.jpg" class="h-full w-full profile-avatar avatar-taylor" alt="Taylor profile"> |
| <span class="absolute bottom-0 right-0 h-2 w-2 bg-green-500 rounded-full border border-gray-900"></span> |
| </div> |
| <span class="ml-2">Taylor (Medium)</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="h-8 w-8 rounded-full bg-green-900 flex items-center justify-center relative overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" class="h-full w-full profile-avatar avatar-casey" alt="Casey profile"> |
| <span class="absolute bottom-0 right-0 h-2 w-2 bg-green-500 rounded-full border border-gray-900"></span> |
| </div> |
| <span class="ml-2">Casey (Medic)</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="p-4"> |
| <h3 class="font-medium mb-2">Recent Findings</h3> |
| <div class="space-y-2"> |
| <div class="text-sm p-2 bg-gray-800 rounded-lg cursor-pointer hover:bg-gray-700 transition"> |
| <div class="flex justify-between"> |
| <span class="font-medium truncate">Shadow figure in dorm</span> |
| <span class="text-xs text-gray-400">5 min ago</span> |
| </div> |
| <p class="text-xs text-gray-400 truncate">Caught on Alex's night cam</p> |
| </div> |
| <div class="text-sm p-2 bg-gray-800 rounded-lg cursor-pointer hover:bg-gray-700 transition"> |
| <div class="flex justify-between"> |
| <span class="font-medium truncate">Unexplained cold spot</span> |
| <span class="text-xs text-gray-400">23 min ago</span> |
| </div> |
| <p class="text-xs text-gray-400 truncate">Library 2nd floor</p> |
| </div> |
| <div class="text-sm p-2 bg-gray-800 rounded-lg cursor-pointer hover:bg-gray-700 transition"> |
| <div class="flex justify-between"> |
| <span class="font-medium truncate">EVPs from room 203</span> |
| <span class="text-xs text-gray-400">1h ago</span> |
| </div> |
| <p class="text-xs text-gray-400 truncate">Class B disembodied voice</p> |
| </div> |
| </div> |
| </div> |
| </aside> |
| |
| |
| <div class="flex-grow flex flex-col bg-gray-900 rounded-lg shadow-md overflow-hidden"> |
| |
| <div class="p-4 bg-gray-800 border-b border-gray-700 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-ghost text-red-500 mr-2"></i> |
| <h2 class="text-xl font-bold">Ghost Hunters - Main Chat</h2> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition"> |
| <i class="fas fa-search text-gray-300"></i> |
| </button> |
| <button class="p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition"> |
| <i class="fas fa-ellipsis-v text-gray-300"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="message-container" class="flex-grow p-4 overflow-y-auto message-container bg-gray-900 space-y-4"> |
| |
| <div class="flex justify-center"> |
| <div class="bg-gray-800 text-xs text-gray-400 px-3 py-1 rounded-full"> |
| Today, October 31, 2023 |
| </div> |
| </div> |
| |
| |
| <div class="message" data-user="Alex"> |
| <div class="flex items-start"> |
| <div class="h-8 w-8 rounded-full bg-red-900 flex items-center justify-center mr-3 relative overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="h-full w-full profile-avatar avatar-alex" alt="Alex profile"> |
| </div> |
| <div> |
| <div class="flex items-baseline"> |
| <span class="font-bold text-red-400 mr-2">Alex (Tech)</span> |
| <span class="text-xs text-gray-500">10:42 AM</span> |
| </div> |
| <div class="mt-1 bg-gray-800 p-3 rounded-lg rounded-tl-none max-w-xs"> |
| Guys, you need to see what my night cam caught last night. I'm uploading it now. |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="message" data-user="Alex"> |
| <div class="flex items-start"> |
| <div class="h-8 w-8 rounded-full bg-red-900 flex items-center justify-center mr-3 relative overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="h-full w-full profile-avatar avatar-alex" alt="Alex profile"> |
| </div> |
| <div> |
| <div class="flex items-baseline"> |
| <span class="font-bold text-red-400 mr-2">Alex (Tech)</span> |
| <span class="text-xs text-gray-500">10:42 AM</span> |
| </div> |
| <div class="mt-1 bg-gray-800 p-0 rounded-lg rounded-tl-none overflow-hidden max-w-xs"> |
| <img src="https://source.unsplash.com/random/300x300/?ghost,shadow" alt="Spooky image" class="w-full h-auto cursor-pointer hover:opacity-90 transition"> |
| <div class="p-3"> |
| <p class="text-sm">This shadow figure appeared at exactly 3:17 AM.</p> |
| <p class="text-xs text-gray-400 mt-1">Click to enlarge</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="message" data-user="Taylor"> |
| <div class="flex items-start"> |
| <div class="h-8 w-8 rounded-full bg-yellow-900 flex items-center justify-center mr-3 relative overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/63.jpg" class="h-full w-full profile-avatar avatar-taylor" alt="Taylor profile"> |
| </div> |
| <div> |
| <div class="flex items-baseline"> |
| <span class="font-bold text-yellow-400 mr-2">Taylor (Medium)</span> |
| <span class="text-xs text-gray-500">10:45 AM</span> |
| </div> |
| <div class="mt-1 bg-gray-800 p-3 rounded-lg rounded-tl-none max-w-xs"> |
| Oh wow 😱 That's definitely NOT a reflection. The energy around it feels... angry? |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="message" data-user="Sam"> |
| <div class="flex items-start"> |
| <div class="h-8 w-8 rounded-full bg-blue-900 flex items-center justify-center mr-3 relative overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/28.jpg" class="h-full w-full profile-avatar avatar-sam" alt="Sam profile"> |
| </div> |
| <div> |
| <div class="flex items-baseline"> |
| <span class="font-bold text-blue-400 mr-2">Sam (Historian)</span> |
| <span class="text-xs text-gray-500">10:46 AM</span> |
| </div> |
| <div class="mt-1 bg-gray-800 p-3 rounded-lg rounded-tl-none max-w-xs"> |
| I checked the campus archives. In 1972, a student died in that exact dorm room. Suicide... |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="message" data-user="Jordan"> |
| <div class="flex items-start"> |
| <div class="h-8 w-8 rounded-full bg-purple-900 flex items-center justify-center mr-3 relative overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" class="h-full w-full profile-avatar avatar-jordan" alt="Jordan profile"> |
| </div> |
| <div> |
| <div class="flex items-baseline"> |
| <span class="font-bold text-purple-400 mr-2">Jordan (Photog)</span> |
| <span class="text-xs text-gray-500">10:47 AM</span> |
| </div> |
| <div class="mt-1 bg-gray-800 p-3 rounded-lg rounded-tl-none max-w-xs"> |
| <p>I enhanced the image. Look at the face in the shadow! <span class="spoiler">Click to reveal</span></p> |
| <img src="https://source.unsplash.com/random/300x300/?scary,face" alt="Enhanced image" class="mt-2 w-full h-auto hidden enhanced-image"> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-center"> |
| <div class="bg-gray-800 border border-gray-700 rounded-lg p-4 w-full max-w-2xl mt-4 mb-2"> |
| <h3 class="font-bold text-lg mb-2 text-center text-red-400">What should we do?</h3> |
| <p class="text-sm text-gray-300 mb-4 text-center">Choose how to proceed with this investigation</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-3"> |
| <button class="decision-btn bg-red-900 hover:bg-red-800 text-white p-3 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-cross mr-2"></i> Call a priest for cleansing |
| </button> |
| <button class="decision-btn bg-blue-900 hover:bg-blue-800 text-white p-3 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-microphone-alt mr-2"></i> Conduct EVP session tonight |
| </button> |
| <button class="decision-btn bg-purple-900 hover:bg-purple-800 text-white p-3 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-camera mr-2"></i> Set up more cameras |
| </button> |
| <button class="decision-btn bg-yellow-900 hover:bg-yellow-800 text-white p-3 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-question-circle mr-2"></i> Research more history first |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div id="typing-indicator" class="flex items-center pl-11 py-2 hidden"> |
| <div class="flex space-x-1"> |
| <div class="h-8 w-8 rounded-full bg-purple-900 flex items-center justify-center mr-2 relative overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" class="h-full w-full profile-avatar avatar-jordan" alt="Jordan profile"> |
| </div> |
| <div class="text-sm text-gray-400 typing-indicator">Jordan is typing</div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4 bg-gray-800 border-t border-gray-700"> |
| <div id="reply-preview" class="hidden bg-gray-700 rounded-t-lg p-2 mb-1 text-sm flex justify-between items-center"> |
| <div> |
| <span class="font-medium text-red-400">Replying to Alex:</span> |
| <span class="text-gray-400 ml-2 truncate">Guys, you need to see what my night cam caught last night...</span> |
| </div> |
| <button id="cancel-reply" class="text-gray-400 hover:text-white"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="flex space-x-3"> |
| <div class="flex-grow relative image-upload rounded-lg" id="image-upload"> |
| <input type="file" id="file-input" accept="image/*"> |
| </div> |
| |
| <div class="flex-grow relative"> |
| <input type="text" id="message-input" placeholder="Type your message..." |
| class="w-full bg-gray-700 text-white rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-red-500"> |
| <div class="absolute right-3 top-3 flex space-x-2"> |
| <button class="emoji-btn text-gray-400 hover:text-white"> |
| <i class="far fa-grin"></i> |
| </button> |
| <button class="record-btn text-gray-400 hover:text-white"> |
| <i class="fas fa-microphone"></i> |
| </button> |
| </div> |
| </div> |
| |
| <button id="send-btn" class="bg-red-600 hover:bg-red-700 text-white rounded-lg px-5 transition"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| |
| <div class="flex justify-between mt-2 text-xs text-gray-400"> |
| <div>Press <span class="font-mono bg-gray-700 px-1 py-0.5 rounded">Shift+Enter</span> for new line</div> |
| <div class="flex items-center"> |
| <i class="fas fa-lock mr-1"></i> |
| <span>End-to-end encrypted</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const messageContainer = document.getElementById('message-container'); |
| messageContainer.scrollTop = messageContainer.scrollHeight; |
| |
| |
| document.querySelectorAll('.spoiler').forEach(spoiler => { |
| spoiler.addEventListener('click', function() { |
| this.classList.add('revealed'); |
| const img = this.closest('.message').querySelector('.enhanced-image'); |
| if(img) img.classList.remove('hidden'); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.decision-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| |
| document.querySelectorAll('.decision-btn').forEach(b => { |
| b.classList.remove('ring-2', 'ring-white', 'ring-opacity-50'); |
| }); |
| |
| |
| this.classList.add('ring-2', 'ring-white', 'ring-opacity-50'); |
| |
| |
| simulateGroupResponse(this.textContent.trim()); |
| }); |
| }); |
| |
| |
| const messageInput = document.getElementById('message-input'); |
| const sendBtn = document.getElementById('send-btn'); |
| |
| messageInput.addEventListener('keypress', function(e) { |
| if(e.key === 'Enter' && !e.shiftKey) { |
| e.preventDefault(); |
| sendMessage(); |
| } |
| }); |
| |
| sendBtn.addEventListener('click', sendMessage); |
| |
| |
| const imageUpload = document.getElementById('image-upload'); |
| const fileInput = document.getElementById('file-input'); |
| |
| imageUpload.addEventListener('click', function() { |
| fileInput.click(); |
| }); |
| |
| fileInput.addEventListener('change', function() { |
| if(this.files && this.files[0]) { |
| |
| const reader = new FileReader(); |
| reader.onload = function(e) { |
| addImageMessage(e.target.result); |
| } |
| reader.readAsDataURL(this.files[0]); |
| } |
| }); |
| |
| |
| setTimeout(() => { |
| document.getElementById('typing-indicator').classList.remove('hidden'); |
| |
| setTimeout(() => { |
| document.getElementById('typing-indicator').classList.add('hidden'); |
| |
| |
| addNewMessage('Jordan', ` |
| <p>Here's the enhanced image:</p> |
| <img src="https://source.unsplash.com/random/300x300/?ghost,face" alt="Enhanced ghost image" class="mt-2 w-full h-auto cursor-pointer hover:opacity-90 transition"> |
| <p class="text-xs text-gray-400 mt-1">Do you see the facial features? This is wild...</p> |
| `, true); |
| }, 2000); |
| }, 5000); |
| }); |
| |
| function sendMessage() { |
| const messageInput = document.getElementById('message-input'); |
| const message = messageInput.value.trim(); |
| |
| if(message !== '') { |
| addNewMessage('You', message); |
| messageInput.value = ''; |
| |
| |
| const messageContainer = document.getElementById('message-container'); |
| messageContainer.scrollTop = messageContainer.scrollHeight; |
| |
| |
| setTimeout(() => { |
| const randomResponses = [ |
| "Did anyone else feel that cold spot just now?", |
| "I'm reviewing the EVPs from last night... there's something there", |
| "My EMF detector just spiked!", |
| "Alex, can you check the thermal camera feed?", |
| "I think we should set up a vigil tonight.", |
| "I've got a bad feeling about this..." |
| ]; |
| |
| const randomUser = ['Taylor', 'Sam', 'Jordan', 'Casey'][Math.floor(Math.random() * 4)]; |
| const randomResponse = randomResponses[Math.floor(Math.random() * randomResponses.length)]; |
| |
| addNewMessage(randomUser, randomResponse); |
| }, 1000 + Math.random() * 3000); |
| } |
| } |
| |
| function addNewMessage(user, content, isImage = false) { |
| const messageContainer = document.getElementById('message-container'); |
| const typingIndicator = document.getElementById('typing-indicator'); |
| |
| if(typingIndicator.classList.contains('hidden')) { |
| typingIndicator.classList.remove('hidden'); |
| } else { |
| |
| setTimeout(() => { |
| addNewMessage(user, content, isImage); |
| }, 500); |
| return; |
| } |
| |
| setTimeout(() => { |
| typingIndicator.classList.add('hidden'); |
| |
| const userData = { |
| 'You': { |
| color: 'text-green-400', |
| bg: 'bg-green-900', |
| avatar: 'https://randomuser.me/api/portraits/women/44.jpg', |
| border: 'avatar-you' |
| }, |
| 'Alex': { |
| color: 'text-red-400', |
| bg: 'bg-red-900', |
| avatar: 'https://randomuser.me/api/portraits/men/32.jpg', |
| border: 'avatar-alex' |
| }, |
| 'Sam': { |
| color: 'text-blue-400', |
| bg: 'bg-blue-900', |
| avatar: 'https://randomuser.me/api/portraits/women/28.jpg', |
| border: 'avatar-sam' |
| }, |
| 'Jordan': { |
| color: 'text-purple-400', |
| bg: 'bg-purple-900', |
| avatar: 'https://randomuser.me/api/portraits/men/45.jpg', |
| border: 'avatar-jordan' |
| }, |
| 'Taylor': { |
| color: 'text-yellow-400', |
| bg: 'bg-yellow-900', |
| avatar: 'https://randomuser.me/api/portraits/women/63.jpg', |
| border: 'avatar-taylor' |
| }, |
| 'Casey': { |
| color: 'text-teal-400', |
| bg: 'bg-teal-900', |
| avatar: 'https://randomuser.me/api/portraits/men/75.jpg', |
| border: 'avatar-casey' |
| } |
| }; |
| |
| const now = new Date(); |
| const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); |
| |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = 'message animate-fade-in'; |
| messageDiv.setAttribute('data-user', user); |
| |
| let contentHtml = content; |
| let userTitle = user; |
| |
| if(user !== 'You') { |
| userTitle = user + (user === 'Alex' ? ' (Tech)' : |
| user === 'Sam' ? ' (Historian)' : |
| user === 'Jordan' ? ' (Photog)' : |
| user === 'Taylor' ? ' (Medium)' : ' (Medic)'); |
| } |
| |
| messageDiv.innerHTML = ` |
| <div class="flex items-start"> |
| <div class="h-8 w-8 rounded-full ${userData[user].bg} flex items-center justify-center mr-3 relative overflow-hidden"> |
| <img src="${userData[user].avatar}" class="h-full w-full profile-avatar ${userData[user].border}" alt="${user} profile"> |
| </div> |
| <div> |
| <div class="flex items-baseline"> |
| <span class="font-bold ${userData[user].color} mr-2">${userTitle}</span> |
| <span class="text-xs text-gray-500">${timeString}</span> |
| </div> |
| <div class="mt-1 bg-gray-800 p-3 rounded-lg ${user === 'You' ? 'rounded-tr-none bg-gray-700' : 'rounded-tl-none'} max-w-xs ${isImage ? 'p-0 overflow-hidden' : ''}"> |
| ${contentHtml} |
| </div> |
| </div> |
| </div> |
| `; |
| |
| messageContainer.appendChild(messageDiv); |
| messageContainer.scrollTop = messageContainer.scrollHeight; |
| |
| |
| messageDiv.querySelectorAll('.spoiler').forEach(spoiler => { |
| spoiler.addEventListener('click', function() { |
| this.classList.add('revealed'); |
| const img = this.closest('.message').querySelector('.enhanced-image'); |
| if(img) img.classList.remove('hidden'); |
| }); |
| }); |
| }, 500 + Math.random() * 1000); |
| } |
| |
| function addImageMessage(imageUrl) { |
| addNewMessage('You', ` |
| <img src="${imageUrl}" alt="Uploaded spooky image" class="w-full h-auto cursor-pointer hover:opacity-90 transition"> |
| <p class="text-sm mt-2">Check out what I just caught on camera...</p> |
| <p class="text-xs text-gray-400 mt-1">Click to enlarge</p> |
| `, true); |
| |
| |
| setTimeout(() => { |
| const shockedResponses = [ |
| "That's terrifying! Where was this taken?", |
| "I can see a face in the background!", |
| "The silhouette... it matches the 1972 victim's description", |
| "Why does it look like it's moving??", |
| "I'm getting chills just looking at this", |
| "We need to investigate this location immediately" |
| ]; |
| |
| const randomUser = ['Taylor', 'Sam', 'Jordan', 'Casey'][Math.floor(Math.random() * 4)]; |
| const randomResponse = shockedResponses[Math.floor(Math.random() * shockedResponses.length)]; |
| |
| addNewMessage(randomUser, randomResponse); |
| }, 1500); |
| } |
| |
| function simulateGroupResponse(decision) { |
| |
| addNewMessage('You', `I think we should: ${decision}`); |
| |
| |
| setTimeout(() => { |
| const responses = { |
| "Call a priest for cleansing": [ |
| {user: 'Taylor', text: "I agree. The energy here needs to be released properly."}, |
| {user: 'Alex', text: "But we should document everything first! This is evidence!"}, |
| {user: 'Sam', text: "I'll contact Father O'Malley. He's helped with cases like this before."} |
| ], |
| "Conduct EVP session tonight": [ |
| {user: 'Jordan', text: "I'll set up the recorders. Should we use the spirit box too?"}, |
| {user: 'Taylor', text: "Yes, and I'll bring my crystals for protection."}, |
| {user: 'Casey', text: "I'll be on standby with the first aid kit just in case..."} |
| ], |
| "Set up more cameras": [ |
| {user: 'Alex', text: "I've got thermal cams, full spectrum, and night vision ready."}, |
| {user: 'Jordan', text: "I'll position them to cover all angles this time."}, |
| {user: 'Sam', text: "We should also monitor the EMF levels continuously."} |
| ], |
| "Research more history first": [ |
| {user: 'Sam', text: "Good call. I'll dig deeper into the campus archives."}, |
| {user: 'Taylor', text: "Meanwhile, I'll try to communicate with the spirit remotely."}, |
| {user: 'Alex', text: "And I'll review all our existing footage for patterns."} |
| ] |
| }; |
| |
| const chosenResponses = responses[decision] || [ |
| {user: 'Taylor', text: "That's a reasonable approach."}, |
| {user: 'Alex', text: "Let's get to work then!"}, |
| {user: 'Jordan', text: "I'll prepare my equipment."} |
| ]; |
| |
| let delay = 1000; |
| chosenResponses.forEach(response => { |
| setTimeout(() => { |
| addNewMessage(response.user, response.text); |
| }, delay); |
| delay += 1500 + Math.random() * 1000; |
| }); |
| }, 800); |
| } |
| </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/spookchat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
