api_g

Sleeping

App Files Files Community

DmitrMakeev commited on Oct 17

Commit

92d5424

verified ·

1 Parent(s): fb7fad9

Update chat.html

Browse files

Files changed (1) hide show

chat.html +106 -361

chat.html CHANGED Viewed

@@ -1,368 +1,113 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Secure Chat 🔒</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 20px;
-        }
-        .chat-container {
-            width: 100%;
-            max-width: 450px;
-            height: 650px;
-            background: white;
-            border-radius: 15px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-        .chat-header {
-            background: #2d3748;
-            color: white;
-            padding: 15px 20px;
-            text-align: center;
-            position: relative;
-        }
-        .security-badge {
-            position: absolute;
-            top: 10px;
-            right: 15px;
-            background: #48bb78;
-            padding: 4px 8px;
-            border-radius: 12px;
-            font-size: 0.7em;
-            font-weight: bold;
-        }
-        .messages-container {
-            flex: 1;
-            padding: 20px;
-            overflow-y: auto;
-            background: #f7fafc;
-        }
-        .message {
-            margin-bottom: 15px;
-            padding: 10px 15px;
-            border-radius: 15px;
-            max-width: 80%;
-            word-wrap: break-word;
-        }
-        .message.own {
-            background: #4299e1;
-            color: white;
-            margin-left: auto;
-            border-bottom-right-radius: 5px;
-        }
-        .message.other {
-            background: #e2e8f0;
-            color: #2d3748;
-            border-bottom-left-radius: 5px;
-        }
-        .message-info {
-            font-size: 0.8em;
-            opacity: 0.7;
-            margin-bottom: 3px;
-        }
-        .input-container {
-            padding: 15px 20px;
-            background: white;
-            border-top: 1px solid #e2e8f0;
-            display: flex;
-            gap: 10px;
-            align-items: center;
-        }
-        .message-input {
-            flex: 1;
-            padding: 12px 15px;
-            border: 2px solid #e2e8f0;
-            border-radius: 25px;
-            outline: none;
-            font-size: 14px;
-            transition: border-color 0.3s;
-        }
-        .message-input:focus {
-            border-color: #4299e1;
-        }
-        .send-button {
-            padding: 12px 20px;
-            background: #4299e1;
-            color: white;
-            border: none;
-            border-radius: 25px;
-            cursor: pointer;
-            font-weight: bold;
-            transition: background 0.3s;
-        }
-        .send-button:hover {
-            background: #3182ce;
-        }
-        .send-button:disabled {
-            background: #a0aec0;
-            cursor: not-allowed;
-        }
-        .clear-button {
-            padding: 8px 15px;
-            background: #e53e3e;
-            color: white;
-            border: none;
-            border-radius: 20px;
-            cursor: pointer;
-            font-size: 0.9em;
-            transition: background 0.3s;
-            margin-left: 10px;
-        }
-        .clear-button:hover {
-            background: #c53030;
-        }
-        .typing-indicator {
-            padding: 10px 15px;
-            font-style: italic;
-            color: #718096;
-            font-size: 0.9em;
-        }
-        .encryption-notice {
-            text-align: center;
-            padding: 8px;
-            background: #ebf8ff;
-            color: #2b6cb0;
-            font-size: 0.8em;
-            border-bottom: 1px solid #bee3f8;
-        }
-        .messages-container::-webkit-scrollbar {
-            width: 6px;
-        }
-        .messages-container::-webkit-scrollbar-track {
-            background: #f1f1f1;
-        }
-        .messages-container::-webkit-scrollbar-thumb {
-            background: #cbd5e0;
-            border-radius: 3px;
-        }
-        .messages-container::-webkit-scrollbar-thumb:hover {
-            background: #a0aec0;
-        }
-    </style>
 </head>
 <body>
-    <div class="chat-container">
-        <div class="chat-header">
-            <h2>💬 Secure Chat 🔒</h2>
-            <small>Ваш ID: <span id="user-id">{{ user_id }}</span></small>
-            <div class="security-badge">ЗАЩИЩЕНО</div>
-        </div>
-        <div class="encryption-notice">
-            🔐 Сообщения шифруются на сервере • 🗑️ Данные удаляются при выключении
-        </div>
-        <div class="messages-container" id="messages-container">
-            <div class="typing-indicator" id="welcome-message">
-                Добро пожаловать в защищённый чат! Сообщения шифруются и не сохраняются после выключения сервера.
-            </div>
-        </div>
-        <div class="input-container">
-            <input type="text"
-                   class="message-input"
-                   id="message-input"
-                   placeholder="Введите сообщение..."
-                   maxlength="500">
-            <button class="send-button" id="send-button">Отправить</button>
-            <button class="clear-button" id="clear-button" title="Очистить историю чата">🗑️ Очистить</button>
-        </div>
-    </div>
-    <script>
-        class SecureChat {
-            constructor() {
-                this.userId = document.getElementById('user-id').textContent;
-                this.messagesContainer = document.getElementById('messages-container');
-                this.messageInput = document.getElementById('message-input');
-                this.sendButton = document.getElementById('send-button');
-                this.clearButton = document.getElementById('clear-button');
-                this.lastMessageId = 0;
-                this.init();
-            }
-            init() {
-                this.loadMessages();
-                this.sendButton.addEventListener('click', () => this.sendMessage());
-                this.clearButton.addEventListener('click', () => this.clearChat());
-                this.messageInput.addEventListener('keypress', (e) => {
-                    if (e.key === 'Enter') {
-                        this.sendMessage();
-                    }
-                });
-                setInterval(() => this.loadNewMessages(), 2000);
-                this.messageInput.focus();
-            }
-            async sendMessage() {
-                const message = this.messageInput.value.trim();
-                if (!message) return;
-                this.sendButton.disabled = true;
-                this.sendButton.textContent = '📤';
-                try {
-                    const response = await fetch('/send_message', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({
-                            user_id: this.userId,
-                            message: message
-                        })
-                    });
-                    const result = await response.json();
-                    if (result.status === 'success') {
-                        this.messageInput.value = '';
-                        this.loadNewMessages();
-                    } else {
-                        alert('Ошибка отправки: ' + result.message);
-                    }
-                } catch (error) {
-                    console.error('Ошибка:', error);
-                    alert('О��ибка соединения с сервером');
-                } finally {
-                    this.sendButton.disabled = false;
-                    this.sendButton.textContent = 'Отправить';
-                }
-            }
-            async clearChat() {
-                if (!confirm('Вы уверены, что хотите очистить всю историю чата?')) {
-                    return;
-                }
-                try {
-                    const response = await fetch('/clear_chat', {
-                        method: 'POST'
-                    });
-                    const result = await response.json();
-                    if (result.status === 'success') {
-                        this.messagesContainer.innerHTML = '<div class="typing-indicator">История чата очищена</div>';
-                        this.lastMessageId = 0;
-                    } else {
-                        alert('Ошибка очистки чата');
-                    }
-                } catch (error) {
-                    console.error('Ошибка:', error);
-                    alert('Ошибка соединения с сервером');
-                }
-            }
-            async loadMessages() {
-                try {
-                    const response = await fetch('/get_messages');
-                    const data = await response.json();
-                    this.displayMessages(data.messages);
-                    this.scrollToBottom();
-                } catch (error) {
-                    console.error('Ошибка загрузки сообщений:', error);
-                }
-            }
-            async loadNewMessages() {
-                try {
-                    const response = await fetch(`/get_new_messages?last_id=${this.lastMessageId}`);
-                    const data = await response.json();
-                    if (data.messages.length > 0) {
-                        this.displayMessages(data.messages, false);
-                        this.scrollToBottom();
-                    }
-                } catch (error) {
-                    console.error('Ошибка загрузки новых сообщений:', error);
-                }
-            }
-            displayMessages(messages, clear = true) {
-                if (clear) {
-                    const welcomeMsg = document.getElementById('welcome-message');
-                    if (welcomeMsg) welcomeMsg.remove();
-                    this.messagesContainer.innerHTML = '';
-                }
-                messages.forEach(message => {
-                    if (message.id > this.lastMessageId) {
-                        this.lastMessageId = message.id;
-                    }
-                    const messageElement = document.createElement('div');
-                    messageElement.className = `message ${message.user_id === this.userId ? 'own' : 'other'}`;
-                    messageElement.innerHTML = `
-                        <div class="message-info">
-                            ${message.username} • ${message.timestamp}
-                        </div>
-                        <div class="message-text">${this.escapeHtml(message.text)}</div>
-                    `;
-                    this.messagesContainer.appendChild(messageElement);
-                });
-            }
-            scrollToBottom() {
-                this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
-            }
-            escapeHtml(text) {
-                const div = document.createElement('div');
-                div.textContent = text;
-                return div.innerHTML;
-            }
-        }
-        document.addEventListener('DOMContentLoaded', () => {
-            new SecureChat();
-        });
-    </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="ru">
 <head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Secure Chat (Local Encryption)</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
