src/App.vue

@@ -112,7 +112,7 @@ function cancel() {
 
 function cleanResult() {
     clickCount.value = 1;
-    listOfTrips.value.forEach(item => {
+    numbers.value.forEach(item => {
         item.isPlatform = false;
         item.isQR = false;
         item.variable = [];
@@ -174,9 +174,11 @@ function createPlatform(item, color) {
 }
 
 function deletePlatform(item) {
+    if (item.isPlatform) {
         item.BgImg = 'images/ArUco-marker.jpg'
         item.isPlatform = false
     }
+}
 
 function createQR(item) {
     if (!item.variable.length) {
@@ -190,8 +192,10 @@ function createQR(item) {
 }
 
 function deleteQR(item) {
+    if (item.isQR) {
         item.BgImg = 'images/ArUco-marker.jpg'
-    item.isQR = true
+        item.isQR = false
+    }
 }
 
 function deletePointMap(item) {
@@ -288,9 +292,8 @@ function onContextMenu(e, item) {
 <template>
     <div class="wraper">
         <div class="grid">
-            <div class="square" v-for="(item, index) in numbers" :data-key="index" :key="index"
-                 @click="setNumber(item)" @contextmenu.prevent="onContextMenu($event, item)"
-                 :style="{backgroundImage: `url(${item.BgImg})`}">
+            <div class="square" v-for="(item, index) in numbers" :data-key="index" :key="index" @click="setNumber(item)"
+                @contextmenu.prevent="onContextMenu($event, item)" :style="{ backgroundImage: `url(${item.BgImg})` }">
                 {{ numbers[index].variable.join(", ") }}
             </div>
         </div>
@@ -304,11 +307,7 @@ function onContextMenu(e, item) {
     </div>
 
 
-    <MyDialog
-        v-model:show="isModalVisible"
-        class="dialogWindow"
-        :is-success=Boolean(listOfTrips.length)
-    >
+    <MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
         <template #header>
             <strong v-if="listOfTrips.length">Код готов!</strong>
             <strong v-else>Код не готов!</strong>
@@ -328,13 +327,17 @@ function onContextMenu(e, item) {
 </template>
 
 <style>
+* {
+    font-family: 'Courier New', Courier, monospace;
+}
+
 html {
-    background-image: radial-gradient(#383838e2, #222222);
+    background-image: radial-gradient(#23aae3e2, #222222);
     font-size: 18px;
 }
 
 :root {
-    --side: 70px;
+    --side: 75px;
 }
 
 .wraper {
@@ -346,7 +349,7 @@ html {
     display: grid;
     padding: 3px;
     grid-template-columns: repeat(10, var(--side));
-    gap: 10px;
+    gap: 5px;
     user-select: none;
 }
 
@@ -367,6 +370,7 @@ html {
         1px -1px 0 black,
         -1px 1px 0 black,
         1px 1px 0 black;
+    box-sizing: border-box;
 }
 
 .square:hover {

src/components/MyDialog.vue

@@ -38,6 +38,10 @@ const props = defineProps({
 </script>
 
 <style>
+:root {
+    --successColor: #4ee882
+}
+
 .modal-backdrop {
     position: fixed;
     top: 0;
@@ -74,7 +78,7 @@ const props = defineProps({
 }
 
 .modal-header-success {
-    color: #4AAE9B;
+    color: var(--successColor);
 }
 
 .modal-header-error {
@@ -89,17 +93,18 @@ const props = defineProps({
 .modal-footer {
     justify-content: flex-end;
     border-top: 1px solid white;
+
 }
 
 .modal-footer button {
     justify-content: flex-end;
     border-top: 1px solid white;
     padding: 5px;
-    color: white;
+    color: rgb(0, 0, 0);
 }
 
 .modal-footer-success button {
-    background-color: #4AAE9B;
+    background-color: var(--successColor);
     border: none;
     margin: 3px;
 }

src/components/MyDropMenu.vue

@@ -1,12 +1,7 @@
 <template>
     <div class="navigation-wrapper">
         <!-- Кнопка Бургер -->
-        <button
-            class="burger-btn"
-            @click="toggleMenu"
-            :class="{ 'is-active': isOpen }"
-            aria-label="Menu"
-        >
+        <button class="burger-btn" @click="toggleMenu" :class="{ 'is-active': isOpen }" aria-label="Menu">
             <span class="line"></span>
             <span class="line"></span>
             <span class="line"></span>
@@ -29,10 +24,7 @@
                 </nav>
             </aside>
         </transition>
-        <MyDialog
-            isSuccess
-            v-model:show="isModalVisible"
-        >
+        <MyDialog isSuccess v-model:show="isModalVisible">
             <template #header>
                 <strong>{{ infoCard.title }}</strong>
             </template>
@@ -40,9 +32,11 @@
                 <p>{{ infoCard.body }}</p>
             </main>
             <template #footer>
-                <custom-button title="Посмотреть на stepike">Курс</custom-button>
-                <custom-button title="Посмотреть в официальной документации">Документация</custom-button>
-                <custom-button>ОК</custom-button>
+                <div class="navigation-wrapper__footer">
+                    <custom-button :to="infoCard.hrefToCourse" title="Посмотреть на Stepik">Курс</custom-button>
+                    <custom-button :to="infoCard.hrefToDoc" title="Посмотреть в официальной документации">Документация</custom-button>
+                    <custom-button @click="isModalVisible = false">ОК</custom-button>
+                </div>
             </template>
         </MyDialog>
     </div>
@@ -73,9 +67,9 @@ function openInfoCard(obj) {
 const links = [
     {
         title: 'Что такое ROS?',
-        body: 'ROS — переводится как robot operation system',
-        hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
-        hrefToCourse: 'https://stepic.org'
+        body: 'ROS (Robot Operating System) — экосистема для программирования роботов с открытым исходным кодом',
+        hrefToDoc: 'https://www.ros.org/',
+        hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
     },
     {
         title: '2',
@@ -139,10 +133,12 @@ defineExpose({open: () => (isOpen.value = true), close: closeMenu});
 
 <style scoped>
 .burger-btn {
-    position: fixed; /* Она всегда на одном месте при скролле */
+    position: fixed;
+    /* Она всегда на одном месте при скролле */
     top: 20px;
     left: 20px;
-    z-index: 9999; /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
+    z-index: 9999;
+    /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
     display: flex;
     flex-direction: column;
     justify-content: space-around;
@@ -158,10 +154,17 @@ h1 {
     text-align: center;
 }
 
+.menu-content {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
 .line {
     width: 100%;
     height: 4px;
-    background-color: #383838; /* Ярко-красный цвет для теста */
+    background-color: #383838;
+    /* Ярко-красный цвет для теста */
     transition: all 0.3s ease;
 }
 
@@ -185,7 +188,8 @@ h1 {
     left: 0;
     width: 240px;
     height: 100%;
-    background: white;
+    background-image: radial-gradient(#23aae3e2, #222222);
+    color: white;
     z-index: 1000;
     padding: 0 20px 20px;
     overflow-y: scroll;
@@ -199,22 +203,35 @@ h1 {
     width: 100vw;
     height: 100vh;
     z-index: 2;
+    background-color: #333333;
+    opacity: 90%;
+    display: flex;
+}
+
+.navigation-wrapper__footer {
+    display: flex;
+    gap: 10px;
+    width: 100%;
 }
 
 /* Анимации появления */
-.slide-enter-active, .slide-leave-active {
+.slide-enter-active,
+.slide-leave-active {
     transition: transform 0.3s ease;
 }
 
-.slide-enter-from, .slide-leave-to {
+.slide-enter-from,
+.slide-leave-to {
     transform: translateX(-100%);
 }
 
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
     transition: opacity 0.3s ease;
 }
 
-.fade-enter-from, .fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
     opacity: 0;
 }
 </style>

src/components/UI/CustomButton.vue

@@ -13,7 +13,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <a v-if="to" :href="props.to" class="btn">
+    <a v-if="to" :href="props.to" target="_blank" class="btn">
         <slot />
     </a>
     <button v-else class="btn">
@@ -31,5 +31,11 @@ const props = defineProps({
     color: white;
     width: 100%;
     font-size: 17px;
+
+    text-decoration: none;
+    box-sizing: border-box;
+    text-align: center;
+    font-family: 'Courier New', Courier, monospace;
+    margin: 0;
 }
 </style>