در اولین سوال از سری جدید **مسابقات المپیک فناوری پردیس** جدول برترین گلزنان جام فناوری پردیس را با `HTML` و `CSS` پیاده‌سازی می‌کنید. جدول باید نام هر بازیکن، کشورش و تعداد گل‌هایش را نشان بدهد و در بالای جدول، آقای گل با یک کادر متمایز نمایش داده شود! هدف این سوال آشنا شدن با ساختار پروژه‌ها و نحوهٔ ارسال پاسخ و سیستم داوری کوئرا است، برای همین عمداً ساده نگه داشته شده است. **استفاده از `JavaScript` مجاز نیست.**  **هدف این سوال** پیاده‌سازی ساختار درست `HTML` و اعمال چند قاعدهٔ پایهٔ `CSS` است. **ظاهر صفحهٔ شما لازم نیست شبیه تصویرهای این صورت سوال باشد.** تصویرها فقط برای این آمده‌اند که تصور کنید خروجی چه چیزی است؛ سیستم داوری کوئرا رنگ، فونت، فاصله و اندازهٔ پیکسلی را **اصلاً بررسی نمی‌کند** و فقط وجود عنصرها و چند ویژگی مشخص را می‌سنجد. پس وقتتان را صرف ژینگولیشن **نکنید!** # **پروژهٔ اولیه** **پروژهٔ اولیه** را از [این لینک](/contest/assignments/103143/download_problem_initial_project/356836/) دانلود کنید. ```plaintext initial_project/ ├── index.html └── styles.css ``` + **نکته:‌** فقط همین دو فایل را تغییر دهید و فایل جدیدی به پروژه اضافه **نکنید.** + **نکته:** داخل فایل‌های پروژهٔ اولیه، در هر بخش کامنت‌هایی جهت انجام راهنمایی برای پیاده‌سازی قرار گرفته‌اند: قرارداد هر تابع، حالت‌های مرزی و نکته‌های پیاده‌سازی. پیش از شروع هر فایل، کامنت‌های بالای آن را بخوانید. + **نکته:** تمام متن‌های قابل نمایش در صفحه باید انگلیسی باشند. عنصر `html` هم باید `lang="en"` و `dir="ltr"` داشته باشد. # **ساختار** *HTML* **گلزنان برتر!** صفحه شامل یک `header`، یک `main` و یک `footer` است و باید دقیقاً یک عنصر `h1` و یک عنصر `main` داشته باشد. |  | | :-: | | درخت عناصر و جای هر `data-testid` در آن | | **بخش** | `data-testid` | **پیاده‌سازی** | | :-: | :-: | :-: | | هدر | `site-header` | باید عنصر `header` باشد | | معرفی آقای گل | `golden-boot` | کادر متمایز بالای جدول | | نام آقای گل | `leader-name` | داخل همان کادر، با متن غیرخالی | | جدول گلزنان | `leaderboard` | باید عنصر `ol` باشد | | هر ردیف | `scorer-row` | باید عنصر `li` باشد؛ **دست‌کم پنج** ردیف لازم است | | فوتر | `site-footer` | باید عنصر `footer` باشد | | متن حق نشر | `copyright` | داخل فوتر، با متن غیرخالی | داخل **هر** ردیف `scorer-row` این سه عنصر باید باشند: | **عنصر** | `data-testid` | **شرط** | | :-: | :-: | :-: | | نام بازیکن | `player-name` | متن غیرخالی | | کشور | `player-country` | متن غیرخالی | | تعداد گل | `goals` | متنش باید دست‌کم یک رقم داشته باشد | + **نکته:** جدول باید فهرست مرتب (`ol`) باشد، نه `ul` و نه `table`. رتبهٔ گلزنان یک ترتیب معنادار دارد و `ol` و این ساختار ترتیب موارد را برای `screen reader` نیز مشخص می‌کند. + **نکته:** نام بازیکن‌ها، کشورها و تعداد گل‌ها می‌توانند کاملا به دلخواه انتخاب شوند؛ فقط باید در صفحه وجود داشته باشند! # **پیاده‌سازی** `head` داخل `head` این چهار مورد باید وجود داشته باشد: + `<meta charset="utf-8">` + یک *viewport meta tag* که مقدار `content` آن شامل `width=device-width` باشد + یک `title` که **بیش از چهار کاراکتر** داشته باشد + یک `<link rel="stylesheet" href="styles.css">` # **الزامات** *CSS* **گلزنان برتر!** سه مورد در فایل `styles.css` بررسی می‌شود: 1. دست‌کم یک متغیر `CSS` تعریف کنید و جایی با `var(...)` از آن استفاده کنید: ```css style.css css :root { --gold: #f5c542; } [data-testid="golden-boot"] { background: var(--gold); } ``` 2. **هر** ردیف `scorer-row` باید `display: flex` داشته باشد. 3. کادر آقای گل باید گوشه‌های گرد داشته باشد؛ یعنی مقدار `border-radius` آن چیزی غیر از `0px` باشد.  # **آنچه سیستم داوری بررسی خواهد کرد** در این سوال **نیازی نیست** که ظاهر صفحه **دقیقاً** مثل تصاویر نمونه باشد. سیستم داوری کوئرا رنگ‌ها، فونت‌ها، فاصله‌ها و اندازه‌های پیکسلی را **بررسی نمی‌کند.** آنچه بررسی می‌شود به شرح زیر است: + مقدار `lang="en"` و `dir="ltr"` روی عنصر `html` + **وجود** چهار مورد گفته‌شده در `head` + **وجود** دقیقاً یک `h1` و دقیقاً یک `main` + **وجود** عناصر `header` و `footer` و `ol` در جاهایی که ذکر شده + **وجود** دست‌کم پنج ردیف `scorer-row` + **وجود** سه عنصر داخلی در هر ردیف و غیرخالی بودن متنشان + **وجود** رقم در متن تعداد گل‌ها + **وجود** تعریف و استفادهٔ متغیر `CSS` در فایل استایل + **اعمال** `display: flex` به هر `scorer-row` و اعمال `border-radius` غیرصفر به `golden-boot` |  | | :-: | | نگاشت هر `data-testid` به عنصر متناظرش روی صفحه | # **آنچه باید آپلود کنید** - **توجه:** فایل زیپ شما باید دقیقاً شامل این دو فایل باشد: ```plaintext index.html styles.css ``` - **توجه:** هر دو باید در **ریشهٔ** فایل زیپ باشند، نه داخل یک پوشهٔ اضافه. اگر مثلاً همه‌چیز را داخل پوشه‌ای به اسم `answer` بگذارید، مسیرهای موردانتظار پیدا نمی‌شوند و سیستم داوری **نمره صفر** را برای آن لحاظ خواهد کرد. - **توجه:** نام فایل‌ها را **تغییر ندهید** و فایل جدیدی اضافه نکنید؛ سیستم داوری کوئرا فقط همین دو نام را بررسی خواهد کرد و سایر فایل‌های افزوده شده نادیده گرفته خواهند شد!