Update index.html

index.html

@@ -6,21 +6,18 @@
 <title>Chat CVNSS4.0</title>
 <style>
   :root{
-    /* Light + tham số cắt header/panel của tlk.io */
-    --bg:#f7f9fc; --card:#ffffff; --text:#1f2937; --muted:#6b7280;
+    /* Light, tối giản */
+    --bg:#f7f9fc; --card:#fff; --text:#1f2937; --muted:#6b7280;
     --primary:#1a73e8; --danger:#d93025; --accent:#ffeb3b;
-    --mask-top: 220px;                               /* CẮT header (đã tăng để che icon mây + thanh xanh) */
-    --mask-right: clamp(220px, 24vw, 300px);         /* Ẩn panel phải */
+    /* CẮT phần đầu tlk.io + che cột phải */
+    --mask-top:220px;                          /* chỉnh bằng nút ± hoặc ?mask= */
+    --mask-right:clamp(220px,24vw,300px);      /* cột phải */
   }
   *{box-sizing:border-box}
-  body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
-       background:var(--bg);color:var(--text);display:flex;flex-direction:column;min-height:100vh}
+  body{margin:0;font-family: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:700;background:#fff;border-bottom:1px solid #e5e7eb}
-
-  .card{width:min(980px,94vw);margin:22px auto;background:var(--card);
-        border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.06);padding:18px}
-  h2{margin:0 0 6px}
-  .muted{color:#6b7280}
+  .card{width:min(980px,94vw);margin:22px auto;background:var(--card);border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.06);padding:18px}
+  h2{margin:0 0 6px} .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 #d1d5db;border-radius:10px}
   input[type=text]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,115,232,.15)}