+<style>
+body { font-family: sans-serif; background: #eef2f3; display: flex; justify-content: center; align-items: center; height: 100vh; }
+.chat-container { width: 400px; background: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); overflow: hidden; display: flex; flex-direction: column; }
+.chat-header { background: #2d3748; color: white; text-align: center; padding: 10px; font-weight: bold; }
+.messages { flex: 1; padding: 10px; overflow-y: auto; background: #f9fafb; }
+.message { margin-bottom: 10px; padding: 8px 12px; border-radius: 12px; max-width: 80%; word-wrap: break-word; }
+.message.own { background: #4299e1; color: white; margin-left: auto; }
+.message.other { background: #e2e8f0; color: #2d3748; }
+.input-container { display: flex; padding: 10px; border-top: 1px solid #ddd; }
+#message-input { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 5px; }
+button { margin-left: 10px; padding: 8px 12px; border: none; border-radius: 5px; background: #3182ce; color: white; cursor: pointer; }
+#clear-btn { background: #e53e3e; }
+#key-input { width: 100%; padding: 8px; margin: 8px 0; border-radius: 5px; border: 1px solid #ccc; }
+</style>
 </head>
 <body>
+<div class="chat-container">
+  <div class="chat-header">🔐 Secure Chat (AES)</div>
+  <div style="padding: 10px;">
+    <input type="password" id="key-input" placeholder="Введите общий ключ шифрования">
+  </div>
+  <div class="messages" id="messages"></div>
+  <div class="input-container">
+    <input type="text" id="message-input" placeholder="Введите сообщение...">
+    <button id="send-btn">Отправить</button>
+    <button id="clear-btn">🗑</button>
+  </div>
+</div>
+<script>
+const userId = "{{ user_id }}";
+let lastId = 0;
+let encryptionKey = '';
+const keyInput = document.getElementById('key-input');
+const msgInput = document.getElementById('message-input');
+const messagesDiv = document.getElementById('messages');
+document.getElementById('send-btn').onclick = sendMessage;
+document.getElementById('clear-btn').onclick = clearChat;
+keyInput.oninput = () => encryptionKey = keyInput.value.trim();
+async function sendMessage() {
+  const text = msgInput.value.trim();
+  if (!text || !encryptionKey) return alert('Введите сообщение и ключ');
+  const encrypted = CryptoJS.AES.encrypt(text, encryptionKey).toString();
+  const res = await fetch('/send_message', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ user_id: userId, encrypted_text: encrypted })
+  });
+  const data = await res.json();
+  if (data.status === 'success') {
+    msgInput.value = '';
+    loadNewMessages();
+  }
+}
+async function loadMessages() {
+  const res = await fetch('/get_messages');
+  const data = await res.json();
+  renderMessages(data.messages);
+}
+async function loadNewMessages() {
+  const res = await fetch(`/get_new_messages?last_id=${lastId}`);
+  const data = await res.json();
+  if (data.messages.length) renderMessages(data.messages, false);
+}
+async function clearChat() {
+  if (!confirm('Очистить чат?')) return;
+  await fetch('/clear_chat', { method: 'POST' });
+  messagesDiv.innerHTML = '';
+  lastId = 0;
+}
+function renderMessages(msgs, clear = true) {
+  if (clear) messagesDiv.innerHTML = '';
+  msgs.forEach(m => {
+    lastId = Math.max(lastId, m.id);
+    let decrypted = '[🔒 Сообщение зашифровано]';
+    if (encryptionKey) {
+      try {
+        decrypted = CryptoJS.AES.decrypt(m.encrypted_text, encryptionKey).toString(CryptoJS.enc.Utf8) || decrypted;
+      } catch {}
+    }
+    const div = document.createElement('div');
+    div.className = 'message ' + (m.user_id === userId ? 'own' : 'other');
+    div.innerHTML = `<div><b>${m.username}</b> • ${m.timestamp}</div><div>${decrypted}</div>`;
+    messagesDiv.appendChild(div);
+  });
+  messagesDiv.scrollTop = messagesDiv.scrollHeight;
+}
+setInterval(loadNewMessages, 2000);
+loadMessages();
+</script>
 </body>
+</html>