-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcall.html
More file actions
171 lines (157 loc) · 13.9 KB
/
call.html
File metadata and controls
171 lines (157 loc) · 13.9 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calls | 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 ">
<a href="./index.html"><span class="text-gray-300">Chats</span></a>
<span class="bg-gray-300 text-emerald-700 p-0.5 w-5 h-5 text-xs rounded-full flex items-center justify-center ">6</span>
</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 relative">
<a href="./call.html"><span class="">calls</span>
</a>
<div class=" absolute bottom-0 right-1 top-8 w-full h-1 bg-white rounded"></div>
</div>
</li>
</ul>
<!-- chat Screen -->
<div class="bg-white">
<div class="text-sm">
<div class="flex items-center justify-between">
<h4 class=" px-3 py-2 text-gray-600 font-medium">Favourites</h4>
<h4 class="contrast-less:font-light">More</h4>
</div>
<div class=" px-3 py-2 flex items-center space-x-4 cursor-pointer hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="bg-gray-400 rounded-full w-16 h-16 p-2 text-gray-50"><path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3s1.34 3 3 3m-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5S5 6.34 5 8s1.34 3 3 3m0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5m8 0c-.29 0-.62.02-.97.05c1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5"/></svg>
<div class="flex-1 flex justify-between ">
<div>
<h4 class="font-semibold">Group</h4>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" class="text-emerald-700"><path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10.01 10.01 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8.01 8.01 0 0 1-8 8m0-8.5a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0v-3a1 1 0 0 0-1-1m0-4a1.25 1.25 0 1 0 1.25 1.25A1.25 1.25 0 0 0 12 7.5"/></svg>
</div>
</div>
</div>
</div>
<div class="text-sm">
<h4 class=" px-3 py-2 text-gray-600 font-medium">Recent</h4>
<div class=" px-3 py-2 flex items-center space-x-4 cursor-pointer hover:bg-gray-100">
<img src="https://ui-avatars.com/api/?name=Aravindh&background=random&color=fff" alt="aravindh" class="rounded-full w-16 h-16 p-0.5">
<div class=" flex-1 flex justify-between items-center">
<div>
<h4 class="font-semibold text-red-700">Aravindh 🌀</h4>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="text-red-700 mr-1"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18 6L6 18m0 0V9m0 9h9"/></svg>
<small class="text-gray-600">Today, 9:30 am</small>
</div>
</div>
<div >
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" class="text-emerald-600"><path fill="currentColor" d="M19 17.47c-.88-.07-1.75-.22-2.6-.45l-1.19 1.19c1.2.41 2.48.67 3.8.75v-1.49zM5.03 5c.09 1.32.35 2.59.75 3.8l1.2-1.2c-.23-.84-.38-1.71-.44-2.6z" opacity=".3"/><path fill="currentColor" d="M9.07 7.57A11.4 11.4 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1c0 9.39 7.61 17 17 17c.55 0 1-.45 1-1v-3.49c0-.55-.45-1-1-1c-1.24 0-2.45-.2-3.57-.57a.8.8 0 0 0-.31-.05c-.26 0-.51.1-.71.29l-2.2 2.2a15.15 15.15 0 0 1-6.59-6.59l2.2-2.2c.28-.28.36-.67.25-1.02m7.33 9.45c.85.24 1.72.39 2.6.45v1.49c-1.32-.09-2.59-.35-3.8-.75zM5.79 8.8c-.41-1.21-.67-2.48-.76-3.8h1.5a13 13 0 0 0 .46 2.59z"/></svg>
</div>
</div>
</div>
<div class=" px-3 py-2 flex items-center space-x-4 cursor-pointer hover:bg-gray-100">
<img src="./assets/ibram.jpeg" alt="ibram" class="rounded-full w-16 h-16 p-0.5">
<div class=" flex-1 flex justify-between items-center">
<div>
<h4 class="font-semibold ">Ibram 🤡</h4>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="text-emerald-700 mr-1"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"/></svg>
<small class="text-gray-600">15 October, 9:00 am</small>
</div>
</div>
<div >
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" class="text-emerald-600"><path fill="currentColor" d="M19 17.47c-.88-.07-1.75-.22-2.6-.45l-1.19 1.19c1.2.41 2.48.67 3.8.75v-1.49zM5.03 5c.09 1.32.35 2.59.75 3.8l1.2-1.2c-.23-.84-.38-1.71-.44-2.6z" opacity=".3"/><path fill="currentColor" d="M9.07 7.57A11.4 11.4 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1c0 9.39 7.61 17 17 17c.55 0 1-.45 1-1v-3.49c0-.55-.45-1-1-1c-1.24 0-2.45-.2-3.57-.57a.8.8 0 0 0-.31-.05c-.26 0-.51.1-.71.29l-2.2 2.2a15.15 15.15 0 0 1-6.59-6.59l2.2-2.2c.28-.28.36-.67.25-1.02m7.33 9.45c.85.24 1.72.39 2.6.45v1.49c-1.32-.09-2.59-.35-3.8-.75zM5.79 8.8c-.41-1.21-.67-2.48-.76-3.8h1.5a13 13 0 0 0 .46 2.59z"/></svg>
</div>
</div>
</div>
<div class=" px-3 py-2 flex items-center space-x-4 cursor-pointer hover:bg-gray-100">
<img src="./assets/elango.jpeg" alt="ibram" class="rounded-full w-16 h-16 p-0.5">
<div class=" flex-1 flex justify-between items-center">
<div>
<h4 class="font-semibold ">Elango frnd ❤️🔥</h4>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="text-emerald-700 mr-1"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"/></svg>
<small class="text-gray-600">14 September, 12:00 am</small>
</div>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" class="text-emerald-700"><path fill="currentColor" d="M2 20V4h16v6.5l4-4v11l-4-4V20zm2-2h12V6H4zm0 0V6z"/></svg>
</div>
</div>
</div>
<div class=" px-3 py-2 flex items-center space-x-4 cursor-pointer hover:bg-gray-100">
<img src="./assets/nivetha.jpeg" alt="ibram" class="rounded-full w-16 h-16 p-0.5">
<div class=" flex-1 flex justify-between items-center">
<div>
<h4 class="font-semibold ">Nivetha ❤️</h4>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="text-emerald-700 mr-1"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"/></svg>
<small class="text-gray-600">11 September, 9:09 pm</small>
</div>
</div>
<div >
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" class="text-emerald-600"><path fill="currentColor" d="M19 17.47c-.88-.07-1.75-.22-2.6-.45l-1.19 1.19c1.2.41 2.48.67 3.8.75v-1.49zM5.03 5c.09 1.32.35 2.59.75 3.8l1.2-1.2c-.23-.84-.38-1.71-.44-2.6z" opacity=".3"/><path fill="currentColor" d="M9.07 7.57A11.4 11.4 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1c0 9.39 7.61 17 17 17c.55 0 1-.45 1-1v-3.49c0-.55-.45-1-1-1c-1.24 0-2.45-.2-3.57-.57a.8.8 0 0 0-.31-.05c-.26 0-.51.1-.71.29l-2.2 2.2a15.15 15.15 0 0 1-6.59-6.59l2.2-2.2c.28-.28.36-.67.25-1.02m7.33 9.45c.85.24 1.72.39 2.6.45v1.49c-1.32-.09-2.59-.35-3.8-.75zM5.79 8.8c-.41-1.21-.67-2.48-.76-3.8h1.5a13 13 0 0 0 .46 2.59z"/></svg>
</div>
</div>
</div>
<div class=" px-3 py-2 flex items-center space-x-4 cursor-pointer hover:bg-gray-100">
<img src="https://ui-avatars.com/api/?name=Kavin&background=random&color=fff" alt="ibram" class="rounded-full w-16 h-16 p-0.5">
<div class=" flex-1 flex justify-between items-center">
<div>
<h4 class="font-semibold ">Kavin VCET⚡</h4>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="text-emerald-700 mr-1"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"/></svg>
<small class="text-gray-600">22 May, 12:30 pm</small>
</div>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" class="text-emerald-700"><path fill="currentColor" d="M2 20V4h16v6.5l4-4v11l-4-4V20zm2-2h12V6H4zm0 0V6z"/></svg>
</div>
</div>
</div>
<div class=" px-3 py-2 flex items-center space-x-4 cursor-pointer hover:bg-gray-100">
<img src="https://ui-avatars.com/api/?name=Ram+kumar&background=random &color=fff" alt="ibram" class="rounded-full w-16 h-16 p-0.5">
<div class=" flex-1 flex justify-between items-center">
<div>
<h4 class="font-semibold ">Ram Kumar 🏂</h4>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="text-emerald-700 mr-1"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"/></svg>
<small class="text-gray-600">2 March, 11:20 am</small>
</div>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" class="text-emerald-700"><path fill="currentColor" d="M2 20V4h16v6.5l4-4v11l-4-4V20zm2-2h12V6H4zm0 0V6z"/></svg>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>