305 lines
7.2 KiB
Svelte
305 lines
7.2 KiB
Svelte
<script>
|
|
import { resolve } from '$app/paths';
|
|
import { t } from '$lib/translations';
|
|
import { appVersion } from '$lib/utils/env';
|
|
|
|
import MailIcon from '$lib/components/icons/MailIcon.svelte';
|
|
import ArrowTopIcon from './icons/ArrowTopIcon.svelte';
|
|
import logo from '$lib/assets/logo-white.webp';
|
|
</script>
|
|
|
|
<footer>
|
|
<div class="footer-main">
|
|
<div class="footer-decoration" aria-hidden="true">
|
|
<svg
|
|
class="footer-decoration__svg"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 1440 480"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
fill="none"
|
|
>
|
|
<g stroke="white" stroke-linecap="round">
|
|
<circle
|
|
cx="1180"
|
|
cy="360"
|
|
r="130"
|
|
stroke-width="2"
|
|
stroke-opacity="0.14"
|
|
stroke-dasharray="10 8"
|
|
/>
|
|
<circle cx="1180" cy="360" r="98" stroke-width="1" stroke-opacity="0.08" />
|
|
<path
|
|
d="M60 100 Q220 20 400 110 T720 80"
|
|
stroke-width="1.5"
|
|
stroke-opacity="0.16"
|
|
stroke-dasharray="6 10"
|
|
/>
|
|
<path
|
|
d="M100 320 Q340 260 560 340 T980 300"
|
|
stroke-width="1.2"
|
|
stroke-opacity="0.12"
|
|
stroke-dasharray="4 12"
|
|
/>
|
|
<path
|
|
d="M200 60 L240 100 M240 60 L200 100"
|
|
stroke-width="1"
|
|
stroke-opacity="0.1"
|
|
/>
|
|
<path
|
|
d="M320 400 L350 430 M350 400 L320 430"
|
|
stroke-width="1"
|
|
stroke-opacity="0.1"
|
|
/>
|
|
<path
|
|
d="M900 140 L930 170 M930 140 L900 170"
|
|
stroke-width="1"
|
|
stroke-opacity="0.08"
|
|
/>
|
|
<circle cx="180" cy="200" r="4" fill="white" fill-opacity="0.12" stroke="none" />
|
|
<circle cx="210" cy="220" r="3" fill="white" fill-opacity="0.1" stroke="none" />
|
|
<circle cx="240" cy="205" r="3.5" fill="white" fill-opacity="0.1" stroke="none" />
|
|
<circle cx="680" cy="90" r="3" fill="white" fill-opacity="0.08" stroke="none" />
|
|
<circle cx="710" cy="105" r="4" fill="white" fill-opacity="0.08" stroke="none" />
|
|
</g>
|
|
<path
|
|
d="M1320 40 L1348 8 L1356 16 L1328 48 Z"
|
|
fill="white"
|
|
fill-opacity="0.1"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="content-container">
|
|
<section class="footer-block">
|
|
<img
|
|
src={logo}
|
|
style="height: 80px; width: auto; margin-lft: -5px;"
|
|
alt="Logotipo da Embroidery Viewer."
|
|
/>
|
|
<p>{$t('footer.slogan')}</p>
|
|
</section>
|
|
<section class="footer-block" aria-labelledby="contact-title">
|
|
<h1 id="contact-title">{$t('footer.contact-title')}</h1>
|
|
<p>{$t('footer.contact-description')}</p>
|
|
|
|
<address class="contact-container">
|
|
<div class="contact-item">
|
|
<MailIcon size={30} />
|
|
|
|
<a href="mailto:leo@leomurca.xyz}" aria-label="leo@leomurca.xyz"
|
|
>leo@leomurca.xyz</a
|
|
>
|
|
</div>
|
|
</address>
|
|
</section>
|
|
<section class="footer-block">
|
|
<h1>{$t('footer.resources')}</h1>
|
|
<nav class="social-container" aria-label="Social media">
|
|
<a href={resolve('/about')}>{$t('footer.about')}</a>
|
|
<a href={resolve('/pes-file-viewer')}>{$t('footer.pesViewer')}</a>
|
|
<a href={resolve('/dst-file-viewer')}>{$t('footer.dstViewer')}</a>
|
|
<a href={resolve('/jef-file-viewer')}>{$t('footer.jefViewer')}</a>
|
|
<a href={resolve('/exp-file-viewer')}>{$t('footer.expViewer')}</a>
|
|
<a href={resolve('/embroidery-viewer-android')}>{$t('footer.androidApp')}</a>
|
|
<a href={resolve('/privacy-policy')}>{$t('footer.privacy.policy')}</a>
|
|
<a href={resolve('/terms-of-service')}
|
|
>{$t('footer.terms.of.service')}</a
|
|
>
|
|
</nav>
|
|
<button
|
|
class="back-to-top-button"
|
|
aria-label={$t('footer.back-to-top.aria-label')}
|
|
onclick={() => scrollTo({ top: 0, behavior: 'smooth' })}
|
|
>
|
|
<ArrowTopIcon size={30} /> {$t('footer.back-to-top.label')}</button
|
|
>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<section class="credits-container">
|
|
<div class="credits-decoration" aria-hidden="true">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 1440 48"
|
|
preserveAspectRatio="none"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M0 24 Q180 8 360 24 T720 24 T1080 24 T1440 24"
|
|
stroke="white"
|
|
stroke-width="1"
|
|
stroke-opacity="0.2"
|
|
stroke-dasharray="5 9"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
Copyright {new Date().getFullYear()}
|
|
|
|
<a href="https://leomurca.xyz" target="_blank" rel="noreferrer"
|
|
>Leonardo Murça</a
|
|
>
|
|
|
|
|
{$t('footer.version')}:
|
|
<span style="font-family: var(--font-bold);">{appVersion()}</span>
|
|
</section>
|
|
</footer>
|
|
|
|
<style>
|
|
footer {
|
|
width: 100%;
|
|
}
|
|
|
|
.footer-main {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
.footer-decoration {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.footer-decoration__svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
#content-container {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 85%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 auto;
|
|
padding: 60px 0 60px 30px;
|
|
scroll-margin-top: 100px;
|
|
color: white;
|
|
gap: 20px;
|
|
}
|
|
|
|
.footer-block {
|
|
width: 100%;
|
|
}
|
|
|
|
h1 {
|
|
font-weight: 700;
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.contact-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
letter-spacing: 0.1rem;
|
|
font-style: normal;
|
|
}
|
|
|
|
.contact-container a {
|
|
color: white;
|
|
}
|
|
|
|
.contact-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.contact-item:hover {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.social-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.social-container a {
|
|
color: white;
|
|
}
|
|
|
|
.social-container a:hover {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.back-to-top-button {
|
|
text-align: center;
|
|
background-color: transparent;
|
|
border-radius: 20px;
|
|
border: none;
|
|
padding: 13px;
|
|
text-decoration: none;
|
|
color: white;
|
|
font-size: 1rem;
|
|
width: 40%;
|
|
margin-top: 30px;
|
|
border: 1px solid white;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.back-to-top-button:hover {
|
|
background-color: #ffffff;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.credits-container {
|
|
position: relative;
|
|
z-index: 1;
|
|
background-color: var(--color-secondary);
|
|
color: white;
|
|
margin: 0 auto;
|
|
padding: 20px 30px;
|
|
padding-left: 9%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.credits-decoration {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 48px;
|
|
pointer-events: none;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.credits-decoration svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.credits-container a {
|
|
color: white;
|
|
border-bottom: 1px solid white;
|
|
}
|
|
|
|
.credits-container a:hover {
|
|
background-color: white;
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
#content-container {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 60px 30px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.back-to-top-button {
|
|
width: 100%;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
}
|
|
}
|
|
</style>
|