-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstatus.html
136 lines (128 loc) · 6.81 KB
/
status.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>STATUS</title>
<!-- fabicon -->
<link rel="shortcut icon" href="./assets/icons/favicon.png" type="image/x-icon"/>
<!-- tailwind css -->
<link rel="stylesheet" href="./assets/css/output.css" />
<!-- css file -->
<link rel="stylesheet" href="./assets/css/status.css" type="text/css" />
<!-- icon link -->
<link
href="https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css"
rel="stylesheet"
/>
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!-- whatsapp header section -->
<header>
<section class="Whatsapp-header">
<div class="header-section">
<div>
<h1>WHATSAPP</h1>
</div>
<div class="header-icons">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24">
<path fill="currentColor"
d="M12 17.5q1.875 0 3.188-1.312T16.5 13q0-1.875-1.312-3.187T12 8.5q-1.875 0-3.187 1.313T7.5 13q0 1.875 1.313 3.188T12 17.5m0-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.5M4 21q-.825 0-1.412-.587T2 19V7q0-.825.588-1.412T4 5h3.15L9 3h6l1.85 2H20q.825 0 1.413.588T22 7v12q0 .825-.587 1.413T20 21zm0-2h16V7h-4.05l-1.825-2h-4.25L8.05 7H4zm8-6" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24">
<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.49zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24">
<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-2" />
</svg>
</div>
</div>
<!-- Header components -->
<div class="header-components">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24">
<path fill="currentColor"
d="M7.5 8a3 3 0 1 0 0-6a3 3 0 0 0 0 6M2 10.768C2 9.79 2.791 9 3.768 9h4.767A3.981 3.981 0 0 0 8 11a3.99 3.99 0 0 0 1.354 3H8.268a2.77 2.77 0 0 0-2.593 1.796c-1.498-.366-2.427-1.183-2.974-2.093C2 12.536 2 11.336 2 11.127zM16 11a3.98 3.98 0 0 0-.535-2h4.767C21.21 9 22 9.791 22 10.768v.36c0 .207 0 1.408-.7 2.575c-.548.91-1.477 1.727-2.975 2.093A2.769 2.769 0 0 0 15.732 14h-1.086A3.99 3.99 0 0 0 16 11m3.5-6a3 3 0 1 1-6 0a3 3 0 0 1 6 0m-13 11.768C6.5 15.79 7.291 15 8.268 15h7.464c.977 0 1.768.791 1.768 1.768v.36c0 .207 0 1.408-.7 2.575C16.057 20.937 14.613 22 12 22s-4.058-1.063-4.8-2.297c-.7-1.167-.7-2.367-.7-2.576zM12 14a3 3 0 1 0 0-6a3 3 0 0 0 0 6" />
</svg>
<ul class="list-items">
<li>
<a href="./index.html">CHATS</a>
<h5 class="chat-counts">20</h5>
</li>
<li>
<h4>STATUS</h4>
<i class="border"></i>
</li>
<li>
<a href="./calls.html">CALLS</a>
</li>
</ul>
</div>
</section>
</header>
<!-- whatsapp status body section -->
<main>
<section>
<div class="dot">
<h3>Status</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24">
<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-2" />
</svg>
</div>
<div>
<div class="my-status">
<img src="https://picsum.photos/200/300?random=1" alt="gopal">
<h4>My Status <br> Just Now</h4>
</div>
<div class="recent">
<h4>Resent Updates</h4>
</div>
<div class="hover-eff">
<div class="recent-updates">
<img src="https://picsum.photos/200/300?random=2" alt="thachana">
<h4>Tachana <br> 09:19 am</h4>
</div>
</div>
<div class="hover-eff">
<div class="recent-updates">
<img src="https://picsum.photos/200/300?random=3" alt="Dhivagar">
<h4>Dhivagar<br> 08:03 am</h4>
</div>
<div class="recent-updates">
<img src="https://picsum.photos/200/300?random=4" alt="Anbu">
<h4>Anbu <br> 08:00 am</h4>
</div>
<div class="recent-updates">
<img src="https://picsum.photos/200/300?random=5" alt="gopal">
<h4>gopal <br> 07:45 am</h4>
</div>
<div class="recent-updates">
<img src="https://picsum.photos/200/300?random=6" alt="Azhakesan">
<h4>Azhakesan <br> 07:25 am</h4>
</div>
<div class="recent-updates">
<img src="https://picsum.photos/200/300?random=10" alt="velu">
<h4>velu <br> 06:19 am</h4>
</div>
<div class="recent-updates">
<img src="https://picsum.photos/200/300?random=11" alt="Sathish">
<h4>Sathish <br> 05:10 am</h4>
</div>
<div class="recent-updates">
<img src="https://picsum.photos/200/300?random=12" alt="sidhan">
<h4>sidhan <br> 05:00 am</h4>
</div>
</div>
</section>
</main>
</body>
</html>