Spaces:

MMD-Coder
/

connectme

Running

App Files Files Community

MMD-Coder commited on 17 days ago

Commit

9ce629e

verified ·

1 Parent(s): 5498c37

a website like minichat or ome.tv or something like that. i wanna login and sign-in too (with email and username and password and first,last name - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +556 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Connectme
-emoji: 🚀
 colorFrom: purple
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: connectme
+emoji: 🐳
 colorFrom: purple
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,556 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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%; /* 16:9 aspect ratio */
+            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">
+    <!-- Navigation -->
+    <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>
+    <!-- Hero Section -->
+    <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>
+    <!-- Features 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>
+    <!-- Chat Demo 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>
+    <!-- Login Modal -->
+    <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>
+    <!-- Signup Modal -->
+    <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>
+    <!-- Chat Interface (Hidden by default) -->
+    <div id="chatInterface" class="hidden fixed inset-0 bg-gray-900 z-50">
+        <div class="chat-container flex flex-col">
+            <!-- Video Area -->
+            <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>
+            <!-- Controls -->
+            <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>
+            <!-- Chat Box -->
+            <div class="bg-gray-700 p-4 hidden" id="textChatContainer">
+                <div class="h-40 overflow-y-auto mb-4" id="chatMessages">
+                    <!-- Messages will appear here -->
+                </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 -->
+    <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>&copy; 2023 ConnectMe. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // DOM Elements
+        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');
+        // Modal toggle functions
+        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');
+        }
+        // Event Listeners
+        loginBtn.addEventListener('click', openLoginModal);
+        signupBtn.addEventListener('click', openSignupModal);
+        switchToSignup.addEventListener('click', openSignupModal);
+        switchToLogin.addEventListener('click', openLoginModal);
+        // Close modals when clicking outside
+        window.addEventListener('click', (e) => {
+            if (e.target === loginModal || e.target === signupModal) {
+                closeModals();
+            }
+        });
+        // Form submission
+        document.getElementById('loginForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            // Here you would normally validate and send to server
+            alert('Login functionality would be implemented here');
+            closeModals();
+        });
+        document.getElementById('signupForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            // Validate passwords match
+            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;
+            }
+            // Here you would normally validate and send to server
+            alert('Signup functionality would be implemented here');
+            closeModals();
+        });
+        // Chat functionality
+        startChatBtn.addEventListener('click', () => {
+            // In a real app, this would check if user is logged in first
+            chatInterface.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+            // Simulate getting user media
+            navigator.mediaDevices.getUserMedia({ video: true, audio: true })
+                .then(stream => {
+                    localVideo.srcObject = stream;
+                    // Simulate connecting to a stranger after 2 seconds
+                    setTimeout(() => {
+                        remoteVideoPlaceholder.classList.add('hidden');
+                        remoteVideo.classList.remove('hidden');
+                        remoteUsernameTag.classList.remove('hidden');
+                        textChatContainer.classList.remove('hidden');
+                        // Simulate receiving a message
+                        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', () => {
+            // Stop all media streams
+            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';
+            // Reset video elements
+            remoteVideoPlaceholder.classList.remove('hidden');
+            remoteVideo.classList.add('hidden');
+            remoteUsernameTag.classList.add('hidden');
+            textChatContainer.classList.add('hidden');
+            chatMessages.innerHTML = '';
+        });
+        nextBtn.addEventListener('click', () => {
+            // Simulate connecting to a new stranger
+            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');
+                // Simulate receiving a message
+                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);
+            // Scroll to bottom
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        sendBtn.addEventListener('click', () => {
+            const message = chatInput.value.trim();
+            if (message) {
+                addMessage('You', message, true);
+                chatInput.value = '';
+                // Simulate response after 1 second
+                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>