**HTML** - Form Validation - Input Types (password, checkbox, ...) - Input Attributes (value, min, max, ...) **CSS** - Flexbox Layout - Pseudo Selectors (:hover, :focus, ...) - Font Management --- برای استفاده از خدمات شرکت Mockstar، باید در سایت آن عضو شد و از پمبه خواسته شده است تا طرح جدید صفحات ورود و ثبت‌نام را پیاده‌سازی کند. پمبه برای محک‌زدن توانایی‌هایش می‌خواهد اعتبارسنجی ورودی‌‌های کاربر را بدون استفاده از `JavaScript` انجام دهد. ## توضیحات سوال <details class="green"> <summary>تصاویر خروجی نمونه</summary> صفحه register:  صفحه login:  </details> می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی، [این فیلم](https://codestar.s3.ir-thr-at1.arvanstorage.com/challenge-03.mp4) را مشاهده کنید. ## پروژه اولیه پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/41564/download_problem_initial_project/140012) دانلود کنید. <details class="blue"> <summary>ساختار فایل‌ها</summary> ``` initial-project-03.zip ├── icons │ ├── email.svg │ ├── password.svg │ ├── phone.svg │ └── user.svg ├── illustrations │ └── gangster.svg ├── images │ └── rdr2.webp ├── dynamic.css ├── index.html └── static.css ``` </details> <details class="pink"> <summary>راه‌اندازی پروژه</summary> + ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید. + سپس فایل `index.html` را در مرورگر خود باز کنید. </details> ## خواسته‌های مسئله - اعتبار‌سنجی ورودی‌های کاربر تنها با استفاده از `html` - نام کاربری باید از جنس `text` باشد - نام کاربری باید حداقل ۳ و حداکثر ۳۲ کاراکتر داشته‌ باشد - نام کاربری فقط می‌تواند حاوی حروف کوچک و بزرگ انگلیسی‌ و اعداد باشد - ایمیل باید از جنس `email` باشد - تلفن باید از جنس `tel` باشد - تلفن با یکی از عبارات زیر شروع شود و در ادامه حاوی ۹ رقم باشد - `+989` - `00989` - `09` - رمز عبور باید از جنس `password` باشد - رمز عبور باید حداقل ۸ و حداکثر ۳۲ کاراکتر داشته‌ باشد - رمز عبور باید حداقل حاوی یک حرف کوچک انگلیسی، یک حرف بزرگ انگلیسی، یک رقم و یکی از کاراکترهای `!@#$%^&*` باشد - دکمه‌ها باید از جنس `submit` باشند - جابه‌جایی `smooth` بین بخش‌های `register` و `login` | مقدار | ویژگی | وضعیت | المان | | :---------------------------------------: | :---------------: | :-----: | :-----------: | | `hidden` | Overflow | \- | main | | `50rem` | عرض | \- | main | | `0.2rem` | گردی گوشه‌ها | \- | main | | `60%` | عرض | \- | form | | `2rem` | Padding | \- | form | | `1rem` | فاصله بین فرزندان | \- | form | | `0.8rem` | اندازه فونت | \- | label > span | | `1.2rem` | عرض | \- | label > img | | `--color--form-input-background` | رنگ پس‌زمینه | \- | label > input | | `--color--form-input-background--invalid` | رنگ پس‌زمینه | invalid | label > input | | `--color--form-button-background` | رنگ پس‌زمینه | \- | button | | `--color--form-button-foreground` | رنگ | \- | button | | `--color--form-button-background--hover` | رنگ پس‌زمینه | hover | button | | `--color--form-paragraph-foreground` | رنگ | \- | p | | `--color--form-link-foreground` | رنگ | \- | a | | `40%` | عرض | \- | section | | `2rem` | Padding | \- | section | | `16rem` | عرض | \- | section > img | ## نکات - شما تنها مجاز به تغییر در فایل‌های `index.html` و `dynamic.css` هستید. تغییرات در باقی فایل‌ها نادیده گرفته می‌شود. - شما تنها مجاز به تغییر یا اضافه و کم کردنِ Attributeهای فایل `index.html` هستید و نباید ترتیب المان‌ها را عوض کنید یا المانی را اضافه و کم کنید. - **شما مجاز به استفاده از JavaScript نیستید.** - توجه کنید که داوری خودکار بر مبنای ساختار فایل `index.html` انجام می‌شود. - برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید. ``` [your-zip-file-name].zip ├── dynamic.css └── index.html ```