PenTool UIتصفّح المكتبة

الواجهات الكاملة · منصّة توظيف

الملفّ والإعدادات

تبويبات ونموذج في عمودين — الحفظ يظهر حين يتغيّر شيء، لا قبله

افتحها في لسان جديد ↗
<div class="iface ifp">
  <header class="if-top">
    <span class="brand" data-ar="مِهَن" data-en="Mihan">مِهَن</span>
    <span class="grow"></span>
    <span class="if-avatar">ك</span>
  </header>

  <div class="if-body">
    <div class="if-h">
      <h1 data-ar="حسابي" data-en="My account">حسابي</h1>
      <p data-ar="آخر تحديث قبل يومين" data-en="Updated two days ago">آخر تحديث قبل يومين</p>
    </div>

    <div class="ifp-tabs" role="tablist">
      <button role="tab" aria-selected="false" data-ar="الملفّ" data-en="Profile">الملفّ</button>
      <button role="tab" aria-selected="true" data-ar="التفضيلات" data-en="Preferences">التفضيلات</button>
      <button role="tab" aria-selected="false" data-ar="الأمان" data-en="Security">الأمان</button>
    </div>

    <div class="if-card ifp-hero">
      <span class="if-avatar big">ك</span>
      <div><b>كرم</b>
        <span data-ar="مهندس واجهات · عمّان" data-en="Front-end engineer · Amman">مهندس واجهات · عمّان</span></div>
      <span class="grow"></span>
      <button class="if-btn ghost" data-ar="غيّر الصورة" data-en="Change photo">غيّر الصورة</button>
    </div>

    <form class="ifp-form" onsubmit="return false">
      <div class="grid2">
        <label><span data-ar="المسمّى الوظيفي" data-en="Job title">المسمّى الوظيفي</span>
          <input value="مهندس واجهات"></label>
        <label><span data-ar="سنوات الخبرة" data-en="Years of experience">سنوات الخبرة</span>
          <input class="num" dir="ltr" value="6"></label>
        <label><span data-ar="المدينة" data-en="City">المدينة</span>
          <select><option>عمّان</option><option>القاهرة</option><option>الدار البيضاء</option><option>بيروت</option></select></label>
        <label><span data-ar="نمط العمل" data-en="Work mode">نمط العمل</span>
          <select><option data-ar="عن بُعد" data-en="Remote">عن بُعد</option>
                  <option data-ar="مختلط" data-en="Hybrid">مختلط</option>
                  <option data-ar="في المقرّ" data-en="On-site">في المقرّ</option></select></label>
      </div>

      <div class="ifp-toggles">
        <label class="tg"><input type="checkbox" checked>
          <span><b data-ar="أظهر ملفّي لأصحاب العمل" data-en="Show my profile to employers">أظهر ملفّي لأصحاب العمل</b>
          <i data-ar="يبقى اسمك مخفيًّا حتى تقبل التواصل." data-en="Your name stays hidden until you accept contact.">يبقى اسمك مخفيًّا حتى تقبل التواصل.</i></span></label>
        <label class="tg"><input type="checkbox">
          <span><b data-ar="نبّهني بالوظائف المطابقة" data-en="Notify me about matching roles">نبّهني بالوظائف المطابقة</b>
          <i data-ar="رسالة واحدة أسبوعيًّا، لا أكثر." data-en="One email a week, no more.">رسالة واحدة أسبوعيًّا، لا أكثر.</i></span></label>
      </div>

      <div class="ifp-save">
        <button class="if-btn" data-ar="احفظ التغييرات" data-en="Save changes">احفظ التغييرات</button>
        <button class="if-btn ghost" data-ar="تراجع" data-en="Discard">تراجع</button>
      </div>
    </form>
  </div>
</div>
← تهيئة الحسابواجهة متجر →