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'}">
<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>