Spaces:

CodNikhil
/

chatzonex

Running

App Files Files Community

CodNikhil commited on Jul 3, 2025

Commit

7ffb7d1

verified ·

1 Parent(s): dd05bc0

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +933 -19

README.md CHANGED Viewed

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

 ---
+title: chatzonex
+emoji: 🐳
+colorFrom: gray
+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,933 @@
-<!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>ChatzoneX - Private Anonymous Chat</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --neon-blue: #08f7fe;
+            --neon-pink: #fe53bb;
+            --neon-green: #09fbd3;
+            --dark-bg: #0f0e17;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--dark-bg);
+            color: white;
+            overflow-x: hidden;
+        }
+        .glass-card {
+            background: rgba(15, 14, 23, 0.7);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .neon-border {
+            box-shadow: 0 0 10px rgba(8, 247, 254, 0.5);
+            border: 1px solid rgba(8, 247, 254, 0.3);
+        }
+        .neon-text-blue {
+            text-shadow: 0 0 5px rgba(8, 247, 254, 0.8);
+            color: var(--neon-blue);
+        }
+        .neon-text-pink {
+            text-shadow: 0 0 5px rgba(254, 83, 187, 0.8);
+            color: var(--neon-pink);
+        }
+        .neon-text-green {
+            text-shadow: 0 0 5px rgba(9, 251, 211, 0.8);
+            color: var(--neon-green);
+        }
+        .glow-on-hover:hover {
+            box-shadow: 0 0 15px rgba(8, 247, 254, 0.7);
+        }
+        .typing-indicator::after {
+            content: '...';
+            animation: typing 1.5s infinite;
+        }
+        @keyframes typing {
+            0% { content: '.'; }
+            33% { content: '..'; }
+            66% { content: '...'; }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 0.7; }
+            50% { opacity: 1; }
+            100% { opacity: 0.7; }
+        }
+        .badge-admin {
+            background: linear-gradient(45deg, #fe53bb, #08f7fe);
+            animation: badgeGlow 3s infinite alternate;
+        }
+        .badge-owner {
+            background: linear-gradient(45deg, #09fbd3, #08f7fe);
+            animation: badgeGlow 2s infinite alternate;
+        }
+        @keyframes badgeGlow {
+            0% { box-shadow: 0 0 5px rgba(8, 247, 254, 0.5); }
+            100% { box-shadow: 0 0 15px rgba(8, 247, 254, 0.9); }
+        }
+        .emoji-rain {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 100;
+        }
+        .emoji {
+            position: absolute;
+            font-size: 24px;
+            animation: fall linear forwards;
+        }
+        @keyframes fall {
+            to {
+                transform: translateY(100vh);
+            }
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Hidden Admin Panel (not accessible via UI) -->
+    <div id="adminPanel" class="hidden fixed inset-0 z-50 bg-black bg-opacity-90 flex items-center justify-center p-4">
+        <div class="glass-card neon-border rounded-lg w-full max-w-4xl h-96 overflow-hidden">
+            <div class="flex justify-between items-center p-4 border-b border-gray-700">
+                <h2 class="text-xl font-bold neon-text-blue">Admin Control Panel</h2>
+                <button id="closeAdminPanel" class="text-gray-400 hover:text-white">&times;</button>
+            </div>
+            <div class="p-4 h-full overflow-y-auto">
+                <div id="adminContent" class="hidden">
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <div class="glass-card p-4 rounded-lg">
+                            <h3 class="font-bold neon-text-pink mb-2">Room Controls</h3>
+                            <div class="space-y-2">
+                                <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm">Join Any Room</button>
+                                <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-1 px-3 rounded text-sm">Room Lockdown</button>
+                                <button class="w-full bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded text-sm">Create Announcement</button>
+                            </div>
+                        </div>
+                        <div class="glass-card p-4 rounded-lg">
+                            <h3 class="font-bold neon-text-pink mb-2">User Moderation</h3>
+                            <div class="space-y-2">
+                                <input type="text" placeholder="Username" class="w-full bg-gray-800 text-white p-1 rounded text-sm mb-2">
+                                <button class="w-full bg-red-600 hover:bg-red-700 text-white py-1 px-3 rounded text-sm">Kick User</button>
+                                <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white py-1 px-3 rounded text-sm">Mute User</button>
+                                <button class="w-full bg-orange-600 hover:bg-orange-700 text-white py-1 px-3 rounded text-sm">Ban User</button>
+                            </div>
+                        </div>
+                        <div class="glass-card p-4 rounded-lg">
+                            <h3 class="font-bold neon-text-pink mb-2">System Tools</h3>
+                            <div class="space-y-2">
+                                <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-1 px-3 rounded text-sm">Export Logs</button>
+                                <button class="w-full bg-pink-600 hover:bg-pink-700 text-white py-1 px-3 rounded text-sm">Emoji Rain</button>
+                                <button class="w-full bg-teal-600 hover:bg-teal-700 text-white py-1 px-3 rounded text-sm">Change Theme</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="glass-card p-4 mt-4 rounded-lg">
+                        <h3 class="font-bold neon-text-pink mb-2">Live Activity</h3>
+                        <div class="h-32 overflow-y-auto text-sm">
+                            <div class="flex justify-between py-1 border-b border-gray-700">
+                                <span>User joined: MysticOwl42</span>
+                                <span class="text-gray-400">2s ago</span>
+                            </div>
+                            <div class="flex justify-between py-1 border-b border-gray-700">
+                                <span>Room created: TechTalk</span>
+                                <span class="text-gray-400">1m ago</span>
+                            </div>
+                            <div class="flex justify-between py-1 border-b border-gray-700">
+                                <span>Message deleted in #General</span>
+                                <span class="text-gray-400">3m ago</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="adminAuth" class="h-full flex flex-col items-center justify-center">
+                    <h3 class="text-xl font-bold neon-text-green mb-4">Admin Authentication</h3>
+                    <input type="password" id="adminCode" placeholder="Enter access code" class="bg-gray-800 text-white p-2 rounded mb-4 w-64 text-center">
+                    <button id="submitAdminCode" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded">Verify</button>
+                    <p id="adminError" class="text-red-400 mt-2 text-sm hidden">Invalid access code</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Fake Admin Panel Trap -->
+    <div id="fakeAdminPanel" class="hidden fixed inset-0 z-50 bg-black bg-opacity-90 flex items-center justify-center">
+        <div class="glass-card p-8 rounded-lg max-w-md text-center">
+            <h2 class="text-2xl font-bold neon-text-pink mb-4">ACCESS DENIED</h2>
+            <p class="mb-6">Unauthorized access attempt has been logged.</p>
+            <button id="closeFakeAdmin" class="bg-red-600 hover:bg-red-700 text-white py-2 px-6 rounded">Close</button>
+        </div>
+    </div>
+    <!-- Unauthorized Page (hidden by default) -->
+    <div id="unauthorizedPage" class="hidden fixed inset-0 z-50 bg-black bg-opacity-90 flex items-center justify-center">
+        <div class="glass-card p-8 rounded-lg max-w-md text-center">
+            <h2 class="text-2xl font-bold neon-text-pink mb-4">UNAUTHORIZED</h2>
+            <p class="mb-6">You don't have permission to access this resource.</p>
+            <button id="goHome" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded">Return Home</button>
+        </div>
+    </div>
+    <!-- Emoji Rain Container -->
+    <div id="emojiRain" class="emoji-rain hidden"></div>
+    <!-- Main App Container -->
+    <div id="app" class="flex-1 flex flex-col">
+        <!-- Header -->
+        <header class="glass-card p-4 shadow-md">
+            <div class="container mx-auto flex justify-between items-center">
+                <div class="flex items-center space-x-2">
+                    <h1 id="logo" class="text-2xl font-bold neon-text-blue cursor-pointer">Chatzone<span class="neon-text-pink">X</span></h1>
+                    <span id="connectionStatus" class="text-xs px-2 py-1 rounded-full bg-green-600">Connected</span>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button id="createRoomBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm">Create Room</button>
+                    <div id="userBadge" class="hidden flex items-center space-x-2">
+                        <span id="usernameDisplay" class="font-medium"></span>
+                        <span id="userRoleBadge" class="text-xs px-2 py-1 rounded-full hidden"></span>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <main class="flex-1 container mx-auto p-4 flex flex-col md:flex-row gap-4">
+            <!-- Sidebar -->
+            <aside class="w-full md:w-64 glass-card rounded-lg p-4">
+                <div class="mb-4">
+                    <h2 class="font-bold text-lg neon-text-green mb-2">Rooms</h2>
+                    <div class="flex space-x-2 mb-2">
+                        <button id="publicRoomsTab" class="flex-1 bg-blue-600 text-white py-1 px-2 rounded text-sm">Public</button>
+                        <button id="privateRoomsTab" class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-1 px-2 rounded text-sm">Private</button>
+                    </div>
+                    <input type="text" id="roomSearch" placeholder="Search rooms..." class="w-full bg-gray-800 text-white p-2 rounded text-sm mb-2">
+                </div>
+                <div id="roomsList" class="space-y-2 max-h-96 overflow-y-auto">
+                    <!-- Rooms will be populated here -->
+                    <div class="p-2 rounded hover:bg-gray-700 cursor-pointer flex justify-between items-center">
+                        <span>General</span>
+                        <span class="text-xs text-gray-400">4/8</span>
+                    </div>
+                    <div class="p-2 rounded hover:bg-gray-700 cursor-pointer flex justify-between items-center">
+                        <span>Tech Talk</span>
+                        <span class="text-xs text-gray-400">2/8</span>
+                    </div>
+                    <div class="p-2 rounded hover:bg-gray-700 cursor-pointer flex justify-between items-center">
+                        <span>Gaming</span>
+                        <span class="text-xs text-gray-400">6/8</span>
+                    </div>
+                </div>
+                <div class="mt-4">
+                    <h2 class="font-bold text-lg neon-text-green mb-2">Online Users</h2>
+                    <div id="onlineUsers" class="space-y-1 max-h-48 overflow-y-auto">
+                        <!-- Users will be populated here -->
+                        <div class="flex items-center space-x-2 p-1">
+                            <div class="w-2 h-2 rounded-full bg-green-500"></div>
+                            <span>SilentTurtle91</span>
+                        </div>
+                        <div class="flex items-center space-x-2 p-1">
+                            <div class="w-2 h-2 rounded-full bg-green-500"></div>
+                            <span>MysticOwl42</span>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+            <!-- Chat Area -->
+            <div class="flex-1 flex flex-col glass-card rounded-lg overflow-hidden">
+                <!-- Room Header -->
+                <div class="p-3 border-b border-gray-700 flex justify-between items-center">
+                    <h2 id="currentRoom" class="font-bold text-lg">Welcome to ChatzoneX</h2>
+                    <div id="roomControls" class="hidden space-x-2">
+                        <button class="bg-gray-700 hover:bg-gray-600 text-white py-1 px-2 rounded text-sm">Leave</button>
+                        <button class="bg-blue-600 hover:bg-blue-700 text-white py-1 px-2 rounded text-sm">Invite</button>
+                    </div>
+                </div>
+                <!-- Messages -->
+                <div id="messages" class="flex-1 p-4 overflow-y-auto space-y-3">
+                    <!-- Messages will be populated here -->
+                    <div class="flex flex-col">
+                        <div class="text-center text-gray-400 text-sm mb-4">Today</div>
+                        <div class="flex mb-3">
+                            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center mr-3">ST</div>
+                            <div>
+                                <div class="flex items-baseline">
+                                    <span class="font-bold mr-2">SilentTurtle91</span>
+                                    <span class="text-xs text-gray-400">12:34 PM</span>
+                                </div>
+                                <p class="text-sm">Hello everyone! 👋</p>
+                            </div>
+                        </div>
+                        <div class="flex mb-3">
+                            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center mr-3">MO</div>
+                            <div>
+                                <div class="flex items-baseline">
+                                    <span class="font-bold mr-2">MysticOwl42</span>
+                                    <span class="text-xs text-gray-400">12:35 PM</span>
+                                </div>
+                                <p class="text-sm">Hey there! How's everyone doing?</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Message Input -->
+                <div class="p-3 border-t border-gray-700">
+                    <div id="typingIndicator" class="text-xs text-gray-400 mb-1 hidden">
+                        <span class="typing-indicator"></span> is typing...
+                    </div>
+                    <div class="flex space-x-2">
+                        <input type="text" id="messageInput" placeholder="Type your message..." class="flex-1 bg-gray-800 text-white p-2 rounded focus:outline-none focus:ring-1 focus:ring-blue-500">
+                        <button id="sendMessage" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">Send</button>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+    <!-- Welcome Modal -->
+    <div id="welcomeModal" class="fixed inset-0 z-50 bg-black bg-opacity-90 flex items-center justify-center p-4">
+        <div class="glass-card neon-border rounded-lg w-full max-w-md p-6">
+            <h2 class="text-2xl font-bold neon-text-blue mb-4">Welcome to ChatzoneX</h2>
+            <p class="mb-6">A completely private chat experience. No accounts, no tracking, just chat.</p>
+            <div class="mb-4">
+                <label for="username" class="block text-sm font-medium mb-1">Choose a name</label>
+                <input type="text" id="username" placeholder="e.g. SilentTurtle91" class="w-full bg-gray-800 text-white p-2 rounded focus:outline-none focus:ring-1 focus:ring-blue-500">
+                <button id="randomUsername" class="text-xs text-blue-400 hover:text-blue-300 mt-1">Generate random name</button>
+            </div>
+            <div class="mb-6">
+                <label for="roomCode" class="block text-sm font-medium mb-1">Room invite code (optional)</label>
+                <input type="text" id="roomCode" placeholder="Enter code to join private room" class="w-full bg-gray-800 text-white p-2 rounded focus:outline-none focus:ring-1 focus:ring-blue-500">
+            </div>
+            <div class="flex justify-end space-x-3">
+                <button id="joinPublic" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">Join Public Chat</button>
+            </div>
+        </div>
+    </div>
+    <!-- Create Room Modal -->
+    <div id="createRoomModal" class="hidden fixed inset-0 z-50 bg-black bg-opacity-90 flex items-center justify-center p-4">
+        <div class="glass-card neon-border rounded-lg w-full max-w-md p-6">
+            <h2 class="text-2xl font-bold neon-text-blue mb-4">Create New Room</h2>
+            <div class="mb-4">
+                <label for="newRoomName" class="block text-sm font-medium mb-1">Room Name</label>
+                <input type="text" id="newRoomName" placeholder="e.g. Tech Talk" class="w-full bg-gray-800 text-white p-2 rounded focus:outline-none focus:ring-1 focus:ring-blue-500">
+            </div>
+            <div class="mb-4">
+                <label for="roomType" class="block text-sm font-medium mb-1">Room Type</label>
+                <select id="roomType" class="w-full bg-gray-800 text-white p-2 rounded focus:outline-none focus:ring-1 focus:ring-blue-500">
+                    <option value="public">Public (listed in room directory)</option>
+                    <option value="private">Private (invite only)</option>
+                </select>
+            </div>
+            <div id="privateRoomOptions" class="hidden mb-4">
+                <label for="inviteCode" class="block text-sm font-medium mb-1">Invite Code</label>
+                <div class="flex space-x-2">
+                    <input type="text" id="inviteCode" placeholder="Leave blank to generate" class="flex-1 bg-gray-800 text-white p-2 rounded focus:outline-none focus:ring-1 focus:ring-blue-500">
+                    <button id="generateCode" class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-3 rounded text-sm">Generate</button>
+                </div>
+            </div>
+            <div class="flex justify-end space-x-3">
+                <button id="cancelCreateRoom" class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded">Cancel</button>
+                <button id="confirmCreateRoom" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">Create Room</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // App State
+        const state = {
+            currentUser: null,
+            currentRoom: null,
+            isAdmin: false,
+            isOwner: false,
+            adminCode: "openchatx", // In a real app, this would be more secure
+            ownerCode: "masterkeyx",
+            secretPhrase: "open sesame",
+            adminShortcutPressed: false,
+            ownerShortcutPressed: false,
+            logoClickCount: 0,
+            logoClickTimeout: null,
+            rooms: [
+                { id: 'general', name: 'General', type: 'public', users: 4, maxUsers: 8 },
+                { id: 'tech', name: 'Tech Talk', type: 'public', users: 2, maxUsers: 8 },
+                { id: 'gaming', name: 'Gaming', type: 'public', users: 6, maxUsers: 8 },
+                { id: 'secret', name: 'Secret Room', type: 'private', users: 3, maxUsers: 8, inviteCode: 'xyz123' }
+            ],
+            users: [
+                { name: 'SilentTurtle91', role: 'user', online: true },
+                { name: 'MysticOwl42', role: 'admin', online: true },
+                { name: 'QuantumFox', role: 'user', online: false },
+                { name: 'NeonGhost', role: 'mod', online: true }
+            ],
+            messages: {
+                general: [
+                    { user: 'SilentTurtle91', text: 'Hello everyone! 👋', time: '12:34 PM' },
+                    { user: 'MysticOwl42', text: 'Hey there! How\'s everyone doing?', time: '12:35 PM' }
+                ]
+            }
+        };
+        // DOM Elements
+        const elements = {
+            app: document.getElementById('app'),
+            welcomeModal: document.getElementById('welcomeModal'),
+            createRoomModal: document.getElementById('createRoomModal'),
+            adminPanel: document.getElementById('adminPanel'),
+            fakeAdminPanel: document.getElementById('fakeAdminPanel'),
+            unauthorizedPage: document.getElementById('unauthorizedPage'),
+            emojiRain: document.getElementById('emojiRain'),
+            username: document.getElementById('username'),
+            randomUsername: document.getElementById('randomUsername'),
+            roomCode: document.getElementById('roomCode'),
+            joinPublic: document.getElementById('joinPublic'),
+            createRoomBtn: document.getElementById('createRoomBtn'),
+            newRoomName: document.getElementById('newRoomName'),
+            roomType: document.getElementById('roomType'),
+            privateRoomOptions: document.getElementById('privateRoomOptions'),
+            inviteCode: document.getElementById('inviteCode'),
+            generateCode: document.getElementById('generateCode'),
+            cancelCreateRoom: document.getElementById('cancelCreateRoom'),
+            confirmCreateRoom: document.getElementById('confirmCreateRoom'),
+            publicRoomsTab: document.getElementById('publicRoomsTab'),
+            privateRoomsTab: document.getElementById('privateRoomsTab'),
+            roomSearch: document.getElementById('roomSearch'),
+            roomsList: document.getElementById('roomsList'),
+            onlineUsers: document.getElementById('onlineUsers'),
+            currentRoom: document.getElementById('currentRoom'),
+            roomControls: document.getElementById('roomControls'),
+            messages: document.getElementById('messages'),
+            typingIndicator: document.getElementById('typingIndicator'),
+            messageInput: document.getElementById('messageInput'),
+            sendMessage: document.getElementById('sendMessage'),
+            userBadge: document.getElementById('userBadge'),
+            usernameDisplay: document.getElementById('usernameDisplay'),
+            userRoleBadge: document.getElementById('userRoleBadge'),
+            logo: document.getElementById('logo'),
+            adminCode: document.getElementById('adminCode'),
+            submitAdminCode: document.getElementById('submitAdminCode'),
+            adminError: document.getElementById('adminError'),
+            adminContent: document.getElementById('adminContent'),
+            adminAuth: document.getElementById('adminAuth'),
+            closeAdminPanel: document.getElementById('closeAdminPanel'),
+            closeFakeAdmin: document.getElementById('closeFakeAdmin'),
+            goHome: document.getElementById('goHome'),
+            connectionStatus: document.getElementById('connectionStatus')
+        };
+        // Initialize the app
+        function init() {
+            // Check if user already has a name in localStorage
+            const savedName = localStorage.getItem('chatzonex_username');
+            if (savedName) {
+                state.currentUser = savedName;
+                joinRoom('general');
+                elements.welcomeModal.classList.add('hidden');
+                updateUserBadge();
+            } else {
+                elements.welcomeModal.classList.remove('hidden');
+            }
+            // Generate random username if button clicked
+            elements.randomUsername.addEventListener('click', generateRandomUsername);
+            // Join public chat
+            elements.joinPublic.addEventListener('click', () => {
+                const username = elements.username.value.trim();
+                if (username) {
+                    state.currentUser = username;
+                    localStorage.setItem('chatzonex_username', username);
+                    const roomCode = elements.roomCode.value.trim();
+                    if (roomCode) {
+                        // Try to join private room
+                        const room = state.rooms.find(r => r.inviteCode === roomCode);
+                        if (room) {
+                            joinRoom(room.id);
+                        } else {
+                            alert('Invalid room code. Joining public chat instead.');
+                            joinRoom('general');
+                        }
+                    } else {
+                        joinRoom('general');
+                    }
+                    elements.welcomeModal.classList.add('hidden');
+                    updateUserBadge();
+                } else {
+                    alert('Please choose a name');
+                }
+            });
+            // Create room button
+            elements.createRoomBtn.addEventListener('click', () => {
+                elements.createRoomModal.classList.remove('hidden');
+            });
+            // Room type change
+            elements.roomType.addEventListener('change', (e) => {
+                if (e.target.value === 'private') {
+                    elements.privateRoomOptions.classList.remove('hidden');
+                } else {
+                    elements.privateRoomOptions.classList.add('hidden');
+                }
+            });
+            // Generate invite code
+            elements.generateCode.addEventListener('click', () => {
+                elements.inviteCode.value = generateInviteCode();
+            });
+            // Cancel create room
+            elements.cancelCreateRoom.addEventListener('click', () => {
+                elements.createRoomModal.classList.add('hidden');
+            });
+            // Confirm create room
+            elements.confirmCreateRoom.addEventListener('click', () => {
+                const roomName = elements.newRoomName.value.trim();
+                if (!roomName) {
+                    alert('Please enter a room name');
+                    return;
+                }
+                const roomType = elements.roomType.value;
+                const roomId = roomName.toLowerCase().replace(/\s+/g, '-');
+                let inviteCode = '';
+                if (roomType === 'private') {
+                    inviteCode = elements.inviteCode.value.trim() || generateInviteCode();
+                }
+                // Add new room to state
+                state.rooms.push({
+                    id: roomId,
+                    name: roomName,
+                    type: roomType,
+                    users: 1,
+                    maxUsers: 8,
+                    inviteCode: inviteCode
+                });
+                // Join the new room
+                joinRoom(roomId);
+                // Close modal
+                elements.createRoomModal.classList.add('hidden');
+                // Update rooms list
+                renderRoomsList();
+            });
+            // Send message
+            elements.sendMessage.addEventListener('click', sendMessage);
+            elements.messageInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    sendMessage();
+                }
+            });
+            // Typing indicator
+            elements.messageInput.addEventListener('input', () => {
+                // In a real app, we'd send a "typing" event to the server
+                // For demo, we'll just show it locally
+                if (elements.messageInput.value.trim()) {
+                    elements.typingIndicator.classList.remove('hidden');
+                    elements.typingIndicator.innerHTML = `<span class="typing-indicator"></span> ${state.currentUser} is typing...`;
+                } else {
+                    elements.typingIndicator.classList.add('hidden');
+                }
+            });
+            // Admin panel controls
+            elements.closeAdminPanel.addEventListener('click', () => {
+                elements.adminPanel.classList.add('hidden');
+            });
+            elements.submitAdminCode.addEventListener('click', verifyAdminCode);
+            elements.adminCode.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    verifyAdminCode();
+                }
+            });
+            elements.closeFakeAdmin.addEventListener('click', () => {
+                elements.fakeAdminPanel.classList.add('hidden');
+            });
+            elements.goHome.addEventListener('click', () => {
+                elements.unauthorizedPage.classList.add('hidden');
+            });
+            // Logo click (Easter egg)
+            elements.logo.addEventListener('click', handleLogoClick);
+            // Keyboard shortcuts for admin/owner panels
+            document.addEventListener('keydown', handleKeyDown);
+            document.addEventListener('keyup', handleKeyUp);
+            // Initial render
+            renderRoomsList();
+            renderOnlineUsers();
+            // Simulate connection status changes
+            simulateConnectionStatus();
+        }
+        // Generate a random username
+        function generateRandomUsername() {
+            const adjectives = ['Silent', 'Mystic', 'Quantum', 'Neon', 'Digital', 'Virtual', 'Cosmic', 'Lunar', 'Solar', 'Electric'];
+            const nouns = ['Turtle', 'Owl', 'Fox', 'Ghost', 'Phoenix', 'Dragon', 'Wolf', 'Eagle', 'Panther', 'Hawk'];
+            const number = Math.floor(Math.random() * 90) + 10;
+            const username = `${adjectives[Math.floor(Math.random() * adjectives.length)]}${nouns[Math.floor(Math.random() * nouns.length)]}${number}`;
+            elements.username.value = username;
+        }
+        // Generate an invite code
+        function generateInviteCode() {
+            const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789';
+            let code = '';
+            for (let i = 0; i < 6; i++) {
+                code += chars.charAt(Math.floor(Math.random() * chars.length));
+            }
+            return code;
+        }
+        // Join a room
+        function joinRoom(roomId) {
+            const room = state.rooms.find(r => r.id === roomId);
+            if (!room) return;
+            // Check if room is full (except for admins/owners)
+            if (room.users >= room.maxUsers && !state.isAdmin && !state.isOwner) {
+                alert('This room is full');
+                return;
+            }
+            state.currentRoom = roomId;
+            elements.currentRoom.textContent = room.name;
+            elements.roomControls.classList.remove('hidden');
+            // Update room user count
+            room.users += 1;
+            // Render messages for this room
+            renderMessages();
+            // Update rooms list to show current room as active
+            renderRoomsList();
+        }
+        // Render rooms list
+        function renderRoomsList() {
+            elements.roomsList.innerHTML = '';
+            const isPublicTab = elements.publicRoomsTab.classList.contains('bg-blue-600');
+            const searchTerm = elements.roomSearch.value.toLowerCase();
+            state.rooms.forEach(room => {
+                if ((isPublicTab && room.type !== 'public') || (!isPublicTab && room.type !== 'private')) {
+                    return;
+                }
+                if (searchTerm && !room.name.toLowerCase().includes(searchTerm)) {
+                    return;
+                }
+                const roomElement = document.createElement('div');
+                roomElement.className = `p-2 rounded hover:bg-gray-700 cursor-pointer flex justify-between items-center ${state.currentRoom === room.id ? 'bg-gray-700' : ''}`;
+                roomElement.innerHTML = `
+                    <span>${room.name}</span>
+                    <span class="text-xs ${room.users >= room.maxUsers ? 'text-red-400' : 'text-gray-400'}">${room.users}/${room.maxUsers}</span>
+                `;
+                roomElement.addEventListener('click', () => joinRoom(room.id));
+                elements.roomsList.appendChild(roomElement);
+            });
+        }
+        // Render online users
+        function renderOnlineUsers() {
+            elements.onlineUsers.innerHTML = '';
+            state.users.forEach(user => {
+                if (user.online) {
+                    const userElement = document.createElement('div');
+                    userElement.className = 'flex items-center space-x-2 p-1';
+                    // Add role badge if current user is admin/owner
+                    let roleBadge = '';
+                    if ((state.isAdmin || state.isOwner) && user.role !== 'user') {
+                        roleBadge = `<span class="text-xs px-1 rounded ${
+                            user.role === 'admin' ? 'badge-admin' :
+                            user.role === 'owner' ? 'badge-owner' : 'bg-gray-600'
+                        }">${user.role === 'mod' ? 'MOD' : user.role.toUpperCase()}</span>`;
+                    }
+                    userElement.innerHTML = `
+                        <div class="w-2 h-2 rounded-full bg-green-500"></div>
+                        <span>${user.name}</span>
+                        ${roleBadge}
+                    `;
+                    elements.onlineUsers.appendChild(userElement);
+                }
+            });
+        }
+        // Render messages for current room
+        function renderMessages() {
+            elements.messages.innerHTML = '';
+            // Add date divider
+            const dateDivider = document.createElement('div');
+            dateDivider.className = 'text-center text-gray-400 text-sm mb-4';
+            dateDivider.textContent = 'Today';
+            elements.messages.appendChild(dateDivider);
+            // Add messages
+            const roomMessages = state.messages[state.currentRoom] || [];
+            roomMessages.forEach(msg => {
+                const messageElement = document.createElement('div');
+                messageElement.className = 'flex mb-3';
+                const initials = msg.user.substring(0, 2).toUpperCase();
+                messageElement.innerHTML = `
+                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center mr-3">${initials}</div>
+                    <div>
+                        <div class="flex items-baseline">
+                            <span class="font-bold mr-2">${msg.user}</span>
+                            <span class="text-xs text-gray-400">${msg.time}</span>
+                        </div>
+                        <p class="text-sm">${msg.text}</p>
+                    </div>
+                `;
+                elements.messages.appendChild(messageElement);
+            });
+            // Scroll to bottom
+            elements.messages.scrollTop = elements.messages.scrollHeight;
+        }
+        // Send a message
+        function sendMessage() {
+            const text = elements.messageInput.value.trim();
+            if (!text) return;
+            // Check for secret phrase to trigger admin panel
+            if (text.toLowerCase() === state.secretPhrase) {
+                showAdminPanel();
+                elements.messageInput.value = '';
+                return;
+            }
+            // Add message to state
+            if (!state.messages[state.currentRoom]) {
+                state.messages[state.currentRoom] = [];
+            }
+            const now = new Date();
+            const time = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+            state.messages[state.currentRoom].push({
+                user: state.currentUser,
+                text: text,
+                time: time
+            });
+            // Render updated messages
+            renderMessages();
+            // Clear input and hide typing indicator
+            elements.messageInput.value = '';
+            elements.typingIndicator.classList.add('hidden');
+        }
+        // Update user badge in header
+        function updateUserBadge() {
+            if (state.currentUser) {
+                elements.userBadge.classList.remove('hidden');
+                elements.usernameDisplay.textContent = state.currentUser;
+                if (state.isAdmin || state.isOwner) {
+                    elements.userRoleBadge.classList.remove('hidden');
+                    elements.userRoleBadge.className = 'text-xs px-2 py-1 rounded-full ' +
+                        (state.isOwner ? 'badge-owner' : 'badge-admin');
+                    elements.userRoleBadge.textContent = state.isOwner ? 'OWNER' : 'ADMIN';
+                } else {
+                    elements.userRoleBadge.classList.add('hidden');
+                }
+            } else {
+                elements.userBadge.classList.add('hidden');
+            }
+        }
+        // Handle logo click (Easter egg)
+        function handleLogoClick() {
+            state.logoClickCount++;
+            if (state.logoClickTimeout) {
+                clearTimeout(state.logoClickTimeout);
+            }
+            state.logoClickTimeout = setTimeout(() => {
+                state.logoClickCount = 0;
+            }, 2000);
+            if (state.logoClickCount >= 5) {
+                showAdminPanel();
+                state.logoClickCount = 0;
+            }
+        }
+        // Handle key down for admin shortcuts
+        function handleKeyDown(e) {
+            if (e.ctrlKey && e.shiftKey && e.key === 'A') {
+                state.adminShortcutPressed = true;
+            }
+            if (e.ctrlKey && e.shiftKey && e.key === 'O') {
+                state.ownerShortcutPressed = true;
+            }
+        }
+        // Handle key up for admin shortcuts
+        function handleKeyUp(e) {
+            if (state.adminShortcutPressed && e.key === 'A') {
+                showAdminPanel();
+                state.adminShortcutPressed = false;
+            }
+            if (state.ownerShortcutPressed && e.key === 'O') {
+                showAdminPanel(true);
+                state.ownerShortcutPressed = false;
+            }
+            if (e.key === 'Control' || e.key === 'Shift') {
+                state.adminShortcutPressed = false;
+                state.ownerShortcutPressed = false;
+            }
+        }
+        // Show admin panel
+        function showAdminPanel(isOwner = false) {
+            // If user is already admin/owner, show the panel directly
+            if ((isOwner && state.isOwner) || (!isOwner && state.isAdmin)) {
+                elements.adminPanel.classList.remove('hidden');
+                elements.adminAuth.classList.add('hidden');
+                elements.adminContent.classList.remove('hidden');
+                return;
+            }
+            // If trying to access owner panel without owner rights, show unauthorized
+            if (isOwner && !state.isOwner) {
+                elements.unauthorizedPage.classList.remove('hidden');
+                return;
+            }
+            // Otherwise show authentication
+            elements.adminPanel.classList.remove('hidden');
+            elements.adminAuth.classList.remove('hidden');
+            elements.adminContent.classList.add('hidden');
+            elements.adminError.classList.add('hidden');
+            elements.adminCode.focus();
+        }
+        // Verify admin code
+        function verifyAdminCode() {
+            const code = elements.adminCode.value.trim();
+            if (code === state.adminCode) {
+                state.isAdmin = true;
+                updateUserBadge();
+                elements.adminAuth.classList.add('hidden');
+                elements.adminContent.classList.remove('hidden');
+                renderOnlineUsers(); // Update to show role badges
+            } else if (code === state.ownerCode) {
+                state.isOwner = true;
+                state.isAdmin = true;
+                updateUserBadge();
+                elements.adminAuth.classList.add('hidden');
+                elements.adminContent.classList.remove('hidden');
+                renderOnlineUsers(); // Update to show role badges
+            } else {
+                elements.adminError.classList.remove('hidden');
+            }
+        }
+        // Create emoji rain effect
+        function createEmojiRain() {
+            const emojis = ['😀', '😂', '🤣', '❤️', '🔥', '👍', '🎉', '🤔', '👀', '🌈'];
+            elements.emojiRain.innerHTML = '';
+            elements.emojiRain.classList.remove('hidden');
+            for (let i = 0; i < 50; i++) {
+                const emoji = document.createElement('div');
+                emoji.className = 'emoji';
+                emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
+                emoji.style.left = Math.random() * 100 + 'vw';
+                emoji.style.animationDuration = Math.random() * 3 + 2 + 's';
+                emoji.style.animationDelay = Math.random() * 2 + 's';
+                elements.emojiRain.appendChild(emoji);
+            }
+            setTimeout(() => {
+                elements.emojiRain.classList.add('hidden');
+            }, 5000);
+        }
+        // Simulate connection status changes
+        function simulateConnectionStatus() {
+            setInterval(() => {
+                if (Math.random() > 0.9) { // 10% chance to change status
+                    if (elements.connectionStatus.classList.contains('bg-green-600')) {
+                        elements.connectionStatus.classList.remove('bg-green-600');
+                        elements.connectionStatus.classList.add('bg-yellow-600');
+                        elements.connectionStatus.textContent = 'Reconnecting...';
+                    } else {
+                        elements.connectionStatus.classList.remove('bg-yellow-600');
+                        elements.connectionStatus.classList.add('bg-green-600');
+                        elements.connectionStatus.textContent = 'Connected';
+                    }
+                }
+            }, 10000);
+        }
+        // Initialize the app when DOM is loaded
+        document.addEventListener('DOMContentLoaded', init);
+    </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=CodNikhil/chatzonex" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>