| <!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> |