@@ -30,32 +27,26 @@
   .btn-secondary{background:#374151;color:#fff}
   .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
 
-  /* Trạng thái gọn */
+  /* Status gọn */
   .status{display:none;align-items:center;gap:10px;padding:10px 12px;border:1px dashed #d1d5db;border-radius:10px;margin-bottom:10px;background:#f9fafb}
   .me-pill{display:inline-flex;align-items:center;gap:6px;background:#fff3cd;color:#7a5b00;border:1px solid #ffe8a1;padding:6px 12px;border-radius:999px;font-weight:800}
   .room-pill{display:inline-block;background:#e8f0fe;color:#174ea6;padding:6px 10px;border-radius:999px}
 
-  /* Khung chat: kỹ thuật MASK (không overlay che đầu) */
-  .chat-wrap{
-    position:relative; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; background:#fff;
-    padding-top: var(--mask-top);                /* chừa chỗ phần bị dịch âm */
-  }
-  #chatFrame{
-    display:block; width:100%; height:72vh; min-height:640px; border:0; background:#fff;
-    transform: translateY(calc(-1 * var(--mask-top))); /* đẩy phần header ra ngoài khung nhìn */
-  }
+  /* Khung chat dùng MASK (không overlay che phần đầu → không giật khi Enter) */
+  .chat-wrap{position:relative;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;background:#fff;padding-top:var(--mask-top)}
+  #chatFrame{display:block;width:100%;height:72vh;min-height:640px;border:0;background:#fff;transform:translateY(calc(-1 * var(--mask-top)))}
 
-  /* Ẩn panel phải (không chặn click khu trung tâm/đáy) */
-  .mask-right{
-    position:absolute; top:0; right:0; bottom:0; width:var(--mask-right);
-    background:#fff; pointer-events:none; box-shadow:-8px 0 10px -10px rgba(0,0,0,.12); z-index:2;
-  }
+  /* Che cột phải (không chặn click phần chat) */
+  .mask-right{position:absolute;top:0;right:0;bottom:0;width:var(--mask-right);background:#fff;pointer-events:none;box-shadow:-8px 0 10px -10px rgba(0,0,0,.12);z-index:2}
 
   /* Gợi ý vùng nhập ở đáy – không chặn bấm */
-  .hint-bottom{
-    position:absolute; left:0; right:var(--mask-right); bottom:0; height:110px; pointer-events:none; z-index:1;
-    background:radial-gradient(120% 120% at 50% 100%, rgba(26,115,232,.08) 0%, rgba(26,115,232,.03) 40%, rgba(255,255,255,0) 75%);
-  }
+  .hint-bottom{position:absolute;left:0;right:var(--mask-right);bottom:0;height:110px;pointer-events:none;z-index:1;background:radial-gradient(120% 120% at 50% 100%, rgba(26,115,232,.08) 0%, rgba(26,115,232,.03) 40%, rgba(255,255,255,0) 75%)}
+
+  /* Điều khiển tinh chỉnh mask-top */
+  .mask-ctrl{position:absolute;top:8px;left:8px;display:flex;gap:6px;z-index:5;opacity:.25;transition:opacity .15s}
+  .mask-ctrl:hover{opacity:1}
+  .mask-ctrl button{padding:6px 10px;border:1px solid #e5e7eb;background:#fff;border-radius:8px;font-weight:700}
+  .mask-ctrl .val{padding:6px 8px;border:1px solid #e5e7eb;background:#fff;border-radius:8px;min-width:64px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
 
   /* Link phòng tự ẩn */
   .links{display:none;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
@@ -68,7 +59,6 @@
   .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#111827;color:#f9fafb;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:#6b7280;font-size:13px;padding:16px}
-
   @media (max-width:820px){ :root{ --mask-right:0px } }
 </style>
 </head>
@@ -77,18 +67,15 @@
 
 <section id="login" class="card">
   <h2>Tham gia phòng chat</h2>
-  <p class="muted">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>
-
+  <p class="muted">Nhập tên → <b>Vào Chat</b> → *(tuỳ chọn)* <b>✨ Tạo phòng bí mật</b>.</p>
   <div class="row" style="margin-top:8px">
     <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="link-badge mono"></span>
@@ -103,10 +90,16 @@
   </div>
 
   <div class="chat-wrap">
+    <!-- tinh chỉnh mask-top -->
+    <div class="mask-ctrl" role="group" aria-label="Trim header">
+      <button id="maskMinus" title="Ẩn ít hơn">−10</button>
+      <div class="val" id="maskVal">220px</div>
+      <button id="maskPlus" title="Ẩn nhiều hơn">+10</button>
+    </div>
+
     <div class="mask-right"></div>
     <div class="hint-bottom"></div>
-    <iframe id="chatFrame" title="tlk.io chat" referrerpolicy="no-referrer"
-            allow="clipboard-read; clipboard-write"></iframe>
+    <iframe id="chatFrame" title="tlk.io chat" referrerpolicy="no-referrer" allow="clipboard-read; clipboard-write"></iframe>
   </div>
 
   <div id="errorBox" class="error-box">
@@ -120,9 +113,8 @@
 
 <script>
 (() => {
-  // ===== State =====
-  const qs   = new URLSearchParams(location.search);
-  let room   = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
+  const qs = new URLSearchParams(location.search);
+  let room = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
   const base = `${location.origin}${location.pathname}`;
 
   const $ = id => document.getElementById(id);
@@ -131,21 +123,29 @@
     name: $("nickname"), join: $("joinBtn"), newRoom: $("newRoomBtn"),
     linkArea: $("linkArea"), roomUrl: $("roomUrl"), copy: $("copyBtn"),
     hint: $("roomHint"), me: $("meName"), pill: $("roomPill"),
-    status: $("statusBar"), toast: $("toast"), err: $("errorBox"), openNew: $("openNew")
+    status: $("statusBar"), toast: $("toast"), err: $("errorBox"), openNew: $("openNew"),
+    maskVal: $("maskVal"), maskMinus: $("maskMinus"), maskPlus: $("maskPlus")
   };
 
-  // ===== Cho phép tinh chỉnh nhanh qua URL =====
-  const maskTop = parseInt(qs.get("mask"), 10);
-  if (!isNaN(maskTop)) document.documentElement.style.setProperty('--mask-top', maskTop + 'px');
-  const maskRight = parseInt(qs.get("maskr"), 10);
-  if (!isNaN(maskRight)) document.documentElement.style.setProperty('--mask-right', maskRight + 'px');
-
   const toast = m => { els.toast.textContent=m; els.toast.classList.add("show"); setTimeout(()=>els.toast.classList.remove("show"),1400); };
   const getName = () => (els.name.value || localStorage.getItem("cvnss4_name") || "Guest").trim() || "Guest";
   const setName = n => { els.me.textContent=n; localStorage.setItem("cvnss4_name", n); };
   const syncRoomUI = () => { els.pill.textContent=room; els.hint.textContent=`(đang ở phòng ${room})`; };
   const tlkUrl = n => `https://tlk.io/${encodeURIComponent(room)}?nickname=${encodeURIComponent(n)}#embed`;
 
+  // --- mask-top: từ URL ?mask=, hoặc localStorage, hoặc mặc định ---
+  function getMaskTopInit(){
+    const q = parseInt(qs.get("mask"),10);
+    if(!isNaN(q)) return q;
+    const saved = parseInt(localStorage.getItem("cvnss4_maskTop"),10);
+    return !isNaN(saved) ? saved : 220;
+  }
+  function applyMaskTop(px){
+    document.documentElement.style.setProperty('--mask-top', px+'px');
+    els.maskVal.textContent = px+'px';
+    localStorage.setItem("cvnss4_maskTop", String(px));
+  }
+
   function mountChat(){
     const name = getName(); setName(name); syncRoomUI();
     els.status.style.display = "flex";
@@ -153,7 +153,6 @@
     const url = tlkUrl(name);
     els.frame.src = url; els.openNew.href = url; els.err.style.display = "none";
 
-    // Watchdog: nếu 6s vẫn trắng → hiện fallback
     const timer = setTimeout(()=>{ els.err.style.display = "flex"; }, 6000);
     els.frame.addEventListener("load", ()=> clearTimeout(timer), {once:true});
   }
@@ -164,22 +163,17 @@
     mountChat();
   }
 
+  // Events
   els.join.addEventListener("click", enterChat);
   els.name.addEventListener("keydown", e => { if(e.key === "Enter") enterChat(); });
 
-  // Tạo phòng bí mật + Copy tự ẩn
   els.newRoom.addEventListener("click", async ()=>{
     room = `cvnss4-0-${Math.random().toString(36).slice(2,8)}`;
-    syncRoomUI();
-    history.replaceState(null,"",`?room=${room}`);
-
+    syncRoomUI(); history.replaceState(null,"",`?room=${room}`);
     const link = `${base}?room=${room}`;
-    els.roomUrl.textContent = link;
-    els.linkArea.style.display = "flex";
-
+    els.roomUrl.textContent = link; els.linkArea.style.display = "flex";
     try{ await navigator.clipboard?.writeText?.(link); toast("✅ Link đã copy!"); }catch(_){}
     setTimeout(()=>{ if(els.linkArea.style.display!=="none") els.linkArea.style.display="none"; }, 9000);
-
     els.copy.onclick = async ()=>{
       try{
         await navigator.clipboard?.writeText?.(link);
@@ -190,7 +184,13 @@
     };
   });
 
-  // Prefill + auto-enter nếu có tên sẵn
+  // Mask controls
+  let maskTop = getMaskTopInit();
+  applyMaskTop(maskTop);
+  els.maskMinus.onclick = ()=>{ maskTop = Math.max(100, maskTop-10); applyMaskTop(maskTop); };
+  els.maskPlus.onclick  = ()=>{ maskTop = Math.min(400, maskTop+10); applyMaskTop(maskTop); };
+
+  // Prefill + auto-enter
   const last = localStorage.getItem("cvnss4_name"); if(last) els.name.value = last;
   syncRoomUI(); els.name.focus({preventScroll:true});
   if (qs.get("room") && (last || els.name.value.trim() !== "")) enterChat();