-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
314 lines (285 loc) · 12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/logo.png" type="image/x-icon">
<title>Web-Whatsapp</title>
<style>
*{
margin: 0;
padding: 0;
}
#logo_container{
height: 97vh;
width: 98vw;
/* display: flex; */
display: none;
align-items: center;
justify-content: center;
}
.logo{
height: 150px;
width: 151px;
/* background-image: url(logo.png); */
background-size: cover;
}
nav{
height: 45px;
background-color: #d5fbdf;
padding: 2px;
}
#logo_nav{
height: 45px;
width: 45px;
background-size: cover;
}
li{
list-style-type: none;
display: flex;
}
#title{
/* color: aliceblue; */
font-weight: 800;
margin-right: 2px;
}
.option{
font-size: 20px;
position: relative;
padding: 10px;
}
#logout{
margin-left: auto;
color: rgb(192, 9, 9);
cursor: pointer;
}
#logout:hover{
text-shadow: 0px 0px 20px rgb(72, 0, 0);
color: rgb(153, 3, 3);
}
#container_panes{
display: flex;
}
#left{
height: 91.57vh;
width: 25vw;
background-color: #b1ccbd3e;
border: solid 0.1px green;
overflow-y: auto;
}
#right{
height: 91.57vh;
width: 75vw;
}
#msg_container{
height: 91.57vh;
width: 75vw;
background-color: #f4f2e9;
overflow-y: auto;
}
.chat_title{
color: rgb(3, 3, 121);
font-family: sans-serif;
padding: 10px;
font-size: 19px;
position: relative;
top: 7px;
}
.name_body{
height: 84px;
border-radius: 11px;
margin: 5px;
display: flex;
align-items: center;
}
.name_body:hover{
background-color: #fffcfc;
}
.name_body_circle{
height: 50px;
width: 50px;
background-color:rgb(252, 252, 252);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 7px;
}
.name_body_name{
font-family: sans-serif;
}
.right_container{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#right_upper{
height: 60px;
background-color: white;
display: flex;
align-items: center;
border: 0.1px solid gray;
}
#right_lower{
height: 60px;
background-color: white;
border: solid 0.1px gray;
display: flex;
}
#input{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 20px;
}
.send_btn{
height: 100%;
width: 6%;
background-repeat: no-repeat;
cursor: pointer;
}
.message_you{
min-height: 50px;
max-height: 500px;
width: 200px;
background-color: rgb(207, 248, 206);
float: right;
clear: both;
margin: 10px;
border-radius: 10px;
border: 0.1px solid black;
padding: 10px;
overflow-y: auto;
}
.message_others{
min-height: 50px;
max-height: 500px;
width: 200px;
background-color: white;
float: left;
clear: both;
margin: 10px;
border-radius: 10px;
border: solid 0.1px black;
padding: 10px;
overflow-y: auto;
}
@media(min-width:600px) and (max-width:980px){
.send_btn{
width: 10%;
}
}
@media(min-width:430px) and (max-width:600px){
.send_btn{
width: 15%;
}
}
@media (max-width:430px){
.send_btn{
width: 20%;
}
}
@media (max-width:500px){
#left{
display: none;
}
#right{
width: 100%;
}
#msg_container{
width: 100%;
}
}
</style>
</head>
<body onload="showall()">
<div id="logo_container">
<div class="logo">
</div>
</div>
<div id="container">
<nav>
<li>
<div id="logo_nav">
<?xml version="1.0" encoding="utf-8"?>
<svg width="40px" height="40px" viewBox="-2.73 0 1225.016 1225.016" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="#E0E0E0" d="M1041.858 178.02C927.206 63.289 774.753.07 612.325 0 277.617 0 5.232 272.298 5.098 606.991c-.039 106.986 27.915 211.42 81.048 303.476L0 1225.016l321.898-84.406c88.689 48.368 188.547 73.855 290.166 73.896h.258.003c334.654 0 607.08-272.346 607.222-607.023.056-162.208-63.052-314.724-177.689-429.463zm-429.533 933.963h-.197c-90.578-.048-179.402-24.366-256.878-70.339l-18.438-10.93-191.021 50.083 51-186.176-12.013-19.087c-50.525-80.336-77.198-173.175-77.16-268.504.111-278.186 226.507-504.503 504.898-504.503 134.812.056 261.519 52.604 356.814 147.965 95.289 95.36 147.728 222.128 147.688 356.948-.118 278.195-226.522 504.543-504.693 504.543z"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="609.77" y1="1190.114" x2="609.77" y2="21.084"><stop offset="0" stop-color="#20b038"/><stop offset="1" stop-color="#60d66a"/></linearGradient><path fill="url(#a)" d="M27.875 1190.114l82.211-300.18c-50.719-87.852-77.391-187.523-77.359-289.602.133-319.398 260.078-579.25 579.469-579.25 155.016.07 300.508 60.398 409.898 169.891 109.414 109.492 169.633 255.031 169.57 409.812-.133 319.406-260.094 579.281-579.445 579.281-.023 0 .016 0 0 0h-.258c-96.977-.031-192.266-24.375-276.898-70.5l-307.188 80.548z"/><image overflow="visible" opacity=".08" width="682" height="639" xlink:href="FCC0802E2AF8A915.png" transform="translate(270.984 291.372)"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M462.273 349.294c-11.234-24.977-23.062-25.477-33.75-25.914-8.742-.375-18.75-.352-28.742-.352-10 0-26.25 3.758-39.992 18.766-13.75 15.008-52.5 51.289-52.5 125.078 0 73.797 53.75 145.102 61.242 155.117 7.5 10 103.758 166.266 256.203 226.383 126.695 49.961 152.477 40.023 179.977 37.523s88.734-36.273 101.234-71.297c12.5-35.016 12.5-65.031 8.75-71.305-3.75-6.25-13.75-10-28.75-17.5s-88.734-43.789-102.484-48.789-23.75-7.5-33.75 7.516c-10 15-38.727 48.773-47.477 58.773-8.75 10.023-17.5 11.273-32.5 3.773-15-7.523-63.305-23.344-120.609-74.438-44.586-39.75-74.688-88.844-83.438-103.859-8.75-15-.938-23.125 6.586-30.602 6.734-6.719 15-17.508 22.5-26.266 7.484-8.758 9.984-15.008 14.984-25.008 5-10.016 2.5-18.773-1.25-26.273s-32.898-81.67-46.234-111.326z"/><path fill="#FFF" d="M1036.898 176.091C923.562 62.677 772.859.185 612.297.114 281.43.114 12.172 269.286 12.039 600.137 12 705.896 39.633 809.13 92.156 900.13L7 1211.067l318.203-83.438c87.672 47.812 186.383 73.008 286.836 73.047h.255.003c330.812 0 600.109-269.219 600.25-600.055.055-160.343-62.328-311.108-175.649-424.53zm-424.601 923.242h-.195c-89.539-.047-177.344-24.086-253.93-69.531l-18.227-10.805-188.828 49.508 50.414-184.039-11.875-18.867c-49.945-79.414-76.312-171.188-76.273-265.422.109-274.992 223.906-498.711 499.102-498.711 133.266.055 258.516 52 352.719 146.266 94.195 94.266 146.031 219.578 145.992 352.852-.118 274.999-223.923 498.749-498.899 498.749z"/></svg>
</div>
<div id="title" class="option">Whatsapp</div>
<div id="logout" class="option">Logout</div>
</li>
</nav>
<div id="container_panes">
<div id="left">
<div id="left_container">
<span class="chat_title">Chat</span>
</div>
</div>
<div id="right">
<div class="right_container">
<div id="right_upper">
<div class="name_body_circle"><span><?xml version="1.0" encoding="utf-8"?><svg width="60px" height="60px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.5" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" fill="#1C274C"/><path d="M16.807 19.0112C15.4398 19.9504 13.7841 20.5 12 20.5C10.2159 20.5 8.56023 19.9503 7.193 19.0111C6.58915 18.5963 6.33109 17.8062 6.68219 17.1632C7.41001 15.8302 8.90973 15 12 15C15.0903 15 16.59 15.8303 17.3178 17.1632C17.6689 17.8062 17.4108 18.5964 16.807 19.0112Z" fill="#1C274C"/><path d="M12 12C13.6569 12 15 10.6569 15 9C15 7.34315 13.6569 6 12 6C10.3432 6 9.00004 7.34315 9.00004 9C9.00004 10.6569 10.3432 12 12 12Z" fill="#1C274C"/></svg></span></div>
<span class="name_body_name" id="nameop"></span>
</div>
<div id="msg_container">
</div>
<div id="right_lower">
<input type="text" id="input">
<div class="send_btn" onclick="send()">
<?xml version="1.0" encoding="utf-8"?>
<svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 12L4 4L6 12M20 12L4 20L6 12M20 12H6" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.4/socket.io.js"></script>
<script>
let namebody=document.getElementById('nameop');
function showall(){
setTimeout(()=>{
logo_container.style.display="none"
container.style.display="block"
},2000)
}
let socket = io();
let name= prompt('enter your name');
namebody.innerText=name;
socket.emit('name', name);
socket.on('sname', (nam) => {
let div1 = document.createElement('div');
let div2 = document.createElement('div');
let sp1 = document.createElement('span');
let sp2 = document.createElement('span');
left_container.appendChild(div1);
div1.classList.add('name_body');
div1.appendChild(div2);
div2.classList.add('name_body_circle');
div2.appendChild(sp1);
sp1.innerHTML='<?xml version="1.0" encoding="utf-8"?><svg width="60px" height="60px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.5" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" fill="#1C274C"/><path d="M16.807 19.0112C15.4398 19.9504 13.7841 20.5 12 20.5C10.2159 20.5 8.56023 19.9503 7.193 19.0111C6.58915 18.5963 6.33109 17.8062 6.68219 17.1632C7.41001 15.8302 8.90973 15 12 15C15.0903 15 16.59 15.8303 17.3178 17.1632C17.6689 17.8062 17.4108 18.5964 16.807 19.0112Z" fill="#1C274C"/><path d="M12 12C13.6569 12 15 10.6569 15 9C15 7.34315 13.6569 6 12 6C10.3432 6 9.00004 7.34315 9.00004 9C9.00004 10.6569 10.3432 12 12 12Z" fill="#1C274C"/></svg>';
div1.appendChild(sp2);
sp2.classList.add('name_body_name');
sp2.innerText=nam;
})
function send() {
socket.emit('message', input.value);
let div = document.createElement('div');
msg_container.appendChild(div);
div.classList.add('message_you');
div.innerHTML = input.value;
input.value = '';
}
socket.on('smessage', (messag) => {
let inp = document.createElement('div');
msg_container.appendChild(inp);
inp.classList.add('message_others');
inp.innerHTML = messag.n+":"+ messag.m;
})
</script>
</html>