- Город
- Щёлкино
- Опыт работы
- 3 месяца
- На сайте с
- 2026 года
- Юридический статус
- Самозанятый
Задача клиента: Клиент — организатор настольных турниров по миру Warcraft в Москве. Проводит регулярные офлайн-ивенты для игроков: турнирные сетки, судейство, подготовка площадки с игровыми столами, террейном, LOS-блокерами и маркерами. Стоимость участия — 6 000 рублей за турнир. Запланировано три ивента на ближайшие полгода.
До обращения у клиента не было собственного сайта. Информация о турнирах распространялась через сарафан и личные сообщения. Это создавало несколько проблем: потенциальные участники не могли найти актуальное расписание, не понимали, что входит в стоимость, и не имели удобного способа записаться на турнир. Клиент тратил время на ручную обработку заявок в переписках, часто терял данные или забывал обновить информацию о датах.
Заказчик сформулировал следующие требования:
Создать современный одностраничный лендинг, который визуально соответствует стилистике игровой вселенной Warcraft — тёмные тона, золотые акценты, премиальная атмосфера. Сайт должен содержать блоки:.hero-секция с основным оффером, описание преимуществ организации, расписание турниров с датами, перечень того что включено в стоимость, отзывы, ссылка на Telegram-канал и финальный призыв к действию. Ключевая функция — форма записи на турнир. При нажатии кнопки «Записаться» рядом с конкретной датой, должна открываться модальная форма, в которой автоматически подставляется выбранная дата. Пользователь вводит имя и телефон, и данные отправляются в структурированном виде для дальнейшей обработки. Клиент хочет видеть все заявки в единой таблице, доступной для проверки любым уполномоченным сотрудником. Сайт должен быть адаптивным — корректно работать на десктопах, планшетах и мобильных устройствах. Дополнительное требование — чтобы любой сотрудник мог править контент и даты без привлечения программиста. Клиент не обладает техническими навыками, поэтому процесс обновления должен быть максимально простым.
Решение задачи:
Для реализации проекта использован стек из трёх файлов: HTML для разметки, CSS для стилизации и JavaScript для интерактивности. Такой подход обеспечивает максимальную скорость загрузки, отсутствие зависимостей от фреймворков и простоту дальнейшей поддержки.
Дизайн разработан в стилистике официального сайта Blizzard Entertainment — компании-разработчика World of Warcraft. Применена техника glassmorphism: полупрозрачные стеклянные карточки с размытием фона, тонкие светящиеся границы и градиентная заливка. Цветовая палитра — тёмно-фиолетовый фон с золотыми акцентными элементами, что соответствует фирменному стилю Warcraft. Использован шрифт Inter — современный без засечек, хорошо читаемый на любых размерах.
Структура страницы включает следующие блоки: hero-секция с основным заголовком и кнопками навигации, карточка раннего бронирования с фиксированной стоимостью, три карточки преимуществ с нумерацией и описанием, блок «Для кого это» с иконками подтверждения, секция «Боли и решения» с визуальным противопоставлением проблем и ответов, блок срочного призыва к действию, расписание из трёх турниров с датами и кнопками записи, перечень того что включено в стоимость, блок отзывов в формате цитат, Telegram-карточка с кнопкой подписки и полем для копирования ссылки, финальная CTA-секция и футер.
Для реализации записи на турнир разработана модальная форма с автоподстановкой даты. При нажатии кнопки «Записаться» в карточке турнира, JavaScript считывает дату из элемента .schedule-date соседней карточки и передаёт её в скрытое поле формы. Пользователь видит выбранную дату в виде бейджа над формой, вводит имя и телефон, и данные отправляются на сервер. Форма включает валидацию обязательных полей, анимацию открытия и закрытия, закрытие по клавише Escape и клику вне окна.
Для приёма и хранения данных использован Google Apps Script — бесплатный серверный инструмент Google. Скрипт развёрнут как веб-приложение и принимает POST-запросы от формы на сайте. При получении данных скрипт автоматически добавляет строку в Google Таблицу с указанием времени записи, имени участника, телефона, даты турнира и момента отправки. Таблица доступна для просмотра любому уполномоченному сотруднику через обычную ссылку. Никакого выделенного сервера или платного хостинга для бэкенда не требуется.
Для анимаций использован IntersectionObserver — современный JavaScript API, который отслеживает видимость элементов при прокрутке. При появлении блока в области видимости, элемент плавно появляется с анимацией сдвига снизу вверх. Реализован параллакс-эффект на фоновом элементе — фон движется медленнее основного контента, создавая глубину. Навбар меняет прозрачность при прокрутке, фиксируясь в верхней части экрана.
Публикация выполнена на Netlify — статическом хостинге с автоматической пересборкой. При каждом коммите в репозиторий GitHub сайт автоматически пересобирается и обновляется. Клиент получает прямую ссылку на работающий сайт и может делиться ей с участниками.
Результат:
В результате разработки получен полностью рабочий лендинг, доступный по постоянной ссылке. Сайт включает все запрошенные блоки и функционал.
Ключевая функция — запись на турнир — работает в полном объёме. Клик по кнопке «Записаться» открывает модальную форму с выбранной датой. После заполнения имени и телефона, данные автоматически попадают в Google Таблицу. Клиент и его сотрудники могут открыть таблицу в любое время и видеть все заявки в структурированном виде: время записи, имя, телефон, дата турнира.
Сайт полностью адаптивен — корректно отображается на экранах любых размеров. Элементы перестраиваются, текст остаётся читаемым, кнопки удобны для нажатия на тачскринах. Тестирование выполнено на десктопных и мобильных разрешениях.
Визуально лендинг выглядит премиально: стеклянные карточки с размытием, золотые акценты, плавные анимации при прокрутке, параллакс-эффект. Стилистика соответствует игровой тематике и вызывает доверие у целевой аудитории — игроков в настольный Warcraft.
Процесс дальнейшего обновления максимально простой. Для изменения дат турниров или текстов нужно отредактировать HTML-файл и выполнить команду git push — сайт обновится автоматически. Клиенту не нужны технические навыки для просмотра заявок — достаточно открыть ссылку на Google Таблицу.
Все исходные коды хранятся в репозитории на GitHub с полной историей изменений. Это обеспечивает прозрачность, возможность отката к предыдущей версии и удобство совместной работы.
