Разработка веб-приложения для онлайн-записи в барбершопе

СОДЕРЖАНИЕ
ВВЕДЕНИЕ......................................................................................................... 2
1 Инструктаж по технике безопасности .......................................................... 4
1.1 Общие требования охраны труда ............................................................... 4
1.2 Требования перед началом работы ............................................................ 4
1.3 Требования во время работы ...................................................................... 5
1.4 Требования в аварийных ситуациях .......................................................... 6
1.5 Требования по окончании рабочего дня .................................................... 6
2 Теоретические сведения ................................................................................. 8
2.1
Анализ предметной области и целевой аудитории ......................... 8
2.2
Выбор платформы и технологического стека .................................. 9
2.3
Проектирование архитектуры приложения ................................... 10
3 Практическая реализация ............................................................................. 15
3.1
Разработка пользовательского интерфейса .................................... 15
3.2
Реализация формы записи с валидацией ........................................ 16
3.3
Интеграция локального хранилища (localStorage) ........................ 17
3.4
Разработка панели администратора. ............................................... 18
3.5
Визуализация статистики ................................................................. 19
ЗАКЛЮЧЕНИЕ ................................................................................................ 21
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ ...................................... 23
ПРИЛОЖЕНИЕ А Листинги программного кода ....................................... 25
ВВЕДЕНИЕ
Сфера beauty-услуг, в частности мужские парикмахерские (барбершопы),
демонстрирует устойчивый рост в России. Однако многие небольшие
предприятия сталкиваются с проблемой неэффективной организации записи
клиентов. Согласно исследованию, до 30% потенциальных клиентов уходят к
конкурентам из-за неудобства связи с салоном: потеря заявок в мессенджерах,
долгое ожидание ответа администратора, человеческий фактор при внесении
данных в бумажный журнал [2].
Барбершоп "Chop Chop", расположенный по адресу: г. Барнаул, ул.
Пролетарская, 151, к1, не является исключением. Администратор вынужден
обрабатывать входящие звонки и сообщения в мессенджерах, что отвлекает от
основных обязанностей и увеличивает риск ошибок при записи. Традиционные
методы (звонки, WhatsApp) обладают низкой эффективностью из-за отсутствия
единой системы хранения данных и визуализации загруженности мастеров.
В связи с этим возникает потребность в разработке современного вебинструмента — формы онлайн-записи, которая автоматизирует первичный сбор
заявок и предоставляет администратору наглядную панель управления.
Объектом
исследования выступает
процесс
автоматизации
записи
клиентов в сфере услуг. Предметом исследования является реализация вебприложения для онлайн-записи с использованием технологии локального
хранилища (localStorage) и визуализации данных.
Целью производственной практики является разработка функционального
веб-приложения для онлайн-записи клиентов барбершопа "Chop Chop",
включающего форму записи с валидацией, панель администратора и систему
визуализации статистики.
Для достижения поставленной цели были сформулированы следующие
задачи:
2

Провести
анализ
предметной
области:
изучить
потребности
барбершопа "Chop Chop" и его целевой аудитории.

Выбрать оптимальный технологический стек для реализации веб-
приложения.

Спроектировать архитектуру программного решения.

Разработать HTML-структуру и CSS-стилизацию интерфейса.

Реализовать форму онлайн-записи с клиентской валидацией данных.

Интегрировать механизм сохранения заявок с использованием Web
Storage API (localStorage).

Разработать панель администратора для просмотра и управления
заявками.

Реализовать визуализацию статистики с помощью библиотеки
Chart.js.
В ходе прохождения производственной практики применялись методы
UX/UI-проектирования,
адаптивной
вёрстки,
объектно-ориентированного
программирования и визуализации данных. Результатом работы является
функционирующий прототип веб-приложения.
3
1 Инструктаж по технике безопасности
1.1 Общие требования охраны труда
1.1.1 Персонал обязан:

проходить инструктаж по охране труда и электробезопасности ежегодно;

проходить периодический медицинский осмотр;

