Hugging Face's logo

Spaces:
DmitrMakeev
/
api_g
Sleeping

App Files Community
DmitrMakeev commited on
Commit
a7689f9
·
verified ·
1 Parent(s): 2d5a5e5

Update chat.html

Browse files
Files changed (1) hide show
  1. chat.html +173 -13
chat.html CHANGED
@@ -6,19 +6,179 @@
6
  <title>Secure Chat (Local Encryption)</title>
7
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
8
  <style>
9
- body { font-family: sans-serif; background: #eef2f3; display: flex; justify-content: center; align-items: center; height: 100vh; }
10
- .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; }
11
- .chat-header { background: #2d3748; color: white; text-align: center; padding: 10px; font-weight: bold; }
12
- .messages { flex: 1; padding: 10px; overflow-y: auto; background: #f9fafb; }
13
- .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 12px; max-width: 80%; word-wrap: break-word; }
14
- .message.own { background: #4299e1; color: white; margin-left: auto; }
15
- .message.other { background: #e2e8f0; color: #2d3748; }
16
- .input-container { display: flex; padding: 10px; border-top: 1px solid #ddd; }
17
- #message-input { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 5px; }
18
- button { margin-left: 10px; padding: 8px 12px; border: none; border-radius: 5px; background: #3182ce; color: white; cursor: pointer; }
19
- #clear-btn { background: #e53e3e; }
20
- #key-input { width: 100%; padding: 8px; margin: 8px 0; border-radius: 5px; border: 1px solid #ccc; }
21
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  </head>
23
  <body>
24
  <div class="chat-container">
 
6
  <title>Secure Chat (Local Encryption)</title>
7
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
8
  <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ body {
16
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
17
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
+ height: 100vh;
19
+ display: flex;
20
+ justify-content: center;
21
+ align-items: center;
22
+ padding: 20px;
23
+ }
24
+
25
+ .chat-container {
26
+ width: 100%;
27
+ max-width: 450px;
28
+ height: 650px;
29
+ background: white;
30
+ border-radius: 15px;
31
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
32
+ display: flex;
33
+ flex-direction: column;
34
+ overflow: hidden;
35
+ }
36
+
37
+ .chat-header {
38
+ background: #2d3748;
39
+ color: white;
40
+ padding: 15px 20px;
41
+ text-align: center;
42
+ position: relative;
43
+ }
44
+
45
+ .security-badge {
46
+ position: absolute;
47
+ top: 10px;
48
+ right: 15px;
49
+ background: #48bb78;
50
+ padding: 4px 8px;
51
+ border-radius: 12px;
52
+ font-size: 0.7em;
53
+ font-weight: bold;
54
+ }
55
+
56
+ .messages-container {
57
+ flex: 1;
58
+ padding: 20px;
59
+ overflow-y: auto;
60
+ background: #f7fafc;
61
+ }
62
+
63
+ .message {
64
+ margin-bottom: 15px;
65
+ padding: 10px 15px;
66
+ border-radius: 15px;
67
+ max-width: 80%;
68
+ word-wrap: break-word;
69
+ }
70
+
71
+ .message.own {
72
+ background: #4299e1;
73
+ color: white;
74
+ margin-left: auto;
75
+ border-bottom-right-radius: 5px;
76
+ }
77
+
78
+ .message.other {
79
+ background: #e2e8f0;
80
+ color: #2d3748;
81
+ border-bottom-left-radius: 5px;
82
+ }
83
+
84
+ .message-info {
85
+ font-size: 0.8em;
86
+ opacity: 0.7;
87
+ margin-bottom: 3px;
88
+ }
89
+
90
+ .input-container {
91
+ padding: 15px 20px;
92
+ background: white;
93
+ border-top: 1px solid #e2e8f0;
94
+ display: flex;
95
+ gap: 10px;
96
+ align-items: center;
97
+ }
98
+
99
+ .message-input {
100
+ flex: 1;
101
+ padding: 12px 15px;
102
+ border: 2px solid #e2e8f0;
103
+ border-radius: 25px;
104
+ outline: none;
105
+ font-size: 14px;
106
+ transition: border-color 0.3s;
107
+ }
108
+
109
+ .message-input:focus {
110
+ border-color: #4299e1;
111
+ }
112
+
113
+ .send-button {
114
+ padding: 12px 20px;
115
+ background: #4299e1;
116
+ color: white;
117
+ border: none;
118
+ border-radius: 25px;
119
+ cursor: pointer;
120
+ font-weight: bold;
121
+ transition: background 0.3s;
122
+ }
123
+
124
+ .send-button:hover {
125
+ background: #3182ce;
126
+ }
127
+
128
+ .send-button:disabled {
129
+ background: #a0aec0;
130
+ cursor: not-allowed;
131
+ }
132
+
133
+ .clear-button {
134
+ padding: 8px 15px;
135
+ background: #e53e3e;
136
+ color: white;
137
+ border: none;
138
+ border-radius: 20px;
139
+ cursor: pointer;
140
+ font-size: 0.9em;
141
+ transition: background 0.3s;
142
+ margin-left: 10px;
143
+ }
144
+
145
+ .clear-button:hover {
146
+ background: #c53030;
147
+ }
148
+
149
+ .typing-indicator {
150
+ padding: 10px 15px;
151
+ font-style: italic;
152
+ color: #718096;
153
+ font-size: 0.9em;
154
+ }
155
+
156
+ .encryption-notice {
157
+ text-align: center;
158
+ padding: 8px;
159
+ background: #ebf8ff;
160
+ color: #2b6cb0;
161
+ font-size: 0.8em;
162
+ border-bottom: 1px solid #bee3f8;
163
+ }
164
+
165
+ .messages-container::-webkit-scrollbar {
166
+ width: 6px;
167
+ }
168
+
169
+ .messages-container::-webkit-scrollbar-track {
170
+ background: #f1f1f1;
171
+ }
172
+
173
+ .messages-container::-webkit-scrollbar-thumb {
174
+ background: #cbd5e0;
175
+ border-radius: 3px;
176
+ }
177
+
178
+ .messages-container::-webkit-scrollbar-thumb:hover {
179
+ background: #a0aec0;
180
+ }
181
+ </style>
182
  </head>
183
  <body>
184
  <div class="chat-container">