-
Notifications
You must be signed in to change notification settings - Fork 0
1. Релиз 2
- Администратор
- Пользователь (обычный пользователь/врач)
Вид Главной страницы
Хедер: Лого-название портала, Поисковая строка, Иконка личного кабинета (при авторизации иконка меняется, см информацию ниже)
Основное меню сайта входит в хедер:
**Новости, Статьи, О портале, Авторам **
Если пользователь авторизирован, то вместо иконки личного кабинета отображаются инициалы, либо аватар.
Футер:
Лого-название портала, ниже "Медицинский информационный портал"
Кликабельные ссылки:
- эл. адрес администратора, эл. адрес кликабельный, при клике открывает почтовый агент.
- (C) Стетоскоп 2023
- Пользовательское соглашение
- Политика конфиденциальности
Хедер статичен, виден при прокрутке экрана, а также при переходе на другую страницу. Когда пользователь находится в авторизованной зоне, на главной странице отображаются его инициалы, либо аватар.
Функциональность не разработана.
Строка поиска - это просто поле ввода. Должна позволять задавать текстовые запросы, в т.ч. с неполным соответствием.** Количество символов для ввода ограничено до 250
В результате поиска открывается новая страница со ссылками на найденные документы.
Хедер
Разделы контента:
-
новости актуальная Статья обязательно с превью/картинкой слева, справа список и 6 новостей (в хронологическом порядке) ниже кнопка "Еще новости"
-
таббер "Все статьи" (далее Фильтры) (подробнее расписано в отдельном подразделе требований)
-
статьи (с превью), 6 (или больше-решить после корректировки дизайна) на странице, плюс карточка "Еще статьи", согласно макету, при клике открывается страница просмотра статей. Если статьи по теме не найдены, всплывает соответствующая надпись "По заданным фильтрам ничего не найдено"
-
Блок "Зарегистрируйся" (инфотекст согласно макета, кнопка "Зарегистрируйтесь") Если пользователь уже авторизирован на сайте, то блок не виден.
Текст над футером:
"Каждая страница должна содержать заметный текст: "Информация на сайте не является руководством по самолечению и представлена для ознакомления. Команда сайта настоятельно рекомендует обратиться к профильному специалисту при подозрении какого-либо заболевания. ИМЕЮТСЯ ПРОТИВОПОКАЗАНИЯ. НЕОБХОДИМА КОНСУЛЬТАЦИЯ СПЕЦИАЛИСТА."
Футер
Фильтры можно использовать в любом количестве и в любых комбинациях (подробнее о фильтрации статья ниже) Контент главной страницы должен автоматически формироваться в зависимости от выбранных фильтрови группироваться по названиям разделов.
На страницу выводятся только статьи/новости, одобренные администратором сайта.
При клике на соответствующий раздел открывается отдельная страница с подборкой статей или новостей по тематике: Новости Статьи
В категорию "Новости" выводятся статьи с тегом "Новости", в хронологическом порядке с даты публикации.
При клике на раздел открывается отдельная страница с подборкой новостей.
Хлебные крошки
В разделе должны быть карточки новостей с:
- названием,
- датой публикации,
- картинкой или фото,
- превью текста,
- указанием ориентировочного времени прочтения
Подсчет времени на прочтение делается на стороне фронта: условно считается в минутах, деление количества слов в статье на 200)
- показом количества просмотров
Считается любое новое открытие новости (с одного и того же браузера, IP)
Превью на странице - 5 актуальных новостей, в соответствии с макетом Кнопка "Еще новости" (открывает превью следующих 5 в хронологическом порядке)
Хлебные крошки
"Новость" содержит:
- картинку или фото,
- название,
- указание ориентировочного времени прочтения,
- текст,
- имя автора,
- название источника (если источник не указан, то поле скрыто),
- ссылку на источник (если есть).
- возможность оставить комментарии
- показ количества просмотров
- рекомендованные материалы на "выбранную тему"
При клике на раздел открывается отдельная страница с подборкой статьей.
Хлебные крошки
В разделе должны быть карточки статей с:
- названием,
- датой публикации,
- картинкой или фото,
- превью текста,
- указанием ориентировочного времени прочтения
Подсчет времени на прочтение делается на стороне фронта: условно считается в минутах, деление количества слов в статье на 200
- показом количества просмотров
- возможность оставить комментарий
Считается любое новое открытие статьи (с одного и того же браузера, IP)
Превью на странице - 6 актуальных статей, в соответствии с макетом.
Кнопка "Еще статьи" (открывает превью следующих 6 в хронологическом порядке)
Хлебные крошки
Статья содержит:
- картинку или фото,
- название,
- указание ориентировочного времени прочтения,
- текст,
- имя автора (если автор не указан, то поле скрыто)
- название источника (если источник не указан, то поле скрыто)
- ссылку на источник.
- показ количества просмотров
- возможность ""добавить в избранное" НЕ ТЕСТИРУЕМ ДОБАВЛЕНИЕ В ИЗБРАННОЕ
- возможность оставить комментарий,
- рекомендованные материалы на "выбранную тему"
Рекомендованные материалы должны группироваться по названиям разделов.
Вид страницы как в разделе выше. После блока Теги
заголовок "Комментарии к статье" "Войдите" (клик. ссылка) или "Зарегистрируйтесь"(клик. ссылка), чтобы оставлять комментарии
Ниже блок комментариев один за другим, начиная с первого. Первые семь, потом кнопка- текст "Еще комментарии"
Комментарий автора статьи отображается синим Комментарий обычного пользователя отображается серым Комментарий модератора отображается красным
Пользователь - инициалы Врач - инициалы с красным плюсом
- текст крупно "Зарегистрируйтесь и получите возможность", Перечень в одну линию:
- Писать и публиковать свои статьи
- Подписываться на еженедельную рассылку
- Участвовать в обсуждениях под статьями
- Добавлять интересные статьи в избранное
- кнопка "Зарегистрироваться" (текст "Это удобно, процесс регистрации очень простой и займет не более 5 минут")
При нажатии на кнопку осуществляется переход на Форму регистрации
Хедер
Хлебные крошки
Выделено «О портале» Заголовок «Кто мы» Текст в соответствии с макетом
Заголовок «Миссия» Текст в соответствии с макетом
Заголовок «Для кого мы пишем» Текст в соответствии с макетом
Заголовок «Развитие» Текст в соответствии с макетом
Выделено «МИП Стетоскоп разработали:
Ниже аватарки участников проекта, со ссылками на соцсети/раб пространства, разделенные по направлениям (в соответствии с макетом)
Футер
Хедер
Заголовок «Хочу опубликовать статью» Текст в соответствии с макетом
Заголовок «Как опубликовать статью» Текст в соответствии с макетом
Далее:
- (Активные ссылки) «Зарегистрироваться» на сайте и/или «Войти» в личный кабинет При нажатии первой, открывается форма регистрации, при нажатии второй – форма Авторизации
- Заполнить и отправить (активная ссылка) «Форму» для публикации статьи При нажатии на «Форму», если пользователь уже авторизирован открывается ЛК, страница для Публикации статьи.
Если пользователь не авторизирован, открывается форма Авторизации. Если пользователь не зарегистрирован, то он из формы Авторизации переходит в форму «Регистрации»
- Вы великолепны
Заголовок «Какая информация нужна для публикации Текст в соответствии с макетом
Футер
Пользователь заходит на главную страницу сайта нажимает на иконку профиля в хедере-> Открывается попап с 2 кнопками «Войти и «Зарегистрироваться»-> При нажатии «Зарегистрироваться» открывается форма регистрации -> Заполняет данные согласно шаблону 1 -> Нажимает кнопку “Зарегистрироваться”-> При успешном вводе параметров открывается страница "Подтверждение e-mail" (Данные падают в БД, Система формирует письмо и отправляет его пользователю со ссылкой для подтверждения регистрации).
Если пользователь уже зарегистрирован, то под последним полем для ввода появляется строка (красным шрифтом) «Пользователь уже зарегистрирован. Нажмите кнопку «Войти», чтобы авторизироваться".
Текст: Поля со звездочкой обязательны к заполнению
- имя (успех ввода после снятия фокуса)
- фамилия (успех ввода после снятия фокуса)
Оба поля выше расположены в форме на одной строке
-
адрес эл почты
-
пароль
-
повторный ввод пароля
-
чек-бокс Я принимаю условия "Политики конфиденциальности" и "Пользовательского соглашения"
-
кнопка «Зарегистрироваться»
При нажатии на "Политика конфиденциальности" и "Пользовательское соглашение" открывается текст (файл пдф, как в футере).
Ниже ввода данных имеется поле: текст "Есть аккаунт" и неявная/скрытая кнопка «Войти».
Все поля обязательны для заполнения. При введении некорректных символов, введенная информация выделяется красным, под инпутом отображается подсказка пользователю, согласно макета.
При открытии страницы с Формой кнопка выглядит визуально кликабельной. При нажатии на нее, либо снятии фокуса с инпута (не важно, введены данные или не введены), а также в случае не валидности хотя бы одного поля, кнопка меняет свой активный цвет на дизейбл.
- Текст под названием формы "Мы отправили вам письмо на указанный адрес. Для завершения регистрации необходимо перейти по ссылке из письма и подтвердить e-mail. Ссылка действительна ограниченное время"
- картинка-конверт
- кнопка "Вернуться на главную"
После прохождения по ссылке из эл. почты, пользователь попадает на страницу "Подтверждаем ваш email"
- Текст под названием формы "Пожалуйста, подождите"
- картинка-конверт с крутящимся элементом
При успешной регистрации, пользователь попадает на страницу "Email подтвержден"
- Текст под названием формы "Для продолжения работы авторизируйтесь на странице"
- картинка-конверт с зеленой галкой
- кнопка "Войти в аккаунт"
При неуспехе регистрации,пользователь попадает на страницу "В процессе подтверждения email произошла ошибка"
- Текст под названием формы "Попробуйте пройти по ссылке еще раз или повторите регистрацию"
- картинка-конверт с красным крестиком
- кнопка "Вернуться к регистрации" (в этом случае при возврате к форме регистрации, поля остаются заполненными (аналогично с авторизацией).
Имя: Текстовое поле, минимальное количество символов 1, максимальное не более 50 значений, обязательно к заполнению, доступно для заполнения значениями кириллицы/латиницы, пробел и дефис.
Фамилия: Текстовое поле, минимальное количество символов 1, максимальное не более 50 значений, обязательно к заполнению, доступно для заполнения значениями кириллицы/латиницы, пробел и дефис.
Email: разрешенные символы: прописные буквы (A-Z), строчные буквы (az), цифры (0-9), точка (.), дефис (-), at (@), нижнее подчеркивание (_), ограничение символов до 50 значений, заполняется по маске: [[email protected]]. Предусмотреть приведение к нижнему регистру.
Пароль: любые символы кроме пробелов, ограничение не менее 6 и до 20, все поля для ввода пароля имеют возможность просмотра введенных данных (глаз)
Добавить форму на сайт и настроить сборку данных из атрибутов формы, отправляя их в БД.
Имеет структуру: Тема: Активация аккаунта на stethoscope.acceleratorpracticum.ru
Отправитель: [email protected]
Получатель: e-mail пользователя
Тело письма:
Вы получили это письмо, потому что вам нужно завершить процесс активации учетной записи на stethoscope.acceleratorpracticum.ru.
Пожалуйста, перейдите на следующую страницу, чтобы активировать учетную запись:
<ссылка для подтверждения эл. почты>
Спасибо за использование нашего сайта!
Команда stethoscope.acceleratorpracticum.ru
Пользователь заходит на главную страницу сайта нажимает на иконку профиля в хедере-> Открывается дропдаун с 2 кнопками «Войти и «Зарегистрироваться»-> При нажатии «Войти» открывается форма авторизации -> Заполняет данные согласно шаблону 2-> Нажимает кнопку “Войти”-> При успешной авторизации попадает в «Личный кабинет пользователя»
Если пользователь не зарегистрирован, то под последним полем для ввода появляется строка (красным шрифтом) «Пользователь не зарегистрирован. Нажмите на ссылку «Зарегистрируйтесь», чтобы создать аккаунт".
Шаблон 2 формы авторизации -"Вход в аккаунт" содержит:
- адрес эл почты
- пароль, над инпутом активная ссылка "Забыли пароль?", которая переводит на форму восстановления пароля
- кнопка «Войти»
Ниже ввода данных имеется поле: текст "Нет аккаунта" и неявная кнопка/ссылка «Зарегистрироваться».
Все поля обязательны для заполнения.
Email: разрешенные символы: прописные буквы (A-Z), строчные буквы (az), цифры (0-9), точка (.), дефис (-), at (@), нижнее подчеркивание (_), ограничение символов до 50 значений, заполняется по маске: [[email protected]]. Предусмотреть приведение к нижнему регистру.
Пароль: любые символы кроме пробелов, ограничение не менее 6 и до 20, все поля для ввода пароля имеют возможность просмотра введенных данных (глаз)
Если Пользователь забыл/неправильно ввел пароль предусмотрен сценарий восстановления Пароля. При неправильном вводе пароля, под последним полем для ввода появляется строка (красным шрифтом) «Неверный логин или пароль. Повторите попытку или нажмите на ссылку "Забыли пароль?", чтобы восстановить его"
При клике на ссылку "Забыли пароль?" открывается страница "Восстановление пароля":
Форма "Восстановления пароля"
Текст: "Введите e-mail, который вы использовали для регистрации"
- Поле для введения адреса эл почты.
- кнопка "Отправить"
- неявная кнопка "Вернуться назад"
*Пароль: любые символы, ограничение не менее 6 и до 20, кроме пробелов
После ввода эл.почты появляется новая страница:
Текст: "Мы отправили инструкцию по восстановлению пароля на указанную почту"
- картинка с изображением конверта с зеленой галкой
- поле-кнопка "Вернуться на главную"
На почту придёт письмо со ссылкой на страницу установки нового пароля.
После перехода на эту страницу пользователю нужно дважды ввести новый пароль, сохранить его и авторизоваться.
Вид страницы:
- Новый пароль
- повторить новый пароль
- кнопка "Сохранить новый пароль"
При успешном сохранении пароля Данные падают в БД, Система формирует письмо и отправляет его пользователю с информацией о смене пароля.
Далее открывается страница: текст "Пароль успешно изменен"
- картинка зеленая галка в сером круге
- поле-кнопка "Войти в аккаунт"
** Страница "Ошибка вода пароля"**
Текст (жирным): При сохранении пароля произошла ошибка
- картинка красный крестик в сером круге
- поле-кнопка "Перейти к изменению пароля"
После неудачного сохранения пароля возврат на форму с сохранением заполненных полей.
Шаблон письма о смене пароля.
Имеет структуру: Тема: Смена пароля на сайте Стетоскоп
Отправитель: [email protected]
Получатель: e-mail пользователя
Тело письма: ссылка на страницу смены пароля.
Хедер
В хедере, если роль пользователя подтверждена, на инициалах присутствует красный +
Блок "Личной информации" слева - скользящий.
Ниже слева Личная информация с полями:
- Аватар (либо инициалы), Имя и Фамилия (ниже статус пользователя: пользователь/врач)
- активная кнопка «Профиль»
- активная кнопка «Избранное»
- активная кнопка «Публикация статьи»
- текст «Еженедельная рассылка на «email», под ним чекбокс «Подписаться на рассылку»
- кнопка "Выйти"
НЕ ТЕСТИРУЕМ ДОБАВЛЕНИЕ В ИЗБРАННОЕ Справа: Набор статей, которые добавлены в Избранное, с возможностью их удаления. Вид списка статей: превью статьи, дата, название, автор, количество просмотров.
Плавающая кнопка "наверх" появляется после 2-3 ряда статей (слева)
Футер
Хедер
Ниже слева Личная информация:
- Аватар (либо инициалы), Имя и Фамилия (ниже статус пользователя: пользователь/врач)
- активная кнопка «Профиль»
- активная кнопка «Избранное»
- активная кнопка «Публикация статьи»
- текст «Еженедельная рассылка на «email», под ним чекбокс «Подписаться на рассылку»
- кнопка "Выйти"
Справа:
- Избранное
- Статьи Текст: Сейчас у вас ничего нет в Избранном
Чтобы добавить понравившуюся статью в Избранное, отметьте ее закладкой (иконки в соответствии с макетом)
- кнопка "Перейти к статьям"
Футер
Хедер Слева - «Личная информация» с полями:
- Аватар (либо инициалы), Имя и Фамилия (ниже статус пользователя: пользователь/врач)
- активная кнопка «Профиль» - выделена
- активная кнопка «Избранное»
- активная кнопка «Публикация статьи»
- текст «Еженедельная рассылка на «email», под ним чекбокс «Подписаться на рассылку»
- кнопка "Выйти"
Справа – «Профиль» Статус : Пользователь
«Вы можете подтвердить свой статус врача, обратившись к администратору: [email protected], эл. адрес кликабельный, при клике открывает почтовый агент.
ИЛИ Статус : Врач (подтвержден) с галкой
Ниже:
Активная надпись/ссылка Изменить пароль
Форма "Личные данные"
- поле Имя
- поле Фамилия
- кнопка "Сохранить (неактивна)
Хедер Слева - «Личная информация» с полями:
- Аватар (либо инициалы),размер аватарки порядка 200х200 пикселеq, 200кб. При клике на аватар открывается модальное окно для загрузки.
- Имя и Фамилия (ниже статус пользователя: пользователь/врач)
- активная кнопка «Профиль» - выделена
- активная кнопка «Избранное»
- активная кнопка «Публикация статьи»
- текст «Еженедельная рассылка на «email», под ним чекбокс «Подписаться на рассылку»
- кнопка "Выйти"
Справа – «Профиль»
Статус : Врач (подтвержден) с галкой, либо пользователь
Активная надпись/ссылка "Изменить пароль"
Форма "Личные данные"
- редактируемое поле "Имя"
- редактируемое поле Фамилия
- кнопка "Сохранить (активна)
Хедер Слева - «Личная информация» с полями:
- Аватар (либо инициалы), Имя и Фамилия (ниже статус пользователя: пользователь/врач)
- активная кнопка «Профиль» - выделена
- активная кнопка «Избранное»
- активная кнопка «Публикация статьи»
- текст «Еженедельная рассылка на «email», под ним чекбокс «Подписаться на рассылку»
- кнопка "Выйти"
Справа - активная ссылка "Вернуться назад"
Изменение пароля:
- Ваш текущий пароль (инпут для введения текущего пароля, можно посмотреть введенные символы)
- Новый пароль (инпут для введения нового, можно посмотреть введенные символы)
- кнопка «Сохранить новый пароль»
Пароль: любые символы кроме пробелов, ограничение не менее 6 и до 20
Футер
Решение о смене роли Пользователя принимает Администратор.
Обращение к Администратору происходит через "Контакты"
Хедер Слева : Личная информация с полями:
- Аватар (либо инициалы), Имя и Фамилия (ниже статус пользователя: пользователь/врач)
- активная кнопка «Профиль»
- активная кнопка «Избранное»
- активная кнопка «Публикация статьи»
- текст «Еженедельная рассылка на «email», под ним чекбокс «Подписаться на рассылку»
- кнопка "Выйти"
Справа: Заголовок «Публикация статьи» (ниже текст «Заполните форму и отправьте статью", "Поля, выделенные * обязательны для заполнения")
- поле для «Заголовок статьи» (максимум 255 символов)
- поле для «Аннотация» ( в поле подсказка 3-4 предложения, не более 400 символов)
- поле для Текст статьи (количество символов не ограничено)
- поле для «Источник» (максимум 255 символов) - не обязательно для заполнения
- поле для «Ссылка на источник» (максимум 2048 символов) - не обязательно для заполнения В поле "Ссылка на источник" можно ввести только url, если вводиться не url, появляется ошибка: Введите url (красным).
- Прикрепить фотографию (размер макс 1,5mb, форматы jpg, .jpeg, .png) Если размер превышен, появляется подсказка красным:"Размер фотографии превышает 1,5 Мб", кнопка блокируется
- Кнопка "Оправить на публикацию" (выше текст подсказка «Статья будет опубликована на сайте после модерации»)
При превышении ширины поля Аннотация, Текст увеличиваются в высоту, а текст переходит на другую строку. При отправке формы двойные пробелы обрезаются.
Если поля: Заголовок, аннотация, текст статьи - пустые, то рамка подсвечивается красным, появляется ошибка валидации обязательных полей при снятии фокуса: Обязательное поле (красным)
При нажатии кнопки статья отправляется в админку, где администратор модерирует/проверяет статью и при положительном решении публикует на сайте.
Кнопка "Отправить на публикацию" остается неактивной, если какое-то из полей не заполнено.
Страница с превью фото - согласно макета. При динамическом превышении количества символов в поле инпута, рамка подсвечивается красным.
Хедер Слева : Личная информация с полями:
- Аватар (либо инициалы), Имя и Фамилия (ниже статус пользователя: пользователь/врач)
- активная кнопка «Профиль»
- активная кнопка «Избранное»
- активная кнопка «Публикация статьи»
- текст «Еженедельная рассылка на «email», под ним чекбокс «Подписаться на рассылку»
- кнопка "Выйти"
Справа: Заголовок «Публикация статьи» (ниже текст «Ваша статья отправлена", "Скоро мы опубликуем ее на сайте")
- картинка конверт с зеленой галкой
- кнопка "Написать еще статью"
Футер
Хедер Слева : Личная информация с полями:
- Аватар (либо инициалы), Имя и Фамилия (ниже статус пользователя: пользователь/врач)
- активная кнопка «Профиль»
- активная кнопка «Избранное»
- активная кнопка «Публикация статьи»
- текст «Еженедельная рассылка на «email», под ним чекбокс «Подписаться на рассылку»
- кнопка "Выйти"
Справа: Заголовок «Публикация статьи» (ниже текст «Во время отправления статьи произошла ошибка", "Попробуйте отправить еще раз")
- картинка конверт с красным крестиком
- кнопка "Оправить повторно", система отправляет заполненные поля повторно без перехода на Форму публикации статьи
Футер
Верификация после нажатия кнопки.
Визуализация согласно макета
Ситуация 1
Пользователь ничего не заполнил, нажимает активную кнопку «Зарегистрироваться»
Текст "Все поля обязательны для заполнения" отображается стандартно
- Текст «Поля со звездочкой обязательны к заполнению» отображается красным:
- Рамка поля «Имя» подсвечивается красным, внизу текст «Поле обязательно к заполнению, минимум 1 символ»
- Рамка поля «Фамилия» подсвечивается красным, внизу текст «Поле обязательно к заполнению, минимум 1 символ»
- Рамка поля «Email» подсвечивается красным, внизу текст «Поле обязательно к заполнению»
- Рамка поля «Пароль» подсвечивается красным, внизу текст «Поле обязательно к заполнению, минимум 6 максимум 20 символов,кроме пробелов »
- Рамка поля «Повторите пароль» подсвечивается красным, внизу текст «Поле обязательно к заполнению, минимум 6 максимум 20 символов,кроме пробелов»
- чекбокс не отмечен (рамку надо выделить красным)
Ситуация 2
Текст "Все поля обязательны для заполнения" отображается стандартно
Пользователь ввел какие-то нерелевантные символы и еще НЕ нажал на чекбокс, активную кнопку
- Рамка поля «Имя» подсвечивается красным, внизу текст «Поле не должно содержать символы % ; . * ^ ) _ « !»
- Рамка поля «Фамилия» подсвечивается красным, внизу текст «Поле не должно содержать символы % ; . * ^ ) _ « !»
- Рамка поля «Email» подсвечивается красным, внизу текст «Поле может содержать только прописные и строчные буквы (A-z), цифры, точку, дефис, @, нижнее подчеркивание, максимум 50 символов»
- Рамка поля «Пароль» подсвечивается красным, внизу текст «Недостаточная длина пароля. Пароль должен содержать 6-20 символов»
- Рамка поля «Повторите пароль» подсвечивается красным, внизу текст «Недостаточная длина пароля. Пароль должен содержать 6-20 символов»
- чекбокс не отмечен (рамку надо выделить красным)
Ситуация 3
Текст "Все поля обязательны для заполнения" отображается стандартно
Пользователь ввел слишком много символов в поле, Не нажал на чекбокс, активную кнопку
- Текст «Поля со звездочкой обязательны к заполнению» отображается стандартно:
- Рамка поля «Имя» подсвечивается красным, внизу текст «Недопустимая длина, максимум 50 символов»
- Рамка поля «Фамилия» подсвечивается красным, внизу текст «Недопустимая длина, максимум 50 символов»
- Рамка поля «Email» подсвечивается красным, внизу текст «Недопустимая длина, максимум 50 символов»
- Рамка поля «Пароль» подсвечивается красным, внизу текст «Превышена допустимая длина пароля, максимум 20 символов»
- Рамка поля «Повторите пароль» подсвечивается красным, внизу текст «Пароли должны совпадать»
- чекбокс не отмечен (рамку надо выделить красным)
Ситуация 4
Текст "Все поля обязательны для заполнения" отображается стандартно
Пользователь, который уже зарегистрировался, хочет это сделать снова, нажал на активную кнопку
- Текст «Поля со звездочкой обязательны к заполнению» отображается стандартно:
- Рамка поля «Имя» отображается стандартно, внутри поля зеленая галочка
- Рамка поля «Фамилия» отображается стандартно, внутри поля зеленая галочка
- Рамка поля «Email» подсвечивается красным, внизу текст «Пользователь с таким email уже зарегистрирован. Нажмите на ссылку «Войти», чтобы авторизироваться»
- Рамка поля «Пароль» отображается стандартно, внутри большие точки (при закрытом глазе)
- Рамка поля «Повторите пароль» отображается стандартно, внутри введенные символы (при открытом глазе)
- чекбокс отмечен
- кнопка «Зарегистрироваться» не активна
Ситуация 1
Незарегистрированный пользователь хочет войти, нажал на активную кнопку
- Рамка поля «Email» подсвечивается красным,
- Рамка поля «Пароль» подсвечивается красным
Внизу текст «Пользователь с таким e-mail или паролем не найден»
Ситуация 3
Пользователь ввел некорректный email (например, русские буквы), при потере фокуса:
- Рамка поля «Email» подсвечивается красным, внизу текст «Поле может содержать только прописные и строчные буквы (A-z), цифры, точку, дефис, @, нижнее подчеркивание, максимум 50 символов»
Ситуация 1
Форма «Восстановление пароля»
Пользователь ничего не заполнил, нажал активную кнопку
- текст «введите email, который вы использовали при регистрации
- Рамка поля «Email» подсвечивается красным, внизу текст «Email не указан»
- кнопка «Отправить» не активна
- кнопка «Вернуться назад» активна
Ситуация 2
Форма «Придумайте новый пароль»
- Новый пароль рамка инпута подсвечивается красным, внизу текст «Необходимо ввести пароль. Пароль должен содержать 6-20 символов, кроме пробелов (глаз открыт)
- Повторите новый пароль рамка инпута подсвечивается красным, внизу текст «Необходимо ввести пароль. Пароль должен содержать 6-20 символов,кроме пробелов (глаз открыт)
- кнопка «Сохранить новый пароль» не активна
Ситуация 3
Форма «Восстановление пароля» Пользователь ввел незарегистрированный email, нажал активную кнопку
- текст «Ведите email, который вы использовали при регистрации"
- поле Email рамка инпута подсвечивается красным, внизу текст «Пользователь не зарегистрирован»
- кнопка «Отправить» не активна
- кнопка «Вернуться назад» активна
Ситуация 4
Пользователь ввел пароли и еще Не нажал активную кнопку
Форма «Придумайте новый пароль»
- поле «Новый пароль»
- рамка инпута подсвечивается красным, внизу текст «Недостаточная длина пароля. Пароль должен содержать 6-20 символов, кроме пробелов»
- поле «Повторите новый пароль» отображается стандартно
- кнопка «Сохранить новый пароль» не активна (пока все поля не будут валидны)
Форма «Придумайте новый пароль»
- поле «Новый пароль» отображается стандартно
- рамка инпута подсвечивается красным, внизу текст «Недостаточная длина пароля Пароль должен содержать 6-20 символов, кроме пробелов»
- поле «Повторите новый пароль» рамка инпута подсвечивается красным, внизу текст «Пароли должны совпадать»
- кнопка «Сохранить новый пароль» активна
**Роуты будут защищены и, если пользователь авторизован, он не сможет попасть на страницы регистрации, авторизации, забыли пароль. **
Футер
На главной странице портала в хедере расположена строка поиска, под хедером и основным блоком с самой популярной статьей и новостями (согласно утвержденному макету) располагается слайдер с табами (“карусель”), в начале есть кнопка "Все статьи" в конце строки кнопка “Фильтры”.
Модератором в админке задается количество фильтров и тегов, а также их названия, после чего они назначаются каждой статье/новости.
Слайдер с табами (“карусель”) выполняет функцию фильтрации по области медицинских знаний (“Офтальмология”, “Стоматология” и т.д.), на данном этапе ограничены 20ю
- При первом входе на сайт инфоблок “Статьи” выдается в перемешку.
Таб «Все статьи» выбран по умолчанию при первом входе на сайт.
Клик по любому неактивному табу скрывает текущий контент и отображает контент выбранного таба. Таб «Все статьи» становится неактивным при клике на любой таб, например «офтальмология». Если статей нет в выбранном табе, то показывается надпись "По заданным фильтрам ничего нет".
При нажатии на таб "Все статьи" активный таб теряют подсветку (при этом фильтры в разделе фильтров сохраняют свое состояние).
Таб «Все статьи» прокручивается вместе с остальными.
- При нажатии на таб в слайдере он меняет цвет, а инфоблок “Статьи” на главной странице (ниже) автоматически подстраиваются под выбранную тематику.
При нажатии на кнопку “Еще статьи", согласно макету располагается справа превью подборки статей на заданную тему, пользователь попадает в “ленту статей”, в которой статьи располагаются в произвольном порядке. Если статей по теме меньше шести, кнопка "Еще статьи" не появляется.
Кнопка “Фильтры” вызывает всплывающее окно с фильтрами по названиям заболеваний (“Катаракта”, “Глаукома”, “Деструкция”, “Воспаление” и т.д.), тегами (“Мужчина”, “Женщина”, “Беременные”, “Младенцы”, “Подростки”, “Старше 65”, “ЗОЖ”, “Вакцинация”, “COVID-19”, “Глаза”, “Кожа”, “Легкие”, “ЖКТ”, “Печень”, “Сердце”, “Почки” и т.д.), кнопками “Очистить все” и “Показать”.
Все фильтры и теги должны располагаться в алфавитном порядке для облегчения поиска пользователем. В правой части всплывающего окна, в границах соответствующего блока (Фильтр по названиям заболеваний и/или Теги) должна быть отображена вертикальная полоса прокрутки, при прокрутке которой можно увидеть полный перечень соответствующих фильтров и/или тегов.
Фильтр по названиям заболеваний позволяет настроить инфоблок “Статьи” на главной странице (после нажатия кнопки “Показать”). Их можно использовать как по одному, так и несколько одновременно, как в совокупности с фильтром (фильтрами) по области медицинских знаний (слайдер с табами на главной странице), и/или тегами, так и отдельно. При выборе фильтра (фильтров) кнопка меняет цвет. После нажатия кнопки “Показать” всплывающее окно закрывается, инфоблок “Статьи” на главной странице автоматически подстраиваются под выбранную тематику, а на кнопке “Фильтры” появляется заметная цифра, отображающая количество выбранных фильтров во всплывающем окне.
Теги (“Мужчина”, “Женщина”, “Беременные”, “Младенцы”, “Подростки”, “Старше 65”, “ЗОЖ”, “Лекарственные средства”, “БАДы”, “Вакцинация”, “COVID-19”, “Уход за больными, “Глаза”, “Кожа”, “Легкие”, “ЖКТ”, “Печень”, “Сердце”, “Почки” и т.д.) во всплывающем окне, вызванном нажатием кнопки “Фильтры” на главной странице, располагаются ниже фильтров по названиям заболеваний и представляют собой отдельный блок.
Их можно использовать как по одному, так и несколько одновременно, как в совокупности с фильтром (фильтрами) по области медицинских знаний (слайдер с табами на главной странице) и/или фильтром (фильтрами) по названиям заболеваний, так и отдельно. При выборе тега (тегов) кнопка меняет цвет. После нажатия кнопки “Показать” всплывающее окно закрывается, инфоблок “Статьи” на главной странице автоматически подстраиваются под выбранную тематику, а на кнопке “Фильтры” появляется заметная цифра, отображающая количество выбранных фильтров во всплывающем окне.
Кнопка “Очистить все” во всплывающем окне, вызванном нажатием кнопки “Фильтры” на главной странице, отменяет все выбранные фильтры и теги (фильтр по названиям заболеваний и теги в текущем окне). При это всплывающее окно не закрывается, и остается возможность пользователю выбрать другие фильтры. Чтобы окончательно сбросить все фильтры необходимо нажать на кнопку “Очистить все” и потом ка кнопку "Показать".
НЕ РАЗРАБОТАНА Строка поиска (нужны комментарии, что выполнимо?? особенно в части сочетания поиска и тегов)
Строка поиска расположена в хедере. Она позволяет вводить текстовую информацию (кириллические и латинские символы, цифры, а также следующие знаки: (.), (,), (:), (;), (*), (%), (-), (_)).
В результате поиска открывается отдельная страница со ссылками на найденные статьи/новости по указанному слову/совосочетанию/тексту. Перечень формируется в хронологическом порядке
Хедер
Перечень ссылок с прокруткой
Футер