Блок элементов 1 - Ввод имени и фамилии

1. [Заголовок] “Ввод имени”:
   1. Расположен сверху страницы.
   2. Текст под заголовком : “Введите имя в это поле. Поле обязательное.”
2. [Элемент] Форма ввода 1 (имя):
   1. Поле ввода, расположенное под заголовком.
   2. Размер ~200-250 пикселей.
   3. Текст над полем ввода: “Имя”.
   4. Астериск расположен около текста над полем.
   5. Принимает только кириллические буквы.
   6. Максимальное количество символов = 80.
   7. Минимальное количество символов = 2.
3. [Элемент] Форма ввода 2 (фамилия):
   1. Поле ввода, расположенное справа от Формы ввода 1.
   2. Размер ~200-250 пикселей.
   3. Текст над полем ввода: “Фамилия”
   4. Астериск расположен около текста над полем.
   5. Принимает только кириллические буквы и “-”.
   6. Максимальное количество символов = 80.
   7. Минимальное количество символов = 2.
4. [Элемент] Кнопка 1:

   1. Расположен справа от Формы ввода 1.

   2. Размер соответствует Форме ввода 1.

   3. Надпись на кнопке: “ГОТОВО”.

   4. При клике кнопка прожимается (анимация) и валидируются (согласно пунктам 3 и 4) Форма ввода 1 и Форма ввода 2:

      1. Валидация формы ввода 1:

         1. Если количество символов <2 —> поле Формы ввода 1 подсвечивается красным.

         2. Если количество символов >80 —> поле Формы ввода 1 подсвечивается красным.

         3. Если количество символов >2, но все символы == пробелы —> аналогично пункту 1.

         4. Если символы ≠ кириллические буквы, поле формы ввода 1 подсвечивается красным.

      2. Валидация формы ввода 2:

         1. Если количество символов <2 —> поле Формы ввода 1 подсвечивается красным.

         2. Если количество символов >80 —> поле Формы ввода 2 подсвечивается красным.

         3. Если количество символов >2, но все символы == пробелы —> аналогично пункту 1.

         4. Если символы ≠ кириллические буквы или “-”, поле формы ввода 2 подсвечивается красным.

Блок элементов 2 - Выбор врача и услуги

1. [Заголовок] ”Выбор врача”:
   1. Расположен после блока 1.
   2. Текст под заголовком: “Выберите врача для записи.”
2. [Элемент] Выпадающий список:
   1. Поле расположено под заголовком.
   2. При невыбранном значении в поле отображается текст “-не выбрано-”.
   3. Выбор обязателен для активации следующего элемента (радиокнопка).
   4. При клике открывается список из 3 вариантов:
      1. Иванов Иван Иванович
      2. Петров Петр Петрович
      3. Геймлих Генри Джуда
   5. При выборе одного из вариантов список сворачивается и этот вариант отображается выбранной.
3. [Элемент] Радиокнопка (aka Переключатель):

   1. Надпись над радиокнопкой “Выберите тип приема”.

   2. Если не выбрано ничего из выпадающего списка, неактивно (выбор недоступен).

   3. По умолчанию ничего не выбрано.

   4. Варианты выбора:

      1. Первичная консультация
      2. Повторный прием
      3. Процедуры

   5. Возможен выбор только одного варианта единовременно.

   6. Невозможно отжать выбранный вариант.

   7. Выбор нового варианта отменяет прошлый выбор.

   8. При смене варианта из выпадающего списка (фамилии врачей) выбор очищается.

Блок элементов 3 - Подсчет суммы к оплате

1. [Заголовок] “Подсчет суммы к оплате”:
   1. Расположен после блока 2.
   2. Текст под заголовком: “Укажите форму оплаты.”
2. [Элемент] Выпадающий список:
   1. Поле расположено под заголовком.
   2. При невыбранном значении в поле отображается текст “-не выбрано-”.
   3. При клике открывается список из 3 вариантов:
      1. Наличные
      2. Карта
      3. Купон
   4. При выборе одного из вариантов список сворачивается и этот вариант отображается выбранным.
3. [Элемент] Форма ввода 1.
   1. Поле ввода, расположенное после выпадающего списка.
   2. Текст над полем: “Введите сумму”.
   3. По умолчанию указано 0.
   4. Принимает любые целые числа.
4. [Элемент] Форма ввода 2.
   1. Поле ввода, расположенное после формы ввода 1.
   2. Текс над полем: “Укажите % скидки”.
   3. Если в выпадающем списке выбран вариант “Купон” — поле неактивно иввод недоступен.
   4. По умолчанию пустое.
   5. Принимает числа от 0 до 100.
5. [Элемент] Кнопка 1:
   1. Расположен после Формы ввода 2.
   2. Надпись на кнопке “ПРИНЯТЬ”.
   3. При клике в поле “Итого” отображается результат вычисления.
6. [Элемент] Поле “Итого”:
   1. Поле неактивно (нельзя ввести значения).
   2. По умолчанию (до прожатия кнопки ПРИНЯТЬ) пустое.
   3. После прожатия кнопки ПРИНЯТЬ отображает результат вычисления [сумма - (сумма / 100 * скидка)].
   4. После изменения чисел в форме ввода 1 или форме ввода 2 и повторногоклика на кнопку ПРИНЯТЬ меняет результат на актуальный.