Update index.html

index.html

@@ -7,138 +7,254 @@
   <style>
     :root{
       --primary:#1a73e8; --bg:#f5f6f8; --text:#202124;
-      /* Che kín header + ô Join tlk.io (không che ô gõ tin nhắn) */
-      --ov-top:200px;   /* nếu còn hở ô Join => tăng 220–260px */
-      --ov-right:260px; /* cột phải 220–300px tùy màn hình */
+      /* Che kín header + ô Join tlk.io (KHÔNG che ô gõ tin nhắn ở đáy) */
+      --ov-top: clamp(180px, 24vh, 280px); /* nếu còn hở ô Join => tăng giá trị này */
+      --ov-right: 260px;                   /* cột phải thường ~240–300px */
     }
     *{ 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:16px; text-align:center; font-size:20px; font-weight:600;
-      box-shadow:0 2px 6px rgba(0,0,0,.1); }
-    .card{ width:min(940px,92vw); margin:28px auto; background:#fff; border-radius:12px;
-      box-shadow:0 6px 18px rgba(0,0,0,.08); padding:22px; }
-    h2{ margin:0 0 14px 0; font-weight:600 }
-    .row{ display:flex; gap:10px; flex-wrap:wrap }
-    input[type="text"]{ flex:1 1 260px; padding:12px 14px; font-size:16px; border:1px solid #dadce0; border-radius:8px; }
+    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:16px; text-align:center;
+      font-size:20px; font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,.1);
+    }
+    .card{
+      width:min(960px,92vw); margin:24px auto; background:#fff; border-radius:12px;
+      box-shadow:0 6px 18px rgba(0,0,0,.08); padding:22px;
+    }
+    h2{ margin:0 0 10px 0; font-weight:700 }
+    .subtle{ color:#5f6368; font-size:14px; margin:6px 0 14px }
+    .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:none; border-radius:8px; background:var(--primary); color:#fff; font-weight:600; cursor:pointer; }
-    button:hover{ background:#0b5ed7 }
+    button{
+      padding:12px 18px; border:none; border-radius:8px;
+      background:var(--primary); color:#fff; font-weight:700; cursor:pointer;
+      transition: transform .06s ease, filter .12s ease;
+    }
+    button:hover{ filter:brightness(0.96) }
+    button:active{ transform: translateY(1px) }
+    .btn-red{ background:#d93025; color:#ffeb3b; } /* Vào Chat: nền đỏ, chữ vàng */
     .ghost{ background:#e9eef6; color:#174ea6 }
     .secondary{ background:#5f6368 }
     .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
+    .muted{ color:#6c727a }
     #chat-box{ display:none }
-    .pill{ display:inline-block; background:#eef3fd; color:#174ea6; padding:6px 10px; border-radius:999px; font-size:14px; margin-bottom:10px; }
-
+    .pill{ display:inline-block; background:#eef3fd; color:#174ea6;
+      padding:6px 10px; border-radius:999px; font-size:14px; margin-bottom:10px; }
+    .tag-danger{
+      display:inline-block; background:#d93025; color:#ffeb3b; font-weight:800;
+      padding:4px 10px; border-radius:999px; font-size:12px; letter-spacing:.3px;
+    }
     .chat-wrap{ position:relative; border:1px solid #e3e6ea; border-radius:10px; overflow:hidden }
     iframe{ width:100%; height:72vh; min-height:520px; border:0; background:#fff }
-
-    /* Overlays: che hẳn header + ô Join + cột phải + footer tlk.io */
-    .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); }
-    .ov-bottom{ position:absolute; left:0; right:0; bottom:0; height:100px;
-      background:#fff; z-index:2; pointer-events:none; box-shadow:0 -8px 10px -10px rgba(0,0,0,.12); }
-
+    /* Overlays: che hẳn header + ô Join + cột phải của tlk.io, KHÔNG che đáy */
+    .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);
+    }
+    /* KHÔNG dùng overlay đáy để không che ô gõ tin nhắn */
     .links{ display:none; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px }
     .link-badge{ background:#f1f3f4; padding:6px 8px; border-radius:6px }
-    .toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
-      background:#323232; color:#fff; padding:10px 14px; border-radius:8px; font-size:14px; opacity:0;
-      pointer-events:none; transition:opacity .2s ease; }
+    .toast{
+      position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
+      background:#323232; color:#fff; padding:10px 14px; border-radius:8px; font-size:14px;
+      opacity:0; pointer-events:none; transition:opacity .2s ease;
+    }
     .toast.show{ opacity:1 }
     footer{ margin-top:auto; text-align:center; color:#6c727a; font-size:13px; padding:16px }
-    @media (max-width:640px){ :root{ --ov-right:200px } }
+    ol.guide{ margin:0; padding-left:20px }
+    ol.guide li{ margin:6px 0 }
+    @media (max-width:800px){ :root{ --ov-right: 0px } } /* mobile tlk.io thường không có cột phải */
   </style>
 </head>
 <body>
 <header>💬 Chat CVNSS4.0</header>
 
-<!-- tạo phòng & vào chat -->
+<!-- Hướng dẫn + form ngoài: luôn dùng form này, không bao giờ dùng Join trong tlk.io -->
 <section id="login" class="card">
   <h2>Tham gia phòng chat</h2>
-  <div class="row" style="margin-bottom:10px;">
-    <input type="text" id="nickname" placeholder="Nhập tên của bạn…">
-    <button id="joinBtn">Vào Chat</button>
+  <p class="subtle">Luồng 3 bước siêu gọn: nhập tên → <span class="muted">Vào Chat</span> → (tuỳ chọn) tạo phòng bí mật để 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 mời người khác (ngẫu nhiên ID + 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>
+  </ol>
+
+  <div class="row" style="margin-top:12px;">
+    <input type="text" id="nickname" placeholder="Nhập tên của bạn…" autocomplete="name" />
+    <button id="joinBtn" class="btn-red">Vào Chat</button>
   </div>
-  <div class="row">
+
+  <div class="row" style="margin-top:10px;">
     <button class="ghost" id="newRoomBtn">✨ Tạo phòng bí mật</button>
+    <span class="muted" id="roomHint"></span>
   </div>
 
-  <div id="linkArea" class="links">
+  <div id="linkArea" class="links" aria-live="polite">
     <span>🔗 Link phòng:</span>
     <span id="roomUrl" class="link-badge mono"></span>
-    <button class="secondary" id="copyBtn">📋 Copy</button>
+    <button class="secondary" id="copyBtn" title="Copy link để gửi cho mọi người">📋 Copy</button>
   </div>
 </section>
 
-<!-- khối chat -->
+<!-- Khối chat -->
 <section id="chat-box" class="card">
   <span id="roomPill" class="pill"></span>
   <div class="chat-wrap">
     <div class="ov-top"></div>
     <div class="ov-right"></div>
-    <div class="ov-bottom"></div>
     <iframe id="chatFrame" title="tlk.io chat"></iframe>
   </div>
 </section>
 
-<div id="toast" class="toast">Đã copy link phòng!</div>
+<div id="toast" class="toast" role="status" aria-live="polite">Đã copy link phòng!</div>
 
 <footer>
   Nguồn: Sản phẩm thử nghiệm của Team CVNSS4.0 • Đóng tab là xóa hết dữ liệu ✅
 </footer>
 
 <script>
-  // --- trạng thái & URL ---
-  const qs   = new URLSearchParams(location.search);
-  let room   = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
-  const base = `${location.origin}${location.pathname}`;
-  document.getElementById("roomPill").textContent = "Phòng: " + room;
+  // ========== Trạng thái & URL ==========
+  const qs      = new URLSearchParams(location.search);
+  let room      = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
+  const base    = `${location.origin}${location.pathname}`;
+  const els     = {
+    pill:      document.getElementById("roomPill"),
+    login:     document.getElementById("login"),
+    chatBox:   document.getElementById("chat-box"),
+    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"),
+    toast:     document.getElementById("toast"),
+    hint:      document.getElementById("roomHint"),
+  };
+
+  // Prefill tên gần đây
+  const lastName = localStorage.getItem("cvnss4_name") || "";
+  if (lastName) els.name.value = lastName;
+  els.name.focus({ preventScroll:true });
+
+  // Gắn label phòng hiện tại
+  function syncRoomUI(){
+    els.pill.textContent = "Phòng: " + room;
+    els.hint.textContent = "(đang ở phòng " + room + ")";
+  }
+  syncRoomUI();
 
   // Toast helper
-  const toastEl = document.getElementById('toast');
-  function toast(msg){ toastEl.textContent = msg; toastEl.classList.add('show'); setTimeout(()=>toastEl.classList.remove('show'), 1400); }
-
-  // --- Vào chat: luôn ẩn Join gốc bằng overlay, chỉ dùng form ngoài ---
-  document.getElementById("joinBtn").onclick = () => {
-    const name = (document.getElementById("nickname").value || "").trim() || "Guest";
-    document.getElementById("login").style.display = "none";
-    document.getElementById("chat-box").style.display = "block";
-    const url = `https://tlk.io/${encodeURIComponent(room)}?nickname=${encodeURIComponent(name)}`;
-    document.getElementById("chatFrame").src = url;
-  };
+  function toast(msg){
+    els.toast.textContent = msg;
+    els.toast.classList.add('show');
+    setTimeout(()=> els.toast.classList.remove('show'), 1400);
+  }
+
+  // Build URL tlk.io (dựa vào nickname)
+  function buildTlkUrl(name){
+    // tlk.io hỗ trợ ?nickname= để auto-join, nhờ vậy không cần form Join gốc
+    const nick = encodeURIComponent(name || "Guest");
+    const r    = encodeURIComponent(room);
+    return `https://tlk.io/${r}?nickname=${nick}`;
+  }
+
+  // ====== Vào chat: luôn ẩn Join gốc bằng overlay, chỉ dùng form ngoài ======
+  function enterChat(){
+    const name = (els.name.value || "").trim() || "Guest";
+    localStorage.setItem("cvnss4_name", name);
+    els.login.style.display = "none";
+    els.chatBox.style.display = "block";
+    els.frame.src = buildTlkUrl(name);
 
-  // --- Tạo phòng bí mật: random id + cập nhật URL + hiện link + copy & ẩn ngay ---
-  document.getElementById("newRoomBtn").onclick = () => {
-    const rnd  = Math.random().toString(36).slice(2,8);
-    room       = `cvnss4-0-${rnd}`;
-    const link = `${base}?room=${room}`;
+    // Scroll xuống khối chat cho chắc (mobile)
+    setTimeout(()=> els.chatBox.scrollIntoView({ behavior:"smooth", block:"start" }), 50);
+  }
 
-    // cập nhật pill & URL hiện tại để share đúng phòng
-    document.getElementById("roomPill").textContent = "Phòng: " + room;
+  els.join.addEventListener("click", enterChat);
+  els.name.addEventListener("keydown", (e)=>{
+    if (e.key === "Enter") enterChat();
+  });
+
+  // ====== Tạo phòng bí mật: random id + cập nhật URL + hiện link + copy & ẩn ngay ======
+  els.newRoom.addEventListener("click", async ()=>{
+    const rnd = Math.random().toString(36).slice(2, 8);
+    room      = `cvnss4-0-${rnd}`;
+    const link= `${base}?room=${room}`;
+
+    // Cập nhật UI & URL
+    syncRoomUI();
     history.replaceState(null, "", `?room=${room}`);
 
-    // hiện block link
-    const area = document.getElementById("linkArea");
-    document.getElementById("roomUrl").textContent = link;
-    area.style.display = "flex";
+    // Hiện block link
+    els.roomUrl.textContent = link;
+    els.linkArea.style.display = "flex";
 
-    // copy & ẨN NGAY block cho gọn, vẫn hiện toast báo
-    const copyBtn = document.getElementById("copyBtn");
-    copyBtn.onclick = async () => {
-      try {
-        if (navigator.clipboard && navigator.clipboard.writeText) {
+    // Auto copy ngay khi tạo (nếu quyền cho phép)
+    try{
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(link);
+        toast("✅ Link đã copy! Gửi cho mọi người ngay.");
+      }
+    }catch(_){ /* bỏ qua */ }
+
+    // Gắn handler Copy (nếu cần copy thủ công lại)
+    els.copy.onclick = async ()=>{
+      try{
+        if (navigator.clipboard?.writeText) {
           await navigator.clipboard.writeText(link);
+        } else {
+          // Fallback: chọn nội dung để người dùng Ctrl+C
+          const sel = window.getSelection();
+          const range = document.createRange();
+          range.selectNodeContents(els.roomUrl);
+          sel.removeAllRanges(); sel.addRange(range);
+          document.execCommand("copy");
+          sel.removeAllRanges();
+        }
+        // Web Share API (không bắt buộc)
+        if (navigator.share){
+          try{ await navigator.share({ title:"Phòng chat CVNSS4.0", url:link }); }catch(_){}
         }
-        // nếu có Web Share API, ưu tiên dùng (không bắt buộc)
-        if (navigator.share) { try { await navigator.share({ title:"Phòng chat CVNSS4.0", url:link }); } catch(e){} }
         toast("✅ Đã copy link phòng!");
-      } catch(e){ toast("⚠️ Sao chép không thành công—hãy copy thủ công"); }
-      // Ẩn ngay khối link
-      area.style.display = "none";
+      } catch(e){
+        toast("⚠️ Sao chép không thành công—hãy copy thủ công");
+      }
+      // Ẩn ngay khối link cho gọn
+      els.linkArea.style.display = "none";
     };
-  };
+
+    // Tự ẩn khối link sau 12 giây nếu quên bấm Copy
+    setTimeout(()=> {
+      if (els.linkArea.style.display !== "none") els.linkArea.style.display = "none";
+    }, 12000);
+  });
+
+  // Nếu mở trang bằng link phòng, giữ nguyên: khách nhập tên ở ngoài → Vào Chat
+  // Không làm gì thêm để bảo đảm chỉ dùng form ngoài.
 </script>
 </body>
 </html>