api_g

Sleeping

App Files Files Community

DmitrMakeev commited on Oct 17, 2025

Commit

1587276

verified ·

1 Parent(s): a7689f9

Update chat.html

Browse files

Files changed (1) hide show

chat.html +205 -220

chat.html CHANGED Viewed

@@ -3,198 +3,186 @@
 <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>
-        * {
-            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">🔐 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>
@@ -211,59 +199,56 @@ 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);

 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Secure Chat 🔒</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
 <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: 480px;
+        height: 700px;
+        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;
+    }
+    .encryption-notice {
+        text-align: center;
+        padding: 8px;
+        background: #ebf8ff;
+        color: #2b6cb0;
+        font-size: 0.8em;
+        border-bottom: 1px solid #bee3f8;
+    }
+    .key-input {
+        width: 90%;
+        margin: 10px auto;
+        display: block;
+        padding: 10px 12px;
+        border: 2px solid #cbd5e0;
+        border-radius: 10px;
+        font-size: 14px;
+        text-align: center;
+    }
+    .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;
+        flex-direction: column;
+        gap: 10px;
+    }
+    .message-input {
+        width: 100%;
+        height: 70px;
+        resize: none;
+        padding: 12px 15px;
+        border: 2px solid #e2e8f0;
+        border-radius: 12px;
+        outline: none;
+        font-size: 15px;
+        line-height: 1.4;
+        transition: border-color 0.3s;
+    }
+    .message-input:focus { border-color: #4299e1; }
+    .button-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .send-button, .clear-button {
+        padding: 10px 20px;
+        border: none;
+        border-radius: 25px;
+        font-weight: bold;
+        cursor: pointer;
+        transition: background 0.3s;
+    }
+    .send-button {
+        background: #4299e1;
+        color: white;
+    }
+    .send-button:hover { background: #3182ce; }
+    .clear-button {
+        background: #e53e3e;
+        color: white;
+    }
+    .clear-button:hover { background: #c53030; }
+    .messages-container::-webkit-scrollbar { width: 6px; }
+    .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>
+        <div class="security-badge">AES ШИФРОВАНИЕ</div>
+    </div>
+    <div class="encryption-notice">Введите общий ключ шифрования ниже</div>
+    <input type="password" id="key-input" class="key-input" placeholder="🔑 Ключ шифрования (один и тот же у обоих)" />
+    <div class="messages-container" id="messages"></div>
+    <div class="input-container">
+        <textarea class="message-input" id="message-input" placeholder="Введите сообщение..."></textarea>
+        <div class="button-row">
+            <button class="send-button" id="send-btn">Отправить</button>
+            <button class="clear-button" id="clear-btn">🗑 Очистить</button>
+        </div>
+    </div>
 </div>
 <script>
 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();
+    await fetch('/send_message', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ user_id: userId, encrypted_text: encrypted })
+    });
     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 class="message-info">${m.username} • ${m.timestamp}</div><div>${decrypted}</div>`;
+        messagesDiv.appendChild(div);
+    });
+    messagesDiv.scrollTop = messagesDiv.scrollHeight;
 }
 setInterval(loadNewMessages, 2000);