| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>FunBox Voice 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=Poppins:wght@300;400;500;600;700&display=swap'); |
| | |
| | body { |
| | font-family: 'Poppins', sans-serif; |
| | background-color: #1a1a2e; |
| | } |
| | |
| | |
| | ::-webkit-scrollbar { |
| | width: 8px; |
| | } |
| | |
| | ::-webkit-scrollbar-track { |
| | background: #16213e; |
| | } |
| | |
| | ::-webkit-scrollbar-thumb { |
| | background: #e94560; |
| | border-radius: 4px; |
| | } |
| | |
| | |
| | .voice-active { |
| | animation: pulse 1.5s infinite; |
| | } |
| | |
| | @keyframes pulse { |
| | 0%, 100% { |
| | box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.7); |
| | } |
| | 50% { |
| | box-shadow: 0 0 0 10px rgba(233, 69, 96, 0); |
| | } |
| | } |
| | |
| | |
| | .emoji-picker { |
| | display: none; |
| | position: absolute; |
| | bottom: 70px; |
| | right: 20px; |
| | width: 300px; |
| | background: #16213e; |
| | border-radius: 10px; |
| | padding: 10px; |
| | box-shadow: 0 5px 15px rgba(0,0,0,0.3); |
| | z-index: 100; |
| | } |
| | |
| | .emoji-picker.show { |
| | display: grid; |
| | grid-template-columns: repeat(6, 1fr); |
| | gap: 8px; |
| | } |
| | |
| | .emoji-btn { |
| | font-size: 24px; |
| | background: none; |
| | border: none; |
| | cursor: pointer; |
| | padding: 5px; |
| | border-radius: 5px; |
| | } |
| | |
| | .emoji-btn:hover { |
| | background: rgba(255,255,255,0.1); |
| | } |
| | |
| | |
| | .sound-effects { |
| | display: none; |
| | position: absolute; |
| | bottom: 70px; |
| | left: 20px; |
| | width: 250px; |
| | background: #16213e; |
| | border-radius: 10px; |
| | padding: 10px; |
| | box-shadow: 0 5px 15px rgba(0,0,0,0.3); |
| | z-index: 100; |
| | } |
| | |
| | .sound-effects.show { |
| | display: grid; |
| | grid-template-columns: repeat(2, 1fr); |
| | gap: 10px; |
| | } |
| | |
| | .sound-btn { |
| | background: #e94560; |
| | color: white; |
| | border: none; |
| | border-radius: 5px; |
| | padding: 8px; |
| | cursor: pointer; |
| | font-size: 12px; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | } |
| | |
| | .sound-btn:hover { |
| | background: #ff6b81; |
| | } |
| | </style> |
| | </head> |
| | <body class="text-white"> |
| | <div class="container mx-auto h-screen flex flex-col"> |
| | |
| | <header class="bg-[#16213e] p-4 shadow-lg"> |
| | <div class="flex justify-between items-center"> |
| | <div class="flex items-center space-x-2"> |
| | <i class="fas fa-comment-dots text-2xl text-[#e94560]"></i> |
| | <h1 class="text-xl font-bold">FunBox Voice Chat</h1> |
| | </div> |
| | <div class="flex space-x-4"> |
| | <button id="sound-effects-btn" class="bg-[#0f3460] hover:bg-[#1a56ac] px-4 py-2 rounded-full flex items-center"> |
| | <i class="fas fa-volume-up mr-2"></i> |
| | Sound Effects |
| | </button> |
| | <button id="invite-btn" class="bg-[#e94560] hover:bg-[#ff6b81] px-4 py-2 rounded-full"> |
| | <i class="fas fa-user-plus mr-2"></i> |
| | Invite Friends |
| | </button> |
| | </div> |
| | </div> |
| | </header> |
| | |
| | |
| | <main class="flex flex-1 overflow-hidden"> |
| | |
| | <aside class="w-64 bg-[#16213e] p-4 hidden md:block"> |
| | <div class="mb-6"> |
| | <h2 class="text-lg font-semibold mb-4">Participants (3)</h2> |
| | <div class="space-y-3"> |
| | <div class="flex items-center p-2 rounded-lg bg-[#1a1a2e]"> |
| | <div class="relative"> |
| | <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center"> |
| | <span class="font-bold">AJ</span> |
| | </div> |
| | <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full"></div> |
| | </div> |
| | <div class="ml-3"> |
| | <p class="font-medium">Alex Johnson</p> |
| | <p class="text-xs text-gray-400">Talking</p> |
| | </div> |
| | </div> |
| | <div class="flex items-center p-2 rounded-lg"> |
| | <div class="relative"> |
| | <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center"> |
| | <span class="font-bold">SM</span> |
| | </div> |
| | <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full"></div> |
| | </div> |
| | <div class="ml-3"> |
| | <p class="font-medium">Sam Miller</p> |
| | <p class="text-xs text-gray-400">Listening</p> |
| | </div> |
| | </div> |
| | <div class="flex items-center p-2 rounded-lg"> |
| | <div class="relative"> |
| | <div class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center"> |
| | <span class="font-bold">YT</span> |
| | </div> |
| | <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full"></div> |
| | </div> |
| | <div class="ml-3"> |
| | <p class="font-medium">Yourself</p> |
| | <p class="text-xs text-gray-400">Muted</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div> |
| | <h2 class="text-lg font-semibold mb-4">Fun Features</h2> |
| | <div class="grid grid-cols-2 gap-3"> |
| | <button class="bg-[#0f3460] hover:bg-[#1a56ac] p-2 rounded-lg flex flex-col items-center"> |
| | <i class="fas fa-gamepad text-xl mb-1"></i> |
| | <span class="text-xs">Games</span> |
| | </button> |
| | <button class="bg-[#0f3460] hover:bg-[#1a56ac] p-2 rounded-lg flex flex-col items-center"> |
| | <i class="fas fa-music text-xl mb-1"></i> |
| | <span class="text-xs">Music</span> |
| | </button> |
| | <button class="bg-[#0f3460] hover:bg-[#1a56ac] p-2 rounded-lg flex flex-col items-center"> |
| | <i class="fas fa-video text-xl mb-1"></i> |
| | <span class="text-xs">Video</span> |
| | </button> |
| | <button class="bg-[#0f3460] hover:bg-[#1a56ac] p-2 rounded-lg flex flex-col items-center"> |
| | <i class="fas fa-image text-xl mb-1"></i> |
| | <span class="text-xs">Memes</span> |
| | </button> |
| | </div> |
| | </div> |
| | </aside> |
| | |
| | |
| | <div class="flex-1 flex flex-col bg-[#1a1a2e]"> |
| | <div id="messages" class="flex-1 overflow-y-auto p-4 space-y-4"> |
| | |
| | <div class="text-center py-10"> |
| | <div class="inline-block bg-[#16213e] p-6 rounded-lg"> |
| | <i class="fas fa-comments text-5xl text-[#e94560] mb-4"></i> |
| | <h2 class="text-xl font-bold mb-2">Welcome to FunBox!</h2> |
| | <p class="text-gray-400">Start chatting with your friends or invite more to join!</p> |
| | <button class="mt-4 bg-[#e94560] hover:bg-[#ff6b81] px-6 py-2 rounded-full"> |
| | <i class="fas fa-user-plus mr-2"></i> |
| | Invite Friends |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="flex justify-start"> |
| | <div class="flex items-start"> |
| | <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center mr-3"> |
| | <span class="font-bold">SM</span> |
| | </div> |
| | <div class="max-w-xs md:max-w-md lg:max-w-lg bg-[#16213e] rounded-lg p-3"> |
| | <div class="font-medium text-sm mb-1">Sam Miller</div> |
| | <div class="text-sm">Hey everyone! How's it going? 😊</div> |
| | <div class="flex mt-2 space-x-2"> |
| | <button class="emoji-reaction text-xs">👍 2</button> |
| | <button class="emoji-reaction text-xs">❤️ 1</button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="flex justify-end"> |
| | <div class="flex items-start"> |
| | <div class="max-w-xs md:max-w-md lg:max-w-lg bg-[#e94560] rounded-lg p-3"> |
| | <div class="font-medium text-sm mb-1">You</div> |
| | <div class="text-sm">Pretty good! Just trying out this new voice chat app 🎤</div> |
| | <div class="flex mt-2 space-x-2"> |
| | <button class="emoji-reaction text-xs">😂 3</button> |
| | </div> |
| | </div> |
| | <div class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center ml-3"> |
| | <span class="font-bold">YT</span> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="flex justify-start"> |
| | <div class="flex items-start"> |
| | <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center mr-3"> |
| | <span class="font-bold">AJ</span> |
| | </div> |
| | <div class="max-w-xs md:max-w-md lg:max-w-lg bg-[#16213e] rounded-lg p-3"> |
| | <div class="font-medium text-sm mb-1">Alex Johnson</div> |
| | <div class="text-sm">This app looks awesome! Can't wait to try the voice chat 🔊</div> |
| | <div class="flex mt-2 space-x-2"> |
| | <button class="emoji-reaction text-xs">🔥 5</button> |
| | <button class="emoji-reaction text-xs">👏 2</button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-[#16213e] p-3 flex items-center justify-center space-x-6 border-t border-[#0f3460]"> |
| | <div class="flex items-center"> |
| | <div class="voice-indicator w-8 h-8 rounded-full bg-[#e94560] flex items-center justify-center"> |
| | <i class="fas fa-microphone-alt text-sm"></i> |
| | </div> |
| | <span class="ml-2 text-sm">Sam</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <div class="voice-indicator voice-active w-8 h-8 rounded-full bg-green-500 flex items-center justify-center"> |
| | <i class="fas fa-microphone-alt text-sm"></i> |
| | </div> |
| | <span class="ml-2 text-sm">Alex</span> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-[#16213e] p-4 border-t border-[#0f3460]"> |
| | <div class="flex items-center space-x-2"> |
| | <button id="emoji-btn" class="w-10 h-10 rounded-full bg-[#1a1a2e] flex items-center justify-center"> |
| | <i class="far fa-smile"></i> |
| | </button> |
| | <button id="record-btn" class="w-10 h-10 rounded-full bg-[#1a1a2e] flex items-center justify-center"> |
| | <i class="fas fa-microphone"></i> |
| | </button> |
| | <div class="flex-1 relative"> |
| | <input |
| | type="text" |
| | placeholder="Type a message..." |
| | class="w-full bg-[#1a1a2e] rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-[#e94560]" |
| | > |
| | <div class="absolute right-3 top-2 flex space-x-1"> |
| | <button class="w-6 h-6 rounded-full bg-[#e94560] flex items-center justify-center"> |
| | <i class="fas fa-paperclip text-xs"></i> |
| | </button> |
| | <button class="w-6 h-6 rounded-full bg-[#e94560] flex items-center justify-center"> |
| | <i class="fas fa-camera text-xs"></i> |
| | </button> |
| | </div> |
| | </div> |
| | <button class="w-10 h-10 rounded-full bg-[#e94560] flex items-center justify-center"> |
| | <i class="fas fa-paper-plane"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| | </div> |
| | |
| | |
| | <div id="emoji-picker" class="emoji-picker"> |
| | <button class="emoji-btn">😀</button> |
| | <button class="emoji-btn">😂</button> |
| | <button class="emoji-btn">😊</button> |
| | <button class="emoji-btn">😍</button> |
| | <button class="emoji-btn">🤔</button> |
| | <button class="emoji-btn">😎</button> |
| | <button class="emoji-btn">😢</button> |
| | <button class="emoji-btn">😡</button> |
| | <button class="emoji-btn">👍</button> |
| | <button class="emoji-btn">👎</button> |
| | <button class="emoji-btn">❤️</button> |
| | <button class="emoji-btn">🔥</button> |
| | <button class="emoji-btn">🎉</button> |
| | <button class="emoji-btn">🤣</button> |
| | <button class="emoji-btn">🙄</button> |
| | <button class="emoji-btn">😴</button> |
| | <button class="emoji-btn">👏</button> |
| | <button class="emoji-btn">🍕</button> |
| | <button class="emoji-btn">🎮</button> |
| | <button class="emoji-btn">🎤</button> |
| | <button class="emoji-btn">📷</button> |
| | <button class="emoji-btn">🎵</button> |
| | <button class="emoji-btn">🎧</button> |
| | <button class="emoji-btn">🏆</button> |
| | <button class="emoji-btn">🤯</button> |
| | <button class="emoji-btn">🦄</button> |
| | <button class="emoji-btn">🌈</button> |
| | <button class="emoji-btn">🚀</button> |
| | <button class="emoji-btn">🧀</button> |
| | <button class="emoji-btn">🤪</button> |
| | </div> |
| | |
| | |
| | <div id="sound-effects" class="sound-effects"> |
| | <button class="sound-btn" data-sound="applause"> |
| | <i class="fas fa-hands-clapping mr-1"></i> Applause |
| | </button> |
| | <button class="sound-btn" data-sound="laugh"> |
| | <i class="fas fa-laugh-squint mr-1"></i> Laugh |
| | </button> |
| | <button class="sound-btn" data-sound="boo"> |
| | <i class="fas fa-angry mr-1"></i> Boo |
| | </button> |
| | <button class="sound-btn" data-sound="gasp"> |
| | <i class="fas fa-surprise mr-1"></i> Gasp |
| | </button> |
| | <button class="sound-btn" data-sound="drumroll"> |
| | <i class="fas fa-drum mr-1"></i> Drumroll |
| | </button> |
| | <button class="sound-btn" data-sound="rimshot"> |
| | <i class="fas fa-drumstick-bite mr-1"></i> Rimshot |
| | </button> |
| | <button class="sound-btn" data-sound="tada"> |
| | <i class="fas fa-trophy mr-1"></i> Fanfare |
| | </button> |
| | <button class="sound-btn" data-sound="bing"> |
| | <i class="fas fa-bell mr-1"></i> Bing |
| | </button> |
| | </div> |
| | |
| | <script> |
| | document.addEventListener('DOMContentLoaded', function() { |
| | |
| | const emojiBtn = document.getElementById('emoji-btn'); |
| | const emojiPicker = document.getElementById('emoji-picker'); |
| | const messageInput = document.querySelector('input[type="text"]'); |
| | |
| | emojiBtn.addEventListener('click', function() { |
| | emojiPicker.classList.toggle('show'); |
| | soundEffects.classList.remove('show'); |
| | }); |
| | |
| | document.querySelectorAll('.emoji-btn').forEach(btn => { |
| | btn.addEventListener('click', function() { |
| | messageInput.value += this.textContent; |
| | messageInput.focus(); |
| | }); |
| | }); |
| | |
| | |
| | const soundEffectsBtn = document.getElementById('sound-effects-btn'); |
| | const soundEffects = document.getElementById('sound-effects'); |
| | |
| | soundEffectsBtn.addEventListener('click', function() { |
| | soundEffects.classList.toggle('show'); |
| | emojiPicker.classList.remove('show'); |
| | }); |
| | |
| | const audioContext = new (window.AudioContext || window.webkitAudioContext)(); |
| | |
| | document.querySelectorAll('.sound-btn').forEach(btn => { |
| | btn.addEventListener('click', function() { |
| | const soundType = this.getAttribute('data-sound'); |
| | playSoundEffect(soundType); |
| | |
| | |
| | addSystemMessage(`${this.textContent.trim()} sound played!`); |
| | }); |
| | }); |
| | |
| | function playSoundEffect(type) { |
| | const sounds = { |
| | applause: [1, 0, 0, 1, 0.5, 0.8, 0.2, 0.5], |
| | laugh: [1, 0, 0.5, 1, 0.8, 0.2, 0.3, 0.7], |
| | boo: [0.5, 1, 0, 0, 1, 0.2, 0.7, 0.3], |
| | gasp: [0, 0.7, 0.3, 0, 0.8, 0.5, 0.2, 1], |
| | drumroll: Array(8).fill(0.5), |
| | rimshot: Array(8).fill(0), |
| | tada: [1, 0, 1, 0, 1, 0.8, 0.5, 0.3], |
| | bing: [0, 0, 0, 0, 0, 0, 0, 1] |
| | }; |
| | |
| | sounds[type][7] = 1; |
| | |
| | const oscillator = audioContext.createOscillator(); |
| | const gainNode = audioContext.createGain(); |
| | |
| | oscillator.type = 'sine'; |
| | oscillator.frequency.value = type === 'bing' ? 1000 : 440; |
| | oscillator.connect(gainNode); |
| | gainNode.connect(audioContext.destination); |
| | |
| | oscillateGain(gainNode, sounds[type]); |
| | |
| | oscillator.start(); |
| | setTimeout(() => { |
| | oscillator.stop(); |
| | }, 800); |
| | } |
| | |
| | function oscillateGain(gainNode, pattern) { |
| | const times = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7]; |
| | gainNode.gain.setValueAtTime(0, audioContext.currentTime); |
| | |
| | pattern.forEach((val, i) => { |
| | gainNode.gain.linearRampToValueAtTime( |
| | val, |
| | audioContext.currentTime + times[i] |
| | ); |
| | }); |
| | } |
| | |
| | |
| | const recordBtn = document.getElementById('record-btn'); |
| | let isRecording = false; |
| | |
| | recordBtn.addEventListener('click', function() { |
| | isRecording = !isRecording; |
| | |
| | if (isRecording) { |
| | this.innerHTML = '<i class="fas fa-stop"></i>'; |
| | this.classList.add('bg-red-500'); |
| | addSystemMessage('Voice recording started...'); |
| | } else { |
| | this.innerHTML = '<i class="fas fa-microphone"></i>'; |
| | this.classList.remove('bg-red-500'); |
| | addSystemMessage('Voice recording stopped.'); |
| | } |
| | }); |
| | |
| | |
| | const sendBtn = document.querySelector('.fa-paper-plane').parentElement; |
| | |
| | sendBtn.addEventListener('click', function() { |
| | sendMessage(); |
| | }); |
| | |
| | messageInput.addEventListener('keypress', function(e) { |
| | if (e.key === 'Enter') { |
| | sendMessage(); |
| | } |
| | }); |
| | |
| | function sendMessage() { |
| | const message = messageInput.value.trim(); |
| | if (message) { |
| | addMessage(message, true); |
| | messageInput.value = ''; |
| | |
| | |
| | setTimeout(() => { |
| | const replies = [ |
| | "That's interesting!", |
| | "I agree!", |
| | "What do you mean by that?", |
| | "😂😂😂", |
| | "Let's try that!", |
| | "Sounds like fun!", |
| | "I'll get back to you on that.", |
| | "Cool! 🎉" |
| | ]; |
| | const randomReply = replies[Math.floor(Math.random() * replies.length)]; |
| | addMessage(randomReply, false); |
| | }, 1000); |
| | } |
| | } |
| | |
| | function addMessage(content, isCurrentUser) { |
| | const messagesContainer = document.getElementById('messages'); |
| | |
| | |
| | if (messagesContainer.children.length === 1 && |
| | messagesContainer.firstChild.classList.contains('text-center')) { |
| | messagesContainer.innerHTML = ''; |
| | } |
| | |
| | const messageDiv = document.createElement('div'); |
| | messageDiv.className = `flex justify-${isCurrentUser ? 'end' : 'start'}`; |
| | |
| | const initials = isCurrentUser ? 'YT' : 'SM'; |
| | const bgColor = isCurrentUser ? 'bg-[#e94560]' : 'bg-[#16213e]'; |
| | |
| | messageDiv.innerHTML = ` |
| | <div class="flex items-start"> |
| | ${!isCurrentUser ? ` |
| | <div class="w-10 h-10 rounded-full ${isCurrentUser ? 'bg-pink-500' : 'bg-blue-500'} flex items-center justify-center ${isCurrentUser ? 'ml-3' : 'mr-3'}"> |
| | <span class="font-bold">${initials}</span> |
| | </div> |
| | ` : ''} |
| | |
| | <div class="max-w-xs md:max-w-md lg:max-w-lg ${bgColor} rounded-lg p-3"> |
| | <div class="font-medium text-sm mb-1">${isCurrentUser ? 'You' : initials === 'SM' ? 'Sam Miller' : 'Alex Johnson'}</div> |
| | <div class="text-sm">${content}</div> |
| | <div class="flex mt-2 space-x-2"> |
| | <button class="emoji-reaction text-xs">👍 0</button> |
| | </div> |
| | </div> |
| | |
| | ${isCurrentUser ? ` |
| | <div class="w-10 h-10 rounded-full ${isCurrentUser ? 'bg-pink-500' : 'bg-blue-500'} flex items-center justify-center ${isCurrentUser ? 'ml-3' : 'mr-3'}"> |
| | <span class="font-bold">${initials}</span> |
| | </div> |
| | ` : ''} |
| | </div> |
| | `; |
| | |
| | messagesContainer.appendChild(messageDiv); |
| | messagesContainer.scrollTop = messagesContainer.scrollHeight; |
| | |
| | |
| | messageDiv.querySelector('.emoji-reaction').addEventListener('click', function() { |
| | const emojiArray = ['👍', '❤️', '😂', '😮', '😢']; |
| | const randomEmoji = emojiArray[Math.floor(Math.random() * emojiArray.length)]; |
| | |
| | |
| | const text = this.textContent.trim(); |
| | const count = parseInt(text.match(/\d+/)) || 0; |
| | |
| | |
| | this.innerHTML = `${randomEmoji} ${count + 1}`; |
| | }); |
| | } |
| | |
| | function addSystemMessage(content) { |
| | const messagesContainer = document.getElementById('messages'); |
| | |
| | const systemDiv = document.createElement('div'); |
| | systemDiv.className = 'flex justify-center'; |
| | |
| | systemDiv.innerHTML = ` |
| | <div class="bg-[#0f3460] text-gray-300 text-xs px-3 py-1 rounded-full"> |
| | ${content} |
| | </div> |
| | `; |
| | |
| | messagesContainer.appendChild(systemDiv); |
| | messagesContainer.scrollTop = messagesContainer.scrollHeight; |
| | } |
| | |
| | |
| | document.addEventListener('click', function(e) { |
| | if (!emojiBtn.contains(e.target) && !emojiPicker.contains(e.target)) { |
| | emojiPicker.classList.remove('show'); |
| | } |
| | |
| | if (!soundEffectsBtn.contains(e.target) && !soundEffects.contains(e.target)) { |
| | soundEffects.classList.remove('show'); |
| | } |
| | }); |
| | |
| | |
| | setInterval(() => { |
| | document.querySelectorAll('.voice-indicator').forEach(indicator => { |
| | |
| | if (Math.random() < 0.3) { |
| | indicator.classList.toggle('voice-active'); |
| | } |
| | }); |
| | }, 3000); |
| | }); |
| | </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=Vicky8860/vk" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
