move create into CreateView.vue

2024-11-19 15:50:15 +02:00
parent 00f7963c8a
commit fc7afb2d12
7 changed files with 92 additions and 88 deletions
@@ -1,37 +1,51 @@
 <template>
-  <div class="max-w-lg mx-auto py-6 px-4 md:px-6">
-    <section class="content text-center">
-      <h2 class="text-xl font-semibold mb-4">Ваш QR‑код готов</h2>
-      <p class="text-gray-600 mb-4">Сохраните его и ознакомьтесь с инструкциями по размещению.</p>
+  <div class="flex flex-col min-h-screen">
+    <main class="flex-grow flex items-center justify-center py-6 px-4 md:px-6">
+      <section class="max-w-lg w-full flex flex-col gap-1">
+        <h2 class="text-xl font-semibold mb-4">Ваш QR‑код готов</h2>
+        <p class="text-gray-600 mb-4">Сохраните его и ознакомьтесь с инструкциями по размещению.</p>

-      <!-- Рендер QR‑кода -->
-      <div v-if="!loading && svgUrl" class="border p-4 bg-white rounded-lg mb-6">
-        <img :src="svgUrl" alt="QR‑код" />
-      </div>
+        <!-- Рендер QR‑кода -->
+        <div v-if="!loading && svgUrl" class="border p-4 bg-white rounded-lg mb-6">
+          <img :src="svgUrl" alt="QR‑код" />
+        </div>

-      <!-- Сообщение об ошибке -->
-      <p v-if="error" class="text-red-500 mt-4">{{ error }}</p>
-      <p v-if="loading" class="text-gray-500 mt-4">Загрузка...</p>
+        <!-- Сообщение об ошибке -->
+        <p v-if="error" class="text-red-500 mt-4">{{ error }}</p>
+        <p v-if="loading" class="text-gray-500 mt-4">Загрузка...</p>

-      <!-- Кнопки для скачивания -->
-      <div v-if="!loading && !error" class="flex flex-row gap-4 justify-center">
-        <Button
-          v-if="svgUrl"
-          label="Скачать SVG"
-          icon="pi pi-download"
-          class="p-button-sm"
-          :href="svgUrl"
-          :download="`${sanitizedFileName}.svg`"
-          as="a"
-        />
-        <Button
-          label="Скачать PNG"
-          icon="pi pi-download"
-          class="p-button-sm p-button-outlined"
-          @click="downloadPng"
-        />
-      </div>
-    </section>
+        <!-- Кнопки для скачивания -->
+        <div v-if="!loading && !error" class="flex flex-row gap-4 justify-center">
+          <Button
+            v-if="svgUrl"
+            label="Скачать SVG"
+            icon="pi pi-download"
+            class="p-button-sm"
+            :href="svgUrl"
+            :download="`${sanitizedFileName}.svg`"
+            as="a"
+          />
+          <Button
+            label="Скачать PNG"
+            icon="pi pi-download"
+            class="p-button-sm p-button-outlined"
+            @click="downloadPng"
+          />
+        </div>
+      </section>
+    </main>
+
+    <footer class="bg-gray-100 text-center py-4 border-t text-sm text-gray-700">
+      <p>
+        Нужен еще один?
+        <a href="/create" class="underline">Создайте QR‑код</a>.
+      </p>
+      <p class="mt-1">
+        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a href="/donate" class="underline"
+          >поддержке</a
+        >.
+      </p>
+    </footer>
  </div>
 </template>