Hugging Face's logo

Spaces:
CVNSS
/
Chat
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +102 -126
index.html CHANGED
@@ -1,155 +1,131 @@
1
  <!DOCTYPE html>
2
  <html lang="vi">
3
  <head>
4
- <meta charset="UTF-8">
 
5
  <title>Chat CVNSS4.0</title>
6
  <style>
7
- :root {
8
- --primary:#1a73e8;
9
- --bg:#f8f9fa;
10
- --text:#202124;
11
- }
12
  body {
13
- margin:0; font-family: "Google Sans", Arial, sans-serif;
14
- background:var(--bg); color:var(--text);
15
- display:flex; flex-direction:column; align-items:center;
16
- min-height:100vh;
17
- }
18
- header {
19
- width:100%; text-align:center;
20
- padding:20px; background:var(--primary); color:white;
21
- font-size:22px; font-weight:500;
22
- box-shadow:0 2px 6px rgba(0,0,0,0.1);
23
  }
24
- #login, #chat-wrapper {
25
- margin-top:40px;
26
- background:white; padding:30px;
27
- border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.1);
28
- width:90%; max-width:700px;
29
  }
30
- h2 { margin-top:0; font-weight:500; }
31
- input {
32
- padding:12px; width:70%; font-size:16px;
33
- border:1px solid #dadce0; border-radius:8px;
34
- outline:none;
35
  }
