Update index.html

index.html

@@ -6,17 +6,17 @@
 <title>Chat CVNSS4.0</title>
 <style>
   :root{
-    /* Light theme */
+    /* Light theme tối giản */
     --bg:#f7f9fc; --card:#ffffff; --text:#1f2937; --muted:#6b7280;
     --primary:#1a73e8; --danger:#d93025; --accent:#ffeb3b;
-    /* 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 */
+    /* 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);
   }
   *{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:#ffffff;border-bottom:1px solid #e5e7eb}
+  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)}
@@ -26,31 +26,35 @@
   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}
   .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
 
-  /* Trạng thái: tên + phòng (gọn) */
+  /* 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 */
+  /* Khung chat (iframe) */
   .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}
+  iframe{width:100%;height:72vh;min-height:640px;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%)}
+  /* 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%)}
 
+  /* 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 */
+  .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}
   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>
@@ -59,15 +63,14 @@
 
 <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 class="guide">
+  <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>
 
-  <div class="row" style="margin-top:12px">
+  <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>
@@ -80,7 +83,7 @@
   <div id="linkArea" class="links" aria-live="polite">
     <span>🔗 Link phòng:</span>
     <span id="roomUrl" class="link-badge mono"></span>
-    <button id="copyBtn" class="btn-ghost">📋 Copy</button>
+    <button id="copyBtn" class="btn-secondary">📋 Copy</button>
   </div>
 </section>
 
@@ -89,13 +92,21 @@
     <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 id="chatWrap" class="chat-wrap">
-    <!-- Overlays chỉ bật khi dùng iframe -->
+
+  <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>
-    <!-- mount cho embed hoặc iframe -->
-    <div id="chatMount"></div>
+
+    <!-- KHUNG CHAT (iframe) -->
+    <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>
+    <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>
 
@@ -104,16 +115,15 @@
 
 <script>
 (() => {
-  // ====== State ======
+  // ===== State =====
   const qs   = new URLSearchParams(location.search);
   let room   = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
   const base = `${location.origin}${location.pathname}`;
 
   const els = {
     login:    document.getElementById("login"),
-    chatBox:  document.getElementById("chatBox"),
-    wrap:     document.getElementById("chatWrap"),
-    mount:    document.getElementById("chatMount"),
+    box:      document.getElementById("chatBox"),
+    frame:    document.getElementById("chatFrame"),
     name:     document.getElementById("nickname"),
     join:     document.getElementById("joinBtn"),
     newRoom:  document.getElementById("newRoomBtn"),
@@ -121,71 +131,59 @@
     roomUrl:  document.getElementById("roomUrl"),
     copy:     document.getElementById("copyBtn"),
     hint:     document.getElementById("roomHint"),
-    meName:   document.getElementById("meName"),
-    roomPill: document.getElementById("roomPill"),
+    me:       document.getElementById("meName"),
+    pill:     document.getElementById("roomPill"),
     status:   document.getElementById("statusBar"),
     toast:    document.getElementById("toast"),
+    err:      document.getElementById("errorBox"),
+    openNew:  document.getElementById("openNew"),
   };
 
-  // ====== Helpers ======
-  const toast = (m)=>{ els.toast.textContent=m; els.toast.classList.add("show"); setTimeout(()=>els.toast.classList.remove("show"),1400); };
+  // ===== 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();
-
-  // ====== 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"; // 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";
-    // 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);
-  }
+  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`;
 
-  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";
-    els.mount.appendChild(ifr);
-  }
-
-  function renderChat(){
-    const name = getName();
-    setName(name); syncRoomUI();
+  // ===== Core: load iframe + fallback =====
+  function mountChat(){
+    const name = getName(); setName(name); syncRoomUI();
     els.status.style.display = "flex";
-    renderEmbed(name);               // sẽ tự fallback sang iframe nếu cần
-    setTimeout(()=> els.chatBox.scrollIntoView({behavior:"smooth"}), 40);
+
+    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});
   }
 
-  // ====== Actions ======
   function enterChat(){
     els.login.style.display = "none";
-    els.chatBox.style.display = "block";
-    renderChat();
+    els.box.style.display = "block";
+    mountChat();
+    setTimeout(()=> els.box.scrollIntoView({behavior:"smooth"}), 40);
   }
 
+  // ===== Events =====
   els.join.addEventListener("click", enterChat);
   els.name.addEventListener("keydown", e => { if(e.key === "Enter") enterChat(); });
 
   els.newRoom.addEventListener("click", async ()=>{
     room = `cvnss4-0-${Math.random().toString(36).slice(2,8)}`;
     syncRoomUI();
-    history.replaceState(null, "", `?room=${room}`);
+    history.replaceState(null,"",`?room=${room}`);
 
     const link = `${base}?room=${room}`;
     els.roomUrl.textContent = link;
@@ -204,9 +202,11 @@
     };
   });
 
-  // Prefill
+  // ===== Prefill + auto-enter nếu đã có room & tê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>
 </body>