Spaces:

CVNSS
/

Chat

Running

App Files Files Community

CVNSS commited on Aug 22, 2025

Commit

8348c3d

verified ·

1 Parent(s): 7153f47

Update index.html

Browse files

Files changed (1) hide show

index.html +49 -31

index.html CHANGED Viewed

@@ -6,16 +6,13 @@
   <title>Chat CVNSS4.0</title>
   <style>
     :root{
-      --primary:#1a73e8;   /* màu chủ đạo */
-      --bg:#f5f6f8;        /* nền trang */
-      --text:#202124;
-      --ov-top:72px;       /* ← chiều cao overlay che HEADER tlk.io (không che khung Join) */
-      --ov-right:260px;    /* ← bề rộng overlay che CỘT PHẢI */
     }
     *{ 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;
     }
@@ -48,38 +45,33 @@
       display:inline-block; background:#eef3fd; color:#174ea6;
       padding:6px 10px; border-radius:999px; font-size:14px; margin-bottom:10px;
     }
     .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 ======
-       - ov-top: chỉ che HEADER tlk.io (đám mây/title). pointer-events:none để không chặn click.
-       - ov-right: che cột phải (online, branding, patron).
-       - KHÔNG có ov-bottom để giữ ô nhập tin nhắn.
-    */
     .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);
-      transition:height .15s ease;
     }
     .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);
     }
-    /* Responsive: để khung Join luôn lộ rõ trên màn nhỏ */
-    @media (max-width: 640px){
-      :root{ --ov-top:56px; --ov-right:200px; }
-    }
-    footer{
-      margin-top:auto; text-align:center; color:#6c727a; font-size:13px; padding:16px;
     }
-    .links{ margin-top:14px; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
-    .link-badge{ background:#f1f3f4; padding:6px 8px; border-radius:6px }
   </style>
 </head>
 <body>
@@ -97,7 +89,7 @@
     <button class="ghost" id="newRoomBtn">✨ Tạo phòng bí mật</button>
   </div>
-  <div id="linkArea" class="links" style="display:none;">
     <span>🔗 Link phòng:</span>
     <span id="roomUrl" class="link-badge mono"></span>
     <button class="secondary" id="copyBtn">📋 Copy</button>
@@ -114,6 +106,8 @@
   </div>
 </section>
 <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>
@@ -125,28 +119,52 @@
   const base = `${location.origin}${location.pathname}`;
   document.getElementById("roomPill").textContent = "Phòng: " + room;
-  // Vào chat: nạp iframe với nickname; overlay KHÔNG che khung Join
   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;
   };
-  // Tạo phòng bí mật (random) + hiển thị/copy một link
   document.getElementById("newRoomBtn").onclick = () => {
     const rnd  = Math.random().toString(36).slice(2,8);
     room       = `cvnss4-0-${rnd}`;
     const link = `${base}?room=${room}`;
     document.getElementById("roomPill").textContent = "Phòng: " + room;
-    document.getElementById("roomUrl").textContent  = link;
-    document.getElementById("linkArea").style.display = "flex";
     const copyBtn = document.getElementById("copyBtn");
-    copyBtn.onclick = () => navigator.clipboard.writeText(link).then(() => alert("✅ Đã copy link phòng!"));
   };
 </script>
 </body>

   <title>Chat CVNSS4.0</title>
   <style>
     :root{
+      --primary:#1a73e8; --bg:#f5f6f8; --text:#202124;
+      --ov-top:72px;      /* cao overlay che HEADER tlk (để lộ khung Join) */
+      --ov-right:260px;   /* rộng overlay che cột phải */
     }
     *{ 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;
     }
       display:inline-block; background:#eef3fd; color:#174ea6;
       padding:6px 10px; border-radius:999px; font-size:14px; margin-bottom:10px;
     }
     .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: chỉ che header & cột phải của 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);
     }
+    @media (max-width:640px){ :root{ --ov-top:56px; --ov-right:200px } }
+    .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 thông báo */
+    .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 }
   </style>
 </head>
 <body>
     <button class="ghost" id="newRoomBtn">✨ Tạo phòng bí mật</button>
   </div>
+  <div id="linkArea" class="links">
     <span>🔗 Link phòng:</span>
     <span id="roomUrl" class="link-badge mono"></span>
     <button class="secondary" id="copyBtn">📋 Copy</button>
   </div>
 </section>
+<div id="toast" class="toast">Đã 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>
   const base = `${location.origin}${location.pathname}`;
   document.getElementById("roomPill").textContent = "Phòng: " + room;
+  // Toast helper
+  function toast(msg){
+    const t = document.getElementById('toast');
+    t.textContent = msg; t.classList.add('show');
+    setTimeout(()=> t.classList.remove('show'), 1400);
+  }
+  // Vào chat: nạp iframe với nickname
   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;
   };
+  // Tạo phòng bí mật: random id + cập nhật URL + hiển thị/copy link
   document.getElementById("newRoomBtn").onclick = () => {
     const rnd  = Math.random().toString(36).slice(2,8);
     room       = `cvnss4-0-${rnd}`;
     const link = `${base}?room=${room}`;
+    // Cập nhật UI + URL hiện tại (để share đúng phòng)
     document.getElementById("roomPill").textContent = "Phòng: " + room;
+    history.replaceState(null, "", `?room=${room}`);
+    // Hiển thị block link
+    const area = document.getElementById("linkArea");
+    document.getElementById("roomUrl").textContent = link;
+    area.style.display = "flex";
+    // Copy & auto-ẩn block sau khi copy
     const copyBtn = document.getElementById("copyBtn");
+    copyBtn.onclick = async () => {
+      try {
+        if (navigator.share) {
+          // Ưu tiên chia sẻ hệ thống (nếu có)
+          await navigator.share({ title: "Phòng chat CVNSS4.0", url: link });
+        } else {
+          await navigator.clipboard.writeText(link);
+          toast("✅ Đã copy link phòng!");
+        }
+      } catch(e){ /* user huỷ share */ }
+      // Ẩn khối link sau 1 giây để gọn gàng
+      setTimeout(()=> area.style.display = "none", 1000);
+    };
   };
 </script>
 </body>