Hugging Face's logo

Spaces:
CVNSS
/
Chat
Running

App Files Community
CVNSS commited on
Commit
eee3a5b
·
verified ·
1 Parent(s): 139f80b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +36 -33
index.html CHANGED
@@ -29,24 +29,40 @@
29
  button.secondary{ background:#5f6368; }
30
  button.ghost{ background:#e9eef6; color:#174ea6; }
31
  #app { display:none; }
32
- .top-info { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; }
33
  .pill { background:#eef3fd; color:#174ea6; padding:6px 10px; border-radius:999px; font-size:14px; }
34
  .chat-wrap { position:relative; border:1px solid #e3e6ea; border-radius:10px; overflow:hidden; }
35
  iframe { width:100%; height:72vh; min-height:520px; border:0; display:block; background:#fff; }
36
- /* Lớp che: ẩn hoàn toàn phần “Wanna join? …” của tlk.io */
37
- .overlay {
38
- position:absolute; left:0; right:0; top:0; height:180px; /* nếu còn lộ, tăng lên 200–240 */
39
- background:#fff; z-index:3; pointer-events:auto; /* chặn click vào form gốc */
40
- box-shadow: 0 10px 10px -10px rgba(0,0,0,.15); /* tạo viền mờ chuyển tiếp */
 
 
 
 
 
 
 
 
 
 
41
  }
42
- .overlay.hidden{ display:none; }
 
 
 
 
 
 
43
  footer { margin-top:auto; text-align:center; color:#6c727a; font-size:13px; padding:16px; }
44
  </style>
45
  </head>
46
  <body>
47
  <header>💬 Chat CVNSS4.0</header>
48
 
49
- <!-- Màn hình nhập tên -->
50
  <section id="gate" class="card">
51
  <h2>Tham gia phòng chat ngay</h2>
52
  <div class="row">
@@ -65,11 +81,12 @@
65
  <section id="app" class="card">
66
  <div class="top-info">
67
  <div id="roomPill" class="pill"></div>
68
- <div id="nickPill" class="pill"></div>
69
- <button class="ghost" id="toggleOverlay">Hiện form gốc (khi cần)</button>
70
  </div>
71
  <div class="chat-wrap">
72
- <div id="mask" class="overlay"></div>
 
 
73
  <iframe id="tlk" title="tlk.io chat"></iframe>
74
  </div>
75
  </section>
@@ -82,34 +99,25 @@
82
  // ── Params & state ──────────────────────────────────────────────
83
  const q = new URLSearchParams(location.search);
84
  let room = (q.get("room") || "cvnss4-0").trim().toLowerCase();
85
- const gate = document.getElementById('gate');
86
- const app = document.getElementById('app');
87
- const tlk = document.getElementById('tlk');
88
- const mask = document.getElementById('mask');
89
-
90
- // Hiển thị thông tin phòng
91
  document.getElementById('roomPill').textContent = "Phòng: " + room;
92
 
93
- // ── Join flow (UI “đi thẳng vào chat”) ──────────────────────────
94
  document.getElementById('goBtn').onclick = () => {
95
  const name = (document.getElementById('nickname').value || "").trim() || "Guest";
96
- // Hiển thị UI chat ngay, che phần đầu của tlk.io
97
- gate.style.display = 'none';
98
- app.style.display = 'block';
99
- document.getElementById('nickPill').textContent = "Tên: " + name;
100
 
101
- // Nạp iframe — tlk.io vẫn cần join, nhưng UI đã bị che
102
- // Thêm nickname vào query để điền sẵn vào ô input bên trong (nếu tlk.io còn hỗ trợ)
103
  const url = "https://tlk.io/" + encodeURIComponent(room) + "?nickname=" + encodeURIComponent(name);
104
- tlk.src = url;
105
 
106
- // Mẹo nhỏ: sau 2 giây cuộn nhẹ iframe để lộ vùng chat (nếu form gốc cao hơn dự kiến)
107
  setTimeout(() => {
108
- try { tlk.contentWindow.scrollTo(0, 260); } catch(e) { /* cross-domain: ignore */ }
109
  }, 2000);
110
  };
111
 
112
- // ── Tạo phòng bí mật và hiển thị link + copy ────────────────────
113
  document.getElementById('mkRoom').onclick = () => {
114
  const rnd = Math.random().toString(36).slice(2,8);
115
  const newRoom = `cvnss4-0-${rnd}`;
@@ -121,11 +129,6 @@
121
  copyBtn.style.display = 'inline-block';
122
  copyBtn.onclick = () => navigator.clipboard.writeText(link).then(() => alert("✅ Đã copy link phòng!"));
123
  };
124
-
125
- // ── Bật/tắt lớp che (trường hợp cần thao tác form gốc) ──────────
126
- document.getElementById('toggleOverlay').onclick = () => {
127
- mask.classList.toggle('hidden');
128
- };
129
  </script>
130
  </body>
131
  </html>
 
29
  button.secondary{ background:#5f6368; }
30
  button.ghost{ background:#e9eef6; color:#174ea6; }
31
  #app { display:none; }
32
+ .top-info { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
33
  .pill { background:#eef3fd; color:#174ea6; padding:6px 10px; border-radius:999px; font-size:14px; }
34
  .chat-wrap { position:relative; border:1px solid #e3e6ea; border-radius:10px; overflow:hidden; }
35
  iframe { width:100%; height:72vh; min-height:520px; border:0; display:block; background:#fff; }
36
+
37
+ /* ====== OVERLAYS che phần thừa trong tlk.io ====== */
38
+ /* Che vùng trên cùng (form "Wanna join?") */
39
+ .ov-top{
40
+ position:absolute; left:0; right:0; top:0;
41
+ height:200px; /* tăng/giảm nếu cần 180–240 */
42
+ background:#fff; z-index:3; pointer-events:auto;
43
+ box-shadow: 0 10px 10px -10px rgba(0,0,0,.15);
44
+ }
45
+ /* Che cột phải (online, branding, patron…) */
46
+ .ov-right{
47
+ position:absolute; top:0; right:0; bottom:0;
48
+ width:min(260px, 24vw); /* chỉnh 220–300px tùy màn hình */
49
+ background:#fff; z-index:2; pointer-events:none;
50
+ box-shadow: -8px 0 10px -10px rgba(0,0,0,.15);
51
  }
52
+ /* Che chân trang tlk.io (nếu có) */
53
+ .ov-bottom{
54
+ position:absolute; left:0; right:0; bottom:0;
55
+ height:110px; background:#fff; z-index:2; pointer-events:none;
56
+ box-shadow: 0 -8px 10px -10px rgba(0,0,0,.12);
57
+ }
58
+
59
  footer { margin-top:auto; text-align:center; color:#6c727a; font-size:13px; padding:16px; }
60
  </style>
61
  </head>
62
  <body>
63
  <header>💬 Chat CVNSS4.0</header>
64
 
65
+ <!-- Màn hình nhập tên + tạo phòng -->
66
  <section id="gate" class="card">
67
  <h2>Tham gia phòng chat ngay</h2>
68
  <div class="row">
 
81
  <section id="app" class="card">
82
  <div class="top-info">
83
  <div id="roomPill" class="pill"></div>
84
+ <!-- Không hiển thị nick pill để khỏi thấy "Long" ở ngoài -->
 
85
  </div>
86
  <div class="chat-wrap">
87
+ <div class="ov-top"></div>
88
+ <div class="ov-right"></div>
89
+ <div class="ov-bottom"></div>
90
  <iframe id="tlk" title="tlk.io chat"></iframe>
91
  </div>
92
  </section>
 
99
  // ── Params & state ──────────────────────────────────────────────
100
  const q = new URLSearchParams(location.search);
101
  let room = (q.get("room") || "cvnss4-0").trim().toLowerCase();
 
 
 
 
 
 
102
  document.getElementById('roomPill').textContent = "Phòng: " + room;
103
 
104
+ // ── Join flow (UI đi thẳng vào chat) ────────────────────────────
105
  document.getElementById('goBtn').onclick = () => {
106
  const name = (document.getElementById('nickname').value || "").trim() || "Guest";
107
+ document.getElementById('gate').style.display = 'none';
108
+ document.getElementById('app').style.display = 'block';
 
 
109
 
110
+ // Nạp iframe — thêm nickname để prefill (nếu tlk.io còn hỗ trợ)
 
111
  const url = "https://tlk.io/" + encodeURIComponent(room) + "?nickname=" + encodeURIComponent(name);
112
+ document.getElementById('tlk').src = url;
113
 
114
+ // Cuộn nhẹ sau 2s để che kỹ form, nếu layout tlk thay đổi
115
  setTimeout(() => {
116
+ try { document.getElementById('tlk').contentWindow.scrollTo(0, 260); } catch(e) {}
117
  }, 2000);
118
  };
119
 
120
+ // ── Tạo phòng bí mật và copy link ───────────────────────────────
121
  document.getElementById('mkRoom').onclick = () => {
122
  const rnd = Math.random().toString(36).slice(2,8);
123
  const newRoom = `cvnss4-0-${rnd}`;
 
129
  copyBtn.style.display = 'inline-block';
130
  copyBtn.onclick = () => navigator.clipboard.writeText(link).then(() => alert("✅ Đã copy link phòng!"));
131
  };
 
 
 
 
 
132
  </script>
133
  </body>
134
  </html>