-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathEditProfile.html
More file actions
292 lines (271 loc) · 18.9 KB
/
EditProfile.html
File metadata and controls
292 lines (271 loc) · 18.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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Edit Profile</title>
<!-- --------- links -->
<!--
app.css
-->
<link rel="stylesheet" href="./styles/app.css" />
<!--
icon title
-->
<!-- --------- -->
<link rel="icon" href="./images/Instagram.png" type="images/png" />
<!--
dark mode tailwind switch
-->
<script type="text/javascript">
if (
localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
</script>
<!-- ------- links end -->
<style>
#particles-js {
position: absolute;
width: 100%;
height: 100vh;
z-index: -10;
}
</style>
</head>
<body class="bg-slate-50 dark:bg-black w-full h-[100vh] overflow-hidden">
<!--
=========> svg
-->
<svg class="hidden">
<symbol id="arrow-left" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
</symbol>
<symbol id="wify" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 0 1 7.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 0 1 1.06 0Z" />
</symbol>
<symbol id="edit" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
</symbol>
<symbol id="window" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8.25V18a2.25 2.25 0 0 0 2.25 2.25h13.5A2.25 2.25 0 0 0 21 18V8.25m-18 0V6a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 6v2.25m-18 0h18M5.25 6h.008v.008H5.25V6ZM7.5 6h.008v.008H7.5V6Zm2.25 0h.008v.008H9.75V6Z" />
</symbol>
<symbol id="notifecation" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
</symbol>
<symbol id="language" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
</symbol>
<symbol id="security" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
</symbol>
<symbol id="theme" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
</symbol>
<symbol id="lock" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
</symbol>
<symbol id="camera" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" />
</symbol>
<symbol id="user" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M858.5 763.6a374 374 0 0 0-80.6-119.5a375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1c-.4.2-.8.3-1.2.5c-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8c2-77.2 33-149.5 87.8-204.3c56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2M512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534"></path>
</symbol>
<symbol id="name" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M824.2 699.9a301.55 301.55 0 0 0-86.4-60.4C783.1 602.8 812 546.8 812 484c0-110.8-92.4-201.7-203.2-200c-109.1 1.7-197 90.6-197 200c0 62.8 29 118.8 74.2 155.5a300.95 300.95 0 0 0-86.4 60.4C345 754.6 314 826.8 312 903.8a8 8 0 0 0 8 8.2h56c4.3 0 7.9-3.4 8-7.7c1.9-58 25.4-112.3 66.7-153.5A226.62 226.62 0 0 1 612 684c60.9 0 118.2 23.7 161.3 66.8C814.5 792 838 846.3 840 904.3c.1 4.3 3.7 7.7 8 7.7h56a8 8 0 0 0 8-8.2c-2-77-33-149.2-87.8-203.9M612 612c-34.2 0-66.4-13.3-90.5-37.5a126.86 126.86 0 0 1-37.5-91.8c.3-32.8 13.4-64.5 36.3-88c24-24.6 56.1-38.3 90.4-38.7c33.9-.3 66.8 12.9 91 36.6c24.8 24.3 38.4 56.8 38.4 91.4c0 34.2-13.3 66.3-37.5 90.5A127.3 127.3 0 0 1 612 612M361.5 510.4c-.9-8.7-1.4-17.5-1.4-26.4c0-15.9 1.5-31.4 4.3-46.5c.7-3.6-1.2-7.3-4.5-8.8c-13.6-6.1-26.1-14.5-36.9-25.1a127.54 127.54 0 0 1-38.7-95.4c.9-32.1 13.8-62.6 36.3-85.6c24.7-25.3 57.9-39.1 93.2-38.7c31.9.3 62.7 12.6 86 34.4c7.9 7.4 14.7 15.6 20.4 24.4c2 3.1 5.9 4.4 9.3 3.2c17.6-6.1 36.2-10.4 55.3-12.4c5.6-.6 8.8-6.6 6.3-11.6c-32.5-64.3-98.9-108.7-175.7-109.9c-110.9-1.7-203.3 89.2-203.3 199.9c0 62.8 28.9 118.8 74.2 155.5c-31.8 14.7-61.1 35-86.5 60.4c-54.8 54.7-85.8 126.9-87.8 204a8 8 0 0 0 8 8.2h56.1c4.3 0 7.9-3.4 8-7.7c1.9-58 25.4-112.3 66.7-153.5c29.4-29.4 65.4-49.8 104.7-59.7c3.9-1 6.5-4.7 6-8.7"></path></symbol>
<symbol id="website" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M120 160H72c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V168c0-4.4-3.6-8-8-8m833 0h-48c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V168c0-4.4-3.6-8-8-8M200 736h112c4.4 0 8-3.6 8-8V168c0-4.4-3.6-8-8-8H200c-4.4 0-8 3.6-8 8v560c0 4.4 3.6 8 8 8m321 0h48c4.4 0 8-3.6 8-8V168c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v560c0 4.4 3.6 8 8 8m126 0h178c4.4 0 8-3.6 8-8V168c0-4.4-3.6-8-8-8H647c-4.4 0-8 3.6-8 8v560c0 4.4 3.6 8 8 8m-255 0h48c4.4 0 8-3.6 8-8V168c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v560c0 4.4 3.6 8 8 8m-79 64H201c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8m257 0h-48c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8m256 0H648c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h178c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8m-385 0h-48c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8"></path></symbol>
<symbol id="password" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M832 464H332V240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v68c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-68c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32M540 701v53c0 4.4-3.6 8-8 8h-40c-4.4 0-8-3.6-8-8v-53a48.01 48.01 0 1 1 56 0"></path></symbol>
<symbol id="hidde" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512C791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 0 0 0-51.5m-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-11.32M149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512m246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512"></path><path fill="currentColor" d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112"></path></symbol>
<symbol id="show" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3c7.7-16.2 7.7-35 0-51.5M512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766m-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176s176-78.8 176-176s-78.8-176-176-176m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112s112 50.1 112 112s-50.1 112-112 112"></path></symbol>
<symbol id="email" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25" />
</symbol>
<symbol id="cover" width="390" height="271" viewBox="0 0 390 271" fill="" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_501_2752)">
<path d="M0 0H390V232.085C390 232.085 271.719 263.122 194 263C117.05 262.878 0 232.085 0 232.085V0Z" fill="#EBF0F0"/>
</g>
<defs>
<filter id="filter0_d_501_2752" x="-4" y="0" width="398" height="271" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_501_2752"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_501_2752" result="shape"/>
</filter>
</defs>
</symbol>
</svg>
<!--
svg end
-->
<!--
start code
-->
<div class="max-w-lg h-full mx-auto z-10 relative overflow-y-auto ">
<div class="relative w-full h-64">
<img src="" alt="" id="svg_image" class="w-full h-full absolute left-0 right-0 top-0 -z-10">
<div class="flex justify-between items-center p-4">
<div>
<svg class=" w-7 h-7 dark:text-primary-with cursor-pointer" id="back">
<use href="#arrow-left"></use>
</svg>
</div>
<div class="flex justify-around gap-x-2 items-center">
<span class="text-sm dark:text-primary-with" id="intarnetUser">your online</span>
<svg class="w-7 h-7 wify">
<use href="#wify"></use>
</svg>
</div>
</div>
<div class="absolute -bottom-[5.5rem] w-full flex flex-col justify-center items-center">
<div class="relative h-32 w-32 rounded-full mb-2">
<img src="./images/face/65769a04f3b5bad56365e101c778a7c1.png" alt="" class="relative rounded-full w-full h-full">
<span>
<svg class="w-9 h-9 absolute cursor-pointer right-0 bottom-0 dark:text-white bg-zinc-200 dark:bg-zinc-600 border-[3px] border-white dark:border-black rounded-full p-1">
<use href="#edit"></use>
</svg>
</span>
</div>
<h5 class="text-lg font-medium dark:text-white">poriya</h5>
<p class="text-sm text-zinc-400">pooruiasadi85@gmail <span>|</span> 0 939 152 1440</p>
</div>
</div>
<div class="shadow-md w-[90%] h-auto mx-auto mt-32 p-2 rounded-md child:dark:text-white">
<div class="flex gap-x-1 items-center py-3">
<svg class="w-5 h-5 ">
<use href="#window"></use>
</svg>
<p>Edit Profile information</p>
</div>
<div class="flex justify-between items-center py-3">
<div class="flex items-center gap-x-1">
<svg class="w-5 h-5">
<use href="#notifecation"></use>
</svg>
<p>Notifications</p>
</div>
<div>
<div class="">
<input type="checkbox" id="cbx" style="display:none"/>
<label for="cbx" class="toggle"><span></span></label>
</div>
</div>
</div>
<div class="flex justify-between items-center">
<!-- language start -->
<div class="flex gap-x-1 items-center py-3">
<svg class="w-5 h-5">
<use href="#language"></use>
</svg>
<p>language</p>
</div>
<div>
<span class="text-blue-500">English</span>
</div>
<!-- ---- language end -->
</div>
</div>
<div class="shadow-md w-[90%] mx-auto h-auto p-2 rounded-md mt-7 child:dark:text-white">
<div class="flex items-center gap-x-1 py-3 cursor-pointer" id="open-edit">
<svg class="w-5 h-5">
<use href="#security"></use>
</svg>
<p>Security</p>
</div>
<div class="flex justify-between items-center py-3">
<div class="flex items-center gap-x-1">
<svg class="w-5 h-5">
<use href="#theme"></use>
</svg>
<p>theme</p>
</div>
<div>
<span class="text-blue-500 cursor-pointer" id="swichTheme"></span>
</div>
</div>
</div>
<div class="shadow-md w-[90%] mx-auto h-auto p-2 rounded-md mt-7 child:dark:text-white">
<div class="flex items-center gap-x-1 py-3">
<svg class="w-5 h-5">
<use href="#user"></use>
</svg>
<a href="./404.html">Help & Support</a>
</div>
<div class="flex items-center gap-x-1 py-3">
<svg class="w-5 h-5">
<use href="#lock"></use>
</svg>
<span>Privacy Policy</span>
</div>
</div>
<div id="editBox" class="w-full h-full child:dark:text-white overflow-hidden hidden absolute left-0 right-0 top-0 items-center flex-col bg-primary-with dark:bg-primeryColor-Chat p-3">
<div class="w-full flex justify-between items-center p-4 mb-3">
<svg class="w-8 h-8 text-left backTobox">
<use href="#back"></use>
</svg>
<h1 class="text-center text-3xl dark:text-white">Edit profile</h1>
<div></div>
</div>
<div class="border-2 rounded-md w-[90%] mx-auto p-2 mb-3">
<span class="dark:text-white">Full name</span>
<input type="text" placeholder="..." class="w-full py-1 outline-none border-none bg-transparent">
</div>
<div class="border-2 rounded-md w-[90%] mx-auto p-2 mb-3">
<span>Full name</span>
<input type="text" placeholder="..." class="w-full py-1 outline-none border-none bg-transparent">
</div>
<div class="border-2 rounded-md w-[90%] mx-auto p-2 mb-3">
<span>User name</span>
<input type="text" placeholder="..." class="w-full py-1 outline-none border-none bg-transparent">
</div>
<div class="border-2 rounded-md w-[90%] mx-auto p-2 mb-3">
<span>Email</span>
<input type="text" placeholder="..." class="w-full py-1 outline-none border-none bg-transparent">
</div>
<div class="w-[90%] mx-auto flex justify-center items-center gap-x-3 mb-3">
<div class="border-2 py-5 w-[30%] rounded-md ">
<select name="" id="" class="w-full h-full bg-transparent border-none outline-none">
<option value="Iran">Iran</option>
<option value="Usa">Usa</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
<div class="border-2 flex flex-col p-2 w-[70%] rounded-md">
<span>Genre</span>
<input type="text" placeholder="mayle | famyle" class="bg-transparent outline-none border-none w-full">
</div>
</div>
<div class="border-2 rounded-md w-[90%] mx-auto p-2 mb-3">
<span>Address</span>
<input type="text" placeholder="..." class="w-full py-1 outline-none border-none bg-transparent">
</div>
<div class="border-2 rounded-md w-[90%] mx-auto p-2 mb-3">
<span>Your job</span>
<input type="text" placeholder="..." class="w-full py-1 outline-none border-none bg-transparent">
</div>
<div class="w-[90%] mx-auto flex justify-center items-center py-3 bg-blue-500 rounded-md">
<a href="#" class="w-full h-full text-center font-medium text-white text-lg">SUBMIT</a>
</div>
</div>
<!--
<div class="flex flex-col border-b-[3px] rounded-sm >
<span class=" text-[1rem] tracking-tighter dark:text-white ">Password</span>
<div class="flex">
<input type="password" class="p-4 border-none outline-none placeholder:text-zinc-500 placeholder:font-medium bg-transparent cursor-pointer w-full" placeholder="13850000" id="passwordInput" name="password" class=" outline-none border-none pl-1 text-sm font-medium text-zinc-600 dark:text-zinc-300">
<svg class="w-6 h-6 text-black dark:text-white cursor-pointer" id="swicth-icon"><use href="#show"></use></svg>
</div>
</div>
-->
</div>
<script src="./js/user_acount/editProfile/edit.js"></script>
</body>
</html>