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

الواجهات الكاملة · فريق دعم

صندوق محادثات

قائمة على جانب وقارئ على الآخر — تخطيط يتحوّل إلى شاشة واحدة على الجوّال

افتحها في لسان جديد ↗
<div class="iface ifi">
  <header class="if-top">
    <span class="brand" data-ar="ردّ" data-en="Radd">ردّ</span>
    <span class="grow"></span>
    <button class="if-btn ghost" data-ar="مرشّح" data-en="Filter">مرشّح</button>
    <span class="if-avatar">م</span>
  </header>

  <div class="ifi-split">
    <ul class="ifi-list">
      <li><b data-ar="لينا" data-en="Lina">لينا</b>
        <span data-ar="الطلب لم يصل حتى الآن" data-en="Order hasn’t arrived yet">الطلب لم يصل حتى الآن</span>
        <i class="num">09:14</i></li>
      <li class="on"><b data-ar="طارق" data-en="Tariq">طارق</b>
        <span data-ar="هل يمكن تغيير العنوان؟" data-en="Can I change the address?">هل يمكن تغيير العنوان؟</span>
        <i class="num">08:52</i><em class="dot" aria-label="غير مقروءة"></em></li>
      <li><b data-ar="رهف" data-en="Rahaf">رهف</b>
        <span data-ar="شكرًا، وصلني اليوم" data-en="Thanks, arrived today">شكرًا، وصلني اليوم</span>
        <i class="num">08:20</i></li>
      <li><b data-ar="غيث" data-en="Ghaith">غيث</b>
        <span data-ar="الفاتورة فيها بند لا أعرفه" data-en="An invoice line I don’t recognise">الفاتورة فيها بند لا أعرفه</span>
        <i class="num">Yesterday</i></li>
      <li><b data-ar="مريم" data-en="Mariam">مريم</b>
        <span data-ar="أريد إلغاء الاشتراك" data-en="I want to cancel">أريد إلغاء الاشتراك</span>
        <i class="num">Yesterday</i></li>
    </ul>

    <section class="ifi-read">
      <div class="ifi-head">
        <div><b data-ar="طارق" data-en="Tariq">طارق</b>
          <span data-ar="طلب #48212 · الدوحة" data-en="Order #48212 · Doha">طلب #48212 · الدوحة</span></div>
        <span class="grow"></span>
        <button class="if-btn ghost" data-ar="أغلق" data-en="Close">أغلق</button>
      </div>

      <div class="ifi-thread">
        <div class="msg them"><p data-ar="مساء الخير، هل أستطيع تغيير عنوان التوصيل قبل الشحن؟"
          data-en="Good evening — can I change the delivery address before it ships?">مساء الخير، هل أستطيع تغيير عنوان التوصيل قبل الشحن؟</p>
          <i class="num">08:52</i></div>
        <div class="msg me"><p data-ar="بالتأكيد. الطلب لم يُشحَن بعد — أرسل لي العنوان الجديد وأحدّثه الآن."
          data-en="Of course. It hasn’t shipped yet — send me the new address and I’ll update it now.">بالتأكيد. الطلب لم يُشحَن بعد — أرسل لي العنوان الجديد وأحدّثه الآن.</p>
          <i class="num">08:55</i></div>
        <div class="msg them"><p data-ar="الدوحة — الخليج الغربي، برج 12، الطابق الرابع."
          data-en="Doha — West Bay, Tower 12, 4th floor.">الدوحة — الخليج الغربي، برج 12، الطابق الرابع.</p>
          <i class="num">08:58</i></div>
      </div>

      <form class="ifi-reply" onsubmit="return false">
        <input aria-label="ردّك" placeholder="اكتب ردّك…"
               data-ar-ph="اكتب ردّك…" data-en-ph="Write your reply…">
        <button class="if-btn" data-ar="أرسل" data-en="Send">أرسل</button>
      </form>
    </section>
  </div>
</div>
← صفحة توثيقفاتورة قابلة للطباعة →