From eec6d2d4398858761c0fe0aeb21578091772965b Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Sat, 21 Mar 2026 13:32:15 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B5=D0=B4=D0=BF=D1=80=D0=BE=D1=81=D0=BC=D0=BE=D1=82?=
 =?UTF-8?q?=D1=80=20=D0=BA=D0=BE=D0=B4=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                 | 47 ++++++++++++++++++++-----------------
 src/components/CodeView.vue | 40 +++++++++++++++++++++++++++++++
 src/components/MyDialog.vue |  2 +-
 3 files changed, 66 insertions(+), 23 deletions(-)
 create mode 100644 src/components/CodeView.vue

diff --git a/src/App.vue b/src/App.vue
index c77839a..d46a8e0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,12 +7,14 @@ import MyDropMenu from "@/components/MyDropMenu.vue";
 import copyToclipboard from "@/shared/copyToclipboard";
 import ContextMenu from "@imengyu/vue3-context-menu";
 import CustomButton from '@/components/UI/CustomButton.vue'
+import CodeView from "@/components/CodeView.vue";
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
 const listOfTrips = ref([]);
 const isModalVisible = ref(false);
-let finallyText = ref("");
+const isCodeViewVisible = ref(false);
+const finallyText = ref("");
 
 onMounted(() => {
     for (let i = 0; i < 100; i++) {
@@ -293,7 +295,7 @@ function onContextMenu(e, item) {
 </script>
 
 <template>
-    <div class="wraper">
+    <div v-if="!isCodeViewVisible" 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})` }">
@@ -302,31 +304,32 @@ function onContextMenu(e, item) {
         </div>
 
         <div class="actions">
-            <custom-button class="actions__btn" @click="saveResult">Сохранить</custom-button>
-            <custom-button class="actions__btn" @click="cleanResult">Очистить</custom-button>
-            <custom-button class="actions__btn" @click="cancel">Отменить</custom-button>
+            <custom-button @click="saveResult">Сохранить</custom-button>
+            <custom-button @click="cleanResult">Очистить</custom-button>
+            <custom-button @click="cancel">Отменить</custom-button>
         </div>
         <MyDropMenu />
+        <MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
+            <template #header>
+                <strong v-if="listOfTrips.length">Код готов!</strong>
+                <strong v-else>Код не готов!</strong>
+            </template>
+            <main>
+                <p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
+                <p v-else>Выстройте маршрут перед сохранением кода.</p>
+            </main>
+            <template #footer>
+                <div v-if="listOfTrips.length">
+                    <button @click="handleDownloadBtn">Скачать код</button>
+                    <button @click="isCodeViewVisible = true">Предпросмотр</button>
+                    <button @click="copyAndToast(finallyText)">Скопировать код</button>
+                </div>
+            </template>
+        </MyDialog>
     </div>
+    <CodeView v-model:show="isCodeViewVisible" :code="finallyText" :show="isCodeViewVisible"/>
 
 
-    <MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
-        <template #header>
-            <strong v-if="listOfTrips.length">Код готов!</strong>
-            <strong v-else>Код не готов!</strong>
-        </template>
-        <main>
-            <p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
-            <p v-else>Выстройте маршрут перед сохранением кода.</p>
-        </main>
-        <template #footer>
-            <div v-if="listOfTrips.length">
-                <button @click="handleDownloadBtn">Скачать код</button>
-                <button @click="copyAndToast(finallyText)">Скопировать код</button>
-                <button @click="isModalVisible = false">ОК</button>
-            </div>
-        </template>
-    </MyDialog>
 </template>
 
 <style>
diff --git a/src/components/CodeView.vue b/src/components/CodeView.vue
new file mode 100644
index 0000000..983c728
--- /dev/null
+++ b/src/components/CodeView.vue
@@ -0,0 +1,40 @@
+<script setup>
+import CustomButton from '@/components/UI/CustomButton.vue'
+
+const props = defineProps({
+    code: {
+        required: true,
+        type: String
+    },
+    show: {
+        type: Boolean,
+        default: false
+    }
+})
+console.log(props.code)
+</script>
+
+<template>
+    <div class="code-view" v-if="show">
+        <CustomButton @click.stop="$emit('update:show', false)">Вернуться к сохранению сгенерированного кода</CustomButton>
+        <pre>
+            {{ code }}
+        </pre>
+        <CustomButton @click.stop="$emit('update:show', false)">Вернуться к сохранению сгенерированного кода</CustomButton>
+    </div>
+</template>
+
+<style scoped>
+.code-view {
+    position: fixed;
+    top: 0;
+    left: 0;
+    //background-image: radial-gradient(#23aae3e2, #222222);
+    background-color: #222222;
+    overflow: auto;
+    color: #eeeeee;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/MyDialog.vue b/src/components/MyDialog.vue
index 1c54557..68f556a 100644
--- a/src/components/MyDialog.vue
+++ b/src/components/MyDialog.vue
@@ -52,7 +52,7 @@ const props = defineProps({
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 999;
+    z-index: 998;
 }
 
 .modal {