From 9766c245a357db1fb73ccdda1809af7e634b1123 Mon Sep 17 00:00:00 2001 From: webklar-system Date: Thu, 1 Oct 2026 20:02:15 +0000 Subject: [PATCH] Testseite: mehrere Unterseiten, Tabs, Galerie, Preise, Formular --- app.js | 46 ++++++++++++++++++++++++++ impressum.html | 31 ++++++++++++++++++ index.html | 85 ++++++++++++++++++++++++++++++++++--------------- kontakt.html | 39 +++++++++++++++++++++++ leistungen.html | 53 ++++++++++++++++++++++++++++++ preise.html | 40 +++++++++++++++++++++++ style.css | 55 ++++++++++++++++++++++++++++++++ ueber-uns.html | 45 ++++++++++++++++++++++++++ 8 files changed, 368 insertions(+), 26 deletions(-) create mode 100644 app.js create mode 100644 impressum.html create mode 100644 kontakt.html create mode 100644 leistungen.html create mode 100644 preise.html create mode 100644 style.css create mode 100644 ueber-uns.html diff --git a/app.js b/app.js new file mode 100644 index 0000000..15e1b70 --- /dev/null +++ b/app.js @@ -0,0 +1,46 @@ +document.addEventListener('DOMContentLoaded', () => { + const page = document.body.dataset.page + document.querySelectorAll('nav ul a').forEach(a => { if (a.dataset.page === page) a.classList.add('active') }) + const menu = document.querySelector('.menu-btn') + if (menu) menu.addEventListener('click', () => document.querySelector('nav ul').classList.toggle('open')) + + document.querySelectorAll('.tabs').forEach(tabs => { + const panels = document.querySelectorAll(tabs.dataset.panels) + tabs.querySelectorAll('button').forEach((b, i) => b.addEventListener('click', () => { + tabs.querySelectorAll('button').forEach(x => x.classList.remove('on')) + panels.forEach(p => p.classList.remove('on')) + b.classList.add('on'); panels[i].classList.add('on') + })) + }) + + const box = document.querySelector('.lightbox') + if (box) { + document.querySelectorAll('.gallery button').forEach(b => b.addEventListener('click', () => { + const d = box.querySelector('div'); d.textContent = b.textContent; d.style.background = b.style.background + box.classList.add('on') + })) + box.addEventListener('click', () => box.classList.remove('on')) + } + + const yearly = document.querySelector('#yearly') + if (yearly) yearly.addEventListener('change', () => { + document.querySelectorAll('[data-month]').forEach(el => { + const m = Number(el.dataset.month) + el.textContent = yearly.checked ? `${Math.round(m * 10)} € / Jahr` : `${m} € / Monat` + }) + }) + + const counter = document.querySelector('.counter') + if (counter) { + const out = counter.querySelector('output'); let n = 0 + counter.querySelector('[data-step="-1"]').addEventListener('click', () => { n = Math.max(0, n - 1); out.value = n }) + counter.querySelector('[data-step="1"]').addEventListener('click', () => { n += 1; out.value = n }) + } + + const form = document.querySelector('#kontakt-form') + if (form) form.addEventListener('submit', e => { + e.preventDefault() + document.querySelector('.notice').classList.add('on') + form.reset() + }) +}) diff --git a/impressum.html b/impressum.html new file mode 100644 index 0000000..8ea7860 --- /dev/null +++ b/impressum.html @@ -0,0 +1,31 @@ + + + + + +Impressum · Test-Website + + + + + +

Impressum

+
+

Dies ist eine Testseite ohne echtes Unternehmen. Verantwortlich für den Betrieb: WEBklar GbR, siehe webklar.com/impressum.

+
+ + + diff --git a/index.html b/index.html index b1a10df..a6b42f2 100644 --- a/index.html +++ b/index.html @@ -3,33 +3,66 @@ -Test-Website · WEBklar - +Start · Test-Website + + - -
-

Test-Website

-

Eine kleine Beispielseite, um die Projekt-Vorschau im WEBklar-Kundenbereich zu testen.

- Mehr erfahren + + +
+

Willkommen auf der Test-Website

+

