Как я создал сайт для удобной генерации афиш забегов⁠⁠

Приветствую всех любителей бега и организаторов мероприятий! 🏃‍♂️✨

Сегодня хочу поделиться историей создания своего проекта — интерактивного генератора афиш для забегов. Этот инструмент позволяет легко создавать, редактировать и сохранять календари мероприятий в удобном формате.

Зачем это нужно?

Организация забегов — это не только подготовка трассы и участников, но и информирование публики. Красивые, понятные афиши помогают привлечь внимание и донести важную информацию. Но каждый раз делать их в графических редакторах — долго и неудобно.

Я решил автоматизировать процесс и создать онлайн-редактор, который:

Позволяет быстро добавлять и редактировать события.
Даёт возможность настраивать дизайн (цвета, шрифты, размеры).
Поддерживает сохранение в JPG и JSON (для переноса данных).
Адаптирован под мобильные устройства.

Как это работает?

Добавление событий
- Можно вручную ввести дату, название, описание, дистанции и другие детали.
- Есть возможность загружать свои иконки для каждого события.
Настройка дизайна
- Изменение цвета заголовков.
- Выбор шрифта и размера иконок.
Экспорт
- Сохранение афиши в JPG для печати или публикации в соцсетях.
- Экспорт данных в JSON (удобно для резервного копирования или переноса).
История изменений
- Можно отменять действия, если что-то пошло не так.

Техническая сторона

Сайт написан на чистом HTML, CSS и JavaScript с использованием:

Flatpickr для удобного выбора дат.
html2canvas для преобразования страницы в изображение.
LocalStorage для сохранения данных между сессиями.

Попробуйте сами!

Сайт доступен по адресу: http://45.143.95.82:9050/

Если у вас есть идеи по улучшению или вы нашли баг — пишите в комментариях! Буду рад обратной связи. 🚀