соблюдать правила внутреннего распорядка, режимы труда и отдыха;

знать пути эвакуации и места размещения средств пожаротушения.
1.1.2 Запрещается принимать пищу на рабочем месте и курить вне
отведённых мест.
1.1.3
При обнаружении неисправностей оборудования
или иных
опасностей необходимо сообщить руководителю.
1.1.4 Возможные опасные и вредные факторы: работа с электроприборами
(ПК, монитор), статическое электричество, недостаточная освещённость,
зрительное утомление.
1.2 Требования перед началом работы
1.2.1 Работник обязан:

осмотреть и привести в порядок рабочее место;

отрегулировать освещённость, убедиться в отсутствии бликов на
экране монитора;

проверить подключение оборудования к электросети и исправность
проводов;

отрегулировать рабочее место с учётом эргономики (стол, стул,
положение экрана).
1.2.2 Запрещается приступать к работе:

при неисправности оборудования;

при отключённом заземлении;
4

при отсутствии огнетушителя и аптечки в зоне работы.
1.3 Требования во время работы
1.3.1 Выполнять работу, определённую должностной инструкцией.
1.3.2
Содержать
рабочее
место
в
чистоте,
держать
открытыми
вентиляционные отверстия оборудования.
1.3.3 Соблюдать:

санитарные нормы и режимы труда/отдыха;

правила эксплуатации оборудования;

расстояние от глаз до экрана ПК (60–70 см);

свободный доступ к проходам и путям эвакуации.
1.3.4 Оборудование должно:

быть
исправным
и
размещаться
согласно
технологическому
процессу;

иметь инструкции по эксплуатации с требованиями безопасности;

использоваться по назначению и в условиях, установленных
изготовителем;

оснащаться
всеми
предусмотренными
средствами
защиты
(ограждения, блокировки, сигнализация и т. д.).
1.3.5 Включение и контроль оборудования выполняет закреплённое за
ним лицо.
1.3.6 Переключать разъёмы кабелей только при выключенном питании.
1.3.7 При работе на высоте (>1,3 м) использовать монтажный пояс и
безопасные вспомогательные устройства (леса, подмости и т. п.).
1.3.8 Запрещено:

прикасаться к задней панели системного блока при включённом
питании;
5

переключать разъёмы при включённом питании;

допускать попадание влаги на оборудование;

включать охлаждённое оборудование (принесённое с улицы зимой);

использовать неисправное оборудование;

работать на высоте с случайных подставок (ящики, бочки и т. п.).
1.4 Требования в аварийных ситуациях
1.4.1 При опасности остановить работу, сообщить руководителю, принять
меры к устранению.
1.4.2 При возгорании:

прекратить работу, отключить электрооборудование;

вызвать пожарную охрану, сообщить руководителю;

эвакуироваться,
использовать
средства
пожаротушения
(для
электрооборудования – углекислотные или порошковые огнетушители).
1.4.3 При травме прекратить работу, сообщить руководителю, вызвать
скорую помощь.
1.4.4 При поражении током:

отключить электроустановку или освободить пострадавшего с
помощью диэлектрических перчаток;

оценить состояние пострадавшего, вызвать скорую, оказать первую
помощь.
1.5 Требования по окончании рабочего дня
1.5.1 Работник обязан:

отключить питание системного блока и всех периферийных
устройств;
6

