Hugging Face's logo

Spaces:
CVNSS
/
Chat
Running

App Files Community
CVNSS commited on
Commit
ed6661e
·
verified ·
1 Parent(s): d71c73e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +61 -28
index.html CHANGED
@@ -4,43 +4,76 @@
4
  <meta charset="UTF-8">
5
  <title>Chat CVNSS4.0</title>
6
  <style>
7
- body {
8
- font-family: Arial, sans-serif;
9
- margin:0; padding:0; background:#f4f4f4;
10
- display:flex; flex-direction:column; align-items:center;
11
  }
12
- header {
13
- background:#2c3e50; color:#fff;
14
- width:100%; padding:15px; text-align:center;
15
- font-size:20px;
16
  }
17
- .chat-container {
18
- margin:20px; width:90%; max-width:900px;
19
- background:white; border-radius:10px;
20
- box-shadow:0 0 10px rgba(0,0,0,0.2);
21
- overflow:hidden;
22
- }
23
- iframe {
24
- border:none; width:100%; height:600px;
25
- }
26
- footer {
27
- background:#2c3e50; color:white; text-align:center;
28
- width:100%; padding:10px; font-size:14px;
29
  }
 
 
 
30
  </style>
31
  </head>
32
  <body>
33
 
34
- <header>💬 Phòng Chat CVNSS4.0</header>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
 
36
- <div class="chat-container">
37
- <!-- Nhúng trực tiếp tlk.io -->
38
- <iframe src="https://tlk.io/cvnss4-0" allowfullscreen></iframe>
39
- </div>
 
40
 
41
- <footer>
42
- Chat xong chỉ cần đóng tab là xóa hết ✅
43
- </footer>
 
 
44
 
45
  </body>
46
  </html>
 
4
  <meta charset="UTF-8">
5
  <title>Chat CVNSS4.0</title>
6
  <style>
7
+ body {
8
+ font-family: Arial, sans-serif; margin:0; padding:0; background:#f4f4f4;
9
+ display:flex; flex-direction:column; align-items:center; justify-content:center;
10
+ min-height:100vh;
11
  }
12
+ #login, #chat-container, #new-room {
13
+ background:white; padding:20px; border-radius:10px;
14
+ box-shadow:0 0 10px rgba(0,0,0,0.2); width:90%; max-width:800px; margin:10px;
 
15
  }
16
+ #chat-container { display:none; }
17
+ input, button { padding:10px; font-size:16px; }
18
+ button {
19
+ background:#2c3e50; color:white; border:none; border-radius:5px; cursor:pointer;
 
 
 
 
 
 
 
 
20
  }
21
+ button:hover { background:#1a242f; }
22
+ iframe { border:none; width:100%; height:600px; margin-top:10px; }
23
+ .link-box { margin-top:10px; padding:10px; background:#f0f0f0; border-radius:5px; word-break:break-all; }
24
  </style>
25
  </head>
26
  <body>
27
 
28
+ <div id="new-room">
29
+ <h2>✨ Tạo phòng chat bí mật</h2>
30
+ <button onclick="createRoom()">Tạo phòng mới</button>
31
+ <div id="roomLink" class="link-box" style="display:none;"></div>
32
+ </div>
33
+
34
+ <div id="login">
35
+ <h2>💬 Vào phòng chat</h2>
36
+ <p>Nhập tên của bạn để vào phòng chat:</p>
37
+ <input type="text" id="nickname" placeholder="Tên bạn...">
38
+ <button onclick="joinChat()">Vào Chat</button>
39
+ </div>
40
+
41
+ <div id="chat-container">
42
+ <h2 id="roomTitle"></h2>
43
+ <iframe id="chat-frame"></iframe>
44
+ </div>
45
+
46
+ <script>
47
+ // Nếu URL có tham số room thì dùng, không thì mặc định
48
+ let urlParams = new URLSearchParams(window.location.search);
49
+ let room = urlParams.get("room") || "cvnss4-0";
50
+
51
+ document.getElementById("roomTitle").innerText = "Phòng: " + room;
52
+
53
+ function joinChat() {
54
+ const name = document.getElementById("nickname").value.trim();
55
+ if (!name) {
56
+ alert("Vui lòng nhập tên!");
57
+ return;
58
+ }
59
+ document.getElementById("login").style.display = "none";
60
+ document.getElementById("chat-container").style.display = "block";
61
+
62
+ const iframe = document.getElementById("chat-frame");
63
+ iframe.src = "https://tlk.io/" + room + "?nickname=" + encodeURIComponent(name);
64
+ }
65
 
66
+ function createRoom() {
67
+ // Sinh ID ngẫu nhiên
68
+ const rand = Math.random().toString(36).substring(2, 8);
69
+ const newRoom = "cvnss4-0-" + rand;
70
+ const link = window.location.origin + window.location.pathname + "?room=" + newRoom;
71
 
72
+ const box = document.getElementById("roomLink");
73
+ box.style.display = "block";
74
+ box.textContent = "Link phòng: " + link;
75
+ }
76
+ </script>
77
 
78
  </body>
79
  </html>