Dashboard layout з CSS Grid

Створи responsive dashboard — адмін-панель з sidebar, хедером, картками статистики та таблицею. Використай CSS Grid для основної розкладки, Flexbox для деталей та анімації для інтерактивності.

Завдання

Файлова структура

grid-dashboard/
├── index.html
└── style.css

Структура сторінки

┌──────────────── header ─────────────────┐
│  Logo          Search        Avatar     │
├──sidebar──┬─────── main content ────────┤
│  Menu     │  ┌──stat──┬──stat──┬──stat─┐│
│  item 1   │  │ Users  │Revenue│ Orders ││
│  item 2   │  │  1,234 │ $5.6k │   89  ││
│  item 3   │  └────────┴───────┴───────┘│
│  item 4   │                             │
│  item 5   │  ┌──── Recent Orders ──────┐│
│           │  │  Table with data...     ││
│           │  └─────────────────────────┘│
└───────────┴─────────────────────────────┘

Вимоги

1. CSS Grid Layout:

• Використай grid-template-areas для основної розкладки (header, sidebar, main)
• grid-template-columns: 250px 1fr (sidebar + content)
• grid-template-rows: 60px 1fr

2. Картки статистики:

• 3-4 картки в ряд (Grid або Flexbox)
• Кожна картка: іконка/емодзі + назва + число
• Responsive: на мобільному — 1 колонка, на планшеті — 2, на десктопі — 3-4
• Використай repeat(auto-fit, minmax(200px, 1fr))

3. Таблиця:

• Таблиця "Recent Orders" з 5-7 рядками
• Колонки: #, Клієнт, Сума, Статус, Дата
• Статус як кольоровий бейдж (зелений = виконано, жовтий = в процесі, червоний = скасовано)
• Zebra-striping (:nth-child(even))

4. Responsive:

• Mobile (до 768px): sidebar зникає, content на всю ширину
• Використай media queries для зміни grid-template-areas

5. Hover та анімації:

• Картки статистики: hover з translateY та box-shadow
• Пункти меню sidebar: hover з фоновим кольором та transition
• Рядки таблиці: hover з підсвіткою

6. Бонус: Dark/Light theme (необов'язково)

• Використай CSS-змінні (--bg-color, --text-color, --card-bg, тощо)
• Кнопка перемикання теми в хедері (стилізуй кнопку, без JS)
• Два набори значень змінних (один у :root, інший у .dark)

Підказки

• Для зникнення sidebar на мобільному: змінюй grid-template-areas та grid-template-columns в @media
• Для бейджів статусу: display: inline-block + padding + border-radius + різні кольори фону
• CSS-змінні: var(--color-name) для кольорів, щоб легко змінювати тему
• Для іконок в картках: використай emoji або Unicode символи (📊 👥 💰 📦)

Критерії оцінки