Доска Канбан на HTML/CSS/JS
Описание промпта
Готовое решение для создания интерактивной доски Канбан с перетаскиванием, сохранением данных и адаптивным дизайном.
- Создает интерактивную доску Канбан с drag-and-drop, сохранением в localStorage, комментариями, приоритетами и адаптивным дизайном.
- Позволяет эффективно управлять задачами без использования сторонних сервисов. Данные хранятся локально, что обеспечивает приватность и скорость работы.
- Фронтенд-разработчики, менеджеры проектов, студенты, изучающие JavaScript, и все, кому нужен простой инструмент для тайм-менеджмента.
Скопируй код в файл index.html и открой в браузере. Используй мышь для перетаскивания карточек. Для создания новой карточки используй кнопку или горячие клавиши. Настройки темы и колонок доступны в интерфейсе.
Современный браузер с поддержкой HTML5 Drag and Drop API и localStorage. Никаких дополнительных зависимостей не требуется.
Рабочее веб-приложение с визуальной доской, где можно создавать задачи, перемещать их между статусами, добавлять детали и сохранять прогресс.
Для сброса данных очисти localStorage в инструментах разработчика браузера. Экспорт/импорт полезен для резервного копирования.
Работает только в одном браузере на одном устройстве (из-за localStorage). Не синхронизируется между устройствами без дополнительной серверной части.
Промпт открыт для всех. Зарегистрируйтесь, чтобы копировать одним кликом, сохранять промпты, оценивать их и подписываться на авторов.
Текст промпта
ChatGPT / Claude / Llama
Войти для копирования
Выступи в роли опытного фронтенд-разработчика и создай полнофункциональную доску Канбан для управления проектами, используя только HTML5, CSS3 и чистый JavaScript (без внешних библиотек).
Твоя задача — реализовать следующие ключевые функции:
1. **Структура и макет**:
- Создай гибкий макет доски с настраиваемыми колонками (например, «К выполнению», «В работе», «Готово» и другие).
- Обеспечь возможность добавления новых колонок и их переупорядочивания.
2. **Drag-and-Drop функциональность**:
- Реализуй перетаскивание карточек между колонками с использованием HTML5 Drag and Drop API.
- Добавь плавные анимации при перемещении карточек для улучшения UX.
3. **Управление карточками**:
- Карточки должны поддерживать создание с богатым форматированием текста (жирный, курсив, списки).
- Добавь возможность назначения меток (labels), сроков выполнения (due dates) и уровней приоритета.
- Реализуй назначение исполнителей с отображением аватаров.
- Добавь фильтрацию карточек по назначенному исполнителю.
4. **Комментарии и история**:
- Внутри каждой карточки должна быть возможность оставлять комментарии.
- Веди историю активности (activity history) для отслеживания изменений.
5. **Кастомизация и навигация**:
- Позволь пользователю менять цветовые темы доски.
- Поддерживай работу с несколькими досками с возможностью быстрого переключения между ними.
6. **Хранение данных**:
- Используй localStorage для сохранения состояния доски, чтобы данные не терялись при перезагрузке страницы.
- Реализуй функции экспорта и импорта данных (например, в JSON формате).
7. **Адаптивность и доступность**:
- Обеспечь отзывчивый дизайн (responsive design), который корректно отображается на мобильных устройствах и десктопах.
- Добавь горячие клавиши (keyboard shortcuts) для часто используемых действий (создание карточки, удаление, перемещение).
Напиши полный, рабочий код в одном HTML-файле (включая CSS и JS), который можно сразу открыть в браузере. Код должен быть чистым, хорошо прокомментированным и модульным.Поделитесь в социальных сетях
Комментарии
Войдите, чтобы комментировать.
Комментариев пока нет.