Spaces:

CVNSS
/

Chat

Running

App Files Files Community

CVNSS commited on Aug 22, 2025

Commit

9215025

verified ·

1 Parent(s): 1fef416

Update index.html

Browse files

Files changed (1) hide show

index.html +147 -198

index.html CHANGED Viewed

@@ -1,260 +1,209 @@
 <!DOCTYPE html>
 <html lang="vi">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>Chat CVNSS4.0</title>
-  <style>
-    :root{
-      --primary:#1a73e8; --bg:#f5f6f8; --text:#202124;
-      /* 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(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: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; }
-    .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 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.show{ opacity:1 }
-    footer{ margin-top:auto; text-align:center; color:#6c727a; font-size:13px; padding:16px }
-    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>
-<!-- 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>
-  <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" 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" aria-live="polite">
     <span>🔗 Link phòng:</span>
-    <span id="roomUrl" class="link-badge mono"></span>
-    <button class="secondary" id="copyBtn" title="Copy link để gửi cho mọi người">📋 Copy</button>
   </div>
 </section>
-<!-- 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>
-    <iframe id="chatFrame" title="tlk.io chat"></iframe>
   </div>
 </section>
-<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}`;
-  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
-  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);
-    // Scroll xuống khối chat cho chắc (mobile)
-    setTimeout(()=> els.chatBox.scrollIntoView({ behavior:"smooth", block:"start" }), 50);
   }
   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
     els.roomUrl.textContent = link;
     els.linkArea.style.display = "flex";
-    // 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(_){}
-        }
         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 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>

 <!DOCTYPE html>
 <html lang="vi">
 <head>
+<meta charset="utf-8"/>
+<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}
+  .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}
+  .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}
+  .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}
+  .toast.show{opacity:1}
+  footer{margin-top:auto;text-align:center;color:#6c727a;font-size:13px;padding:16px}
+  ol.guide{margin:0;padding-left:20px} ol.guide li{margin:6px 0}
+</style>
 </head>
 <body>
 <header>💬 Chat CVNSS4.0</header>
 <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>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>
   </ol>
+  <div class="row" style="margin-top:12px">
+    <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>
+  <div class="row" style="margin-top:10px">
+    <button id="newRoomBtn" class="btn-ghost">✨ Tạo phòng bí mật</button>
+    <span id="roomHint" class="muted"></span>
   </div>
   <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>
   </div>
 </section>
+<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>
   </div>
+  <div class="chat-wrap"><div id="chatMount"></div></div>
 </section>
+<div id="toast" class="toast">Đã copy!</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>
+(() => {
+  // --------- 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
+  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"),
   };
+  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); }
+  // --------- 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 renderChat(){
+    const name = getName();
+    setName(name);
+    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.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();
     history.replaceState(null, "", `?room=${room}`);
+    const link = `${baseUrl}?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 () => {
       try{
+        await navigator.clipboard?.writeText?.(link);
+        if(navigator.share){ try{ await navigator.share({title:"Phòng chat CVNSS4.0", url:link}); }catch(_){} }
         toast("✅ Đã copy link phòng!");
+      }catch(_){ toast("⚠️ Không copy được—hãy copy thủ công"); }
       els.linkArea.style.display = "none";
     };
+  });
+  // Đổ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;
+  syncRoomUI();
+  els.name.focus({preventScroll:true});
+})();
 </script>
 </body>
 </html>