From 551c4a3506ddedb1b11851e3d3cbcb4f3ed34e03 Mon Sep 17 00:00:00 2001
From: Nikita Kiselev <kiselev2008@gmail.com>
Date: Thu, 25 Dec 2025 19:06:33 +0300
Subject: [PATCH] feat: add BETA label and UI improvements for TeleCart Pulse
 tab

- Add BETA badge to TeleCart Pulse tab in navigation
- Implement pulsing heartbeat animation for pulse icon
- Add dynamic color change for icon (light red when inactive, bright red when active)
- Add dynamic color change for BETA label (light orange when inactive, bright orange when active)
- Add informational block about TeleCart Pulse in TeleCartPulseView component
- Update App.vue with pulse icon animation and styling
- Update TeleCartPulseView.vue with info block and styling
---
 frontend/admin/src/App.vue                    | 33 ++++++-
 .../admin/src/views/TeleCartPulseView.vue     | 89 ++++++++++++++++++-
 2 files changed, 118 insertions(+), 4 deletions(-)

diff --git a/frontend/admin/src/App.vue b/frontend/admin/src/App.vue
index 135ccba..7b213d1 100644
--- a/frontend/admin/src/App.vue
+++ b/frontend/admin/src/App.vue
@@ -58,7 +58,7 @@
 
       <li :class="{active: route.name === 'pulse'}">
         <RouterLink :to="{name: 'pulse'}">
-          <i class="fa fa-heartbeat"></i> TeleCart Pulse
+          <i class="fa fa-heartbeat pulse-icon tw:text-red-200"></i> TeleCart Pulse <span class="pulse-beta-label tw:ml-1 tw:px-1.5 tw:py-0.5 tw:text-xs tw:font-semibold tw:text-white tw:rounded">BETA</span>
         </RouterLink>
       </li>
 
@@ -152,5 +152,36 @@ onBeforeUnmount(() => {
 
 
 <style scoped>
+@keyframes heartbeat {
+  0%, 100% {
+    transform: scale(1);
+  }
+  10%, 30% {
+    transform: scale(1.1);
+  }
+  20%, 40% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.15);
+  }
+}
 
+.pulse-icon {
+  animation: heartbeat 1.5s ease-in-out infinite;
+  display: inline-block;
+}
+
+.nav-tabs li.active .pulse-icon {
+  color: #ef4444; /* red-500 */
+}
+
+.pulse-beta-label {
+  background-color: #fdba74; /* orange-300 - тусклый */
+  transition: background-color 0.2s ease;
+}
+
+.nav-tabs li.active .pulse-beta-label {
+  background-color: #f97316; /* orange-500 - яркий */
+}
 </style>
diff --git a/frontend/admin/src/views/TeleCartPulseView.vue b/frontend/admin/src/views/TeleCartPulseView.vue
index 40867b9..22af403 100644
--- a/frontend/admin/src/views/TeleCartPulseView.vue
+++ b/frontend/admin/src/views/TeleCartPulseView.vue
@@ -1,5 +1,30 @@
 <template>
   <div class="tw:space-y-6">
+    <div class="telecart-pulse-info">
+      <h3>🚀 Расширьте возможности вашего магазина с <strong><a href="https://telecart.pro/" target="_blank">TeleCart Pulse</a>!</strong></h3>
+
+      <p>
+        Если вы хотите не только показывать товары в Telegram, но и активно общаться с клиентами,
+        рассылать новости, акции и уведомления — для этого есть <strong>TeleCart Pulse</strong>.
+        Это <strong>SaaS-платформа с месячной подпиской</strong>, которая полностью интегрируется
+        с вашим OpenCart-магазином и витриной TeleCart.
+      </p>
+
+      <p><strong>С TeleCart Pulse вы сможете:</strong></p>
+
+      <ul>
+        <li>📣 Делать массовые рассылки сообщений покупателям прямо в Telegram</li>
+        <li>📊 Анализировать эффективность сообщений и взаимодействие клиентов</li>
+        <li>🔗 Легко синхронизироваться с вашей витриной TeleCart — все данные остаются в одном месте</li>
+      </ul>
+
+      <p>
+        🧪 Платформа <strong>TeleCart Pulse находится на ранней стадии тестирования</strong>.
+        Если вам интересно и вы хотите принять участи в тестировании интересно, свяжитесь со мной через
+        <a href="https://t.me/ocstore3" target="_blank">официальную группу TeleCart в Telegram</a>.
+      </p>
+    </div>
+
     <SettingsItem v-if="settings.items.pulse.api_key" label="Статистика за 7 дней">
       <template #default>
         <div v-if="stats" class="tw:space-y-4">
@@ -66,9 +91,9 @@
                type="number"
                placeholder="50"
     >
-      Определяет, сколько событий отправляется в TeleCart Pulse за один запуск фоновой задачи. 
-      При большом значении события обрабатываются быстрее, но увеличивается нагрузка на сервер. 
-      При малом значении нагрузка ниже, но обработка занимает больше времени. 
+      Определяет, сколько событий отправляется в TeleCart Pulse за один запуск фоновой задачи.
+      При большом значении события обрабатываются быстрее, но увеличивается нагрузка на сервер.
+      При малом значении нагрузка ниже, но обработка занимает больше времени.
       Рекомендуемое значение: 50.
     </ItemInput>
   </div>
@@ -95,3 +120,61 @@ onMounted(() => {
   loadStats();
 });
 </script>
+
+<style scoped>
+.telecart-pulse-info {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  padding: 24px;
+  margin-bottom: 24px;
+}
+
+.telecart-pulse-info h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: #212529;
+  line-height: 1.4;
+}
+
+.telecart-pulse-info h3 a {
+  color: #dc3545;
+  font-weight: 700;
+  text-decoration: underline;
+}
+
+.telecart-pulse-info h3 a:hover {
+  text-decoration: none;
+}
+
+.telecart-pulse-info p {
+  margin-bottom: 16px;
+  line-height: 1.6;
+  color: #495057;
+}
+
+.telecart-pulse-info p:last-child {
+  margin-bottom: 0;
+}
+
+.telecart-pulse-info p strong {
+  color: #212529;
+  font-weight: 600;
+}
+
+.telecart-pulse-info ul {
+  margin: 16px 0;
+  padding-left: 24px;
+}
+
+.telecart-pulse-info ul li {
+  color: #495057;
+  position: relative;
+  padding-left: 8px;
+}
+
+.telecart-pulse-info ul li:last-child {
+  margin-bottom: 0;
+}
+</style>