From 7eb973ee99d4e31e2dd219cf28eca4759fe73e06 Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Sat, 6 Jun 2026 00:45:30 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=BE=D0=BF=D0=B8=D1=81=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=BA=20?=
 =?UTF-8?q?=D1=82=D0=B5=D1=80=D0=BC=D0=B8=D0=BD=D0=B0=D0=BC,=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=20=D1=81=D1=82=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyDropMenu.vue  | 18 +-----------------
 src/components/UI/ListCard.vue |  8 +++++---
 src/data/terms.js              | 24 ++++++++++++------------
 3 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/src/components/MyDropMenu.vue b/src/components/MyDropMenu.vue
index 3fa58a2..797f4e4 100644
--- a/src/components/MyDropMenu.vue
+++ b/src/components/MyDropMenu.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="navigation-wrapper">
-        <button class="burger-btn" @click="toggleMenu" :class="{ 'is-active': isOpen }" aria-label="Menu">
+        <button class="burger-btn" @click="toggleMenu" aria-label="Menu">
             <span class="line"></span>
             <span class="line"></span>
             <span class="line"></span>
@@ -156,10 +156,6 @@ h1 {
     background-color: transparent !important;
 }
 
-.menu-list-item.is-active {
-    background-color: transparent !important;
-    padding-bottom: 20px;
-}
 
 .menu-content button{
     font-size: 1.2rem;
@@ -172,18 +168,6 @@ h1 {
     transition: all 0.3s ease;
 }
 
-.is-active .line:nth-child(1) {
-    transform: translateY(6px) rotate(45deg);
-}
-
-.is-active .line:nth-child(2) {
-    opacity: 0;
-}
-
-.is-active .line:nth-child(3) {
-    transform: translateY(-6px) rotate(-45deg);
-}
-
 .side-panel {
     position: fixed;
     top: 0;
diff --git a/src/components/UI/ListCard.vue b/src/components/UI/ListCard.vue
index 1e1b076..a8bad86 100644
--- a/src/components/UI/ListCard.vue
+++ b/src/components/UI/ListCard.vue
@@ -55,20 +55,22 @@ const imageSrc = computed(() => props.image || APP_LOGO)
     align-items: center;
     gap: 15px;
     padding: 15px;
+    padding-left: 15px;
     margin: 8px 12px;
     border-radius: 12px;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: background 0.2s ease, padding-left 0.25s ease;
     background: rgba(255, 255, 255, 0.05);
     box-sizing: border-box;
 }
 
 .list-card:hover {
-    background: rgba(35, 170, 227, 0.2);
+    background: rgb(31, 170, 230);
+    padding-left: 6px;
 }
 
 .list-card--active {
-    background: linear-gradient(135deg, #23aae3, #1a6d8f);
+    background:rgb(29, 149, 201);
     box-shadow: 0 4px 15px rgba(35, 170, 227, 0.3);
 }
 
diff --git a/src/data/terms.js b/src/data/terms.js
index c7a53ca..0a3af1d 100644
--- a/src/data/terms.js
+++ b/src/data/terms.js
@@ -4,7 +4,7 @@ export const termsItems = [
         title: 'ROS',
         subtitle: 'Экосистема',
         image: '/images/terms/ROS.webp',
-        description: 'ROS (Robot Operating System) — экосистема для программирования роботов. В приложении через ROS дрон получает команды, передает телеметрию и данные с камеры.',
+        description: 'ROS (Robot Operating System) — экосистема для программирования роботов и дронов. Несмотря на слово «Operating System», это не операционная система, а набор библиотек, инструментов и правил, по которым разные программы робота обмениваются данными.\n\nВ приложении SkyVue сгенерированный Python-код работает внутри ROS: дрон получает команды полёта, передаёт телеметрию (координаты, высоту) и данные с камеры. Без ROS отдельные части системы — камера, контроллер полёта, ваш скрипт — не смогли бы «разговаривать» друг с другом.\n\nОсновные элементы ROS:\n• Ноды (Node) — отдельные программы, каждая выполняет свою задачу\n• Топики (Topic) — каналы для непрерывной передачи данных (изображение, телеметрия)\n• Сервисы (Service) — вызов функции с немедленным ответом (команда navigate, запрос get_telemetry)\n• Сообщения (Message) — формат данных, который передаётся в топиках и сервисах\n\nНа платформе Clover ROS уже настроен: камера, полётный контроллер и симулятор Gazebo подключены и готовы к работе. Вам остаётся написать логику в одной ноде — приложение делает это автоматически.',
         hrefToDoc: 'https://www.ros.org/',
         hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748',
     },
@@ -13,7 +13,7 @@ export const termsItems = [
         title: 'OpenCV',
         subtitle: 'Компьютерное зрение',
         image: '/images/terms/openCV.webp',
-        description: 'OpenCV (Open Source Computer Vision Library) — библиотека компьютерного зрения. С её помощью дрон распознает цвета платформ и считывает QR-коды.',
+        description: 'OpenCV (Open Source Computer Vision Library) — библиотека компьютерного зрения с открытым исходным кодом. Она умеет обрабатывать изображения и видео: находить объекты, определять цвета, считывать QR-коды и ArUco-маркеры.\n\nЭто «глаза и мозг» для обработки картинки с камеры дрона. Камера сама по себе только передаёт пиксели — OpenCV превращает их в полезную информацию: «перед нами красная платформа» или «в QR-коде написано число 42».\n\nЧто OpenCV делает в заданиях с Clover:\n• Распознаёт цвет платформы (красный, зелёный, синий) по HSV-диапазону\n• Считывает QR-коды с помощью cv2.QRCodeDetector\n• Обрабатывает кадры с камеры в реальном времени через cv2.cvtColor, cv2.inRange и другие функции\n• Работает и в симуляторе Gazebo, и на реальном дроне — код один и тот же\n\nOpenCV — стандарт индустрии: её используют в робототехнике, автономных машинах и системах видеонаблюдения. В Python подключается одной строкой: import cv2.',
         hrefToDoc: 'https://opencv.org/',
         hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893',
     },
@@ -22,7 +22,7 @@ export const termsItems = [
         title: 'navigate_wait',
         subtitle: 'Clover',
         image: '/images/terms/navigate_wait.jpg',
-        description: 'Navigate_wait — функция из библиотеки Clover. Отправляет дрон в точку и ждёт, пока он туда долетит, и только потом выполняет следующую команду. Это важно, потому что обычная команда navigate не ждет: дрон ещё летит, а скрипт уже бежит дальше — из-за этого следующие команды могут выполняться раньше времени.',
+        description: 'navigate_wait — функция из библиотеки Clover (clover.srv), которая отправляет дрон в заданную точку и ждёт, пока он туда долетит. Только после прилёта выполняется следующая строка кода.\n\nЭто «команда с терпением»: скрипт не бежит дальше, пока дрон не завершит перелёт.\n\nЧем отличается от обычного navigate:\n• navigate — отправляет команду и сразу идёт дальше. Дрон ещё летит, а скрипт уже выполняет следующие действия\n• navigate_wait — блокирует выполнение до прилёта. Следующая команда гарантированно выполнится в нужной точке\n\nКогда использовать navigate_wait:\n• Перед считыванием QR-кода или определением цвета платформы — дрон должен зависнуть над целью\n• При последовательных перемещениях, где порядок важен (сначала точка A, потом точка B)\n• Когда нужно дождаться завершения манёвра перед следующим действием\n\nПараметры: x, y, z (координаты), frame_id (система координат, например body или aruco_map), speed (скорость), auto_arm (автовооружение). В SkyVue эти параметры подставляются из блоков траектории на карте.',
         hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
         hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803',
     },
@@ -31,7 +31,7 @@ export const termsItems = [
         title: 'Нода (Node)',
         subtitle: 'ROS',
         image: '/images/terms/node.jpg',
-        description: 'Нода (Node/узел) в ROS - исполняемая программа, которая выполняет одну конкретную задачу. В сгенерированном коде вся логика полета и обработки камеры находится внутри одной ноды. Это позволяет запускать, останавливать и отлаживать программу как единое целое. ',
+        description: 'Нода (Node, узел) в ROS — исполняемая программа, которая выполняет одну конкретную задачу и общается с другими нодами через топики и сервисы.\n\nЭто «отдельный работник» в команде робота: один следит за камерой, другой управляет полётом, третий обрабатывает изображение. Каждый работает независимо, но координируется через ROS.\n\nКак это выглядит в сгенерированном коде:\n• Вся логика полёта и обработки камеры находится внутри одной ноды\n• В начале файла — rospy.init_node(\'flight\'), который регистрирует программу в ROS\n• Внутри ноды создаются подписчики (на камеру, телеметрию) и вызываются сервисы (navigate, get_telemetry)\n\nЗачем одна нода, а не несколько:\n• Проще отлаживать — весь код в одном месте\n• Легче запускать: rosrun clover blockly\n• Удобно для учебных заданий, где логика невелика\n\nВ реальных проектах нод может быть много: отдельная нода для камеры, для навигации, для логирования. Но принцип тот же — каждая нода = одна программа с чёткой задачей.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758',
     },
@@ -40,7 +40,7 @@ export const termsItems = [
         title: 'Топик (Topic)',
         subtitle: 'ROS',
         image: '/images/terms/topic.jpg',
-        description: 'Топик (Topic) в ROS — канал обмена данными. Например, камера публикует изображение в топик, а ваш скрипт подписывается на него и получает кадры.',
+        description: 'Топик (Topic) в ROS — именованный канал для обмена данными между нодами. Один узел публикует сообщения в топик, другие подписываются и получают их — как радиостанция, на которую настроились несколько приёмников.\n\nЭто «радиоканал» робота: данные текут непрерывно, пока издатель их отправляет.\n\nПримеры топиков на Clover:\n• /main_camera/image/compressed — сжатые кадры с камеры дрона\n• /mavros/state — состояние полётного контроллера (вооружён/не вооружён)\n• /mavros/local_position/pose — текущие координаты дрона\n\nКак работает связка:\n1. Камера (нода image_publisher) постоянно публикует кадры в топик\n2. Ваш скрипт подписывается на этот топик через rospy.Subscriber\n3. Каждый новый кадр автоматически вызывает вашу функцию-обработчик\n\nТопики vs сервисы:\n• Топик — поток данных без ожидания ответа (видео, телеметрия)\n• Сервис — один запрос, один ответ (команда «лети сюда»)\n\nИмя топика всегда начинается с / и уникально в системе ROS.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866',
     },
@@ -49,7 +49,7 @@ export const termsItems = [
         title: 'Издатель (Publisher)',
         subtitle: 'ROS',
         image: '/images/terms/publisher.jpg',
-        description: 'Издатель (Publisher) в ROS — часть программы, которая отправляет данные в топик. Например, если нужно передать команду другому узлу или опубликовать координаты дрона — создается издатель, который публикует сообщения в нужный канал. Подписчики других узлов могут эти данные получать. ',
+        description: 'Издатель (Publisher) в ROS — объект в программе, который отправляет (публикует) сообщения в топик. Любая нода может создать издатель и передавать данные всем подписчикам этого топика.\n\nЭто «передатчик» в системе ROS: вы говорите что-то в эфир, а кто настроился — тот слышит.\n\nКак создаётся издатель в Python:\n• pub = rospy.Publisher(\'/my_topic\', String, queue_size=10)\n• pub.publish(сообщение) — отправить данные в топик\n\nГде встречается на практике:\n• Нода камеры Clover публикует изображения — вы только подписываетесь\n• Если нужно передать результат своей обработки другой ноде — создаёте свой издатель\n• Логирование: публикация отладочных сообщений в топик /rosout\n\nПараметры при создании:\n• Имя топика — куда публиковать\n• Тип сообщения (String, Image, PoseStamped и др.) — формат данных\n• queue_size — сколько сообщений хранить в очереди, если подписчик не успевает\n\nВ учебных заданиях Clover чаще используются подписчики (получать данные с камеры), а не издатели. Но понимание издателя важно для полной картины ROS.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866',
     },
@@ -58,7 +58,7 @@ export const termsItems = [
         title: 'Подписчик (Subscriber)',
         subtitle: 'ROS',
         image: '/images/terms/subscriber.jpg',
-        description: 'Подписчик (Subscriber) в ROS — часть программы, которая получает данные из топика. Например, чтобы дрон "видел" изображение с камеры или считывал свои координаты, создаётся подписчик на соответствующий топик. Как только в топике появляются новые данные, подписчик автоматически их обрабатывает.',
+        description: 'Подписчик (Subscriber) в ROS — объект в программе, который получает данные из топика. Когда в топике появляется новое сообщение, ROS автоматически вызывает вашу callback-функцию с этими данными.\n\nЭто «приёмник» робота: вы настраиваетесь на нужный канал и реагируете на каждое новое сообщение.\n\nКак это работает в коде Clover:\n• rospy.Subscriber(\'/main_camera/image/compressed\', CompressedImage, image_callback)\n• Функция image_callback получает каждый кадр с камеры\n• Внутри callback можно обработать изображение через OpenCV: определить цвет, прочитать QR-код\n\nТипичный сценарий в заданиях:\n1. Подписаться на камеру\n2. В callback получить кадр, декодировать его\n3. Обработать через cv2 — найти цвет платформы или QR-код\n4. Вызвать unregister(), когда данные больше не нужны\n\nВажно:\n• Callback вызывается асинхронно — не блокирует основной поток\n• Не делайте в callback долгих операций — иначе пропустите кадры\n• Всегда отключайте подписчика через unregister(), когда он больше не нужен',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866',
     },
@@ -67,7 +67,7 @@ export const termsItems = [
         title: 'Сервис',
         subtitle: 'ROS',
         image: '/images/terms/service.jpg',
-        description: 'Сервис в ROS - способ вызвать функцию робота и сразу получить ответ. В отличие от топика, где данные идут постоянно, сервис работает по принципу "запрос — ответ". Например, команда navigate — это сервис: вы отправляете координаты, а робот отвечает "команда принята". Команда get_telemetry возвращает текущие координаты дрона.',
+        description: 'Сервис (Service) в ROS — способ вызвать функцию робота и сразу получить ответ. В отличие от топика, где данные текут непрерывно, сервис работает по принципу «запрос — ответ»: один раз спросил, один раз получил результат.\n\nЭто «кнопка с обратной связью»: нажал — робот выполнил и сообщил, получилось или нет.\n\nОсновные сервисы Clover:\n• navigate / navigate_wait — отправить дрон в точку (x, y, z)\n• get_telemetry — получить текущие координаты, высоту, скорость\n• land — посадить дрон\n• arming — вооружить или разоружить моторы\n\nКак вызывается сервис в Python:\n• rospy.wait_for_service(\'navigate\') — дождаться, пока сервис станет доступен\n• navigate = rospy.ServiceProxy(\'navigate\', Navigate)\n• navigate(x=1, y=0, z=1.5, frame_id=\'body\', speed=0.5) — вызов с параметрами\n\nСервис vs топик:\n• Сервис — когда нужен конкретный результат прямо сейчас (координаты, команда полёта)\n• Топик — когда данные приходят постоянно (видеопоток, телеметрия в реальном времени)\n\nВ SkyVue блоки траектории генерируют вызовы navigate_wait — это как раз работа через сервис.',
         hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
         hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206',
     },
@@ -76,7 +76,7 @@ export const termsItems = [
         title: 'Системы координат',
         subtitle: 'Навигация',
         image: '/images/terms/coordinate-system.jpg',
-        description: 'Определяют, откуда отсчитывать координаты дрона. body — относительно самого дрона (вперед/назад/влево/вправо). aruco_map — относительно карты с ArUco-метками, где координаты привязаны к неподвижным маркерам. Выбор правильной системы координат позволяет дрону точно выполнять команды: лететь относительно себя для коротких маневров или по глобальной карте для точной навигации.',
+        description: 'Системы координат (frames) определяют, откуда отсчитываются координаты дрона: относительно самого дрона, карты ArUco или глобальной системы. Без правильного frame_id команда «лети на x=1, y=0» может отправить дрон не туда.\n\nЭто «точка отсчёта» на карте: одни и те же числа x, y, z означают разное в зависимости от выбранной системы.\n\nОсновные системы на Clover:\n• body — координаты относительно дрона: x — вперёд/назад, y — влево/вправо, z — вверх/вниз. Удобно для коротких манёвров («пролети 2 метра вперёд»)\n• aruco_map — координаты относительно карты ArUco-меток на полу. Маркеры неподвижны, поэтому дрон знает своё абсолютное положение в комнате\n• map — глобальная карта (используется реже в учебных заданиях)\n\nКогда что использовать:\n• body — относительные перемещения от текущей позиции\n• aruco_map — полёт к конкретной точке на карте, навигация между платформами\n• При смене системы координаты пересчитываются автоматически через TF (Transform)\n\nВ SkyVue система координат задаётся в настройках траектории и подставляется в параметр frame_id при вызове navigate_wait.',
         hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
         hrefToDoc: 'https://clover.coex.tech/ru/frames.html',
     },
@@ -85,7 +85,7 @@ export const termsItems = [
         title: 'ArUco-маркер',
         subtitle: 'Навигация',
         image: '/images/terms/ArUco-marker.webp',
-        description: 'ArUco-маркер — квадратный визуальный маркер, который камера дрона может распознавать. Используется для навигации: по положению маркера дрон определяет свои координаты в пространстве.',
+        description: 'ArUco-маркер — квадратный чёрно-белый визуальный маркер с уникальным ID внутри. Камера дрона распознаёт его через OpenCV и определяет положение маркера (и своё собственное) в пространстве.\n\nЭто «маяк на полу»: дрон смотрит на маркер и понимает, где он находится относительно карты.\n\nКак работает навигация по ArUco:\n• На полу или стенах размещаются маркеры с известными координатами\n• Камера дрона видит маркеры и вычисляет свою позицию в системе aruco_map\n• Дрон может лететь к точке с точностью до сантиметров — без GPS\n\nГде применяется:\n• Учебные полигоны и соревнования (RoboCup, олимпиады по робототехнике)\n• Полёты в помещении, где GPS не работает\n• Точная посадка на платформу или маркированную точку\n\nНа Clover:\n• Пакет aruco_detect распознаёт маркеры и публикует их позиции\n• Система координат aruco_map привязана к расположению маркеров на карте\n• В симуляторе Gazebo маркеры уже расставлены на сцене\n\nКаждый маркер имеет числовой ID (0, 1, 2...) — по нему система различает маркеры на одной карте.',
         hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
         hrefToDoc: 'https://klever-doc.tech/ROS1/ru/aruco.html',
     },
@@ -94,7 +94,7 @@ export const termsItems = [
         title: 'Симулятор (Gazebo)',
         subtitle: 'Симуляция',
         image: '/images/terms/gazebo.jpg',
-        description: 'Симулятор (Gazebo) — виртуальная среда, где дрон ведет себя как в реальности. Позволяет безопасно тестировать полетные задания перед запуском на реальном дроне.',
+        description: 'Gazebo — физический симулятор роботов и дронов. В виртуальной среде дрон ведёт себя как в реальности: летит, реагирует на команды, камера передаёт изображение, ArUco-маркеры видны на полу.\n\nЭто «тренировочный полигон» без риска разбить дрон: ошибся в коде — перезапустил симуляцию, а не чинил пропеллер.\n\nЧто симулирует Gazebo на Clover:\n• Физику полёта: подъёмная сила, инерция, гравитация\n• Камеру дрона с тем же топиком /main_camera/image/compressed\n• ArUco-маркеры на виртуальной карте\n• Все ROS-сервисы: navigate, get_telemetry, land — работают так же, как на реальном дроне\n\nЗачем использовать симулятор:\n• Безопасное тестирование кода перед полётом на реальном Clover\n• Не нужен физический дрон — достаточно компьютера\n• Тот же Python-код запускается и в Gazebo, и на реальном роботе\n• Можно повторять задание сколько угодно раз\n\nКак запустить: roslaunch clover sim_clover.launch — поднимается Gazebo со сценой и дроном. Код из SkyVue можно сразу тестировать в симуляторе через rosrun.',
         hrefToCourse: 'https://stepik.org/lesson/2278310/step/1?unit=2312564',
         hrefToDoc: 'https://klever-doc.tech/ROS1/ru/simulation.html',
     },
@@ -103,7 +103,7 @@ export const termsItems = [
         title: 'unregister()',
         subtitle: 'ROS',
         image: '/images/terms/subscriber.jpg',
-        description: 'unregister() — метод, который отключает подписчика от топика. Используется, чтобы перестать получать данные, когда они больше не нужны (например, после сканирования QR-кода).',
+        description: 'unregister() — метод объекта подписчика (Subscriber) в ROS, который отключает его от топика. После вызова программа перестаёт получать новые сообщения из этого канала.\n\nЭто «выключить приёмник»: данные больше не нужны — отписываемся, чтобы не тратить ресурсы и не вызывать callback зря.\n\nКогда использовать:\n• После успешного считывания QR-кода — камера больше не нужна для этой задачи\n• Когда определили цвет платформы и пора лететь дальше\n• Перед длительной операцией (navigate_wait), чтобы callback не мешал основному потоку\n• В конце программы — корректное завершение работы с ROS\n\nКак выглядит в коде:\n• sub = rospy.Subscriber(\'/main_camera/image/compressed\', CompressedImage, callback)\n• ... обработка кадров ...\n• sub.unregister() — отключение\n\nЧто будет, если не вызывать unregister():\n• Callback продолжит вызываться на каждый кадр — лишняя нагрузка на CPU\n• Возможны конфликты: callback срабатывает во время navigate_wait\n• При повторном создании подписчика на тот же топик — дублирование обработчиков\n\nПравило: создали подписчик — отключите его, когда задача выполнена.',
         hrefToCourse: 'https://stepik.org/lesson/2272845/step/1?unit=2307058',
         hrefToDoc: 'https://docs.ros.org/en/diamondback/api/rospy/html/rospy.topics.Subscriber-class.html',
     },