Update index.html

index.html

@@ -6,18 +6,19 @@
 <title>Chat CVNSS4.0</title>
 <style>
   :root{
-    /* Light theme tối giản */
+    /* Light + tham số cắt header/panel của tlk.io */
     --bg:#f7f9fc; --card:#ffffff; --text:#1f2937; --muted:#6b7280;
     --primary:#1a73e8; --danger:#d93025; --accent:#ffeb3b;
-    /* Overlays cho iframe (ẩn header & panel phải) */
-    --ov-top: 128px;                     /* tăng lên 140–180 nếu vẫn hở header tlk.io */
-    --ov-right: clamp(220px, 24vw, 300px);
+    --mask-top: 150px;                               /* CẮT header tlk.io (tăng 160–200 nếu còn hở) */
+    --mask-right: clamp(220px, 24vw, 300px);         /* Ẩn panel phải */
   }
   *{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}
+
+  .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}
@@ -29,33 +30,46 @@
   .btn-secondary{background:#374151;color:#fff}
   .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
 
-  /* Trạng thái gọn: tên + phòng */
+  /* Trạng thái gọn */
   .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 (iframe) */
-  .chat-wrap{position:relative;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;background:#fff}
-  iframe{width:100%;height:72vh;min-height:640px;border:0;background:#fff}
+  /* Khung chat: kỹ thuật MASK (không overlay che đầu) */
+  .chat-wrap{
+    position:relative; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; background:#fff;
+    padding-top: var(--mask-top);                /* chừa chỗ phần bị dịch âm */
+  }
+  #chatFrame{
+    display:block; width:100%; height:72vh; min-height:640px; border:0; background:#fff;
+    transform: translateY(calc(-1 * var(--mask-top))); /* đẩy phần header ra ngoài khung nhìn */
+  }
+
+  /* Ẩn panel phải bằng mask phải (không chặn click khu trung tâm/đáy) */
+  .mask-right{
+    position:absolute; top:0; right:0; bottom:0; width:var(--mask-right);
+    background:#fff; pointer-events:none; box-shadow:-8px 0 10px -10px rgba(0,0,0,.12); z-index:2;
+  }
 
-  /* Overlays – ẩn đúng phần thừa của tlk.io, không chặn click */
-  .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)}
-  .focus-bottom{position:absolute;left:0;right:var(--ov-right);bottom:0;height:110px;pointer-events:none;z-index:1;
-    background:radial-gradient(120% 120% at 50% 100%, rgba(26,115,232,.10) 0%, rgba(26,115,232,.04) 40%, rgba(255,255,255,0) 75%)}
+  /* Gợi ý vùng nhập ở đáy – không chặn bấm */
+  .hint-bottom{
+    position:absolute; left:0; right:var(--mask-right); bottom:0; height:110px; pointer-events:none; z-index:1;
+    background:radial-gradient(120% 120% at 50% 100%, rgba(26,115,232,.08) 0%, rgba(26,115,232,.03) 40%, rgba(255,255,255,0) 75%);
+  }
 
   /* 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}
 
-  .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}
-
-  /* Thông báo lỗi/blocked */
+  /* 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-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.show{opacity:1}
   footer{margin-top:auto;text-align:center;color:#6b7280;font-size:13px;padding:16px}
-  @media (max-width:820px){ :root{ --ov-right:0px } }
+
+  @media (max-width:820px){ :root{ --mask-right:0px } }
 </style>
 </head>
 <body>
@@ -63,12 +77,7 @@
 
 <section id="login" class="card">
   <h2>Tham gia phòng chat</h2>
-  <p class="muted">Nhập tên → <b>Vào Chat</b> → (tuỳ chọn) <b>✨ Tạo phòng bí mật</b> để mời người khác.</p>
-  <ol style="margin:0 0 10px 18px">
-    <li>Nhập tên ở ô dưới.</li>
-    <li>Nhấn <b>Vào Chat</b> (nút đỏ). Form Join bên trong tlk.io luôn bị ẩn.</li>
-    <li><b>✨ Tạo phòng bí mật</b> nếu cần (ID ngẫu nhiên + Copy tự ẩn). <span class="muted">Không cần thì bỏ qua.</span></li>
-  </ol>
+  <p class="muted">Nhập tên → <b>Vào Chat</b> → *(tuỳ chọn)* <b>✨ Tạo phòng bí mật</b> để mời người khác.</p>
 
   <div class="row" style="margin-top:8px">
     <input id="nickname" type="text" placeholder="Nhập tên của bạn…" autocomplete="name">
@@ -94,18 +103,14 @@
   </div>
 
   <div class="chat-wrap">
-    <!-- Overlays: ẩn header kênh + cột phải -->
-    <div class="ov-top"></div>
-    <div class="ov-right"></div>
-    <div class="focus-bottom"></div>
-
-    <!-- KHUNG CHAT (iframe) -->
-    <iframe id="chatFrame" title="tlk.io chat" referrerpolicy="no-referrer" allow="clipboard-read; clipboard-write"></iframe>
+    <div class="mask-right"></div>
+    <div class="hint-bottom"></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 trong trang (trình duyệt/nhà mạng đang chặn iframe).</span>
+    <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>
   </div>
 </section>
@@ -120,66 +125,45 @@
   let room   = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
   const base = `${location.origin}${location.pathname}`;
 
+  const $ = id => document.getElementById(id);
   const els = {
-    login:    document.getElementById("login"),
-    box:      document.getElementById("chatBox"),
-    frame:    document.getElementById("chatFrame"),
-    name:     document.getElementById("nickname"),
-    join:     document.getElementById("joinBtn"),
-    newRoom:  document.getElementById("newRoomBtn"),
-    linkArea: document.getElementById("linkArea"),
-    roomUrl:  document.getElementById("roomUrl"),
-    copy:     document.getElementById("copyBtn"),
-    hint:     document.getElementById("roomHint"),
-    me:       document.getElementById("meName"),
-    pill:     document.getElementById("roomPill"),
-    status:   document.getElementById("statusBar"),
-    toast:    document.getElementById("toast"),
-    err:      document.getElementById("errorBox"),
-    openNew:  document.getElementById("openNew"),
+    login: $("login"), box: $("chatBox"), frame: $("chatFrame"),
+    name: $("nickname"), join: $("joinBtn"), newRoom: $("newRoomBtn"),
+    linkArea: $("linkArea"), roomUrl: $("roomUrl"), copy: $("copyBtn"),
+    hint: $("roomHint"), me: $("meName"), pill: $("roomPill"),
+    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`;
+  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`;
 
-  // ===== Core: load 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";
-
-    // Nếu iframe không load trong 6s → hiện fallback
-    let failTimer = setTimeout(()=>{ els.err.style.display = "flex"; }, 6000);
-    els.frame.addEventListener("load", () => {
-      clearTimeout(failTimer);
-      // Một số trình duyệt vẫn load event nhưng nội dung bị chặn; thêm watchdog ẩn hiện
-      setTimeout(()=> { 
-        // Không thể đọc bên trong iframe (cross-origin), nên hiển thị luôn; người dùng vẫn có thể chat nếu hiện.
-        // Nếu vẫn trắng, user có nút "Mở cửa sổ chat".
-        /* no-op */
-      }, 300);
-    }, {once:true});
+    els.frame.src = url; els.openNew.href = url; els.err.style.display = "none";
+
+    // Watchdog: nếu 6s vẫn trắng → 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();
-    setTimeout(()=> els.box.scrollIntoView({behavior:"smooth"}), 40);
+    // KHÔNG scrollIntoView sau này nữa để tránh “nhảy khung” khi Enter
+    window.scrollBy({ top: 1, behavior: "smooth" }); // nudge nhỏ để ổn định viewport
   }
 
-  // ===== Events =====
   els.join.addEventListener("click", enterChat);
   els.name.addEventListener("keydown", e => { if(e.key === "Enter") enterChat(); });
 
+  // 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();
@@ -202,10 +186,9 @@
     };
   });
 
-  // ===== Prefill + auto-enter nếu đã có room & tên =====
+  // Prefill + auto-enter nếu có tên sẵn
   const last = localStorage.getItem("cvnss4_name"); if(last) els.name.value = last;
   syncRoomUI(); els.name.focus({preventScroll:true});
-  // Nếu URL có ?room= và có tên trước đó → tự vào chat
   if (qs.get("room") && (last || els.name.value.trim() !== "")) enterChat();
 })();
 </script>