-
Notifications
You must be signed in to change notification settings - Fork 0
/
community.html
156 lines (145 loc) · 10.7 KB
/
community.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Community | Let's Chat</title>
<link rel="icon" type="image/x-icon" href="./assets/Images/Whatsapp icon.png">
<!--tailwind cdn-->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./assets/CSS/output.css">
</head>
<body class="bg-gradient-to-r from-green-200 to-green-500 p-10">
<section class="bg-white max-w-lg mx-auto">
<div class="bg-emerald-800 text-white px-3 py-6 flex items-center justify-between">
<div class="flex items-center justify-center">
<h4 class="font-semibold text-xl"> Let's Chat</h4>
</div>
<div class="flex space-x-2">
<a href="https://github.com/Jeya-rosini/whatsapp-ui-tailwindcss" target="_blank" name="Github">
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="32" viewBox="0 0 496 512"
class=" mr-2 fill-current w-6 hover:cursor-pointer">
<path
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9c1.6 2.3 4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2z" />
</svg>
</a>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="fill-current">
<path
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>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"
class="fill-current">
<path
d="M112 60a16 16 0 1 1 16 16a16 16 0 0 1-16-16Zm16 52a16 16 0 1 0 16 16a16 16 0 0 0-16-16Zm0 68a16 16 0 1 0 16 16a16 16 0 0 0-16-16Z" />
</svg>
</div>
</div>
<ul class="bg-emerald-800 text-white px-3 py-2 flex justify-between items-center space-x-4">
<li>
<div class="uppercase font-medium text-sm flex items-center relative space-x-2">
<a href="./community.html">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16"
class="fill-white hover:cursor-pointer">
<path
d="M3 3a2 2 0 1 1 4 0a2 2 0 0 1-4 0Zm6.779 1.584l.042.032a2 2 0 1 0-.042-.032ZM6.268 6A2 2 0 1 1 9.73 7.998A2 2 0 0 1 6.268 6ZM2.5 6h2.67a3.013 3.013 0 0 0 .594 3H5.5a2.501 2.501 0 0 0-2.355 1.658a3.733 3.733 0 0 1-.933-.543C1.46 9.51 1 8.616 1 7.5A1.5 1.5 0 0 1 2.5 6Zm8 3a2.5 2.5 0 0 1 2.354 1.658c.34-.139.655-.32.934-.543C14.54 9.51 15 8.616 15 7.5A1.5 1.5 0 0 0 13.5 6h-2.67c.11.313.17.65.17 1a2.99 2.99 0 0 1-.764 2h.264Zm1.387 1.928c.073.176.113.37.113.572c0 1.116-.459 2.01-1.212 2.615C10.047 14.71 9.053 15 8 15c-1.053 0-2.047-.29-2.788-.885C4.46 13.51 4 12.616 4 11.5A1.496 1.496 0 0 1 5.5 10h5a1.5 1.5 0 0 1 1.387.928Z" />
</svg>
</a>
</div>
</li>
<li class="flex flex-1 justify-between items-center">
<div class="uppercase font-medium text-sm flex items-center space-x-2">
<a href="./index.html"> chats </a>
<span
class="bg-neutral-300 text-emerald-800 p-0.5 rounded-full w-5 h-5 text-xs flex items-center justify-center">5</span>
</div>
</div>
<div class="uppercase font-medium text-sm flex items-center space-x-2">
<a href="./status.html">Updates</a>
<span
class="bg-neutral-300 text-emerald-800 p-0.5 rounded-full w-2 h-2 text-xs flex items-center justify-center"></span>
</div>
<div class="uppercase font-medium text-sm flex items-center space-x-2">
<a href="./call.html">Calls</a>
<span
class="bg-neutral-300 text-emerald-800 p-0.5 rounded-full w-5 h-5 text-xs flex items-center justify-center">1</span>
</div>
</li>
</ul>
<!-----create community---->
<div class="bg-white max-w-lg mx-auto p-3">
<div class="flex items-center jusitfy-center space-x-4 relative p-4">
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24"
class="fill-white stroke-white bg-slate-400 rounded p-1">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M7 18v-1a5 5 0 0 1 5-5v0a5 5 0 0 1 5 5v1M1 18v-1a3 3 0 0 1 3-3v0m19 4v-1a3 3 0 0 0-3-3v0m-8-2a3 3 0 1 0 0-6a3 3 0 0 0 0 6Zm-8 2a2 2 0 1 0 0-4a2 2 0 0 0 0 4Zm16 0a2 2 0 1 0 0-4a2 2 0 0 0 0 4Z" />
</svg>
<span class="font-semibold"> New community</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
class="fill-emerald-800 absolute left-6 top-8 stroke-white">
<path
d="M11 17h2v-4h4v-2h-4V7h-2v4H7v2h4v4Zm1 5q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z" />
</svg>
</div>
<hr class="max-w-lg h-1 border-slate-100">
<div class="flex items-center space-x-4 p-4">
<img src="./assets/Images/Freaky world.jpg.jpg" alt="cyberdude networks icon" class="w-12 h-12 rounded">
<span class="font-semibold">Freaky world</span>
</div>
<hr class="max-w-lg h-1 border-slate-100">
<div>
<div
class="bg-white flex items-center p-3 space-x-4 hover:cursor-pointer hover:bg-slate-100 active:bg-white">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 48 48"
class="fill-emerald-800 bg-emerald-200 rounded-full">
<g>
<path
d="M12 31v7a2 2 0 1 0 4 0v-7h-4Zm-5-5v-6a3 3 0 0 1 3-3h6v12h-6a3 3 0 0 1-3-3Zm27-3v-1a3 3 0 0 0-3-3v7a3 3 0 0 0 3-3Zm-16 7V15l9.463-6.022A1 1 0 0 1 29 9.822v25.356a1 1 0 0 1-1.537.844L18 30Z" />
<path fill-rule="evenodd"
d="M40.832 17.445a1 1 0 0 1-.277 1.387l-3 2a1 1 0 1 1-1.11-1.664l3-2a1 1 0 0 1 1.387.277ZM36 24a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Zm.168 3.445a1 1 0 0 1 1.387-.277l3 2a1 1 0 0 1-1.11 1.664l-3-2a1 1 0 0 1-.277-1.387Z"
clip-rule="evenodd" />
</g>
</svg>
</div>
<div class="flex-1">
<h4 class="font-semibold">Announcements</h4>
<div class="text-gray-500 text-sm flex items-center">
<p>Marie Curie: Join and have fun 💃</p>
</div>
</div>
<div class="flex flex-col items-center space-y-1">
<span class="text-gray-500 font-semibold text-sm">25/09/23</span>
</div>
</div>
</div>
<div class="flex items-center justify-between p-4">
<div class="flex items-center justify-center spce-x-4">
<img src="./assets/Images/Freaky world- Boys.jpg" alt="freaky world boys icon"
class="w-12 h-12 rounded">
<span class="font-semibold p-4">Freaky world-Boys</span>
</div>
<div class="flex flex-col items-center space-y-1">
<span class="text-gray-500 font-semibold text-sm">28/09/23</span>
</div>
</div>
<div class="flex items-center justify-between p-4">
<div class="flex items-center justify-center spce-x-4">
<img src="./assets/Images/Freaky world- Girls.jpg" alt="freaky world girls icon"
class="w-12 h-12 rounded">
<span class="font-semibold p-4">Freaky world-Girls</span>
</div>
<div class="flex flex-col items-center space-y-1">
<span class="text-gray-500 font-semibold text-sm">26/09/23</span>
</div>
</div>
<div class="flex items-center p-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-gray-500 hover:cursor-pointer hover:fill-emerald-700">
<path
d="M9.29 15.88L13.17 12L9.29 8.12a.996.996 0 1 1 1.41-1.41l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3a.996.996 0 0 1-1.41 0c-.38-.39-.39-1.03 0-1.42z" />
</svg>
<span class="text-gray-500 font-semibold hover:cursor-pointer hover:text-emerald-700">View all</span>
</div>
<hr class="max-w-lg h-10 border-slate-100">
</div>
</body>
</html>