صفحه‌ها و مسیر حرکت
هر صفحه چه می‌کند، به کجا می‌رود و چگونه صفحهٔ تازه بسازید.
فهرست صفحه‌ها#
| فایل | کاربرد | مقصد پس از موفقیت | کلید API |
|---|---|---|---|
login.html | ورود با ایمیل و رمز، ورود اجتماعی، «مرا به خاطر بسپار» | 2fa.html | login |
register.html | ثبت‌نام با نمایشگر قدرت رمز و پنجرهٔ قوانین | verify-email.html | register |
multi-step.html | ثبت‌نام سه‌مرحله‌ای با نوار پیشرفت | success.html | register |
forgot-password.html | درخواست کد بازیابی | otp.html | forgot |
otp.html | کد ۶ رقمی (بازیابی رمز یا تأیید ایمیل) | reset-password.html یا مقدار next آدرس | verifyOtp |
verify-email.html | راهنمای بررسی ایمیل و ارسال دوباره | پیوند به otp.html | resendEmail |
2fa.html | کد برنامهٔ احراز هویت | success.html | verifyOtp |
reset-password.html | تعیین رمز جدید | success.html | reset |
success.html | پیام موفقیت با نشان متحرک | — | — |
locked.html | حساب قفل‌شده با شمارش معکوس | — | — |
maintenance.html | در دست تعمیر با نوار پیشرفت | — | — |
coming-soon.html | ثبت ایمیل و شمارندهٔ راه‌اندازی | همان صفحه | waitlist |
error.html | خطای ۴۰۴ | — | — |
مسیر حرکت#
مقصد هر فرم با صفت data-next روی <form> (و برای کد یک‌بارمصرف روی .otp) تعیین می‌شود. مسیرهای پیش‌فرض:
ورود
ثبت‌نام و تأیید ایمیل
بازیابی رمز
برای تغییر مسیر، مقدار data-next را ویرایش کنید. سرور هم می‌تواند در پاسخ خود فیلد next بفرستد و مقصد را همان لحظه تعیین کند ([قالب پاسخ](backend.html#response)).
پارامترهای آدرس کد یک‌بارمصرف#
otp.html در موارد مختلف استفاده می‌شود و دو پارامتر آدرس را می‌شناسد:
| پارامتر | معنا |
|---|---|
next | نام فایل مقصد پس از تأیید، مثلاً success.html؛ فقط الگوی نام-فایل.html پذیرفته می‌شود |
purpose | هدف کد که همراه درخواست به سرور می‌رود (مثلاً email یا reset)؛ پیش‌فرض از data-purpose خوانده می‌شود |
حساب قفل‌شده#
locked.html در دو حالت باز می‌شود: در حالت نمایشی پس از سه رمز اشتباه، و در حالت اتصال به سرور وقتی پاسخ کد وضعیت 423 داشته باشد. نشانی آن در lockedUrl تنظیم می‌شود. مدت شمارش معکوس با data-count (ثانیه) روی .cd مشخص می‌شود:
<div class="cd" data-count="900" role="timer"></div>شمارندهٔ راه‌اندازی#
شمارنده در coming-soon.html پیش‌فرض ۱۵ روز از لحظهٔ بازشدن صفحه است. برای شمارش تا تاریخ مشخص از data-until با قالب ISO استفاده کنید:
<div class="cd" data-until="2026-12-21T00:00:00+03:30" role="timer"></div>فرم این صفحه با data-next="none" تنظیم شده؛ پس از ثبت موفق، همان صفحه می‌ماند و فرم خالی می‌شود.
افزودن صفحهٔ جدید#
نزدیک‌ترین صفحه را کپی کنید و محتوای .card را عوض کنید. این بخش‌ها باید در صفحه بمانند:
- اسکریپت کوچک تم در
<head>(از چشمک‌زدن تم جلوگیری می‌کند) - بلوک
<svg>نمادهای آیکون در ابتدای<body> - لینک
mehmannavaz.cssو اسکریپت‌هایconfig.jsوmehmannavaz.jsبا مسیر درست
حداقل ساختار یک صفحهٔ جدید:
<!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="../assets/css/mehmannavaz.css">
<script>try{document.documentElement.dataset.theme=localStorage.getItem("mn-theme")||(matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light")}catch(e){}</script>
</head>
<body>
<!-- بلوک svg آیکون‌ها را از یکی از صفحه‌ها کپی کنید -->
<main class="stage" id="main">
<section class="card">
<h1>عنوان</h1>
<p class="lead">توضیح کوتاه</p>
</section>
</main>
<script src="../assets/js/config.js"></script>
<script src="../assets/js/mehmannavaz.js"></script>
</body>
</html>آیکون‌ها با <svg class="ic"><use href="#i-lock"/></svg> استفاده می‌شوند. نمادهای موجود: eye، eye-off، moon، sun، shield، mail، wrench، lock، check، alert، info و x. برای نماد تازه، یک <symbol id="i-name" viewBox="0 0 24 24"> به همان بلوک اضافه کنید؛ آیکون‌ها خطی و با ضخامت ۱٫۸ هستند.