Hugging Face's logo

Spaces:
DmitrMakeev
/
api_g
Sleeping

App Files Community
DmitrMakeev commited on
Commit
52ab16f
·
verified ·
1 Parent(s): cba8da3

Update chat.html

Browse files
Files changed (1) hide show
  1. chat.html +80 -10
chat.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Simple Chat</title>
7
  <style>
8
  * {
9
  margin: 0;
@@ -23,8 +23,8 @@
23
 
24
  .chat-container {
25
  width: 100%;
26
- max-width: 400px;
27
- height: 600px;
28
  background: white;
29
  border-radius: 15px;
30
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
@@ -34,10 +34,22 @@
34
  }
35
 
36
  .chat-header {
37
- background: #4a5568;
38
  color: white;
39
  padding: 15px 20px;
40
  text-align: center;
 
 
 
 
 
 
 
 
 
 
 
 
41
  }
42
 
43
  .messages-container {
@@ -80,6 +92,7 @@
80
  border-top: 1px solid #e2e8f0;
81
  display: flex;
82
  gap: 10px;
 
83
  }
84
 
85
  .message-input {
@@ -97,7 +110,7 @@
97
  }
98
 
99
  .send-button {
100
- padding: 12px 25px;
101
  background: #4299e1;
102
  color: white;
103
  border: none;
@@ -116,6 +129,22 @@
116
  cursor: not-allowed;
117
  }
118
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  .typing-indicator {
120
  padding: 10px 15px;
121
  font-style: italic;
@@ -123,6 +152,15 @@
123
  font-size: 0.9em;
124
  }
125
 
 
 
 
 
 
 
 
 
 
126
  .messages-container::-webkit-scrollbar {
127
  width: 6px;
128
  }
@@ -144,13 +182,18 @@
144
  <body>
145
  <div class="chat-container">
146
  <div class="chat-header">
147
- <h2>💬 Simple Chat</h2>
148
  <small>Ваш ID: <span id="user-id">{{ user_id }}</span></small>
 
 
 
 
 
149
  </div>
150
 
151
  <div class="messages-container" id="messages-container">
152
  <div class="typing-indicator" id="welcome-message">
153
- Добро пожаловать в чат! Начните общение...
154
  </div>
155
  </div>
156
 
@@ -161,16 +204,18 @@
161
  placeholder="Введите сообщение..."
162
  maxlength="500">
163
  <button class="send-button" id="send-button">Отправить</button>
 
164
  </div>
165
  </div>
166
 
167
  <script>
168
- class Chat {
169
  constructor() {
170
  this.userId = document.getElementById('user-id').textContent;
171
  this.messagesContainer = document.getElementById('messages-container');
172
  this.messageInput = document.getElementById('message-input');
173
  this.sendButton = document.getElementById('send-button');
 
174
  this.lastMessageId = 0;
175
 
176
  this.init();
@@ -180,6 +225,7 @@
180
  this.loadMessages();
181
 
182
  this.sendButton.addEventListener('click', () => this.sendMessage());
 
183
  this.messageInput.addEventListener('keypress', (e) => {
184
  if (e.key === 'Enter') {
185
  this.sendMessage();
@@ -196,7 +242,7 @@
196
  if (!message) return;
197
 
198
  this.sendButton.disabled = true;
199
- this.sendButton.textContent = 'Отправка...';
200
 
201
  try {
202
  const response = await fetch('/send_message', {
@@ -227,6 +273,30 @@
227
  }
228
  }
229
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
230
  async loadMessages() {
231
  try {
232
  const response = await fetch('/get_messages');
@@ -291,7 +361,7 @@
291
  }
292
 
293
  document.addEventListener('DOMContentLoaded', () => {
294
- new Chat();
295
  });
296
  </script>
297
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Secure Chat 🔒</title>
7
  <style>
8
  * {
9
  margin: 0;
 
23
 
24
  .chat-container {
25
  width: 100%;
26
+ max-width: 450px;
27
+ height: 650px;
28
  background: white;
29
  border-radius: 15px;
30
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 
34
  }
35
 
36
  .chat-header {
37
+ background: #2d3748;
38
  color: white;
39
  padding: 15px 20px;
40
  text-align: center;
41
+ position: relative;
42
+ }
43
+
44
+ .security-badge {
45
+ position: absolute;
46
+ top: 10px;
47
+ right: 15px;
48
+ background: #48bb78;
49
+ padding: 4px 8px;
50
+ border-radius: 12px;
51
+ font-size: 0.7em;
52
+ font-weight: bold;
53
  }
54
 
55
  .messages-container {
 
92
  border-top: 1px solid #e2e8f0;
93
  display: flex;
94
  gap: 10px;
95
+ align-items: center;
96
  }
97
 
98
  .message-input {
 
110
  }
111
 
112
  .send-button {
113
+ padding: 12px 20px;
114
  background: #4299e1;
115
  color: white;
116
  border: none;
 
129
  cursor: not-allowed;
130
  }
131
 
132
+ .clear-button {
133
+ padding: 8px 15px;
134
+ background: #e53e3e;
135
+ color: white;
136
+ border: none;
137
+ border-radius: 20px;
138
+ cursor: pointer;
139
+ font-size: 0.9em;
140
+ transition: background 0.3s;
141
+ margin-left: 10px;
142
+ }
143
+
144
+ .clear-button:hover {
145
+ background: #c53030;
146
+ }
147
+
148
  .typing-indicator {
149
  padding: 10px 15px;
150
  font-style: italic;
 
152
  font-size: 0.9em;
153
  }
154
 
155
+ .encryption-notice {
156
+ text-align: center;
157
+ padding: 8px;
158
+ background: #ebf8ff;
159
+ color: #2b6cb0;
160
+ font-size: 0.8em;
161
+ border-bottom: 1px solid #bee3f8;
162
+ }
163
+
164
  .messages-container::-webkit-scrollbar {
165
  width: 6px;
166
  }
 
182
  <body>
183
  <div class="chat-container">
184
  <div class="chat-header">
185
+ <h2>💬 Secure Chat 🔒</h2>
186
  <small>Ваш ID: <span id="user-id">{{ user_id }}</span></small>
187
+ <div class="security-badge">ЗАЩИЩЕНО</div>
188
+ </div>
189
+
190
+ <div class="encryption-notice">
191
+ 🔐 Сообщения шифруются на сервере • 🗑️ Данные удаляются при выключении
192
  </div>
193
 
194
  <div class="messages-container" id="messages-container">
195
  <div class="typing-indicator" id="welcome-message">
196
+ Добро пожаловать в защищённый чат! Сообщения шифруются и не сохраняются после выключения сервера.
197
  </div>
198
  </div>
199
 
 
204
  placeholder="Введите сообщение..."
205
  maxlength="500">
206
  <button class="send-button" id="send-button">Отправить</button>
207
+ <button class="clear-button" id="clear-button" title="Очистить историю чата">🗑️ Очистить</button>
208
  </div>
209
  </div>
210
 
211
  <script>
212
+ class SecureChat {
213
  constructor() {
214
  this.userId = document.getElementById('user-id').textContent;
215
  this.messagesContainer = document.getElementById('messages-container');
216
  this.messageInput = document.getElementById('message-input');
217
  this.sendButton = document.getElementById('send-button');
218
+ this.clearButton = document.getElementById('clear-button');
219
  this.lastMessageId = 0;
220
 
221
  this.init();
 
225
  this.loadMessages();
226
 
227
  this.sendButton.addEventListener('click', () => this.sendMessage());
228
+ this.clearButton.addEventListener('click', () => this.clearChat());
229
  this.messageInput.addEventListener('keypress', (e) => {
230
  if (e.key === 'Enter') {
231
  this.sendMessage();
 
242
  if (!message) return;
243
 
244
  this.sendButton.disabled = true;
245
+ this.sendButton.textContent = '📤';
246
 
247
  try {
248
  const response = await fetch('/send_message', {
 
273
  }
274
  }
275
 
276
+ async clearChat() {
277
+ if (!confirm('Вы уверены, что хотите очистить всю историю чата?')) {
278
+ return;
279
+ }
280
+
281
+ try {
282
+ const response = await fetch('/clear_chat', {
283
+ method: 'POST'
284
+ });
285
+
286
+ const result = await response.json();
287
+
288
+ if (result.status === 'success') {
289
+ this.messagesContainer.innerHTML = '<div class="typing-indicator">История чата очищена</div>';
290
+ this.lastMessageId = 0;
291
+ } else {
292
+ alert('Ошибка очистки чата');
293
+ }
294
+ } catch (error) {
295
+ console.error('Ошибка:', error);
296
+ alert('Ошибка соединения с сервером');
297
+ }
298
+ }
299
+
300
  async loadMessages() {
301
  try {
302
  const response = await fetch('/get_messages');
 
361
  }
362
 
363
  document.addEventListener('DOMContentLoaded', () => {
364
+ new SecureChat();
365
  });
366
  </script>
367
  </body>