Update index.html

index.html

@@ -7,84 +7,60 @@
   <style>
     :root{
       --primary:#1a73e8; --bg:#f5f6f8; --text:#202124;
-      --ov-top:72px;      /* cao overlay che HEADER tlk (để lộ khung Join) */
-      --ov-right:260px;   /* rộng overlay che cột phải */
+      /* Che kín header + ô Join tlk.io (không che ô gõ tin nhắn) */
+      --ov-top:200px;   /* nếu còn hở ô Join => tăng 220–260px */
+      --ov-right:260px; /* cột phải 220–300px tùy màn hình */
     }
     *{ box-sizing:border-box }
-    body{
-      margin:0; font-family:"Google Sans",Arial,sans-serif;
-      background:var(--bg); color:var(--text);
-      display:flex; flex-direction:column; min-height:100vh;
-    }
-    header{
-      background:var(--primary); color:#fff; padding:16px;
-      text-align:center; font-size:20px; font-weight:600;
-      box-shadow:0 2px 6px rgba(0,0,0,.1);
-    }
-    .card{
-      width:min(940px,92vw); margin:28px auto; background:#fff;
-      border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08); padding:22px;
-    }
+    body{ margin:0; font-family:"Google Sans",Arial,sans-serif;
+      background:var(--bg); color:var(--text); display:flex; flex-direction:column; min-height:100vh; }
+    header{ background:var(--primary); color:#fff; padding:16px; text-align:center; font-size:20px; font-weight:600;
+      box-shadow:0 2px 6px rgba(0,0,0,.1); }
+    .card{ width:min(940px,92vw); margin:28px auto; background:#fff; border-radius:12px;
+      box-shadow:0 6px 18px rgba(0,0,0,.08); padding:22px; }
     h2{ margin:0 0 14px 0; font-weight:600 }
     .row{ display:flex; gap:10px; flex-wrap:wrap }