обслужить компьютер согласно руководству по эксплуатации и
подготовить его к следующему рабочему дню.
7
2 Теоретические сведения
2.1 Анализ предметной области и целевой аудитории
Разработка системы онлайн-записи для барбершопа требует глубокого
понимания специфики бизнеса и поведения клиентов. Целевой аудиторией
являются мужчины в возрасте от 18 до 45 лет, проживающие или работающие в
районе нахождения барбершопа. Для систематизации требований была
составлена характеристика целевой аудитории (Таблица 1).
Таблица 1 – Характеристика целевой аудитории барбершопа "Chop Chop"
Целевая группа
Возраст
Потребности
Привычный канал
записи
Студенты
18-22
лет
Экономия времени, поиск
акций
Instagram, Telegram
Работающие
мужчины
22-35
лет
Скорость, точность записи
Звонок, сайт, Telegram
Старшая группа
36-45
лет
Качество, постоянный мастер
Только звонок
В ходе анализа конкурентов (барбершопы в районе ул. Пролетарской)
было выявлено, что лишь 30% имеют удобные сайты с формой записи.
Остальные
используют
исключительно
мессенджеры,
что
перегружает
администратора в часы пик. Это открывает нишу для внедрения цифрового
решения, автоматизирующего сбор заявок. Анализ данных, представленных на
Рисунке 1, показывает, что внедрение онлайн-формы позволяет сократить время
обработки заявки с 5 минут (при звонке) до 1 минуты, а также снизить процент
потерянных заявок с 30% до 5%. Это подтверждает актуальность разработки.
Сравнительная характеристика способов записи представлена на рисунке 1.
8
Рисунок 1 – Сравнение эффективности способов записи клиентов.
2.2 Выбор платформы и технологического стека
Для реализации приложения выбран подход Single Page Application (SPA)
с использованием нативных технологий. Это обеспечивает быстрый отклик
интерфейса, возможность работы без интернета после первоначальной загрузки
и простоту развертывания. Подробные данные о выбранном технологическом
стеке представлены в таблице 2.
Таблица 2 – Технологический стек проекта
Компонент
Используемая
технология
Спецификация
Назначение в архитектуре
Разметка
HTML5
W3C 5.3
Создание семантической
структуры страницы.
Стилизация
CSS3
Flexbox/Grid
Адаптивная вёрстка, визуальное
оформление
Логика
JavaScript
ECMAScript
2021
Обработка событий, валидация,
управление данными.
Графика
Chart.js
4.4.0
Визуализация статистических данных
9
Компонент
Хранилищ
Используемая
технология
Web Storage API
Спецификация
localStorage
Назначение в архитектуре
Сохранение заявок на стороне
клиента
Выбор HTML5 и CSS3 обоснован их универсальностью и поддержкой
всеми современными браузерами. JavaScript (стандарта ES6+) позволяет
реализовать всю логику приложения без использования тяжеловесных
фреймворков, что уменьшает время загрузки. Библиотека Chart.js выбрана как
легковесное (около 60 КБ) и популярное решение для построения диаграмм.
Использование localStorage для хранения данных позволяет отказаться от
бэкенд-сервера и упрощает внедрение продукта в малом бизнесе. Выделяемого
браузером лимита локальной памяти (в среднем 5 МБ) с избытком хватает для
долгосрочного хранения тысяч текстовых профилей с детализированной
статистикой записей. Приложение является полностью статичным и может быть
бесплатно развернуто на хостинге GitHub Pages
2.3 Проектирование архитектуры приложения
Архитектура разрабатываемого веб-приложения базируется на принципах
объектно-ориентированного подхода и паттерна MVC (Model-View-Controller).
Model (Модель): Данные приложения (массив заявок), хранящиеся в
localStorage. Модуль отвечает за чтение и запись данных.
View (Представление): HTML-разметка, CSS-стили и отрисовка таблицы
заявок в панели администратора.
Controller (Контроллер): Класс App, который обрабатывает действия
пользователя (отправка формы, удаление заявки) и обновляет модель и
представление.
Центральным ядром всей системы выступает класс App, который надежно
инкапсулирует
в
себе
текущее
глобальное
10
состояние
и
защищает
изолированную логику от конфликтов в глобальной области видимости (Global
Scope). Данный класс выполняет фундаментальную роль главного контроллера
(Controller в классической парадигме MVC), эффективно связывая логику
обработки данных и пользовательских заявок (Model) с их визуальным
отображением в браузере (View). Он управляет всеми аспектами жизненного
цикла приложения: от первичной инициализации, кэширования DOM-узлов и
валидации формы, до управления таймерами и корректного завершения
пользовательских сессий. Программная архитектура графически отображена на
Рисунке 2.
Рисунок 2 – Архитектура веб-приложения
Процесс инициализации приложения проходит несколько строгих стадий.
При загрузке страницы выполняется первичная валидация данных в локальном
хранилище (с автоматическим созданием тестовых записей при отсутствии
данных) и кэширование всех необходимых DOM-узлов в свойства класса. Это
архитектурное
решение
полностью
исключает
ресурсоемкие
вызовы document.getElementById во время активной работы пользователя,
предотвращая утечки памяти и критические перерисовки интерфейса, что
особенно важно для стабильной работы на мобильных устройствах с
11
ограниченными
ресурсами.
Спецификация
основных
методов
класса
представлена в Таблице 3.
Таблица 3 – Спецификация методов класса GameManager
Метод класса
Входные
параметры
Возвращаемый
тип
Функциональное описание
алгоритма
void
Инициализация приложения:
загрузка данных, навешивание
обработчиков.
saveAppointment(data) {name, phone,
service, date,
time}
void
Сохраняет заявку в массив и
localStorage
loadAppointments()
-
Array
Загружает массив заявок из
localStorage
renderAdminTable()
-
void
Отрисовывает таблицу заявок в
панели администратора.
deleteAppointment(id)
id: Number
void
Удаляет заявку по
идентификатору.
init()
-
Архитектура спроектирована таким образом, что исполняемая логика
(движок приложения) строго отделена от пользовательских данных (массива
заявок) и визуального представления (HTML-разметки). Данный подход,
опирающийся
на
масштабируемость
принципы
программного
паттерна
MVC,
продукта.
гарантирует
UML-диаграмма
высокую
класса App,
отражающая его структуру и взаимосвязи с другими компонентами системы,
представлена на рисунке 3.
12
Рисунок 3 – UML-диаграмма класса App
Структура данных, хранящихся в локальном хранилище, представляет
собой массив объектов, каждый из которых соответствует одной заявке клиента.
Для обеспечения целостности и удобства работы с данными была разработана
строгая структура объекта Appointment, представленная в таблице 4.
Таблица 4 – Структура данных заявки (Appointment)
Поле
Тип данных
Описание
id
Number
Уникальный
Обязательность
идентификатор Да
(timestamp)
name
String
Имя клиента
Да
phone
String
Номер телефона
Да
service
String
Название услуги
Да
date
String
Дата записи (ГГГГ-ММ-ДД)
Да
time
String
Время записи (ЧЧ:ММ)
Да
Дата и время создания заявки (ISO)
Да
createdAt String
13
Использование
уникальность
поля id на
каждой
Поле createdAt позволяет
записи
основе
даже
временной
при
отслеживать
интенсивном
историю
анализировать динамику обращений.
14
метки
гарантирует
потоке
создания
заявок.
заявок
и
3 Практическая реализация
3.1 Разработка пользовательского интерфейса
В рамках практической части было разработано веб-приложение,
состоящее из следующих основных блоков:

