customerTicket/design-prototypes/ticket-new-wizard/index.html

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>نمونه رابط مرحله‌ای ثبت درخواست</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="prototype-note">
    <span>نمونه نمایشی مستقل</span>
    <p>این صفحه به Django و اطلاعات واقعی متصل نیست.</p>
  </header>

  <main class="shell">
    <nav class="topbar" aria-label="مسیر صفحه">
      <button class="back-button" type="button">→ بازگشت به درخواست‌ها</button>
      <div class="brand"><span>لوله‌گستر</span><small>سامانه ارتباط با مشتریان</small></div>
    </nav>

    <section class="intro">
      <div>
        <span class="eyebrow">ثبت درخواست جدید</span>
        <h1>چطور می‌توانیم کمک کنیم؟</h1>
        <p>قدم‌به‌قدم پیش می‌رویم؛ در هر مرحله فقط اطلاعات ضروری همان بخش را می‌بینید.</p>
      </div>
      <div class="save-state"><i></i> اطلاعات شما در این صفحه حفظ می‌شود</div>
    </section>

    <ol class="progress" aria-label="مراحل ثبت درخواست">
      <li class="active" data-progress="1"><span>۱</span><div><b>موضوع</b><small>مسیر درخواست</small></div></li>
      <li data-progress="2"><span>۲</span><div><b>موقعیت</b><small>اختیاری</small></div></li>
      <li data-progress="3"><span>۳</span><div><b>کارشناس</b><small>انتخاب مسئول</small></div></li>
      <li data-progress="4"><span>۴</span><div><b>جزئیات</b><small>متن و فایل</small></div></li>
      <li data-progress="5"><span>۵</span><div><b>بازبینی</b><small>تأیید نهایی</small></div></li>
    </ol>

    <form class="wizard" id="ticket-wizard" novalidate>
      <section class="step active" data-step="1" aria-labelledby="step-1-title">
        <header class="step-head"><span class="step-symbol">⌕</span><div><small>مرحله ۱ از ۵</small><h2 id="step-1-title">موضوع درخواستتان چیست؟</h2><p>با چند کلمه شروع کنید تا مسیر مناسب را پیشنهاد دهیم، یا خودتان انتخاب کنید.</p></div></header>
        <label class="search-box"><span class="sr-only">جست‌وجوی موضوع درخواست</span><i>⌕</i><input id="intent" type="search" placeholder="مثلاً فیش واریزی، موجودی کالا یا ارسال بار..."><kbd>جست‌وجو</kbd></label>
        <div class="suggestions" id="suggestions" aria-live="polite" hidden>
          <button type="button" data-suggest-unit="حسابداری" data-suggest-category="فیش واریزی"><b>ارسال فیش یا رسید پرداخت</b><small>حسابداری · فیش واریزی</small><span>انتخاب ←</span></button>
          <button type="button" data-suggest-unit="بارگیری انبار" data-suggest-category="هماهنگی بار"><b>هماهنگی ارسال یا بارگیری</b><small>بارگیری انبار · هماهنگی بار</small><span>انتخاب ←</span></button>
          <p class="suggestion-empty" id="suggestion-empty" hidden>پیشنهاد دقیقی پیدا نشد؛ از انتخاب دستی استفاده کنید.</p>
        </div>
        <button class="manual-toggle" type="button" id="manual-toggle" aria-expanded="false">انتخاب دستی واحد و دسته‌بندی <span>⌄</span></button>
        <div class="manual-fields" id="manual-fields" hidden>
          <label><span>واحد سازمانی <em>*</em></span><select id="unit" required><option value="">انتخاب واحد</option><option>فروش</option><option>حسابداری</option><option>بارگیری انبار</option></select></label>
          <label><span>دسته‌بندی <em>*</em></span><select id="category" required disabled><option value="">ابتدا واحد را انتخاب کنید</option></select></label>
        </div>
        <label class="full-field"><span>موضوع دقیق درخواست <em>*</em></span><input id="subject" maxlength="200" required placeholder="یک عنوان کوتاه و روشن بنویسید"><small>مثال: پیگیری فیش واریزی سفارش ۲۴۸</small></label>
        <p class="validation" data-error="1" role="alert"></p>
        <footer class="step-actions"><span>حدود یک دقیقه تا پایان</span><button class="primary" type="button" data-next>ادامه <b>←</b></button></footer>
      </section>

      <section class="step" data-step="2" aria-labelledby="step-2-title" hidden>
        <header class="step-head"><span class="step-symbol">⌖</span><div><small>مرحله ۲ از ۵ · اختیاری</small><h2 id="step-2-title">این درخواست مربوط به کجاست؟</h2><p>اگر موقعیت در پاسخ بهتر کارشناسان مؤثر است آن را انتخاب کنید؛ در غیر این صورت عبور کنید.</p></div></header>
        <div class="two-columns">
          <label><span>استان</span><select id="province"><option value="">انتخاب استان</option><option>تهران</option><option>اصفهان</option><option>مرکزی</option></select></label>
          <label><span>شهر</span><select id="city" disabled><option value="">ابتدا استان را انتخاب کنید</option></select></label>
        </div>
        <div class="soft-tip"><span>i</span><p><b>نیازی به انتخاب ندارید</b>این بخش کاملاً اختیاری است و می‌توانید مستقیماً ادامه دهید.</p></div>
        <footer class="step-actions"><button class="secondary" type="button" data-prev>مرحله قبل</button><button class="primary" type="button" data-next>ادامه <b>←</b></button></footer>
      </section>

      <section class="step" data-step="3" aria-labelledby="step-3-title" hidden>
        <header class="step-head"><span class="step-symbol">◎</span><div><small>مرحله ۳ از ۵ · اختیاری</small><h2 id="step-3-title">چه کسی درخواست را بررسی کند؟</h2><p>صف عمومی پیشنهاد ماست؛ درخواست به اولین کارشناس آزاد همان واحد می‌رسد.</p></div></header>
        <div class="expert-list">
          <label class="expert selected"><input type="radio" name="expert" value="صف عمومی" checked><span class="avatar queue">⌁</span><div><b>صف عمومی واحد</b><small>سریع‌ترین انتخاب · اولین کارشناس آزاد</small></div><i>✓</i></label>
          <label class="expert"><input type="radio" name="expert" value="مریم احمدی"><span class="avatar">م</span><div><b>مریم احمدی</b><small>کارشناس فروش · پاسخ‌گویی فعال</small></div><i>✓</i></label>
          <label class="expert"><input type="radio" name="expert" value="علی رضایی"><span class="avatar amber">ع</span><div><b>علی رضایی</b><small>کارشناس ارشد · پاسخ‌گویی فعال</small></div><i>✓</i></label>
        </div>
        <footer class="step-actions"><button class="secondary" type="button" data-prev>مرحله قبل</button><button class="primary" type="button" data-next>ادامه <b>←</b></button></footer>
      </section>

      <section class="step" data-step="4" aria-labelledby="step-4-title" hidden>
        <header class="step-head"><span class="step-symbol">≡</span><div><small>مرحله ۴ از ۵</small><h2 id="step-4-title">جزئیات را برای کارشناس بنویسید</h2><p>هرچه واضح‌تر توضیح دهید، پاسخ دقیق‌تری دریافت می‌کنید. متن یا حداقل یک پیوست لازم است.</p></div></header>
        <label class="full-field"><span>شرح درخواست</span><textarea id="body" rows="6" placeholder="شماره سفارش، محصول موردنظر و توضیح مسئله را بنویسید..."></textarea><small><span id="body-count">۰</span> از ۲۰۰۰ نویسه</small></label>
        <div class="attachment-zone">
          <div class="attachment-head"><span>＋</span><div><b>عکس و فایل‌های مرتبط</b><small>حداکثر ۱۰ فایل؛ تصاویر بزرگ قبل از ارسال بهینه می‌شوند.</small></div></div>
          <div class="attachment-actions"><label for="gallery">▣ انتخاب عکس از گالری</label><label for="documents">＋ انتخاب فایل</label></div>
          <input id="gallery" type="file" accept="image/*" multiple hidden><input id="documents" type="file" multiple hidden>
          <div class="file-preview" id="file-preview" aria-live="polite"></div>
        </div>
        <section class="voice-recorder" id="voice-recorder" aria-labelledby="voice-title">
          <header class="voice-head">
            <span class="voice-icon" aria-hidden="true">◉</span>
            <div><b id="voice-title">پیام صوتی</b><small id="voice-status" aria-live="polite">برای توضیح سریع‌تر، صدای خود را ضبط کنید.</small></div>
            <span class="voice-timer" id="voice-timer">۰۰:۰۰</span>
          </header>
          <div class="voice-idle" id="voice-idle">
            <button class="voice-start" type="button" id="record"><span>●</span> شروع ضبط صدا</button>
            <small>پس از اجازه‌دادن به میکروفن، ضبط آغاز می‌شود.</small>
          </div>
          <div class="voice-live" id="voice-live" hidden>
            <div class="voice-wave" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
            <div class="voice-controls">
              <button type="button" id="pause">مکث</button>
              <button class="voice-stop" type="button" id="stop">■ توقف و ذخیره</button>
              <button class="voice-cancel" type="button" id="cancel-recording">لغو</button>
            </div>
          </div>
          <div class="voice-preview" id="voice-preview" hidden>
            <div class="voice-ready"><span>✓</span><p><b>پیام صوتی آماده است</b><small id="voice-meta">قابل پخش و بررسی پیش از ارسال</small></p></div>
            <audio id="audio" controls preload="metadata"></audio>
            <div class="voice-preview-actions"><button type="button" id="rerecord">ضبط مجدد</button><button type="button" id="delete-voice">حذف پیام صوتی</button></div>
          </div>
          <p class="voice-note"><span>ⓘ</span> با رفتن به مرحله بعد، ضبط فعال به‌صورت خودکار متوقف و ذخیره می‌شود.</p>
          <p class="voice-error" id="voice-error" role="alert" hidden></p>
        </section>
        <p class="validation" data-error="4" role="alert"></p>
        <footer class="step-actions"><button class="secondary" type="button" data-prev>مرحله قبل</button><button class="primary" type="button" data-next>مشاهده پیش‌نمایش <b>←</b></button></footer>
      </section>

      <section class="step review-step" data-step="5" aria-labelledby="step-5-title" hidden>
        <header class="step-head"><span class="step-symbol success">✓</span><div><small>مرحله ۵ از ۵</small><h2 id="step-5-title">همه‌چیز آماده ارسال است</h2><p>اطلاعات را یک بار مرور کنید؛ هر بخش را می‌توانید جداگانه ویرایش کنید.</p></div></header>
        <div class="review-callout"><span>✓</span><div><b>یک مرور کوتاه پیش از ارسال</b><small>اگر موردی درست نیست، همان ردیف را ویرایش کنید؛ اطلاعات مراحل دیگر حفظ می‌شود.</small></div></div>
        <div class="review-list">
          <section class="review-row">
            <span class="review-icon">۱</span><div class="review-content"><small>موضوع و مسیر رسیدگی</small><h3 id="review-subject">—</h3><p><span id="review-unit">—</span><i>←</i><span id="review-category">—</span></p></div><button type="button" data-edit="1"><span>✎</span> ویرایش</button>
          </section>
          <section class="review-row">
            <span class="review-icon">۲</span><div class="review-content"><small>موقعیت</small><h3 id="review-location">ثبت نشده</h3><p>اختیاری</p></div><button type="button" data-edit="2"><span>✎</span> ویرایش</button>
          </section>
          <section class="review-row">
            <span class="review-icon">۳</span><div class="review-content"><small>نحوه ارجاع</small><h3 id="review-expert">صف عمومی</h3><p>در همان واحد سازمانی</p></div><button type="button" data-edit="3"><span>✎</span> ویرایش</button>
          </section>
          <section class="review-row review-details">
            <span class="review-icon">۴</span><div class="review-content"><small>شرح و پیوست‌ها</small><p class="review-body" id="review-body">—</p><div class="review-files" id="review-files"></div><audio id="review-audio" class="review-audio" controls hidden></audio></div><button type="button" data-edit="4"><span>✎</span> ویرایش</button>
          </section>
        </div>
        <footer class="step-actions final-actions"><button class="secondary" type="button" data-prev>مرحله قبل</button><button class="primary send" type="submit">ثبت و ارسال نهایی <b>←</b></button></footer>
      </section>

      <section class="success-page" id="success-page" hidden>
        <span>✓</span><h2>درخواست با موفقیت آماده شد</h2><p>این فقط نمونه نمایشی است و اطلاعاتی به سرور ارسال نشد.</p><button type="button" id="restart">مشاهده دوباره طرح</button>
      </section>
    </form>
  </main>
  <nav class="mobile-dock" aria-label="دسترسی سریع مشتری">
    <button type="button"><span>◎</span>درخواست‌ها</button>
    <button class="active" type="button"><span>＋</span>درخواست جدید</button>
    <button type="button"><span>○</span>پروفایل</button>
  </nav>
  <script src="prototype.js"></script>
</body>
</html>