Сейчас создам стильный редактор карты здания с тёмной темой и минималистичным дизайном. Сначала обновлю глобальные стили и создам все необходимые компоненты.

Теперь создам основные компоненты редактора карты:

Отлично, все необходимые UI компоненты уже есть. Теперь обновлю главную страницу:

Готово! Я создал FloorMap Pro — стильный и минималистичный планировщик IT-инфраструктуры здания с тёмной темой.

Возможности:

• Загрузка плана здания — нажмите кнопку Upload для добавления изображения поэтажного плана
• 8 типов устройств — серверы, точки доступа (с анимацией пульса), ПК, роутеры, коммутаторы, принтеры, камеры и комментарии
• Drag & Drop — перетаскивайте устройства по карте для точного позиционирования
• Панель свойств — редактируйте название, описание, цвет и позицию каждого устройства
• Zoom и Pan — масштабирование колесом мыши (Ctrl + колесо) и панорамирование с режимом выбора
• Горячие клавиши — V для выбора, Delete для удаления, +/- для зума
• Список объектов — все добавленные устройства группируются по типу в панели справа внизу

Теперь улучшу иконки устройств с более интересным дизайном и добавлю функционал загрузки фона:

Теперь обновлю toolbar чтобы убрать дублирующийся враппер:

Теперь улучшу canvas с drag-and-drop для загрузки фона:

Готово! Я добавил:

1. Загрузка фона через drag & drop — теперь можно просто перетащить изображение плана здания прямо на холст. При наведении появляется красивый overlay с подсказкой.

2. Улучшенные иконки устройств — каждая иконка теперь уникальная SVG с деталями:

   • Серверы с мигающими индикаторами и слотами
   • Точки доступа с волнами сигнала и пульсирующей анимацией
   • ПК с экраном и подставкой
   • Роутеры с антеннами и светодиодами
   • Коммутаторы с портами разных статусов
   • Принтеры с лотком для бумаги
   • Камеры с объективом и индикатором записи
   • Комментарии в виде пузыря с текстом
3. Визуальные улучшения — градиентный фон иконок с тенями, статус-индикаторы на каждом устройстве, плавные анимации и backdrop-blur эффекты на панелях.