Update index.html

index.html

@@ -6,67 +6,88 @@
 <title>Chat CVNSS4.0</title>
 <style>
   :root{
-    --bg:#0b0d10; --card:#101418; --text:#e6edf3; --muted:#98a2ad;
+    --bg:#0b0d10; --card:#0f141a; --text:#e6edf3; --muted:#9aa4af;
     --primary:#1a73e8; --danger:#d93025; --accent:#ffeb3b;
-    /* Overlay để ẩn header (#channel) & cột phải của tlk.io */
-    --ov-top: 220px;    /* nếu header/join còn hở, tăng 240–280px */
-    --ov-right: 280px;  /* ẩn panel phải: 240–320px tùy màn hình */
+    /* Cỡ overlay an toàn: không che nội dung chat/textarea */
+    --ov-top: 160px;                      /* che header & Join (nếu còn hở tăng 180–200) */
+    --ov-right: clamp(220px, 24vw, 320px);/* che panel phải */
   }
   *{box-sizing:border-box}
-  body{margin:0;font-family:"Google Sans",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:800;background:#0f172a;color:#e2e8f0;
-         border-bottom:1px solid #1f2937}
-  .card{width:min(980px,94vw);margin:22px auto;background:var(--card);border:1px solid #1f2937;
-        border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:18px}
-  h2{margin:0 0 6px;font-weight:900}
-  .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 #263042;background:#0b1220;
-                   color:var(--text);border-radius:10px}
-  input[type=text]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.25)}
-  button{padding:12px 18px;border:0;border-radius:10px;font-weight:900;cursor:pointer;letter-spacing:.2px}
-  .btn-red{background:var(--danger);color:var(--accent)}
-  .btn-ghost{background:#0f172a;color:#93c5fd;border:1px dashed #1f2937}
-  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
-  /* Thanh trạng thái: CHỈ hiện tên + phòng, KHÔNG có nút “Đổi tên / iframe” */
-  .status{display:none;align-items:center;gap:10px;padding:10px 12px;border:1px dashed #223047;border-radius:12px;margin-bottom:10px;background:#0b1220}
-  .me-pill{display:inline-flex;align-items:center;gap:6px;background:#0a0a0a;border:1px solid #2a1d00;
-           color:#ffd166;padding:6px 12px;border-radius:999px;font-weight:900}
-  .room-pill{display:inline-block;background:#0a1628;color:#8ab4ff;padding:6px 10px;border-radius:999px}
-  /* Khung chat nổi bật + overlay giấu nội dung thừa */
-  .chat-wrap{position:relative;border:1px solid #243145;border-radius:12px;overflow:hidden;
-             box-shadow:inset 0 0 0 1px #1f2a3a, 0 12px 30px rgba(0,0,0,.35)}
-  iframe{width:100%;height:72vh;min-height:560px;border:0;background:#0b1220}
-  .ov-top{position:absolute;left:0;right:0;top:0;height:var(--ov-top);background:var(--card);
-          z-index:3;pointer-events:none;box-shadow:0 10px 12px -10px rgba(0,0,0,.6)}
-  .ov-right{position:absolute;top:0;right:0;bottom:0;width:var(--ov-right);background:var(--card);
-            z-index:2;pointer-events:none;box-shadow:-10px 0 12px -10px rgba(0,0,0,.6)}
-  /* Chỉ highlight đáy (khu textarea message-input) — không che click */
-  .focus-bottom{position:absolute;left:0;right:var(--ov-right);bottom:0;height:120px;pointer-events:none;z-index:1;
-                background:radial-gradient(120% 120% at 50% 100%, rgba(255,235,59,.18) 0%, rgba(255,235,59,.10) 35%, rgba(0,0,0,0) 70%)}
-  /* Khối link tự ẩn sau copy */
-  .links{display:none;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
-  .link-badge{background:#0b1220;border:1px solid #223047;color:#b6c2d2;padding:6px 8px;border-radius:8px}
-  .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#111827;color:#e5e7eb;
-         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:#8b9bb1;font-size:13px;padding:16px}
-  ol.guide{margin:0;padding-left:20px} ol.guide li{margin:6px 0}
-  @media (max-width:820px){ :root{ --ov-right:0px } } /* mobile: tlk.io hầu như không có panel phải */
+  body{
+    margin:0; font-family:"Google Sans",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:800; background:#0f172a; color:#e2e8f0; border-bottom:1px solid #1f2937 }
+  .card{
+    width:min(980px,94vw); margin:22px auto; background:var(--card);
+    border:1px solid #1f2937; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.35);
+    padding:18px;
+  }
+  h2{ margin:0 0 6px; font-weight:900 }
+  .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 #263042; background:#0b1220;
+    color:var(--text); border-radius:10px;
+  }
+  input[type=text]:focus{ outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.25) }
+  button{ padding:12px 18px; border:0; border-radius:10px; font-weight:900; cursor:pointer; letter-spacing:.2px }
+  .btn-red{ background:var(--danger); color:var(--accent) }
+  .btn-ghost{ background:#0f172a; color:#93c5fd; border:1px dashed #1f2937 }
+  .mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
+
+  /* Status: chỉ hiện tên + phòng (không có “Đổi tên / Iframe”) */
+  .status{ display:none; align-items:center; gap:10px; padding:10px 12px;
+           border:1px dashed #223047; border-radius:12px; margin-bottom:10px; background:#0b1220 }
+  .me-pill{ display:inline-flex; align-items:center; gap:6px; background:#0a0a0a; border:1px solid #2a1d00;
+            color:#ffd166; padding:6px 12px; border-radius:999px; font-weight:900 }
+  .room-pill{ display:inline-block; background:#0a1628; color:#8ab4ff; padding:6px 10px; border-radius:999px }
+
+  /* Khung chat + overlay ẩn header & panel phải (pointer-events:none nên không chặn click) */
+  .chat-wrap{ position:relative; border:1px solid #243145; border-radius:12px; overflow:hidden;
+              box-shadow:inset 0 0 0 1px #1f2a3a, 0 12px 30px rgba(0,0,0,.35) }
+  /* điểm mount (embed) hoặc chứa iframe */
+  #chatMount{ min-height:580px }
+  iframe{ width:100%; height:72vh; min-height:580px; border:0; background:#0b1220 }
+
+  /* Overlays — KHÔNG che phần giữa, KHÔNG che đáy (textarea) */
+  .ov-top{
+    position:absolute; left:0; right:0; top:0; height:var(--ov-top);
+    background:var(--card); z-index:3; pointer-events:none;
+    box-shadow:0 10px 12px -10px rgba(0,0,0,.6);
+  }
+  .ov-right{
+    position:absolute; top:0; right:0; bottom:0; width:var(--ov-right);
+    background:var(--card); z-index:2; pointer-events:none;
+    box-shadow:-10px 0 12px -10px rgba(0,0,0,.6);
+  }
+  /* Glow nhẹ ở đáy để “gợi ý” chỗ gõ — không che click */
+  .focus-bottom{
+    position:absolute; left:0; right:var(--ov-right); bottom:0; height:128px; pointer-events:none; z-index:1;
+    background:radial-gradient(120% 120% at 50% 100%, rgba(255,235,59,.16) 0%, rgba(255,235,59,.08) 40%, rgba(0,0,0,0) 72%);
+  }
+
+  .links{ display:none; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px }
+  .link-badge{ background:#0b1220; border:1px solid #223047; color:#b6c2d2; padding:6px 8px; border-radius:8px }
+  .toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:#111827; color:#e5e7eb;
+          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:#8b9bb1; font-size:13px; padding:16px }
+  ol.guide{ margin:0; padding-left:20px } ol.guide li{ margin:6px 0 }
+  @media (max-width:820px){ :root{ --ov-right:0px } } /* mobile: tlk.io thường không có panel phải */
 </style>
 </head>
 <body>
 <header>💬 Chat CVNSS4.0</header>
 
-<!-- Bước 1-2-3 -->
 <section id="login" class="card">
   <h2>Tham gia phòng chat</h2>
   <p class="muted">Luồng 3 bước siêu gọn: 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 class="guide">
     <li><b>Nhập tên</b> của bạn ở ô dưới đây (có thể sửa lại sau).</li>
     <li>Nhấn <b>Vào Chat</b> (nút đỏ). <span class="muted">Form Join gốc của tlk.io sẽ bị ẩn hoàn toàn.</span></li>
-    <li><b>✨ Tạo phòng bí mật</b> (ID ngẫu nhiên + Copy link tự ẩn). <span class="muted">Nếu bạn không cần “✨ Tạo phòng bí mật”, hãy <u>bỏ qua bước này</u>.</span></li>
+    <li><b>✨ Tạo phòng bí mật</b> nếu cần (ID ngẫu nhiên + Copy link tự ẩn). <span class="muted">Nếu bạn không cần “✨ Tạo phòng bí mật”, hãy <u>bỏ qua bước này</u>.</span></li>
   </ol>
 
   <div class="row" style="margin-top:12px">
@@ -86,19 +107,18 @@
   </div>
 </section>
 
-<!-- Khối chat (không có “Đổi tên / Iframe”) -->
 <section id="chatBox" class="card" style="display:none">
   <div class="status" id="statusBar">
     <span class="me-pill">👤 <span id="meName">Guest</span></span>
     <span class="room-pill">Phòng: <span id="roomPill" class="mono"></span></span>
   </div>
   <div class="chat-wrap">
-    <!-- Ẩn header `#channel` + Join + cột phải -->
-    <div class="ov-top"></div>
-    <div class="ov-right"></div>
-    <!-- chỉ highlight đáy để người dùng thấy khu nhập tin nhắn -->
+    <!-- Che header kênh + panel phải, KHÔNG che đáy -->
+    <div class="ov-top" id="ovTop"></div>
+    <div class="ov-right" id="ovRight"></div>
     <div class="focus-bottom"></div>
-    <iframe id="chatFrame" title="tlk.io chat"></iframe>
+    <!-- mount cho embed hoặc iframe -->
+    <div id="chatMount"></div>
   </div>
 </section>
 
@@ -111,11 +131,12 @@
   const qs   = new URLSearchParams(location.search);
   let room   = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
   const base = `${location.origin}${location.pathname}`;
+  const debug = qs.get("debug")==="1";  // ?debug=1 để tắt overlay khi test
 
   const els = {
     login:    document.getElementById("login"),
     chatBox:  document.getElementById("chatBox"),
-    frame:    document.getElementById("chatFrame"),
+    mount:    document.getElementById("chatMount"),
     name:     document.getElementById("nickname"),
     join:     document.getElementById("joinBtn"),
     newRoom:  document.getElementById("newRoomBtn"),
@@ -127,36 +148,78 @@
     roomPill: document.getElementById("roomPill"),
     status:   document.getElementById("statusBar"),
     toast:    document.getElementById("toast"),
+    ovTop:    document.getElementById("ovTop"),
+    ovRight:  document.getElementById("ovRight"),
   };
 
   function toast(msg){ els.toast.textContent = msg; els.toast.classList.add("show"); setTimeout(()=>els.toast.classList.remove("show"), 1400); }
   function getName(){ return (els.name.value || localStorage.getItem("cvnss4_name") || "Guest").trim() || "Guest"; }
   function setName(n){ els.meName.textContent = n; localStorage.setItem("cvnss4_name", n); }
   function syncRoomUI(){ els.roomPill.textContent = room; els.hint.textContent = `(đang ở phòng ${room})`; }
+  function clearMount(){ els.mount.replaceChildren(); }
+
+  // Tạm tắt overlay khi debug
+  if (debug){ els.ovTop.style.display="none"; els.ovRight.style.display="none"; }
+
+  // ======== Renderer A: embed.js (ưu tiên) ========
+  function renderEmbed(name){
+    clearMount();
+    const holder = document.createElement("div");
+    holder.id = "tlkio";
+    holder.dataset.channel = room;
+    holder.dataset.nickname = name;
+    holder.dataset.theme = "theme--day";
+    holder.style.minHeight = "580px";
+    els.mount.appendChild(holder);
+
+    const s = document.createElement("script");
+    s.async = true;
+    s.src = "https://tlk.io/embed.js";
+    let fallbackTimer = setTimeout(()=>{ renderIframe(name); }, 4500); // nếu embed.js bị chặn → dùng iframe
+    s.onload = () => { clearTimeout(fallbackTimer); };
+    s.onerror = () => { clearTimeout(fallbackTimer); renderIframe(name); };
+    els.mount.appendChild(s);
+  }
 
-  function tlkUrl(name){ return `https://tlk.io/${encodeURIComponent(room)}?nickname=${encodeURIComponent(name)}#embed`; }
+  // ======== Renderer B: iframe (fallback) ========
+  function renderIframe(name){
+    clearMount();
+    const url = `https://tlk.io/${encodeURIComponent(room)}?nickname=${encodeURIComponent(name)}#embed`;
+    const ifr = document.createElement("iframe");
+    ifr.title = "tlk.io chat";
+    ifr.src = url;
+    ifr.referrerPolicy = "no-referrer";
+    // Nếu iframe không tải được trong 6s → nhắc kiểm tra mạng/CSP
+    let watch = setTimeout(() => {
+      const warn = document.createElement("div");
+      warn.style.padding = "16px"; warn.style.color = "#ffd166";
+      warn.textContent = "⚠️ Không tải được khung chat. Thử mở trang này trong cửa sổ mới hoặc bật cho phép nội dung bên thứ ba.";
+      els.mount.appendChild(warn);
+    }, 6000);
+    ifr.addEventListener("load", ()=> clearTimeout(watch));
+    els.mount.appendChild(ifr);
+  }
 
-  // ======== Actions ========
-  function enterChat(){
-    const n = getName();
-    setName(n);
+  function renderChat(){
+    const name = getName();
+    setName(name);
     syncRoomUI();
+    els.status.style.display = "flex";
+    renderEmbed(name); // sẽ tự fallback nếu cần
+    setTimeout(()=> els.chatBox.scrollIntoView({behavior:"smooth", block:"start"}), 50);
+  }
 
+  // ======== Actions ========
+  function enterChat(){
     els.login.style.display = "none";
     els.chatBox.style.display = "block";
-    els.status.style.display = "flex";
-
-    // Iframe đi thẳng vào room với nickname => không bao giờ thấy Join
-    els.frame.src = tlkUrl(n);
-
-    // Cuộn tới chat
-    setTimeout(()=> els.chatBox.scrollIntoView({behavior:"smooth"}), 40);
+    renderChat();
   }
 
   els.join.addEventListener("click", enterChat);
   els.name.addEventListener("keydown", e => { if(e.key === "Enter") enterChat(); });
 
-  // Tạo phòng bí mật (ID random) + Copy + tự ẩn
+  // Tạo phòng bí mật
   els.newRoom.addEventListener("click", async ()=>{
     room = `cvnss4-0-${Math.random().toString(36).slice(2,8)}`;
     syncRoomUI();
@@ -179,10 +242,9 @@
     };
   });
 
-  // Prefill tên nếu có
+  // Prefill tên
   const last = localStorage.getItem("cvnss4_name"); if(last) els.name.value = last;
-  syncRoomUI();
-  els.name.focus({preventScroll:true});
+  syncRoomUI(); els.name.focus({preventScroll:true});
 })();
 </script>
 </body>