Spaces:

Webtekycn
/

f4-chat

Running

App Files Files Community

school44s commited on Aug 11, 2025

Commit

3e183cb

verified ·

1 Parent(s): f9bf3b2

Upload 4 files

Browse files

Files changed (4) hide show

index.html +100 -19
index2.html +96 -0
script.js +589 -0
style.css +399 -28

index.html CHANGED Viewed

@@ -1,19 +1,100 @@
-<!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="vi">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DB-chat</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: Arial, sans-serif;
+      line-height: 1.6;
+      color: #333;
+    }
+    header {
+      background: #20232a;
+      color: #fff;
+      padding: 1rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    header h1 {
+      margin: 0;
+      font-size: 1.8rem;
+    }
+    nav a {
+      color: #61dafb;
+      margin-left: 20px;
+      text-decoration: none;
+      font-weight: bold;
+    }
+    .hero {
+      background: linear-gradient(to right, #00b4db, #0083b0);
+      color: white;
+      padding: 100px 20px;
+      text-align: center;
+    }
+    .hero h2 {
+      font-size: 2.5rem;
+      margin-bottom: 20px;
+    }
+    .hero p {
+      font-size: 1.2rem;
+      margin-bottom: 30px;
+    }
+    .hero a {
+      background-color: white;
+      color: #0083b0;
+      padding: 12px 24px;
+      text-decoration: none;
+      border-radius: 5px;
+      font-weight: bold;
+      transition: background-color 0.3s;
+    }
+    .hero a:hover {
+      background-color: #f0f0f0;
+    }
+    footer {
+      background: #20232a;
+      color: white;
+      text-align: center;
+      padding: 1rem 0;
+      position: relative;
+      bottom: 0;
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>DB-chat</h1>
+    <nav>
+      <a href="index.html">Trang chủ</a>
+      <a href="chat.html">Trò chuyện</a>
+      <a href="#">Giới thiệu</a>
+    </nav>
+  </header>
+  <section class="hero">
+    <h2>Chào mừng bạn đến với DB-chat</h2>
+    <p>Trải nghiệm nền tảng trò chuyện thông minh và tiện lợi nhất.</p>
+    <a href="index2.html">Bắt đầu trò chuyện</a>
+  </section>
+  <footer>
+    &copy; 2025 DB-chat. Đã đăng ký bản quyền.
+  </footer>
+</body>
+</html>

index2.html ADDED Viewed

	@@ -0,0 +1,96 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Chat App with Auth</title>
+  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-auth-compat.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-database-compat.js"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="container">
+    <div id="auth-section">
+      <h2 id="auth-title">Đăng nhập</h2>
+      <form id="login-form">
+        <div class="form-group">
+          <label>Email</label>
+          <input type="email" id="login-email" required />
+        </div>
+        <div class="form-group">
+          <label>Mật khẩu</label>
+          <input type="password" id="login-password" required />
+        </div>
+        <button type="submit">Đăng nhập</button>
+        <button type="button" class="google-btn" id="google-login">Đăng nhập với Google</button>
+      </form>
+      <form id="register-form" class="hidden">
+        <div class="form-group">
+          <label>Tên tài khoản</label>
+          <input type="text" id="register-username" required />
+        </div>
+        <div class="form-group">
+          <label>Email</label>
+          <input type="email" id="register-email" required />
+        </div>
+        <div class="form-group">
+          <label>Mật khẩu</label>
+          <input type="password" id="register-password" required />
+        </div>
+        <button type="submit">Đăng ký</button>
+      </form>
+      <div class="switch">
+        <a href="#" id="toggle-auth">Chưa có tài khoản? Đăng ký</a>
+      </div>
+    </div>
+    <div id="chat-section" class="hidden">
+      <div class="chat-header">
+        <button id="roomListToggle" class="menu-btn">☰</button>
+        <h2>Xin chào, <span id="display-name"></span></h2>
+        <span id="current-room-name">Room chung</span>
+      </div>
+      <div class="chat-container">
+        <div id="room-sidebar" class="room-sidebar">
+          <div class="sidebar-header">
+            <h3>Danh sách Room</h3>
+            <input type="text" id="roomSearchInput" placeholder="Tìm kiếm phòng..." class="room-search-input">
+            <div class="room-actions">
+              <button id="createRoomBtn" class="create-room-btn">+ Tạo Room</button>
+              <button id="joinRoomBtn" class="join-room-btn">Tham gia Room</button>
+            </div>
+          </div>
+          <div id="room-list" class="room-list"></div>
+          <div id="search-results" class="search-results hidden">
+            <h4>Kết quả tìm kiếm:</h4>
+            <div id="search-room-list" class="room-list"></div>
+          </div>
+        </div>
+        <div class="chat-main">
+          <div class="chat-box" id="chat-box"></div>
+          <div id="mediaPreview"></div>
+          <div id="inputArea">
+            <button class="media-btn" onclick="document.getElementById('imageInput').click()" title="Gửi ảnh">📷</button>
+            <button class="media-btn" onclick="document.getElementById('videoInput').click()" title="Gửi video">🎥</button>
+            <input type="file" id="imageInput" multiple accept="image/*">
+            <input type="file" id="videoInput" accept="video/*">
+            <input type="text" id="chat-input" placeholder="Nhập tin nhắn..." />
+            <button onclick="sendMessage()">Gửi</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,589 @@

+// Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyDN6tU7Ln3JgeFP7jTprAjSgXDfzunDGQI",
+  authDomain: "gay-db7b1.firebaseapp.com",
+  databaseURL: "https://gay-db7b1-default-rtdb.firebaseio.com",
+  projectId: "gay-db7b1",
+  storageBucket: "gay-db7b1.appspot.com",
+  messagingSenderId: "959507085021",
+  appId: "1:959507085021:web:755901093c2c81d0fb4d34",
+  measurementId: "G-1900F4D48J"
+};
+// Initialize Firebase
+firebase.initializeApp(firebaseConfig);
+const auth = firebase.auth();
+const db = firebase.database();
+// Global variables
+let currentRoomId = "general";
+let currentUser = null;
+// DOM elements
+const loginForm = document.getElementById("login-form");
+const registerForm = document.getElementById("register-form");
+const toggleAuth = document.getElementById("toggle-auth");
+const authTitle = document.getElementById("auth-title");
+// Toggle between login and register forms
+toggleAuth.addEventListener("click", () => {
+  loginForm.classList.toggle("hidden");
+  registerForm.classList.toggle("hidden");
+  authTitle.textContent = loginForm.classList.contains("hidden") ? "Đăng ký" : "Đăng nhập";
+  toggleAuth.textContent = loginForm.classList.contains("hidden") ? "Đã có tài khoản? Đăng nhập" : "Chưa có tài khoản? Đăng ký";
+});
+// Register form handler
+registerForm.addEventListener("submit", (e) => {
+  e.preventDefault();
+  const username = document.getElementById("register-username").value;
+  const email = document.getElementById("register-email").value;
+  const password = document.getElementById("register-password").value;
+  auth.createUserWithEmailAndPassword(email, password).then(userCredential => {
+    return userCredential.user.updateProfile({ displayName: username });
+  }).then(() => {
+    document.getElementById("display-name").textContent = auth.currentUser.displayName;
+    showChat();
+  }).catch(error => alert(error.message));
+});
+// Login form handler
+loginForm.addEventListener("submit", (e) => {
+  e.preventDefault();
+  const email = document.getElementById("login-email").value;
+  const password = document.getElementById("login-password").value;
+  auth.signInWithEmailAndPassword(email, password).then(() => {
+    document.getElementById("display-name").textContent = auth.currentUser.displayName || auth.currentUser.email;
+    showChat();
+  }).catch(error => alert(error.message));
+});
+// Google login handler
+document.getElementById("google-login").addEventListener("click", () => {
+  const provider = new firebase.auth.GoogleAuthProvider();
+  auth.signInWithPopup(provider).then(() => {
+    document.getElementById("display-name").textContent = auth.currentUser.displayName;
+    showChat();
+  }).catch(error => alert(error.message));
+});
+// Show chat section
+function showChat() {
+  document.getElementById("auth-section").classList.add("hidden");
+  document.getElementById("chat-section").classList.remove("hidden");
+  currentUser = auth.currentUser;
+  // Initialize room functionality
+  initializeRooms();
+  loadUserRooms();
+  setupRoomListeners();
+}
+// Send message function
+function sendMessage() {
+  const input = document.getElementById("chat-input");
+  const imageInput = document.getElementById("imageInput");
+  const videoInput = document.getElementById("videoInput");
+  const text = input.value.trim();
+  const images = imageInput.files;
+  const videos = videoInput.files;
+  if (!text && images.length === 0 && videos.length === 0) return;
+  // Send text message if exists
+  if (text) {
+    db.ref(`rooms/${currentRoomId}/messages`).push({
+      name: auth.currentUser.displayName || auth.currentUser.email,
+      text: text,
+      uid: auth.currentUser.uid,
+      timestamp: Date.now()
+    });
+    // Update room last message
+    updateRoomLastMessage(currentRoomId, text);
+  }
+  // Send images
+  if (images.length > 0) {
+    sendImages(images);
+  }
+  // Send videos
+  if (videos.length > 0) {
+    sendVideos(videos);
+  }
+  // Clear inputs
+  input.value = "";
+  imageInput.value = "";
+  videoInput.value = "";
+  document.getElementById("mediaPreview").innerHTML = "";
+}
+// Send images function
+async function sendImages(files) {
+  for (const file of files) {
+    try {
+      const base64 = await toBase64(file);
+      const imageUrl = await uploadToImgbb(base64);
+      if (imageUrl) {
+        db.ref(`rooms/${currentRoomId}/messages`).push({
+          name: auth.currentUser.displayName || auth.currentUser.email,
+          text: "",
+          image: imageUrl,
+          uid: auth.currentUser.uid,
+          timestamp: Date.now()
+        });
+        // Update room last message
+        updateRoomLastMessage(currentRoomId, "📷 Hình ảnh");
+      }
+    } catch (error) {
+      console.error("Error uploading image:", error);
+      alert("Lỗi upload ảnh!");
+    }
+  }
+}
+// Send videos function
+async function sendVideos(files) {
+  for (const file of files) {
+    try {
+      showUploadProgress("Đang upload video...");
+      const videoUrl = await uploadVideo(file);
+      hideUploadProgress();
+      if (videoUrl) {
+        db.ref(`rooms/${currentRoomId}/messages`).push({
+          name: auth.currentUser.displayName || auth.currentUser.email,
+          text: "",
+          video: videoUrl,
+          uid: auth.currentUser.uid,
+          timestamp: Date.now()
+        });
+        // Update room last message
+        updateRoomLastMessage(currentRoomId, "🎥 Video");
+      }
+    } catch (error) {
+      hideUploadProgress();
+      console.error("Error uploading video:", error);
+      alert("Lỗi upload video!");
+    }
+  }
+}
+// Convert file to base64
+function toBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result.split(',')[1]);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+// Upload image to imgbb
+async function uploadToImgbb(base64) {
+  const apiKey = "eb64cc8f94a115e3a412694f2a0f10b3";
+  const formData = new FormData();
+  formData.append("key", apiKey);
+  formData.append("image", base64);
+  try {
+    const response = await fetch("https://api.imgbb.com/1/upload", {
+      method: "POST",
+      body: formData
+    });
+    const result = await response.json();
+    return result.data.url;
+  } catch (error) {
+    console.error("Error uploading to imgbb:", error);
+    return null;
+  }
+}
+// Upload video to server
+async function uploadVideo(file) {
+  const formData = new FormData();
+  formData.append("file", file);
+  try {
+    const response = await fetch("http://192.168.1.6:5000/upload", {
+      method: "POST",
+      body: formData,
+    });
+    const result = await response.json();
+    // Check if upload was successful
+    if (result.status === "success" && result.data && result.data.url) {
+      return result.data.url;
+    } else {
+      console.error("Upload failed:", result);
+      return null;
+    }
+  } catch (error) {
+    console.error("Error uploading video:", error);
+    return null;
+  }
+}
+// Show upload progress
+function showUploadProgress(message) {
+  const preview = document.getElementById("mediaPreview");
+  preview.innerHTML = `
+    <div class="upload-progress">
+      <div class="upload-progress-bar" style="width: 100%">${message}</div>
+    </div>
+  `;
+}
+// Hide upload progress
+function hideUploadProgress() {
+  document.getElementById("mediaPreview").innerHTML = "";
+}
+// Preview selected images
+document.getElementById("imageInput").addEventListener("change", function() {
+  const files = this.files;
+  const preview = document.getElementById("mediaPreview");
+  preview.innerHTML = "";
+  for (const file of files) {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const img = document.createElement("img");
+      img.src = reader.result;
+      img.title = file.name;
+      preview.appendChild(img);
+    };
+    reader.readAsDataURL(file);
+  }
+});
+// Preview selected videos
+document.getElementById("videoInput").addEventListener("change", function() {
+  const files = this.files;
+  const preview = document.getElementById("mediaPreview");
+  preview.innerHTML = "";
+  for (const file of files) {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const video = document.createElement("video");
+      video.src = reader.result;
+      video.title = file.name;
+      video.controls = true;
+      video.muted = true;
+      preview.appendChild(video);
+    };
+    reader.readAsDataURL(file);
+  }
+});
+// Allow Enter key to send message
+document.getElementById("chat-input").addEventListener("keydown", function(event) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    sendMessage();
+  }
+});
+// Listen for new messages
+const chatBox = document.getElementById("chat-box");
+let messagesListener = null;
+function listenToMessages() {
+  // Remove previous listener
+  if (messagesListener) {
+    messagesListener.off();
+  }
+  // Clear chat box
+  chatBox.innerHTML = "";
+  // Listen to current room messages
+  messagesListener = db.ref(`rooms/${currentRoomId}/messages`);
+  messagesListener.on("child_added", snapshot => {
+    const msg = snapshot.val();
+    const div = document.createElement("div");
+    div.className = "message " + (msg.uid === auth.currentUser?.uid ? "mine" : "other");
+    let content = `<strong>${msg.name}:</strong><br>`;
+    // Add text if exists
+    if (msg.text) {
+      content += `<span>${msg.text}</span>`;
+    }
+    // Add image if exists
+    if (msg.image) {
+      content += `<br><a href="${msg.image}" target="_blank">
+        <img src="${msg.image}" alt="Image" />
+      </a>`;
+    }
+    // Add video if exists
+    if (msg.video) {
+      content += `<br><video controls>
+        <source src="${msg.video}" type="video/mp4">
+        <source src="${msg.video}" type="video/webm">
+        Your browser does not support the video tag.
+      </video>`;
+    }
+    div.innerHTML = content;
+    chatBox.appendChild(div);
+    chatBox.scrollTop = chatBox.scrollHeight;
+  });
+}
+// Room management functions
+function initializeRooms() {
+  // Create general room if not exists
+  db.ref('rooms/general').once('value', snapshot => {
+    if (!snapshot.exists()) {
+      db.ref('rooms/general').set({
+        name: "Room chung",
+        description: "Phòng chat chung cho tất cả mọi người",
+        createdBy: auth.currentUser.uid,
+        createdAt: Date.now(),
+        members: {
+          [auth.currentUser.uid]: {
+            name: auth.currentUser.displayName || auth.currentUser.email,
+            joinedAt: Date.now()
+          }
+        }
+      });
+    } else {
+      // Add current user to general room if not already member
+      db.ref(`rooms/general/members/${auth.currentUser.uid}`).set({
+        name: auth.currentUser.displayName || auth.currentUser.email,
+        joinedAt: Date.now()
+      });
+    }
+  });
+  // Switch to general room
+  switchToRoom("general", "Room chung");
+}
+function loadUserRooms() {
+  const roomList = document.getElementById("room-list");
+  // Listen for rooms where user is a member
+  db.ref('rooms').on('value', snapshot => {
+    roomList.innerHTML = "";
+    const rooms = snapshot.val();
+    if (rooms) {
+      Object.keys(rooms).forEach(roomId => {
+        const room = rooms[roomId];
+        if (room.members && room.members[auth.currentUser.uid]) {
+          createRoomListItem(roomId, room);
+        }
+      });
+    }
+  });
+}
+function createRoomListItem(roomId, room) {
+  const roomList = document.getElementById("room-list");
+  const roomItem = document.createElement("div");
+  roomItem.className = `room-item ${roomId === currentRoomId ? 'active' : ''}`;
+  roomItem.dataset.roomId = roomId;
+  roomItem.onclick = () => switchToRoom(roomId, room.name);
+  roomItem.innerHTML = `
+    <div class="room-info">
+      <div class="room-name">${room.name}</div>
+      <div class="room-last-message">${room.lastMessage || "Chưa có tin nhắn"}</div>
+    </div>
+  `;
+  roomList.appendChild(roomItem);
+}
+function switchToRoom(roomId, roomName) {
+  currentRoomId = roomId;
+  document.getElementById("current-room-name").textContent = roomName;
+  // Update active room in UI
+  document.querySelectorAll(".room-item").forEach(item => {
+    item.classList.remove("active");
+  });
+  // Find and activate current room by checking data attribute
+  document.querySelectorAll(".room-item").forEach(item => {
+    if (item.dataset.roomId === roomId) {
+      item.classList.add("active");
+    }
+  });
+  // Load messages for this room
+  listenToMessages();
+}
+function updateRoomLastMessage(roomId, message) {
+  db.ref(`rooms/${roomId}/lastMessage`).set(message);
+  db.ref(`rooms/${roomId}/lastMessageTime`).set(Date.now());
+}
+function createRoom() {
+  const roomName = prompt("Nhập tên phòng chat:");
+  if (!roomName || !roomName.trim()) return;
+  const roomDescription = prompt("Nhập mô tả phòng (tùy chọn):") || `Phòng chat ${roomName.trim()}`;
+  const roomId = 'room_' + Date.now();
+  db.ref(`rooms/${roomId}`).set({
+    name: roomName.trim(),
+    description: roomDescription.trim(),
+    createdBy: auth.currentUser.uid,
+    createdAt: Date.now(),
+    members: {
+      [auth.currentUser.uid]: {
+        name: auth.currentUser.displayName || auth.currentUser.email,
+        joinedAt: Date.now()
+      }
+    }
+  }).then(() => {
+    switchToRoom(roomId, roomName.trim());
+    alert(`Đã tạo phòng "${roomName.trim()}" thành công!`);
+  });
+}
+function setupRoomListeners() {
+  // Room list toggle
+  document.getElementById("roomListToggle").addEventListener("click", () => {
+    const sidebar = document.getElementById("room-sidebar");
+    sidebar.classList.toggle("show");
+  });
+  // Create room button
+  document.getElementById("createRoomBtn").addEventListener("click", createRoom);
+  // Join room button
+  document.getElementById("joinRoomBtn").addEventListener("click", showJoinRoomDialog);
+  // Room search functionality
+  const searchInput = document.getElementById("roomSearchInput");
+  searchInput.addEventListener("input", handleRoomSearch);
+  searchInput.addEventListener("focus", () => {
+    if (searchInput.value.trim()) {
+      document.getElementById("search-results").classList.remove("hidden");
+    }
+  });
+  // Hide search results when clicking outside
+  document.addEventListener("click", (event) => {
+    const sidebar = document.getElementById("room-sidebar");
+    const searchResults = document.getElementById("search-results");
+    if (!sidebar.contains(event.target)) {
+      searchResults.classList.add("hidden");
+    }
+  });
+}
+// Room search functionality
+function handleRoomSearch() {
+  const searchTerm = document.getElementById("roomSearchInput").value.trim().toLowerCase();
+  const searchResults = document.getElementById("search-results");
+  const searchRoomList = document.getElementById("search-room-list");
+  if (!searchTerm) {
+    searchResults.classList.add("hidden");
+    return;
+  }
+  searchResults.classList.remove("hidden");
+  searchRoomList.innerHTML = "";
+  // Search all rooms in database
+  db.ref('rooms').once('value', snapshot => {
+    const rooms = snapshot.val();
+    let foundRooms = [];
+    if (rooms) {
+      Object.keys(rooms).forEach(roomId => {
+        const room = rooms[roomId];
+        if (room.name && room.name.toLowerCase().includes(searchTerm)) {
+          foundRooms.push({ id: roomId, ...room });
+        }
+      });
+    }
+    if (foundRooms.length === 0) {
+      searchRoomList.innerHTML = '<div class="no-results">Không tìm thấy phòng nào</div>';
+    } else {
+      foundRooms.forEach(room => {
+        createSearchResultItem(room.id, room);
+      });
+    }
+  });
+}
+function createSearchResultItem(roomId, room) {
+  const searchRoomList = document.getElementById("search-room-list");
+  const roomItem = document.createElement("div");
+  const isMember = room.members && room.members[auth.currentUser.uid];
+  roomItem.className = `room-item search-result`;
+  roomItem.dataset.roomId = roomId;
+  // Count members
+  const memberCount = room.members ? Object.keys(room.members).length : 0;
+  roomItem.innerHTML = `
+    <div class="room-info">
+      <div class="room-name">${room.name}</div>
+      <div class="room-last-message">${room.description || "Không có mô tả"}</div>
+      <div class="room-member-count">${memberCount} thành viên</div>
+    </div>
+    ${isMember ?
+      `<button class="room-join-btn" onclick="switchToRoom('${roomId}', '${room.name}'); hideSearchResults();">Vào phòng</button>` :
+      `<button class="room-join-btn" onclick="joinRoom('${roomId}', '${room.name}')">Tham gia</button>`
+    }
+  `;
+  searchRoomList.appendChild(roomItem);
+}
+function joinRoom(roomId, roomName) {
+  // Add user to room members
+  db.ref(`rooms/${roomId}/members/${auth.currentUser.uid}`).set({
+    name: auth.currentUser.displayName || auth.currentUser.email,
+    joinedAt: Date.now()
+  }).then(() => {
+    // Switch to the joined room
+    switchToRoom(roomId, roomName);
+    hideSearchResults();
+    alert(`Đã tham gia phòng "${roomName}" thành công!`);
+  }).catch(error => {
+    console.error("Error joining room:", error);
+    alert("Lỗi khi tham gia phòng!");
+  });
+}
+function hideSearchResults() {
+  document.getElementById("search-results").classList.add("hidden");
+  document.getElementById("roomSearchInput").value = "";
+}
+function showJoinRoomDialog() {
+  const roomId = prompt("Nhập ID phòng muốn tham gia:");
+  if (!roomId || !roomId.trim()) return;
+  // Check if room exists
+  db.ref(`rooms/${roomId}`).once('value', snapshot => {
+    if (snapshot.exists()) {
+      const room = snapshot.val();
+      joinRoom(roomId, room.name);
+    } else {
+      alert("Không tìm thấy phòng với ID này!");
+    }
+  });
+}

