Стикеры онлайн

Реализуйте сервис, с помощью которого пользователи могут создавать стикеры для записей.

Основные возможности проекта

Создание стикеров с текстом.
Перетаскивание стикеров в любое место окна браузера.
Изменение размеров стикера.
Настройка цвета фона.
Настройка цвета и размера текста.
Удаление стикеров.
Сохранение состояния в localStorage.

Главная страница

На странице должна быть кнопка "Создать стикер" и рабочая область (весь экран или контейнер), в которой размещаются стикеры. Каждый стикер - это прямоугольник с текстом, который можно перемещать и изменять.

Создание стикера

При нажатии на кнопку "Создать стикер" появляется новый стикер с текстом по умолчанию ("Введите текст..."). Стикер появляется в центре рабочей области.

Редактирование текста

Текст в стикере редактируется по двойному клику. При двойном клике появляется текстареа с текущим текстом. После ввода нового текста и нажатия Enter или потери фокуса текст обновляется.

Перетаскивание стикеров (Drag-and-Drop)

Пользователь может перетаскивать стикер в любое место окна браузера, захватывая его за верхнюю часть (заголовок) и перемещая. При перетаскивании стикер должен плавно следовать за курсором.

Изменение размера

В правом нижнем углу каждого стикера должен быть специальный маркер (resize handle). Захватив его, пользователь может изменять размер стикера (ширину и высоту).

Настройка стикера

Каждый стикер должен иметь панель настроек (или выпадающее меню) для изменения:

Цвет фона (палитра цветов или инпут color).
Цвет текста (палитра цветов или инпут color).
Размер текста (выбор из списка или слайдер).

Удаление стикера

У каждого стикера должна быть кнопка "Удалить" (крестик в правом верхнем углу). При нажатии на нее появляется подтверждение (confirm), после чего стикер удаляется.

Хранение данных

Все стикеры и их состояние должны храниться в локальном хранилище браузера (localStorage). При перезагрузке страницы все стикеры должны восстанавливаться: их позиция, размер, текст, цвет фона, цвет и размер текста.

Структура данных

Каждый стикер в хранилище должен содержать:

id - уникальный идентификатор.
text - текст стикера.
left, top - позиция на странице.
width, height - размеры стикера.
bgColor - цвет фона.
textColor - цвет текста.
fontSize - размер текста.

Дополнительные возможности

Кнопка "Очистить все" с подтверждением.
Закругление углов стикеров.