103 lines
2.9 KiB
JavaScript
103 lines
2.9 KiB
JavaScript
import { getCurrentLanguage, i18n } from '../../i18n.js'
|
|
|
|
class PageContact extends HTMLElement {
|
|
connectedCallback() {
|
|
this.render()
|
|
this.unsubscribe = i18n.subscribe(() => this.render())
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
if (this.unsubscribe) this.unsubscribe()
|
|
}
|
|
|
|
getContent(lang) {
|
|
const content = {
|
|
de: /* html */`
|
|
<h1>Kontakt</h1>
|
|
<p>Bei Fragen oder Problemen erreichst du uns unter:</p>
|
|
<p><strong>E-Mail:</strong> <a href="mailto:hello@dgray.io">hello@dgray.io</a></p>
|
|
`,
|
|
en: /* html */`
|
|
<h1>Contact</h1>
|
|
<p>For questions or issues, reach us at:</p>
|
|
<p><strong>Email:</strong> <a href="mailto:hello@dgray.io">hello@dgray.io</a></p>
|
|
`,
|
|
fr: /* html */`
|
|
<h1>Contact</h1>
|
|
<p>Pour toute question ou problème, contactez-nous à :</p>
|
|
<p><strong>E-mail :</strong> <a href="mailto:hello@dgray.io">hello@dgray.io</a></p>
|
|
`
|
|
}
|
|
return content[lang] || content.de
|
|
}
|
|
|
|
render() {
|
|
const lang = getCurrentLanguage()
|
|
const backLabel = { de: 'Zurück zur Startseite', en: 'Back to Home', fr: 'Retour à l\'accueil' }
|
|
this.innerHTML = /* html */`
|
|
<div class="legal-page">
|
|
<a href="#/" class="back-link">← ${backLabel[lang] || backLabel.en}</a>
|
|
<div class="legal-content">
|
|
${this.getContent(lang)}
|
|
</div>
|
|
</div>
|
|
`
|
|
}
|
|
}
|
|
|
|
customElements.define('page-contact', PageContact)
|
|
|
|
const style = document.createElement('style')
|
|
style.textContent = /* css */`
|
|
page-contact .legal-page {
|
|
padding: var(--space-lg) 0;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
page-contact .back-link {
|
|
display: inline-block;
|
|
color: var(--color-text-muted);
|
|
text-decoration: none;
|
|
font-size: var(--font-size-sm);
|
|
margin-bottom: var(--space-lg);
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
page-contact .back-link:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
page-contact .legal-content h1 {
|
|
font-size: var(--font-size-2xl);
|
|
margin: 0 0 var(--space-xs);
|
|
}
|
|
|
|
page-contact .legal-content p {
|
|
line-height: 1.7;
|
|
margin: 0 0 var(--space-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
page-contact .legal-content a {
|
|
color: var(--color-text);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
page-contact .legal-content a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
page-contact .legal-page {
|
|
padding: var(--space-md) 0;
|
|
}
|
|
|
|
page-contact .legal-content h1 {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
}
|
|
`
|
|
document.head.appendChild(style)
|