ТЗ для дизайнера — YouVet

О продукте

YouVet — сервис для ветеринарных клиник. Клиника получает:

• Бот и мини-приложение в Telegram — для клиентов (владельцев питомцев). Там они читают статьи по первой помощи, смотрят врачей и расписание приёма.
• Веб-панель (сайт для персонала) — для сотрудников клиники. Там редакторы создают статьи, администраторы управляют врачами, грумер ведёт записи.

Оба продукта уже работают и находятся в продакшн. Задача — улучшить внешний вид, не ломая то, что уже есть.

Доступы

Тебе дадут доступ в веб-панель (сайт для персонала). Там можно самостоятельно посмотреть все экраны и понять, как сейчас выглядит интерфейс.

• Адрес: https://admin.snzbeachvolleyball25.ru
• Логин и пароль — отдельно

Telegram Mini App (для клиентов) можно открыть через бота @VPract_bot.

Что уже есть и что нужно сделать

Интерфейс уже полностью рабочий. Это не проект с нуля — не нужно придумывать новую структуру или новые функции. Задача: сделать так, чтобы то, что уже есть, выглядело аккуратнее, профессиональнее и приятнее глазу.

Что можно улучшать:

• Цветовую палитру и акцентные цвета
• Типографику (шрифты, размеры, отступы)
• Карточки, таблицы, кнопки — сделать их визуально более живыми
• Отступы и «воздух» между элементами
• Иконки и мелкие визуальные детали

Что не трогаем:

• Структуру страниц (какие пункты в меню, какие кнопки есть на каждом экране)
• Логику и порядок действий пользователя
• Функциональность (это всё в коде)

Веб-панель — описание экранов

1. Вход в систему (Логин)

Простая страница по центру экрана: поля «Логин» и «Пароль», кнопка войти. Ничего лишнего.

2. Боковое меню и шапка

На всех страницах есть:

• Боковое меню слева — навигация по разделам. Иконки и названия пунктов. На телефоне меню скрыто и открывается кнопкой.
• Верхняя шапка — название текущей страницы и кнопка выхода.

Пункты меню:

• Животные
• Категории
• Статьи
• Врачи
• Расписание
• Груминг
• Пользователи (только для администратора)

3. Животные

Список животных (кошки, собаки и т.д.) в виде таблицы. Для каждого животного — иконка-эмодзи, название, порядок отображения. На мобильном таблица превращается в карточки.

Можно: добавить новое животное, отредактировать, удалить (с подтверждением).

4. Категории

Аналогично животным — таблица категорий. У каждой категории есть привязка к животному (например, «Переломы» → Кошки).

5. Статьи — список

Список статей. Каждая статья имеет статус: Черновик (серый ярлык) или Опубликована (зелёный ярлык). Можно создать, отредактировать, удалить, опубликовать/снять с публикации.

6. Статьи — редактор

Страница редактирования статьи. Сверху — кнопка «Назад», статус статьи (ярлык), кнопка «Опубликовать» (для администратора) и кнопка «Сохранить».

Поля:

• Заголовок
• Slug (технический адрес, генерируется автоматически)
• Текст с форматированием (редактор с поддержкой жирного, курсива, ссылок)
• Категории — список с галочками, сгруппированный по животным

7. Врачи — список

Список врачей. У каждого — фото (или заглушка с первой буквой имени), ФИО, специализация, статус (Черновик / Опубликован). Кнопки: опубликовать/снять, редактировать, удалить.

На мобильном — карточки вместо таблицы.

8. Врачи — редактор

Страница редактирования карточки врача. Делится на несколько частей:

Основная информация:

• ФИО (обязательное)
• Специализация
• Описание (текстовый блок)
• Контакты
• Порядок сортировки

Фото:

• Миниатюра фото (или заглушка)
• Кнопка загрузки (JPG, PNG, WebP, до 5 МБ)

Еженедельное расписание:

• Список рабочих дней с временными слотами (например: Пн — 09:00–13:00)
• Форма добавления нового слота: выбрать день, время начала и конца

Исключения:

• Список дат, когда врач не работает или работает в другое время
• Форма добавления: дата, тип (выходной / другое время), время

9. Расписание

Сводная таблица расписания по всем опубликованным врачам на несколько недель вперёд. Администратор может настроить период (1–4 недели или месяц).

Каждая строка — дата, в ней — значки врачей с временем приёма.

На мобильном — карточки по дням.

Внизу страницы — список всех врачей (и черновиков тоже, с пометкой).

10. Груминг

Страница с тремя вкладками:

Вкладка «Коллекция пород»:

Список пород/услуг грумера. Каждая запись: название породы, длительность процедуры, цена (если указана), описание.

Вкладка «Шаблон недели»:

Рабочие дни грумера в виде недели. Можно задать рабочее время на каждый день.

Вкладка «Записи»:

• Слева — интерактивный календарь на месяц. Рабочие дни кликабельны, нерабочие — приглушены. На каждой ячейке видны метки записей.
• Справа — при выборе дня: временная шкала дня. На шкале блоками отображаются записи (имя питомца, порода, время). Между записями — пустые зоны, на которые можно нажать, чтобы добавить новую запись.

11. Пользователи

(Только для администратора)

Список сотрудников с логином и ролью. Роли:

• Администратор — полный доступ
• Редактор — создаёт и редактирует статьи, не может публиковать
• Грумер — видит только раздел груминга

Можно добавить нового пользователя (логин, пароль, роль) и удалить существующего.

Telegram Mini App — описание экранов

Это мобильное приложение внутри Telegram. Открывается через кнопку в боте. Выглядит в стиле Telegram — тёмная/светлая тема следует за настройками телефона пользователя.

1. Главный экран

Три кнопки-пункта меню:

• 🐾 Первая помощь животным
• 👨‍⚕️ Наши врачи
• 📅 Расписание приёма

2. Первая помощь → Животные

Список животных. Нажимаешь — переходишь к категориям.

3. Категории

Список разделов для выбранного животного. Нажимаешь — переходишь к статьям.

4. Список статей

Список статей в выбранном разделе.

5. Статья

Заголовок и полный текст статьи. Текст может содержать форматирование (жирный, курсив, ссылки).

6. Врачи — список

Список врачей клиники с фото (или заглушкой), именем и специализацией. Нажимаешь — переходишь к карточке врача.

7. Карточка врача

• Фото врача
• Имя
• Специализация
• Описание
• Контакты (телефон — кликабельный)
• Ближайшее расписание приёма (дата + время)

8. Расписание

Общее расписание всех врачей на ближайшие недели. Сгруппировано по датам. Для каждого слота — имя врача и время.

Итоговая задача

1. Изучи панель по выданным доступам, пройдись по всем экранам.
2. Подготовь предложения по улучшению визуального оформления — цвета, типографика, мелкие детали.
3. Не меняй структуру — все пункты меню, кнопки и поля должны остаться на своих местах.
4. Если есть идеи по мобильному виду — приветствуются, там сейчас таблицы заменяются на карточки, можно сделать их красивее.
5. По Telegram Mini App — помни, что там тема следует за Telegram (тёмная/светлая), поэтому важно, чтобы дизайн хорошо смотрелся в обоих режимах.

Если что-то непонятно — спрашивай, объясним.