api_g

Sleeping

App Files Files Community

DmitrMakeev commited on Oct 17, 2025

Commit

4c5689c

verified ·

1 Parent(s): a8800ca

Update chat.html

Browse files

Files changed (1) hide show

chat.html +251 -166

chat.html CHANGED Viewed

@@ -3,187 +3,272 @@
 <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,#48bb78 0%,#2f855a 100%); height:100vh; display:flex; justify-content:center; align-items:center; padding:20px; }
-.chat-container { width:100%; max-width:500px; height:700px; background:white; border-radius:15px; display:flex; flex-direction:column; overflow:hidden; }
-.chat-header { background:#2f855a; color:white; padding:15px 20px; text-align:center; position:relative; }
-.security-badge { position:absolute; top:10px; right:15px; background:#38a169; padding:4px 8px; border-radius:12px; font-size:0.7em; font-weight:bold; }
-.messages-container { flex:1; padding:20px; overflow-y:auto; background:#f0fff4; }
-.message { margin-bottom:15px; padding:10px 15px; border-radius:15px; max-width:80%; word-wrap:break-word; }
-.message.own { background:#48bb78; color:white; margin-left:auto; border-bottom-right-radius:5px; }
-.message.other { background:#c6f6d5; color:#2f855a; border-bottom-left-radius:5px; }
-.message-info { font-size:0.8em; opacity:0.7; margin-bottom:3px; }
-.input-container { padding:15px 20px; display:flex; gap:10px; align-items:center; border-top:1px solid #9ae6b4; background:white; }
-.message-input { flex:1; padding:12px 15px; border:2px solid #9ae6b4; border-radius:25px; outline:none; font-size:14px; }
-.message-input:focus { border-color:#38a169; }
-.send-button { padding:12px 20px; background:#38a169; color:white; border:none; border-radius:25px; cursor:pointer; font-weight:bold; }
-.send-button:hover { background:#2f855a; }
-.clear-button { padding:8px 15px; background:#e53e3e; color:white; border:none; border-radius:20px; cursor:pointer; font-size:0.9em; margin-left:10px; }
-.clear-button:hover { background:#c53030; }
-.read-button { padding:8px 15px; background:#1a202c; color:white; border:none; border-radius:20px; cursor:pointer; font-size:0.9em; margin-left:10px; }
-.read-button:hover { background:#2d3748; }
-.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="messages-container" id="messages-container">
-        <div class="typing-indicator" id="welcome-message">
-            Добро пожаловать! Введите ключ шифрования чтобы расшифровать историю.
-        </div>
     </div>
     <div class="input-container">
-        <input type="password" id="key-input" class="key-input" placeholder="🔑 Ключ шифрования">
-        <input type="text" id="message-input" class="message-input" placeholder="Введите сообщение..." maxlength="500">
-        <button class="send-button" id="send-button">Отправить</button>
-        <button class="clear-button" id="clear-button">Очистить</button>
-        <button class="read-button" id="read-button">Прочитать историю</button>
     </div>
 </div>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
 <script>
-class SecureChat {
-    constructor() {
-        this.userId = document.getElementById('user-id').textContent;
-        this.messagesContainer = document.getElementById('messages-container');
-        this.messageInput = document.getElementById('message-input');
-        this.keyInput = document.getElementById('key-input');
-        this.sendButton = document.getElementById('send-button');
-        this.clearButton = document.getElementById('clear-button');
-        this.readButton = document.getElementById('read-button');
-        this.lastMessageId = 0;
-        this.keyInput.addEventListener('input', () => this.decryptExistingMessages());
-        this.sendButton.addEventListener('click', () => this.sendMessage());
-        this.clearButton.addEventListener('click', () => this.clearChat());
-        this.readButton.addEventListener('click', () => this.loadHistory());
-        this.messageInput.addEventListener('keypress', (e) => {
-            if(e.key==='Enter') this.sendMessage();
-        });
-        this.loadNewMessages();
-        setInterval(()=>this.loadNewMessages(),2000);
-    }
-    encryptMessage(text, key) {
-        return CryptoJS.AES.encrypt(text, key).toString();
-    }
-    decryptMessage(cipher, key) {
-        return CryptoJS.AES.decrypt(cipher, key).toString(CryptoJS.enc.Utf8);
-    }
-    displayMessages(messages, clear=true) {
-        if(clear) {
-            this.messagesContainer.innerHTML='';
-        }
-        messages.forEach(msg => {
-            if(msg.id>this.lastMessageId) this.lastMessageId=msg.id;
-            const div = document.createElement('div');
-            div.className=`message ${msg.user_id===this.userId?'own':'other'}`;
-            div.dataset.cipher = msg.encrypted_text; // сохраняем зашифрованный текст
-            div.innerHTML = `
-                <div class="message-info">${msg.username} • ${msg.timestamp}</div>
-                <div class="message-text">${msg.encrypted_text}</div>
-            `;
-            this.messagesContainer.appendChild(div);
-        });
-        this.scrollToBottom();
-    }
-    decryptExistingMessages() {
-        const key = this.keyInput.value.trim();
-        if(!key) return;
-        document.querySelectorAll('.message').forEach(msg=>{
-            const cipher = msg.dataset.cipher;
-            if(!cipher) return;
-            try{
-                const dec = this.decryptMessage(cipher,key);
-                msg.querySelector('.message-text').textContent = dec || '[🔒 Неверный ключ]';
-            } catch(e){
-                msg.querySelector('.message-text').textContent='[🔒 Неверный ключ]';
-            }
-        });
-    }
-    async sendMessage() {
-        const message = this.messageInput.value.trim();
-        const key = this.keyInput.value.trim();
-        if(!message || !key) return alert('Введите сообщение и ключ');
-        this.sendButton.disabled=true;
-        const cipher = this.encryptMessage(message,key);
-        // отправка на сервер
-        const response = await fetch('/send_message',{
-            method:'POST',
-            headers:{'Content-Type':'application/json'},
-            body:JSON.stringify({user_id:this.userId,message:message,password:key})
-        });
-        const result = await response.json();
-        if(result.status==='success'){
-            this.messageInput.value='';
-            this.loadNewMessages();
-        } else alert('Ошибка: '+result.message);
-        this.sendButton.disabled=false;
-    }
-    async loadNewMessages() {
-        const key = this.keyInput.value.trim();
-        const response = await fetch(`/get_new_messages?last_id=${this.lastMessageId}&password=${encodeURIComponent(key)}`);
-        const data = await response.json();
-        if(data.status==='error') return;
-        this.displayMessages(data.messages,false);
-        this.decryptExistingMessages();
-    }
-    async loadHistory() {
-        const key = this.keyInput.value.trim();
-        if(!key) return alert('Введите ключ чтобы прочитать историю');
-        const response = await fetch(`/get_messages?password=${encodeURIComponent(key)}`);
-        const data = await response.json();
-        if(data.status==='error') return alert(data.message);
-        this.displayMessages(data.messages);
-        this.decryptExistingMessages();
-    }
-    async clearChat() {
-        const key = this.keyInput.value.trim();
-        if(!key) return alert('Введите ключ чтобы очистить чат');
-        if(!confirm('Очистить историю?')) return;
-        const response = await fetch('/clear_chat',{
-            method:'POST',
-            headers:{'Content-Type':'application/json'},
-            body:JSON.stringify({password:key})
-        });
-        const result = await response.json();
-        if(result.status==='success'){
-            this.messagesContainer.innerHTML='<div class="typing-indicator">История очищена</div>';
-            this.lastMessageId=0;
-        } else alert('Ошибка очистки');
-    }
-    scrollToBottom() {
-        this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
     }
 }
-document.addEventListener('DOMContentLoaded',()=>new SecureChat());
 </script>
 </body>
 </html>

 <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, #38b2ac 0%, #48bb78 100%);
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 20px;
+    }
+    .chat-container {
+        width: 100%;
+        max-width: 480px;
+        height: 700px;
+        background: #f0fff4;
+        border-radius: 15px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+    .chat-header {
+        background: #2f855a;
+        color: white;
+        padding: 15px 20px;
+        text-align: center;
+        position: relative;
+    }
+    .security-badge {
+        position: absolute;
+        top: 10px;
+        right: 15px;
+        background: #68d391;
+        padding: 4px 8px;
+        border-radius: 12px;
+        font-size: 0.7em;
+        font-weight: bold;
+    }
+    .encryption-notice {
+        text-align: center;
+        padding: 8px;
+        background: #c6f6d5;
+        color: #22543d;
+        font-size: 0.8em;
+        border-bottom: 1px solid #9ae6b4;
+    }
+    .key-input {
+        width: 90%;
+        margin: 10px auto;
+        display: block;
+        padding: 10px 12px;
+        border: 2px solid #9ae6b4;
+        border-radius: 10px;
+        font-size: 14px;
+        text-align: center;
+        background: #fafffa;
+        transition: border-color 0.3s;
+    }
+    .key-input:focus {
+        border-color: #48bb78;
+        outline: none;
+    }
+    .messages-container {
+        flex: 1;
+        padding: 20px;
+        overflow-y: auto;
+        background: #f7faf7;
+    }
+    .message {
+        margin-bottom: 15px;
+        padding: 10px 15px;
+        border-radius: 15px;
+        max-width: 80%;
+        word-wrap: break-word;
+    }
+    .message.own {
+        background: #68d391;
+        color: #1a202c;
+        margin-left: auto;
+        border-bottom-right-radius: 5px;
+    }
+    .message.other {
+        background: #e6fffa;
+        color: #2f855a;
+        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 #c6f6d5;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+    .message-input {
+        width: 100%;
+        height: 70px;
+        resize: none;
+        padding: 12px 15px;
+        border: 2px solid #c6f6d5;
+        border-radius: 12px;
+        outline: none;
+        font-size: 15px;
+        line-height: 1.4;
+        transition: border-color 0.3s;
+        background: #fafffa;
+    }
+    .message-input:focus {
+        border-color: #48bb78;
+    }
+    .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: #48bb78;
+        color: white;
+    }
+    .send-button:hover { background: #38a169; }
+    .clear-button {
+        background: #e53e3e;
+        color: white;
+    }
+    .clear-button:hover { background: #c53030; }
+    .messages-container::-webkit-scrollbar { width: 6px; }
+    .messages-container::-webkit-scrollbar-thumb { background: #a0aec0; border-radius: 3px; }
+    .messages-container::-webkit-scrollbar-thumb:hover { background: #718096; }
 </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>
+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();
+    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 => {
+    // если это уже было добавлено — пропускаем
+    if (document.getElementById('msg-' + m.id)) return;
+    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.id = 'msg-' + m.id;  // уникальный ID для проверки
+    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>