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:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user