embroidery-viewer/src/lib/components/AnnouncementBar.svelte

69 lines
1.1 KiB
Svelte

<script>
import { t } from '$lib/translations';
const trackEvent = () => {
// @ts-ignore
window.hk?.event?.('install_now');
};
</script>
<div class="bar">
<div class="content">
<p>
{$t('announcement.message')}
<a
href="https://play.google.com/store/apps/details?id=xyz.embroideryviewer.android"
target="_blank"
rel="noopener noreferrer"
class="cta"
onclick={trackEvent}
>
{$t('announcement.cta-text')}
</a>
</p>
</div>
</div>
<style>
.bar {
width: 100%;
background: #06345f;
color: white;
font-size: 0.95rem;
z-index: 3;
}
.content {
max-width: 1200px;
margin: 0 auto;
padding: 0.6rem 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
p {
margin: 0;
line-height: 1.4;
}
.cta {
margin-left: 0.5rem;
font-weight: 600;
text-decoration: underline;
color: #ffffff;
white-space: nowrap;
}
.cta:hover {
opacity: 0.85;
}
@media (max-width: 640px) {
.content {
flex-direction: column;
align-items: flex-start;
}
}
</style>