Testseite: mehrere Unterseiten, Tabs, Galerie, Preise, Formular

This commit is contained in:
webklar-system committed 2026-10-01 20:02:15 +00:00
1 parent e42bac66ac
commit 9766c245a3
8 files changed
+368 -26

No files matched your search

+46
View File
@@ -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()
})
})
+31
View File
@@ -0,0 +1,31 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Impressum · Test-Website</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body data-page="impressum">
<nav>
<a class="logo" href="index.html">Test-Website</a>
<button class="menu-btn" aria-label="Menü">☰</button>
<ul>
<li><a data-page="start" href="index.html">Start</a></li>
<li><a data-page="leistungen" href="leistungen.html">Leistungen</a></li>
<li><a data-page="preise" href="preise.html">Preise</a></li>
<li><a data-page="ueber" href="ueber-uns.html">Über uns</a></li>
<li><a data-page="kontakt" href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<header class="hero"><h1>Impressum</h1></header>
<section class="wrap">
<p>Dies ist eine Testseite ohne echtes Unternehmen. Verantwortlich für den Betrieb: WEBklar GbR, siehe <a href="https://webklar.com/impressum">webklar.com/impressum</a>.</p>
</section>
<footer>
Testprojekt von WEBklar – keine echte Firma.<br>
<a href="impressum.html">Impressum</a><a href="kontakt.html">Kontakt</a><a href="#top" onclick="scrollTo(0,0);return false">Nach oben ↑</a>
</footer>
</body>
</html>
+59 -26
View File
@@ -3,33 +3,66 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test-Website · WEBklar</title> <title>Start · Test-Website</title>
<style> <link rel="stylesheet" href="style.css">
:root { --bg:#0f0b1f; --card:#1b1533; --text:#f4f1ff; --muted:#b7aed6; --accent:#7c5cff; } <script src="app.js" defer></script>
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
header { padding:72px 20px 48px; 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; }
header p { color:var(--muted); max-width:560px; 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; }
main { max-width:960px; margin:0 auto; padding:24px 20px 64px; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.card { background:var(--card); border-radius:16px; padding:22px; }
.card h2 { margin:0 0 6px; font-size:1.1rem; }
.card p { margin:0; color:var(--muted); font-size:.95rem; }
footer { text-align:center; color:var(--muted); font-size:.85rem; padding:24px 20px 40px; }
</style>
</head> </head>
<body> <body data-page="start">
<header> <nav>
<h1>Test-Website</h1> <a class="logo" href="index.html">Test-Website</a>
<p>Eine kleine Beispielseite, um die Projekt-Vorschau im WEBklar-Kundenbereich zu testen.</p> <button class="menu-btn" aria-label="Menü">☰</button>
<a class="btn" href="#leistungen">Mehr erfahren</a> <ul>
<li><a data-page="start" href="index.html">Start</a></li>
<li><a data-page="leistungen" href="leistungen.html">Leistungen</a></li>
<li><a data-page="preise" href="preise.html">Preise</a></li>
<li><a data-page="ueber" href="ueber-uns.html">Über uns</a></li>
<li><a data-page="kontakt" href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<header class="hero">
<h1>Willkommen auf der Test-Website</h1>
<p>Eine Beispielseite mit mehreren Unterseiten, Buttons, Tabs, Galerie und Formular – zum Ausprobieren der Website-Analyse.</p>
<a class="btn" href="leistungen.html">Leistungen ansehen</a>
<a class="btn ghost" href="kontakt.html">Kontakt aufnehmen</a>
</header> </header>
<main id="leistungen"> <section class="wrap">
<section class="card"><h2>Schnell</h2><p>Statische Seite, sofort ausgeliefert.</p></section> <div class="stats">
<section class="card"><h2>Responsiv</h2><p>Passt sich Handy, Tablet und Desktop an.</p></section> <div class="card"><b>120+</b><span class="muted">zufriedene Testkunden</span></div>
<section class="card"><h2>Vorschau</h2><p>Jeder Git-Push aktualisiert diese Seite automatisch.</p></section> <div class="card"><b>24 h</b><span class="muted">Antwortzeit</span></div>
</main> <div class="card"><b>4,9</b><span class="muted">Sterne (erfunden)</span></div>
<footer>Testprojekt · WEBklar</footer> </div>
</section>
<section class="wrap">
<h2>Was möchtest du wissen?</h2>
<div class="tabs" data-panels=".start-panel">
<button class="on">Für Privatkunden</button><button>Für Firmen</button><button>Für Vereine</button>
</div>
<div class="start-panel tab-panel on card"><h3>Privatkunden</h3><p>Persönliche Beratung, faire Preise, schnelle Umsetzung.</p></div>
<div class="start-panel tab-panel card"><h3>Firmen</h3><p>Websites, Shops und Wartung aus einer Hand.</p></div>
<div class="start-panel tab-panel card"><h3>Vereine</h3><p>Vergünstigte Pakete für gemeinnützige Vereine.</p></div>
</section>
<section class="wrap">
<h2>Galerie</h2>
<p class="muted">Klick auf ein Bild, um es groß anzuzeigen.</p>
<div class="gallery">
<button style="background:linear-gradient(135deg,#7c5cff,#3ecf8e)">Projekt A</button>
<button style="background:linear-gradient(135deg,#ff6b6b,#ffb347)">Projekt B</button>
<button style="background:linear-gradient(135deg,#00b4d8,#7c5cff)">Projekt C</button>
<button style="background:linear-gradient(135deg,#f72585,#7209b7)">Projekt D</button>
<button style="background:linear-gradient(135deg,#43aa8b,#90be6d)">Projekt E</button>
<button style="background:linear-gradient(135deg,#f9c74f,#f8961e)">Projekt F</button>
</div>
<div class="lightbox"><div></div></div>
</section>
<section class="wrap">
<h2>Häufige Fragen</h2>
<details><summary>Ist das eine echte Firma?</summary><p>Nein, das ist eine Testseite von WEBklar.</p></details>
<details><summary>Wofür ist die Seite da?</summary><p>Um Klicks, Seitenaufrufe und die Heatmap der Website-Analyse zu testen.</p></details>
<details><summary>Werden Formulardaten gespeichert?</summary><p>Nein, das Kontaktformular verschickt nichts.</p></details>
</section>
<footer>
Testprojekt von WEBklar – keine echte Firma.<br>
<a href="impressum.html">Impressum</a><a href="kontakt.html">Kontakt</a><a href="#top" onclick="scrollTo(0,0);return false">Nach oben ↑</a>
</footer>
</body> </body>
</html> </html>
+39
View File
@@ -0,0 +1,39 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kontakt · Test-Website</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body data-page="kontakt">
<nav>
<a class="logo" href="index.html">Test-Website</a>
<button class="menu-btn" aria-label="Menü">☰</button>
<ul>
<li><a data-page="start" href="index.html">Start</a></li>
<li><a data-page="leistungen" href="leistungen.html">Leistungen</a></li>
<li><a data-page="preise" href="preise.html">Preise</a></li>
<li><a data-page="ueber" href="ueber-uns.html">Über uns</a></li>
<li><a data-page="kontakt" href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<header class="hero"><h1>Kontakt</h1><p>Das Formular ist nur zum Testen – es wird nichts gesendet oder gespeichert.</p></header>
<section class="wrap">
<div class="notice">Danke! (Test – es wurde nichts verschickt.)</div>
<form id="kontakt-form">
<label>Name <input name="name" required placeholder="Max Mustermann"></label>
<label>Anliegen
<select name="anliegen"><option>Neue Website</option><option>Wartung</option><option>Frage</option></select>
</label>
<label>Nachricht <textarea name="nachricht" rows="5" placeholder="Worum geht es?"></textarea></label>
<button class="btn" type="submit">Absenden (Test)</button>
</form>
</section>
<footer>
Testprojekt von WEBklar – keine echte Firma.<br>
<a href="impressum.html">Impressum</a><a href="kontakt.html">Kontakt</a><a href="#top" onclick="scrollTo(0,0);return false">Nach oben ↑</a>
</footer>
</body>
</html>
+53
View File
@@ -0,0 +1,53 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leistungen · Test-Website</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body data-page="leistungen">
<nav>
<a class="logo" href="index.html">Test-Website</a>
<button class="menu-btn" aria-label="Menü">☰</button>
<ul>
<li><a data-page="start" href="index.html">Start</a></li>
<li><a data-page="leistungen" href="leistungen.html">Leistungen</a></li>
<li><a data-page="preise" href="preise.html">Preise</a></li>
<li><a data-page="ueber" href="ueber-uns.html">Über uns</a></li>
<li><a data-page="kontakt" href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<header class="hero"><h1>Leistungen</h1><p>Wähle eine Kategorie und sieh dir die Details an.</p></header>
<section class="wrap">
<div class="tabs" data-panels=".l-panel">
<button class="on">Webdesign</button><button>Wartung</button><button>Hosting</button><button>SEO</button>
</div>
<div class="l-panel tab-panel on"><div class="grid">
<div class="card"><h3>Onepager</h3><p>Eine Seite, alles Wichtige auf einen Blick.</p></div>
<div class="card"><h3>Mehrseitige Website</h3><p>Für Firmen mit mehr Inhalt.</p></div>
<div class="card"><h3>Online-Shop</h3><p>Produkte verkaufen, einfach verwaltet.</p></div>
</div></div>
<div class="l-panel tab-panel"><div class="grid">
<div class="card"><h3>Updates</h3><p>Regelmäßige Aktualisierungen.</p></div>
<div class="card"><h3>Änderungen</h3><p>Texte und Bilder tauschen lassen.</p></div>
</div></div>
<div class="l-panel tab-panel"><div class="grid">
<div class="card"><h3>Server in Deutschland</h3><p>Schnell und datenschutzfreundlich.</p></div>
<div class="card"><h3>SSL inklusive</h3><p>Verschlüsselte Verbindung.</p></div>
</div></div>
<div class="l-panel tab-panel"><div class="grid">
<div class="card"><h3>Google-Profil</h3><p>Besser gefunden werden.</p></div>
<div class="card"><h3>Ladezeit</h3><p>Schnelle Seiten ranken besser.</p></div>
</div></div>
</section>
<section class="wrap" style="text-align:center">
<a class="btn" href="preise.html">Zu den Preisen</a>
</section>
<footer>
Testprojekt von WEBklar – keine echte Firma.<br>
<a href="impressum.html">Impressum</a><a href="kontakt.html">Kontakt</a><a href="#top" onclick="scrollTo(0,0);return false">Nach oben ↑</a>
</footer>
</body>
</html>
+40
View File
@@ -0,0 +1,40 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Preise · Test-Website</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body data-page="preise">
<nav>
<a class="logo" href="index.html">Test-Website</a>
<button class="menu-btn" aria-label="Menü">☰</button>
<ul>
<li><a data-page="start" href="index.html">Start</a></li>
<li><a data-page="leistungen" href="leistungen.html">Leistungen</a></li>
<li><a data-page="preise" href="preise.html">Preise</a></li>
<li><a data-page="ueber" href="ueber-uns.html">Über uns</a></li>
<li><a data-page="kontakt" href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<header class="hero"><h1>Preise</h1><p>Alle Preise sind ausgedacht und nur zum Testen.</p></header>
<section class="wrap">
<label class="toggle"><input type="checkbox" id="yearly"> Jährlich zahlen (2 Monate gratis)</label>
<div class="grid">
<div class="card price"><h3>Basis</h3><div class="amount" data-month="19">19 € / Monat</div><p>1 Seite, Hosting</p><a class="btn ghost" href="kontakt.html?paket=basis">Auswählen</a></div>
<div class="card price featured"><h3>Plus</h3><div class="amount" data-month="39">39 € / Monat</div><p>5 Seiten, Hosting, Wartung</p><a class="btn" href="kontakt.html?paket=plus">Auswählen</a></div>
<div class="card price"><h3>Profi</h3><div class="amount" data-month="79">79 € / Monat</div><p>Unbegrenzte Seiten, Shop</p><a class="btn ghost" href="kontakt.html?paket=profi">Auswählen</a></div>
</div>
</section>
<section class="wrap">
<h2>Wie viele Seiten brauchst du?</h2>
<div class="counter"><button data-step="-1" aria-label="weniger">−</button><output>0</output><button data-step="1" aria-label="mehr">+</button><span class="muted">Seiten</span></div>
</section>
<footer>
Testprojekt von WEBklar – keine echte Firma.<br>
<a href="impressum.html">Impressum</a><a href="kontakt.html">Kontakt</a><a href="#top" onclick="scrollTo(0,0);return false">Nach oben ↑</a>
</footer>
</body>
</html>
+55
View File
@@ -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}
+45
View File
@@ -0,0 +1,45 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Über uns · Test-Website</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body data-page="ueber">
<nav>
<a class="logo" href="index.html">Test-Website</a>
<button class="menu-btn" aria-label="Menü">☰</button>
<ul>
<li><a data-page="start" href="index.html">Start</a></li>
<li><a data-page="leistungen" href="leistungen.html">Leistungen</a></li>
<li><a data-page="preise" href="preise.html">Preise</a></li>
<li><a data-page="ueber" href="ueber-uns.html">Über uns</a></li>
<li><a data-page="kontakt" href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<header class="hero"><h1>Über uns</h1><p>Eine erfundene Geschichte für eine Testseite.</p></header>
<section class="wrap">
<h2>Unser Weg</h2>
<div class="timeline">
<div><b>2020</b><p class="muted">Gründung in einer Garage.</p></div>
<div><b>2022</b><p class="muted">Das erste Büro und zwei Mitarbeitende.</p></div>
<div><b>2024</b><p class="muted">100 Projekte abgeschlossen.</p></div>
<div><b>2026</b><p class="muted">Diese Testseite wird gebaut.</p></div>
</div>
</section>
<section class="wrap">
<h2>Team</h2>
<div class="grid">
<div class="card"><h3>Alex</h3><p>Design</p></div>
<div class="card"><h3>Sam</h3><p>Entwicklung</p></div>
<div class="card"><h3>Robin</h3><p>Kundenbetreuung</p></div>
</div>
</section>
<footer>
Testprojekt von WEBklar – keine echte Firma.<br>
<a href="impressum.html">Impressum</a><a href="kontakt.html">Kontakt</a><a href="#top" onclick="scrollTo(0,0);return false">Nach oben ↑</a>
</footer>
</body>
</html>