-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
151 lines (142 loc) · 9.91 KB
/
index.html
File metadata and controls
151 lines (142 loc) · 9.91 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> chats | Whatsapp UI challenge </title>
<link rel="icon" href="https://static.whatsapp.net/rsrc.php/v4/yP/r/rYZqPCBaG70.png" type="image/png">
<!-- tailwindcss -->
<link rel="stylesheet" href="./assets/output.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-green-300 ">
<section class="bg-white mx-auto max-w-md">
<div class="bg-emerald-800 text-white px-3 py-5 flex items-center justify-between">
<h4 class="font-semibold">Whatsapp</h4>
<div class="flex">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14" class="fill-current"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0-14a1 1 0 1 0 2 0a1 1 0 1 0-2 0" class="fill-current"/></svg>
</div>
</div>
<ul class="bg-emerald-800 text-white px-3 py-2 flex items-center space-x-4 justify-between">
<li ><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="w-6"><path fill="currentColor" d="M12 18q2.075 0 3.538-1.462Q17 15.075 17 13q0-2.075-1.462-3.538Q14.075 8 12 8Q9.925 8 8.463 9.462Q7 10.925 7 13q0 2.075 1.463 3.538Q9.925 18 12 18Zm0-2q-1.25 0-2.125-.875T9 13q0-1.25.875-2.125T12 10q1.25 0 2.125.875T15 13q0 1.25-.875 2.125T12 16Zm6-6q.425 0 .712-.288Q19 9.425 19 9t-.288-.713Q18.425 8 18 8t-.712.287Q17 8.575 17 9t.288.712Q17.575 10 18 10ZM4 21q-.825 0-1.412-.587Q2 19.825 2 19V7q0-.825.588-1.412Q3.175 5 4 5h3.15L8.7 3.325q.15-.15.337-.238Q9.225 3 9.425 3h5.15q.2 0 .388.087q.187.088.337.238L16.85 5H20q.825 0 1.413.588Q22 6.175 22 7v12q0 .825-.587 1.413Q20.825 21 20 21Z" /></svg>
</li>
<li class="flex items-center flex-1 justify-between">
<div>
<div class="font-medium uppercase text-sm flex items-center space-x-2 relative">
<span class="">Chats</span> <span class="bg-white text-emerald-700 p-0.5 w-5 h-5 text-xs rounded-full flex items-center justify-center ">6</span>
<div class=" absolute bottom-0 right-1 top-8 w-full h-1 bg-white rounded"></div>
</div>
</div>
<div class="font-medium uppercase text-sm flex items-center space-x-2">
<a href="./status.html" class="text-gray-300"><span class="">status</span>
</a>
</div>
<div class="font-medium uppercase text-sm flex items-center space-x-2">
<a href="./call.html"><span class="text-gray-300">calls</span>
</a>
</div>
</li>
</ul>
<!-- chat Screen -->
<div class="bg-white relative">
<div class=" px-3 py-3 flex items-center space-x-4 hover:bg-gray-100 cursor-pointer">
<div>
<img src="./assets/20240217053429_IMG_9331-01.jpeg " alt="prasanth" class="rounded-full w-16 h-16">
</div>
<div class="flex-1">
<h4 class="font-semibold">Prasanth M ⚡</h4>
<p class="text-gray-600 text-sm">Good Morning...!❤️</p>
</div>
<div class="flex flex-col items-center space-y-1">
<span class="text-green-600 font-semibold text-sm">12:45 PM</span>
<span class="w-6 h-6 bg-green-600 flex items-center rounded-full text-white text-sm p-2 font-semibold">2</span>
</div>
</div>
<div class="px-3 py-3 flex items-center space-x-4 hover:bg-gray-100 cursor-pointer">
<div>
<img src="./assets/logeshsr.jpeg" alt="logeshsr" class="rounded-full w-16 h-16">
</div>
<div class="flex-1">
<h4 class="font-semibold">Logesh Sr VCET</h4>
<p class="text-gray-600 text-sm">Where are you.?😒</p>
</div>
<div class="flex flex-col items-center space-y-1">
<span class="text-green-600 font-semibold text-sm">12:00 PM</span>
<span class="w-6 h-6 bg-green-600 flex items-center rounded-full text-white text-sm p-2 font-semibold">4</span>
</div>
</div>
<div class="px-3 py-3 flex items-center space-x-4 hover:bg-gray-100 cursor-pointer">
<div>
<img src="./assets/ibram.jpeg" alt="ibram" class="rounded-full w-16 h-16">
</div>
<div class="flex-1">
<h4 class="font-semibold">Ibram 🤡</h4>
<p class="text-gray-600 text-sm">how are you..?😊</p>
</div>
<div class="flex flex-col items-center space-y-1">
<span class="text-green-600 font-semibold text-sm">9:45 AM</span>
<span class="w-6 h-6 bg-green-600 flex items-center rounded-full text-white text-sm p-2 font-semibold">1</span>
</div>
</div>
<div class="px-3 py-3 flex items-center space-x-4 hover:bg-gray-100 cursor-pointer">
<div>
<img src="https://ui-avatars.com/api/?name=Aravindh&background=random&color=fff" alt="prasanth" class="rounded-full">
</div>
<div class="flex-1">
<h4 class="font-semibold">Aravindh 🌀</h4>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" class="text-red-600"><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 12t5.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 14t-2.05.175T8 14.65v2.85q0 .25-.1.45t-.3.35l-2.9 2.2q-.3.225-.663.2t-.637-.3m8.55-9.05L7 6.4V9H5V3h6v2H8.4l3.525 3.525l5.65-5.65L19 4.3z"/></svg>
<p class="text-gray-600 text-sm ml-2">Missed voice call</p>
</div>
</div>
<div class="flex flex-col items-center space-y-1">
<span class="text-green-600 font-semibold text-sm">9:30 AM</span>
<span class="w-6 h-6 bg-green-600 flex items-center rounded-full text-white text-sm p-2 font-semibold">4</span>
</div>
</div>
<div class="px-3 py-3 flex items-center space-x-4 hover:bg-gray-100 cursor-pointer">
<div>
<img src="https://ui-avatars.com/api/?name=Rm+Kumar&background=random&color=fff" alt="prasanth" class="rounded-full">
</div>
<div class="flex-1">
<h4 class="font-semibold">Ram Kumar 🏂</h4>
<p class="text-gray-600 text-sm">Good night..!💤🛌</p>
</div>
<div class="flex flex-col items-center space-y-1">
<span class="text-green-600 font-semibold text-sm">11:00 PM</span>
<span class="w-6 h-6 bg-green-600 flex items-center rounded-full text-white text-sm p-2 font-semibold">1</span>
</div>
</div>
<div class="px-3 py-3 flex items-center space-x-4 hover:bg-gray-100 cursor-pointer">
<div>
<img src="./assets/nivetha.jpeg" alt="Nivetha" class="rounded-full w-16 h-16">
</div>
<div class="flex-1">
<h4 class="font-semibold">Nivetha Sis ❤️</h4>
<p class="text-gray-600 text-sm">Good Morning bro 🌄</p>
</div>
<div class="flex flex-col items-center space-y-1">
<span class="text-green-600 font-semibold text-sm">10:00 AM</span>
<span class="w-6 h-6 bg-green-600 flex items-center rounded-full text-white text-sm p-2 font-semibold">1</span>
</div>
</div>
<div class="px-3 py-3 flex items-center space-x-4 hover:bg-gray-100 cursor-pointer ">
<div>
<img src="./assets/elango.jpeg" alt="elango" class="rounded-full w-16 h-16">
</div>
<div class="flex-1">
<h4 class="font-semibold">Elango Frnd ❤️🔥</h4>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" class="text-gray-600"><path fill="currentColor" d="M22.11 21.46L2.39 1.73L1.11 3l2.95 2.95A9.95 9.95 0 0 0 2 12c0 5.5 4.5 10 10 10c2.28 0 4.37-.77 6.05-2.06l2.79 2.79zM12 20c-4.42 0-8-3.58-8-8c0-1.73.56-3.32 1.5-4.62L16.62 18.5A7.78 7.78 0 0 1 12 20M8.17 4.97L6.72 3.5C8.25 2.56 10.06 2 12 2c5.5 0 10 4.5 10 10c0 1.94-.56 3.75-1.5 5.28l-1.47-1.45c.62-1.14.97-2.44.97-3.83c0-4.42-3.58-8-8-8c-1.39 0-2.69.35-3.83.97"/></svg>
<p class="text-gray-600 text-sm ml-1"> This Message was deleted</p>
</div>
</div>
</div>
<div class="bg-emerald-800 w-12 h-12 rounded-full flex items-center justify-center absolute bottom-5 right-5 shadow-gray-500 hover:bg-emerald-900 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="text-white"><path fill="currentColor" d="M3 20.077V4.616q0-.691.463-1.153T4.615 3h14.77q.69 0 1.152.463T21 4.616v10.769q0 .69-.463 1.153T19.385 17H6.077zM6.5 13.5h7v-1h-7zm0-3h11v-1h-11zm0-3h11v-1h-11z"/></svg>
</div>
</div>
</section>
</body>
</html>