Стикеры онлайн
Реализуйте сервис, с помощью которого пользователи могут создавать стикеры для записей.
Основные возможности проекта
- Создание стикеров с текстом.
- Перетаскивание стикеров в любое место окна браузера.
- Изменение размеров стикера.
- Настройка цвета фона.
- Настройка цвета и размера текста.
- Удаление стикеров.
- Сохранение состояния в localStorage.
Главная страница
На странице должна быть кнопка "Создать стикер" и рабочая область (весь экран или контейнер), в которой размещаются стикеры. Каждый стикер - это прямоугольник с текстом, который можно перемещать и изменять.
Создание стикера
При нажатии на кнопку "Создать стикер" появляется новый стикер с текстом по умолчанию ("Введите текст..."). Стикер появляется в центре рабочей области.
Редактирование текста
Текст в стикере редактируется по двойному клику. При двойном клике появляется текстареа с текущим текстом. После ввода нового текста и нажатия Enter или потери фокуса текст обновляется.
Перетаскивание стикеров (Drag-and-Drop)
Пользователь может перетаскивать стикер в любое место окна браузера, захватывая его за верхнюю часть (заголовок) и перемещая. При перетаскивании стикер должен плавно следовать за курсором.
Изменение размера
В правом нижнем углу каждого стикера должен быть специальный маркер (resize handle). Захватив его, пользователь может изменять размер стикера (ширину и высоту).
Настройка стикера
Каждый стикер должен иметь панель настроек (или выпадающее меню) для изменения:
- Цвет фона (палитра цветов или инпут color).
- Цвет текста (палитра цветов или инпут color).
- Размер текста (выбор из списка или слайдер).
Удаление стикера
У каждого стикера должна быть кнопка "Удалить" (крестик в правом верхнем углу). При нажатии на нее появляется подтверждение (confirm), после чего стикер удаляется.
Хранение данных
Все стикеры и их состояние должны храниться в локальном хранилище браузера (localStorage). При перезагрузке страницы все стикеры должны восстанавливаться: их позиция, размер, текст, цвет фона, цвет и размер текста.
Структура данных
Каждый стикер в хранилище должен содержать:
- id - уникальный идентификатор.
- text - текст стикера.
- left, top - позиция на странице.
- width, height - размеры стикера.
- bgColor - цвет фона.
- textColor - цвет текста.
- fontSize - размер текста.
Дополнительные возможности
- Кнопка "Очистить все" с подтверждением.
- Закругление углов стикеров.