635 lines
26 KiB
HTML
635 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Webseiten für webseitenlose Unternehmen</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg-primary: #0a0a0a;
|
||
--bg-secondary: #141414;
|
||
--text-primary: #e8e8e8;
|
||
--text-secondary: #888;
|
||
--accent: #ff6b35;
|
||
--accent-hover: #ff8c5a;
|
||
--card-bg: #1a1a1a;
|
||
--border: #2a2a2a;
|
||
}
|
||
|
||
[data-theme="handwerk"] {
|
||
--bg-primary: #1a1410;
|
||
--bg-secondary: #231c16;
|
||
--text-primary: #f5e6d3;
|
||
--text-secondary: #a89080;
|
||
--accent: #d4a574;
|
||
--accent-hover: #e8b989;
|
||
--card-bg: #2a2218;
|
||
--border: #3d2e1f;
|
||
}
|
||
|
||
[data-theme="nature"] {
|
||
--bg-primary: #0d1a0d;
|
||
--bg-secondary: #142214;
|
||
--text-primary: #e8f5e8;
|
||
--text-secondary: #7a9a7a;
|
||
--accent: #4ade80;
|
||
--accent-hover: #6ee7a0;
|
||
--card-bg: #1a2e1a;
|
||
--border: #2a442a;
|
||
}
|
||
|
||
[data-theme="ocean"] {
|
||
--bg-primary: #0a1420;
|
||
--bg-secondary: #0f1a2a;
|
||
--text-primary: #e0f0ff;
|
||
--text-secondary: #6a8aaa;
|
||
--accent: #38bdf8;
|
||
--accent-hover: #60c8f8;
|
||
--card-bg: #152030;
|
||
--border: #253a50;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: 'Inter', -apple-system, sans-serif;
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
min-height: 100vh;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 2rem;
|
||
}
|
||
|
||
header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1.5rem 0;
|
||
border-bottom: 1px solid var(--border);
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.logo {
|
||
font-family: 'Space Grotesk', sans-serif;
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
letter-spacing: -0.5px;
|
||
}
|
||
|
||
.controls {
|
||
display: flex;
|
||
gap: 1rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.lang-btn, .theme-btn {
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--border);
|
||
color: var(--text-primary);
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
font-size: 0.85rem;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.lang-btn:hover, .theme-btn:hover {
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.lang-btn.active, .theme-btn.active {
|
||
background: var(--accent);
|
||
color: #000;
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.hero {
|
||
text-align: center;
|
||
padding: 4rem 0 5rem;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-family: 'Space Grotesk', sans-serif;
|
||
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
||
font-weight: 700;
|
||
line-height: 1.1;
|
||
margin-bottom: 1.5rem;
|
||
letter-spacing: -2px;
|
||
}
|
||
|
||
.hero h1 span {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.hero p {
|
||
font-size: 1.25rem;
|
||
color: var(--text-secondary);
|
||
max-width: 600px;
|
||
margin: 0 auto 2.5rem;
|
||
}
|
||
|
||
.gallery {
|
||
padding: 3rem 0;
|
||
}
|
||
|
||
.gallery h2 {
|
||
font-family: 'Space Grotesk', sans-serif;
|
||
font-size: 2rem;
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.gallery-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
@media (max-width: 1200px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
|
||
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
|
||
@media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
|
||
|
||
.gallery-item {
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 1.5rem;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
color: var(--text-primary);
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.gallery-item:hover {
|
||
border-color: var(--accent);
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 12px 40px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.gallery-icon {
|
||
font-size: 3rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.gallery-item h3 {
|
||
font-family: 'Space Grotesk', sans-serif;
|
||
font-size: 1rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.gallery-item p {
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.features {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1.5rem;
|
||
padding: 2rem 0;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.features { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.feature {
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--border);
|
||
padding: 2rem;
|
||
border-radius: 16px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.feature::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: var(--accent);
|
||
transform: scaleX(0);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.feature:hover {
|
||
border-color: var(--accent);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.feature:hover::before {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.feature h3 {
|
||
font-family: 'Space Grotesk', sans-serif;
|
||
font-size: 1.4rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.feature > p {
|
||
color: var(--text-secondary);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.feature .more {
|
||
display: none;
|
||
margin-top: 1.5rem;
|
||
padding-top: 1.5rem;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
.feature.active .more {
|
||
display: block;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(-10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.feature ul {
|
||
margin: 0.75rem 0 0 1.25rem;
|
||
color: var(--text-secondary);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.feature li {
|
||
margin: 0.5rem 0;
|
||
}
|
||
|
||
.click-hint {
|
||
font-size: 0.8rem;
|
||
color: var(--text-secondary);
|
||
opacity: 0.6;
|
||
margin-top: 1rem;
|
||
display: block;
|
||
}
|
||
|
||
.feature.active .click-hint {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.feature .click-hint::before { content: "» Mehr erfahren"; }
|
||
.feature.active .click-hint::before { content: "« Weniger"; }
|
||
|
||
.pricing {
|
||
text-align: center;
|
||
padding: 4rem 0;
|
||
}
|
||
|
||
.pricing h2 {
|
||
font-family: 'Space Grotesk', sans-serif;
|
||
font-size: 2rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.pricing-text {
|
||
font-size: 1.5rem;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.pricing-note {
|
||
color: var(--text-secondary);
|
||
opacity: 0.7;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.team {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 3rem;
|
||
padding: 3rem 0;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.member {
|
||
text-align: center;
|
||
}
|
||
|
||
.member strong {
|
||
color: var(--accent);
|
||
font-size: 1.1rem;
|
||
display: block;
|
||
}
|
||
|
||
.member span {
|
||
color: var(--text-secondary);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.cta {
|
||
text-align: center;
|
||
padding: 3rem 0 4rem;
|
||
}
|
||
|
||
.cta-button {
|
||
background: var(--accent);
|
||
color: #000;
|
||
padding: 1rem 2.5rem;
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-size: 1.1rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.cta-button:hover {
|
||
background: var(--accent-hover);
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
padding: 2rem;
|
||
border-top: 1px solid var(--border);
|
||
color: var(--text-secondary);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.decoration {
|
||
position: fixed;
|
||
width: 400px;
|
||
height: 400px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
opacity: 0.03;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.decoration.top-right {
|
||
top: -200px;
|
||
right: -200px;
|
||
}
|
||
|
||
.decoration.bottom-left {
|
||
bottom: -200px;
|
||
left: -200px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="decoration top-right"></div>
|
||
<div class="decoration bottom-left"></div>
|
||
|
||
<div class="container">
|
||
<header>
|
||
<div class="logo">thepain.de</div>
|
||
<div class="controls">
|
||
<button class="lang-btn active" data-lang="de">DE</button>
|
||
<button class="lang-btn" data-lang="en">EN</button>
|
||
<span style="color: var(--border);">|</span>
|
||
<button class="theme-btn active" data-theme="dark" title="Dark">⚫</button>
|
||
<button class="theme-btn" data-theme="handwerk" title="Handwerk">🟤</button>
|
||
<button class="theme-btn" data-theme="nature" title="Nature">🟢</button>
|
||
<button class="theme-btn" data-theme="ocean" title="Ocean">🔵</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<h1 data-de="Webseiten für webseitenlose Unternehmen" data-en="Websites for businesses without one">
|
||
Webseiten für <span>webseitenlose</span> Unternehmen
|
||
</h1>
|
||
<p data-de="Ihr Unternehmen verdient einen professionellen Webauftritt. Wir hören zu, verstehen Ihre Vision und setzen sie um – ohne versteckte Kosten." data-en="Your business deserves a professional web presence. We listen, understand your vision, and make it happen – with no hidden costs.">
|
||
Ihr Unternehmen verdient einen professionellen Webauftritt. Wir hören zu, verstehen Ihre Vision und setzen sie um – ohne versteckte Kosten.
|
||
</p>
|
||
</section>
|
||
|
||
<section class="gallery">
|
||
<h2 data-de="Beispiele – So könnte Ihre Webseite aussehen" data-en="Examples – This is how your website could look">Beispiele – So könnte Ihre Webseite aussehen</h2>
|
||
<div class="gallery-grid">
|
||
<a href="demos/baeckerei.html" class="gallery-item">
|
||
<div class="gallery-icon">🍞</div>
|
||
<h3 data-de="Bäckerei" data-en="Bakery">Bäckerei</h3>
|
||
<p data-de="Handwerk & Tradition" data-en="Craft & Tradition">Handwerk & Tradition</p>
|
||
</a>
|
||
<a href="demos/friseur.html" class="gallery-item">
|
||
<div class="gallery-icon">💇</div>
|
||
<h3 data-de="Friseursalon" data-en="Hair Salon">Friseursalon</h3>
|
||
<p data-de="Stil & Persönlichkeit" data-en="Style & Personality">Stil & Persönlichkeit</p>
|
||
</a>
|
||
<a href="demos/autohaus.html" class="gallery-item">
|
||
<div class="gallery-icon">🚗</div>
|
||
<h3 data-de="Autohaus" data-en="Car Dealership">Autohaus</h3>
|
||
<p data-de="Fahrzeuge & Service" data-en="Vehicles & Service">Fahrzeuge & Service</p>
|
||
</a>
|
||
<a href="demos/restaurant.html" class="gallery-item">
|
||
<div class="gallery-icon">🍽️</div>
|
||
<h3 data-de="Restaurant" data-en="Restaurant">Restaurant</h3>
|
||
<p data-de="Gastronomie & Genuss" data-en="Culinary & Enjoyment">Gastronomie & Genuss</p>
|
||
</a>
|
||
<a href="demos/handwerk.html" class="gallery-item">
|
||
<div class="gallery-icon">🪚</div>
|
||
<h3 data-de="Handwerk" data-en="Craftsman">Handwerk</h3>
|
||
<p data-de="Maßarbeit & Qualität" data-en="Custom Work & Quality">Maßarbeit & Qualität</p>
|
||
</a>
|
||
<a href="demos/physiotherapie.html" class="gallery-item">
|
||
<div class="gallery-icon">🏥</div>
|
||
<h3 data-de="Physiotherapie" data-en="Physiotherapy">Physiotherapie</h3>
|
||
<p data-de="Gesundheit & Pflege" data-en="Health & Care">Gesundheit & Pflege</p>
|
||
</a>
|
||
<a href="demos/anwalt.html" class="gallery-item">
|
||
<div class="gallery-icon">⚖️</div>
|
||
<h3 data-de="Kanzlei" data-en="Law Firm">Kanzlei</h3>
|
||
<p data-de="Rechtliche Beratung" data-en="Legal Advice">Rechtliche Beratung</p>
|
||
</a>
|
||
<a href="demos/blumenladen.html" class="gallery-item">
|
||
<div class="gallery-icon">🌷</div>
|
||
<h3 data-de="Blumenladen" data-en="Flower Shop">Blumenladen</h3>
|
||
<p data-de="Floristik & Ästhetik" data-en="Floristry & Aesthetics">Floristik & Ästhetik</p>
|
||
</a>
|
||
<a href="demos/it-dienstleistung.html" class="gallery-item">
|
||
<div class="gallery-icon">💻</div>
|
||
<h3 data-de="IT-Dienstleistung" data-en="IT Services">IT-Dienstleistung</h3>
|
||
<p data-de="Technik & Support" data-en="Technology & Support">Technik & Support</p>
|
||
</a>
|
||
<a href="demos/fitness.html" class="gallery-item">
|
||
<div class="gallery-icon">💪</div>
|
||
<h3 data-de="Fitnessstudio" data-en="Gym">Fitnessstudio</h3>
|
||
<p data-de="Sport & Motivation" data-en="Sports & Motivation">Sport & Motivation</p>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="features">
|
||
<div class="feature" onclick="this.classList.toggle('active')">
|
||
<div class="feature-icon">🎯</div>
|
||
<h3 data-de="Ihr Wunsch im Fokus" data-en="Your Vision First">Ihr Wunsch im Fokus</h3>
|
||
<p data-de="Wir hören zu, verstehen Ihre Anforderungen und setzen Ihre Vision um. Gemeinsam, nicht über Ihren Kopf hinweg." data-en="We listen, understand your requirements, and bring your vision to life. Together, not over your head.">
|
||
Wir hören zu, verstehen Ihre Anforderungen und setzen Ihre Vision um. Gemeinsam, nicht über Ihren Kopf hinweg.
|
||
</p>
|
||
<div class="more">
|
||
<p><strong data-de="Unser Prozess:" data-en="Our Process:">Unser Prozess:</strong></p>
|
||
<ul>
|
||
<li data-de="Persönliches Kennenlernen" data-en="Personal introduction">Persönliches Kennenlernen</li>
|
||
<li data-de="Design-Vorschläge nach Ihren Wünschen" data-en="Design proposals based on your wishes">Design-Vorschläge nach Ihren Wünschen</li>
|
||
<li data-de="Ihr Feedback ist entscheidend" data-en="Your feedback is decisive">Ihr Feedback ist entscheidend</li>
|
||
<li data-de="Anpassungen bis Sie zufrieden sind" data-en="Adjustments until you're satisfied">Anpassungen bis Sie zufrieden sind</li>
|
||
<li data-de="Erst dann geht es online" data-en="Only then it goes online">Erst dann geht es online</li>
|
||
</ul>
|
||
</div>
|
||
<span class="click-hint"></span>
|
||
</div>
|
||
|
||
<div class="feature" onclick="this.classList.toggle('active')">
|
||
<div class="feature-icon">💎</div>
|
||
<h3 data-de="Transparent & fair" data-en="Transparent & fair">Transparent & fair</h3>
|
||
<p data-de="5 € Erstgespräch, bei Vertragsabschluss 10 € Gutschrift. Keine versteckten Kosten." data-en="5 € initial consultation, 10 € credit upon contract signing. No hidden costs.">
|
||
5 € Erstgespräch, bei Vertragsabschluss 10 € Gutschrift. Keine versteckten Kosten.
|
||
</p>
|
||
<div class="more">
|
||
<p><strong data-de="So rechnen wir ab:" data-en="How we calculate:">So rechnen wir ab:</strong></p>
|
||
<ul>
|
||
<li data-de="Erstgespräch: 5 €" data-en="Initial consultation: 5 €">Erstgespräch: 5 €</li>
|
||
<li data-de="Bei Vertrag: 10 € Gutschrift" data-en="Upon contract: 10 € credit">Bei Vertrag: 10 € Gutschrift</li>
|
||
<li data-de="Individuelles Angebot nach Bedarf" data-en="Individual offer based on needs">Individuelles Angebot nach Bedarf</li>
|
||
<li data-de="Hosting 1 Jahr inklusive" data-en="1 year hosting included">Hosting 1 Jahr inklusive</li>
|
||
<li data-de="SSL-Zertifikat inklusive" data-en="SSL certificate included">SSL-Zertifikat inklusive</li>
|
||
</ul>
|
||
</div>
|
||
<span class="click-hint"></span>
|
||
</div>
|
||
|
||
<div class="feature" onclick="this.classList.toggle('active')">
|
||
<div class="feature-icon">📐</div>
|
||
<h3 data-de="Für jedes Gerät" data-en="For every device">Für jedes Gerät</h3>
|
||
<p data-de="Ihre Webseite funktioniert auf jedem Gerät – Smartphone, Tablet, Desktop. Alle Bildschirmgrößen werden gleichwertig berücksichtigt." data-en="Your website works on every device – smartphone, tablet, desktop. All screen sizes are given equal consideration.">
|
||
Ihre Webseite funktioniert auf jedem Gerät – Smartphone, Tablet, Desktop. Alle Bildschirmgrößen werden gleichwertig berücksichtigt.
|
||
</p>
|
||
<div class="more">
|
||
<p><strong data-de="Was Sie bekommen:" data-en="What you get:">Was Sie bekommen:</strong></p>
|
||
<ul>
|
||
<li data-de="Optimiert für alle Geräte" data-en="Optimized for all devices">Optimiert für alle Geräte</li>
|
||
<li data-de="Kein Mobile-First oder Desktop-First" data-en="No Mobile-First or Desktop-First">Kein Mobile-First oder Desktop-First</li>
|
||
<li data-de="Schnelle Ladezeiten" data-en="Fast loading times">Schnelle Ladezeiten</li>
|
||
<li data-de="SEO-Grundoptimierung" data-en="Basic SEO optimization">SEO-Grundoptimierung</li>
|
||
<li data-de="Jedes Gerät hat seine Daseinsberechtigung" data-en="Every device has its place">Jedes Gerät hat seine Daseinsberechtigung</li>
|
||
</ul>
|
||
</div>
|
||
<span class="click-hint"></span>
|
||
</div>
|
||
|
||
<div class="feature" onclick="this.classList.toggle('active')">
|
||
<div class="feature-icon">🛡️</div>
|
||
<h3 data-de="SSL inklusive" data-en="SSL included">SSL inklusive</h3>
|
||
<p data-de="Sichere HTTPS-Verbindung für alle Webseiten inklusive. Ihre Kunden surfen sicher." data-en="Secure HTTPS connection included for all websites. Your customers browse safely.">
|
||
Sichere HTTPS-Verbindung für alle Webseiten inklusive. Ihre Kunden surfen sicher.
|
||
</p>
|
||
<div class="more">
|
||
<p><strong data-de="Sicherheit & Technik:" data-en="Security & Technology:">Sicherheit & Technik:</strong></p>
|
||
<ul>
|
||
<li data-de="Kostenloses SSL-Zertifikat (Let's Encrypt)" data-en="Free SSL certificate (Let's Encrypt)">Kostenloses SSL-Zertifikat (Let's Encrypt)</li>
|
||
<li data-de="Automatische Verlängerung" data-en="Automatic renewal">Automatische Verlängerung</li>
|
||
<li data-de="DDoS-Schutz inklusive" data-en="DDoS protection included">DDoS-Schutz inklusive</li>
|
||
<li data-de="Tägliche Backups" data-en="Daily backups">Tägliche Backups</li>
|
||
<li data-de="99.9% Uptime garantiert" data-en="99.9% uptime guaranteed">99.9% Uptime garantiert</li>
|
||
</ul>
|
||
</div>
|
||
<span class="click-hint"></span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="pricing">
|
||
<h2 data-de="Transparente Preise" data-en="Transparent Pricing">Transparente Preise</h2>
|
||
<p class="pricing-text" data-de="Erstgespräch: 5 €" data-en="Initial consultation: 5 €">Erstgespräch: 5 €</p>
|
||
<p class="pricing-note" data-de="Bei Vertragsabschluss werden 10 € vom Gesamtbetrag abgezogen" data-en="10 € will be deducted from the total upon contract signing">
|
||
Bei Vertragsabschluss werden 10 € vom Gesamtbetrag abgezogen
|
||
</p>
|
||
</section>
|
||
|
||
<section class="team">
|
||
<div class="member">
|
||
<strong>Bracki</strong>
|
||
<span data-de="Operations & Admin" data-en="Operations & Admin">Operations & Admin</span>
|
||
</div>
|
||
<div class="member">
|
||
<strong>Klaus</strong>
|
||
<span data-de="Technik & Server" data-en="Technology & Server">Technik & Server</span>
|
||
</div>
|
||
<div class="member">
|
||
<strong>Meli</strong>
|
||
<span data-de="Entwicklung & Design" data-en="Development & Design">Entwicklung & Design</span>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="cta">
|
||
<a href="mailto:kontakt@thepain.de" class="cta-button" data-de="Jetzt Kontakt aufnehmen" data-en="Get in touch now">
|
||
Jetzt Kontakt aufnehmen
|
||
</a>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>© 2026 thepain.de – <span data-de="Webseiten für webseitenlose Unternehmen" data-en="Websites for businesses without one">Webseiten für webseitenlose Unternehmen</span></p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
// Theme switching
|
||
document.querySelectorAll('.theme-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
document.querySelectorAll('.theme-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
const theme = btn.dataset.theme;
|
||
document.documentElement.setAttribute('data-theme', theme);
|
||
localStorage.setItem('theme', theme);
|
||
});
|
||
});
|
||
|
||
// Load saved theme
|
||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||
document.querySelector(`.theme-btn[data-theme="${savedTheme}"]`)?.classList.add('active');
|
||
|
||
// Language switching
|
||
document.querySelectorAll('.lang-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
const lang = btn.dataset.lang;
|
||
localStorage.setItem('lang', lang);
|
||
applyLanguage(lang);
|
||
});
|
||
});
|
||
|
||
function applyLanguage(lang) {
|
||
document.querySelectorAll('[data-' + lang + ']').forEach(el => {
|
||
el.textContent = el.dataset[lang];
|
||
});
|
||
// Update all demo links with lang parameter
|
||
document.querySelectorAll('.gallery-item').forEach(link => {
|
||
const url = new URL(link.href, window.location.origin);
|
||
url.searchParams.set('lang', lang);
|
||
link.href = url.toString();
|
||
});
|
||
}
|
||
|
||
// Load saved language
|
||
const savedLang = localStorage.getItem('lang') || 'de';
|
||
applyLanguage(savedLang);
|
||
document.querySelector(`.lang-btn[data-lang="${savedLang}"]`)?.classList.add('active');
|
||
</script>
|
||
</body>
|
||
</html> |