Верстка страницы личного кабинета (Odoo)

Цель: сверстать одну страницу личного кабинета пользователя для портала на Odoo.
Требуется адаптивная HTML/CSS/JS-страница (desktop + mobile).

Технические требования
- Использовать чистые HTML, CSS и JavaScript (без фреймворков).
- Верстка должна быть совместима с Odoo и не ломать существующие стили.
- Должна корректно отображаться на десктопе и мобильных устройствах.
- Код аккуратный, структурированный, с читаемыми классами.
- Только фронтенд – без серверной логики и интеграции.

Структура страницы

1. Хедер
- Фото пользователя (аватар).
- Имя и фамилия.
- Приветственное сообщение.
- Бургер-меню или иконка навигации (переход на другие страницы портала).

2. Раздел "Быстрый доступ"
- 4 карточки с иконками и hover-эффектом:
- CRM – переход в раздел "Мои клиенты и воронка"
- Календарь – переход в календарь задач и мероприятий
- Админ – открывает чат с администратором
- База знаний – переход в раздел с файлами и обучением

3. Раздел "Быстрые действия"
- 4 карточки с различными сценариями:
- Разместить листинг – форма для загрузки документов, текстовое поле и чат с админом.
- Сделать контракт (A/B/F) – форма для загрузки файлов, текст и чат с админом.
- Получить лиды – если лиды есть, показывается список; если нет, кнопка "Получить лиды" открывает чат.
- Получить выплату – текстовое поле, загрузка файла и чат с админом.
- Подсказка: "После загрузки SPA комиссия выплачивается в течение 48 часов."

4. Информационный блок
- Текстовое поле с общей информацией (несколько абзацев).

5. Доступы к сервисам
- Список из 3 карточек (название сервиса, иконка, кнопка "Открыть").
- Возможность добавлять новые карточки через кнопку "Добавить доступ".

6. Чат с администратором
- Интерфейс: история сообщений, поле ввода, кнопка "Отправить", возможность прикрепить файл.
- Функционал на уровне UI, без серверной логики.
- Адаптивность
- Верстка должна быть адаптивной для десктопа и мобильных устройств.
- Все элементы должны сохранять структуру и удобство использования на маленьких экранах.
- Формы и чат должны корректно работать на мобильных устройствах.

Результат работы

Готовые файлы:
- index.html
- styles.css
- script.js
- Пример работы интерактивных блоков на мок-данных.
- Скриншоты версии для desktop и mobile.

Что мы предоставим
- Пример текущей страницы в Odoo (референс).
- Тексты для всех разделов и кнопок.
- Примеры того, как визуально должно выглядеть (референсы по дизайну).