Update index.html

index.html

@@ -5,48 +5,68 @@
 <meta name="viewport" content="width=device-width,initial-scale=1"/>
 <title>Chat CVNSS4.0</title>
 <style>
-  :root{ --bg:#f6f7fb; --text:#202124; --primary:#1a73e8; --danger:#d93025; --accent:#ffeb3b; }
-  *{box-sizing:border-box} body{margin:0;font-family:"Google Sans",Arial,sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column;min-height:100vh}
-  header{background:var(--primary);color:#fff;padding:14px 16px;text-align:center;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.08)}
-  .card{width:min(960px,92vw);margin:22px auto;background:#fff;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.08);padding:20px}
-  h2{margin:0 0 8px;font-weight:800}
-  .muted{color:#5f6368}
+  :root{
+    --bg:#0b0d10; --card:#101418; --text:#e6edf3; --muted:#98a2ad;
+    --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 */
+  }
+  *{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 #dadce0;border-radius:8px}
-  input[type=text]:focus{outline:none;border-color:var(--primary)}
-  button{padding:12px 18px;border:0;border-radius:8px;font-weight:800;cursor:pointer}
+  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:#e9eef6;color:#174ea6}
-  .btn-secondary{background:#5f6368;color:#fff}
-  .tag-danger{display:inline-block;background:var(--danger);color:var(--accent);font-weight:900;padding:4px 10px;border-radius:999px;font-size:12px;letter-spacing:.3px}
-  .links{display:none;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
+  .btn-ghost{background:#0f172a;color:#93c5fd;border:1px dashed #1f2937}
   .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
-  .status{display:none;align-items:center;gap:8px;padding:10px 12px;border:1px dashed #e0e3e7;border-radius:10px;margin-bottom:10px;background:#fbfcff}
-  .pill{display:inline-block;background:#eef3fd;color:#174ea6;padding:6px 10px;border-radius:999px;font-size:13px}
-  .chat-wrap{position:relative;border:1px solid #e3e6ea;border-radius:10px;overflow:hidden}
-  /* khung mount cho chat (embed/iframe) */
-  #chatMount{min-height:560px}
-  iframe{width:100%;height:72vh;min-height:560px;border:0;background:#fff}
-  .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#323232;color:#fff;padding:10px 14px;border-radius:8px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s}
+  /* 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:#6c727a;font-size:13px;padding:16px}
+  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 */
 </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ể đổi sau).</li>
+    <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).
-      <div style="margin-top:6px"><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></div>
-      <div style="margin-top:8px"><span class="tag-danger">Vào Chat</span></div>
-    </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>
   </ol>
 
   <div class="row" style="margin-top:12px">
@@ -61,19 +81,25 @@
 
   <div id="linkArea" class="links" aria-live="polite">
     <span>🔗 Link phòng:</span>
-    <span id="roomUrl" class="mono"></span>
-    <button id="copyBtn" class="btn-secondary">📋 Copy</button>
+    <span id="roomUrl" class="link-badge mono"></span>
+    <button id="copyBtn" class="btn-ghost">📋 Copy</button>
   </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="pill">👤 Bạn: <b id="meName">Guest</b></span>
-    <span class="pill">Phòng: <b id="roomPill"></b></span>
-    <button id="renameBtn" class="btn-ghost" title="Đổi tên">Đổi tên</button>
-    <button id="fallbackBtn" class="btn-secondary" title="Nếu không thấy chat">Dùng chế độ iframe</button>
+    <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 -->
+    <div class="focus-bottom"></div>
+    <iframe id="chatFrame" title="tlk.io chat"></iframe>
   </div>
-  <div class="chat-wrap"><div id="chatMount"></div></div>
 </section>
 
 <div id="toast" class="toast">Đã copy!</div>
@@ -81,104 +107,69 @@
 
 <script>
 (() => {
-  // --------- State & helpers ----------
-  const qs       = new URLSearchParams(location.search);
-  let room       = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
-  let mode       = "embed"; // "embed" (mặc định) -> gọn, không Join; "iframe" là phương án dự phòng
+  // ======== State & helpers ========
+  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"),
-    chatMount:  document.getElementById("chatMount"),
-    name:       document.getElementById("nickname"),
-    join:       document.getElementById("joinBtn"),
-    newRoom:    document.getElementById("newRoomBtn"),
-    roomUrl:    document.getElementById("roomUrl"),
-    linkArea:   document.getElementById("linkArea"),
-    copy:       document.getElementById("copyBtn"),
-    toast:      document.getElementById("toast"),
-    roomHint:   document.getElementById("roomHint"),
-    status:     document.getElementById("statusBar"),
-    meName:     document.getElementById("meName"),
-    roomPill:   document.getElementById("roomPill"),
-    rename:     document.getElementById("renameBtn"),
-    fallback:   document.getElementById("fallbackBtn"),
+    login:    document.getElementById("login"),
+    chatBox:  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"),
+    meName:   document.getElementById("meName"),
+    roomPill: document.getElementById("roomPill"),
+    status:   document.getElementById("statusBar"),
+    toast:    document.getElementById("toast"),
   };
 
-  const baseUrl = `${location.origin}${location.pathname}`;
-
   function toast(msg){ els.toast.textContent = msg; els.toast.classList.add("show"); setTimeout(()=>els.toast.classList.remove("show"), 1400); }
-  function syncRoomUI(){ els.roomHint.textContent = `(đang ở phòng ${room})`; els.roomPill.textContent = room; }
   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})`; }
 
-  // --------- Chat renderers ----------
-  function clearMount(){ els.chatMount.replaceChildren(); }
-
-  // Prefer embed.js (gọn, không có Join/header)
-  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 = "560px";
-    els.chatMount.appendChild(holder);
-
-    // load/reload embed.js mỗi lần mount (an toàn cho nhiều host)
-    const s = document.createElement("script");
-    s.async = true; s.src = "https://tlk.io/embed.js";
-    s.onerror = () => { mode = "iframe"; renderIframe(name); }; // nếu host chặn script → fallback
-    els.chatMount.appendChild(s);
-  }
-
-  // Fallback: iframe (đi thẳng vào room bằng ?nickname=), không overlay rối rắm
-  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";
-    els.chatMount.appendChild(ifr);
-  }
+  function tlkUrl(name){ return `https://tlk.io/${encodeURIComponent(room)}?nickname=${encodeURIComponent(name)}#embed`; }
 
-  function renderChat(){
-    const name = getName();
-    setName(name);
+  // ======== Actions ========
+  function enterChat(){
+    const n = getName();
+    setName(n);
     syncRoomUI();
-    els.status.style.display = "flex";
-    if(mode === "embed") renderEmbed(name); else renderIframe(name);
-    // cuộn tới chat
-    setTimeout(()=> els.chatBox.scrollIntoView({behavior:"smooth", block:"start"}), 50);
-  }
 
-  // --------- Actions ----------
-  function enterChat(){
     els.login.style.display = "none";
     els.chatBox.style.display = "block";
-    renderChat();
+    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);
   }
 
   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 () => {
+  // Tạo phòng bí mật (ID random) + 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 = `${baseUrl}?room=${room}`;
+    const link = `${base}?room=${room}`;
     els.roomUrl.textContent = link;
     els.linkArea.style.display = "flex";
 
-    // auto copy nếu được cấp quyền
     try{ await navigator.clipboard?.writeText?.(link); toast("✅ Link đã copy!"); }catch(_){}
-    // ẩn tự động sau 10s để gọn
     setTimeout(()=>{ if(els.linkArea.style.display!=="none") els.linkArea.style.display="none"; }, 10000);
 
-    els.copy.onclick = async () => {
+    els.copy.onclick = async ()=>{
       try{
         await navigator.clipboard?.writeText?.(link);
         if(navigator.share){ try{ await navigator.share({title:"Phòng chat CVNSS4.0", url:link}); }catch(_){} }
@@ -188,19 +179,8 @@
     };
   });
 
-  // Đổi tên nhanh không cần reload
-  els.rename.addEventListener("click", () => {
-    const cur = getName();
-    const n = prompt("Nhập tên mới:", cur) || cur;
-    setName(n);
-    renderChat();
-  });
-
-  // Buộc chuyển sang iframe nếu embed không hiện
-  els.fallback.addEventListener("click", () => { mode = "iframe"; renderChat(); });
-
-  // Prefill
-  const lastName = localStorage.getItem("cvnss4_name"); if(lastName) els.name.value = lastName;
+  // Prefill tên nếu có
+  const last = localStorage.getItem("cvnss4_name"); if(last) els.name.value = last;
   syncRoomUI();
   els.name.focus({preventScroll:true});
 })();