Spaces:

---

Dapshen

/

null-v-0

Like 0

Running

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Tech Null Messenger</title>

<script src="https://cdn.tailwindcss.com"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>

<div id="app" class="min-h-screen flex flex-col">

<!-- Header -->

<header class="gradient-bg text-white p-4 shadow-lg">

<div class="container mx-auto flex justify-between items-center">

<h1 class="text-2xl font-bold flex items-center">

<i class="fas fa-robot mr-2"></i> Tech Null

</h1>

<div id="auth-status" class="flex items-center space-x-4">

<span id="user-info" class="hidden">

<span id="username-display" class="font-semibold"></span>

<button id="logout-btn" class="ml-2 bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded text-sm">

<i class="fas fa-sign-out-alt mr-1"></i> Logout

</button>

</span>

</div>

</div>

</header>

<!-- Main Content -->

<main class="flex-grow container mx-auto p-4">

<!-- Auth Screens -->

<div id="auth-screens" class="max-w-md mx-auto">

<!-- Login Screen -->

<div id="login-screen" class="bg-white rounded-lg shadow-md p-6 mb-4">

<h2 class="text-xl font-bold mb-4 text-gray-800">Login</h2>

<div class="mb-4">

<label for="login-id" class="block text-gray-700 mb-2">ID</label>

<input type="number" id="login-id" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">

</div>

<div class="mb-4">

<label for="login-password" class="block text-gray-700 mb-2">Password</label>

<input type="password" id="login-password" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">

</div>

<button id="login-btn" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded font-medium">

<i class="fas fa-sign-in-alt mr-2"></i> Login

</button>

<p class="text-center mt-4 text-gray-600">Don't have an account? <button id="show-register-btn" class="text-blue-500 hover:text-blue-700 font-medium">Register</button></p>

</div>

<!-- Register Screen -->

<div id="register-screen" class="bg-white rounded-lg shadow-md p-6 hidden">

<h2 class="text-xl font-bold mb-4 text-gray-800">Register</h2>

<div class="mb-4">

<label for="register-username" class="block text-gray-700 mb-2">Username (max 20 chars)</label>

<input type="text" id="register-username" maxlength="20" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">

</div>

<div class="mb-4">

<label for="register-password" class="block text-gray-700 mb-2">Password (max 20 chars)</label>

<input type="password" id="register-password" maxlength="20" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">

</div>

<button id="register-btn" class="w-full bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded font-medium">

<i class="fas fa-user-plus mr-2"></i> Register

</button>

<p class="text-center mt-4 text-gray-600">Already have an account? <button id="show-login-btn" class="text-blue-500 hover:text-blue-700 font-medium">Login</button></p>

</div>

</div>

<!-- Chat Screen -->

<div id="chat-screen" class="hidden">

<div class="flex flex-col lg:flex-row gap-4">

<!-- Chat Area -->

<div class="flex-grow">

<div class="bg-white rounded-lg shadow-md overflow-hidden">

<div class="p-4 border-b border-gray-200 bg-gray-50">

<h2 class="text-xl font-bold text-gray-800">Global Chat</h2>

<div id="message-stats" class="text-sm text-gray-600 mt-1">

Messages: <span id="message-count">0</span> • Users: <span id="user-count">1</span>