api_g

Running

App Files Files Community

DmitrMakeev commited on Oct 17

Commit

a8800ca

verified ·

1 Parent(s): 297ec9e

Update chat.html

Browse files

Files changed (1) hide show

chat.html +26 -167

chat.html CHANGED Viewed

@@ -3,176 +3,34 @@
 <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">
@@ -329,3 +187,4 @@ 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>
 <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">
 </script>
 </body>
 </html>