feat: add minimal about and contact pages

js/components/app-shell.js

@@ -15,6 +15,8 @@ import './pages/page-notifications.js'
 import './pages/page-not-found.js'
 import './pages/page-privacy.js'
 import './pages/page-terms.js'
+import './pages/page-about.js'
+import './pages/page-contact.js'
 
 class AppShell extends HTMLElement {
     constructor() {
@@ -59,6 +61,8 @@ class AppShell extends HTMLElement {
             .register('/notifications', 'page-notifications')
             .register('/privacy', 'page-privacy')
             .register('/terms', 'page-terms')
+            .register('/about', 'page-about')
+            .register('/contact', 'page-contact')
         
         router.handleRouteChange()
     }

js/components/pages/page-about.js

@@ -0,0 +1,145 @@
+import { getCurrentLanguage, i18n } from '../../i18n.js'
+
+class PageAbout extends HTMLElement {
+    connectedCallback() {
+        this.render()
+        this.unsubscribe = i18n.subscribe(() => this.render())
+    }
+
+    disconnectedCallback() {
+        if (this.unsubscribe) this.unsubscribe()
+    }
+
+    getContent(lang) {
+        const content = {
+            de: /* html */`
+                <h1>Über dgray.io</h1>
+                <p>dgray.io ist eine Privacy-First Kleinanzeigen-Plattform. Nutzer können Anzeigen erstellen und über Ende-zu-Ende verschlüsselte Nachrichten kommunizieren — ohne persönliche Daten preiszugeben.</p>
+                <p>Die Bezahlung erfolgt ausschliesslich über Monero (XMR). Kein KYC, keine E-Mail, kein Tracking.</p>
+
+                <h2>Prinzipien</h2>
+                <ul>
+                    <li>Keine persönlichen Daten erforderlich</li>
+                    <li>Ende-zu-Ende verschlüsselte Kommunikation</li>
+                    <li>Monero (XMR) als einziges Zahlungsmittel</li>
+                    <li>Open Source & selbst gehostet</li>
+                    <li>Betrieben aus der Schweiz</li>
+                </ul>
+            `,
+            en: /* html */`
+                <h1>About dgray.io</h1>
+                <p>dgray.io is a privacy-first classifieds platform. Users can create listings and communicate via end-to-end encrypted messages — without revealing any personal data.</p>
+                <p>Payments are made exclusively in Monero (XMR). No KYC, no email, no tracking.</p>
+
+                <h2>Principles</h2>
+                <ul>
+                    <li>No personal data required</li>
+                    <li>End-to-end encrypted communication</li>
+                    <li>Monero (XMR) as sole payment method</li>
+                    <li>Open source & self-hosted</li>
+                    <li>Operated from Switzerland</li>
+                </ul>
+            `,
+            fr: /* html */`
+                <h1>À propos de dgray.io</h1>
+                <p>dgray.io est une plateforme de petites annonces axée sur la confidentialité. Les utilisateurs peuvent créer des annonces et communiquer via des messages chiffrés de bout en bout — sans révéler de données personnelles.</p>
+                <p>Les paiements s'effectuent exclusivement en Monero (XMR). Pas de KYC, pas d'e-mail, pas de tracking.</p>
+
+                <h2>Principes</h2>
+                <ul>
+                    <li>Aucune donnée personnelle requise</li>
+                    <li>Communication chiffrée de bout en bout</li>
+                    <li>Monero (XMR) comme seul moyen de paiement</li>
+                    <li>Open source & auto-hébergé</li>
+                    <li>Exploité depuis la Suisse</li>
+                </ul>
+            `
+        }
+        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-about', PageAbout)
+
+const style = document.createElement('style')
+style.textContent = /* css */`
+    page-about .legal-page {
+        padding: var(--space-lg) 0;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+
+    page-about .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-about .back-link:hover {
+        color: var(--color-text);
+    }
+
+    page-about .legal-content h1 {
+        font-size: var(--font-size-2xl);
+        margin: 0 0 var(--space-xs);
+    }
+
+    page-about .legal-content h2 {
+        font-size: var(--font-size-lg);
+        margin: var(--space-xl) 0 var(--space-sm);
+        padding-top: var(--space-md);
+        border-top: 1px solid var(--color-border);
+    }
+
+    page-about .legal-content h2:first-of-type {
+        border-top: none;
+    }
+
+    page-about .legal-content p {
+        line-height: 1.7;
+        margin: 0 0 var(--space-sm);
+        color: var(--color-text-secondary);
+    }
+
+    page-about .legal-content ul {
+        margin: 0 0 var(--space-sm);
+        padding-left: var(--space-lg);
+        color: var(--color-text-secondary);
+    }
+
+    page-about .legal-content ul li {
+        line-height: 1.7;
+        margin-bottom: var(--space-xs);
+    }
+
+    @media (max-width: 768px) {
+        page-about .legal-page {
+            padding: var(--space-md) 0;
+        }
+
+        page-about .legal-content h1 {
+            font-size: var(--font-size-xl);
+        }
+
+        page-about .legal-content h2 {
+            font-size: var(--font-size-base);
+        }
+    }
+`
+document.head.appendChild(style)

js/components/pages/page-contact.js

@@ -0,0 +1,102 @@
+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)