مستنداتنسخهٔ ۲٫۰نمونهٔ زنده
مستنداتشروعساختار فایل‌ها

ساختار فایل‌ها

هر پوشه و فایل برای چه کاری است و کجا باید دنبال یک قاعده گشت.

درخت فایل‌ها#

mehmannavaz/
├── index.html                 فهرست صفحه‌ها (فقط برای نمایش)
├── pages/
│   ├── login.html             ورود
│   ├── register.html          ثبت‌نام
│   ├── multi-step.html        ثبت‌نام سه‌مرحله‌ای
│   ├── forgot-password.html   فراموشی رمز
│   ├── reset-password.html    رمز جدید
│   ├── otp.html               کد یک‌بارمصرف
│   ├── verify-email.html      تأیید ایمیل
│   ├── 2fa.html               تأیید دومرحله‌ای
│   ├── success.html           موفقیت
│   ├── locked.html            حساب قفل‌شده
│   ├── maintenance.html       در دست تعمیر
│   ├── coming-soon.html       به‌زودی
│   └── error.html             خطای ۴۰۴
├── assets/
│   ├── css/
│   │   ├── mehmannavaz.css    توکن‌ها، کامپوننت‌ها و انیمیشن‌ها
│   │   ├── custom.css         شخصی‌سازی شما (بعد از فایل اصلی بارگذاری می‌شود)
│   │   └── docs.css           فقط برای مستندات
│   ├── js/
│   │   ├── config.js          تنظیمات و نشانی سرویس‌ها
│   │   ├── mehmannavaz.js     منطق صفحه‌ها
│   │   └── docs.js            فقط برای مستندات
│   ├── images/favicon.svg
│   └── fonts/                 فایل فونت را اینجا بگذارید
└── docs/                      مستندات

ساختار CSS#

فایل mehmannavaz.css به هشت بخش با ترتیب ثابت تقسیم شده است. برای تغییر رفتار یک کامپوننت، قاعدهٔ آن را در بخش مربوط پیدا کنید.

بخشمحتوا
۱ · توکن‌هامتغیرهای رنگ، فونت، گردی گوشه و زمان‌بندی؛ تم روشن و تیره
۲ · پایهبازنشانی، فوکوس، لینک‌ها، انتخاب متن
۳ · چیدمان.shell، .stage، .brand-panel و .card
۴ · کامپوننت‌هافیلد، دکمه، کد یک‌بارمصرف، نوار گام، نشان، تاست، مودال
۵ · صفحه‌هابلوک‌های مخصوص صفحه‌ها مثل شمارش معکوس و کد خطا
۶ · انیمیشنkeyframeها و احترام به prefers-reduced-motion
۷ · جلوه‌هاپس‌زمینهٔ شفقی، نور دنبال‌کنندهٔ ماوس، ورود پلکانی
۸ · حالت‌ها و دسترس‌پذیریآیکون‌ها، هشدارها، تاست، forced-colors

فایل‌های جاوااسکریپت#

فایلنقش
config.jsشیء window.MN_CONFIG؛ باید پیش از mehmannavaz.js بارگذاری شود
mehmannavaz.jsاعتبارسنجی، ارسال فرم، کد یک‌بارمصرف، تم، تاست، مودال و شمارش معکوس
docs.jsجست‌وجو و ناوبری مستندات؛ در محصول نهایی لازم نیست

ترتیب بارگذاری در انتهای <body> هر صفحه:

HTML
<script src="../assets/js/config.js"></script>
<script src="../assets/js/mehmannavaz.js"></script>
مهمان‌نواز نسخهٔ ۲٫۰ · مهر ۱۴۰۵فهرست تغییرات