From 91e1e32ff40edd47f44230f15dfa58586e238a45 Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Tue, 19 Nov 2024 01:17:16 +0200
Subject: [PATCH] add donate page

---
 .../images}/qr-code-logo-200x200.jpg          | Bin
 src/components/TheWelcome/TheWelcome.vue      |   2 +-
 src/router/index.ts                           |   6 +
 src/views/DonateView.vue                      | 115 ++++++++++++++++++
 src/views/ReadQRCodeView.vue                  |  16 +--
 5 files changed, 131 insertions(+), 8 deletions(-)
 rename {src/assets => public/images}/qr-code-logo-200x200.jpg (100%)
 create mode 100644 src/views/DonateView.vue

diff --git a/src/assets/qr-code-logo-200x200.jpg b/public/images/qr-code-logo-200x200.jpg
similarity index 100%
rename from src/assets/qr-code-logo-200x200.jpg
rename to public/images/qr-code-logo-200x200.jpg
diff --git a/src/components/TheWelcome/TheWelcome.vue b/src/components/TheWelcome/TheWelcome.vue
index 5a0669f..7cd4658 100644
--- a/src/components/TheWelcome/TheWelcome.vue
+++ b/src/components/TheWelcome/TheWelcome.vue
@@ -5,7 +5,7 @@
       <div class="flex flex-col md:flex-row items-center gap-8">
         <RouterLink to="/">
           <img
-            src="@/assets/qr-code-logo-200x200.jpg"
+            src="/images/qr-code-logo-200x200.jpg"
             width="200"
             height="200"
             alt="QR‑код логотип"
diff --git a/src/router/index.ts b/src/router/index.ts
index b3813a1..5073325 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -27,6 +27,12 @@ const routes = [
     props: true,
   },
 
+  {
+    path: '/donate',
+    name: 'Donate',
+    component: () => import('@/views/DonateView.vue'),
+  },
+
   // {
   //   path: '/create/actions',
   //   name: 'create-actions',
