Предваарительный коммит

src/App.vue

@@ -3,6 +3,7 @@ import { ref, onMounted } from "vue";
 import izitoast from "./izitoast";
 import { useEventListener } from "@vueuse/core";
 import MyDialog from "./components/MyDialog.vue";
+import MyDropMenu from "./components/MyDropMenu.vue";
 import copyToclipboard from "./copyToclipboard";
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
@@ -104,77 +105,77 @@ function copyAndToast(text) {
 </script>
 
 <template>
-  <div class="grid">
-    <div
-      class="square"
-      v-for="(item, index) in numbers"
-      :data-key="index"
-      :key="index"
-      @click="setNumber(item)"
-    >
-    
-    <div id="idenx">{{ numbers[index].variable.join(", ") }}</div>
+  <div class="wraper">
+    <div class="grid">
+      <div
+        class="square"
+        v-for="(item, index) in numbers"
+        :data-key="index"
+        :key="index"
+        @click="setNumber(item)"
+      >
+      {{ numbers[index].variable.join(", ") }}
+      </div>
     </div>
+
+    <div class="actions">
+      <button @click="saveResult">Сохранить</button>
+      <button @click="cleanResult">Очистить</button>
+      <button @click="cleanResult">Отменить</button>
+    </div>
+    <!-- <MyDropMenu/> -->
   </div>
 
-  <div class="SaveCleanBtn">
-    <button id="saveBtn" @click="saveResult">Сохранить</button>
-    <button id="cleanBtn" @click="cleanResult">Очистить</button>
-  </div>
 
   <MyDialog
     v-show="isModalVisible"
     @close="isModalVisible = false"
     class="dialogWindow"
+    :is-success=listOfTrips.length
   >
     <template #header>
-      <strong id='codeIsReady' v-if="listOfTrips.length">Код готов!</strong>
-      <strong id='codeNotReady' v-else>Код не готов!</strong>
+      <strong v-if="listOfTrips.length">Код готов!</strong>
+      <strong v-else>Код не готов!</strong>
     </template>
     <template #body>
-      <p v-if="listOfTrips.length" id="headText1">
+      <p v-if="listOfTrips.length">
         Скопируйте или скачайте ваш код
       </p>
-      <p v-else id='ReccomendText'>Выстройте маршрут перед сохранением кода.</p>
+      <p v-else>Выстройте маршрут перед сохранением кода.</p>
     </template>
     <template #footer>
       <div v-if="listOfTrips.length">
-        <button type="button" class="btn-green" @click="isModalVisible = false">
+        <button type="button" @click="isModalVisible = false">
           Скачать код
         </button>
         <button
           type="button"
-          class="btn-green"
           @click="copyAndToast(finallyText)"
         >
           Скопировать код
         </button>
       </div>
-      <button type="button" class="btn-green" @click="isModalVisible = false">
+      <button type="button"@click="isModalVisible = false">
         ОК
       </button>
     </template>
   </MyDialog>
-
-  <div class="helptext">
-    <p>Для формирования маршрута</p>
-    <p>дрона нажимайте на маркеры,</p>
-    <p>по которым он полетит</p>
-    <p>Для отмены действия</p>
-    <p>нажмите Ctrl + Z</p>
-  </div>
 </template>
 
 <style>
 html {
   background-image: radial-gradient(#383838e2, #222222);
-  border: 3px solid rgb(251, 251, 251);
+  color: white;
 }
 
 :root {
   --side: 70px;
 }
 
+.wraper {
+  display: flex;
+}
+
 .grid {
   display: grid;
   padding: 3px;
@@ -183,14 +184,6 @@ html {
   user-select: none;
 }
 
-.helptext {
-  position: absolute;
-  top: 15px;
-  left: 20px;
-  font-size: 25px;
-  color: rgb(251, 251, 251);
-}
-
 .square {
   width: var(--side); /* Ширина квадрата */
   height: var(--side); /* Высота квадрата */
@@ -198,7 +191,6 @@ html {
   background-size: cover;
   border: 3px solid rgb(251, 251, 251);
   background-color: #e0e0e0;
-  margin-left: 340px;
   cursor: pointer;
   transition: background-color 0.3s;
   overflow-y: scroll;
@@ -206,6 +198,13 @@ html {
   background-blend-mode: multiply;
   background-color: transparent;
   transition: background-color 0.3s ease;
+
+  color:white;
+  text-shadow: 
+    -1px -1px 0 black,
+    1px -1px 0 black,
+    -1px 1px 0 black,
+    1px 1px 0 black;
 }
 
 .square:hover {
@@ -221,7 +220,12 @@ html {
   background-color: rgba(0, 2, 0, 0.638);
 }
 
-.SaveCleanBtn button {
+.actions {
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.actions button {
   border: 2px solid rgb(251, 251, 251);
   padding: 15px 30px;
   font-size: 15px;
@@ -230,15 +234,6 @@ html {
   cursor: pointer;
   margin: 5px;
   transition: 0.3s;
-  position: absolute;
-}
-#saveBtn {
-  top: 320px;
-  left: 15px;
-}
-#cleanBtn {
-  top: 320px;
-  left: 180px;
 }
 
 .modal {
@@ -246,50 +241,11 @@ html {
 }
 
 .modal-body{
-  color: beige;
   size: 20px;
   font-size: 20px;
 }
 
-#headText1 {
-  color: white;
-  font-size: 20px;
-}
-
 .btn-green :hover {
   background-color: rgb(229, 67, 67);
 }
-
-.modal-footer [type = 'button'] {
-  background-color: rgba(255, 255, 255, 0.777);
-  color: rgb(3, 3, 3);
-  border: 0;
-}
-
-.modal-header [type = 'button'] {
-  color: red;
-  font-size: 25px;
-}
-
-#codeIsReady {
-  color: white;
-}
-
-#codeNotReady{
-  color:rgb(248, 8, 8); 
-  size: 20px;
-}
-
-#ReccomendText{
-  color: white;
-}
-
-#idenx{
-  color:white;
-  text-shadow: 
-    -1px -1px 0 black,
-    1px -1px 0 black,
-    -1px 1px 0 black,
-    1px 1px 0 black;
-}
 </style>

src/components/MyDialog.vue

@@ -2,20 +2,20 @@
   <transition name="modal-fade">
     <div class="modal-backdrop" @click="closeModal">
       <div class="modal" @click.stop>
-        <header class="modal-header">
+        <header :class="['modal-header', isSuccess ? 'modal-header-success': 'modal-header-error']">
           <slot name="header">
             <strong>Заголовок по умолчанию</strong>
           </slot>
-          <button type="button" class="btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
+          <button class="btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
             ×
           </button>
         </header>
         <section class="modal-body">
           <slot name="body">Тело по умолчанию</slot>
         </section>
-        <footer class="modal-footer">
+        <footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
           <slot name="footer">
-            <button type="button" class="btn-green" @click="closeModal">Закрыть</button>
+            <button  @click="closeModal">Закрыть</button>
           </slot>
         </footer>
       </div>
@@ -25,6 +25,12 @@
 
 <script setup>
 const emit = defineEmits(['close'])
+const props = defineProps({
+  isSuccess: {
+    type: Boolean,
+    required: true
+  }
+})
 function closeModal() {
     emit('close');
 }
@@ -62,13 +68,37 @@ function closeModal() {
 
 .modal-header {
   border-bottom: 1px solid #eeeeee;
-  color: #4AAE9B;
   justify-content: space-between;
 }
+.modal-header-success {
+  color: #4AAE9B;
+}
+.modal-header-error {
+  color: red;
+}
+
+.modal-header [type = 'button'] {
+  color: red;
+  font-size: 25px;
+}
 
 .modal-footer {
-  border-top: 1px solid #eeeeee;
   justify-content: flex-end;
+  border-top: 1px solid white;
+}
+.modal-footer [type = 'button'] {
+  justify-content: flex-end;
+  border-top: 1px solid white;
+  padding: 5px;
+}
+.modal-footer-success [type = 'button'] {
+  background-color: #4AAE9B;
+  border: none;
+  margin: 3px;
+}
+.modal-footer-error [type = 'button'] {
+  background: red;
+  border: none;
 }
 
 .modal-body {
@@ -82,25 +112,10 @@ function closeModal() {
   padding: 0;
   cursor: pointer;
   font-weight: bold;
-  color: #4AAE9B;
+  color: red;
   background: transparent;
 }
 
-.btn-green {
-  color: white;
-  background: #4AAE9B;
-  border: 1px solid #4AAE9B;
-  border-radius: 2px;
-  padding: 5px;
-  margin: 0 5px;
-}
-.btn-green:hover {
-  background-color: #0fa386;
-}
-.btn-green:active {
-  background-color: #65ebd2;
-}
-
 .modal-fade-enter,
 .modal-fade-leave-active {
   opacity: 0;

src/components/MyDropMenu.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="dropdown">
+    <button @click="toggleDropdown">☰ Меню</button>
+    <ul v-show="isOpen" class="dropdown-menu-left">
+      <li><a href="#">Пункт 1</a></li>
+      <li><a href="#">Пункт 2</a></li>
+      <li><a href="#">Пункт 3</a></li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+
+function toggleDropdown() {
+  isOpen.value = !isOpen.value;
+}
+</script>
+
+<style>
+.dropdown-menu-left {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  background: #fff;
+  border: 1px solid #ccc;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  min-width: 150px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+}
+
+.dropdown-menu-left li a {
+  display: block;
+  padding: 10px 15px;
+  text-decoration: none;
+  color: #333;
+}
+
+.dropdown-menu-left li a:hover {
+  background: #f0f0f0;
+}
+</style>