Eine Beispielseite mit mehreren Unterseiten, Buttons, Tabs, Galerie und Formular – zum Ausprobieren der Website-Analyse.

+ Leistungen ansehen + Kontakt aufnehmen
-
-

Schnell

Statische Seite, sofort ausgeliefert.

-

Responsiv

Passt sich Handy, Tablet und Desktop an.

-

Vorschau

Jeder Git-Push aktualisiert diese Seite automatisch.

-
-
Testprojekt · WEBklar
+
+
+
120+zufriedene Testkunden
+
24 hAntwortzeit
+
4,9Sterne (erfunden)
+
+
+
+

Was möchtest du wissen?

+
+ +
+

Privatkunden

Persönliche Beratung, faire Preise, schnelle Umsetzung.

+

Firmen

Websites, Shops und Wartung aus einer Hand.

+

Vereine

Vergünstigte Pakete für gemeinnützige Vereine.

+
+
+

Galerie

+

Klick auf ein Bild, um es groß anzuzeigen.

+
+ + + + + + +
+
+
+
+

Häufige Fragen

+
Ist das eine echte Firma?

Nein, das ist eine Testseite von WEBklar.

+
Wofür ist die Seite da?

Um Klicks, Seitenaufrufe und die Heatmap der Website-Analyse zu testen.

+
Werden Formulardaten gespeichert?

Nein, das Kontaktformular verschickt nichts.

+
+ diff --git a/kontakt.html b/kontakt.html new file mode 100644 index 0000000..b22c0bb --- /dev/null +++ b/kontakt.html @@ -0,0 +1,39 @@ + + + + + +Kontakt · Test-Website + + + + + +

Kontakt

Das Formular ist nur zum Testen – es wird nichts gesendet oder gespeichert.

+
+
Danke! (Test – es wurde nichts verschickt.)
+
+ + + + +
+
+ + + diff --git a/leistungen.html b/leistungen.html new file mode 100644 index 0000000..8b032f9 --- /dev/null +++ b/leistungen.html @@ -0,0 +1,53 @@ + + + + + +Leistungen · Test-Website + + + + + +

Leistungen

Wähle eine Kategorie und sieh dir die Details an.

+
+
+ +
+
+

Onepager

Eine Seite, alles Wichtige auf einen Blick.

+

Mehrseitige Website

Für Firmen mit mehr Inhalt.

+

Online-Shop

Produkte verkaufen, einfach verwaltet.

+
+
+

Updates

Regelmäßige Aktualisierungen.

+

Änderungen

Texte und Bilder tauschen lassen.

+
+
+

Server in Deutschland

Schnell und datenschutzfreundlich.

+

SSL inklusive

Verschlüsselte Verbindung.

+
+
+

Google-Profil

Besser gefunden werden.

+

Ladezeit

Schnelle Seiten ranken besser.

+
+
+
+ Zu den Preisen +
+ + + diff --git a/preise.html b/preise.html new file mode 100644 index 0000000..5664119 --- /dev/null +++ b/preise.html @@ -0,0 +1,40 @@ + + + + + +Preise · Test-Website + + + + + +

Preise

Alle Preise sind ausgedacht und nur zum Testen.

+
+ +
+

Basis

19 € / Monat

1 Seite, Hosting

Auswählen
+

Plus

39 € / Monat

5 Seiten, Hosting, Wartung

Auswählen
+

Profi

79 € / Monat

Unbegrenzte Seiten, Shop

Auswählen
+
+
+
+

Wie viele Seiten brauchst du?

