👤
Setting Account Page
organizes incoming, sent, and archived messages, providing an efficient way to manage communications.
View Mode
HTML
<div class="page-head">
<h1 class="page-title">إعدادات الحساب</h1>
<p class="page-desc">إدارة تفاصيل حسابك الشخصية.</p>
</div>
<ul class="nav mb-4 mb-lg-5">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="account-01.html">تفاصيل الحساب</a></li>
<li class="nav-item"><a class="nav-link" href="account-02.html">كلمة المرور</a></li>
</ul>
<div class="row g-4">
<div class="col-xl-3 col-xxl-4">
<h6 class="mb-0">ملعومات شخصية</h6>
<p class="text-body-xs mb-0">بيانات تعريفية لحساب المستخدم.</p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-3">
<div class="col-sm-6">
<label class="form-label">الاسم <span class="text-danger">*</span></label>
<input class="form-control" type="text" placeholder="مثال: “عبدالله الغامدي”" value="عبدالله الوحيدي"/>
</div>
<div class="col-sm-6">
<label class="form-label">رقم الهوية<span class="text-danger">*</span></label>
<input class="form-control text-english" type="text" placeholder="مثال: “1012345678”" value="1012345678"/>
</div>
<div class="col-sm-6">
<label class="form-label">الجنس <span class="text-danger">*</span></label>
<div class="form-radio-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="male" checked="checked"/>
<label class="form-check-label" for="male">ذكر</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="female"/>
<label class="form-check-label" for="female">أنثى</label>
</div>
</div>
</div>
<div class="col-sm-6">
<label class="form-label">تاريخ الميلاد<span class="text-danger">*</span></label>
<div class="form-group">
<input class="form-control text-english" type="text" placeholder="DD" value="10"/>
<input class="form-control text-english" type="text" placeholder="MM" value="5"/>
<input class="form-control text-english" type="text" placeholder="YYYY" value="1993"/>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4 my-lg-5"/>
<div class="row g-4">
<div class="col-xl-3 col-xxl-4">
<h6 class="mb-0">صلاحيات العمل</h6>
<p class="text-body-xs mb-0">معلومات العمل والصلاحيات.</p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-3">
<div class="col-sm-6">
<label class="form-label">الصلاحيات <span class="text-danger">*</span></label>
<div class="form-radio-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="name_01" id="id_03"/>
<label class="form-check-label" for="id_03">موظف</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="name_01" id="id_04" checked="checked"/>
<label class="form-check-label" for="id_04">مدير المنصة</label>
</div>
</div>
</div>
<div class="col-sm-6">
<label class="form-label">المسمى الوظيفي <span class="text-danger">*</span></label>
<input class="form-control" type="text" placeholder="مثال: “مدير إدارة الموارد البشرية”" value="مدير إدارة الموارد البشرية"/>
</div>
</div>
</div>
</div>
<hr class="my-4 my-lg-5"/>
<div class="row g-4">
<div class="col-xl-3 col-xxl-4">
<h6 class="mb-0">صلاحيات العمل</h6>
<p class="text-body-xs mb-0">معلومات العمل والصلاحيات.</p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-3">
<div class="col-sm-6">
<label class="form-label">عنوان البريد <span class="text-danger">*</span></label>
<input class="form-control text-english" type="text" placeholder="مثال: “[email protected]”" value="[email protected]"/>
</div>
<div class="col-sm-6">
<label class="form-label">رقم الجوال <span class="text-danger">*</span></label>
<input class="form-control text-english form-control-ltr" type="text" placeholder="مثال: “501 876 3215”" value="501 876 3215"/>
</div>
</div>
</div>
</div>
<hr class="my-4 my-lg-5"/>
<div class="row g-4">
<div class="col-xl-3 col-xxl-4">
<h6 class="mb-0">حالة الحساب</h6>
<p class="text-body-xs mb-0">وضع الحساب الحالي.</p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-3">
<div class="col-sm-6">
<div class="form-radio-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="name_02" id="id_05" checked="checked"/>
<label class="form-check-label" for="id_05">فعال</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="name_02" id="id_06"/>
<label class="form-check-label" for="id_06">غير فعال</label>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4 my-lg-5"/>
<div class="d-flex align-items-center justify-content-between">
<button class="btn btn-primary">حفظ التغييرات</button>
<button class="btn btn-white">إلغاء</button>
</div>