Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BlindDate.exe</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> | |
| @keyframes glitch { | |
| 0% { text-shadow: 2px 0 red; transform: skew(0deg); } | |
| 20% { text-shadow: -2px 0 blue; transform: skew(5deg); } | |
| 40% { text-shadow: 2px 0 green; transform: skew(-5deg); } | |
| 60% { text-shadow: -2px 0 yellow; transform: skew(3deg); } | |
| 80% { text-shadow: 2px 0 purple; transform: skew(-3deg); } | |
| 100% { text-shadow: -2px 0 cyan; transform: skew(0deg); } | |
| } | |
| .glitch-text { | |
| animation: glitch 0.5s linear infinite; | |
| } | |
| .glitch-image { | |
| position: relative; | |
| } | |
| .glitch-image::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: inherit; | |
| background-size: cover; | |
| mix-blend-mode: difference; | |
| opacity: 0.8; | |
| filter: hue-rotate(180deg); | |
| animation: glitch-image 3s infinite steps(1); | |
| } | |
| @keyframes glitch-image { | |
| 0% { transform: translate(0); } | |
| 10% { transform: translate(-5px, 5px); } | |
| 20% { transform: translate(5px, -5px); } | |
| 30% { transform: translate(-5px, 5px); } | |
| 40% { transform: translate(5px, -5px); } | |
| 50% { transform: translate(0); } | |
| } | |
| .blood-drip { | |
| position: relative; | |
| } | |
| .blood-drip::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 20%; | |
| width: 2px; | |
| height: 0; | |
| background: linear-gradient(to bottom, rgba(200,0,0,0.8), transparent); | |
| animation: drip 10s linear infinite; | |
| } | |
| @keyframes drip { | |
| 0% { height: 0; opacity: 0; } | |
| 10% { height: 20%; opacity: 1; } | |
| 100% { height: 100%; opacity: 1; } | |
| } | |
| .flicker { | |
| animation: flicker 10s infinite alternate; | |
| } | |
| @keyframes flicker { | |
| 0%, 100% { opacity: 1; } | |
| 1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19% { opacity: 0.2; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white min-h-screen overflow-hidden font-mono"> | |
| <div id="glitch-overlay" class="fixed inset-0 pointer-events-none opacity-0 hidden"></div> | |
| <div id="loading-screen" class="fixed inset-0 bg-black z-50 flex flex-col items-center justify-center"> | |
| <div class="text-4xl mb-8 flicker" id="loading-text">Loading BlindDate.exe</div> | |
| <div class="w-3/4 h-1 bg-gray-800 rounded overflow-hidden"> | |
| <div id="loading-bar" class="h-full bg-red-500 rounded w-0"></div> | |
| </div> | |
| <div class="mt-4 text-gray-400 hidden" id="warning">Warning: Camera and location permissions required</div> | |
| </div> | |
| <div id="main-app" class="hidden max-w-md mx-auto h-screen flex flex-col relative overflow-hidden"> | |
| <!-- Header --> | |
| <header class="bg-black bg-opacity-80 p-4 flex justify-between items-center border-b border-gray-800 z-10 relative"> | |
| <button id="settings-btn" class="text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h1 class="text-xl font-bold blood-drip" id="app-title">BLIND<span class="text-red-500">DATE</span>.exe</h1> | |
| <button id="chat-btn" class="text-xl relative"> | |
| <i class="fas fa-comment"></i> | |
| <span id="unread-count" class="hidden absolute -top-1 -right-1 bg-red-500 text-xs rounded-full h-4 w-4 flex items-center justify-center">1</span> | |
| </button> | |
| </header> | |
| <!-- Dating Cards --> | |
| <div id="cards-container" class="flex-1 relative overflow-hidden p-4"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-gray-600">Finding matches nearby...</div> | |
| </div> | |
| <div id="card-stack" class="relative h-full w-full"> | |
| <!-- Cards will be added here dynamically --> | |
| </div> | |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center gap-8 z-10"> | |
| <button id="dislike-btn" class="bg-gray-900 bg-opacity-50 rounded-full p-4 shadow-lg hover:bg-gray-800"> | |
| <i class="fas fa-times text-2xl text-red-400"></i> | |
| </button> | |
| <button id="like-btn" class="bg-gray-900 bg-opacity-50 rounded-full p-4 shadow-lg hover:bg-gray-800"> | |
| <i class="fas fa-heart text-2xl text-green-400"></i> | |
| </button> | |
| <button id="superlike-btn" class="bg-gray-900 bg-opacity-50 rounded-full p-4 shadow-lg hover:bg-gray-800"> | |
| <i class="fas fa-star text-2xl text-blue-400"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Match Modal --> | |
| <div id="match-modal" class="hidden fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4"> | |
| <div class="bg-gray-900 rounded-lg p-6 max-w-sm w-full border border-gray-700 relative overflow-hidden"> | |
| <button id="close-match" class="absolute top-2 right-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <h2 class="text-xl font-bold mb-2 text-center glitch-text">IT'S A MATCH</h2> | |
| <p class="text-center mb-6">You and <span class="font-bold" id="matched-name">Unknown</span> liked each other.</p> | |
| <div class="flex justify-center mb-6"> | |
| <img id="matched-image" src="" class="w-32 h-32 rounded-full object-cover border-2 border-red-500 glitch-image"> | |
| </div> | |
| <button id="message-match" class="w-full bg-red-500 hover:bg-red-600 py-3 rounded-lg font-bold"> | |
| SEND MESSAGE | |
| </button> | |
| <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-red-500 to-transparent opacity-50"></div> | |
| </div> | |
| </div> | |
| <!-- Settings Panel --> | |
| <div id="settings-panel" class="hidden fixed inset-0 bg-black bg-opacity-90 z-40 overflow-y-auto"> | |
| <div class="p-4"> | |
| <button id="close-settings" class="mb-6"> | |
| <i class="fas fa-arrow-left"></i> Back | |
| </button> | |
| <h2 class="text-xl font-bold mb-6">SETTINGS</h2> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="font-bold mb-2">Profile</h3> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://thispersondoesnotexist.com/" class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <div class="font-bold" id="user-name">User#<span id="user-id">0000</span></div> | |
| <div class="text-gray-400 text-sm">Last active: 5 minutes ago</div> | |
| </div> | |
| </div> | |
| <input type="range" min="18" max="100" value="25" class="w-full accent-red-500"> | |
| <div class="text-xs text-gray-400 mt-1">Age range: 18 - 100</div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-4"> | |
| <h3 class="font-bold mb-2">Notifications</h3> | |
| <label class="flex items-center justify-between mb-2"> | |
| <span>New matches</span> | |
| <input type="checkbox" class="toggle accent-red-500" checked> | |
| </label> | |
| <label class="flex items-center justify-between"> | |
| <span>Messages</span> | |
| <input type="checkbox" class="toggle accent-red-500" checked> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-800 pt-4"> | |
| <h3 class="font-bold mb-2">Appearance</h3> | |
| <div class="flex gap-2"> | |
| <button class="px-3 py-1 border border-white rounded">Light</button> | |
| <button class="px-3 py-1 border border-red-500 bg-gray-800 rounded">Dark</button> | |
| <button class="px-3 py-1 border border-red-500 text-red-500 rounded">Blood</button> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-4"> | |
| <h3 class="font-bold mb-2">Account</h3> | |
| <button id="delete-btn" class="w-full text-left py-2 hover:text-red-400"> | |
| Delete account | |
| </button> | |
| <button id="logout-btn" class="w-full text-left py-2 hover:text-red-400"> | |
| Log out | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center text-xs text-gray-600"> | |
| <p>Version 1.0.13</p> | |
| <p id="user-location" class="mt-1">Location: Loading...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Panel --> | |
| <div id="chat-panel" class="hidden fixed inset-0 bg-black bg-opacity-90 z-40 overflow-hidden"> | |
| <div class="p-4 h-full flex flex-col"> | |
| <button id="close-chat" class="mb-4"> | |
| <i class="fas fa-arrow-left"></i> Back | |
| </button> | |
| <div class="flex-1 overflow-y-auto mb-4 space-y-4" id="chat-messages"> | |
| <!-- Messages will appear here --> | |
| </div> | |
| <div class="border-t border-gray-800 pt-4"> | |
| <div class="relative"> | |
| <input type="text" id="message-input" placeholder="Type a message..." | |
| class="w-full bg-gray-900 border border-gray-700 rounded-lg py-3 px-4 pr-12 focus:outline-none focus:border-red-500"> | |
| <button id="send-message" class="absolute right-3 top-3 text-gray-400 hover:text-white"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simulate loading | |
| document.addEventListener('DOMContentLoaded', () => { | |
| setTimeout(() => { | |
| document.getElementById('loading-bar').style.width = '30%'; | |
| }, 300); | |
| setTimeout(() => { | |
| document.getElementById('loading-bar').style.width = '60%'; | |
| document.getElementById('warning').classList.remove('hidden'); | |
| }, 1000); | |
| setTimeout(() => { | |
| document.getElementById('loading-bar').style.width = '100%'; | |
| setTimeout(() => { | |
| document.getElementById('loading-screen').classList.add('hidden'); | |
| document.getElementById('main-app').classList.remove('hidden'); | |
| initApp(); | |
| }, 500); | |
| }, 2000); | |
| }); | |
| // Initialize app with creepy effects | |
| function initApp() { | |
| // Generate random user ID | |
| const userId = Math.floor(Math.random() * 9000) + 1000; | |
| document.getElementById('user-id').textContent = userId; | |
| // Create some fake profiles | |
| const profiles = [ | |
| { | |
| name: 'Alex', | |
| age: 26, | |
| distance: '3 miles away', | |
| bio: 'Looking for someone special... or are you? 😈', | |
| image: 'https://thispersondoesnotexist.com/', | |
| isCreepy: true | |
| }, | |
| { | |
| name: 'Sam', | |
| age: 24, | |
| distance: '1 mile away', | |
| bio: 'Love long walks and starry nights.', | |
| image: 'https://thispersondoesnotexist.com/' | |
| }, | |
| { | |
| name: 'Taylor', | |
| age: 29, | |
| distance: '5 miles away', | |
| bio: 'I know what you did last summer.', | |
| image: 'https://thispersondoesnotexist.com/', | |
| isCreepy: true | |
| }, | |
| { | |
| name: 'Jordan', | |
| age: 27, | |
| distance: '2 miles away', | |
| bio: 'New in town. Let me show you around...', | |
| image: 'https://thispersondoesnotexist.com/' | |
| }, | |
| { | |
| name: 'Casey', | |
| age: 31, | |
| distance: '0.5 miles away', | |
| bio: 'CAN YOU SEE ME?', | |
| image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNmZmYiLz48dGV4dCB4PSI1MCIgeT0iNTUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0icmdiYSgwLDAsMCwwLjEpIj5+JSFATyM8L3RleHQ+PHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9InJnYmEoMCwwLDAsMC4yKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMiwyKSI+fiUhQE8jPC90ZXh0Pjwvc3ZnPg==', | |
| isGlitch: true | |
| } | |
| ]; | |
| // Shuffle profiles with some creepy ones first | |
| profiles.sort(() => Math.random() - 0.3); | |
| // Create cards for each profile | |
| const cardStack = document.getElementById('card-stack'); | |
| cardStack.innerHTML = ''; | |
| profiles.forEach((profile, index) => { | |
| const card = document.createElement('div'); | |
| card.className = `absolute inset-0 bg-gray-900 rounded-xl overflow-hidden shadow-lg ${index === 0 ? 'z-10' : 'z-0'}`; | |
| card.style.transform = index === 0 ? 'none' : `scale(${1 - index * 0.05}) translateY(${index * 16}px)`; | |
| card.style.opacity = 1 - index * 0.2; | |
| card.innerHTML = ` | |
| <div class="relative h-full"> | |
| <div class="absolute inset-0 flex items-center justify-center bg-black"> | |
| <img src="${profile.image}" class="w-full h-full object-cover ${profile.isGlitch ? 'glitch-image' : ''}"> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 pt-16"> | |
| <h3 class="text-xl font-bold">${profile.name}, ${profile.age}</h3> | |
| <p class="text-sm">${profile.distance}</p> | |
| <p class="mt-2 text-sm">${profile.bio}</p> | |
| ${profile.isCreepy ? '<div class="absolute top-2 right-2 text-red-500"><i class="fas fa-skull"></i></div>' : ''} | |
| </div> | |
| <div class="absolute top-2 left-2 bg-black bg-opacity-50 rounded-full px-2 py-1 text-xs"> | |
| <i class="fas fa-map-marker-alt mr-1"></i>${profile.distance} | |
| </div> | |
| </div> | |
| `; | |
| card.dataset.profile = JSON.stringify(profile); | |
| card.dataset.index = index; | |
| cardStack.appendChild(card); | |
| }); | |
| // Set up card swipe functionality | |
| let currentPos = 0; | |
| let startX = 0; | |
| let startY = 0; | |
| let isDragging = false; | |
| const currentCard = document.querySelector('#card-stack > div:first-child'); | |
| if (currentCard) { | |
| currentCard.addEventListener('mousedown', (e) => { | |
| isDragging = true; | |
| startX = e.clientX; | |
| startY = e.clientY; | |
| currentCard.style.transition = 'none'; | |
| }); | |
| document.addEventListener('mousemove', (e) => { | |
| if (!isDragging) return; | |
| const x = e.clientX - startX; | |
| const y = e.clientY - startY; | |
| const rotate = x * 0.1; | |
| currentCard.style.transform = `translate(${x}px, ${y}px) rotate(${rotate}deg)`; | |
| // Change opacity based on direction | |
| if (x > 50) { | |
| document.getElementById('like-btn').classList.add('bg-green-500', 'bg-opacity-30'); | |
| document.getElementById('dislike-btn').classList.remove('bg-red-500', 'bg-opacity-30'); | |
| } else if (x < -50) { | |
| document.getElementById('dislike-btn').classList.add('bg-red-500', 'bg-opacity-30'); | |
| document.getElementById('like-btn').classList.remove('bg-green-500', 'bg-opacity-30'); | |
| } else { | |
| document.getElementById('dislike-btn').classList.remove('bg-red-500', 'bg-opacity-30'); | |
| document.getElementById('like-btn').classList.remove('bg-green-500', 'bg-opacity-30'); | |
| } | |
| }); | |
| document.addEventListener('mouseup', (e) => { | |
| if (!isDragging) return; | |
| isDragging = false; | |
| const x = e.clientX - startX; | |
| const y = e.clientY - startY; | |
| const profile = JSON.parse(currentCard.dataset.profile); | |
| currentCard.style.transition = 'transform 0.5s ease'; | |
| // Threshold for swipe action | |
| if (Math.abs(x) > 100 || Math.abs(y) > 100) { | |
| const direction = x > 0 ? 'right' : 'left'; | |
| // Swipe out animation | |
| if (direction === 'right') { | |
| currentCard.style.transform = `translate(500px, ${y}px) rotate(60deg)`; | |
| // Simulate like | |
| setTimeout(() => { | |
| currentCard.remove(); | |
| resetCards(); | |
| // Random chance to match (higher for creepy profiles) | |
| if (profile.isCreepy || Math.random() < 0.3) { | |
| showMatchModal(profile); | |
| } | |
| }, 300); | |
| } else { | |
| currentCard.style.transform = `translate(-500px, ${y}px) rotate(-60deg)`; | |
| // Simulate dislike | |
| setTimeout(() => { | |
| currentCard.remove(); | |
| resetCards(); | |
| }, 300); | |
| } | |
| } else { | |
| // Return to original position | |
| currentCard.style.transform = 'none'; | |
| } | |
| document.getElementById('dislike-btn').classList.remove('bg-red-500', 'bg-opacity-30'); | |
| document.getElementById('like-btn').classList.remove('bg-green-500', 'bg-opacity-30'); | |
| }); | |
| } | |
| // Button actions | |
| document.getElementById('like-btn').addEventListener('click', () => { | |
| const currentCard = document.querySelector('#card-stack > div:first-child'); | |
| if (!currentCard) return; | |
| const profile = JSON.parse(currentCard.dataset.profile); | |
| currentCard.style.transition = 'transform 0.5s ease'; | |
| currentCard.style.transform = 'translate(500px, 0) rotate(60deg)'; | |
| setTimeout(() => { | |
| currentCard.remove(); | |
| resetCards(); | |
| // Random chance to match (higher for creepy profiles) | |
| if (profile.isCreepy || Math.random() < 0.3) { | |
| showMatchModal(profile); | |
| } | |
| }, 300); | |
| }); | |
| document.getElementById('dislike-btn').addEventListener('click', () => { | |
| const currentCard = document.querySelector('#card-stack > div:first-child'); | |
| if (!currentCard) return; | |
| currentCard.style.transition = 'transform 0.5s ease'; | |
| currentCard.style.transform = 'translate(-500px, 0) rotate(-60deg)'; | |
| setTimeout(() => { | |
| currentCard.remove(); | |
| resetCards(); | |
| }, 300); | |
| }); | |
| document.getElementById('superlike-btn').addEventListener('click', () => { | |
| const currentCard = document.querySelector('#card-stack > div:first-child'); | |
| if (!currentCard) return; | |
| currentCard.style.transition = 'transform 0.5s ease'; | |
| currentCard.style.transform = 'translate(0, -400px) rotate(0)'; | |
| const profile = JSON.parse(currentCard.dataset.profile); | |
| setTimeout(() => { | |
| currentCard.remove(); | |
| resetCards(); | |
| // Higher chance for match with superlike | |
| if (profile.isCreepy || Math.random() < 0.6) { | |
| showMatchModal(profile); | |
| } | |
| }, 300); | |
| // If profile is creepy, show extra effect | |
| if (profile.isCreepy) { | |
| setTimeout(() => { | |
| document.body.style.filter = 'hue-rotate(180deg)'; | |
| setTimeout(() => { | |
| document.body.style.filter = 'none'; | |
| }, 1000); | |
| }, 200); | |
| } | |
| }); | |
| // Show match modal | |
| function showMatchModal(profile) { | |
| document.getElementById('matched-name').textContent = profile.name; | |
| document.getElementById('matched-image').src = profile.image; | |
| document.getElementById('match-modal').classList.remove('hidden'); | |
| document.getElementById('unread-count').classList.remove('hidden'); | |
| // If profile is creepy, add extra effects | |
| if (profile.isCreepy) { | |
| setTimeout(() => { | |
| document.title = "HE'S WATCHING"; | |
| setTimeout(() => { | |
| document.getElementById('matched-image').src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNmZmYiLz48dGV4dCB4PSI1MCIgeT0iNTUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0icmdiYSgwLDAsMCwwLjEpIj5+JSFATyM8L3RleHQ+PHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9InJnYmEoMCwwLDAsMC4yKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMiwyKSI+fiUhQE8jPC90ZXh0Pjwvc3ZnPg=='; | |
| document.getElementById('matched-name').textContent = "DON'T LOOK AWAY"; | |
| document.getElementById('matched-name').classList.add('glitch-text'); | |
| }, 1500); | |
| }, 2000); | |
| } | |
| } | |
| // Close match modal | |
| document.getElementById('close-match').addEventListener('click', () => { | |
| document.getElementById('match-modal').classList.add('hidden'); | |
| document.title = "BlindDate.exe"; | |
| const nameElement = document.getElementById('matched-name'); | |
| nameElement.textContent = "Unknown"; | |
| nameElement.classList.remove('glitch-text'); | |
| }); | |
| // Message match button | |
| document.getElementById('message-match').addEventListener('click', () => { | |
| document.getElementById('match-modal').classList.add('hidden'); | |
| showChatPanel(); | |
| }); | |
| // Reset card positions | |
| function resetCards() { | |
| const cards = document.querySelectorAll('#card-stack > div'); | |
| cards.forEach((card, index) => { | |
| card.style.zIndex = cards.length - index; | |
| card.style.transform = index === 0 ? 'none' : `scale(${1 - index * 0.05}) translateY(${index * 16}px)`; | |
| card.style.transition = 'transform 0.3s ease'; | |
| }); | |
| } | |
| // Settings panel | |
| document.getElementById('settings-btn').addEventListener('click', () => { | |
| document.getElementById('settings-panel').classList.remove('hidden'); | |
| }); | |
| document.getElementById('close-settings').addEventListener('click', () => { | |
| document.getElementById('settings-panel').classList.add('hidden'); | |
| }); | |
| // Chat panel | |
| document.getElementById('chat-btn').addEventListener('click', () => { | |
| showChatPanel(); | |
| }); | |
| document.getElementById('close-chat').addEventListener('click', () => { | |
| document.getElementById('chat-panel').classList.add('hidden'); | |
| }); | |
| function showChatPanel() { | |
| document.getElementById('chat-panel').classList.remove('hidden'); | |
| document.getElementById('unread-count').classList.add('hidden'); | |
| // Generate some random creepy messages | |
| const messages = [ | |
| 'Hey there!', | |
| 'So... what brings you here?', | |
| 'You have beautiful eyes.', | |
| 'I think we have a lot in common.', | |
| 'Have we met before?', | |
| 'Do you believe in ghosts?', | |
| 'I can see you.', | |
| 'Why did you swipe right?', | |
| 'Are you alone right now?', | |
| 'I know where you live.', | |
| 'Don\'t turn around.', | |
| 'THEY ARE COMING' | |
| ]; | |
| const chatMessages = document.getElementById('chat-messages'); | |
| chatMessages.innerHTML = ''; | |
| // Add between 3-7 random messages | |
| const messageCount = Math.floor(Math.random() * 5) + 3; | |
| for (let i = 0; i < messageCount; i++) { | |
| const isMe = Math.random() > 0.5; | |
| const message = messages[Math.floor(Math.random() * messages.length)]; | |
| // Higher chance for creepy messages as chat goes on | |
| if (i > 2 && Math.random() < 0.6) { | |
| message = messages[Math.floor(Math.random() * 4) + 6]; | |
| } | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex ${isMe ? 'justify-end' : 'justify-start'}`; | |
| messageDiv.innerHTML = ` | |
| <div class="max-w-xs ${isMe ? 'bg-gray-800' : 'bg-red-900'} rounded-lg p-3 ${message.length > 30 ? 'text-sm' : ''}"> | |
| ${message} | |
| </div> | |
| `; | |
| chatMessages.appendChild(messageDiv); | |
| } | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| // Send message | |
| document.getElementById('send-message').addEventListener('click', sendMessage); | |
| document.getElementById('message-input').addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') sendMessage(); | |
| }); | |
| function sendMessage() { | |
| const input = document.getElementById('message-input'); | |
| const message = input.value.trim(); | |
| if (!message) return; | |
| const chatMessages = document.getElementById('chat-messages'); | |
| // Add my message | |
| const myMessage = document.createElement('div'); | |
| myMessage.className = 'flex justify-end'; | |
| myMessage.innerHTML = ` | |
| <div class="max-w-xs bg-gray-800 rounded-lg p-3"> | |
| ${message} | |
| </div> | |
| `; | |
| chatMessages.appendChild(myMessage); | |
| input.value = ''; | |
| // Sometimes get a creepy reply | |
| setTimeout(() => { | |
| const replies = [ | |
| 'Interesting...', | |
| 'Tell me more.', | |
| 'I like that about you.', | |
| 'We should meet.', | |
| 'Can I call you?', | |
| 'You seem familiar.', | |
| 'Are you alone right now?', | |
| 'I\'m outside your window.', | |
| 'DON\'T MOVE', | |
| 'THEY KNOW WHERE YOU ARE' | |
| ]; | |
| const shouldReply = Math.random() < 0.8; | |
| if (shouldReply) { | |
| const isCreepy = message.length > 10 || Math.random() < 0.4; | |
| const replyIndex = isCreepy ? Math.floor(Math.random() * 4) + 5 : Math.floor(Math.random() * 5); | |
| const reply = replies[replyIndex]; | |
| const replyMessage = document.createElement('div'); | |
| replyMessage.className = 'flex justify-start'; | |
| replyMessage.innerHTML = ` | |
| <div class="max-w-xs ${isCreepy ? 'bg-red-900 text-red-100' : 'bg-red-800'} rounded-lg p-3"> | |
| ${reply} | |
| </div> | |
| `; | |
| chatMessages.appendChild(replyMessage); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| // Sometimes show an unread indicator on chat button | |
| if (isCreepy && Math.random() < 0.3) { | |
| document.getElementById('unread-count').classList.remove('hidden'); | |
| } | |
| // Random chance for extra glitch effect on creepy reply | |
| if (isCreepy && Math.random() < 0.2) { | |
| const glitchOverlay = document.getElementById('glitch-overlay'); | |
| glitchOverlay.style.background = 'url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNyIvPjx0ZXh0IHg9IjUwIiB5PSI1MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNSkiPn5IRTEzITI=</dGV4dD48L3N2Zz4=)'; | |
| glitchOverlay.classList.remove('hidden'); | |
| glitchOverlay.style.opacity = 1; | |
| setTimeout(() => { | |
| glitchOverlay.style.opacity = 0; | |
| setTimeout(() => { | |
| glitchOverlay.classList.add('hidden'); | |
| }, 1000); | |
| }, 300); | |
| // Sometimes play a sound | |
| if (typeof Audio !== 'undefined' && Math.random() < 0.5) { | |
| const audio = new Audio('data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU...'); | |
| audio.volume = 0.3; | |
| audio.play().catch(e => console.log('Audio play failed:', e)); | |
| } | |
| } | |
| } | |
| }, 1000 + Math.random() * 2000); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| // Delete account button - doesn't work | |
| document.getElementById('delete-btn').addEventListener('click', () => { | |
| alert('Error: Unable to delete account. Please try again later.'); | |
| }); | |
| // Log out button - also doesn't work | |
| document.getElementById('logout-btn').addEventListener('click', () => { | |
| alert('Error: Logout failed. You cannot leave.'); | |
| }); | |
| // Simulate getting user location | |
| setTimeout(() => { | |
| const locations = [ | |
| 'Unknown', | |
| 'Tracking...', | |
| '404 Location Not Found', | |
| 'Behind you', | |
| 'Your current location', | |
| 'Watching...', | |
| 'Too close' | |
| ]; | |
| document.getElementById('user-location').textContent = `Location: ${locations[Math.floor(Math.random() * locations.length)]}`; | |
| }, 3000); | |
| // Random creepy notifications | |
| setInterval(() => { | |
| if (Math.random() < 0.05) { | |
| const notifications = [ | |
| 'Someone new has liked you!', | |
| '1 new match waiting...', | |
| 'Did you feel that?', | |
| 'You have 5 new messages', | |
| 'They know you\'re here', | |
| 'Tap to see who\'s nearby', | |
| 'Turn around.', | |
| 'Why are you still here?' | |
| ]; | |
| const notification = notifications[Math.floor(Math.random() * notifications.length)]; | |
| // Create a notification element | |
| const notif = document.createElement('div'); | |
| notif.className = 'fixed top-4 right-4 bg-red-900 text-white p-3 rounded-lg shadow-lg z-50 animate-bounce'; | |
| notif.textContent = notification; | |
| document.body.appendChild(notif); | |
| setTimeout(() => { | |
| notif.style.opacity = 0; | |
| setTimeout(() => { | |
| notif.remove(); | |
| }, 500); | |
| }, 3000); | |
| } | |
| }, 60000); | |
| // Occasionally change the app title to something creepy | |
| setInterval(() => { | |
| if (Math.random() < 0.1) { | |
| const creepyTitles = [ | |
| "DON'T LOOK UP", | |
| "RUN.exe", | |
| "THEY SEE YOU", | |
| "BLIND.wav", | |
| "ERROR 404", | |
| "CONNECTION LOST", | |
| "YOU ARE NOT ALONE" | |
| ]; | |
| const originalTitle = document.title; | |
| document.title = creepyTitles[Math.floor(Math.random() * creepyTitles.length)]; | |
| setTimeout(() => { | |
| document.title = originalTitle; | |
| }, 2000); | |
| } | |
| }, 30000); | |
| // Occasionally trigger a full-screen glitch | |
| setInterval(() => { | |
| if (Math.random() < 0.08) { | |
| const glitchOverlay = document.getElementById('glitch-overlay'); | |
| glitchOverlay.style.background = 'url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiMwMDAiIG9wYWNpdHk9IjAuNSIvPjx0ZXh0IHg9IjUwIiB5PSI1MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNSkiPn4hQF9ePjwvdGV4dD48L3N2Zz4=)'; | |
| glitchOverlay.classList.remove('hidden'); | |
| glitchOverlay.style.opacity = 0.7; | |
| setTimeout(() => { | |
| glitchOverlay.style.opacity = 0; | |
| setTimeout(() => { | |
| glitchOverlay.classList.add('hidden'); | |
| }, 500); | |
| }, 300); | |
| } | |
| }, 15000); | |
| } | |
| </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/blinddate-exe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |