-
Notifications
You must be signed in to change notification settings - Fork 0
/
editProfile.html
191 lines (180 loc) · 11.8 KB
/
editProfile.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
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
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="2G9">
<link href="./output.css" rel="stylesheet">
<title>Edit Your Profile</title>
<link rel="icon" type="image/png" href="./images/logo.png">
<!-- Icons -->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<!-- 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=Noto+Kufi+Arabic:[email protected]&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="./js/script.js"></script>
</head>
<style>
body {
font-family: "Noto Kufi Arabic", sans-serif;
}
</style>
<body class="min-h-screen flex flex-col">
<!-- Start Navbar -->
<div id="navbar"></div>
<!-- End Navbar -->
<!-- Start Section -->
<div class="container mx-auto flex gap-10">
<div class="flex items-center gap-10 mt-10 lg:mr-44">
<!-- Sidebar -->
<div class="md:block hidden left-0 top-0 h-full">
<div class="flex gap-5">
<div class="relative">
<img src="./images/Shape.webp" class="w-[61.7px] h-[61.7px] border-2 border-[#C10D10] p-1 rounded-full" alt="profile">
<img src="./images/check.svg" class="absolute left-0 top-[55%]" alt="check">
</div>
<div>
<h2 class="font-medium text-2xl text-[#2B2F4E]">أسماء مصطفي</h2>
<p class="font-medium text-[16px] text-[#858585]">+966 54 131 0701</p>
<a href="./verification.html" class="font-normal text-[14px] text-[#C10D10]">توثيق الحساب</a>
<p class="hidden font-normal text-[14px] text-[#48D556]">حساب موثق</p>
</div>
</div>
<div>
<a href="./editProfile.html" class="flex gap-2 items-center p-3">
<img src="./images/setting.svg" alt="Setting">
<p class="font-medium text-[16px] text-[#C10D10]">تعديل حسابي</p>
</a>
<hr class="border-[#C10D10] mr-3">
<a href="./userAds.html" class="flex gap-2 items-center p-3">
<img src="./images/IconAdd.svg" alt="Adds">
<p class="font-medium text-[16px] text-[#2B2F4E] ">باقة إعلاناتك</p>
</a>
<hr class="mr-3">
<a href="" class="flex gap-2 items-center p-3">
<img src="./images/phone.svg" alt="Phone">
<p class="font-medium text-[16px] text-[#2B2F4E] ">تواصل معنا</p>
</a>
<hr class="mr-3">
<a href="./blocked.html" class="flex gap-2 items-center p-3">
<img src="./images/block.svg" alt="block">
<p class="font-medium text-[16px] text-[#2B2F4E] ">المحظورين</p>
</a>
<hr class="mr-3">
<a href="" class="flex gap-2 items-center p-3">
<img src="./images/logOut.svg" alt="log out">
<p class="font-medium text-[16px] text-[#2B2F4E] ">تسجيل الخروج</p>
</a>
<hr class="mr-3">
<a href="" class="flex gap-2 items-center p-3">
<img src="./images/deleteAcc.svg" alt="delete account">
<p class="font-medium text-[16px] text-[#2B2F4E] "> حذف الحساب <span class="text-[#C10D10]">( تفقد كل بياناتك! )</span></p>
</a>
</div>
</div>
<!-- Main Content -->
<div class=" flex flex-col gap-5 justify-center items-center">
<h1 class="text-2xl font-bold">⚙️ تعديل حسابي</h1>
<div class="relative block">
<img src="./images/Shape.webp" class="w-[128px] h-[128px] border-2 border-[#C10D10] p-0.5 rounded-full" alt="profile" id="profilePic">
<img src="./images/ChangePicture.svg" class="absolute top-[70%] w-[42px] h-[42px] cursor-pointer" alt="Change Picture" id="changePicBtn">
<input type="file" id="fileInput" accept="image/*" style="display: none;">
</div>
<div class="flex items-center rounded-2xl bg-[#FAFAFA]">
<ion-icon name="person-outline" class="w-4 h-4 md:w-5 md:h-5 text-[#9E9E9E] ml-2 mr-2"></ion-icon>
<input type="text" placeholder="اسم المستخدم" class="flex-grow w-full md:w-96 text-[16px] md:text-sm text-[#2B2F4E] outline-none bg-transparent h-12 md:h-16">
<span class="w-4 h-4 md:w-5 md:h-5 ml-2 mr-2"></span>
</div>
<div class="w-full max-w-md mx-auto">
<div class="relative bg-[#FAFAFA] rounded-lg p-4 flex items-center">
<select class="appearance-none bg-transparent text-lg pr-8 outline-none focus:ring-0">
<option value="AE" selected>+20</option>
<option value="US">+20</option>
<option value="UK">+20</option>
<option value="SA">+20</option>
</select>
<span class="absolute right-0 inset-y-0 flex items-center pr-2 pointer-events-none">
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</span>
<input type="tel" placeholder="رقم الهاتف" class=" w-full md:w-96 text-xs md:text-sm text-[#6C6C6C] outline-none bg-transparent ">
</div>
</div>
<div class="flex items-center justify-center">
<a href="#" class="flex justify-center items-center text-white bg-[#C10D10] w-[294px] rounded-[10px] h-12">
<button>حفظ</button>
</a>
</div>
</div>
</div>
</div>
<!-- End Section -->
<!-- Start Icons -->
<div id="icons" class="mt-auto p-4">
</div>
<!-- End Icons -->
<!-- Start Footer -->
<div id="footer" class="md:block hidden"></div>
<!-- End Footer -->
<!-- Warning POP UP -->
<div id="popup2" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-lg w-[367px] max-w-md h-[630px] p-2 relative">
<!-- Close button -->
<button onclick="hidePopup()" class="absolute top-2 right-2 text-[#C10D10] hover:text-red-600 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<div class="flex justify-center">
<img src="./images/warningImage.svg" alt="Warning" class="w-[140px] h-[140px]">
</div>
<h2 class="text-center text-[#C10D10] text-[28px] font-medium">انتبه</h2>
<p class="text-[#2B2F4E] font-medium text-[16px] mb-4">هل انت متاكد من حذف حسابك نهائي !!</p>
<span class="text-[#FC0000] text-center leading-relaxed">
سوف تفقد بياناتك بشكل نهائي من خلال حذف حسابك أن
</span>
<span class="text-[14px] font-normal text-[#2B2F4E]">
يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى
</span>
<div class="flex justify-between mt-2">
<button class="bg-[#C10D10] text-white px-6 py-2 w-[155px] h-[58px] rounded-2xl">
لا
</button>
<button class="bg-white text-[#C10D10] border border-[#C10D10] px-6 py-2 w-[155px] h-[58px] rounded-2xl">
حذف الحساب
</button>
</div>
</div>
</div>
<script>
function showPopup() {
document.getElementById("popup2").classList.remove("hidden");
}
function hidePopup() {
document.getElementById("popup2").classList.add("hidden");
}
</script>
<script>
const changePicBtn = document.getElementById('changePicBtn');
const fileInput = document.getElementById('fileInput');
const profilePic = document.getElementById('profilePic');
changePicBtn.addEventListener('click', function() {
fileInput.click();
});
fileInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
profilePic.src = e.target.result;
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>