پس از بمب‌گذاری مشکوک برج ساعت لندن و خنثی کردن بمب توسط شرلوک و دستیارش، پلیس لیستی از افراد مشکوک به دست داشتن در این بمب‌گذاری تهیه کرده است، شرلوک پس از اینکه متوجه این موضوع شد به صورت غیرقانونی وارد ایستگاه پلیس شد و به کامپیوتر لستراد دسترسی پیدا کرد.

برای اینکه شرلوک بتواند به لیست موردنظر دسترسی پیدا کند، باید تغییرات خواسته شده را با توجه به پیام ناشناسی که دریافت کرده است، انجام دهد.

ظاهر کلی برنامه به صورت زیر است:

پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید.

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

validation
├── assets
│   ├── background.png
│   ├── monitor.svg
│   └── wood.jpg 
├── style
│   └── style.css
├── index.html
├── index2.html
├── style2.css

توضیحات

فایل index.html

ورودی	الگوی مورد نیاز	مثال
email	ورودی باید فقط متن‌هایی را قبول کند که با رشته PoliceStation.GOV@ تمام شود و رشته قبل از این رشته بین ۵ الی ۱۰ حرف باشد.	sherlock@PoliceStation.GOV
password	ورودی باید فقط متن‌هایی را قبول کند که حداقل ۹ حرف و حداقل دارای یک حرف کوچک و یک حرف بزرگ باشد و حتما کاراکترهای @ و # را داشته باشد. وجود داشتن یا نداشتن اعداد هیچ مانعی ندارد.	sherLock#@1403
checkbox	برای رفتن به صفحه بعدی، باید شرط تیک خوردن I'm a PoliceMan را قرار بدهید.	-

فایل index2.html

ورودی	الگوی مورد نیاز	مثال
text	ورودی تنها باید رشته‌هایی را دریافت کند که تنها شامل حروف کوچک و بزرگ و حداقل ۵ و حداکثر ۱۵ حرف، دارای رشته sherlock نباشد.	moriarty

فایل style-2.css

انیمیشن باید تنظیمات زیر را داشته باشد:

• زمان انجام انیمیشن باید ۰.۳ ثانیه باشد.
• انیمیشن باید آخرین حالتی که در keyframe تعریف شده است را حفظ کند.
• رنگ متن درون ورودی باید برابر با rgb(255, 0, 0) باشد.

فریم‌های کلیدی (keyframe) باید تنظیمات زیر را داشته باشد:

زمان	نیازمندی
۲۵٪	ورودی ۵ پیکسل به سمت جلو در راستای x برود.
۵۰٪	ورودی ۵ پیکسل به سمت عقب در راستای x برود.
۷۵٪	ورودی ۵ پیکسل به سمت جلو در راستای x برود.
۱۰۰٪	ورودی ۵ پیکسل به سمت عقب در راستای x برود.

در بدنه جدول تغییرات زیر را بر روی همه سطرها انجام بدهید:

المان	ویژگی	مقدار
سطرهای جدول	رنگ پس زمینه سطرهای زوج	rgb(243,243,243)
سطرهای جدول	رنگ پس زمینه سطرهای فرد	rgb(255,255,255)

در بدنه جدول تغییرات زیر را بر روی سطری که کلاس active-row دارد انجام بدید:

المان	ویژگی	مقدار
سطر دارای کلاس active-row	وزن فونت	۷۰۰
سطر دارای کلاس active-row	رنگ	rgb(94, 102, 129)

خواسته مسئله

در فایل‌های اشاره شده نیازمندی‌های گفته شده را انجام دهید.

نکات

1. شما تنها قادر به تغییر فایل‌های index.html، index-2.html و style-2.css هستید.
2. .در فایل‌های HTML شما اجازه اضافه یا کردن هرگونه المان و یا تغییر المان‌های موجود را ندارید.
3. در فایل style-2.css قسمتی برای کدنویسی و حل مسئله مشخص شده است، شما تنها اجازه کدنویسی در آن قسمت را دارید. از تغییر در بقیه قسمت کد پرهیز کنید.
4. برای بارگذاری فایل‌های پروژه را مانند ساختار مشخص شده با فرمت زیپ ارسال کنید.