Update index.html

index.html

@@ -10,92 +10,64 @@
     --bg:#f7f9fc; --card:#ffffff; --text:#1f2937; --muted:#6b7280;
     --primary:#1a73e8; --danger:#d93025; --accent:#ffeb3b;
 
-    /* Mặt nạ (mask) để ẩn phần thừa của tlk.io */
-    --header-mask: 260px;                     /* dải trắng che icon mây + thanh xanh tiêu đề */
-    --mask-right: clamp(220px, 24vw, 300px);  /* dải trắng che cột phải */
+    /* Mask trắng để ẩn phần thừa bên trong tlk.io */
+    --header-mask: 260px;                     /* che icon mây + thanh xanh tiêu đề */
+    --mask-right: clamp(220px, 24vw, 300px);  /* che cột phải (user list/branding) */
   }
 
   *{box-sizing:border-box}
-  body{
-    margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
-    background:var(--bg); color:var(--text); display:flex; flex-direction:column; min-height:100vh;
-  }
-  header{
-    padding:14px 16px; text-align:center; font-weight:700;
-    background:#fff; border-bottom:1px solid #e5e7eb;
-  }
-
-  .card{
-    width:min(980px,94vw); margin:22px auto; background:var(--card);
-    border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.06);
-    padding:18px;
-  }
-  h2{margin:0 0 6px}
-  .muted{color:var(--muted)}
-  .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
-
-  input[type=text]{
-    flex:1 1 260px; padding:12px 14px; font-size:16px;
-    border:1px solid #d1d5db; border-radius:10px;
-  }
-  input[type=text]:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(26,115,232,.15)}
-
-  button{padding:12px 16px; border:0; border-radius:10px; font-weight:700; cursor:pointer}
-  .btn-red{background:var(--danger); color:var(--accent)}
-  .btn-ghost{background:#eef2ff; color:#1e3a8a}
-  .btn-secondary{background:#374151; color:#fff}
+  body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
+       background:var(--bg);color:var(--text);display:flex;flex-direction:column;min-height:100vh}
+  header{padding:14px 16px;text-align:center;font-weight:700;background:#fff;border-bottom:1px solid #e5e7eb}
+
+  .card{width:min(980px,94vw);margin:22px auto;background:var(--card);
+        border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.06);padding:18px}
+  h2{margin:0 0 6px}.muted{color:var(--muted)}
+  .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
+
+  input[type=text]{flex:1 1 260px;padding:12px 14px;font-size:16px;border:1px solid #d1d5db;border-radius:10px}
+  input[type=text]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,115,232,.15)}
+
+  button{padding:12px 16px;border:0;border-radius:10px;font-weight:700;cursor:pointer}
+  .btn-red{background:#d93025;color:#ffeb3b}
+  .btn-ghost{background:#eef2ff;color:#1e3a8a}
+  .btn-secondary{background:#374151;color:#fff}
   .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
 
-  /* Trạng thái gọn: chỉ tên + phòng */
-  .status{
-    display:none; align-items:center; gap:10px;
-    padding:10px 12px; border:1px dashed #d1d5db; border-radius:10px; margin-bottom:10px; background:#f9fafb;
-  }
-  .me-pill{
-    display:inline-flex; align-items:center; gap:6px;
-    background:#fff3cd; color:#7a5b00; border:1px solid #ffe8a1; padding:6px 12px; border-radius:999px; font-weight:800;
-  }
-  .room-pill{display:inline-block; background:#e8f0fe; color:#174ea6; padding:6px 10px; border-radius:999px}
+  /* Thanh trạng thái gọn: Tên + Phòng */
+  .status{display:none;align-items:center;gap:10px;padding:10px 12px;border:1px dashed #d1d5db;border-radius:10px;margin-bottom:10px;background:#f9fafb}
+  .me-pill{display:inline-flex;align-items:center;gap:6px;background:#fff3cd;color:#7a5b00;border:1px solid #ffe8a1;padding:6px 12px;border-radius:999px;font-weight:800}
+  .room-pill{display:inline-block;background:#e8f0fe;color:#174ea6;padding:6px 10px;border-radius:999px}
 
-  /* Khung chat */
-  .chat-wrap{
-    position:relative; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; background:#fff;
-  }
-  iframe#chatFrame{width:100%; height:72vh; min-height:640px; border:0; background:#fff}
+  /* KHUNG CHAT: không overlay che toàn phần */
+  .chat-wrap{position:relative;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;background:#fff}
+  iframe#chatFrame{width:100%;height:72vh;min-height:640px;border:0;background:#fff}
 
-  /* Mask TRẮNG – không cản bấm/nhập (pointer-events:none) */
+  /* MASK TRẮNG – KHÔNG chặn gõ/nhấn */
   .mask-header{
-    position:absolute; left:0; right:var(--mask-right); top:0; height:var(--header-mask);
-    background:#fff; pointer-events:none; user-select:none; z-index:5;
+    position:absolute;left:0;right:var(--mask-right);top:0;height:var(--header-mask);
+    background:#fff;pointer-events:none;user-select:none;z-index:5;
     box-shadow:0 8px 10px -10px rgba(0,0,0,.12);
   }
   .mask-right{
-    position:absolute; top:0; right:0; bottom:0; width:var(--mask-right);
-    background:#fff; pointer-events:none; user-select:none; z-index:4;
+    position:absolute;top:0;right:0;bottom:0;width:var(--mask-right);
+    background:#fff;pointer-events:none;user-select:none;z-index:4;
     box-shadow:-8px 0 10px -10px rgba(0,0,0,.12);
   }
 
   /* Link phòng tự ẩn */
-  .links{display:none; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px}
-  .link-badge{background:#f3f4f6; border:1px solid #e5e7eb; color:#111827; padding:6px 8px; border-radius:8px}
+  .links{display:none;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
+  .link-badge{background:#f3f4f6;border:1px solid #e5e7eb;color:#111827;padding:6px 8px;border-radius:8px}
 
   /* Fallback khi iframe bị chặn */
-  .error-box{
-    display:none; gap:10px; align-items:center; justify-content:space-between;
-    padding:12px; border:1px solid #fecaca; background:#fef2f2; border-radius:10px; margin-top:10px;
-  }
+  .error-box{display:none;gap:10px;align-items:center;justify-content:space-between;padding:12px;border:1px solid #fecaca;background:#fef2f2;border-radius:10px;margin-top:10px}
   .error-text{color:#991b1b}
 
-  .toast{
-    position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
-    background:#111827; color:#f9fafb; border:1px solid #374151;
-    padding:10px 14px; border-radius:10px; font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s;
-  }
+  .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#111827;color:#f9fafb;border:1px solid #374151;padding:10px 14px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s}
   .toast.show{opacity:1}
 
-  footer{margin-top:auto; text-align:center; color:#6b7280; font-size:13px; padding:16px}
-
-  @media (max-width:820px){ :root{ --mask-right:0px } } /* mobile thường không có panel phải */
+  footer{margin-top:auto;text-align:center;color:#6b7280;font-size:13px;padding:16px}
+  @media (max-width:820px){ :root{ --mask-right:0px } } /* mobile hầu như không có panel phải */
 </style>
 </head>
 <body>
@@ -103,15 +75,18 @@
 
 <section id="login" class="card">
   <h2>Tham gia phòng chat</h2>
-  <p class="muted">Nhập tên → <b>Vào Chat</b> (nút đỏ) → *(tuỳ chọn)* <b>✨ Tạo phòng bí mật</b> để mời người khác. Nếu không cần “✨ Tạo phòng bí mật”, hãy bỏ qua bước này.</p>
+  <p class="muted">Nhập tên → <b>Vào Chat</b> (nút đỏ) → *(tuỳ chọn)* <b>✨ Tạo phòng bí mật</b>. Nếu không cần “✨ Tạo phòng bí mật”, hãy bỏ qua bước này.</p>
+
   <div class="row" style="margin-top:8px">
     <input id="nickname" type="text" placeholder="Nhập tên của bạn…" autocomplete="name">
     <button id="joinBtn" class="btn-red">Vào Chat</button>
   </div>
+
   <div class="row" style="margin-top:10px">
     <button id="newRoomBtn" class="btn-ghost">✨ Tạo phòng bí mật</button>
     <span id="roomHint" class="muted"></span>
   </div>
+
   <div id="linkArea" class="links" aria-live="polite">
     <span>🔗 Link phòng:</span>
     <span id="roomUrl" class="link-badge mono"></span>
@@ -126,14 +101,15 @@
   </div>
 
   <div class="chat-wrap">
-    <!-- Mask trắng: che icon mây + thanh xanh + panel phải; KHÔNG cản click/nhập -->
+    <!-- Mask trắng: che icon mây + thanh xanh + cột phải; KHÔNG chặn gõ/nhấn -->
     <div class="mask-header" aria-hidden="true"></div>
-    <div class="mask-right" aria-hidden="true"></div>
+    <div class="mask-right"  aria-hidden="true"></div>
 
     <iframe id="chatFrame" title="tlk.io chat" referrerpolicy="no-referrer"
             allow="clipboard-read; clipboard-write"></iframe>
   </div>
 
+  <!-- Fallback khi iframe bị chặn -->
   <div id="errorBox" class="error-box">
     <span class="error-text">⚠️ Không tải được khung chat (trình duyệt/ISP chặn iframe).</span>
     <a id="openNew" class="btn-red" style="text-decoration:none;padding:10px 12px;border-radius:10px" target="_blank" rel="noopener">Mở cửa sổ chat</a>
@@ -145,17 +121,11 @@
 
 <script>
 (() => {
-  // --- State ---
+  // --- Trạng thái ---
   const qs   = new URLSearchParams(location.search);
   let room   = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
   const base = `${location.origin}${location.pathname}`;
 
-  // Cho phép tinh chỉnh nhanh qua URL nếu cần: &hdr=260 &maskr=260
-  const hdr = parseInt(qs.get("hdr"),10);
-  if(!isNaN(hdr)) document.documentElement.style.setProperty('--header-mask', hdr+'px');
-  const maskr = parseInt(qs.get("maskr"),10);
-  if(!isNaN(maskr)) document.documentElement.style.setProperty('--mask-right', maskr+'px');
-
   const $ = id => document.getElementById(id);
   const els = {
     login: $("login"), box: $("chatBox"), frame: $("chatFrame"),
@@ -165,41 +135,48 @@
     status: $("statusBar"), toast: $("toast"), err: $("errorBox"), openNew: $("openNew"),
   };
 
+  // --- Helpers ---
   const toast = m => { els.toast.textContent = m; els.toast.classList.add("show"); setTimeout(()=>els.toast.classList.remove("show"), 1400); };
   const getName = () => (els.name.value || localStorage.getItem("cvnss4_name") || "Guest").trim() || "Guest";
   const setName = n => { els.me.textContent = n; localStorage.setItem("cvnss4_name", n); };
   const syncRoomUI = () => { els.pill.textContent = room; els.hint.textContent = `(đang ở phòng ${room})`; };
   const tlkUrl = n => `https://tlk.io/${encodeURIComponent(room)}?nickname=${encodeURIComponent(n)}#embed`;
 
+  // --- Nạp iframe + fallback ---
   function mountChat(){
     const name = getName(); setName(name); syncRoomUI();
     els.status.style.display = "flex";
+
     const url = tlkUrl(name);
-    els.frame.src = url; els.openNew.href = url; els.err.style.display = "none";
+    els.frame.src = url;           // khung chat
+    els.openNew.href = url;        // fallback mở ngoài
+    els.err.style.display = "none";
 
-    // Watchdog: nếu iframe không load trong 6s → hiện fallback
+    // Nếu 6s không load được → hiện fallback
     const timer = setTimeout(()=>{ els.err.style.display = "flex"; }, 6000);
     els.frame.addEventListener("load", ()=> clearTimeout(timer), {once:true});
   }
 
   function enterChat(){
     els.login.style.display = "none";
-    els.box.style.display = "block";
-    mountChat();
+    els.box.style.display   = "block";
+    mountChat();            // không scrollIntoView → tránh giật khi Enter
   }
 
-  // Events
+  // --- Sự kiện ---
   els.join.addEventListener("click", enterChat);
   els.name.addEventListener("keydown", e => { if(e.key === "Enter") enterChat(); });
 
-  // Secret room + copy tự ẩn
+  // Tạo phòng bí mật + Copy tự ẩn
   els.newRoom.addEventListener("click", async ()=>{
     room = `cvnss4-0-${Math.random().toString(36).slice(2,8)}`;
     syncRoomUI();
     history.replaceState(null,"",`?room=${room}`);
+
     const link = `${base}?room=${room}`;
     els.roomUrl.textContent = link;
     els.linkArea.style.display = "flex";
+
     try{ await navigator.clipboard?.writeText?.(link); toast("✅ Đã copy link phòng!"); }catch(_){}
     setTimeout(()=>{ if(els.linkArea.style.display!=="none") els.linkArea.style.display="none"; }, 9000);
 
@@ -213,7 +190,7 @@
     };
   });
 
-  // Prefill + auto-enter nếu đã có tên
+  // Prefill + auto-join nếu đã có tên
   const last = localStorage.getItem("cvnss4_name"); if(last) els.name.value = last;
   syncRoomUI(); els.name.focus({preventScroll:true});
   if (qs.get("room") && (last || els.name.value.trim() !== "")) enterChat();