+
0Seiten
+
+ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..cd53a00 --- /dev/null +++ b/style.css @@ -0,0 +1,55 @@ +:root{--bg:#0f0b1f;--card:#1b1533;--card2:#241c44;--text:#f4f1ff;--muted:#b7aed6;--accent:#7c5cff;--ok:#3ecf8e} +*{box-sizing:border-box} +html{scroll-behavior:smooth} +body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6} +a{color:#b9a8ff} +nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:rgba(15,11,31,.9);backdrop-filter:blur(8px);border-bottom:1px solid #2c2450} +nav .logo{font-weight:800;color:var(--text);text-decoration:none} +nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap} +nav ul a{display:block;padding:6px 12px;border-radius:999px;color:var(--muted);text-decoration:none} +nav ul a.active,nav ul a:hover{background:var(--card2);color:var(--text)} +.menu-btn{display:none;background:none;border:1px solid #3a3066;color:var(--text);border-radius:8px;padding:6px 10px;font-size:1rem} +@media (max-width:640px){.menu-btn{display:block}nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg);padding:10px 20px;border-bottom:1px solid #2c2450}nav ul.open{display:flex}} +header.hero{padding:72px 20px 56px;text-align:center;background:radial-gradient(circle at 50% 0,#3a2a85 0,var(--bg) 70%)} +h1{font-size:clamp(2rem,6vw,3.2rem);margin:0 0 12px;line-height:1.2} +.hero p{color:var(--muted);max-width:600px;margin:0 auto 28px} +.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 24px;border-radius:999px;text-decoration:none;font-weight:600;border:0;cursor:pointer;font-size:1rem} +.btn.ghost{background:transparent;border:1px solid var(--accent);color:var(--text)} +.wrap{max-width:1000px;margin:0 auto;padding:32px 20px} +h2{font-size:1.6rem;margin:0 0 16px} +.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} +.card{background:var(--card);border-radius:16px;padding:22px} +.card h3{margin:0 0 6px;font-size:1.1rem} +.card p{margin:0;color:var(--muted);font-size:.95rem} +.muted{color:var(--muted)} +.stats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));text-align:center} +.stats b{display:block;font-size:2.2rem;color:#fff} +.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} +.tabs button{background:var(--card);color:var(--muted);border:0;border-radius:999px;padding:8px 16px;cursor:pointer;font-size:.95rem} +.tabs button.on{background:var(--accent);color:#fff} +.tab-panel{display:none}.tab-panel.on{display:block} +details{background:var(--card);border-radius:12px;padding:14px 18px;margin-bottom:10px} +summary{cursor:pointer;font-weight:600} +details p{color:var(--muted);margin:10px 0 0} +.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} +.gallery button{aspect-ratio:4/3;border:0;border-radius:12px;cursor:pointer;color:#fff;font-weight:700;font-size:1.1rem} +.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:50;padding:20px} +.lightbox.on{display:flex} +.lightbox div{width:min(560px,100%);aspect-ratio:4/3;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:800} +.price{display:flex;flex-direction:column;gap:12px} +.price .amount{font-size:2rem;font-weight:800} +.price.featured{outline:2px solid var(--accent)} +.toggle{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:20px} +form{display:grid;gap:14px;max-width:560px} +label{display:grid;gap:6px;font-weight:600} +input,select,textarea{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid #3a3066;background:var(--card);color:var(--text)} +.notice{background:#16352a;color:#c9f5df;border-radius:12px;padding:14px 18px;display:none} +.notice.on{display:block} +.counter{display:flex;align-items:center;gap:14px} +.counter button{width:44px;height:44px;border-radius:50%;border:0;background:var(--card2);color:#fff;font-size:1.4rem;cursor:pointer} +.counter output{font-size:1.6rem;font-weight:700;min-width:40px;text-align:center} +.timeline{border-left:2px solid var(--accent);padding-left:20px} +.timeline div{margin-bottom:22px} +.timeline b{color:#fff} +footer{text-align:center;color:var(--muted);font-size:.85rem;padding:32px 20px 48px;border-top:1px solid #2c2450;margin-top:32px} +footer a{margin:0 8px} diff --git a/ueber-uns.html b/ueber-uns.html new file mode 100644 index 0000000..742e1db --- /dev/null +++ b/ueber-uns.html @@ -0,0 +1,45 @@ + + + + + +Über uns · Test-Website + + + + + +

Über uns

Eine erfundene Geschichte für eine Testseite.

+
+

Unser Weg

+
+
2020

Gründung in einer Garage.

+
2022

Das erste Büro und zwei Mitarbeitende.

+
2024

100 Projekte abgeschlossen.

+
2026

Diese Testseite wird gebaut.

+
+
+
+

Team

+
+

Alex

Design

+

Sam

Entwicklung

+

Robin

Kundenbetreuung

+
+
+ + +