Spaces:

Waternoose
/

anycoder-d31b60fa

Running

File size: 18,189 Bytes
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SecureChat - Private Chatroom</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --secondary: #10b981;
            --dark: #1f2937;
            --light: #f9fafb;
            --gray: #6b7280;
            --danger: #ef4444;
            --success: #10b981;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            display: flex;
            width: 100%;
            max-width: 1200px;
            height: 90vh;
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .login-section {
            flex: 1;
            background: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px;
            position: relative;
        }

        .chat-section {
            flex: 2;
            background: #f8fafc;
            display: none;
            flex-direction: column;
            position: relative;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 40px;
        }

        .logo i {
            font-size: 2.5rem;
            color: var(--primary);
        }

        .logo h1 {
            font-size: 2rem;
            color: var(--dark);
            font-weight: 700;
        }

        .login-form {
            width: 100%;
            max-width: 400px;
        }

        .form-group {
            margin-bottom: 24px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--dark);
        }

        .form-control {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }

        .btn {
            padding: 14px 24px;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: var(--secondary);
            color: white;
            margin-top: 12px;
        }

        .btn-secondary:hover {
            background: #0da271;
            transform: translateY(-2px);
        }

        .chat-header {
            background: white;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid #e5e7eb;
        }

        .chat-header h2 {
            color: var(--dark);
            font-size: 1.5rem;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }

        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .message {
            max-width: 70%;
            padding: 14px 18px;
            border-radius: 18px;
            position: relative;
            animation: fadeIn 0.3s ease;
        }

        .message.sent {
            align-self: flex-end;
            background: var(--primary);
            color: white;
            border-bottom-right-radius: 6px;
        }

        .message.received {
            align-self: flex-start;
            background: white;
            color: var(--dark);
            border-bottom-left-radius: 6px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .message-time {
            font-size: 0.75rem;
            opacity: 0.8;
            margin-top: 4px;
            text-align: right;
        }

        .message-input {
            padding: 20px 30px;
            background: white;
            border-top: 1px solid #e5e7eb;
            display: flex;
            gap: 12px;
        }

        .message-input input {
            flex: 1;
            padding: 14px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 24px;
            font-size: 1rem;
            outline: none;
            transition: all 0.3s ease;
        }

        .message-input input:focus {
            border-color: var(--primary);
        }

        .message-input button {
            background: var(--primary);
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .message-input button:hover {
            background: var(--primary-dark);
            transform: scale(1.05);
        }

        .login-tabs {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }

        .tab {
            padding: 12px 24px;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .tab.active {
            background: var(--primary);
            color: white;
        }

        .tab:not(.active) {
            color: var(--gray);
        }

        .tab:not(.active):hover {
            color: var(--dark);
        }

        .signup-form {
            display: none;
        }

        .built-with {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            text-align: center;
            color: var(--gray);
            font-size: 0.9rem;
        }

        .built-with a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
        }

        .built-with a:hover {
            text-decoration: underline;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                height: auto;
            }
            
            .login-section, .chat-section {
                flex: none;
                width: 100%;
            }
            
            .message {
                max-width: 85%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Login Section -->
        <div class="login-section" id="loginSection">
            <div class="logo">
                <i class="fas fa-comment-dots"></i>
                <h1>SecureChat</h1>
            </div>
            
            <div class="login-tabs">
                <div class="tab active" id="loginTab">Login</div>
                <div class="tab" id="signupTab">Sign Up</div>
            </div>
            
            <form class="login-form" id="loginForm">
                <div class="form-group">
                    <label for="loginUsername">Username</label>
                    <input type="text" id="loginUsername" class="form-control" placeholder="Enter your username" required>
                </div>
                
                <div class="form-group">
                    <label for="loginPassword">Password</label>
                    <input type="password" id="loginPassword" class="form-control" placeholder="Enter your password" required>
                </div>
                
                <button type="submit" class="btn btn-primary">Login to Chatroom</button>
            </form>
            
            <form class="signup-form" id="signupForm">
                <div class="form-group">
                    <label for="signupUsername">Username</label>
                    <input type="text" id="signupUsername" class="form-control" placeholder="Choose a username" required>
                </div>
                
                <div class="form-group">
                    <label for="signupEmail">Email</label>
                    <input type="email" id="signupEmail" class="form-control" placeholder="Enter your email" required>
                </div>
                
                <div class="form-group">
                    <label for="signupPassword">Password</label>
                    <input type="password" id="signupPassword" class="form-control" placeholder="Create a password" required>
                </div>
                
                <div class="form-group">
                    <label for="confirmPassword">Confirm Password</label>
                    <input type="password" id="confirmPassword" class="form-control" placeholder="Confirm your password" required>
                </div>
                
                <button type="submit" class="btn btn-secondary">Create Account</button>
            </form>
            
            <div class="built-with">
                Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
            </div>
        </div>
        
        <!-- Chat Section -->
        <div class="chat-section" id="chatSection">
            <div class="chat-header">
                <h2>Private Chatroom</h2>
                <div class="user-info">
                    <div class="user-avatar" id="userAvatar">U</div>
                    <div>
                        <div id="usernameDisplay">User</div>
                        <div style="font-size: 0.75rem; color: var(--gray);">Online</div>
                    </div>
                    <button class="btn" id="logoutBtn" style="background: var(--danger); color: white; padding: 8px 16px; border-radius: 8px;">Logout</button>
                </div>
            </div>
            
            <div class="chat-messages" id="chatMessages">
                <!-- Messages will be added here dynamically -->
            </div>
            
            <div class="message-input">
                <input type="text" id="messageInput" placeholder="Type your message...">
                <button type="button" id="sendMessageBtn">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // DOM Elements
        const loginSection = document.getElementById('loginSection');
        const chatSection = document.getElementById('chatSection');
        const loginForm = document.getElementById('loginForm');
        const signupForm = document.getElementById('signupForm');
        const loginTab = document.getElementById('loginTab');
        const signupTab = document.getElementById('signupTab');
        const chatMessages = document.getElementById('chatMessages');
        const messageInput = document.getElementById('messageInput');
        const sendMessageBtn = document.getElementById('sendMessageBtn');
        const usernameDisplay = document.getElementById('usernameDisplay');
        const userAvatar = document.getElementById('userAvatar');
        const logoutBtn = document.getElementById('logoutBtn');
        
        // Tab switching
        loginTab.addEventListener('click', () => {
            loginTab.classList.add('active');
            signupTab.classList.remove('active');
            loginForm.style.display = 'block';
            signupForm.style.display = 'none';
        });
        
        signupTab.addEventListener('click', () => {
            signupTab.classList.add('active');
            loginTab.classList.remove('active');
            signupForm.style.display = 'block';
            loginForm.style.display = 'none';
        });
        
        // Login functionality
        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            
            // Simple validation (in a real app, this would connect to a backend)
            if (username && password) {
                // Simulate successful login
                handleSuccessfulLogin(username);
            } else {
                alert('Please enter both username and password');
            }
        });
        
        // Signup functionality
        signupForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('signupUsername').value;
            const email = document.getElementById('signupEmail').value;
            const password = document.getElementById('signupPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            
            // Simple validation
            if (password !== confirmPassword) {
                alert('Passwords do not match');
                return;
            }
            
            if (username && email && password) {
                // Simulate successful signup and login
                handleSuccessfulLogin(username);
            } else {
                alert('Please fill in all fields');
            }
        });
        
        // Handle successful login
        function handleSuccessfulLogin(username) {
            // Update UI
            loginSection.style.display = 'none';
            chatSection.style.display = 'flex';
            usernameDisplay.textContent = username;
            userAvatar.textContent = username.charAt(0).toUpperCase();
            
            // Add welcome message
            addMessage('System', `Welcome to the private chatroom, ${username}!`, 'received');
            
            // Simulate other users joining
            setTimeout(() => {
                addMessage('System', 'User "Jane" has joined the chatroom', 'received');
            }, 1000);
            
            setTimeout(() => {
                addMessage('Jane', 'Hi everyone! How are you doing today?', 'received');
            }, 2000);
        }
        
        // Logout functionality
        logoutBtn.addEventListener('click', () => {
            // Reset forms
            loginForm.reset();
            signupForm.reset();
            
            // Show login section
            chatSection.style.display = 'none';
            loginSection.style.display = 'flex';
            
            // Clear chat messages
            chatMessages.innerHTML = '';
        });
        
        // Send message functionality
        sendMessageBtn.addEventListener('click', sendMessage);
        messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
        
        function sendMessage() {
            const message = messageInput.value.trim();
            if (message) {
                // Add message to chat
                addMessage(usernameDisplay.textContent, message, 'sent');
                
                // Clear input
                messageInput.value = '';
                
                // Simulate response after a delay
                setTimeout(() => {
                    const responses = [
                        "That's interesting!",
                        "I see what you mean.",
                        "Tell me more about that.",
                        "I agree with you.",
                        "That's a good point!"
                    ];
                    
                    const randomResponse = responses[Math.floor(Math.random() * responses.length)];
                    addMessage('Jane', randomResponse, 'received');
                }, 1000 + Math.random() * 2000);
            }
        }
        
        // Add message to chat
        function addMessage(sender, text, type) {
            const messageDiv = document.createElement('div');
            messageDiv.classList.add('message', type);
            
            const messageText = document.createElement('div');
            messageText.textContent = text;
            
            const messageTime = document.createElement('div');
            messageTime.classList.add('message-time');
            messageTime.textContent = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
            
            messageDiv.appendChild(messageText);
            messageDiv.appendChild(messageTime);
            
            chatMessages.appendChild(messageDiv);
            
            // Scroll to bottom
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
    </script>
</body>
</html>