125 lines
4.9 KiB
JavaScript
125 lines
4.9 KiB
JavaScript
import { getCurrentLanguage, i18n } from '../../i18n.js'
|
||
|
||
class PageContact extends HTMLElement {
|
||
connectedCallback() {
|
||
this._unsubs = []
|
||
this.render()
|
||
this._unsubs.push(i18n.subscribe(() => this.render()))
|
||
}
|
||
|
||
disconnectedCallback() {
|
||
this._unsubs.forEach(fn => fn())
|
||
this._unsubs = []
|
||
}
|
||
|
||
getContent(lang) {
|
||
const content = {
|
||
de: /* html */`
|
||
<h1>Kontakt</h1>
|
||
<p>Bei Fragen oder Problemen erreichst du uns über:</p>
|
||
<p><strong>SimpleX:</strong> <a href="https://simplex.chat/contact#/?v=2-7&smp=smp10.simplex.im&contact=VE3MWwSpmtCFNQncpK0yBCqV3Q5IMrETUlu4sZXAvhs" target="_blank" rel="noopener">Chat starten</a></p>
|
||
`,
|
||
en: /* html */`
|
||
<h1>Contact</h1>
|
||
<p>For questions or issues, reach us via:</p>
|
||
<p><strong>SimpleX:</strong> <a href="https://simplex.chat/contact#/?v=2-7&smp=smp10.simplex.im&contact=VE3MWwSpmtCFNQncpK0yBCqV3Q5IMrETUlu4sZXAvhs" target="_blank" rel="noopener">Start chat</a></p>
|
||
`,
|
||
fr: /* html */`
|
||
<h1>Contact</h1>
|
||
<p>Pour toute question ou problème, contactez-nous via :</p>
|
||
<p><strong>SimpleX :</strong> <a href="https://simplex.chat/contact#/?v=2-7&smp=smp10.simplex.im&contact=VE3MWwSpmtCFNQncpK0yBCqV3Q5IMrETUlu4sZXAvhs" target="_blank" rel="noopener">Démarrer le chat</a></p>
|
||
`,
|
||
it: /* html */`
|
||
<h1>Contatto</h1>
|
||
<p>Per domande o problemi, contattaci tramite:</p>
|
||
<p><strong>SimpleX:</strong> <a href="https://simplex.chat/contact#/?v=2-7&smp=smp10.simplex.im&contact=VE3MWwSpmtCFNQncpK0yBCqV3Q5IMrETUlu4sZXAvhs" target="_blank" rel="noopener">Avvia chat</a></p>
|
||
`,
|
||
es: /* html */`
|
||
<h1>Contacto</h1>
|
||
<p>Para preguntas o problemas, contáctanos a través de:</p>
|
||
<p><strong>SimpleX:</strong> <a href="https://simplex.chat/contact#/?v=2-7&smp=smp10.simplex.im&contact=VE3MWwSpmtCFNQncpK0yBCqV3Q5IMrETUlu4sZXAvhs" target="_blank" rel="noopener">Iniciar chat</a></p>
|
||
`,
|
||
pt: /* html */`
|
||
<h1>Contato</h1>
|
||
<p>Para dúvidas ou problemas, entre em contato via:</p>
|
||
<p><strong>SimpleX:</strong> <a href="https://simplex.chat/contact#/?v=2-7&smp=smp10.simplex.im&contact=VE3MWwSpmtCFNQncpK0yBCqV3Q5IMrETUlu4sZXAvhs" target="_blank" rel="noopener">Iniciar chat</a></p>
|
||
`,
|
||
ru: /* html */`
|
||
<h1>Контакт</h1>
|
||
<p>По вопросам или проблемам свяжитесь с нами через:</p>
|
||
<p><strong>SimpleX:</strong> <a href="https://simplex.chat/contact#/?v=2-7&smp=smp10.simplex.im&contact=VE3MWwSpmtCFNQncpK0yBCqV3Q5IMrETUlu4sZXAvhs" target="_blank" rel="noopener">Начать чат</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', it: 'Torna alla home', es: 'Volver al inicio', pt: 'Voltar ao Início', ru: 'На главную' }
|
||
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)
|