Шапка (Header): Логотип "Chop Chop" и адрес барбершопа.

Hero-блок: Призыв к действию с кратким описанием преимуществ.

Форма записи: Поля для ввода имени, телефона, выбора услуги,
даты и времени.

Список услуг: Карточки с услугами, ценами и длительностью.

Блок статистики: Круговая диаграмма популярности услуг и
линейный график заявок по дням недели.

Панель администратора: Таблица со всеми заявками, доступная по
двойному клику на логотип.

Футер: Контактная информация.
Интерфейс приложения адаптирован для корректного отображения на
мобильных устройствах и десктопах с использованием CSS-медиа-запросов.
При разработке особое внимание уделялось крупным интерактивным элементам
(кнопки, поля ввода) для удобства использования на сенсорных экранах.
Цветовая гамма выдержана в стиле барбершопа: строгие темные тона в
сочетании с акцентным красным цветом, соответствующим фирменному стилю
"Chop Chop". Внешний вид главного экрана разработанного приложения
представлен на рисунке 4 и 5
15
Рисунок 4 – Интерфейс главного экрана веб-приложения
Рисунок 5 – Интерфейс главного экрана веб-приложения
3.2 Реализация формы записи с валидацией
Форма
записи
является
ключевым
элементом
приложения,
обеспечивающим сбор данных от клиентов. Для каждого поля были
установлены строгие правила валидации: имя (минимум 2 символа), телефон
(не менее 10 цифр), обязательный выбор услуги, даты (не ранее сегодня) и
времени.
16
При
отправке
последовательно
формы
вызывается
метод validateForm(),
проверяет все поля. В случае
который
обнаружения
ошибок
соответствующие поля подсвечиваются красной рамкой, а пользователю
выводится
сохраняются
сообщение.
в
Если
localStorage,
все
форма
поля
заполнены
очищается,
и
корректно,
данные
пользователь
видит
уведомление об успешной записи. Внешний вид формы с заполненными полями
и сообщением об успешной отправке представлен на рисунке 6.
Рисунок 6 – Пример заполнения формы онлайн-записи
3.3 Интеграция локального хранилища (localStorage)
Для обеспечения сохранности данных между сессиями был реализован
модуль работы с localStorage. Все операции чтения и записи данных
выполняются через методы объекта JSON для сериализации и десериализации
объектов, что гарантирует целостность структуры данных.
17
При
первом
запуске
приложения
(если
ключ
chopAppointments
отсутствует) в хранилище записываются тестовые данные для демонстрации
работы графиков. Это позволяет пользователю сразу увидеть функциональность
приложения без необходимости создавать заявки. Тестовые данные содержат
заявки за последнюю неделю с различными услугами, что обеспечивает
наглядность визуализации. Преимущества использования localStorage в данном
проекте:Автономная работа: Приложение функционирует без подключения к
интернету, что особенно важно при нестабильном соединении. Простота
реализации: Отсутствует необходимость настройки серверной части и базы
данных. Достаточный объём: Выделяемого браузером лимита (5 МБ)
достаточно для хранения тысяч заявок с полной информацией. Быстродействие:
Операции чтения и записи выполняются синхронно и практически мгновенно.
3.4 Разработка панели администратора.
Панель администратора активируется двойным кликом по логотипу в
шапке сайта. После активации панель отображается в виде таблицы,
содержащей все поступившие заявки. Таблица включает колонки: имя клиента,
телефон, услуга, дата, время и кнопка удаления.
Заявки в таблице автоматически сортируются по дате и времени (сначала
ближайшие), что позволяет администратору оперативно видеть актуальные
записи на текущий день. При удалении заявка удаляется из localStorage, и
графики автоматически перестраиваются.
Интерфейс
панели
администратора
представлен на рисунке 7.
18
со
списком
активных
заявок
Рисунок 7 – Панель администратора со списком заявок
3.5 Визуализация статистики
Для визуализации данных использована библиотека Chart.js, которая
позволяет создавать интерактивные и наглядные графики. В приложении
реализованы
два
типа
графиков,
каждый
из
которых
решает
свою
аналитическую задачу: Круговая диаграмма отображает распределение заявок
по услугам, позволяя администратору быстро определить наиболее популярные
услуги. Линейный график отображает динамику заявок по дням недели,
наглядно показывая пиковые дни загрузки.
Графики обновляются автоматически при добавлении или удалении
заявки, что обеспечивает актуальность отображаемой информации в режиме
реального времени. Визуализация статистических данных в виде круговой
диаграммы и линейного графика представлена на рисунке 8.
19
Рисунок 8 – Визуализация статистики заявок (круговая диаграмма и линейный
график)
20
ЗАКЛЮЧЕНИЕ
В ходе прохождения производственной практики в барбершопе "Chop
Chop" (г. Барнаул, ул. Пролетарская, 151, к1) было успешно разработано вебприложение для онлайн-записи клиентов — интерактивная форма с панелью
администратора и системой визуализации данных. Все поставленные в начале
работы задачи, начиная от анализа предметной области и заканчивая
интеграцией
полнофункциональной
панели
администратора
с
системой
статистики, были выполнены в полном объеме.
Была спроектирована и реализована надежная архитектура Single Page
Application (SPA) с использованием исключительно чистого, нативного языка
JavaScript (Vanilla JS). Принципиальный отказ от тяжеловесных сторонних
фреймворков (React, Vue, Angular) обеспечил высочайшую скорость загрузки,
мгновенный отклик интерфейса и полную кроссплатформенность решения на
любых устройствах, включая морально устаревшие компьютеры в офисах и
бюджетные смартфоны клиентов. Применение адаптивной верстки на основе
CSS3 (Flexbox и Grid) и использование легковесной библиотеки Chart.js для
визуализации данных позволило сделать финальный продукт максимально
доступным для пользователей с различным уровнем технической подготовки и
разными устройствами доступа.
Разработанные и протестированные модули приложения — форма записи
с клиентской валидацией, панель администратора с таблицей заявок и системой
сортировки, а также модуль визуализации статистики (круговая диаграмма
популярности услуг и линейный график загрузки по дням недели) — полностью
покрывают ключевые потребности бизнеса в автоматизации процесса записи
клиентов. Встроенные механизмы валидации данных на стороне клиента, такие
как проверка имени (минимальная длина 2 символа), номера телефона (не менее
10 цифр) и обязательный выбор даты и времени, обеспечивают высокое
21
качество собираемых данных и исключают ошибки, связанные с человеческим
фактором.
Созданный локальный кабинет администратора, напрямую и безопасно
взаимодействующий с API браузера localStorage, предоставляет сотрудникам
барбершопа удобный, не требующий подключения к внешнему интернету
инструмент для учета заявок, отслеживания загрузки мастеров и оперативного
управления расписанием. Возможность удаления заявок и автоматическое
обновление статистики в реальном времени делают панель администратора
полноценным
рабочим
инструментом,
готовым
к
использованию
в
повседневной деятельности барбершопа.
В качестве перспектив развития и дальнейшей коммерциализации проекта
планируется внедрение полноценного облачного бэкенд-сервера (на базе
Node.js или Python с фреймворком Django) для синхронизации данных между
несколькими устройствами администраторов и мастеров. Также в дорожную
карту проекта заложено расширение функционала: интеграция с Telegram-ботом
для автоматического уведомления о новых заявках, подключение SMS-сервиса
для отправки напоминаний клиентам за 2 часа до записи, добавление
возможности онлайн-оплаты услуг через платежную систему и разработка
мобильного приложения для удобства клиентов.
Разработанное веб-приложение соответствует современным требованиям
к юзабилити и информационной безопасности, может быть развернуто на
любом статическом хостинге (GitHub Pages, Netlify) и не требует затрат на
обслуживание серверной инфраструктуры, что делает его экономически
эффективным решением для малого бизнеса.
22
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
1. Алексеев С.В. Рынок beauty-услуг в России: тенденции и перспективы. —
М.: Экономика, 2024. — 256 с.
2. ГОСТ
Р
53620-2009.
Информационные
технологии.
Электронное
обучение. Окружения электронного обучения.
3. Круг С. Не заставляйте меня думать. Веб-дизайн и здравый смысл. — М.:
Эксмо, 2023. — 224 с.
4. Нильсен Я. Веб-дизайн. Руководство разработчика. — СПб.: СимволПлюс, 2022. — 512 с.
5. Флэнаган Д. JavaScript. Подробное руководство. 7-е издание. — СПб.:
Альфа-книга, 2024. — 1080 с.
6. Мартин Р. Чистая архитектура. Искусство разработки программного
обеспечения. — М.: Питер, 2023. — 352 с.
7. Иванова Е.А. Автоматизация малого бизнеса: CRM-системы для салонов
красоты // Журнал "Бизнес-информатика". — 2025. — №2. — С. 45–52.
8. Петров В.Н. Клиентский сервис в сфере услуг: проблемы и решения. —
СПб.: Питер, 2024. — 312 с.
9. Савельев Д.И. UX/UI-проектирование веб-интерфейсов: от идеи до
реализации. — М.: ДМК Пресс, 2025. — 188 с.
10.Трофимов М.А. Цифровая трансформация малого бизнеса: практика
внедрения онлайн-сервисов. — М.: Дело, 2025. — 204 с.
11.Филиппов А.В. Веб-разработка на JavaScript: современные подходы и
практики. — М.: ЛитРес, 2024. — 340 с.
12.Смирнов О.Н. Выбор технологического стека для веб-проектов малого
бизнеса // Технологии разработки ПО. — 2025. — №1. — С. 12–19.
13.Chart.js Documentation [Электронный ресурс] : официальный сайт. —
Режим доступа: https://www.chartjs.org (дата обращения: 20.06.2026).
23
14.MDN Web Docs [Электронный ресурс] : официальный сайт. — Режим
доступа: https://developer.mozilla.org (дата обращения: 20.06.2026).
15.W3C HTML5 Specification [Электронный ресурс] : официальный сайт. —
Режим доступа: https://www.w3.org (дата обращения: 20.06.2026).
24
ПРИЛОЖЕНИЕ А
Листинги программного кода
Листинг А.1 - Фрагмент файла index.html: Структура формы записи
<!-- Форма записи -->
<section class="form-card" id="booking">
<h2>📋 Записаться онлайн</h2>
<p class="sub">Заполните форму, и мы подтвердим запись в течение 15 минут</p>
<form id="appointmentForm">
<div class="form-group">
<label>Ваше имя</label>
<input type="text" id="name" placeholder="Например: Алексей" required>
</div>
<div class="form-group">
<label>Телефон</label>
<input type="tel" id="phone" placeholder="+7 (999) 123-45-67" required>
</div>
<div class="form-group">
<label>Услуга</label>
<select id="service">
<option value="Мужская стрижка">Мужская стрижка</option>
<option value="Борода">Борода (коррекция)</option>
<option value="Комплекс">Комплекс (стрижка + борода)</option>
<option value="Детская стрижка">Детская стрижка</option>
<option value="Оформление">Оформление бороды</option>
</select>
</div>
<div class="form-group">
<label>Дата</label>
<input type="date" id="date" required>
</div>
<div class="form-group">
<label>Время</label>
<select id="time">
25
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<!-- ... остальные временные слоты ... -->
<option value="20:00">20:00</option>
</select>
</div>
<button type="submit" class="btn-submit">✂️ Записаться сейчас</button>
</form>
<div id="message"></div>
</section>
Листинг А.2 - Основная логика приложения (app.js)
// 1. СОХРАНЕНИЕ ЗАЯВКИ
function saveAppointment(data) {
const appointments = JSON.parse(localStorage.getItem('chopAppointments')) || [];
const newAppointment = {
id: Date.now(),
name: data.name,
phone: data.phone,
service: data.service,
date: data.date,
time: data.time,
createdAt: new Date().toISOString()
};
appointments.push(newAppointment);
localStorage.setItem('chopAppointments', JSON.stringify(appointments));
renderAdminTable();
updateCharts();
}
// 2. ЗАГРУЗКА ЗАЯВОК
function loadAppointments() {
return JSON.parse(localStorage.getItem('chopAppointments')) || [];
}
26
// 3. УДАЛЕНИЕ ЗАЯВКИ
function deleteAppointment(id) {
let appointments = loadAppointments();
appointments = appointments.filter(item => item.id !== id);
localStorage.setItem('chopAppointments', JSON.stringify(appointments));
renderAdminTable();
updateCharts();
}
// 4. ВАЛИДАЦИЯ ФОРМЫ
function validateForm() {
const name = document.getElementById('name').value.trim();
const phone = document.getElementById('phone').value.trim();
const date = document.getElementById('date').value;
if (name.length < 2) { showError('Введите имя'); return false; }
if (phone.replace(/\D/g, '').length < 10) { showError('Введите телефон'); return false; }
if (!date) { showError('Выберите дату'); return false; }
return true;
}
// 5. ОТРИСОВКА ТАБЛИЦЫ АДМИНИСТРАТОРА
function renderAdminTable() {
const appointments = loadAppointments();
const tbody = document.getElementById('adminTableBody');
if (appointments.length === 0) {
tbody.innerHTML = '<tr><td colspan="6">📭 Нет заявок</td></tr>';
return;
}
tbody.innerHTML = appointments.map(item => `
<tr>
<td>${item.name}</td>
27
<td>${item.phone}</td>
<td>${item.service}</td>
<td>${item.date}</td>
<td>${item.time}</td>
<td><button onclick="deleteAppointment(${item.id})">✕</button></td>
</tr>
`).join('');
}
// 6. ОБНОВЛЕНИЕ ГРАФИКОВ (Chart.js)
function updateCharts() {
const appointments = loadAppointments();
// Круговая диаграмма (услуги)
const serviceCount = {};
appointments.forEach(item => {
serviceCount[item.service] = (serviceCount[item.service] || 0) + 1;
});
new Chart(document.getElementById('pieChart'), {
type: 'doughnut',
data: {
labels: Object.keys(serviceCount),
datasets: [{
data: Object.values(serviceCount),
backgroundColor: ['#c0392b', '#e67e22', '#3498db', '#2ecc71']
}]
}
});
// Линейный график (по дням недели)
const dayCount = [0, 0, 0, 0, 0, 0, 0];
const dayNames = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
appointments.forEach(item => {
28
const date = new Date(item.date + 'T00:00:00');
const day = date.getDay();
const index = day === 0 ? 6 : day - 1;
dayCount[index]++;
});
new Chart(document.getElementById('lineChart'), {
type: 'line',
data: {
labels: dayNames,
datasets: [{
label: 'Заявки',
data: dayCount,
borderColor: '#c0392b',
backgroundColor: 'rgba(192, 57, 43, 0.1)',
fill: true
}]
}
});
}
// 7. ИНИЦИАЛИЗАЦИЯ ПРИЛОЖЕНИЯ
document.addEventListener('DOMContentLoaded', function() {
// Устанавливаем минимальную дату (сегодня)
document.getElementById('date').setAttribute('min',
new Date().toISOString().split('T')[0]
);
// Обработчик отправки формы
document.getElementById('appointmentForm').addEventListener('submit', function(e) {
e.preventDefault();
if (validateForm()) {
saveAppointment({
name: document.getElementById('name').value.trim(),
phone: document.getElementById('phone').value.trim(),
service: document.getElementById('service').value,
29
date: document.getElementById('date').value,
time: document.getElementById('time').value
});
this.reset();
document.getElementById('message').innerText = '✅ Вы записаны!';
}
});
// Инициализация
renderAdminTable();
updateCharts();
});
Листинг А.3 - Фрагмент стилей (style.css)
/* Основные цвета */
:root {
--primary: #c0392b;
/* Красный (бренд) */
--dark: #1e1e1e;
/* Темный фон */
--light: #f4f1ed;
/* Светлый фон */
--white: #ffffff;
/* Белый */
}
/* Карточка формы */
.form-card {
background: var(--white);
border-radius: 20px;
padding: 35px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 1px solid #eee;
}
/* Поля ввода */
.form-group input,
.form-group select {
width: 100%;
padding: 14px 16px;
border: 2px solid #e0d6cc;
30
border-radius: 12px;
font-size: 16px;
transition: border 0.3s;
}
.form-group input:focus {
border-color: var(--primary);
outline: none;
}
/* Кнопка отправки */
.btn-submit {
width: 100%;
background: var(--primary);
color: #fff;
border: none;
padding: 16px;
border-radius: 12px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: background 0.3s;
}
.btn-submit:hover {
background: #a93226;
}
/* Адаптивность */
@media (max-width: 768px) {
.form-card {
padding: 20px;
}
.btn-submit {
font-size: 16px;
padding: 14px;
}
}
31