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
This commit is contained in:
2025-12-25 19:06:33 +03:00
parent 60c0c832e0
commit 551c4a3506
2 changed files with 118 additions and 4 deletions

View File

@@ -58,7 +58,7 @@
<li :class="{active: route.name === 'pulse'}"> <li :class="{active: route.name === 'pulse'}">
<RouterLink :to="{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> </RouterLink>
</li> </li>
@@ -152,5 +152,36 @@ onBeforeUnmount(() => {
<style scoped> <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> </style>

View File

@@ -1,5 +1,30 @@
<template> <template>
<div class="tw:space-y-6"> <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 дней"> <SettingsItem v-if="settings.items.pulse.api_key" label="Статистика за 7 дней">
<template #default> <template #default>
<div v-if="stats" class="tw:space-y-4"> <div v-if="stats" class="tw:space-y-4">
@@ -95,3 +120,61 @@ onMounted(() => {
loadStats(); loadStats();
}); });
</script> </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>