Hugging Face's logo

Spaces:
school44s
/
Aliess_chat
Running

App Files Community
school44s commited on
Commit
51a1af9
·
verified ·
1 Parent(s): 14a7c69

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +80 -31
index.html CHANGED
@@ -1,41 +1,41 @@
1
  <!DOCTYPE html>
2
  <html lang="vi">
3
  <head>
4
- <meta charset="UTF-8">
5
- <title>Aliess Chat Realtime</title>
6
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
7
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js"></script>
8
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-database-compat.js"></script>
9
  <style>
10
  body { padding: 20px; background: #f9f9f9; }
11
- #chat-box {
12
- border: 1px solid #ccc; padding: 10px; margin-top: 20px;
13
- max-height: 400px; overflow-y: auto; background: #fff;
14
- }
15
- .message { margin: 10px; padding: 10px 14px; border-radius: 12px; max-width: 70%; clear: both; }
16
  .left { background-color: #e2e3e5; float: left; }
17
  .right { background-color: #d1e7dd; float: right; text-align: right; }
18
- .system { background-color: #f8f9fa; border-left: 5px solid #999; text-align: center; font-style: italic; color: #555; clear: both; }
19
- .owner { background: linear-gradient(to right, #ffe082, #ffd54f); box-shadow: 0 0 8px rgba(255, 193, 7, 0.5); font-weight: bold; float: right; border: 2px solid #ffca28; }
20
  .sender { font-weight: bold; margin-bottom: 4px; display: block; }
 
 
21
  </style>
22
  </head>
23
  <body class="container">
24
  <h2 class="mb-4">🛸 Aliess Chat Realtime</h2>
25
- <div class="mb-3">
26
- <label for="displayname" class="form-label">Tên hiển thị:</label>
27
- <input type="text" id="displayname" class="form-control" placeholder="VD: Anh">
28
- </div>
29
- <div class="mb-3">
30
- <label for="content" class="form-label">Tin nhắn:</label>
31
- <input type="text" id="content" class="form-control" placeholder="Nhập nội dung tin nhắn">
32
  </div>
33
- <button class="btn btn-success" onclick="sendMessage()">Gửi</button>
34
- <h3 class="mt-4">📨 Tin nhắn:</h3>
35
  <div id="chat-box" class="rounded shadow-sm"></div>
 
36
  <div class="mt-4">
37
  <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#ownerModal">🔐 Xác thực quyền Owner</button>
38
  </div>
 
39
  <div class="modal fade" id="ownerModal" tabindex="-1">
40
  <div class="modal-dialog">
41
  <div class="modal-content">
@@ -53,11 +53,12 @@
53
  </div>
54
  </div>
55
  </div>
 
56
  <div id="notification" class="alert alert-success mt-3 d-none"></div>
 
57
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
58
  <script>
59
  let isOwner = false;
60
-
61
  let clientId = localStorage.getItem("clientId");
62
  if (!clientId) {
63
  clientId = "client_" + Date.now() + "_" + Math.random().toString(36).substr(2, 9);
@@ -84,19 +85,20 @@
84
 
85
  const forbiddenNames = ["owner", "system", "admin"];
86
  if (!isOwner && forbiddenNames.includes(name.toLowerCase())) {
87
- alert("🚫 Bạn không được sử dụng tên 'Owner', 'System' hoặc 'Admin'. Vui lòng chọn tên khác.");
88
  return;
89
  }
 
90
 
91
  if (isOwner) {
92
  name = "Owner";
93
  if (msg === "/c clear") {
94
  db.ref("messages").remove().then(() => {
95
- const sysId = Date.now() + "_sys";
96
- db.ref("messages/" + sysId).set({
97
  displayname: "System",
98
  content: "Deleted_content_success",
99
- sender: "system"
 
100
  });
101
  });
102
  document.getElementById("content").value = "";
@@ -108,12 +110,51 @@
108
  db.ref("messages/" + id).set({
109
  displayname: name,
110
  content: msg,
111
- sender: clientId
 
 
 
112
  });
113
-
114
  document.getElementById("content").value = "";
115
  }
116
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
117
  const chatBox = document.getElementById("chat-box");
118
  db.ref("messages").on("value", (snapshot) => {
119
  const data = snapshot.val();
@@ -121,19 +162,27 @@
121
  for (let id in data) {
122
  const msg = data[id];
123
  let div = document.createElement("div");
 
124
 
125
  if (msg.displayname === "System") {
126
  div.className = "message system";
127
- div.innerHTML = `⚠️ <strong>System:</strong> ${msg.content}`;
128
  } else if (msg.displayname === "Owner") {
129
  div.className = "message owner";
130
- div.innerHTML = `<span class="sender">👑 ${msg.displayname}</span><span>${msg.content}</span>`;
 
 
 
 
131
  } else {
132
  const align = (msg.sender === clientId) ? "right" : "left";
133
  div.className = `message ${align}`;
134
- div.innerHTML = `<span class="sender">${msg.displayname}</span><span>${msg.content}</span>`;
 
 
 
 
135
  }
136
-
137
  chatBox.appendChild(div);
138
  }
139
  chatBox.scrollTop = chatBox.scrollHeight;
@@ -167,4 +216,4 @@
167
  });
168
  </script>
169
  </body>
170
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="vi">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <title>🛸 Aliess Chat Realtime</title>
6
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
7
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js"></script>
8
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-database-compat.js"></script>
9
  <style>
10
  body { padding: 20px; background: #f9f9f9; }
11
+ #chat-box { border: 1px solid #ccc; padding: 10px; max-height: 400px; overflow-y: auto; background: #fff; }
12
+ .message { padding: 10px 14px; margin: 10px; border-radius: 12px; max-width: 70%; clear: both; position: relative; }
 
 
 
13
  .left { background-color: #e2e3e5; float: left; }
14
  .right { background-color: #d1e7dd; float: right; text-align: right; }
15
+ .owner { background: linear-gradient(to right, #ffe082, #ffd54f); font-weight: bold; float: right; border: 2px solid #ffca28; box-shadow: 0 0 8px rgba(255, 193, 7, 0.5); }
16
+ .system { background-color: #f8f9fa; text-align: center; font-style: italic; color: #555; clear: both; border-left: 5px solid #999; }
17
  .sender { font-weight: bold; margin-bottom: 4px; display: block; }
18
+ .timestamp { font-size: 12px; color: gray; margin-top: 4px; display: block; }
19
+ img { max-width: 100%; border-radius: 8px; margin-top: 6px; }
20
  </style>
21
  </head>
22
  <body class="container">
23
  <h2 class="mb-4">🛸 Aliess Chat Realtime</h2>
24
+ <div class="mb-2">
25
+ <input type="text" id="displayname" class="form-control mb-2" placeholder="Tên hiển thị (VD: Ngọc)">
26
+ <input type="text" id="content" class="form-control mb-2" placeholder="Nhập tin nhắn">
27
+ <input type="file" id="imageInput" class="form-control mb-2">
28
+ <button class="btn btn-success me-2" onclick="sendimg()">Gửi ảnh</button>
29
+ <button class="btn btn-primary" onclick="sendMessage()">Gửi tin nhắn</button>
 
30
  </div>
31
+
32
+ <h4 class="mt-4">📨 Lịch sử tin nhắn</h4>
33
  <div id="chat-box" class="rounded shadow-sm"></div>
34
+
35
  <div class="mt-4">
36
  <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#ownerModal">🔐 Xác thực quyền Owner</button>
37
  </div>
38
+
39
  <div class="modal fade" id="ownerModal" tabindex="-1">
40
  <div class="modal-dialog">
41
  <div class="modal-content">
 
53
  </div>
54
  </div>
55
  </div>
56
+
57
  <div id="notification" class="alert alert-success mt-3 d-none"></div>
58
+
59
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
60
  <script>
61
  let isOwner = false;
 
62
  let clientId = localStorage.getItem("clientId");
63
  if (!clientId) {
64
  clientId = "client_" + Date.now() + "_" + Math.random().toString(36).substr(2, 9);
 
85
 
86
  const forbiddenNames = ["owner", "system", "admin"];
87
  if (!isOwner && forbiddenNames.includes(name.toLowerCase())) {
88
+ alert("🚫 Không được sử dụng tên 'Owner', 'System' hoặc 'Admin'.");
89
  return;
90
  }
91
+ if (!name) name = "Guest";
92
 
93
  if (isOwner) {
94
  name = "Owner";
95
  if (msg === "/c clear") {
96
  db.ref("messages").remove().then(() => {
97
+ db.ref("messages/" + (Date.now() + "_sys")).set({
 
98
  displayname: "System",
99
  content: "Deleted_content_success",
100
+ sender: "system",
101
+ timestamp: new Date().toLocaleString("vi-VN")
102
  });
103
  });
104
  document.getElementById("content").value = "";
 
110
  db.ref("messages/" + id).set({
111
  displayname: name,
112
  content: msg,
113
+ sender: clientId,
114
+ type: "text",
115
+ imgURL: "",
116
+ timestamp: new Date().toLocaleString("vi-VN")
117
  });
 
118
  document.getElementById("content").value = "";
119
  }
120
 
121
+ function sendimg() {
122
+ const imageInput = document.getElementById("imageInput");
123
+ const files = imageInput.files[0];
124
+ if (!files) {
125
+ alert("Vui lòng chọn hình ảnh để gửi.");
126
+ return;
127
+ }
128
+
129
+ const formData = new FormData();
130
+ formData.append("image", files);
131
+ fetch("https://api.imgbb.com/1/upload?key=eb64cc8f94a115e3a412694f2a0f10b3", {
132
+ method: "POST",
133
+ body: formData
134
+ })
135
+ .then(response => response.json())
136
+ .then(data => {
137
+ if (data.success) {
138
+ const imgURL = data.data.url;
139
+ let name = document.getElementById("displayname").value.trim();
140
+ if (!name) name = "Guest";
141
+ const id = Date.now();
142
+ db.ref("messages/" + id).set({
143
+ displayname: isOwner ? "Owner" : name,
144
+ content: "",
145
+ sender: clientId,
146
+ type: "image",
147
+ imgURL: imgURL,
148
+ timestamp: new Date().toLocaleString("vi-VN")
149
+ });
150
+ document.getElementById("imageInput").value = "";
151
+ showNotification("✅ Hình ảnh đã được gửi!");
152
+ } else {
153
+ alert("Lỗi khi tải ảnh lên. Vui lòng thử lại.");
154
+ }
155
+ });
156
+ }
157
+
158
  const chatBox = document.getElementById("chat-box");
159
  db.ref("messages").on("value", (snapshot) => {
160
  const data = snapshot.val();
 
162
  for (let id in data) {
163
  const msg = data[id];
164
  let div = document.createElement("div");
165
+ let timeHTML = `<span class="timestamp">🕒 ${msg.timestamp || "Không rõ thời gian"}</span>`;
166
 
167
  if (msg.displayname === "System") {
168
  div.className = "message system";
169
+ div.innerHTML = `⚠️ <strong>System:</strong> ${msg.content}<br>${timeHTML}`;
170
  } else if (msg.displayname === "Owner") {
171
  div.className = "message owner";
172
+ if (msg.type === "image") {
173
+ div.innerHTML = `<span class="sender">👑 ${msg.displayname}</span><img src="${msg.imgURL}"/>${timeHTML}`;
174
+ } else {
175
+ div.innerHTML = `<span class="sender">👑 ${msg.displayname}</span><span>${msg.content}</span>${timeHTML}`;
176
+ }
177
  } else {
178
  const align = (msg.sender === clientId) ? "right" : "left";
179
  div.className = `message ${align}`;
180
+ if (msg.type === "image") {
181
+ div.innerHTML = `<span class="sender">${msg.displayname}</span><img src="${msg.imgURL}"/>${timeHTML}`;
182
+ } else {
183
+ div.innerHTML = `<span class="sender">${msg.displayname}</span><span>${msg.content}</span>${timeHTML}`;
184
+ }
185
  }
 
186
  chatBox.appendChild(div);
187
  }
188
  chatBox.scrollTop = chatBox.scrollHeight;
 
216
  });
217
  </script>
218
  </body>
219
+ </html>