Hugging Face's logo

Spaces:
CVNSS
/
Chat
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +69 -64
index.html CHANGED
@@ -1,81 +1,92 @@
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…">
@@ -87,59 +98,53 @@
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
  };
 
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{
9
+ --primary:#1a73e8; /* màu chủ đạo */
10
+ --bg:#f5f6f8; /* nền trang */
11
+ --text:#202124;
12
+ --ov-top:72px; /* ← chiều cao overlay che HEADER tlk.io (không che khung Join) */
13
+ --ov-right:260px; /* ← bề rộng overlay che CỘT PHẢI */
14
+ }
15
+
16
+ *{ box-sizing:border-box }
17
+ body{
18
  margin:0; font-family: "Google Sans", Arial, sans-serif;
19
  background:var(--bg); color:var(--text);
20
  display:flex; flex-direction:column; min-height:100vh;
21
  }
22
+ header{
23
  background:var(--primary); color:#fff; padding:16px;
24
  text-align:center; font-size:20px; font-weight:600;
25
+ box-shadow:0 2px 6px rgba(0,0,0,.1);
26
  }
27
+ .card{
28
+ width:min(940px,92vw); margin:28px auto; background:#fff;
29
+ border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08); padding:22px;
 
30
  }
31
+ h2{ margin:0 0 14px 0; font-weight:600 }
32
+ .row{ display:flex; gap:10px; flex-wrap:wrap }
33
+ input[type="text"]{
34
  flex:1 1 260px; padding:12px 14px; font-size:16px;
35
  border:1px solid #dadce0; border-radius:8px;
36
  }
37
+ input[type="text"]:focus{ outline:none; border-color:var(--primary) }
38
+ button{
39
  padding:12px 18px; border:none; border-radius:8px;
40
+ background:var(--primary); color:#fff; font-weight:600; cursor:pointer;
 
41
  }
42
+ button:hover{ background:#0b5ed7 }
43
+ .ghost{ background:#e9eef6; color:#174ea6 }
44
+ .secondary{ background:#5f6368 }
45
+ .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
46
+ #chat-box{ display:none }
47
+ .pill{
48
  display:inline-block; background:#eef3fd; color:#174ea6;
49
  padding:6px 10px; border-radius:999px; font-size:14px; margin-bottom:10px;
50
  }
 
 
51
 
52
+ .chat-wrap{ position:relative; border:1px solid #e3e6ea; border-radius:10px; overflow:hidden }
53
+ iframe{ width:100%; height:72vh; min-height:520px; border:0; background:#fff }
54
+
55
+ /* ====== Overlays ======
56
+ - ov-top: chỉ che HEADER tlk.io (đám mây/title). pointer-events:none để không chặn click.
57
+ - ov-right: che cột phải (online, branding, patron).
58
+ - KHÔNG có ov-bottom để giữ ô nhập tin nhắn.
59
+ */
60
+ .ov-top{
61
  position:absolute; left:0; right:0; top:0;
62
+ height:var(--ov-top);
63
+ background:#fff; z-index:3; pointer-events:none;
64
+ box-shadow:0 8px 10px -10px rgba(0,0,0,.12);
65
+ transition:height .15s ease;
66
  }
67
+ .ov-right{
68
  position:absolute; top:0; right:0; bottom:0;
69
+ width:var(--ov-right); background:#fff; z-index:2; pointer-events:none;
70
+ box-shadow:-8px 0 10px -10px rgba(0,0,0,.12);
71
  }
72
+
73
+ /* Responsive: để khung Join luôn lộ rõ trên màn nhỏ */
74
+ @media (max-width: 640px){
75
+ :root{ --ov-top:56px; --ov-right:200px; }
76
  }
77
 
78
+ footer{
79
+ margin-top:auto; text-align:center; color:#6c727a; font-size:13px; padding:16px;
 
 
 
 
80
  }
81
+ .links{ margin-top:14px; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
82
+ .link-badge{ background:#f1f3f4; padding:6px 8px; border-radius:6px }
83
  </style>
84
  </head>
85
  <body>
86
  <header>💬 Chat CVNSS4.0</header>
87
 
88
+ <!-- khối tạo phòng & vào chat -->
89
+ <section id="login" class="card">
90
  <h2>Tham gia phòng chat</h2>
91
  <div class="row" style="margin-bottom:10px;">
92
  <input type="text" id="nickname" placeholder="Nhập tên của bạn…">
 
98
  </div>
99
 
100
  <div id="linkArea" class="links" style="display:none;">
101
+ <span>🔗 Link phòng:</span>
102
+ <span id="roomUrl" class="link-badge mono"></span>
103
+ <button class="secondary" id="copyBtn">📋 Copy</button>
 
 
 
104
  </div>
105
+ </section>
106
 
107
+ <!-- khối chat -->
108
+ <section id="chat-box" class="card">
109
  <span id="roomPill" class="pill"></span>
110
  <div class="chat-wrap">
111
  <div class="ov-top"></div>
112
  <div class="ov-right"></div>
 
113
  <iframe id="chatFrame" title="tlk.io chat"></iframe>
114
  </div>
115
+ </section>
116
 
117
  <footer>
118
  Nguồn: Sản phẩm thử nghiệm của Team CVNSS4.0 • Đóng tab là xóa hết dữ liệu ✅
119
  </footer>
120
 
121
  <script>
122
+ // Lấy room từ URL hoặc mặc định
123
  const qs = new URLSearchParams(location.search);
124
  let room = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
125
  const base = `${location.origin}${location.pathname}`;
 
126
  document.getElementById("roomPill").textContent = "Phòng: " + room;
127
 
128
+ // Vào chat: nạp iframe với nickname; overlay KHÔNG che khung Join
129
  document.getElementById("joinBtn").onclick = () => {
130
  const name = (document.getElementById("nickname").value || "").trim() || "Guest";
131
  document.getElementById("login").style.display = "none";
132
  document.getElementById("chat-box").style.display = "block";
133
+
134
  const url = `https://tlk.io/${encodeURIComponent(room)}?nickname=${encodeURIComponent(name)}`;
135
  document.getElementById("chatFrame").src = url;
136
  };
137
 
138
+ // Tạo phòng bí mật (random) + hiển thị/copy một link
139
  document.getElementById("newRoomBtn").onclick = () => {
140
+ const rnd = Math.random().toString(36).slice(2,8);
141
+ room = `cvnss4-0-${rnd}`;
142
  const link = `${base}?room=${room}`;
143
 
 
144
  document.getElementById("roomPill").textContent = "Phòng: " + room;
145
+ document.getElementById("roomUrl").textContent = link;
146
  document.getElementById("linkArea").style.display = "flex";
147
 
 
148
  const copyBtn = document.getElementById("copyBtn");
149
  copyBtn.onclick = () => navigator.clipboard.writeText(link).then(() => alert("✅ Đã copy link phòng!"));
150
  };