|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ConnectMe - Random Video 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> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
} |
|
|
.chat-container { |
|
|
height: calc(100vh - 80px); |
|
|
} |
|
|
.video-container { |
|
|
position: relative; |
|
|
padding-bottom: 56.25%; |
|
|
height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
.video-container video { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
} |
|
|
.floating-input { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.floating-input:focus ~ label, |
|
|
.floating-input:not(:placeholder-shown) ~ label { |
|
|
transform: translateY(-1.5rem) scale(0.85); |
|
|
color: #667eea; |
|
|
} |
|
|
.toggle-form { |
|
|
display: none; |
|
|
} |
|
|
.toggle-form:checked + .form-container { |
|
|
display: block; |
|
|
} |
|
|
.shake { |
|
|
animation: shake 0.5s; |
|
|
} |
|
|
@keyframes shake { |
|
|
0%, 100% { transform: translateX(0); } |
|
|
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } |
|
|
20%, 40%, 60%, 80% { transform: translateX(5px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
|
|
|
<nav class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-video text-2xl"></i> |
|
|
<span class="text-xl font-bold">ConnectMe</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-6"> |
|
|
<a href="#" class="hover:text-gray-200">Home</a> |
|
|
<a href="#" class="hover:text-gray-200">About</a> |
|
|
<a href="#" class="hover:text-gray-200">Safety</a> |
|
|
<a href="#" class="hover:text-gray-200">Contact</a> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="loginBtn" class="px-4 py-2 rounded-full bg-white text-indigo-600 font-semibold hover:bg-gray-100 transition">Login</button> |
|
|
<button id="signupBtn" class="px-4 py-2 rounded-full border-2 border-white text-white font-semibold hover:bg-white hover:text-indigo-600 transition">Sign Up</button> |
|
|
<button class="md:hidden text-white"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6">Meet New People Instantly</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Connect with random people from around the world through live video chat. No registration required to start!</p> |
|
|
<div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4"> |
|
|
<button id="startChatBtn" class="px-8 py-4 bg-white text-indigo-600 rounded-full text-xl font-bold hover:bg-gray-100 transition transform hover:scale-105">Start Chatting Now</button> |
|
|
<button class="px-8 py-4 border-2 border-white rounded-full text-xl font-bold hover:bg-white hover:text-indigo-600 transition transform hover:scale-105">How It Works</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Why Choose ConnectMe?</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="text-indigo-600 mb-4"> |
|
|
<i class="fas fa-globe text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2 text-gray-800">Global Connections</h3> |
|
|
<p class="text-gray-600">Meet people from all over the world and learn about different cultures.</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="text-indigo-600 mb-4"> |
|
|
<i class="fas fa-shield-alt text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2 text-gray-800">Safe & Secure</h3> |
|
|
<p class="text-gray-600">Our advanced moderation system keeps the platform safe for everyone.</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="text-indigo-600 mb-4"> |
|
|
<i class="fas fa-random text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2 text-gray-800">Instant Matching</h3> |
|
|
<p class="text-gray-600">Get connected with random people in seconds with just one click.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-100"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">How It Works</h2> |
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto"> |
|
|
<div class="video-container"> |
|
|
<div class="absolute inset-0 bg-gray-800 flex items-center justify-center"> |
|
|
<div class="text-center text-white"> |
|
|
<i class="fas fa-user-circle text-8xl mb-4"></i> |
|
|
<p class="text-xl">Connecting you with a random stranger...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button class="px-6 py-3 bg-indigo-600 text-white rounded-full font-semibold hover:bg-indigo-700 transition"> |
|
|
<i class="fas fa-random mr-2"></i> Next Person |
|
|
</button> |
|
|
<button class="px-6 py-3 bg-red-600 text-white rounded-full font-semibold hover:bg-red-700 transition"> |
|
|
<i class="fas fa-times mr-2"></i> Disconnect |
|
|
</button> |
|
|
<button class="px-6 py-3 bg-green-600 text-white rounded-full font-semibold hover:bg-green-700 transition"> |
|
|
<i class="fas fa-heart mr-2"></i> Add Friend |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden"> |
|
|
<div class="gradient-bg p-6 text-white"> |
|
|
<h2 class="text-2xl font-bold">Welcome Back!</h2> |
|
|
<p>Login to access all features</p> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<form id="loginForm" class="space-y-6"> |
|
|
<div class="relative"> |
|
|
<input type="email" id="loginEmail" class="floating-input w-full px-4 py-2 border-b-2 border-gray-300 focus:border-indigo-600 outline-none" placeholder=" " required> |
|
|
<label for="loginEmail" class="absolute left-4 top-2 text-gray-500 pointer-events-none transition-all">Email Address</label> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<input type="password" id="loginPassword" class="floating-input w-full px-4 py-2 border-b-2 border-gray-300 focus:border-indigo-600 outline-none" placeholder=" " required> |
|
|
<label for="loginPassword" class="absolute left-4 top-2 text-gray-500 pointer-events-none transition-all">Password</label> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="rememberMe" class="mr-2"> |
|
|
<label for="rememberMe" class="text-gray-600">Remember me</label> |
|
|
</div> |
|
|
<a href="#" class="text-indigo-600 hover:underline">Forgot password?</a> |
|
|
</div> |
|
|
<button type="submit" class="w-full py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Login</button> |
|
|
</form> |
|
|
<div class="mt-6 text-center"> |
|
|
<p class="text-gray-600">Don't have an account? <button id="switchToSignup" class="text-indigo-600 font-semibold hover:underline">Sign up</button></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="signupModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden"> |
|
|
<div class="gradient-bg p-6 text-white"> |
|
|
<h2 class="text-2xl font-bold">Create Your Account</h2> |
|
|
<p>Join our community today</p> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<form id="signupForm" class="space-y-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="relative"> |
|
|
<input type="text" id="firstName" class="floating-input w-full px-4 py-2 border-b-2 border-gray-300 focus:border-indigo-600 outline-none" placeholder=" " required> |
|
|
<label for="firstName" class="absolute left-4 top-2 text-gray-500 pointer-events-none transition-all">First Name</label> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<input type="text" id="lastName" class="floating-input w-full px-4 py-2 border-b-2 border-gray-300 focus:border-indigo-600 outline-none" placeholder=" " required> |
|
|
<label for="lastName" class="absolute left-4 top-2 text-gray-500 pointer-events-none transition-all">Last Name</label> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<input type="text" id="username" class="floating-input w-full px-4 py-2 border-b-2 border-gray-300 focus:border-indigo-600 outline-none" placeholder=" " required> |
|
|
<label for="username" class="absolute left-4 top-2 text-gray-500 pointer-events-none transition-all">Username</label> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<input type="email" id="signupEmail" class="floating-input w-full px-4 py-2 border-b-2 border-gray-300 focus:border-indigo-600 outline-none" placeholder=" " required> |
|
|
<label for="signupEmail" class="absolute left-4 top-2 text-gray-500 pointer-events-none transition-all">Email Address</label> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<input type="password" id="signupPassword" class="floating-input w-full px-4 py-2 border-b-2 border-gray-300 focus:border-indigo-600 outline-none" placeholder=" " required> |
|
|
<label for="signupPassword" class="absolute left-4 top-2 text-gray-500 pointer-events-none transition-all">Password</label> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<input type="password" id="confirmPassword" class="floating-input w-full px-4 py-2 border-b-2 border-gray-300 focus:border-indigo-600 outline-none" placeholder=" " required> |
|
|
<label for="confirmPassword" class="absolute left-4 top-2 text-gray-500 pointer-events-none transition-all">Confirm Password</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="terms" class="mr-2" required> |
|
|
<label for="terms" class="text-gray-600">I agree to the <a href="#" class="text-indigo-600 hover:underline">Terms of Service</a> and <a href="#" class="text-indigo-600 hover:underline">Privacy Policy</a></label> |
|
|
</div> |
|
|
<button type="submit" class="w-full py-3 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition">Sign Up</button> |
|
|
</form> |
|
|
<div class="mt-6 text-center"> |
|
|
<p class="text-gray-600">Already have an account? <button id="switchToLogin" class="text-indigo-600 font-semibold hover:underline">Login</button></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chatInterface" class="hidden fixed inset-0 bg-gray-900 z-50"> |
|
|
<div class="chat-container flex flex-col"> |
|
|
|
|
|
<div class="flex-1 flex"> |
|
|
<div class="w-1/2 bg-gray-800 relative"> |
|
|
<video id="localVideo" autoplay muted class="w-full h-full object-cover"></video> |
|
|
<div class="absolute bottom-4 left-4 bg-black bg-opacity-50 text-white px-3 py-1 rounded-full"> |
|
|
<span id="localUsername">You</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-1/2 bg-gray-800 relative"> |
|
|
<div id="remoteVideoPlaceholder" class="absolute inset-0 bg-gray-700 flex items-center justify-center"> |
|
|
<div class="text-center text-white"> |
|
|
<i class="fas fa-user-circle text-8xl mb-4"></i> |
|
|
<p class="text-xl">Looking for someone to connect with...</p> |
|
|
</div> |
|
|
</div> |
|
|
<video id="remoteVideo" autoplay class="w-full h-full object-cover hidden"></video> |
|
|
<div id="remoteUsernameTag" class="absolute bottom-4 left-4 bg-black bg-opacity-50 text-white px-3 py-1 rounded-full hidden"> |
|
|
<span id="remoteUsername">Stranger</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 p-4 flex justify-center space-x-6"> |
|
|
<button id="nextBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> |
|
|
<i class="fas fa-random text-xl"></i> |
|
|
</button> |
|
|
<button id="disconnectBtn" class="bg-red-600 hover:bg-red-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
<button id="micBtn" class="bg-gray-600 hover:bg-gray-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> |
|
|
<i class="fas fa-microphone text-xl"></i> |
|
|
</button> |
|
|
<button id="camBtn" class="bg-gray-600 hover:bg-gray-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> |
|
|
<i class="fas fa-video text-xl"></i> |
|
|
</button> |
|
|
<button id="reportBtn" class="bg-yellow-600 hover:bg-yellow-700 text-white rounded-full w-12 h-12 flex items-center justify-center"> |
|
|
<i class="fas fa-flag text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 p-4 hidden" id="textChatContainer"> |
|
|
<div class="h-40 overflow-y-auto mb-4" id="chatMessages"> |
|
|
|
|
|
</div> |
|
|
<div class="flex"> |
|
|
<input type="text" id="chatInput" placeholder="Type your message..." class="flex-1 px-4 py-2 rounded-l-lg focus:outline-none"> |
|
|
<button id="sendBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-r-lg"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">ConnectMe</h3> |
|
|
<p class="text-gray-400">The best way to meet new people from around the world through live video chat.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Quick Links</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Safety Tips</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Community Guidelines</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Legal</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Connect With Us</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-facebook"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-tiktok"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
|
|
<p>© 2023 ConnectMe. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const loginBtn = document.getElementById('loginBtn'); |
|
|
const signupBtn = document.getElementById('signupBtn'); |
|
|
const loginModal = document.getElementById('loginModal'); |
|
|
const signupModal = document.getElementById('signupModal'); |
|
|
const switchToSignup = document.getElementById('switchToSignup'); |
|
|
const switchToLogin = document.getElementById('switchToLogin'); |
|
|
const startChatBtn = document.getElementById('startChatBtn'); |
|
|
const chatInterface = document.getElementById('chatInterface'); |
|
|
const disconnectBtn = document.getElementById('disconnectBtn'); |
|
|
const nextBtn = document.getElementById('nextBtn'); |
|
|
const micBtn = document.getElementById('micBtn'); |
|
|
const camBtn = document.getElementById('camBtn'); |
|
|
const reportBtn = document.getElementById('reportBtn'); |
|
|
const chatInput = document.getElementById('chatInput'); |
|
|
const sendBtn = document.getElementById('sendBtn'); |
|
|
const chatMessages = document.getElementById('chatMessages'); |
|
|
const textChatContainer = document.getElementById('textChatContainer'); |
|
|
const remoteVideo = document.getElementById('remoteVideo'); |
|
|
const remoteVideoPlaceholder = document.getElementById('remoteVideoPlaceholder'); |
|
|
const remoteUsernameTag = document.getElementById('remoteUsernameTag'); |
|
|
const localVideo = document.getElementById('localVideo'); |
|
|
|
|
|
|
|
|
function openLoginModal() { |
|
|
loginModal.classList.remove('hidden'); |
|
|
signupModal.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function openSignupModal() { |
|
|
signupModal.classList.remove('hidden'); |
|
|
loginModal.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function closeModals() { |
|
|
loginModal.classList.add('hidden'); |
|
|
signupModal.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
loginBtn.addEventListener('click', openLoginModal); |
|
|
signupBtn.addEventListener('click', openSignupModal); |
|
|
switchToSignup.addEventListener('click', openSignupModal); |
|
|
switchToLogin.addEventListener('click', openLoginModal); |
|
|
|
|
|
|
|
|
window.addEventListener('click', (e) => { |
|
|
if (e.target === loginModal || e.target === signupModal) { |
|
|
closeModals(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
alert('Login functionality would be implemented here'); |
|
|
closeModals(); |
|
|
}); |
|
|
|
|
|
document.getElementById('signupForm').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
const password = document.getElementById('signupPassword').value; |
|
|
const confirmPassword = document.getElementById('confirmPassword').value; |
|
|
|
|
|
if (password !== confirmPassword) { |
|
|
document.getElementById('signupForm').classList.add('shake'); |
|
|
setTimeout(() => { |
|
|
document.getElementById('signupForm').classList.remove('shake'); |
|
|
}, 500); |
|
|
alert('Passwords do not match!'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
alert('Signup functionality would be implemented here'); |
|
|
closeModals(); |
|
|
}); |
|
|
|
|
|
|
|
|
startChatBtn.addEventListener('click', () => { |
|
|
|
|
|
chatInterface.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
|
|
|
|
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: true }) |
|
|
.then(stream => { |
|
|
localVideo.srcObject = stream; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
remoteVideoPlaceholder.classList.add('hidden'); |
|
|
remoteVideo.classList.remove('hidden'); |
|
|
remoteUsernameTag.classList.remove('hidden'); |
|
|
textChatContainer.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
addMessage('Stranger', 'Hi there! How are you today?', false); |
|
|
}, 1000); |
|
|
}, 2000); |
|
|
}) |
|
|
.catch(err => { |
|
|
console.error('Error accessing media devices:', err); |
|
|
alert('Could not access your camera/microphone. Please check permissions.'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
disconnectBtn.addEventListener('click', () => { |
|
|
|
|
|
if (localVideo.srcObject) { |
|
|
localVideo.srcObject.getTracks().forEach(track => track.stop()); |
|
|
} |
|
|
if (remoteVideo.srcObject) { |
|
|
remoteVideo.srcObject.getTracks().forEach(track => track.stop()); |
|
|
} |
|
|
|
|
|
chatInterface.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
|
|
|
|
|
|
remoteVideoPlaceholder.classList.remove('hidden'); |
|
|
remoteVideo.classList.add('hidden'); |
|
|
remoteUsernameTag.classList.add('hidden'); |
|
|
textChatContainer.classList.add('hidden'); |
|
|
chatMessages.innerHTML = ''; |
|
|
}); |
|
|
|
|
|
nextBtn.addEventListener('click', () => { |
|
|
|
|
|
remoteVideoPlaceholder.classList.remove('hidden'); |
|
|
remoteVideo.classList.add('hidden'); |
|
|
remoteUsernameTag.classList.add('hidden'); |
|
|
chatMessages.innerHTML = ''; |
|
|
|
|
|
setTimeout(() => { |
|
|
remoteVideoPlaceholder.classList.add('hidden'); |
|
|
remoteVideo.classList.remove('hidden'); |
|
|
remoteUsernameTag.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
addMessage('New Stranger', 'Hello! Nice to meet you!', false); |
|
|
}, 1000); |
|
|
}, 1500); |
|
|
}); |
|
|
|
|
|
let micOn = true; |
|
|
micBtn.addEventListener('click', () => { |
|
|
micOn = !micOn; |
|
|
if (localVideo.srcObject) { |
|
|
localVideo.srcObject.getAudioTracks()[0].enabled = micOn; |
|
|
} |
|
|
micBtn.innerHTML = micOn ? '<i class="fas fa-microphone text-xl"></i>' : '<i class="fas fa-microphone-slash text-xl"></i>'; |
|
|
micBtn.classList.toggle('bg-gray-600'); |
|
|
micBtn.classList.toggle('bg-red-600'); |
|
|
}); |
|
|
|
|
|
let camOn = true; |
|
|
camBtn.addEventListener('click', () => { |
|
|
camOn = !camOn; |
|
|
if (localVideo.srcObject) { |
|
|
localVideo.srcObject.getVideoTracks()[0].enabled = camOn; |
|
|
} |
|
|
camBtn.innerHTML = camOn ? '<i class="fas fa-video text-xl"></i>' : '<i class="fas fa-video-slash text-xl"></i>'; |
|
|
camBtn.classList.toggle('bg-gray-600'); |
|
|
camBtn.classList.toggle('bg-red-600'); |
|
|
}); |
|
|
|
|
|
reportBtn.addEventListener('click', () => { |
|
|
alert('Report functionality would be implemented here'); |
|
|
}); |
|
|
|
|
|
function addMessage(sender, message, isLocal) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.classList.add('mb-2'); |
|
|
|
|
|
const senderSpan = document.createElement('span'); |
|
|
senderSpan.classList.add('font-bold', isLocal ? 'text-indigo-400' : 'text-green-400'); |
|
|
senderSpan.textContent = sender + ': '; |
|
|
|
|
|
const messageSpan = document.createElement('span'); |
|
|
messageSpan.classList.add('text-white'); |
|
|
messageSpan.textContent = message; |
|
|
|
|
|
messageDiv.appendChild(senderSpan); |
|
|
messageDiv.appendChild(messageSpan); |
|
|
chatMessages.appendChild(messageDiv); |
|
|
|
|
|
|
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
} |
|
|
|
|
|
sendBtn.addEventListener('click', () => { |
|
|
const message = chatInput.value.trim(); |
|
|
if (message) { |
|
|
addMessage('You', message, true); |
|
|
chatInput.value = ''; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const responses = [ |
|
|
"That's interesting!", |
|
|
"Tell me more about that.", |
|
|
"I see what you mean.", |
|
|
"Nice weather today, isn't it?", |
|
|
"Where are you from?", |
|
|
"What do you like to do for fun?" |
|
|
]; |
|
|
const randomResponse = responses[Math.floor(Math.random() * responses.length)]; |
|
|
addMessage('Stranger', randomResponse, false); |
|
|
}, 1000); |
|
|
} |
|
|
}); |
|
|
|
|
|
chatInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter') { |
|
|
sendBtn.click(); |
|
|
} |
|
|
}); |
|
|
</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=MMD-Coder/connectme" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
