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

الواجهات الكاملة · عيادة أسنان

حجز موعد

خطوات وتقويم وفترات وملخّص — مسار حجز كامل بأرقام لاتينية في اللغتين

افتحها في لسان جديد ↗
<div class="iface ifb">
  <header class="if-top">
    <span class="brand" data-ar="عيادة الواحة" data-en="Waha Clinic">عيادة الواحة</span>
    <span class="grow"></span>
    <span class="if-avatar">ن</span>
  </header>

  <div class="if-body">
    <ol class="ifb-steps">
      <li class="done"><b class="num">1</b><span data-ar="الخدمة" data-en="Service">الخدمة</span></li>
      <li class="now"><b class="num">2</b><span data-ar="الموعد" data-en="Time">الموعد</span></li>
      <li><b class="num">3</b><span data-ar="التأكيد" data-en="Confirm">التأكيد</span></li>
    </ol>

    <div class="ifb-cols">
      <div class="if-card ifb-cal">
        <div class="if-h"><h2 data-ar="سبتمبر 2026" data-en="September 2026">سبتمبر 2026</h2></div>
        <div class="dow">
          <span data-ar="أحد" data-en="Sun">أحد</span><span data-ar="اثن" data-en="Mon">اثن</span>
          <span data-ar="ثلا" data-en="Tue">ثلا</span><span data-ar="أرب" data-en="Wed">أرب</span>
          <span data-ar="خمي" data-en="Thu">خمي</span><span data-ar="جمع" data-en="Fri">جمع</span>
          <span data-ar="سبت" data-en="Sat">سبت</span>
        </div>
        <div class="days num">
          <button class="off">30</button><button>1</button><button>2</button><button>3</button>
          <button>4</button><button class="off">5</button><button class="off">6</button>
          <button>7</button><button>8</button><button class="on">9</button><button>10</button>
          <button>11</button><button class="off">12</button><button class="off">13</button>
          <button>14</button><button>15</button><button>16</button><button>17</button>
          <button>18</button><button class="off">19</button><button class="off">20</button>
        </div>
        <p class="ifb-note" data-ar="الجمعة والسبت عطلة — لا مواعيد فيهما"
           data-en="Friday and Saturday are the weekend — no slots">الجمعة والسبت عطلة — لا مواعيد فيهما</p>
      </div>

      <div class="ifb-side">
        <div class="if-card">
          <div class="if-h"><h2 data-ar="الفترات المتاحة" data-en="Available slots">الفترات المتاحة</h2></div>
          <div class="slots num">
            <button>09:00</button><button>09:30</button><button class="on">10:00</button>
            <button class="off">10:30</button><button>11:00</button><button>11:30</button>
          </div>
        </div>
        <div class="if-card ifb-sum">
          <h2 data-ar="ملخّص الحجز" data-en="Booking summary">ملخّص الحجز</h2>
          <dl>
            <div><dt data-ar="الخدمة" data-en="Service">الخدمة</dt>
                 <dd data-ar="تنظيف وتلميع" data-en="Cleaning &amp; polish">تنظيف وتلميع</dd></div>
            <div><dt data-ar="الطبيب" data-en="Doctor">الطبيب</dt><dd>د. ديمة</dd></div>
            <div><dt data-ar="الموعد" data-en="When">الموعد</dt>
                 <dd class="num">09 / 09 · 10:00</dd></div>
            <div><dt data-ar="المدّة" data-en="Duration">المدّة</dt>
                 <dd><span class="num">45</span> <span data-ar="دقيقة" data-en="min">دقيقة</span></dd></div>
          </dl>
          <button class="if-btn" data-ar="أكّد الحجز" data-en="Confirm booking">أكّد الحجز</button>
        </div>
      </div>
    </div>
  </div>
</div>
← لوحة تحليلاتإتمام الشراء →