Build a retro chat app

README.md

@@ -1,10 +1,13 @@
 ---
-title: Chatverse Retro
-emoji: 🔥
-colorFrom: blue
+title: ChatVerse Retro 💬🕹️
+colorFrom: purple
 colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/nav-bar.js

@@ -0,0 +1,187 @@
+class NavBar extends HTMLElement {
+    constructor() {
+        super();
+        this.currentUser = localStorage.getItem('currentUser') || 'Anonymous';
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        this.setupEventListeners();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    z-index: 100;
+                }
+
+                .navbar {
+                    background: var(--bg-darker, #050505);
+                    border-bottom: 2px solid var(--border-color, #00ff00);
+                    padding: 0.5rem 1rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    box-shadow: 0 2px 20px var(--primary, #00ff00);
+                    position: relative;
+                    overflow: hidden;
+                }
+
+                .navbar::before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: -100%;
+                    width: 100%;
+                    height: 100%;
+                    background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.1), transparent);
+                    animation: scan 3s infinite;
+                }
+
+                @keyframes scan {
+                    0% { left: -100%; }
+                    100% { left: 100%; }
+                }
+
+                .logo {
+                    font-family: 'Press Start 2P', cursive;
+                    font-size: 0.75rem;
+                    color: var(--primary, #00ff00);
+                    text-shadow: 0 0 10px var(--primary, #00ff00);
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+
+                .nav-links {
+                    display: flex;
+                    gap: 1rem;
+                    align-items: center;
+                }
+
+                .nav-link {
+                    color: var(--text-secondary, #a0a0a0);
+                    text-decoration: none;
+                    font-family: 'Press Start 2P', cursive;
+                    font-size: 0.5rem;
+                    padding: 0.5rem;
+                    border: 1px solid transparent;
+                    transition: all 0.3s;
+                    position: relative;
+                }
+
+                .nav-link:hover {
+                    color: var(--primary, #00ff00);
+                    border-color: var(--primary, #00ff00);
+                    box-shadow: 0 0 10px var(--primary, #00ff00);
+                }
+
+                .nav-link.active {
+                    color: var(--primary, #00ff00);
+                    border-color: var(--primary, #00ff00);
+                }
+
+                .user-info {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    font-family: 'Press Start 2P', cursive;
+                    font-size: 0.5rem;
+                    color: var(--text-primary, #00ff00);
+                }
+
+                .status-indicator {
+                    width: 0.5rem;
+                    height: 0.5rem;
+                    background: var(--primary, #00ff00);
+                    border-radius: 50%;
+                    box-shadow: 0 0 10px var(--primary, #00ff00);
+                    animation: pulse 2s infinite;
+                }
+
+                @keyframes pulse {
+                    0%, 100% { opacity: 1; }
+                    50% { opacity: 0.5; }
+                }
+
+                .menu-toggle {
+                    display: none;
+                    background: none;
+                    border: 1px solid var(--primary, #00ff00);
+                    color: var(--primary, #00ff00);
+                    padding: 0.25rem;
+                    cursor: pointer;
+                }
+
+                .menu-toggle:hover {
+                    box-shadow: 0 0 10px var(--primary, #00ff00);
+                }
+
+                @media (max-width: 768px) {
+                    .nav-links {
+                        display: none;
+                    }
+                    
+                    .menu-toggle {
+                        display: block;
+                    }
+                    
+                    .logo {
+                        font-size: 0.6rem;
+                    }
+                }
+            </style>
+
+            <nav class="navbar">
+                <div class="logo">
+                    <i data-feather="message-square" width="16" height="16"></i>
+                    CHATVERSE RETRO
+                </div>
+
+                <div class="nav-links">
+                    <a href="index.html" class="nav-link active">CHAT</a>
+                    <a href="profile.html" class="nav-link">PROFILE</a>
+                    <a href="login.html" class="nav-link">LOGOUT</a>
+                </div>
+
+                <div class="user-info">
+                    <div class="status-indicator"></div>
+                    <span id="currentUser">${this.currentUser}</span>
+                </div>
+
+                <button class="menu-toggle" id="menuToggle">
+                    <i data-feather="menu" width="16" height="16"></i>
+                </button>
+            </nav>
+        `;
+    }
+
+    setupEventListeners() {
+        // Update current user when it changes
+        document.addEventListener('userChanged', (e) => {
+            this.currentUser = e.detail.user;
+            const userElement = this.shadowRoot.getElementById('currentUser');
+            if (userElement) {
+                userElement.textContent = this.currentUser;
+            }
+        });
+
+        // Handle navigation
+        const navLinks = this.shadowRoot.querySelectorAll('.nav-link');
+        navLinks.forEach(link => {
+            link.addEventListener('click', (e) => {
+                // Update active state
+                navLinks.forEach(l => l.classList.remove('active'));
+                link.classList.add('active');
+            });
+        });
+    }
+}
+
+customElements.define('nav-bar', NavBar);

components/side-bar.js

@@ -0,0 +1,151 @@
+class SideBar extends HTMLElement {
+    constructor() {
+        super();
+        this.contacts = [];
+        this.isMobile = window.innerWidth <= 768;
+        this.isCollapsed = this.isMobile;
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        this.setupEventListeners();
+        this.loadContacts();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    height: calc(100vh - 4rem);
+                    position: fixed;
+                    left: 0;
+                    top: 4rem;
+                    z-index: 50;
+                    transition: transform 0.3s ease;
+                }
+
+                .sidebar {
+                    width: 280px;
+                    height: 100%;
+                    background: var(--bg-dark, #000000);
+                    border-right: 1px solid var(--border-color, #00ff00);
+                    display: flex;
+                    flex-direction: column;
+                    overflow: hidden;
+                    box-shadow: 2px 0 20px rgba(0, 255, 0, 0.2);
+                }
+
+                .sidebar-header {
+                    padding: 1rem;
+                    border-bottom: 1px solid var(--border-color, #00ff00);
+                    background: var(--bg-darker, #050505);
+                }
+
+                .sidebar-title {
+                    font-family: 'Press Start 2P', cursive;
+                    font-size: 0.6rem;
+                    color: var(--primary, #00ff00);
+                    margin-bottom: 0.5rem;
+                }
+
+                .online-count {
+                    font-family: monospace;
+                    font-size: 0.8rem;
+                    color: var(--text-secondary, #a0a0a0);
+                }
+
+                .contacts-list {
+                    flex: 1;
+                    overflow-y: auto;
+                    padding: 0.5rem;
+                }
+
+                .contact-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    padding: 0.75rem;
+                    border: 1px solid transparent;
+                    cursor: pointer;
+                    transition: all 0.3s;
+                    margin-bottom: 0.25rem;
+                }
+
+                .contact-item:hover {
+                    background: var(--bg-light, #1a1a1a);
+                    border-color: var(--primary, #00ff00);
+                    box-shadow: 0 0 10px rgba(0, 255, 0, 0.1);
+                }
+
+                .contact-item.active {
+                    background: var(--bg-light, #1a1a1a);
+                    border-color: var(--primary, #00ff00);
+                }
+
+                .contact-avatar {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 4px;
+                    background: var(--bg-light, #1a1a1a);
+                    border: 1px solid var(--border-color, #00ff00);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 1.5rem;
+                }
+
+                .contact-info {
+                    flex: 1;
+                    min-width: 0;
+                }
+
+                .contact-name {
+                    font-family: 'Press Start 2P', cursive;
+                    font-size: 0.5rem;
+                    color: var(--text-primary, #00ff00);
+                    margin-bottom: 0.25rem;
+                }
+
+                .contact-status {
+                    font-family: monospace;
+                    font-size: 0.7rem;
+                    color: var(--text-muted, #505050);
+                }
+
+                .status-indicator {
+                    width: 8px;
+                    height: 8px;
+                    border-radius: 50%;
+                    flex-shrink: 0;
+                }
+
+                .status-online {
+                    background: var(--primary, #00ff00);
+                    box-shadow: 0 0 10px var(--primary, #00ff00);
+                }
+
+                .status-away {
+                    background: #ffaa00;
+                    box-shadow: 0 0 10px #ffaa00;
+                }
+
+                .status-offline {
+                    background: var(--text-muted, #505050);
+                }
+
+                .contact-last-message {
+                    font-family: monospace;
+                    font-size: 0.7rem;
+                    color: var(--text-secondary, #a0a0a0);
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+
+                .add-contact-btn {
+                    width: 100%;
+                    padding: 0.75rem;
+                    background: var(--bg-light, #1a1a1a);
+                    border: 1px solid var(--border-color, #00ff00);
+                    color: var(--primary, #00ff00);

index.html

@@ -1,19 +1,67 @@
-<!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" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChatVerse Retro - Main Chat</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ff00'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="retro-bg min-h-screen">
+    <div class="crt-overlay"></div>
+    <div class="scanlines"></div>
+    
+    <nav-bar></nav-bar>
+    
+    <div class="flex h-screen pt-16">
+        <side-bar></side-bar>
+        
+        <main class="flex-1 flex flex-col bg-black/40 backdrop-blur-sm border-t border-l border-emerald-400/30 shadow-inner shadow-emerald-400/20">
+            <div class="flex-1 overflow-y-auto p-4 space-y-4 messages-container" id="messagesContainer">
+                <div class="message-group">
+                    <div class="message-header flex items-center gap-2 mb-2">
+                        <div class="w-3 h-3 bg-emerald-400 shadow-[0_0_10px_#00ff00]"></div>
+                        <span class="font-['Press_Start_2P'] text-xs text-emerald-400">SYSTEM</span>
+                        <span class="text-slate-500 text-xs" data-timestamp="new">[NOW]</span>
+                    </div>
+                    <div class="message-content font-mono text-slate-300 text-sm leading-relaxed">
+                        > Welcome to ChatVerse Retro v1.0<br>
+                        > Type /help for available commands<br>
+                        > Connection established: ONLINE
+                    </div>
+                </div>
+            </div>
+            
+            <div class="border-t border-emerald-400/30 p-4 bg-black/60">
+                <div class="flex gap-2">
+                    <input 
+                        type="text" 
+                        id="messageInput"
+                        placeholder="> Type your message..."
+                        class="flex-1 bg-black/80 border border-emerald-400/50 text-emerald-400 font-mono text-sm px-4 py-3 focus:outline-none focus:border-emerald-400 focus:shadow-[0_0_15px_#00ff00] transition-all duration-300 placeholder:text-emerald-400/50"
+                        autocomplete="off"
+                    >
+                    <button 
+                        id="sendButton"
+                        class="bg-emerald-400 text-black font-['Press_Start_2P'] text-xs px-6 py-3 hover:bg-emerald-500 hover:shadow-[0_0_20px_#00ff00] transition-all duration-300 active:translate-y-1"
+                    >
+                        SEND
+                    </button>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script src="components/nav-bar.js"></script>
+    <script src="components/side-bar.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,336 @@
+// ChatVerse Retro - Main JavaScript
+class ChatApp {
+    constructor() {
+        this.currentUser = localStorage.getItem('currentUser') || 'Anonymous';
+        this.messages = JSON.parse(localStorage.getItem('messages')) || [];
+        this.contacts = JSON.parse(localStorage.getItem('contacts')) || this.getDefaultContacts();
+        this.activeContact = this.contacts[0];
+        this.commands = {
+            '/help': this.showHelp.bind(this),
+            '/clear': this.clearChat.bind(this),
+            '/nick': this.changeNick.bind(this),
+            '/theme': this.toggleTheme.bind(this),
+            '/time': this.showTime.bind(this),
+            '/whoami': this.showCurrentUser.bind(this),
+        };
+        
+        this.init();
+    }
+
+    init() {
+        this.setupEventListeners();
+        this.loadMessages();
+        this.updateContacts();
+        this.setupTheme();
+        this.setupMobile();
+    }
+
+    setupEventListeners() {
+        const messageInput = document.getElementById('messageInput');
+        const sendButton = document.getElementById('sendButton');
+        
+        if (messageInput) {
+            messageInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    this.sendMessage();
+                }
+            });
+        }
+
+        if (sendButton) {
+            sendButton.addEventListener('click', () => this.sendMessage());
+        }
+
+        // Auto-resize input
+        if (messageInput) {
+            messageInput.addEventListener('input', () => {
+                messageInput.style.height = 'auto';
+                messageInput.style.height = Math.min(messageInput.scrollHeight, 120) + 'px';
+            });
+        }
+    }
+
+    setupTheme() {
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+    }
+
+    setupMobile() {
+        // Handle mobile menu toggle
+        const menuToggle = document.getElementById('menuToggle');
+        const sidebar = document.querySelector('side-bar');
+        
+        if (menuToggle && sidebar) {
+            menuToggle.addEventListener('click', () => {
+                sidebar.classList.toggle('sidebar-expanded');
+                sidebar.classList.toggle('sidebar-collapsed');
+            });
+        }
+
+        // Close sidebar on outside click for mobile
+        document.addEventListener('click', (e) => {
+            if (window.innerWidth <= 768) {
+                const sidebarElement = document.querySelector('side-bar');
+                const isClickInsideSidebar = sidebarElement.contains(e.target);
+                const isMenuToggle = menuToggle && menuToggle.contains(e.target);
+                
+                if (!isClickInsideSidebar && !isMenuToggle) {
+                    sidebarElement.classList.add('sidebar-collapsed');
+                    sidebarElement.classList.remove('sidebar-expanded');
+                }
+            }
+        });
+    }
+
+    getDefaultContacts() {
+        return [
+            { id: 1, name: 'System', status: 'online', avatar: '💻', lastMessage: 'Welcome to ChatVerse!' },
+            { id: 2, name: 'RetroBot', status: 'online', avatar: '🤖', lastMessage: 'Type /help for commands' },
+            { id: 3, name: 'CyberPunk', status: 'away', avatar: '🎮', lastMessage: 'Gaming...' },
+            { id: 4, name: 'NeonDream', status: 'offline', avatar: '🌟', lastMessage: 'See you later!' },
+            { id: 5, name: 'PixelMaster', status: 'online', avatar: '🎨', lastMessage: 'Check out my new pixel art!' },
+        ];
+    }
+
+    sendMessage() {
+        const input = document.getElementById('messageInput');
+        const content = input.value.trim();
+        
+        if (!content) return;
+
+        // Check for commands
+        if (content.startsWith('/')) {
+            this.executeCommand(content);
+            input.value = '';
+            return;
+        }
+
+        const message = {
+            id: Date.now(),
+            content: content,
+            sender: this.currentUser,
+            timestamp: new Date(),
+            type: 'user'
+        };
+
+        this.messages.push(message);
+        this.saveMessages();
+        this.displayMessage(message);
+        
+        // Simulate bot response
+        this.simulateBotResponse(content);
+        
+        input.value = '';
+        input.style.height = 'auto';
+    }
+
+    executeCommand(command) {
+        const parts = command.split(' ');
+        const cmd = parts[0].toLowerCase();
+        const args = parts.slice(1);
+
+        if (this.commands[cmd]) {
+            this.commands[cmd](args);
+        } else {
+            this.displaySystemMessage(`Unknown command: ${cmd}. Type /help for available commands.`);
+        }
+    }
+
+    showHelp() {
+        const helpText = `
+Available Commands:
+/help - Show this help message
+/clear - Clear the chat history
+/nick [name] - Change your nickname
+/theme - Toggle light/dark theme
+/time - Show current server time
+/whoami - Show current user info
+        `;
+        this.displaySystemMessage(helpText);
+    }
+
+    clearChat() {
+        this.messages = [];
+        localStorage.removeItem('messages');
+        const container = document.getElementById('messagesContainer');
+        if (container) {
+            container.innerHTML = '';
+        }
+        this.displaySystemMessage('Chat history cleared.');
+    }
+
+    changeNick(args) {
+        const newNick = args.join(' ');
+        if (newNick && newNick.length > 0) {
+            const oldNick = this.currentUser;
+            this.currentUser = newNick;
+            localStorage.setItem('currentUser', newNick);
+            this.displaySystemMessage(`Nickname changed from "${oldNick}" to "${newNick}"`);
+        } else {
+            this.displaySystemMessage('Usage: /nick [new nickname]');
+        }
+    }
+
+    toggleTheme() {
+        const currentTheme = document.documentElement.getAttribute('data-theme');
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+        this.displaySystemMessage(`Theme switched to ${newTheme} mode`);
+    }
+
+    showTime() {
+        const now = new Date();
+        this.displaySystemMessage(`Server Time: ${now.toLocaleString()}`);
+    }
+
+    showCurrentUser() {
+        this.displaySystemMessage(`Current User: ${this.currentUser}\nTheme: ${document.documentElement.getAttribute('data-theme')} mode`);
+    }
+
+    simulateBotResponse(userMessage) {
+        setTimeout(() => {
+            const responses = [
+                `I see you said: "${userMessage}"`,
+                `That's interesting! Tell me more.`,
+                `🤖 Processing... Processing...`,
+                `Beep boop! Message received.`,
+                `You sound like a real retro gamer!`,
+                `404: Witty response not found 😄`,
+                `I'm just a bot, but I appreciate the message!`,
+                `System: Message delivered successfully.`
+            ];
+            
+            const randomResponse = responses[Math.floor(Math.random() * responses.length)];
+            
+            const botMessage = {
+                id: Date.now() + 1,
+                content: randomResponse,
+                sender: 'RetroBot',
+                timestamp: new Date(),
+                type: 'bot'
+            };
+
+            this.messages.push(botMessage);
+            this.saveMessages();
+            this.displayMessage(botMessage);
+        }, Math.random() * 2000 + 1000);
+    }
+
+    displayMessage(message) {
+        const container = document.getElementById('messagesContainer');
+        if (!container) return;
+
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'message-group';
+        
+        const timestamp = this.formatTime(message.timestamp);
+        const senderClass = message.type === 'user' ? 'text-emerald-400' : 'text-cyan-400';
+        const senderGlow = message.type === 'user' ? 'shadow-[0_0_10px_#00ff00]' : 'shadow-[0_0_10px_#00ffff]';
+        
+        messageDiv.innerHTML = `
+            <div class="message-header flex items-center gap-2 mb-2">
+                <div class="w-3 h-3 ${senderClass} ${senderGlow}"></div>
+                <span class="font-['Press_Start_2P'] text-xs ${senderClass}">${message.sender}</span>
+                <span class="text-slate-500 text-xs" data-timestamp="${timestamp}">[${timestamp}]</span>
+            </div>
+            <div class="message-content font-mono text-slate-300 text-sm leading-relaxed">
+                > ${this.escapeHtml(message.content)}
+            </div>
+        `;
+
+        container.appendChild(messageDiv);
+        this.scrollToBottom();
+    }
+
+    displaySystemMessage(content) {
+        const message = {
+            id: Date.now(),
+            content: content,
+            sender: 'SYSTEM',
+            timestamp: new Date(),
+            type: 'system'
+        };
+        this.displayMessage(message);
+    }
+
+    loadMessages() {
+        const container = document.getElementById('messagesContainer');
+        if (!container) return;
+
+        // Clear existing messages except system welcome
+        container.innerHTML = '';
+        
+        // Add welcome message
+        const welcomeMessage = {
+            id: 0,
+            content: `Welcome to ChatVerse Retro v1.0\n> Type /help for available commands\n> Connection established: ONLINE`,
+            sender: 'SYSTEM',
+            timestamp: new Date(),
+            type: 'system'
+        };
+        this.displayMessage(welcomeMessage);
+
+        // Load and display stored messages
+        this.messages.forEach(message => {
+            this.displayMessage(message);
+        });
+    }
+
+    saveMessages() {
+        // Keep only last 50 messages
+        this.messages = this.messages.slice(-50);
+        localStorage.setItem('messages', JSON.stringify(this.messages));
+    }
+
+    updateContacts() {
+        // This would be called by the sidebar component
+        const event = new CustomEvent('contactsUpdated', { detail: this.contacts });
+        document.dispatchEvent(event);
+    }
+
+    formatTime(date) {
+        const now = new Date();
+        const diff = now - date;
+        const minutes = Math.floor(diff / 60000);
+        
+        if (minutes < 1) return 'NOW';
+        if (minutes < 60) return `${minutes}M`;
+        
+        const hours = Math.floor(minutes / 60);
+        if (hours < 24) return `${hours}H`;
+        
+        return date.toLocaleDateString();
+    }
+
+    scrollToBottom() {
+        const container = document.getElementById('messagesContainer');
+        if (container) {
+            container.scrollTop = container.scrollHeight;
+        }
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+// Initialize app when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    window.chatApp = new ChatApp();
+});
+
+// Handle page visibility for retro effect
+document.addEventListener('visibilitychange', () => {
+    if (document.hidden) {
+        document.body.style.filter = 'brightness(0.5)';
+    } else {
+        document.body.style.filter = 'brightness(1)';
+    }
+});
+
+// Add some retro console messages
+console.log('%c ChatVerse Retro v1.0 Loaded ', 'background: #00ff00; color: #000; font-size: 20px; font-family: "Press Start 2P"');
+console.log('%c Type chatApp.showHelp() in console for debug commands', 'color: #00ff00; font-family: monospace');

style.css

@@ -1,28 +1,274 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Retro Terminal Theme */
+:root {
+    --primary: #00ff00;
+    --primary-dark: #00cc00;
+    --secondary: #0a0a0a;
+    --accent: #00ff88;
+    --text-primary: #00ff00;
+    --text-secondary: #a0a0a0;
+    --text-muted: #505050;
+    --bg-dark: #000000;
+    --bg-darker: #050505;
+    --bg-light: #1a1a1a;
+    --border-color: #00ff00;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+[data-theme="light"] {
+    --primary: #00cc00;
+    --primary-dark: #009900;
+    --secondary: #f0f0f0;
+    --accent: #00cc66;
+    --text-primary: #00cc00;
+    --text-secondary: #404040;
+    --text-muted: #a0a0a0;
+    --bg-dark: #ffffff;
+    --bg-darker: #f5f5f5;
+    --bg-light: #e0e0e0;
+    --border-color: #00cc00;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* CRT Effect */
+.retro-bg {
+    background: 
+        radial-gradient(ellipse at center, var(--bg-darker) 0%, var(--bg-dark) 100%),
+        repeating-linear-gradient(
+            0deg,
+            transparent,
+            transparent 2px,
+            rgba(0, 255, 0, 0.03) 2px,
+            rgba(0, 255, 0, 0.03) 4px
+        );
+    background-blend-mode: multiply;
+    position: relative;
+    color: var(--text-primary);
+    font-family: 'Courier New', monospace;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.crt-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%),
+        repeating-linear-gradient(
+            0deg,
+            rgba(0, 255, 0, 0.05) 0px,
+            transparent 1px,
+            transparent 2px,
+            rgba(0, 255, 0, 0.05) 3px
+        );
+    pointer-events: none;
+    z-index: 1000;
+    mix-blend-mode: screen;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.scanlines {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 1px,
+        rgba(0, 255, 0, 0.03) 1px,
+        rgba(0, 255, 0, 0.03) 2px
+    );
+    pointer-events: none;
+    z-index: 1001;
+    animation: scanlines 8s linear infinite;
 }
+
+@keyframes scanlines {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(10px); }
+}
+
+/* Glitch Effect */
+.glitch {
+    position: relative;
+    color: var(--text-primary);
+    font-size: 1.5rem;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.glitch::before,
+.glitch::after {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.glitch::before {
+    animation: glitch-1 0.5s infinite;
+    color: #ff00ff;
+    z-index: -1;
+}
+
+.glitch::after {
+    animation: glitch-2 0.5s infinite;
+    color: #00ffff;
+    z-index: -2;
+}
+
+@keyframes glitch-1 {
+    0%, 100% { transform: translate(0); }
+    20% { transform: translate(-2px, 2px); }
+    40% { transform: translate(-2px, -2px); }
+    60% { transform: translate(2px, 2px); }
+    80% { transform: translate(2px, -2px); }
+}
+
+@keyframes glitch-2 {
+    0%, 100% { transform: translate(0); }
+    20% { transform: translate(2px, 2px); }
+    40% { transform: translate(2px, -2px); }
+    60% { transform: translate(-2px, 2px); }
+    80% { transform: translate(-2px, -2px); }
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-darker);
+    border: 1px solid var(--border-color);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--primary);
+    border: 1px solid var(--primary-dark);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-dark);
+}
+
+/* Message Animations */
+.message-group {
+    opacity: 0;
+    transform: translateY(20px);
+    animation: messageAppear 0.3s ease-out forwards;
+}
+
+@keyframes messageAppear {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Button Press Effects */
+.retro-button {
+    position: relative;
+    background: var(--primary);
+    color: var(--bg-dark);
+    border: none;
+    padding: 0.75rem 1.5rem;
+    font-family: 'Press Start 2P', cursive;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: all 0.1s;
+    box-shadow: 0 4px 0 var(--primary-dark);
+}
+
+.retro-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 0 var(--primary-dark);
+}
+
+.retro-button:active {
+    transform: translateY(4px);
+    box-shadow: 0 0 0 var(--primary-dark);
+}
+
+/* Input Focus Effects */
+.retro-input:focus {
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { box-shadow: 0 0 15px var(--primary); }
+    50% { box-shadow: 0 0 25px var(--primary); }
+}
+
+/* Theme Transition */
+* {
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+    .sidebar-collapsed {
+        transform: translateX(-100%);
+    }
+    
+    .sidebar-expanded {
+        transform: translateX(0);
+    }
+    
+    .mobile-hidden {
+        display: none;
+    }
+    
+    .mobile-full {
+        width: 100%;
+    }
+}
+
+/* Loading Animation */
+.loading-dots {
+    display: inline-block;
+}
+
+.loading-dots::after {
+    content: '';
+    animation: dots 1.5s infinite;
+}
+
+@keyframes dots {
+    0%, 20% { content: '.'; }
+    40% { content: '..'; }
+    60%, 100% { content: '...'; }
+}
+
+/* Status Indicators */
+.status-online {
+    background: var(--primary);
+    box-shadow: 0 0 10px var(--primary);
+}
+
+.status-away {
+    background: #ffaa00;
+    box-shadow: 0 0 10px #ffaa00;
+}
+
+.status-offline {
+    background: var(--text-muted);
+}
+
+/* Hover Effects */
+.hover-glow:hover {
+    filter: brightness(1.2);
+    text-shadow: 0 0 10px var(--primary);
+}
+
+/* Terminal Cursor */
+.terminal-cursor::after {
+    content: '_';
+    animation: blink 1s infinite;
+}
+
+@keyframes blink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+}