36
- input:focus { border-color:var(--primary); }
37
- button {
38
- padding:12px 20px; font-size:16px;
39
- margin-left:10px; border:none; border-radius:8px;
40
- background:var(--primary); color:white;
41
- cursor:pointer; font-weight:500;
42
- transition: background 0.2s;
43
- }
44
- button:hover { background:#0b5ed7; }
45
- #chat-wrapper { display:none; }
46
- iframe {
47
- border:none; width:100%; height:600px;
48
- border-radius:8px; margin-top:15px;
49
  }
 
 
 
 
 
 
 
 
50
  .overlay {
51
- position:absolute; top:0; left:0; right:0;
52
- height:100px; background:white; z-index:10;
53
- }
54
- footer {
55
- margin-top:auto; background:#f1f3f4; width:100%;
56
- text-align:center; padding:12px; font-size:14px; color:#5f6368;
57
- }
58
- .link-box {
59
- margin-top:15px; padding:10px;
60
- background:#f1f3f4; border-radius:6px;
61
- font-size:14px; word-break:break-all;
62
- display:flex; justify-content:space-between; align-items:center;
63
- flex-wrap: wrap;
64
- }
65
- .copy-btn {
66
- background:#34a853; margin-left:10px;
67
- }
68
- .copy-btn:hover { background:#2c8a42; }
69
- #qrcode { margin-top:10px; text-align:center; }
70
- .credit {
71
- margin-top:20px; font-size:13px; color:#777;
72
- text-align:center; font-style:italic;
73
  }
 
 
74
  </style>
75
  </head>
76
  <body>
 
77
 
78
- <header>💬 Chat CVNSS4.0</header>
79
-
80
- <div id="login">
81
- <h2>Tham gia phòng chat</h2>
82
- <input type="text" id="nickname" placeholder="Nhập tên của bạn...">
83
- <button onclick="joinChat()">Vào Chat</button>
84
- <div style="margin-top:20px;">
85
- <button onclick="createRoom()">✨ Tạo phòng bí mật</button>
86
- <div id="roomLink" class="link-box" style="display:none;">
87
- <span id="linkText"></span>
88
- <button class="copy-btn" onclick="copyLink()">📋 Copy</button>
89
  </div>
90
- <div id="qrcode"></div>
91
- </div>
92
- </div>
93
-
94
- <div id="chat-wrapper">
95
- <h2 id="roomTitle"></h2>
96
- <div class="chat-frame" style="position:relative;">
97
- <div class="overlay"></div>
98
- <iframe id="chat-frame"></iframe>
99
- </div>
100
- </div>
101
-
102
- <footer>
103
- Đóng tab là xóa hết dữ liệu ✅
104
- <div class="credit">Nguồn: Sản phẩm thử nghiệm của Team CVNSS4.0</div>
105
- </footer>
106
 
107
- <!-- QRCode.js CDN -->
108
- <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
109
- <script>
110
- let urlParams = new URLSearchParams(window.location.search);
111
- let room = urlParams.get("room") || "cvnss4-0";
112
- let currentLink = "";
113
 
114
- function joinChat() {
115
- const name = document.getElementById("nickname").value.trim();
116
- if (!name) { alert("Vui lòng nhập tên!"); return; }
 
 
 
 
 
 
 
 
 
117
 
118
- document.getElementById("login").style.display = "none";
119
- document.getElementById("chat-wrapper").style.display = "block";
 
120
 
121
- document.getElementById("roomTitle").innerText = "Phòng: " + room;
 
 
 
 
 
 
 
122
 
123
- const iframe = document.getElementById("chat-frame");
124
- iframe.src = "https://tlk.io/" + room + "?nickname=" + encodeURIComponent(name);
125
- }
126
 
127
- function createRoom() {
128
- const rand = Math.random().toString(36).substring(2,8);
129
- const newRoom = "cvnss4-0-" + rand;
130
- currentLink = window.location.origin + window.location.pathname + "?room=" + newRoom;
 
 
 
131
 
132
- // Hiển thị link
133
- const box = document.getElementById("roomLink");
134
- const text = document.getElementById("linkText");
135
- text.textContent = "🔗 " + currentLink;
136
- box.style.display = "flex";
137
 
138
- // Tạo QR code
139
- const qrBox = document.getElementById("qrcode");
140
- qrBox.innerHTML = "";
141
- QRCode.toCanvas(currentLink, { width: 200 }, function (err, canvas) {
142
- if (!err) qrBox.appendChild(canvas);
143
- });
144
- }
145
 
146
- function copyLink() {
147
- if (!currentLink) return;
148
- navigator.clipboard.writeText(currentLink).then(() => {
149
- alert("✅ Link đã được copy vào clipboard!");
150
- });
151
- }
152
- </script>
 
 
 
 
 
153
 
 
 
 
 
 
154
  </body>
155
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="vi">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
6
  <title>Chat CVNSS4.0</title>
7
  <style>
8
+ :root { --primary:#1a73e8; --bg:#f5f6f8; --text:#202124; }
9
+ * { box-sizing: border-box; }
 
 
 
10
  body {
11
+ margin:0; font-family: Arial, "Segoe UI", system-ui, -apple-system, sans-serif;
12
+ background:var(--bg); color:var(--text); display:flex; flex-direction:column; min-height:100vh;
 
 
 
 
 
 
 
 
13
  }
14
+ header { background:var(--primary); color:#fff; padding:16px 20px; font-size:20px; font-weight:600; text-align:center; }
15
+ .card {
16
+ width: min(940px, 92vw); margin: 28px auto; background:#fff; border-radius:12px;
17
+ box-shadow:0 6px 18px rgba(0,0,0,.08); padding:22px;
 
18
  }
19
+ h2 { margin:0 0 14px 0; font-weight:600; }
20
+ .row { display:flex; gap:10px; flex-wrap:wrap; }
21
+ input[type="text"]{
22
+ flex:1 1 260px; padding:12px 14px; font-size:16px; border:1px solid #d6d9dd; border-radius:8px; outline: none;
 
23
  }
24
+ input[type="text"]:focus{ border-color:var(--primary); }
25
+ button{
26
+ padding:12px 16px; border:none; border-radius:8px; background:var(--primary); color:#fff;
27
+ font-weight:600; cursor:pointer;
 
 
 
 
 
 
 
 
 
28
  }
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">
53
+ <input id="nickname" type="text" placeholder="Nhập tên của bạn…" />
54
+ <button id="goBtn">Vào Chat</button>
 
 
 
 
 
55
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
 
57
+ <div style="margin-top:16px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
58
+ <button class="ghost" id="mkRoom">✨ Tạo phòng bí mật</button>
59
+ <span id="roomLink" style="display:none;"></span>
60
+ <button class="secondary" id="copyBtn" style="display:none;">📋 Copy link</button>
61
+ </div>
62
+ </section>
63
 
64
+ <!-- Khung chat -->
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>
76
 
77
+ <footer>
78
+ Nguồn: Sản phẩm thử nghiệm của Team CVNSS4.0 • Đóng tab là xóa hết dữ liệu ✅
79
+ </footer>
80
 
81
+ <script>
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}`;
116
+ const link = `${location.origin}${location.pathname}?room=${newRoom}`;
117
+ const linkEl = document.getElementById('roomLink');
118
+ linkEl.textContent = link;
119
+ linkEl.style.display = 'inline';
120
+ const copyBtn = document.getElementById('copyBtn');
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>