-    input[type="text"]{
-      flex:1 1 260px; padding:12px 14px; font-size:16px;
-      border:1px solid #dadce0; border-radius:8px;
-    }
+    input[type="text"]{ flex:1 1 260px; padding:12px 14px; font-size:16px; border:1px solid #dadce0; border-radius:8px; }
     input[type="text"]:focus{ outline:none; border-color:var(--primary) }
-    button{
-      padding:12px 18px; border:none; border-radius:8px;
-      background:var(--primary); color:#fff; font-weight:600; cursor:pointer;
-    }
+    button{ padding:12px 18px; border:none; border-radius:8px; background:var(--primary); color:#fff; font-weight:600; cursor:pointer; }
     button:hover{ background:#0b5ed7 }
     .ghost{ background:#e9eef6; color:#174ea6 }
     .secondary{ background:#5f6368 }
     .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
     #chat-box{ display:none }
-    .pill{
-      display:inline-block; background:#eef3fd; color:#174ea6;
-      padding:6px 10px; border-radius:999px; font-size:14px; margin-bottom:10px;
-    }
+    .pill{ display:inline-block; background:#eef3fd; color:#174ea6; padding:6px 10px; border-radius:999px; font-size:14px; margin-bottom:10px; }
+
     .chat-wrap{ position:relative; border:1px solid #e3e6ea; border-radius:10px; overflow:hidden }
     iframe{ width:100%; height:72vh; min-height:520px; border:0; background:#fff }
 
-    /* Overlays: chỉ che header & cột phải của tlk.io */
-    .ov-top{
-      position:absolute; left:0; right:0; top:0;
-      height:var(--ov-top); background:#fff; z-index:3; pointer-events:none;
-      box-shadow:0 8px 10px -10px rgba(0,0,0,.12);
-    }
-    .ov-right{
-      position:absolute; top:0; right:0; bottom:0;
-      width:var(--ov-right); background:#fff; z-index:2; pointer-events:none;
-      box-shadow:-8px 0 10px -10px rgba(0,0,0,.12);
-    }
-    @media (max-width:640px){ :root{ --ov-top:56px; --ov-right:200px } }
+    /* Overlays: che hẳn header + ô Join + cột phải + footer tlk.io */
+    .ov-top{ position:absolute; left:0; right:0; top:0; height:var(--ov-top);
+      background:#fff; z-index:3; pointer-events:none; box-shadow:0 8px 10px -10px rgba(0,0,0,.12); }
+    .ov-right{ position:absolute; top:0; right:0; bottom:0; width:var(--ov-right);
+      background:#fff; z-index:2; pointer-events:none; box-shadow:-8px 0 10px -10px rgba(0,0,0,.12); }
+    .ov-bottom{ position:absolute; left:0; right:0; bottom:0; height:100px;
+      background:#fff; z-index:2; pointer-events:none; box-shadow:0 -8px 10px -10px rgba(0,0,0,.12); }
 
     .links{ display:none; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px }
     .link-badge{ background:#f1f3f4; padding:6px 8px; border-radius:6px }
-
-    /* Toast thông báo */
-    .toast{
-      position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
-      background:#323232; color:#fff; padding:10px 14px; border-radius:8px;
-      font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s ease;
-    }
+    .toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
+      background:#323232; color:#fff; padding:10px 14px; border-radius:8px; font-size:14px; opacity:0;
+      pointer-events:none; transition:opacity .2s ease; }
     .toast.show{ opacity:1 }
     footer{ margin-top:auto; text-align:center; color:#6c727a; font-size:13px; padding:16px }
+    @media (max-width:640px){ :root{ --ov-right:200px } }
   </style>
 </head>
 <body>
 <header>💬 Chat CVNSS4.0</header>
 
-<!-- khối tạo phòng & vào chat -->
+<!-- tạo phòng & vào chat -->
 <section id="login" class="card">
   <h2>Tham gia phòng chat</h2>
   <div class="row" style="margin-bottom:10px;">
     <input type="text" id="nickname" placeholder="Nhập tên của bạn…">
     <button id="joinBtn">Vào Chat</button>
   </div>
-
   <div class="row">
     <button class="ghost" id="newRoomBtn">✨ Tạo phòng bí mật</button>
   </div>
@@ -102,6 +78,7 @@
   <div class="chat-wrap">
     <div class="ov-top"></div>
     <div class="ov-right"></div>
+    <div class="ov-bottom"></div>
     <iframe id="chatFrame" title="tlk.io chat"></iframe>
   </div>
 </section>
@@ -113,20 +90,17 @@
 </footer>
 
 <script>
-  // Lấy room từ URL hoặc mặc định
+  // --- trạng thái & URL ---
   const qs   = new URLSearchParams(location.search);
   let room   = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
   const base = `${location.origin}${location.pathname}`;
   document.getElementById("roomPill").textContent = "Phòng: " + room;
 
   // Toast helper
-  function toast(msg){
-    const t = document.getElementById('toast');
-    t.textContent = msg; t.classList.add('show');
-    setTimeout(()=> t.classList.remove('show'), 1400);
-  }
+  const toastEl = document.getElementById('toast');
+  function toast(msg){ toastEl.textContent = msg; toastEl.classList.add('show'); setTimeout(()=>toastEl.classList.remove('show'), 1400); }
 
-  // Vào chat: nạp iframe với nickname
+  // --- Vào chat: luôn ẩn Join gốc bằng overlay, chỉ dùng form ngoài ---
   document.getElementById("joinBtn").onclick = () => {
     const name = (document.getElementById("nickname").value || "").trim() || "Guest";
     document.getElementById("login").style.display = "none";
@@ -135,35 +109,34 @@
     document.getElementById("chatFrame").src = url;
   };
 
-  // Tạo phòng bí mật: random id + cập nhật URL + hiển thị/copy link
+  // --- Tạo phòng bí mật: random id + cập nhật URL + hiện link + copy & ẩn ngay ---
   document.getElementById("newRoomBtn").onclick = () => {
     const rnd  = Math.random().toString(36).slice(2,8);
     room       = `cvnss4-0-${rnd}`;
     const link = `${base}?room=${room}`;
 
-    // Cập nhật UI + URL hiện tại (để share đúng phòng)
+    // cập nhật pill & URL hiện tại để share đúng phòng
     document.getElementById("roomPill").textContent = "Phòng: " + room;
     history.replaceState(null, "", `?room=${room}`);
 
-    // Hiển thị block link
+    // hiện block link
     const area = document.getElementById("linkArea");
     document.getElementById("roomUrl").textContent = link;
     area.style.display = "flex";
 
-    // Copy & auto-ẩn block sau khi copy
+    // copy & ẨN NGAY block cho gọn, vẫn hiện toast báo
     const copyBtn = document.getElementById("copyBtn");
     copyBtn.onclick = async () => {
       try {
-        if (navigator.share) {
-          // Ưu tiên chia sẻ hệ thống (nếu có)
-          await navigator.share({ title: "Phòng chat CVNSS4.0", url: link });
-        } else {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
           await navigator.clipboard.writeText(link);
-          toast("✅ Đã copy link phòng!");
         }
-      } catch(e){ /* user huỷ share */ }
-      // Ẩn khối link sau 1 giây để gọn gàng
-      setTimeout(()=> area.style.display = "none", 1000);
+        // nếu có Web Share API, ưu tiên dùng (không bắt buộc)
+        if (navigator.share) { try { await navigator.share({ title:"Phòng chat CVNSS4.0", url:link }); } catch(e){} }
+        toast("✅ Đã copy link phòng!");
+      } catch(e){ toast("⚠️ Sao chép không thành công—hãy copy thủ công"); }
+      // Ẩn ngay khối link
+      area.style.display = "none";
     };
   };
 </script>