diff --git a/src/views/DonateView.vue b/src/views/DonateView.vue
new file mode 100644
index 0000000..5c6fb2c
--- /dev/null
+++ b/src/views/DonateView.vue
@@ -0,0 +1,115 @@
+<template>
+  <section class="max-w-2xl mx-auto py-8 px-4 text-center">
+    <h1 class="text-2xl font-bold mb-4">Поддержите развитие НаСвязи</h1>
+    <p class="text-gray-600 mb-6">
+      Мы делаем всё, чтобы НаСвязи оставался удобным и полезным. Вы можете помочь нам, поддержав
+      проект на Бусти.
+    </p>
+
+    <!-- Ссылка на Бусти -->
+    <div class="mb-8">
+      <a
+        href="https://boosty.to/hereconnect/donate"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="inline-block bg-orange-500 text-white font-semibold py-3 px-6 rounded-lg shadow hover:bg-orange-600 transition duration-300"
+      >
+        Поддержать через Бусти
+      </a>
+    </div>
+
+    <!-- Рассказать друзьям -->
+    <div class="mb-8">
+      <h2 class="text-xl font-semibold mb-4">Рассказать друзьям</h2>
+      <p class="text-gray-600 mb-4">Поделитесь ссылкой на НаСвязи:</p>
+      <div class="flex justify-center gap-4">
+        <!-- Telegram -->
+        <a
+          :href="telegramShareUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="p-button-rounded p-button-text p-button-lg inline-flex items-center justify-center"
+        >
+          <i class="pi pi-telegram text-xl text-blue-500"></i>
+        </a>
+
+        <!-- WhatsApp -->
+        <a
+          :href="whatsappShareUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="p-button-rounded p-button-text p-button-lg inline-flex items-center justify-center"
+        >
+          <i class="pi pi-whatsapp text-xl text-green-500"></i>
+        </a>
+      </div>
+    </div>
+
+    <!-- Обратная связь -->
+    <!--    <div>-->
+    <!--      <h2 class="text-xl font-semibold mb-4">Оставить отзыв или идею</h2>-->
+    <!--      <p class="text-gray-600 mb-4">Мы рады любым предложениям и обратной связи.</p>-->
+    <!--      <form @submit.prevent="sendFeedback">-->
+    <!--        <div class="mb-4">-->
+    <!--          <InputText v-model="email" class="w-full" placeholder="Ваш email" />-->
+    <!--        </div>-->
+    <!--        <div class="mb-4">-->
+    <!--          <Textarea-->
+    <!--            v-model="message"-->
+    <!--            rows="4"-->
+    <!--            class="w-full"-->
+    <!--            placeholder="Ваше сообщение"-->
+    <!--          ></Textarea>-->
+    <!--        </div>-->
+    <!--        <Button-->
+    <!--          label="Отправить"-->
+    <!--          class="p-button-md"-->
+    <!--          :disabled="!email.trim() || !message.trim()"-->
+    <!--        />-->
+    <!--      </form>-->
+    <!--      <p v-if="success" class="text-green-500 mt-4">Спасибо за ваше сообщение!</p>-->
+    <!--    </div>-->
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import InputText from 'primevue/inputtext'
+import Textarea from 'primevue/textarea'
+import Button from 'primevue/button'
+
+// Локальные состояния
+const email = ref('')
+const message = ref('')
+const success = ref(false)
+
+// Конфигурация для шаринга
+const siteUrl = encodeURIComponent('https://hereconnect.condev.ru')
+const shareText = encodeURIComponent('Попробуйте НаСвязи — удобный способ связаться через QR-код!')
+const shareImage = encodeURIComponent(
+  'https://hereconnect.condev.ru/images/qr-code-logo-200x200.jpg',
+)
+
+// Генерация URL для Telegram
+const telegramShareUrl = `https://t.me/share/url?url=${siteUrl}&text=${shareText}&photo=${shareImage}`
+
+// Генерация URL для WhatsApp
+const whatsappShareUrl = `https://api.whatsapp.com/send?text=${shareText}%0A${siteUrl}%0A${shareImage}`
+
+// Обработка отправки отзыва
+function sendFeedback() {
+  console.log('Отзыв отправлен', { email: email.value, message: message.value })
+  // Имитация отправки данных
+  email.value = ''
+  message.value = ''
+  success.value = true
+  setTimeout(() => (success.value = false), 5000) // Убираем сообщение через 5 секунд
+}
+</script>
+
+<style scoped>
+/* Стили для textarea */
+textarea {
+  resize: none;
+}
+</style>
diff --git a/src/views/ReadQRCodeView.vue b/src/views/ReadQRCodeView.vue
index a6cc9ea..528712f 100644
--- a/src/views/ReadQRCodeView.vue
+++ b/src/views/ReadQRCodeView.vue
@@ -2,12 +2,14 @@
   <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-10">
-        <ReadContactInfo v-if="actions.includes('viewContactInfo')" :contactInfo="contactInfo" />
-        <ReadMessageSender
-          v-if="actions.includes('sendMessage')"
-          :qr_code_uri="qr_code_uri"
-          :predefinedMessages="predefinedMessages"
-        />
+        <template v-for="action in actions">
+          <ReadContactInfo v-if="action === 'viewContactInfo'" :contactInfo="contactInfo" />
+          <ReadMessageSender
+            v-else-if="action === 'sendMessage'"
+            :qr_code_uri="qr_code_uri"
+            :predefinedMessages="predefinedMessages"
+          />
+        </template>
       </section>
     </main>
 
@@ -17,7 +19,7 @@
         <a href="/create" class="underline">Создайте свой QR‑код</a>.
       </p>
       <p class="mt-1">
-        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a href="/support" class="underline"
+        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a href="/donate" class="underline"
           >поддержке</a
         >.
       </p>