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,14 +304,11 @@ function onContextMenu(e, item) {
         </div>
 
         <div class="actions">
-            <custom-button class="actions__btn" @click="saveResult">Сохранить</custom-button>
+            <custom-button @click="saveResult">Сохранить</custom-button>
-            <custom-button class="actions__btn" @click="cleanResult">Очистить</custom-button>
+            <custom-button @click="cleanResult">Очистить</custom-button>
-            <custom-button class="actions__btn" @click="cancel">Отменить</custom-button>
+            <custom-button @click="cancel">Отменить</custom-button>
         </div>
         <MyDropMenu />
-    </div>
-
-
         <MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
             <template #header>
                 <strong v-if="listOfTrips.length">Код готов!</strong>
@@ -322,11 +321,15 @@ function onContextMenu(e, item) {
             <template #footer>
                 <div v-if="listOfTrips.length">
                     <button @click="handleDownloadBtn">Скачать код</button>
+                    <button @click="isCodeViewVisible = true">Предпросмотр</button>
                     <button @click="copyAndToast(finallyText)">Скопировать код</button>
-                <button @click="isModalVisible = false">ОК</button>
                 </div>
             </template>
         </MyDialog>
+    </div>
+    <CodeView v-model:show="isCodeViewVisible" :code="finallyText" :show="isCodeViewVisible"/>
+
+
 </template>
 
 <style>

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>

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 {