Update index.html

index.html

@@ -6,76 +6,52 @@
 <title>Chat CVNSS4.0</title>
 <style>
   :root{
-    --bg:#0b0d10; --card:#0f141a; --text:#e6edf3; --muted:#9aa4af;
+    /* Light theme */
+    --bg:#f7f9fc; --card:#ffffff; --text:#1f2937; --muted:#6b7280;
     --primary:#1a73e8; --danger:#d93025; --accent:#ffeb3b;
-    /* 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 */
+    /* Overlays (chỉ dùng cho iframe) */
+    --ov-top:140px;                 /* che header/#channel; tăng nếu còn hở */
+    --ov-right:clamp(220px,24vw,300px); /* 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 }
-
-  /* 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 */
+  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:#ffffff;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}
+  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+
+  /* Trạng thái: tên + phòng (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 */
+  .chat-wrap{position:relative;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;background:#fff}
+  #chatMount{min-height:560px}
+  iframe{width:100%;height:72vh;min-height:560px;border:0;background:#fff}
+
+  /* Overlays – chỉ thêm khi ở chế độ iframe */
+  .ov-top,.ov-right,.focus-bottom{display:none} /* mặc định ẩn (embed không cần) */
+  .iframe-mode .ov-top{display:block;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)}
+  .iframe-mode .ov-right{display:block;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)}
+  .iframe-mode .focus-bottom{display:block;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,.12) 0%, rgba(26,115,232,.05) 40%, rgba(255,255,255,0) 75%)}
+
+  .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}
+  footer{margin-top:auto;text-align:center;color:#6b7280;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 } }
 </style>
 </head>
 <body>
@@ -83,11 +59,12 @@
 
 <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>
+  <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 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> 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>
+    <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>
 
   <div class="row" style="margin-top:12px">
@@ -112,10 +89,10 @@
     <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">
-    <!-- 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 id="chatWrap" class="chat-wrap">
+    <!-- Overlays chỉ bật khi dùng iframe -->
+    <div class="ov-top"></div>
+    <div class="ov-right"></div>
     <div class="focus-bottom"></div>
     <!-- mount cho embed hoặc iframe -->
     <div id="chatMount"></div>
@@ -127,15 +104,15 @@
 
 <script>
 (() => {
-  // ======== State & helpers ========
+  // ====== State ======
   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"),
+    wrap:     document.getElementById("chatWrap"),
     mount:    document.getElementById("chatMount"),
     name:     document.getElementById("nickname"),
     join:     document.getElementById("joinBtn"),
@@ -148,68 +125,54 @@
     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(); }
+  // ====== 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.meName.textContent=n; localStorage.setItem("cvnss4_name", n); };
+  const syncRoomUI = ()=>{ els.roomPill.textContent=room; els.hint.textContent=`(đang ở phòng ${room})`; };
+  const 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) ========
+  // ====== Renderers ======
   function renderEmbed(name){
     clearMount();
+    els.wrap.classList.remove("iframe-mode"); // không cần overlay
     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";
+    holder.dataset.theme = "theme--day"; // sáng
+    holder.style.minHeight = "560px";
     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); };
+    s.async = true; s.src = "https://tlk.io/embed.js";
+    // fallback nếu bị chặn
+    let t = setTimeout(()=>{ renderIframe(name); }, 3500);
+    s.onload = ()=> clearTimeout(t);
+    s.onerror = ()=> { clearTimeout(t); renderIframe(name); };
     els.mount.appendChild(s);
   }
 
-  // ======== Renderer B: iframe (fallback) ========
   function renderIframe(name){
     clearMount();
+    els.wrap.classList.add("iframe-mode"); // bật overlay để ẩn header + cột phải
     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));
+    ifr.title = "tlk.io chat"; ifr.src = url; ifr.referrerPolicy = "no-referrer";
     els.mount.appendChild(ifr);
   }
 
   function renderChat(){
     const name = getName();
-    setName(name);
-    syncRoomUI();
+    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);
+    renderEmbed(name);               // sẽ tự fallback sang iframe nếu cần
+    setTimeout(()=> els.chatBox.scrollIntoView({behavior:"smooth"}), 40);
   }
 
-  // ======== Actions ========
+  // ====== Actions ======
   function enterChat(){
     els.login.style.display = "none";
     els.chatBox.style.display = "block";
@@ -219,7 +182,6 @@
   els.join.addEventListener("click", enterChat);
   els.name.addEventListener("keydown", e => { if(e.key === "Enter") enterChat(); });
 
-  // Tạo phòng bí mật
   els.newRoom.addEventListener("click", async ()=>{
     room = `cvnss4-0-${Math.random().toString(36).slice(2,8)}`;
     syncRoomUI();
@@ -230,7 +192,7 @@
     els.linkArea.style.display = "flex";
 
     try{ await navigator.clipboard?.writeText?.(link); toast("✅ Link đã copy!"); }catch(_){}
-    setTimeout(()=>{ if(els.linkArea.style.display!=="none") els.linkArea.style.display="none"; }, 10000);
+    setTimeout(()=>{ if(els.linkArea.style.display!=="none") els.linkArea.style.display="none"; }, 9000);
 
     els.copy.onclick = async ()=>{
       try{
@@ -242,7 +204,7 @@
     };
   });
 
-  // Prefill tên
+  // Prefill
   const last = localStorage.getItem("cvnss4_name"); if(last) els.name.value = last;
   syncRoomUI(); els.name.focus({preventScroll:true});
 })();