-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstatus.html
More file actions
111 lines (105 loc) · 7.44 KB
/
status.html
File metadata and controls
111 lines (105 loc) · 7.44 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Status | 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" class="text-gray-300"><span class="">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 relative">
<a href="./status.html" class=""><span>status</span>
</a>
<div class=" absolute bottom-0 right-1 top-8 w-full h-1 bg-white rounded"></div>
</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>
<div class="bg-white ">
<div class="px-3 pt-4 pb-2 flex items-center justify-between space-x-4">
<img src="./assets/mystaus.jpeg" alt="prasanth" class="rounded-full w-16 h-16 border-2 p-0.5 border-emerald-600">
<div class="flex-1 flex items-center justify-between">
<div>
<h4 class="font-semibold">My Status</h4>
<small class="text-gray-500">Today, 12:30 am</small>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" class="text-emerald-800"><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>
</div>
<div class="text-sm">
<h4 class=" px-3 py-2 text-gray-600 font-medium">Recent Updates</h4>
<div class=" px-3 py-2 flex items-center space-x-4 cursor-pointer hover:bg-gray-100">
<img src="./assets/logeshsr.jpeg" alt="logesh" class="rounded-full w-16 h-16 border-2 p-0.5 border-emerald-600">
<div>
<h4 class="font-semibold">Logesh Sr VCET</h4>
<small class="text-gray-600">Today, 1:40 am</small>
</div>
</div>
<div class=" px-3 py-2 flex items-center space-x-4 cursor-pointer hover:bg-gray-100">
<img src="./assets/mystatus1.jpeg" alt="" class="rounded-full w-16 h-16 border-2 p-0.5 border-emerald-600">
<div>
<h4 class="font-semibold">Nivetha Sis ❤️</h4>
<small class="text-gray-600">Today, 11:43 pm</small>
</div>
</div>
<div class=" px-3 py-2 flex items-center space-x-4 cursor-pointer hover:bg-gray-100">
<img src="./assets/mystatus2.jpeg" alt="kavinvcet" class="rounded-full border-2 w-16 h-16 border-emerald-600 p-0.5">
<div>
<h4 class="font-semibold">Kavin VCET⚡</h4>
<small class="text-gray-600">Today, 10:40 pm</small>
</div>
</div>
<div class=" px-3 py-2 flex items-center space-x-4 cursor-pointer hover:bg-gray-100">
<img src="./assets/mystatus5.jpeg" alt="" class="rounded-full w-16 h-16 border-2 p-0.5 border-emerald-600">
<div>
<h4 class="font-semibold">Aravindh 🌀</h4>
<small class="text-gray-600">Today, 9:43 pm</small>
</div>
</div>
</div>
<div class="text-sm">
<h4 class=" px-3 py-2 text-gray-600 font-medium">Viewed Updates</h4>
<div class=" px-3 py-2 flex items-center space-x-4 cursor-pointer hover:bg-gray-100">
<img src="./assets/mystatus3.jpeg" alt="Dhanush" class="rounded-full border-2 w-16 h-16 p-0.5">
<div>
<h4 class="font-semibold">Dhanush Frnd ❤️🔥</h4>
<small class="text-gray-600">Today, 9:10 pm</small>
</div>
</div>
<div class=" px-3 py-2 flex items-center space-x-4 cursor-pointer hover:bg-gray-100">
<img src="./assets/mystatus4.jpeg" alt="Ibram" class="rounded-full w-16 h-16 border-2 p-0.5">
<div>
<h4 class="font-semibold">Ibram 🤡</h4>
<small class="text-gray-600">Today, 7:30 pm</small>
</div>
</div>
</div>
</div>
</body>
</html>