Перейти к содержанию

Все разделы сайта

Написать о задаче

Готовый сайт на UIkit 3

Бережно — сайт медицинского центра

Сайт, на котором пациенту спокойно: он пишет, что беспокоит, простыми словами, и сайт сам подбирает врача. Запись в шесть шагов, «Карта здоровья» в кабинете и режим крупного текста для тех, кому так удобнее.

20 $

весь шаблон: пять страниц и 404, визуальный редактор, инструкция по запуску

Попробовать визуальный редактор — прямо в демо, без регистрации.

Шаблон «Бережно»: главная медицинского центра с вопросом «Что вас беспокоит?» в окне браузера и на телефоне

Зачем такой сайт

Человек приходит на сайт клиники встревоженным. Он не знает, нужен ему терапевт или ЛОР, и не хочет разбираться в списке специальностей. «Бережно» начинает разговор с его слов: «Болит горло», «Справка для работы», «Не знаю, к кому идти» — и дальше ведёт сам.

Забота здесь не в картинках, а в устройстве интерфейса. Сайт проверен по WCAG 2.2 — международным правилам доступности веб-содержимого. Сокращение расшифровывается как Web Content Accessibility Guidelines; правила пишет консорциум W3C, который отвечает за стандарты веба, а версия 2.2 вышла в 2023 году. Уровень AA, на который проверен шаблон, означает: сайтом могут пользоваться люди со слабым зрением, с экранным диктором и без мыши.

Четыре изюминки интерфейса

Причина визита простыми словами

Восемь причин — «Болит горло», «Справка для работы», «Не знаю, к кому идти» и другие. Выбор сам подставляет подходящего специалиста и показывает, что обычно спрашивает врач. Те же причины стоят в первом экране главной, поэтому запись начинается прямо оттуда.

«Карта здоровья»

Четыре показателя в кабинете: прививки, анализы, визиты, обследования по возрасту. Статус передаётся цветом, значком и словами — цвет никогда не единственный признак. Просроченное стоит первым, рядом — кнопка записи.

Режим спокойствия

Переключатель «Аа» в шапке: кегль растёт с 17 до 20 пикселей, кнопки становятся крупнее, текст темнее, сетки проще, движение выключается, второстепенное прячется. Выбор запоминается между страницами — для пожилых пациентов это решающая мелочь.

Живые состояния

Спиннеры на кнопках и поверх списков, экран «Запись подтверждена» с рисующейся галочкой, мягкие уведомления, которые дублируются для экранного диктора.

Как это выглядит

Снимки сделаны с демо-версии; нажмите, чтобы открыть крупно.

  • Главная: «Что вас беспокоит?» в первом экране

    Главная: «Что вас беспокоит?» в первом экране

  • Запись: причина визита и подобранный специалист

    Запись: причина визита и подобранный специалист

  • Кабинет: «Карта здоровья»

    Кабинет: «Карта здоровья»

  • Режим спокойствия: крупный текст и простая сетка

    Режим спокойствия: крупный текст и простая сетка

  • Врачи: фильтры, рейтинг, ближайшее время

    Врачи: фильтры, рейтинг, ближайшее время

  • Визуальный редактор: правка прямо на странице

    Визуальный редактор: правка прямо на странице

Пять страниц и 404

  • Главная: вопрос «Что вас беспокоит?» в первом экране, направления, гарантии, врачи, отзывы, цифры, обратный звонок.
  • Врачи: фильтры по специальности, стажу и онлайн-приёму, рейтинг, ближайшее свободное время, «Показать ещё».
  • Запись на приём: шесть шагов, рекомендация врача по причине визита, расписание на две недели, подтверждение и файл для календаря.
  • Личный кабинет: профиль, записи, «Карта здоровья», медкарта, анализы, рецепты, уведомления.
  • Препараты: поиск с учётом окончаний слов, фильтры, окно с инструкцией и обязательным предупреждением.
  • Страница 404: ссылки на главную, запись и врачей — заблудившийся пациент не уходит с сайта.

Правки без программиста

Допишите ?edit к адресу любой страницы — снизу появится панель редактора. Без этого адреса файлы редактора даже не запрашиваются.

  • тексты, фото врачей, карточки, заголовок, описание и превью для соцсетей;
  • фото врача, заменённое один раз, само расходится по всем страницам;
  • на сервере с PHP — сохранение по паролю, с резервными копиями и, по желанию, коммитами в GitHub;
  • без сервера — готовые страницы скачиваются файлами.
Попробовать в демо
Визуальный редактор «Бережно»: рамки вокруг текстов и фото и панель внизу страницы

Проверено, а не обещано

Доступность

  • Ноль нарушений WCAG 2.2 AA по axe-core — в обычном режиме и в режиме спокойствия.
  • Контраст текста не ниже 4,5:1, рамок полей и полос прогресса — не ниже 3:1.
  • Уведомления дублируются для экранного диктора.

В браузере

  • Шесть страниц на ширинах от 320 до 1440 пикселей в обоих режимах: без горизонтальной прокрутки и ошибок.
  • Запись от первого шага до файла календаря пройдена в Playwright.
  • Разметка без единой ошибки html-validate; редактор — 41 проверка.

В мелочах

  • Никакого капслока: девять компонентов UIkit, которые по умолчанию пишут прописными, переведены на строчные.
  • Иконки встроены спрайтом, только нужные на странице; UIkit подключён с проверкой целостности.
  • Микроразметка MedicalClinic, Open Graph, llms.txt для ИИ-поиска.

Что вы получаете

  • пять страниц и страницу 404 на HTML, CSS и UIkit 3, без сборщиков и фреймворков;
  • визуальный редактор с серверной частью на PHP и режимом без сервера;
  • выкладку на свой сервер с HestiaCP одним пушем в GitHub, обновления только изменёнными файлами;
  • подробную инструкцию на русском: запуск, редактор, выкладка, устройство кода, места под бэкенд, словарь терминов.

Честно о границах: в кабинете нет авторизации — для медицинских данных её нужно подключить до запуска. Тексты инструкций препаратов — заглушки, публиковать можно только утверждённые. Требования к медицинской рекламе в РК стоит сверить отдельно.

Шаблон «Бережно» — 20 $

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

Частые вопросы

  • Кому подойдёт шаблон?

    Многопрофильной клинике, детскому медцентру, стоматологии, диагностическому центру: врачи, запись, кабинет и препараты есть сразу, лишнее легко убрать.

  • Запись на приём работает?

    Весь путь пациента готов: причина, специалист, врач, дата и время, данные, подтверждение и файл для календаря. Данные пока заглушки — к вашей системе записи их подключают по местам, описанным в инструкции.

  • Нужен ли программист для правок?

    Для текстов, фото врачей, карточек и описаний для поиска — нет: всё это правится в визуальном редакторе. Попробовать можно в демо.

  • Где разместить сайт?

    На любом хостинге с обычными файлами. Чтобы редактор сохранял правки прямо на сайт, нужен PHP; в инструкции расписана выкладка на VPS с HestiaCP через GitHub.