Hugging Face's logo

Spaces:
CVNSS
/
Chat
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +110 -34
index.html CHANGED
@@ -4,74 +4,150 @@
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
 
 
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