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

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

Продумайте структуру базы данных для хранения пользователей и стикеров (id, текст, позиция, размер, цвет фона, цвет текста, размер текста). Реализуйте регистрацию и авторизацию пользователей. Настройте серверную часть для работы с API. Все операции должны выполняться через AJAX-запросы без перезагрузки страницы.

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

• Регистрация и авторизация пользователей.
• Создание стикеров с текстом (AJAX).
• Перетаскивание стикеров в любое место окна браузера (AJAX).
• Изменение размеров стикера (AJAX).
• Настройка цвета фона (AJAX).
• Настройка цвета и размера текста (AJAX).
• Удаление стикеров (AJAX).
• Сохранение состояния на сервере.
• Каждый пользователь видит только свои стикеры.

Регистрация и авторизация

На сайте должна быть реализована регистрация и авторизация пользователей:

• Регистрация - форма с полями: логин, email, пароль.
• Авторизация - форма с полями: логин, пароль.
• Каждый пользователь видит только свои стикеры.

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

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

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

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

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

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

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

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

Изменение размера (AJAX)

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

Настройка стикера (AJAX)

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

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

Изменения сохраняются на сервере через AJAX.

Удаление стикера (AJAX)

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

Взаимодействие с сервером

Все операции выполняются через AJAX-запросы:

• При загрузке страницы стикеры загружаются с сервера.
• При добавлении, редактировании, удалении или изменении параметров стикера данные отправляются на сервер, после успешного ответа обновляется интерфейс.

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

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