🖌️
Customization 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-3 mb-lg-4">
<ul class="nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="layout-01.html">إعدادات عامة</a></li>
<li class="nav-item"><a class="nav-link" href="layout-02.html">الواجهة الرئيسية</a></li>
<li class="nav-item"><a class="nav-link" href="layout-03.html">قائمة المنصة</a></li>
<li class="nav-item"><a class="nav-link" href="layout-04.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">تخصيص اسم المنصة ووصفه.</p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-4">
<div class="col-sm-6">
<label class="form-label">اسم المنصة <span class="text-danger">*</span></label>
<input class="form-control" type="text" placeholder="مثال: نمو"/>
</div>
<div class="col-sm-6">
<label class="form-label"><span> <span>وصف المنصة </span><span class="text-english">(Footer) </span></span><span class="text-danger">*</span></label>
<input class="form-control" type="text" placeholder="مثال: تعرف على رسالتنا وقيمنا في منصة نمو..."/>
</div>
<div class="col-12">
<h6 class="d-flex gap-3 align-items-center text-label-sm mb-0"><span class="tticon-browser-charts icon-18"></span><span> <span>إعدادات محرك البحث </span><span class="text-english">SEO</span></span>
<hr class="m-0 flex-grow-1"/>
</h6>
</div>
<div class="col-sm-6">
<label class="form-label">الفئة المستفيدة <span class="text-danger">*</span></label>
<input class="js-choices" dir="rtl" data-placeholder="أكتب الفئة المستفيدة وأضغط Enter.."/>
</div>
<div class="col-sm-6">
<label class="form-label">وصف المنصة <span class="text-danger">*</span></label>
<input class="form-control" type="text" placeholder="مثال: تعرف على رسالتنا وقيمنا في منصة نمو..."/>
</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-4">
<div class="col-sm-6">
<label class="form-label">الخطوط <span class="text-danger">*</span></label>
<select class="js-choices" aria-label="Default select example" dir="rtl" data-placeholder="حدد من القائمة..">
<option value="1" selected="selected">Hacen Maghreb - الإفتراضي</option>
<option value="2">Almarai</option>
<option value="3">Montserrat Arabic</option>
</select>
</div>
</div>
</div>
</div>
<h6 class="d-flex gap-2 align-items-center text-label-sm my-4 my-lg-5 text-primary py-3"><span class="tticon-home-charts icon-22"></span>إعداد لوحة القيادة
<hr class="m-0 flex-grow-1"/>
</h6>
<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-4">
<div class="col-4 col-sm-3 col-md-2 col-lg-3 col-xxl-2">
<div class="form-check form-check-card">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked="checked"/>
<label class="form-check-label" for="flexRadioDefault1">حديثة</label>
<label class="form-check-label w-100" for="flexRadioDefault1"><img class="w-100 d-light-inline" src="images/dashboard-layout-01.svg" alt=""/><img class="w-100 d-dark-inline" src="images/dashboard-layout-01-dark.svg" alt=""/></label>
</div>
</div>
<div class="col-4 col-sm-3 col-md-2 col-lg-3 col-xxl-2">
<div class="form-check form-check-card">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2"/>
<label class="form-check-label" for="flexRadioDefault2">قياسية</label>
<label class="form-check-label w-100" for="flexRadioDefault2"><img class="w-100 d-light-inline" src="images/dashboard-layout-02.svg" alt=""/><img class="w-100 d-dark-inline" src="images/dashboard-layout-02-dark.svg" alt=""/></label>
</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-4">
<div class="col-6 col-sm-4 col-md-3 col-lg-4 col-xxl-3">
<label class="form-label" for="id_100">اللون الرئيسي</label>
<input type="text" data-coloris="data-coloris" value="#D4088C"/>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-4 col-xxl-3">
<label class="form-label" for="id_100">اللون الثانوي</label>
<input type="text" data-coloris="data-coloris" value="#FFA31A"/>
</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"><span class="d-block">تحميل الشعار بصيغة SVG لأفضل دقة وجودة.</span><span class="d-block">لوحة القيادة تشمل أيقونة.</span></p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-4">
<div class="col-sm-8 col-md-6 col-lg-8 col-xxl-6">
<label class="form-label">شعار لوحة القيادة <span class="text-danger">*</span></label>
<label class="photo-uploader">
<input class="d-none" type="file"/><span class="photo-uploader__upload-area"> <span class="tticon-upload photo-uploader__icon"> </span><span class="photo-uploader__content"> <span class="photo-uploader__text"><span>أعلى حد: </span><span class="text-english">1 MB</span></span><span class="photo-uploader__text"> <span>الملفات المقبولة: </span><span class="text-english">SVG, PNG</span></span></span></span><span class="ration ration-1x1 photo-uploader__preview" style="background-image: url('./images/photo-placeholder-square.svg')"></span>
</label>
</div>
<div class="col-sm-8 col-md-6 col-lg-8 col-xxl-6">
<label class="form-label">
<sapn>أيقونة اللوحة / </sapn>
<sapn class="text-english">Favicon </sapn><span class="text-danger">*</span>
</label>
<label class="photo-uploader">
<input class="d-none" type="file"/><span class="photo-uploader__upload-area"> <span class="tticon-upload photo-uploader__icon"> </span><span class="photo-uploader__content"> <span>أعلى حد: <span class="text-english">300 KB</span></span><span class="photo-uploader__text"> <span>الملفات المقبولة: </span><span class="text-english">IO, PNG</span></span></span></span><span class="ration ration-1x1 photo-uploader__preview" style="background-image: url('./images/photo-placeholder-square.svg')"></span>
</label>
</div>
</div>
</div>
</div>
<h6 class="d-flex gap-2 align-items-center text-label-sm my-4 my-lg-5 text-primary py-3"><span class="tticon-browser flip-horizontal icon-22"></span>إعداد الواجهة الخارجية
<hr class="m-0 flex-grow-1"/>
</h6>
<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-4">
<div class="col-6 col-sm-4 col-md-3 col-lg-4 col-xxl-3">
<label class="form-label" for="id_100">اللون الرئيسي</label>
<input type="text" data-coloris="data-coloris" value="#D4088C"/>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-4 col-xxl-3">
<label class="form-label" for="id_100">اللون الثانوي</label>
<input type="text" data-coloris="data-coloris" value="#FFA31A"/>
</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"> <span>اعداد ألوان القائمة العلوية </span><span class="text-english">(header)</span></p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-4 flex-column">
<div class="col-sm-7 col-md-6 col-lg-7 col-xxl-6">
<label class="form-label">اختر خلفية القائمة</label>
<select class="js-choices-no-search" aria-label="Default select example" dir="rtl">
<option value="1">الخلفية الإفتراضية</option>
<option value="2">اللون الرئيسي</option>
<option value="3">اللون الثانوي</option>
<option value="4">تدرج: من الرئيسي للثانوي</option>
<option value="5">تدرج: من الثانوي للرئيسي</option>
<option value="6" selected="selected">لون مخصص..</option>
</select>
</div>
<div class="col-sm-7 col-md-6 col-lg-7 col-xxl-6">
<label class="form-label" for="id_100">اختر لون الخلفية</label>
<input type="text" data-coloris="data-coloris" value="#850558"/>
</div>
<div class="col-sm-7 col-md-6 col-lg-7 col-xxl-6">
<label class="form-label">اختر لون المحتوى </label>
<select class="js-choices-no-search" aria-label="Default select example" dir="rtl" data-searchEnabled="data-searchEnabled">
<option value="1" selected="selected">اللون الأبيض</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"> <span>اعداد ألوان التذييل السفلي </span><span class="text-english">(Footer)</span></p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-4 flex-column">
<div class="col-sm-7 col-md-6 col-lg-7 col-xxl-6">
<label class="form-label">اختر خلفية القائمة</label>
<select class="js-choices-no-search" aria-label="Default select example" dir="rtl">
<option value="1" selected="selected">الخلفية الإفتراضية</option>
<option value="2">اللون الرئيسي</option>
<option value="3">اللون الثانوي</option>
<option value="4">تدرج: من الرئيسي للثانوي</option>
<option value="5">تدرج: من الثانوي للرئيسي</option>
<option value="6">لون مخصص..</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"><span class="d-block">تحميل الشعار بصيغة SVG لأفضل دقة وجودة.</span><span class="d-block">المنصة تشمل أيقونة.</span></p>
</div>
<div class="col-xl-9 col-xxl-8">
<div class="row g-4">
<div class="col-sm-8 col-md-6 col-lg-8 col-xxl-6">
<label class="form-label">شعار المنصة <span class="text-danger">*</span></label>
<label class="photo-uploader">
<input class="d-none" type="file"/><span class="photo-uploader__upload-area"> <span class="tticon-upload photo-uploader__icon"> </span><span class="photo-uploader__content"> <span class="photo-uploader__text"><span>أعلى حد: </span><span class="text-english">300 KB</span></span><span class="photo-uploader__text"> <span>الملفات المقبولة: </span><span class="text-english">SVG, PNG</span></span></span></span><span class="ration ration-1x1 photo-uploader__preview" style="background-image: url('./images/photo-placeholder-square.svg')"></span>
</label>
</div>
<div class="col-sm-8 col-md-6 col-lg-8 col-xxl-6">
<label class="form-label">أيقونة اللوحة / Favicon <span class="text-danger">*</span></label>
<label class="photo-uploader">
<input class="d-none" type="file"/><span class="photo-uploader__upload-area"> <span class="tticon-upload photo-uploader__icon"> </span><span class="photo-uploader__content"> <span class="photo-uploader__text"><span>أعلى حد: </span><span class="text-english">300 KB</span></span><span class="photo-uploader__text"> <span>الملفات المقبولة: </span><span class="text-english">SVG, PNG</span></span></span></span><span class="ration ration-1x1 photo-uploader__preview" style="background-image: url('./images/photo-placeholder-square.svg')"></span>
</label>
</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-4">
<div class="col-12">
<div class="form-radio-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="theme" id="light-theme"/>
<label class="form-check-label" for="light-theme">المضيئ</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="theme" id="dark-theme"/>
<label class="form-check-label" for="dark-theme">الليلي</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="theme" id="both-themes" checked="checked"/>
<label class="form-check-label" for="both-themes">اتاحة التبديل بين الاثنين</label>
</div>
</div>
</div>
<div class="col-12">
<h6 class="d-flex gap-2 align-items-center text-label-sm mb-0 text-normal">اعداد الألوان في الوضع الليلي أو تركها كما هي
<hr class="m-0 flex-grow-1"/>
</h6>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-4 col-xxl-3">
<label class="form-label" for="id_100">اللون الرئيسي</label>
<input type="text" data-coloris="data-coloris" value="#D4088C"/>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-4 col-xxl-3">
<label class="form-label" for="id_100">اللون الثانوي</label>
<input type="text" data-coloris="data-coloris" value="#FFA31A"/>
</div>
<div class="col-12">
<h6 class="d-flex gap-2 align-items-center text-label-sm mb-0 text-normal">نسخة من الشعار في الوضع الليلي
<hr class="m-0 flex-grow-1"/>
</h6>
</div>
<div class="col-sm-8 col-md-6 col-lg-8 col-xxl-6">
<label class="form-label">شعار المنصة <span class="text-danger">*</span></label>
<label class="photo-uploader">
<input class="d-none" type="file"/><span class="photo-uploader__upload-area"> <span class="tticon-upload photo-uploader__icon"> </span><span class="photo-uploader__content"> <span class="photo-uploader__text"><span>أعلى حد: </span><span class="text-english">300 KB</span></span><span class="photo-uploader__text"> <span>الملفات المقبولة: </span><span class="text-english">IO, PNG</span></span></span></span><span class="ration ration-1x1 photo-uploader__preview" style="background-image: url('./images/photo-placeholder-square.svg')"></span>
</label>
</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>