Hugging Face's logo

Spaces:
CVNSS
/
Chat
Running

App Files Community
CVNSS commited on
Commit
f89aa8c
·
verified ·
1 Parent(s): 7230516

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +129 -132
index.html CHANGED
@@ -1,151 +1,148 @@
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{ width:min(940px,92vw); margin:28px auto; background:#fff; border-radius:12px;
16
- box-shadow:0 6px 18px rgba(0,0,0,.08); padding:22px; }
17
- h2{ margin:0 0 14px 0; font-weight:600; }
18
- .row{ display:flex; gap:10px; flex-wrap:wrap; }
19
- input[type="text"]{ flex:1 1 260px; padding:12px 14px; font-size:16px;
20
- border:1px solid #d6d9dd; border-radius:8px; outline:none; }
21
- input[type="text"]:focus{ border-color:var(--primary); }
22
- button{ padding:12px 16px; border:none; border-radius:8px; background:var(--primary);
23
- color:#fff; font-weight:600; cursor:pointer; }
24
- button.secondary{ background:#5f6368; }
25
- button.ghost{ background:#e9eef6; color:#174ea6; }
26
- #app{ display:none; }
27
- .pill{ background:#eef3fd; color:#174ea6; padding:6px 10px; border-radius:999px; font-size:14px; display:inline-block; margin-bottom:10px; }
28
-
29
- .chat-wrap{ position:relative; border:1px solid #e3e6ea; border-radius:10px; overflow:hidden; }
30
- iframe{ width:100%; height:72vh; min-height:520px; border:0; display:block; background:#fff; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
 
32
- /* ====== OVERLAYS ====== */
33
- /* Che header tlk: sẽ điều chỉnh cao/thấp theo chế độ host/guest bằng JS */
34
- .ov-top{
35
  position:absolute; left:0; right:0; top:0;
36
- height:70px; /* guest mặc định: để lộ ô Join */
37
- background:#fff; z-index:3; pointer-events:none;
38
- box-shadow: 0 8px 10px -10px rgba(0,0,0,.12);
39
- transition: height .15s ease;
40
  }
41
- /* Che cột phải (online, branding, patron…) cho cả host/guest */
42
- .ov-right{
43
  position:absolute; top:0; right:0; bottom:0;
44
- width:min(260px, 24vw);
45
- background:#fff; z-index:2; pointer-events:none;
46
- box-shadow: -8px 0 10px -10px rgba(0,0,0,.12);
 
 
 
 
47
  }
48
 
49
- footer{ margin-top:auto; text-align:center; color:#6c727a; font-size:13px; padding:16px; }
50
- .linkWrap{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; }
51
- .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#f1f3f4; padding:6px 8px; border-radius:6px; }
 
 
 
 
52
  </style>
53
  </head>
54
  <body>
55
- <header>💬 Chat CVNSS4.0</header>
56
-
57
- <!-- Cửa vào: nhập tên + tạo phòng riêng -->
58
- <section id="gate" class="card">
59
- <h2>Tham gia phòng chat</h2>
60
- <div class="row">
61
- <input id="nickname" type="text" placeholder="Nhập tên của bạn…" />
62
- <button id="goBtn">Vào Chat</button>
63
- </div>
64
- <div id="hint" style="margin-top:8px; color:#5f6368; font-size:14px;">
65
- 👉 Nếu là <b>khách</b>, sau khi vào hãy nhấn <b>Enter</b> trong khung để Join.
 
 
 
 
 
 
 
 
66
  </div>
67
-
68
- <div style="margin-top:16px;">
69
- <button class="ghost" id="mkRoom">✨ Tạo phòng bí mật</button>
70
- <div id="links" style="display:none; margin-top:10px;">
71
- <div class="linkWrap">
72
- <span>🔗 Link Host:</span>
73
- <span id="hostLink" class="mono"></span>
74
- <button class="secondary" id="copyHost">📋 Copy</button>
75
- </div>
76
- <div class="linkWrap">
77
- <span>🔗 Link Guest:</span>
78
- <span id="guestLink" class="mono"></span>
79
- <button class="secondary" id="copyGuest">📋 Copy</button>
80
- </div>
81
- </div>
82
- </div>
83
- </section>
84
-
85
- <!-- Khung chat -->
86
- <section id="app" class="card">
87
- <span id="roomPill" class="pill"></span>
88
- <div class="chat-wrap">
89
- <div id="ovTop" class="ov-top"></div>
90
- <div class="ov-right"></div>
91
- <iframe id="tlk" title="tlk.io chat"></iframe>
92
- </div>
93
- </section>
94
-
95
- <footer>
96
- Nguồn: Sản phẩm thử nghiệm của Team CVNSS4.0 • Đóng tab là xóa hết dữ liệu ✅
97
- </footer>
98
-
99
- <script>
100
- // ── Params & state ──────────────────────────────────────────────
101
- const qs = new URLSearchParams(location.search);
102
- let room = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
103
- let view = (qs.get("view") || "guest").toLowerCase(); // 'host' | 'guest'
104
- document.getElementById('roomPill').textContent = "Phòng: " + room;
105
-
106
- // Hiển thị gợi ý theo chế độ
107
- if (view === "host") {
108
- document.getElementById('hint').textContent = "Bạn đang ở chế độ Host: khung Join sẽ được che để giao diện gọn gàng.";
109
- }
110
-
111
- // ── Join flow ───────────────────────────────────────────────────
112
- document.getElementById('goBtn').onclick = () => {
113
- const name = (document.getElementById('nickname').value || "").trim() || "Guest";
114
- document.getElementById('gate').style.display = 'none';
115
- document.getElementById('app').style.display = 'block';
116
-
117
- // Điều chỉnh overlay-top theo chế độ:
118
- // - Host: che cao (ẩn form Join), trông như vào thẳng
119
- // - Guest: che thấp (để lộ form Join, người nhận link có thể nhấn Enter)
120
- const ovTop = document.getElementById('ovTop');
121
- ovTop.style.height = (view === "host") ? "180px" : "70px";
122
-
123
- const url = "https://tlk.io/" + encodeURIComponent(room) + "?nickname=" + encodeURIComponent(name);
124
- document.getElementById('tlk').src = url;
125
-
126
- // Với host: cuộn nhẹ để đảm bảo phần chat lộ ngay
127
- if (view === "host") {
128
- setTimeout(() => {
129
- try { document.getElementById('tlk').contentWindow.scrollTo(0, 260); } catch(e) {}
130
- }, 1500);
131
- }
132
- };
133
-
134
- // ── Tạo phòng bí mật & sinh 2 link: host/guest ─────────────────
135
- document.getElementById('mkRoom').onclick = () => {
136
- const rnd = Math.random().toString(36).slice(2,8);
137
- const newRoom = `cvnss4-0-${rnd}`;
138
- const base = `${location.origin}${location.pathname}`;
139
- const host = `${base}?room=${newRoom}&view=host`;
140
- const guest = `${base}?room=${newRoom}&view=guest`;
141
-
142
- document.getElementById('links').style.display = 'block';
143
- document.getElementById('hostLink').textContent = host;
144
- document.getElementById('guestLink').textContent = guest;
145
-
146
- document.getElementById('copyHost').onclick = () => navigator.clipboard.writeText(host).then(()=>alert("✅ Đã copy Host link!"));
147
- document.getElementById('copyGuest').onclick = () => navigator.clipboard.writeText(guest).then(()=>alert("✅ Đã copy Guest link!"));
148
- };
149
- </script>
150
  </body>
151
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="vi">
3
  <head>
4
+ <meta charset="UTF-8">
 
5
  <title>Chat CVNSS4.0</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
  <style>
8
  :root { --primary:#1a73e8; --bg:#f5f6f8; --text:#202124; }
9
+ body {
10
+ margin:0; font-family: "Google Sans", Arial, sans-serif;
11
+ background:var(--bg); color:var(--text);
12
+ display:flex; flex-direction:column; min-height:100vh;
13
  }
14
+ header {
15
+ background:var(--primary); color:#fff; padding:16px;
16
+ text-align:center; font-size:20px; font-weight:600;
17
+ box-shadow:0 2px 6px rgba(0,0,0,0.1);
18
+ }
19
+ .card {
20
+ width:min(940px, 92vw); margin:30px auto;
21
+ background:#fff; border-radius:12px;
22
+ box-shadow:0 4px 12px rgba(0,0,0,0.1); padding:24px;
23
+ }
24
+ h2 { margin-top:0; }
25
+ .row { display:flex; gap:10px; flex-wrap:wrap; }
26
+ input[type="text"] {
27
+ flex:1 1 260px; padding:12px 14px; font-size:16px;
28
+ border:1px solid #dadce0; border-radius:8px;
29
+ }
30
+ input[type="text"]:focus { border-color:var(--primary); outline:none; }
31
+ button {
32
+ padding:12px 18px; border:none; border-radius:8px;
33
+ background:var(--primary); color:#fff;
34
+ font-size:16px; font-weight:600; cursor:pointer;
35
+ }
36
+ button:hover { background:#0b5ed7; }
37
+ .ghost { background:#e9eef6; color:#174ea6; }
38
+ .secondary { background:#5f6368; }
39
+ .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
40
+ #chat-box { display:none; }
41
+ .pill {
42
+ display:inline-block; background:#eef3fd; color:#174ea6;
43
+ padding:6px 10px; border-radius:999px; font-size:14px; margin-bottom:10px;
44
+ }
45
+ .chat-wrap { position:relative; border:1px solid #e0e3e7; border-radius:10px; overflow:hidden; }
46
+ iframe { width:100%; height:70vh; border:0; background:#fff; }
47
 
48
+ /* Overlays: che form Join + cột phải + footer tlk.io */
49
+ .ov-top {
 
50
  position:absolute; left:0; right:0; top:0;
51
+ height:200px; background:#fff; z-index:3; pointer-events:none;
52
+ box-shadow:0 6px 8px -6px rgba(0,0,0,0.15);
 
 
53
  }
54
+ .ov-right {
 
55
  position:absolute; top:0; right:0; bottom:0;
56
+ width:260px; background:#fff; z-index:2; pointer-events:none;
57
+ box-shadow:-6px 0 8px -6px rgba(0,0,0,0.15);
58
+ }
59
+ .ov-bottom {
60
+ position:absolute; left:0; right:0; bottom:0;
61
+ height:100px; background:#fff; z-index:2; pointer-events:none;
62
+ box-shadow:0 -6px 8px -6px rgba(0,0,0,0.15);
63
  }
64
 
65
+ .links { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
66
+ .link-line { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
67
+ .link-badge { background:#f1f3f4; padding:6px 8px; border-radius:6px; }
68
+ footer {
69
+ margin-top:auto; background:#f1f3f4; padding:14px;
70
+ text-align:center; font-size:13px; color:#6c727a;
71
+ }
72
  </style>
73
  </head>
74
  <body>
75
+ <header>💬 Chat CVNSS4.0</header>
76
+
77
+ <!-- Khối “tạo phòng” & “vào chat” -->
78
+ <div id="login" class="card">
79
+ <h2>Tham gia phòng chat</h2>
80
+ <div class="row" style="margin-bottom:10px;">
81
+ <input type="text" id="nickname" placeholder="Nhập tên của bạn…">
82
+ <button id="joinBtn">Vào Chat</button>
83
+ </div>
84
+
85
+ <div class="row">
86
+ <button class="ghost" id="newRoomBtn">✨ Tạo phòng bí mật</button>
87
+ </div>
88
+
89
+ <div id="linkArea" class="links" style="display:none;">
90
+ <div class="link-line">
91
+ <span>🔗 Link phòng:</span>
92
+ <span id="roomUrl" class="link-badge mono"></span>
93
+ <button class="secondary" id="copyBtn">📋 Copy</button>
94
  </div>
95
+ <div style="color:#5f6368; font-size:13px;">Gửi link này cho mọi người để cùng vào phòng.</div>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Khối chat -->
100
+ <div id="chat-box" class="card">
101
+ <span id="roomPill" class="pill"></span>
102
+ <div class="chat-wrap">
103
+ <div class="ov-top"></div>
104
+ <div class="ov-right"></div>
105
+ <div class="ov-bottom"></div>
106
+ <iframe id="chatFrame" title="tlk.io chat"></iframe>
107
+ </div>
108
+ </div>
109
+
110
+ <footer>
111
+ Nguồn: Sản phẩm thử nghiệm của Team CVNSS4.0 • Đóng tab là xóa hết dữ liệu ✅
112
+ </footer>
113
+
114
+ <script>
115
+ // Lấy room từ URL (mặc định: cvnss4-0)
116
+ const qs = new URLSearchParams(location.search);
117
+ let room = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
118
+ const base = `${location.origin}${location.pathname}`;
119
+
120
+ document.getElementById("roomPill").textContent = "Phòng: " + room;
121
+
122
+ // Bấm "Vào Chat": nạp iframe tlk.io (form join bên trong luôn bị che)
123
+ document.getElementById("joinBtn").onclick = () => {
124
+ const name = (document.getElementById("nickname").value || "").trim() || "Guest";
125
+ document.getElementById("login").style.display = "none";
126
+ document.getElementById("chat-box").style.display = "block";
127
+ const url = `https://tlk.io/${encodeURIComponent(room)}?nickname=${encodeURIComponent(name)}`;
128
+ document.getElementById("chatFrame").src = url;
129
+ };
130
+
131
+ // Tạo phòng bí mật (random ID) + hiển thị/copy 1 link duy nhất
132
+ document.getElementById("newRoomBtn").onclick = () => {
133
+ const rnd = Math.random().toString(36).slice(2,8);
134
+ room = `cvnss4-0-${rnd}`;
135
+ const link = `${base}?room=${room}`;
136
+
137
+ // Cập nhật pill + link
138
+ document.getElementById("roomPill").textContent = "Phòng: " + room;
139
+ document.getElementById("roomUrl").textContent = link;
140
+ document.getElementById("linkArea").style.display = "flex";
141
+
142
+ // Copy
143
+ const copyBtn = document.getElementById("copyBtn");
144
+ copyBtn.onclick = () => navigator.clipboard.writeText(link).then(() => alert("✅ Đã copy link phòng!"));
145
+ };
146
+ </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
147
  </body>
148
  </html>