m/onepager
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: i18n annotations — data-de/data-en + toggle for all 54 custom sites

Browse Source 
Phase 2 of i18n rollout:
- All 54 static custom sites now have data-de/data-en attributes on
  visible text elements with English translations
- i18n.js script tag injected into all sites
- Language toggle button with machine-translation disclaimer added
  to every site's footer area
- Brand names / domain wordplay preserved unchanged in both languages
- 2 dynamic sites (dasbes.de, dumusst.com) skipped — no static HTML
This commit is contained in:
m
2026-04-01 13:19:40 +02:00
parent 846fc04444
commit 5c92a7b021
53 changed files with 1850 additions and 1475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
sites/keinefreun.de/index.html
View File

@@ -462,19 +462,19 @@
<!-- HERO -->
<section class="hero">
<div class="domain">keinefreun.de</div>
<h1>Keine <em>Freunde.</em></h1>
<p class="hero-sub">
<h1 data-de="Keine &lt;em&gt;Freunde.&lt;/em&gt;" data-en="No &lt;em&gt;Friends.&lt;/em&gt;">Keine <em>Freunde.</em></h1>
<p class="hero-sub" data-de="Die offizielle Webseite für alle, die samstags frei haben. Immer." data-en="The official website for everyone who's free on Saturdays. Always.">
Die offizielle Webseite f&uuml;r alle, die samstags frei haben.
Immer.
</p>
<div class="scroll-hint">Runterscrollen</div>
<div class="scroll-hint" data-de="Runterscrollen" data-en="Scroll down">Runterscrollen</div>
</section>
<!-- COUNTER -->
<section class="counter-section">
<div class="counter-label">Aktuelle Freunde-Anzahl</div>
<div class="counter-label" data-de="Aktuelle Freunde-Anzahl" data-en="Current friend count">Aktuelle Freunde-Anzahl</div>
<div class="counter-number" id="counter">0</div>
<div class="counter-footnote">* Stand: gerade eben. Wird st&uuml;ndlich aktualisiert. &Auml;ndert sich nie.</div>
<div class="counter-footnote" data-de="* Stand: gerade eben. Wird stündlich aktualisiert. Ändert sich nie." data-en="* As of: just now. Updated hourly. Never changes.">* Stand: gerade eben. Wird st&uuml;ndlich aktualisiert. &Auml;ndert sich nie.</div>
</section>
<div class="divider"></div>
@@ -483,19 +483,19 @@
<div class="stats">
<div class="stat">
<div class="stat-num">0</div>
<div class="stat-label">Geburtstagseinladungen</div>
<div class="stat-label" data-de="Geburtstagseinladungen" data-en="Birthday invitations">Geburtstagseinladungen</div>
</div>
<div class="stat">
<div class="stat-num">365</div>
<div class="stat-label">Abende allein / Jahr</div>
<div class="stat-label" data-de="Abende allein / Jahr" data-en="Evenings alone / year">Abende allein / Jahr</div>
</div>
<div class="stat">
<div class="stat-num">100%</div>
<div class="stat-label">Sofa-Verf&uuml;gbarkeit</div>
<div class="stat-label" data-de="Sofa-Verfügbarkeit" data-en="Sofa availability">Sofa-Verf&uuml;gbarkeit</div>
</div>
<div class="stat">
<div class="stat-num">&infin;</div>
<div class="stat-label">Netflix ohne Diskussion</div>
<div class="stat-label" data-de="Netflix ohne Diskussion" data-en="Netflix without debate">Netflix ohne Diskussion</div>
</div>
</div>
@@ -503,45 +503,45 @@
<!-- REASONS -->
<section class="reasons">
<h2>Warum man keine Freunde braucht</h2>
<h2 data-de="Warum man keine Freunde braucht" data-en="Why you don't need friends">Warum man keine Freunde braucht</h2>
<div class="reason">
<div class="reason-num">1</div>
<div>
<h3>Niemand sagt deinen Umzug ab</h3>
<p>Weil dich sowieso niemand fragt. Problem gel&ouml;st. Du buchst einfach ein Umzugsunternehmen wie ein normaler Erwachsener.</p>
<h3 data-de="Niemand sagt deinen Umzug ab" data-en="Nobody cancels on your move">Niemand sagt deinen Umzug ab</h3>
<p data-de="Weil dich sowieso niemand fragt. Problem gelöst. Du buchst einfach ein Umzugsunternehmen wie ein normaler Erwachsener." data-en="Because nobody asks you anyway. Problem solved. You just book a moving company like a normal adult.">Weil dich sowieso niemand fragt. Problem gel&ouml;st. Du buchst einfach ein Umzugsunternehmen wie ein normaler Erwachsener.</p>
</div>
</div>
<div class="reason">
<div class="reason-num">2</div>
<div>
<h3>Die Fernbedienung geh&ouml;rt dir</h3>
<p>Kein &bdquo;Lass uns was zusammen schauen&ldquo;. Kein Kompromiss. Staffel 4 True Crime um 3 Uhr nachts? Dein gutes Recht.</p>
<h3 data-de="Die Fernbedienung gehört dir" data-en="The remote control is yours">Die Fernbedienung geh&ouml;rt dir</h3>
<p data-de="Kein &quot;Lass uns was zusammen schauen&quot;. Kein Kompromiss. Staffel 4 True Crime um 3 Uhr nachts? Dein gutes Recht." data-en="No &quot;let's watch something together&quot;. No compromise. Season 4 true crime at 3am? Your absolute right.">Kein &bdquo;Lass uns was zusammen schauen&ldquo;. Kein Kompromiss. Staffel 4 True Crime um 3 Uhr nachts? Dein gutes Recht.</p>
</div>
</div>
<div class="reason">
<div class="reason-num">3</div>
<div>
<h3>Keine Gruppenrestaurant-Buchungen</h3>
<p>&bdquo;Wir sind 7. Nein, 6. Warte, Sandra kommt doch. Also 8.&ldquo; &mdash; Probleme, die du nie haben wirst.</p>
<h3 data-de="Keine Gruppenrestaurant-Buchungen" data-en="No group restaurant bookings">Keine Gruppenrestaurant-Buchungen</h3>
<p data-de="&quot;Wir sind 7. Nein, 6. Warte, Sandra kommt doch. Also 8.&quot; — Probleme, die du nie haben wirst." data-en="&quot;There are 7 of us. No, 6. Wait, Sandra's coming after all. So 8.&quot; — Problems you'll never have.">&bdquo;Wir sind 7. Nein, 6. Warte, Sandra kommt doch. Also 8.&ldquo; &mdash; Probleme, die du nie haben wirst.</p>
</div>
</div>
<div class="reason">
<div class="reason-num">4</div>
<div>
<h3>Spotify Wrapped ist ehrlich</h3>
<p>Niemand urteilt &uuml;ber deine 847 Streams von demselben Song. Deine Daten, deine Scham, dein Geheimnis.</p>
<h3 data-de="Spotify Wrapped ist ehrlich" data-en="Spotify Wrapped is honest">Spotify Wrapped ist ehrlich</h3>
<p data-de="Niemand urteilt über deine 847 Streams von demselben Song. Deine Daten, deine Scham, dein Geheimnis." data-en="Nobody judges your 847 streams of the same song. Your data, your shame, your secret.">Niemand urteilt &uuml;ber deine 847 Streams von demselben Song. Deine Daten, deine Scham, dein Geheimnis.</p>
</div>
</div>
<div class="reason">
<div class="reason-num">5</div>
<div>
<h3>Du sparst ein Verm&ouml;gen</h3>
<p>Keine Geburtstage, keine Hochzeiten, keine Geschenke. Das gesparte Geld investierst du in&nbsp;&mdash; naja, in dich. Wer sonst.</p>
<h3 data-de="Du sparst ein Vermögen" data-en="You save a fortune">Du sparst ein Verm&ouml;gen</h3>
<p data-de="Keine Geburtstage, keine Hochzeiten, keine Geschenke. Das gesparte Geld investierst du in — naja, in dich. Wer sonst." data-en="No birthdays, no weddings, no gifts. You invest the saved money in — well, yourself. Who else.">Keine Geburtstage, keine Hochzeiten, keine Geschenke. Das gesparte Geld investierst du in&nbsp;&mdash; naja, in dich. Wer sonst.</p>
</div>
</div>
</section>
@@ -550,37 +550,37 @@
<!-- TESTIMONIALS -->
<section class="testimonials">
<h2>Was unsere Nicht-Freunde sagen</h2>
<p class="testimonials-sub">Hinweis: Keine dieser Personen existiert.</p>
<h2 data-de="Was unsere Nicht-Freunde sagen" data-en="What our non-friends say">Was unsere Nicht-Freunde sagen</h2>
<p class="testimonials-sub" data-de="Hinweis: Keine dieser Personen existiert." data-en="Note: None of these people exist.">Hinweis: Keine dieser Personen existiert.</p>
<div class="testimonial-grid">
<div class="testimonial">
<blockquote>
<blockquote data-de="Seit ich auf keinefreun.de bin, habe ich endlich akzeptiert, dass meine Zimmerpflanze mein engster Vertrauter ist. Sie hört zu. Sie urteilt nicht. Sie stirbt langsam." data-en="Since I've been on keinefreun.de, I've finally accepted that my houseplant is my closest confidant. It listens. It doesn't judge. It's slowly dying.">
Seit ich auf keinefreun.de bin, habe ich endlich akzeptiert, dass meine Zimmerpflanze mein engster Vertrauter ist. Sie h&ouml;rt zu. Sie urteilt nicht. Sie stirbt langsam.
</blockquote>
<div class="testimonial-author">
&mdash; Thorsten, 34
<span>Softwareentwickler &amp; Ficus-Besitzer</span>
<span data-de="Softwareentwickler &amp; Ficus-Besitzer" data-en="Software developer &amp; ficus owner">Softwareentwickler &amp; Ficus-Besitzer</span>
</div>
</div>
<div class="testimonial">
<blockquote>
<blockquote data-de="Ich habe mir selbst eine Sprachnachricht geschickt, um zu testen, ob mein Handy noch funktioniert. Tut es. Schreibt nur niemand." data-en="I sent myself a voice message to test whether my phone still works. It does. Nobody's just writing.">
Ich habe mir selbst eine Sprachnachricht geschickt, um zu testen, ob mein Handy noch funktioniert. Tut es. Schreibt nur niemand.
</blockquote>
<div class="testimonial-author">
&mdash; Melanie, 29
<span>Senior Alleinsein-Consultant</span>
<span data-de="Senior Alleinsein-Consultant" data-en="Senior Being-Alone Consultant">Senior Alleinsein-Consultant</span>
</div>
</div>
<div class="testimonial">
<blockquote>
<blockquote data-de="Mein Therapeut hat mich gefragt, wie es meinem sozialen Umfeld geht. Ich habe gelacht. Er hat nicht gelacht. Der Termin wurde verlängert." data-en="My therapist asked how my social circle was doing. I laughed. He didn't laugh. The appointment was extended.">
Mein Therapeut hat mich gefragt, wie es meinem sozialen Umfeld geht. Ich habe gelacht. Er hat nicht gelacht. Der Termin wurde verl&auml;ngert.
</blockquote>
<div class="testimonial-author">
&mdash; Jens, 41
<span>Hobbyphilosoph &amp; Tiefk&uuml;hlpizza-Gourmet</span>
<span data-de="Hobbyphilosoph &amp; Tiefkühlpizza-Gourmet" data-en="Hobby philosopher &amp; frozen pizza gourmet">Hobbyphilosoph &amp; Tiefk&uuml;hlpizza-Gourmet</span>
</div>
</div>
</div>
@@ -590,26 +590,26 @@
<!-- FAQ -->
<section class="faq">
<h2>H&auml;ufig gestellte Fragen</h2>
<h2 data-de="Häufig gestellte Fragen" data-en="Frequently asked questions">H&auml;ufig gestellte Fragen</h2>
<div class="faq-item">
<div class="faq-q">Ist das hier ernst gemeint?</div>
<div class="faq-a">Definiere &bdquo;ernst&ldquo;. Definiere &bdquo;gemeint&ldquo;. Definiere &bdquo;hier&ldquo;. Siehst du, genau deshalb hat man keine Freunde.</div>
<div class="faq-q" data-de="Ist das hier ernst gemeint?" data-en="Is this meant seriously?">Ist das hier ernst gemeint?</div>
<div class="faq-a" data-de="Definiere &quot;ernst&quot;. Definiere &quot;gemeint&quot;. Definiere &quot;hier&quot;. Siehst du, genau deshalb hat man keine Freunde." data-en="Define &quot;seriously&quot;. Define &quot;meant&quot;. Define &quot;this&quot;. See, that's exactly why you have no friends.">Definiere &bdquo;ernst&ldquo;. Definiere &bdquo;gemeint&ldquo;. Definiere &bdquo;hier&ldquo;. Siehst du, genau deshalb hat man keine Freunde.</div>
</div>
<div class="faq-item">
<div class="faq-q">Kann ich hier Freunde finden?</div>
<div class="faq-a">Nein. Das ist explizit nicht der Zweck dieser Seite. Bitte lies den Domainnamen noch einmal langsam vor.</div>
<div class="faq-q" data-de="Kann ich hier Freunde finden?" data-en="Can I find friends here?">Kann ich hier Freunde finden?</div>
<div class="faq-a" data-de="Nein. Das ist explizit nicht der Zweck dieser Seite. Bitte lies den Domainnamen noch einmal langsam vor." data-en="No. That is explicitly not the purpose of this page. Please read the domain name aloud once more, slowly.">Nein. Das ist explizit nicht der Zweck dieser Seite. Bitte lies den Domainnamen noch einmal langsam vor.</div>
</div>
<div class="faq-item">
<div class="faq-q">Ich habe aber Freunde?</div>
<div class="faq-a">Das ist keine Frage. Und wir glauben dir nicht. Aber sch&ouml;n f&uuml;r dich.</div>
<div class="faq-q" data-de="Ich habe aber Freunde?" data-en="But I do have friends?">Ich habe aber Freunde?</div>
<div class="faq-a" data-de="Das ist keine Frage. Und wir glauben dir nicht. Aber schön für dich." data-en="That's not a question. And we don't believe you. But good for you.">Das ist keine Frage. Und wir glauben dir nicht. Aber sch&ouml;n f&uuml;r dich.</div>
</div>
<div class="faq-item">
<div class="faq-q">Gibt es einen Newsletter?</div>
<div class="faq-a">An wen sollten wir den schicken? Genau.</div>
<div class="faq-q" data-de="Gibt es einen Newsletter?" data-en="Is there a newsletter?">Gibt es einen Newsletter?</div>
<div class="faq-a" data-de="An wen sollten wir den schicken? Genau." data-en="Who would we send it to? Exactly.">An wen sollten wir den schicken? Genau.</div>
</div>
</section>
@@ -617,17 +617,19 @@
<!-- CTA -->
<section class="cta">
<h2>Bereit, niemanden kennenzulernen?</h2>
<p>Tritt unserer Community bei. Sie besteht aus dir. Das war's.</p>
<a class="btn" href="mailto:niemand@keinefreun.de">Kontakt (lol)</a>
<h2 data-de="Bereit, niemanden kennenzulernen?" data-en="Ready to meet nobody?">Bereit, niemanden kennenzulernen?</h2>
<p data-de="Tritt unserer Community bei. Sie besteht aus dir. Das war's." data-en="Join our community. It consists of you. That's it.">Tritt unserer Community bei. Sie besteht aus dir. Das war's.</p>
<a class="btn" href="mailto:niemand@keinefreun.de" data-de="Kontakt (lol)" data-en="Contact (lol)">Kontakt (lol)</a>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-domain">keinefreun.de</div>
<p>Ein Projekt von jemandem ohne Freunde</p>
<p style="margin-top: 0.5rem; opacity: 0.4;">&copy; 2026 &mdash; Alle Rechte vorbehalten. Nicht dass es jemanden interessiert.</p>
<p data-de="Ein Projekt von jemandem ohne Freunde" data-en="A project by someone without friends">Ein Projekt von jemandem ohne Freunde</p>
<p style="margin-top: 0.5rem; opacity: 0.4;" data-de="© 2026 — Alle Rechte vorbehalten. Nicht dass es jemanden interessiert." data-en="© 2026 — All rights reserved. Not that anyone cares.">&copy; 2026 &mdash; Alle Rechte vorbehalten. Nicht dass es jemanden interessiert.</p>
<button data-i18n-toggle style="margin-top:16px;background:none;border:1px solid var(--border);color:var(--text-dim);padding:6px 14px;border-radius:6px;font-size:0.75rem;cursor:pointer;font-family:inherit;letter-spacing:0.06em;">EN</button>
</footer>
<script src="/shared/i18n.js"></script>
</body>
</html>