⚙️
Settings 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>
<div class="js-simplebar mb-4 mb-lg-5">
<ul class="nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="setting-01.html">اعدادات عامة</a></li>
<li class="nav-item"><a class="nav-link" href="setting-02.html">المدفوعات</a></li>
<li class="nav-item"><a class="nav-link" href="setting-03.html">بياناتي البنكية</a></li>
<li class="nav-item"><a class="nav-link" href="setting-04.html">ادارة المناطق</a></li>
<li class="nav-item"><a class="nav-link" href="setting-05.html">بوابة SMS</a></li>
<li class="nav-item"><a class="nav-link" href="setting-06.html">نموذج التسجيل</a></li>
<li class="nav-item"><a class="nav-link" href="setting-07.html">ادارة البريد</a></li>
<li class="nav-item"><a class="nav-link" href="setting-08.html">قوالب الرسائل</a></li>
</ul>
</div>
<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"><span>إعداد كود </span><span>Google Tag Manager.</span></p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-3">
<div class="col-sm-6">
<label class="form-label text-english">Google Tag Manager</label>
<input class="form-control text-english form-control-error" type="text" placeholder="GTM-XXXXXX"/><span class="form-error-msg">تنبيه: رقم الجوال مستخدم مسبقا.</span>
</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-check form-switch flex-wrap ps-0">
<input class="form-check-input form-check-input-lg" type="checkbox" role="switch" checked="checked"/><span class="d-block text-body-xs w-100">تفعيل إعادة إرسال رسالة تأكيد الحساب تلقائياً؟</span>
</div>
</div>
<div class="col-sm-6">
<div class="form-check form-switch flex-wrap ps-0">
<input class="form-check-input form-check-input-lg" type="checkbox" role="switch" checked="checked"/><span class="d-block text-body-xs w-100">قبول تلقائياً للمستخدمين عند التسجيل؟</span>
</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-12">
<div class="form-radio-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="name_01" id="id_01" checked="checked"/>
<label class="form-check-label" for="id_01">غير محدد</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="name_01" id="id_02"/>
<label class="form-check-label" for="id_02">البريد الإلكتروني</label>
</div>
<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>
</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">شروط الاستخدام</label>
<select class="js-choices" aria-label="Default select example" dir="rtl" data-placeholder="اختر الصفحة من القائمة">
<option value="1">شروط الاستخدام</option>
<option value="2">من نحن؟</option>
</select>
</div>
<div class="col-sm-6">
<label class="form-label">سياسة الخصوصية</label>
<select class="js-choices" aria-label="Default select example" dir="rtl" data-placeholder="اختر الصفحة من القائمة">
<option value="1">شروط الاستخدام</option>
<option value="2">من نحن؟</option>
</select>
</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-check form-switch flex-wrap ps-0">
<input class="form-check-input form-check-input-lg" type="checkbox" role="switch" checked="checked"/>
</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">
<div class="form-check form-switch flex-wrap ps-0">
<input class="form-check-input form-check-input-lg" type="checkbox" role="switch"/>
</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">
<div class="form-radio-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="name_02" id="id_04" checked="checked"/>
<label class="form-check-label" for="id_04">لغة عربية</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="name_02" id="id_05"/>
<label class="form-check-label" for="id_05">لغة انجليزية</label>
</div>
</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"> <span>اعداد ال </span><span class="text-english">Cookies</span></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">زر القبول</label>
<input class="form-control" type="text" placeholder="مثال: أوافق" value="أوافق"/>
</div>
<div class="col-sm-6">
<label class="form-label">زر الرفض</label>
<input class="form-control" type="text" placeholder="مثال: لا أرغب" value="لا أرغب"/>
</div>
<div class="col-12">
<label class="form-label">محتوى ال Cookies</label>
<div class="cookies-content-form">
<textarea class="form-control" rows="2" placeholder="اكتب هنا..">نستخدم [ملفات الارتباط] لتحسين تجربتك. هل توافق؟</textarea><span class="d-flex align-items-center justify-content-between"> <span>حدد النص وادخل اللينك في الأسفل.</span><span class="text-english"> <span>450 / </span><span>0</span></span></span>
<input class="form-control text-english" type="text" placeholder="https://www.google.com/cookies"/>
</div>
</div>
<div class="col-12">
<label class="form-label">مكان اللافتة</label>
<div class="form-radio-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="name_03" id="id_06"/>
<label class="form-check-label" for="id_06">أعلى</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="name_03" id="id_07" checked="checked"/>
<label class="form-check-label" for="id_07">أسفل</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="name_03" id="id_08"/>
<label class="form-check-label" for="id_08">أسفل يمين</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="name_03" id="id_09"/>
<label class="form-check-label" for="id_09">أسفل يسار</label>
</div>
</div>
</div>
<div class="col-12">
<label class="form-label">ألوان اللافتة</label>
<div class="cookies-preview-box">
<div class="row g-3">
<div class="col-12">
<div class="cookies-preview-item" style="background-color: #38353B; color: #FFF"> <span class="tticon-cookie-fill cookies-icon"> </span><span class="cookies-text">
نستخدم <a href="#!">ملفات الارتباط</a> لتحسين تجربتك. هل توافق؟</span>
<div class="cookies-button-wrapper">
<button class="btn btn-primary btn-sm">أوافق</button>
<button class="btn btn-secondary btn-sm">لا أرغب</button>
</div>
</div>
</div>
<div class="col-6 col-md-3 col-lg-6 col-xxl-3">
<label class="form-label" for="id_100">لون الخلفية</label>
<input type="text" data-coloris="data-coloris" value="#38353B"/>
</div>
<div class="col-6 col-md-3 col-lg-6 col-xxl-3">
<label class="form-label" for="id_101">خط الخلفية</label>
<input type="text" data-coloris="data-coloris" value="#FFFFFF"/>
</div>
<div class="col-6 col-md-3 col-lg-6 col-xxl-3">
<label class="form-label" for="id_103">خلفية الزر</label>
<input type="text" data-coloris="data-coloris" value="#D4088C"/>
</div>
<div class="col-6 col-md-3 col-lg-6 col-xxl-3">
<label class="form-label" for="id_104">نص الزر</label>
<input type="text" data-coloris="data-coloris" value="#FFFFFF"/>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-check form-switch flex-wrap ps-0 justify-content-between flex-nowrap">
<input class="form-check-input form-check-input-lg" type="checkbox" role="switch" checked="checked"/><span class="d-block text-body-xs">يمكن تفعيل/تعطيل حالة ال cookies من المنصة.</span>
</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-12">
<label class="form-label">رابط الموقع الجغرافي من خريطة جوجل</label>
<input class="form-control text-english" type="text" placeholder="https://www.google.com/maps/embed..."/>
</div>
<div class="col-12">
<label class="form-label">العنوان</label>
<input class="form-control" type="text" placeholder="مثال: “المملكة العربية السعودية، الرياض، حي الروضة، شارع خالد بن الوليد”"/>
</div>
<div class="col-12">
<label class="form-label">عنوان البريد</label>
<input class="form-control text-english" type="text" placeholder="[email protected]"/>
</div>
<div class="col-sm-6">
<label class="form-label">رقم الجوال</label>
<input class="form-control text-english" type="text" placeholder="0555555555"/>
</div>
<div class="col-sm-6">
<label class="form-label">رقم الهاتف</label>
<input class="form-control text-english" type="text" placeholder="0123456789"/>
</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-control-icon"><img class="form-icon d-light-inline" src="images/logos/xcom.svg" atl=""/><img class="form-icon d-dark-inline" src="images/logos/xcom-light.svg" atl=""/><span class="form-url">https://x.com/</span>
<input class="form-control text-english" type="text" value="Abudallah-94"/>
</div>
</div>
<div class="col-sm-6">
<div class="form-control-icon"><img class="form-icon" src="images/logos/facebook.svg" atl=""/><span class="form-url">https://www.facebook.com/</span>
<input class="form-control text-english" type="text"/>
</div>
</div>
<div class="col-sm-6">
<div class="form-control-icon"><img class="form-icon" src="images/logos/youtube.svg" atl=""/><span class="form-url">https://www.youtube.com/</span>
<input class="form-control text-english" type="text"/>
</div>
</div>
<div class="col-sm-6">
<div class="form-control-icon"><img class="form-icon" src="images/logos/snapchat.svg" atl=""/><span class="form-url">https://www.snapchat.com/</span>
<input class="form-control text-english" type="text" value="Abudallah-94"/>
</div>
</div>
<div class="col-sm-6">
<div class="form-control-icon"><img class="form-icon" src="images/logos/instagram.svg" atl=""/><span class="form-url">https://www.instagram.com/</span>
<input class="form-control text-english" type="text"/>
</div>
</div>
<div class="col-sm-6">
<div class="form-control-icon"><img class="form-icon" src="images/logos/linkedin.svg" atl=""/><span class="form-url">https://www.linkedin.com/</span>
<input class="form-control text-english" type="text"/>
</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>