-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
289 lines (265 loc) · 19.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- favicon -->
<link rel="shortcut icon"
href="https://e7.pngegg.com/pngimages/829/586/png-clipart-whatsapp-logo-whatsapp-logo-desktop-computer-icons-viber-grass-viber.png"
type="image/x-icon">
<title>Whatsapp UI challenge</title>
<link rel="stylesheet" href="./assests/css/output.css">
</head>
<body class="bg-emerald-900 py-5">
<!-- <img src="https://wallpapers.com/images/hd/whatsapp-icon-pattern-2xgv9df70fo6s9ex.jpg" alt="whatsapp-background" class="relative"> -->
<h1 class="font-semibold text-white text-center mb-5">Whatsapp UI challenge (Screen-1)</h1>
<section class="bg-white max-w-sm mx-auto ">
<!-- header section -->
<header>
<div class="bg-gray-900 text-gray-300 px-3 py-5 flex items-center justify-between space-x-2">
<a href="" class="hover:cursor-pointer"><h4 class="font-semibold text-lg">WhatsApp</h4></a>
<div class="flex gap-x-2">
<!-- Github icon -->
<a href="https://github.com/MUTHUAKALYA/whatsapp-ui-clone-using-tailwindcss " target="_blank"
title="Github-source" class="hover:cursor-pointer hover:text-emerald-600 me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="32" viewBox="0 0 32 32">
<path fill="currentColor" fill-rule="evenodd"
d="M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.71 3.71 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2Z" />
</svg>
</a>
<a href="" title="camera">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 24"
class="me-2 hover:cursor-pointer hover:text-emerald-600">
<path fill="currentColor"
d="M12 17.5q1.875 0 3.188-1.313T16.5 13q0-1.875-1.313-3.188T12 8.5q-1.875 0-3.188 1.313T7.5 13q0 1.875 1.313 3.188T12 17.5Zm0-2q-1.05 0-1.775-.725T9.5 13q0-1.05.725-1.775T12 10.5q1.05 0 1.775.725T14.5 13q0 1.05-.725 1.775T12 15.5ZM4 21q-.825 0-1.413-.588T2 19V7q0-.825.588-1.413T4 5h3.15L9 3h6l1.85 2H20q.825 0 1.413.588T22 7v12q0 .825-.588 1.413T20 21H4Zm0-2h16V7h-4.05l-1.825-2h-4.25L8.05 7H4v12Zm8-6Z" />
</svg>
</a>
<a href="" title="search">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 24"
class=" hover:cursor-pointer hover:text-emerald-600">
<path fill="currentColor"
d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0c.41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14z" />
</svg>
</a>
<a href="settings.html" title="view-settings">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 24"
class="hover:cursor-pointer hover:text-emerald-600">
<path fill="currentColor"
d="M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z" />
</svg>
</a>
</div>
</div>
<ul class="bg-gray-900 text-gray-500 px-3 py-2 flex items-center justify-between">
<li>
<div class="me-2">
<a href="community.html">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 24"
clas="relative">
<path fill="currentColor"
d="M10.27 12h3.46a1.5 1.5 0 0 0 1.48-1.75l-.3-1.79a2.951 2.951 0 0 0-5.82.01l-.3 1.79c-.15.91.55 1.74 1.48 1.74zm-8.61-.89c-.13.26-.18.57-.1.88c.16.69.76 1.03 1.53 1h1.95c.83 0 1.51-.58 1.51-1.29c0-.14-.03-.27-.07-.4c-.01-.03-.01-.05.01-.08c.09-.16.14-.34.14-.53c0-.31-.14-.6-.36-.82c-.03-.03-.03-.06-.02-.1c.07-.2.07-.43.01-.65a1.12 1.12 0 0 0-.99-.74a.09.09 0 0 1-.07-.03C5.03 8.14 4.72 8 4.37 8c-.3 0-.57.1-.75.26c-.03.03-.06.03-.09.02a1.24 1.24 0 0 0-1.7 1.03c0 .02-.01.04-.03.06c-.29.26-.46.65-.41 1.05c.03.22.12.43.25.6c.03.02.03.06.02.09zm14.58 2.54c-1.17-.52-2.61-.9-4.24-.9c-1.63 0-3.07.39-4.24.9A2.988 2.988 0 0 0 6 16.39V18h12v-1.61c0-1.18-.68-2.26-1.76-2.74zm-15.02.93A2.01 2.01 0 0 0 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29c-.37-.06-.74-.1-1.13-.1c-.99 0-1.93.21-2.78.58zm21.56 0A6.95 6.95 0 0 0 20 14c-.39 0-.76.04-1.13.1c.4.68.63 1.46.63 2.29V18H24v-1.57c0-.81-.48-1.53-1.22-1.85zM22 11v-.5c0-1.1-.9-2-2-2h-2c-.42 0-.65.48-.39.81l.7.63c-.19.31-.31.67-.31 1.06c0 1.1.9 2 2 2s2-.9 2-2z" />
</svg>
</a>
</div>
</li>
<li class="flex items-center flex-1 justify-between">
<div class="ml-5 font-medium text-sm flex items-center justify-center relative">
<span class="text-emerald-600"> Chats</span>
<span
class=" bg-emerald-600 text-gray-700 text-xs p-0.5 rounded-full w-4 h-4 flex items-center justify-center ml-2">2</span>
<div class="absolute top-8 bg-emerald-600 w-24 h-1"></div>
</div>
<div class="ml-3 font-medium text-sm flex items-center"><a
href="about.html"><span>Updates</span></a>
</div>
<div class="ml-3 font-medium text-sm flex items-center">
<a href="calls.html"><span class="pe-6"> Calls
</span></a>
</div>
</li>
</ul>
</header>
<!-- chat screen -->
<div class="bg-gray-950">
<!-- first chat -->
<div class="flex items-center px-3 py-4 hover:bg-gray-800 hover:cursor-pointer">
<div>
<img src="https://ui-avatars.com/api/?name=Anusha+Lakshmi&?background=random" alt="Anusha Lakshmi"
class="rounded-full w-12 h-12">
</div>
<div class="px-3 flex-1">
<h4 class="font-medium text-base text-gray-300">Anusha</h4>
<p class="text-emerald-600 font-medium text-sm">typing....</p>
</div>
<div class="flex flex-col items-center space-y-1">
<span class="text-emerald-600 font-semibold text-xs">06:59 pm</span>
<span
class="w-1 h-1 bg-emerald-600 flex items-center justify-center text-gray-800 p-2 rounded-full text-xs font-semibold">1</span>
</div>
</div>
<!-- second chat -->
<div class="flex items-center px-3 py-4 hover:bg-gray-800 hover:cursor-pointer">
<div class=" border-gray-500 rounded-full">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcmyBoBzdfJRDenikktMlFmhd3j6UV1_UO9A&usqp=CAU"
alt="priya" class="w-12 h-12 rounded-full border-2 border-green-500 p-0.5">
</div>
<div class="px-3 flex-1">
<h4 class="font-medium text-base text-gray-300">Priya</h4>
<div class="text-gray-500 text-sm flex items-center">
<!-- double-tick icon appears here -->
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m1.75 9.75l2.5 2.5m3.5-4l2.5-2.5m-4.5 4l2.5 2.5l6-6.5"/></svg>
</div>
<!-- sticker icon appears here -->
<div class="px-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><g fill="currentColor"><path fill-rule="evenodd" d="m16.5 21.839l-.038.008h-.004c-.016.004-.031.008-.047.01l-.002.001l.05-.01l.041-.01Z" clip-rule="evenodd"/><path d="M22 15c-.584 0-1.076 0-1.5.008c-.928.016-1.528.069-2.045.237a5 5 0 0 0-3.21 3.21c-.168.517-.22 1.117-.237 2.045C15 20.924 15 21.416 15 22c.483 0 .954-.049 1.41-.142l.048-.01h.004l.038-.01a7.01 7.01 0 0 0 5.339-5.338c.105-.483.161-.985.161-1.5Z"/><path d="M2 12c0 4.714 0 7.071 1.464 8.535C4.93 22 7.286 22 12 22h1.5v-.26c-.001-1.607-.002-2.765.318-3.749a6.5 6.5 0 0 1 4.173-4.173c.984-.32 2.142-.319 3.75-.318H22V12c0-4.714 0-7.071-1.465-8.536C19.072 2 16.714 2 12 2S4.929 2 3.464 3.464C2 4.93 2 7.286 2 12Z"/></g></svg>
</div>
<div>
<span>Sticker</span>
</div>
</div>
</div>
<div class="flex flex-col items-center space-y-1">
<span class="text-emerald-600 font-semibold text-xs">04:30 pm</span>
<span
class="w-1 h-1 bg-emerald-600 flex items-center justify-center text-gray-950 p-2 rounded-full text-xs font-semibold">4</span>
</div>
</div>
<!-- third person chat -->
<div class="flex px-3 py-4 hover:bg-gray-800 hover:cursor-pointer">
<div>
<img src="https://cdn21.picryl.com/photo/1600/01/01/krishna-subduing-the-naga-kaliya-163f9f-1024.jpg"
alt="Krishna Mathu profile" class="rounded-full w-12 h-12 border-2 border-green-500 p-0.5">
</div>
<div class="px-3 flex-1">
<h4 class="font-medium text-base text-gray-300">Krishna Mathumitha</h4>
<div class="text-blue-500 flex items-center">
<!-- double-tick icon appears here -->
<div >
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m1.75 9.75l2.5 2.5m3.5-4l2.5-2.5m-4.5 4l2.5 2.5l6-6.5"/></svg>
</div>
<div class="px-1">
<!-- voice icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M12 15c1.66 0 2.99-1.34 2.99-3L15 6c0-1.66-1.34-3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 15 6.7 12H5c0 3.42 2.72 6.23 6 6.72V22h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/></svg>
</div>
<div class="text-gray-500">
<span>1:08</span>
</div>
</div>
</div>
<div class="flex space-y-1">
<span class="text-gray-500 font-semibold text-xs pt-1">01:00 pm</span>
</div>
</div>
<!-- fourth person -->
<div class="flex justify-between items-start px-3 py-4 hover:bg-gray-800 hover:cursor-pointer">
<div class="w-12 h-12 rounded-full">
<img src="https://cdn.creazilla.com/illustrations/1662107/mother-child-mother-baby-illustration-md.jpeg"
alt="karthika profile photo" class="rounded-full border-2 border-gray-500 p-0.5">
</div>
<div class="px-3 flex-1">
<h4 class="font-medium text-base text-gray-300">karthika </h4>
<div class="text-gray-500 flex items-center">
<!-- double-tick icon appears here -->
<div >
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m1.75 9.75l2.5 2.5m3.5-4l2.5-2.5m-4.5 4l2.5 2.5l6-6.5"/></svg>
</div>
<!-- video icon appears here -->
<div class="px-1">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20q-.825 0-1.413-.588T2 18V6q0-.825.588-1.413T4 4h12q.825 0 1.413.588T18 6v4.5l4-4v11l-4-4V18q0 .825-.588 1.413T16 20H4Z"/></svg>
</div>
<div class="text-sm font-medium">
<span>2:26</span>
</div>
</div>
</div>
<section class="flex justify-center items-end">
<span class="text-gray-500 font-semibold text-xs">11:08 am</span>
</section>
</div>
<!-- fifth person -->
<div class="flex px-3 py-4 hover:bg-gray-800 hover:cursor-pointer">
<div class="w-12 h-12 rounded-full">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPGg7POv5p8Jxd8xxkvq9Mfry7UWpNYpv_XQ&usqp=CAU"
alt="karthika profile photo" class="rounded-full border-2 border-gray-500 p-0.5">
</div>
<div class="px-3 flex-1 items-center">
<h4 class="font-medium text-base text-gray-300">Yuvaa 🥱</h4>
<div class="flex items-center">
<!-- missed call icon appears here -->
<div class="text-red-700 flex px-1">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m3.4 20.4l-2.3-2.25q-.3-.3-.3-.7t.3-.7q2.2-2.375 5.075-3.562T12 12q2.95 0 5.813 1.188T22.9 16.75q.3.3.3.7t-.3.7l-2.3 2.25q-.275.275-.638.3t-.662-.2l-2.9-2.2q-.2-.15-.3-.35t-.1-.45v-2.85q-.95-.3-1.95-.475T12 14q-1.05 0-2.05.175T8 14.65v2.85q0 .25-.1.45t-.3.35l-2.9 2.2q-.3.225-.663.2t-.637-.3ZM6 9q-.425 0-.713-.287T5 8V4q0-.425.288-.713T6 3h4q.425 0 .713.288T11 4q0 .425-.288.713T10 5H8.4l3.525 3.525l4.95-4.95q.3-.3.713-.3t.712.3q.3.3.3.713T18.3 5l-4.925 4.925q-.575.575-1.425.575t-1.425-.575L7 6.4V8q0 .425-.288.713T6 9Z"/></svg>
</div>
<div class="flex text-sm">
<p class="text-gray-500">missed voice-call</p>
</div>
</div>
</div>
<div class="flex space-y-1">
<span class="text-gray-500 font-semibold text-xs">Yesterday</span>
</div>
</div>
<!-- sixth person -->
<div class="flex px-3 py-4 hover:bg-gray-800 hover:cursor-pointer">
<div class="w-12 h-12 rounded-full">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR40OEV5pgHjEhw4j9T1xYIN_IMNO3fJ7JCjQ&usqp=CAU"
alt="karthika profile photo" class="rounded-full object-cover border-2 border-green-500 p-0.5">
</div>
<div class="px-3 flex-1">
<h4 class="font-medium text-base text-gray-300">Madhavaa 🤣</h4>
<div class="text-gray-500 text-sm flex items-center">
<p class="text-xs">
<div class="px-1 text-blue-600 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m17.657 7.171l-5.303 5.304l-1.414-1.415l5.303-5.303l1.414 1.414Zm5.657 0L12.708 17.778l-6.364-6.364L7.758 10l4.95 4.95L21.9 5.757l1.414 1.414ZM2.101 10l4.95 4.95l.353-.354l1.414 1.414l-1.768 1.768l-6.363-6.364L2.1 10Z"/></svg>
</div>
cheri thambiee
</p>
</div>
</div>
<div class="flex space-y-1">
<span class="text-gray-500 font-semibold text-xs">23/09/23</span>
</div>
</div>
<!-- seventh person -->
<div class="flex px-3 py-4 hover:bg-gray-800 hover:cursor-pointer">
<div class="w-12 h-12 rounded-full">
<img src="https://ui-avatars.com/api/?background=random&name=unknwn"
alt="unknown-user" class="rounded-full">
</div>
<div class="px-3 flex-1">
<h4 class="font-medium text-base text-gray-300">+91 12345 67890</h4>
<div class="flex text-gray-500 text-sm">
<p class="text-gray-500 text-sm">You reacted 👍 to "
<div class="flex items-center px-1">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
class="text-gray-500">
<path fill="currentColor"
d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" />
</svg>
</div>
photo"</p>
</div>
</div>
<div class="flex items-start justify-start space-y-1">
<span class="text-gray-500 font-semibold text-xs">09/09/23</span>
</div>
</div>
</div>
<!-- Footer Section -->
<footer>
<div class="bg-gray-950">
<hr class="border-gray-700">
<div class="text-gray-400 px-3 py-4 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="32" viewBox="0 0 512 512">
<path
d="M86.4 480h339.2c12.3 0 22.4-9.9 22.4-22.1V246c0-12.2-10-22-22.4-22H404v-30.9c0-41.5-16.2-87.6-42.6-115.4-26.3-27.8-64-45.7-105.3-45.7h-.1-.1c-41.3 0-79 17.9-105.3 45.6C124.2 105.4 108 151.5 108 193v31H86.4C74 224 64 233.9 64 246v211.9c0 12.2 10 22.1 22.4 22.1zM161 193.1c0-27.3 9.9-61.1 28.1-80.3v-.3C206.7 93.9 231 83 255.9 83h.2c24.9 0 49.2 10.9 66.8 29.5v.2l-.1.1c18.3 19.2 28.1 53 28.1 80.3V224H161v-30.9z"
fill="currentColor" />
</svg>
<p class="text-sm ml-1"> Your personal calls are <span class="text-emerald-600 text-sm hover:cursor-pointer">end-to-end
encrypted</span></p>
</div>
</div>
</footer>
</section>
</body>
</html>