style.css CHANGED Viewed

@@ -1,28 +1,399 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+* {
+  box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
+}
+body {
+  margin: 0;
+  background: #f0f2f5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+.container {
+  width: 100%;
+  max-width: 500px;
+  background: white;
+  padding: 1rem;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+}
+.hidden {
+  display: none;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+}
+input {
+  padding: 10px;
+  margin-top: 4px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}
+button {
+  padding: 10px;
+  background: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.chat-box {
+  height: 300px;
+  overflow-y: auto;
+  margin-bottom: 10px;
+  background: #f9f9f9;
+  padding: 10px;
+  border-radius: 6px;
+}
+.message {
+  margin: 5px 0;
+  max-width: 80%;
+  padding: 8px 12px;
+  border-radius: 12px;
+  clear: both;
+}
+.mine {
+  background-color: #d2f8d2;
+  float: right;
+}
+.other {
+  background-color: #f0d4d4;
+  float: left;
+}
+.switch {
+  text-align: center;
+  margin-top: 1rem;
+}
+.google-btn {
+  background-color: #4285f4;
+  margin-top: 5px;
+}
+/* Media upload styles */
+#inputArea {
+  display: flex;
+  padding: 10px;
+  background: #fff;
+  border-top: 1px solid #ccc;
+  gap: 8px;
+  align-items: center;
+}
+#inputArea input[type="text"] {
+  flex: 1;
+  padding: 10px;
+  border-radius: 20px;
+  border: 1px solid #ccc;
+}
+input[type="file"] {
+  display: none;
+}
+.media-btn {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 50%;
+}
+.media-btn:hover {
+  background: #f0f0f0;
+}
+#mediaPreview {
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  border-top: 1px solid #ccc;
+  background: #fafafa;
+}
+#mediaPreview img, #mediaPreview video {
+  max-width: 80px;
+  max-height: 80px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.message img {
+  max-width: 200px;
+  border-radius: 8px;
+  margin-top: 5px;
+}
+.message video {
+  max-width: 200px;
+  border-radius: 8px;
+  margin-top: 5px;
+}
+.upload-progress {
+  background: #e0e0e0;
+  border-radius: 10px;
+  overflow: hidden;
+  margin: 5px 0;
+}
+.upload-progress-bar {
+  height: 20px;
+  background: #4CAF50;
+  transition: width 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 12px;
+}
+/* Chat room styles */
+.chat-header {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  background: #4CAF50;
+  color: white;
+  gap: 10px;
+}
+.chat-header h2 {
+  margin: 0;
+  flex: 1;
+}
+.menu-btn {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 3px;
+}
+.menu-btn:hover {
+  background: rgba(255,255,255,0.2);
+}
+#current-room-name {
+  font-size: 14px;
+  opacity: 0.8;
+  background: rgba(255,255,255,0.2);
+  padding: 4px 8px;
+  border-radius: 10px;
+}
+.chat-container {
+  display: flex;
+  height: 400px;
+  position: relative;
+}
+.room-sidebar {
+  width: 250px;
+  background: #f8f9fa;
+  border-right: 1px solid #ddd;
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+  overflow-y: auto;
+}
+.room-sidebar.show {
+  transform: translateX(0);
+}
+.sidebar-header {
+  padding: 15px;
+  border-bottom: 1px solid #ddd;
+  background: white;
+}
+.sidebar-header h3 {
+  margin: 0 0 10px 0;
+  font-size: 16px;
+}
+.room-search-input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  font-size: 14px;
+}
+.room-search-input:focus {
+  outline: none;
+  border-color: #4CAF50;
+}
+.room-actions {
+  display: flex;
+  gap: 5px;
+}
+.create-room-btn, .join-room-btn {
+  background: #007bff;
+  color: white;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 12px;
+  flex: 1;
+}
+.join-room-btn {
+  background: #28a745;
+}
+.create-room-btn:hover {
+  background: #0056b3;
+}
+.join-room-btn:hover {
+  background: #1e7e34;
+}
+.search-results {
+  border-top: 1px solid #ddd;
+  margin-top: 10px;
+  padding-top: 10px;
+}
+.search-results h4 {
+  margin: 0 0 10px 10px;
+  font-size: 14px;
+  color: #666;
+}
+.search-results.hidden {
+  display: none;
+}
+.room-list {
+  padding: 10px;
+}
+.room-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  margin-bottom: 5px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.room-item:hover {
+  background: #f0f0f0;
+  border-color: #4CAF50;
+}
+.room-item.active {
+  background: #e8f5e8;
+  border-color: #4CAF50;
+}
+.room-info {
+  flex: 1;
+}
+.room-name {
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+.room-last-message {
+  font-size: 12px;
+  color: #666;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.room-unread {
+  background: #ff4444;
+  color: white;
+  border-radius: 10px;
+  padding: 2px 6px;
+  font-size: 10px;
+  margin-left: 5px;
+}
+.room-item.search-result {
+  border-left: 3px solid #007bff;
+}
+.room-item.search-result .room-info {
+  position: relative;
+}
+.room-join-btn {
+  background: #28a745;
+  color: white;
+  border: none;
+  padding: 4px 8px;
+  border-radius: 3px;
+  font-size: 10px;
+  cursor: pointer;
+  margin-left: 5px;
+}
+.room-join-btn:hover {
+  background: #1e7e34;
+}
+.room-member-count {
+  font-size: 11px;
+  color: #888;
+  margin-top: 2px;
+}
+.no-results {
+  padding: 20px;
+  text-align: center;
+  color: #666;
+  font-style: italic;
+}
+.chat-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+@media (max-width: 768px) {
+  .room-sidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    z-index: 1000;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+  }
+  .chat-container {
+    height: 350px;
+  }
+}