Update index.html

index.html

@@ -7,68 +7,60 @@
   <style>
     :root { --primary:#1a73e8; --bg:#f5f6f8; --text:#202124; }
     * { box-sizing: border-box; }
-    body {
+    body{
       margin:0; font-family: Arial, "Segoe UI", system-ui, -apple-system, sans-serif;
       background:var(--bg); color:var(--text); display:flex; flex-direction:column; min-height:100vh;
     }
-    header { background:var(--primary); color:#fff; padding:16px 20px; font-size:20px; font-weight:600; text-align:center; }
-    .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 #d6d9dd; border-radius:8px; outline: none;
-    }
+    header{ background:var(--primary); color:#fff; padding:16px 20px; font-size:20px; font-weight:600; text-align:center; }
+    .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 #d6d9dd; border-radius:8px; outline:none; }
     input[type="text"]:focus{ border-color:var(--primary); }
-    button{
-      padding:12px 16px; border:none; border-radius:8px; background:var(--primary); color:#fff;
-      font-weight:600; cursor:pointer;
-    }
+    button{ padding:12px 16px; border:none; border-radius:8px; background:var(--primary);
+      color:#fff; font-weight:600; cursor:pointer; }
     button.secondary{ background:#5f6368; }
     button.ghost{ background:#e9eef6; color:#174ea6; }
-    #app { display:none; }
-    .top-info { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
-    .pill { background:#eef3fd; color:#174ea6; padding:6px 10px; border-radius:999px; font-size:14px; }
-    .chat-wrap { position:relative; border:1px solid #e3e6ea; border-radius:10px; overflow:hidden; }
-    iframe { width:100%; height:72vh; min-height:520px; border:0; display:block; background:#fff; }
+    #app{ display:none; }
+    .pill{ background:#eef3fd; color:#174ea6; padding:6px 10px; border-radius:999px; font-size:14px; display:inline-block; margin-bottom:10px; }
 
-    /* ====== OVERLAYS che phần thừa trong tlk.io ====== */
-    /* Che vùng trên cùng (form "Wanna join?") */
+    .chat-wrap{ position:relative; border:1px solid #e3e6ea; border-radius:10px; overflow:hidden; }
+    iframe{ width:100%; height:72vh; min-height:520px; border:0; display:block; background:#fff; }
+
+    /* ====== OVERLAYS: chỉ che header + cột phải, không che join box & đáy ====== */
+    /* Che header tlk (đám mây, title) nhưng để lộ khung Join ở giữa */
     .ov-top{
       position:absolute; left:0; right:0; top:0;
-      height:200px;           /* tăng/giảm nếu cần 180–240 */
-      background:#fff; z-index:3; pointer-events:auto;
-      box-shadow: 0 10px 10px -10px rgba(0,0,0,.15);
+      height:70px;                  /* nhỏ lại để thấy khung Join */
+      background:#fff; z-index:3; pointer-events:none;
+      box-shadow: 0 8px 10px -10px rgba(0,0,0,.12);
     }
     /* Che cột phải (online, branding, patron…) */
     .ov-right{
       position:absolute; top:0; right:0; bottom:0;
-      width:min(260px, 24vw);   /* chỉnh 220–300px tùy màn hình */
+      width:min(260px, 24vw);       /* chỉnh 220–300 nếu còn hở */
       background:#fff; z-index:2; pointer-events:none;
-      box-shadow: -8px 0 10px -10px rgba(0,0,0,.15);
-    }
-    /* Che chân trang tlk.io (nếu có) */
-    .ov-bottom{
-      position:absolute; left:0; right:0; bottom:0;
-      height:110px; background:#fff; z-index:2; pointer-events:none;
-      box-shadow: 0 -8px 10px -10px rgba(0,0,0,.12);
+      box-shadow: -8px 0 10px -10px rgba(0,0,0,.12);
     }
-
-    footer { margin-top:auto; text-align:center; color:#6c727a; font-size:13px; padding:16px; }
+    /* KHÔNG dùng ov-bottom để giữ ô nhập chat ở đáy */
+    footer{ margin-top:auto; text-align:center; color:#6c727a; font-size:13px; padding:16px; }
   </style>
 </head>
 <body>
   <header>💬 Chat CVNSS4.0</header>
 
-  <!-- Màn hình nhập tên + tạo phòng -->
+  <!-- Cửa vào: nhập tên + tạo phòng riêng -->
   <section id="gate" class="card">
-    <h2>Tham gia phòng chat ngay</h2>
+    <h2>Tham gia phòng chat</h2>
     <div class="row">
       <input id="nickname" type="text" placeholder="Nhập tên của bạn…" />
       <button id="goBtn">Vào Chat</button>
     </div>
+    <div style="margin-top:8px; color:#5f6368; font-size:14px;">
+      👉 Sau khi bấm <b>Vào Chat</b>, ô tên trong khung sẽ được điền sẵn — bạn chỉ cần nhấn <b>Enter</b> để join.
+    </div>
 
     <div style="margin-top:16px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
       <button class="ghost" id="mkRoom">✨ Tạo phòng bí mật</button>
@@ -79,14 +71,10 @@
 
   <!-- Khung chat -->
   <section id="app" class="card">
-    <div class="top-info">
-      <div id="roomPill" class="pill"></div>
-      <!-- Không hiển thị nick pill để khỏi thấy "Long" ở ngoài -->
-    </div>
+    <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="tlk" title="tlk.io chat"></iframe>
     </div>
   </section>
@@ -96,28 +84,21 @@
   </footer>
 
   <script>
-    // ── Params & state ──────────────────────────────────────────────
-    const q = new URLSearchParams(location.search);
-    let room = (q.get("room") || "cvnss4-0").trim().toLowerCase();
+    // Lấy room từ URL (?room=...), mặc định: cvnss4-0
+    const qs = new URLSearchParams(location.search);
+    let room = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
     document.getElementById('roomPill').textContent = "Phòng: " + room;
 
-    // ── Join flow (UI đi thẳng vào chat) ────────────────────────────
+    // Join: load iframe, prefill nickname (vẫn cần Enter 1 lần trong khung)
     document.getElementById('goBtn').onclick = () => {
       const name = (document.getElementById('nickname').value || "").trim() || "Guest";
       document.getElementById('gate').style.display = 'none';
       document.getElementById('app').style.display  = 'block';
-
-      // Nạp iframe — thêm nickname để prefill (nếu tlk.io còn hỗ trợ)
       const url = "https://tlk.io/" + encodeURIComponent(room) + "?nickname=" + encodeURIComponent(name);
       document.getElementById('tlk').src = url;
-
-      // Cuộn nhẹ sau 2s để che kỹ form, nếu layout tlk thay đổi
-      setTimeout(() => {
-        try { document.getElementById('tlk').contentWindow.scrollTo(0, 260); } catch(e) {}
-      }, 2000);
     };
 
-    // ── Tạo phòng bí mật và copy link ───────────────────────────────
+    // Tạo phòng bí mật & copy link
     document.getElementById('mkRoom').onclick = () => {
       const rnd = Math.random().toString(36).slice(2,8);
       const newRoom = `cvnss4-0-${rnd}`;