521 lines
31 KiB
HTML
521 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>DeckelApp – Getränkeabrechnung für Vereine</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
:root {
|
||
--orange: #f97316;
|
||
--amber: #f59e0b;
|
||
--red: #dc2626;
|
||
--dark: #1c1917;
|
||
--darker: #0c0a09;
|
||
--light: #fffbef;
|
||
--card: #ffffff;
|
||
--gray: #78716c;
|
||
--border: #e7e5e4;
|
||
}
|
||
body { font-family: 'Poppins', sans-serif; background: var(--light); color: var(--dark); }
|
||
|
||
/* NAV */
|
||
nav {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||
background: rgba(255,251,239,0.95); backdrop-filter: blur(10px);
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 5%; height: 68px;
|
||
}
|
||
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
|
||
.nav-logo .logo-icon {
|
||
width: 38px; height: 38px; border-radius: 10px;
|
||
background: linear-gradient(135deg, var(--orange), var(--amber));
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px;
|
||
}
|
||
.nav-logo span { font-weight: 800; font-size: 1.3rem; color: var(--dark); }
|
||
.nav-links { display: flex; align-items: center; gap: 28px; }
|
||
.nav-links a { text-decoration: none; color: var(--gray); font-weight: 500; font-size: 0.95rem; transition: color .2s; }
|
||
.nav-links a:hover { color: var(--orange); }
|
||
.nav-right { display: flex; align-items: center; gap: 12px; }
|
||
.lang-toggle {
|
||
background: none; border: 2px solid var(--border); border-radius: 20px;
|
||
padding: 4px 12px; font-family: 'Poppins', sans-serif; font-weight: 600;
|
||
font-size: 0.8rem; cursor: pointer; color: var(--gray); transition: all .2s;
|
||
}
|
||
.lang-toggle:hover { border-color: var(--orange); color: var(--orange); }
|
||
.btn-ghost {
|
||
background: none; border: 2px solid var(--orange); border-radius: 8px;
|
||
padding: 7px 18px; font-family: 'Poppins', sans-serif; font-weight: 600;
|
||
font-size: 0.9rem; color: var(--orange); cursor: pointer; transition: all .2s;
|
||
text-decoration: none; display: inline-block;
|
||
}
|
||
.btn-ghost:hover { background: var(--orange); color: #fff; }
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, var(--orange), var(--amber));
|
||
border: none; border-radius: 8px; padding: 9px 22px;
|
||
font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.9rem;
|
||
color: #fff; cursor: pointer; transition: all .2s; text-decoration: none;
|
||
display: inline-block; box-shadow: 0 4px 14px rgba(249,115,22,0.35);
|
||
}
|
||
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(249,115,22,0.45); }
|
||
|
||
/* HERO */
|
||
.hero {
|
||
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||
padding: 100px 5% 60px;
|
||
background: linear-gradient(135deg, #fffbef 0%, #fff7ed 50%, #fef3c7 100%);
|
||
position: relative; overflow: hidden; text-align: center;
|
||
}
|
||
.hero::before {
|
||
content: ''; position: absolute; width: 600px; height: 600px;
|
||
background: radial-gradient(circle, rgba(249,115,22,0.12) 0%, transparent 70%);
|
||
top: -100px; right: -100px; border-radius: 50%;
|
||
}
|
||
.hero::after {
|
||
content: ''; position: absolute; width: 400px; height: 400px;
|
||
background: radial-gradient(circle, rgba(245,158,11,0.1) 0%, transparent 70%);
|
||
bottom: -50px; left: -50px; border-radius: 50%;
|
||
}
|
||
.hero-content { position: relative; z-index: 1; max-width: 780px; }
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.3);
|
||
border-radius: 20px; padding: 6px 16px; margin-bottom: 28px;
|
||
font-size: 0.85rem; font-weight: 600; color: var(--orange);
|
||
}
|
||
.hero h1 {
|
||
font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; line-height: 1.15;
|
||
margin-bottom: 22px; color: var(--dark);
|
||
}
|
||
.hero h1 span { color: var(--orange); }
|
||
.hero p { font-size: 1.15rem; color: var(--gray); margin-bottom: 36px; line-height: 1.7; max-width: 580px; margin-left: auto; margin-right: auto; }
|
||
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
|
||
.btn-large { padding: 14px 32px; font-size: 1rem; border-radius: 12px; }
|
||
.hero-stats { display: flex; gap: 40px; justify-content: center; margin-top: 56px; flex-wrap: wrap; }
|
||
.stat { text-align: center; }
|
||
.stat .number { font-size: 2rem; font-weight: 800; color: var(--orange); }
|
||
.stat .label { font-size: 0.85rem; color: var(--gray); font-weight: 500; }
|
||
|
||
/* SECTIONS */
|
||
section { padding: 80px 5%; }
|
||
.section-label { font-size: 0.85rem; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; }
|
||
.section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; color: var(--dark); margin-bottom: 16px; }
|
||
.section-sub { font-size: 1.05rem; color: var(--gray); max-width: 560px; line-height: 1.7; }
|
||
.text-center { text-align: center; }
|
||
.text-center .section-sub { margin: 0 auto; }
|
||
|
||
/* FEATURES */
|
||
.features { background: #fff; }
|
||
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 52px; }
|
||
.feature-card {
|
||
background: var(--light); border-radius: 16px; padding: 32px 28px;
|
||
border: 1px solid var(--border); transition: all .3s;
|
||
}
|
||
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); border-color: var(--orange); }
|
||
.feature-icon {
|
||
width: 52px; height: 52px; border-radius: 12px; margin-bottom: 20px;
|
||
display: flex; align-items: center; justify-content: center; font-size: 24px;
|
||
}
|
||
.icon-orange { background: rgba(249,115,22,0.15); }
|
||
.icon-amber { background: rgba(245,158,11,0.15); }
|
||
.icon-red { background: rgba(220,38,38,0.12); }
|
||
.icon-green { background: rgba(34,197,94,0.12); }
|
||
.icon-blue { background: rgba(59,130,246,0.12); }
|
||
.icon-purple { background: rgba(168,85,247,0.12); }
|
||
.feature-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; color: var(--dark); }
|
||
.feature-card p { font-size: 0.92rem; color: var(--gray); line-height: 1.65; }
|
||
|
||
/* HOW IT WORKS */
|
||
.how { background: linear-gradient(135deg, #fff7ed, #fffbef); }
|
||
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-top: 52px; position: relative; }
|
||
.step { text-align: center; padding: 28px 20px; }
|
||
.step-num {
|
||
width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 20px;
|
||
background: linear-gradient(135deg, var(--orange), var(--amber));
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 1.3rem; font-weight: 800; color: #fff;
|
||
box-shadow: 0 6px 20px rgba(249,115,22,0.35);
|
||
}
|
||
.step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
|
||
.step p { font-size: 0.9rem; color: var(--gray); line-height: 1.65; }
|
||
|
||
/* PRICING TEASER */
|
||
.pricing { background: #fff; }
|
||
.pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 52px; max-width: 900px; margin-left: auto; margin-right: auto; }
|
||
.pricing-card {
|
||
border-radius: 20px; padding: 36px 32px; border: 2px solid var(--border);
|
||
position: relative; transition: all .3s; background: #fff;
|
||
}
|
||
.pricing-card.featured {
|
||
background: linear-gradient(135deg, var(--orange), var(--amber));
|
||
border-color: transparent; color: #fff;
|
||
}
|
||
.pricing-card:hover:not(.featured) { border-color: var(--orange); transform: translateY(-4px); }
|
||
.pricing-badge {
|
||
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
|
||
background: var(--red); color: #fff; font-size: 0.75rem; font-weight: 700;
|
||
padding: 4px 14px; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px;
|
||
}
|
||
.plan-name { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; opacity: 0.8; }
|
||
.plan-price { font-size: 2.8rem; font-weight: 800; margin-bottom: 4px; }
|
||
.plan-price span { font-size: 1rem; font-weight: 500; opacity: 0.7; }
|
||
.plan-desc { font-size: 0.9rem; opacity: 0.75; margin-bottom: 24px; }
|
||
.plan-features { list-style: none; margin-bottom: 28px; }
|
||
.plan-features li { font-size: 0.9rem; padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,0.07); display: flex; align-items: center; gap: 8px; }
|
||
.featured .plan-features li { border-color: rgba(255,255,255,0.2); }
|
||
.check { color: var(--orange); font-weight: 700; }
|
||
.featured .check { color: #fff; }
|
||
.btn-white {
|
||
background: #fff; color: var(--orange); border: none; border-radius: 10px;
|
||
padding: 12px 24px; font-family: 'Poppins', sans-serif; font-weight: 700;
|
||
font-size: 0.95rem; cursor: pointer; width: 100%; transition: all .2s;
|
||
}
|
||
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
|
||
.btn-outline-dark {
|
||
background: none; color: var(--dark); border: 2px solid var(--border); border-radius: 10px;
|
||
padding: 12px 24px; font-family: 'Poppins', sans-serif; font-weight: 700;
|
||
font-size: 0.95rem; cursor: pointer; width: 100%; transition: all .2s;
|
||
}
|
||
.btn-outline-dark:hover { border-color: var(--orange); color: var(--orange); }
|
||
|
||
/* CTA BANNER */
|
||
.cta-banner {
|
||
background: linear-gradient(135deg, var(--dark) 0%, #292524 100%);
|
||
color: #fff; text-align: center; padding: 80px 5%;
|
||
}
|
||
.cta-banner h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; margin-bottom: 16px; }
|
||
.cta-banner p { color: #a8a29e; font-size: 1.05rem; margin-bottom: 36px; }
|
||
|
||
/* FOOTER */
|
||
footer {
|
||
background: var(--darker); color: #a8a29e; padding: 48px 5% 28px;
|
||
}
|
||
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid #292524; }
|
||
.footer-brand .logo-icon { margin-bottom: 14px; }
|
||
.footer-brand p { font-size: 0.9rem; line-height: 1.7; margin-top: 8px; max-width: 240px; }
|
||
.footer-col h4 { color: #fff; font-size: 0.9rem; font-weight: 700; margin-bottom: 16px; }
|
||
.footer-col a { display: block; color: #a8a29e; text-decoration: none; font-size: 0.88rem; margin-bottom: 10px; transition: color .2s; }
|
||
.footer-col a:hover { color: var(--orange); }
|
||
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 0.85rem; flex-wrap: wrap; gap: 12px; }
|
||
.footer-logo-text { font-weight: 800; font-size: 1.1rem; color: #fff; }
|
||
|
||
/* MODAL */
|
||
.modal-overlay {
|
||
display: none; position: fixed; inset: 0; z-index: 200;
|
||
background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
|
||
align-items: center; justify-content: center;
|
||
}
|
||
.modal-overlay.active { display: flex; }
|
||
.modal {
|
||
background: #fff; border-radius: 20px; padding: 40px; width: 100%; max-width: 420px;
|
||
position: relative; box-shadow: 0 24px 60px rgba(0,0,0,0.2);
|
||
animation: slideUp .3s ease;
|
||
}
|
||
@keyframes slideUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }
|
||
.modal-close {
|
||
position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
|
||
border-radius: 50%; background: var(--border); border: none; cursor: pointer;
|
||
font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.modal-tabs { display: flex; gap: 4px; background: var(--border); border-radius: 10px; padding: 4px; margin-bottom: 28px; }
|
||
.modal-tab {
|
||
flex: 1; padding: 8px; border: none; border-radius: 7px; background: none;
|
||
font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.9rem;
|
||
cursor: pointer; color: var(--gray); transition: all .2s;
|
||
}
|
||
.modal-tab.active { background: #fff; color: var(--dark); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
|
||
.modal h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
|
||
.modal p.sub { font-size: 0.9rem; color: var(--gray); margin-bottom: 24px; }
|
||
.form-group { margin-bottom: 16px; }
|
||
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--dark); }
|
||
.form-group input, .form-group select {
|
||
width: 100%; padding: 11px 14px; border: 2px solid var(--border); border-radius: 10px;
|
||
font-family: 'Poppins', sans-serif; font-size: 0.95rem; outline: none; transition: border .2s;
|
||
}
|
||
.form-group input:focus, .form-group select:focus { border-color: var(--orange); }
|
||
.btn-full { width: 100%; padding: 13px; font-size: 1rem; border-radius: 10px; margin-top: 8px; }
|
||
.modal-form { display: none; }
|
||
.modal-form.active { display: block; }
|
||
.divider { text-align: center; color: var(--gray); font-size: 0.85rem; margin: 16px 0; position: relative; }
|
||
.divider::before, .divider::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--border); }
|
||
.divider::before { left: 0; }
|
||
.divider::after { right: 0; }
|
||
|
||
@media (max-width: 768px) {
|
||
.nav-links { display: none; }
|
||
.footer-top { grid-template-columns: 1fr 1fr; }
|
||
.hero h1 { font-size: 2.2rem; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav>
|
||
<a class="nav-logo" href="index.html">
|
||
<div class="logo-icon">🍺</div>
|
||
<span>DeckelApp</span>
|
||
</a>
|
||
<div class="nav-links">
|
||
<a href="#features" data-de="Funktionen" data-en="Features">Funktionen</a>
|
||
<a href="#how" data-de="So funktioniert's" data-en="How it works">So funktioniert's</a>
|
||
<a href="#pricing" data-de="Preise" data-en="Pricing">Preise</a>
|
||
<a href="admin.html" data-de="Demo" data-en="Demo">Demo</a>
|
||
</div>
|
||
<div class="nav-right">
|
||
<button class="lang-toggle" onclick="toggleLang()" id="langBtn">EN</button>
|
||
<button class="btn-ghost" onclick="openModal('login')" data-de="Anmelden" data-en="Log in">Anmelden</button>
|
||
<button class="btn-primary" onclick="openModal('register')" data-de="Kostenlos starten" data-en="Start for free">Kostenlos starten</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="hero-content">
|
||
<div class="hero-badge">🎉 <span data-de="Neu: Stripe-Zahlungen ab Version 2.0" data-en="New: Stripe payments from version 2.0">Neu: Stripe-Zahlungen ab Version 2.0</span></div>
|
||
<h1 data-de="Der digitale <span>Deckel</span> für deinen Verein" data-en="The digital <span>tab</span> for your club">Der digitale <span>Deckel</span> für deinen Verein</h1>
|
||
<p data-de="Getränke buchen, Abrechnungen erstellen und Mitglieder verwalten – alles in einer modernen Plattform für Vereine und Gastronomie." data-en="Book drinks, create invoices, and manage members – all in one modern platform for clubs and hospitality.">Getränke buchen, Abrechnungen erstellen und Mitglieder verwalten – alles in einer modernen Plattform für Vereine und Gastronomie.</p>
|
||
<div class="hero-cta">
|
||
<button class="btn-primary btn-large" onclick="openModal('register')" data-de="Jetzt kostenlos starten" data-en="Get started for free">Jetzt kostenlos starten</button>
|
||
<a class="btn-ghost btn-large" href="admin.html" data-de="Demo ansehen" data-en="View demo">Demo ansehen</a>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="stat"><div class="number">500+</div><div class="label" data-de="Aktive Vereine" data-en="Active clubs">Aktive Vereine</div></div>
|
||
<div class="stat"><div class="number">12.000+</div><div class="label" data-de="Mitglieder" data-en="Members">Mitglieder</div></div>
|
||
<div class="stat"><div class="number">98%</div><div class="label" data-de="Zufriedenheit" data-en="Satisfaction">Zufriedenheit</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FEATURES -->
|
||
<section class="features" id="features">
|
||
<div class="text-center">
|
||
<div class="section-label" data-de="Funktionen" data-en="Features">Funktionen</div>
|
||
<div class="section-title" data-de="Alles was dein Verein braucht" data-en="Everything your club needs">Alles was dein Verein braucht</div>
|
||
<div class="section-sub" data-de="Von der Getränkebuchung bis zur Monatsabrechnung – DeckelApp deckt alles ab." data-en="From drink booking to monthly invoicing – DeckelApp covers everything.">Von der Getränkebuchung bis zur Monatsabrechnung – DeckelApp deckt alles ab.</div>
|
||
</div>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-orange">🍺</div>
|
||
<h3 data-de="Digitaler Deckel" data-en="Digital Tab">Digitaler Deckel</h3>
|
||
<p data-de="Getränke einfach auf den Deckel buchen – per Tablet, Smartphone oder PC direkt an der Theke." data-en="Easily book drinks to the tab – via tablet, smartphone, or PC directly at the bar.">Getränke einfach auf den Deckel buchen – per Tablet, Smartphone oder PC direkt an der Theke.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-amber">📊</div>
|
||
<h3 data-de="Automatische Abrechnung" data-en="Automatic Billing">Automatische Abrechnung</h3>
|
||
<p data-de="Monatliche Rechnungen werden automatisch erstellt und können per E-Mail versandt werden." data-en="Monthly invoices are created automatically and can be sent by email.">Monatliche Rechnungen werden automatisch erstellt und können per E-Mail versandt werden.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-red">👥</div>
|
||
<h3 data-de="Mitgliederverwaltung" data-en="Member Management">Mitgliederverwaltung</h3>
|
||
<p data-de="Verwalte alle Mitglieder, Rollen und Berechtigungen zentral in einer übersichtlichen Oberfläche." data-en="Manage all members, roles, and permissions centrally in a clear interface.">Verwalte alle Mitglieder, Rollen und Berechtigungen zentral in einer übersichtlichen Oberfläche.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-green">💳</div>
|
||
<h3 data-de="Stripe-Zahlungen" data-en="Stripe Payments">Stripe-Zahlungen</h3>
|
||
<p data-de="Integrierte Online-Zahlungen via Stripe – Mitglieder begleichen ihren Deckel bequem online." data-en="Integrated online payments via Stripe – members pay their tab conveniently online.">Integrierte Online-Zahlungen via Stripe – Mitglieder begleichen ihren Deckel bequem online.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-blue">🏢</div>
|
||
<h3 data-de="Multi-Tenant fähig" data-en="Multi-Tenant Ready">Multi-Tenant fähig</h3>
|
||
<p data-de="Eine Plattform für beliebig viele Vereine – jeder Tenant ist vollständig isoliert und sicher." data-en="One platform for any number of clubs – each tenant is fully isolated and secure.">Eine Plattform für beliebig viele Vereine – jeder Tenant ist vollständig isoliert und sicher.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon icon-purple">📱</div>
|
||
<h3 data-de="Mobile First" data-en="Mobile First">Mobile First</h3>
|
||
<p data-de="Optimiert für Smartphones und Tablets – für Mitglieder und Thekenpersonal gleichermaßen." data-en="Optimized for smartphones and tablets – for members and bar staff alike.">Optimiert für Smartphones und Tablets – für Mitglieder und Thekenpersonal gleichermaßen.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- HOW IT WORKS -->
|
||
<section class="how" id="how">
|
||
<div class="text-center">
|
||
<div class="section-label" data-de="So einfach geht's" data-en="How it works">So einfach geht's</div>
|
||
<div class="section-title" data-de="In 4 Schritten startklar" data-en="Ready in 4 steps">In 4 Schritten startklar</div>
|
||
<div class="section-sub" data-de="Kein IT-Wissen nötig – in wenigen Minuten ist dein Verein online." data-en="No IT knowledge required – your club is online in minutes.">Kein IT-Wissen nötig – in wenigen Minuten ist dein Verein online.</div>
|
||
</div>
|
||
<div class="steps">
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<h3 data-de="Verein registrieren" data-en="Register club">Verein registrieren</h3>
|
||
<p data-de="Erstelle einen Account für deinen Verein – kostenlos und ohne Kreditkarte." data-en="Create an account for your club – free and without a credit card.">Erstelle einen Account für deinen Verein – kostenlos und ohne Kreditkarte.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<h3 data-de="Getränke anlegen" data-en="Add drinks">Getränke anlegen</h3>
|
||
<p data-de="Trage deine Getränke mit Preisen ein – in beliebigen Kategorien." data-en="Enter your drinks with prices – in any categories.">Trage deine Getränke mit Preisen ein – in beliebigen Kategorien.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<h3 data-de="Mitglieder einladen" data-en="Invite members">Mitglieder einladen</h3>
|
||
<p data-de="Lade Mitglieder per Link ein – sie erhalten sofort Zugang zu ihrem Profil." data-en="Invite members via link – they immediately get access to their profile.">Lade Mitglieder per Link ein – sie erhalten sofort Zugang zu ihrem Profil.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">4</div>
|
||
<h3 data-de="Deckel führen & abrechnen" data-en="Run tabs & invoice">Deckel führen & abrechnen</h3>
|
||
<p data-de="Buche Getränke, sieh Bilanzen ein und erstelle Monatsabrechnungen auf Knopfdruck." data-en="Book drinks, view balances, and create monthly invoices at the push of a button.">Buche Getränke, sieh Bilanzen ein und erstelle Monatsabrechnungen auf Knopfdruck.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRICING TEASER -->
|
||
<section class="pricing" id="pricing">
|
||
<div class="text-center">
|
||
<div class="section-label" data-de="Preise" data-en="Pricing">Preise</div>
|
||
<div class="section-title" data-de="Faire Preise für jeden Verein" data-en="Fair pricing for every club">Faire Preise für jeden Verein</div>
|
||
<div class="section-sub" data-de="Kein verstecktes Kleingedrucktes. Jederzeit kündbar." data-en="No hidden fine print. Cancel anytime.">Kein verstecktes Kleingedrucktes. Jederzeit kündbar.</div>
|
||
</div>
|
||
<div class="pricing-cards">
|
||
<div class="pricing-card">
|
||
<div class="plan-name" data-de="Starter" data-en="Starter">Starter</div>
|
||
<div class="plan-price">0€ <span data-de="/ Monat" data-en="/ month">/ Monat</span></div>
|
||
<div class="plan-desc" data-de="Für kleine Vereine bis 20 Mitglieder" data-en="For small clubs up to 20 members">Für kleine Vereine bis 20 Mitglieder</div>
|
||
<ul class="plan-features">
|
||
<li><span class="check">✓</span> <span data-de="Bis zu 20 Mitglieder" data-en="Up to 20 members">Bis zu 20 Mitglieder</span></li>
|
||
<li><span class="check">✓</span> <span data-de="Deckel-Verwaltung" data-en="Tab management">Deckel-Verwaltung</span></li>
|
||
<li><span class="check">✓</span> <span data-de="Basis-Preisliste" data-en="Basic price list">Basis-Preisliste</span></li>
|
||
<li><span class="check" style="color:#ccc">✗</span> <span style="color:#ccc" data-de="Stripe-Zahlungen" data-en="Stripe payments">Stripe-Zahlungen</span></li>
|
||
</ul>
|
||
<button class="btn-outline-dark" onclick="openModal('register')" data-de="Kostenlos starten" data-en="Start free">Kostenlos starten</button>
|
||
</div>
|
||
<div class="pricing-card featured">
|
||
<div class="pricing-badge" data-de="Beliebt" data-en="Popular">Beliebt</div>
|
||
<div class="plan-name" data-de="Pro" data-en="Pro">Pro</div>
|
||
<div class="plan-price">29€ <span data-de="/ Monat" data-en="/ month">/ Monat</span></div>
|
||
<div class="plan-desc" data-de="Für aktive Vereine bis 200 Mitglieder" data-en="For active clubs up to 200 members">Für aktive Vereine bis 200 Mitglieder</div>
|
||
<ul class="plan-features">
|
||
<li><span class="check">✓</span> <span data-de="Bis zu 200 Mitglieder" data-en="Up to 200 members">Bis zu 200 Mitglieder</span></li>
|
||
<li><span class="check">✓</span> <span data-de="Stripe-Zahlungen" data-en="Stripe payments">Stripe-Zahlungen</span></li>
|
||
<li><span class="check">✓</span> <span data-de="Monatsabrechnung PDF" data-en="Monthly invoice PDF">Monatsabrechnung PDF</span></li>
|
||
<li><span class="check">✓</span> <span data-de="Unbegrenzte Getränke" data-en="Unlimited drinks">Unbegrenzte Getränke</span></li>
|
||
</ul>
|
||
<button class="btn-white" onclick="openModal('register')" data-de="Jetzt starten" data-en="Start now">Jetzt starten</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA BANNER -->
|
||
<section class="cta-banner">
|
||
<h2 data-de="Bereit loszulegen?" data-en="Ready to get started?">Bereit loszulegen?</h2>
|
||
<p data-de="Kostenlos registrieren – kein Risiko, keine Kreditkarte." data-en="Register for free – no risk, no credit card.">Kostenlos registrieren – kein Risiko, keine Kreditkarte.</p>
|
||
<button class="btn-primary btn-large" onclick="openModal('register')" data-de="Jetzt kostenlos starten" data-en="Get started for free">Jetzt kostenlos starten</button>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div class="footer-top">
|
||
<div class="footer-brand">
|
||
<div class="nav-logo">
|
||
<div class="logo-icon">🍺</div>
|
||
<span class="footer-logo-text">DeckelApp</span>
|
||
</div>
|
||
<p data-de="Die moderne Getränkeabrechnungs-Plattform für Vereine und Gastronomie." data-en="The modern drink billing platform for clubs and hospitality.">Die moderne Getränkeabrechnungs-Plattform für Vereine und Gastronomie.</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4 data-de="Produkt" data-en="Product">Produkt</h4>
|
||
<a href="#features" data-de="Funktionen" data-en="Features">Funktionen</a>
|
||
<a href="#pricing" data-de="Preise" data-en="Pricing">Preise</a>
|
||
<a href="admin.html" data-de="Demo" data-en="Demo">Demo</a>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4 data-de="Seiten" data-en="Pages">Seiten</h4>
|
||
<a href="admin.html" data-de="Admin Dashboard" data-en="Admin Dashboard">Admin Dashboard</a>
|
||
<a href="deckel.html" data-de="Deckel-Ansicht" data-en="Tab view">Deckel-Ansicht</a>
|
||
<a href="preisliste.html" data-de="Preisliste" data-en="Price list">Preisliste</a>
|
||
<a href="profil.html" data-de="Mein Profil" data-en="My Profile">Mein Profil</a>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4 data-de="Rechtliches" data-en="Legal">Rechtliches</h4>
|
||
<a href="#" data-de="Datenschutz" data-en="Privacy">Datenschutz</a>
|
||
<a href="#" data-de="Impressum" data-en="Imprint">Impressum</a>
|
||
<a href="#" data-de="AGB" data-en="Terms">AGB</a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<span data-de="© 2025 DeckelApp. Alle Rechte vorbehalten." data-en="© 2025 DeckelApp. All rights reserved.">© 2025 DeckelApp. Alle Rechte vorbehalten.</span>
|
||
<span data-de="Mit ❤️ für Vereine gemacht." data-en="Made with ❤️ for clubs.">Mit ❤️ für Vereine gemacht.</span>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- MODAL -->
|
||
<div class="modal-overlay" id="modalOverlay" onclick="closeModalOutside(event)">
|
||
<div class="modal">
|
||
<button class="modal-close" onclick="closeModal()">✕</button>
|
||
<div class="modal-tabs">
|
||
<button class="modal-tab active" id="tabLogin" onclick="switchTab('login')" data-de="Anmelden" data-en="Log in">Anmelden</button>
|
||
<button class="modal-tab" id="tabRegister" onclick="switchTab('register')" data-de="Registrieren" data-en="Register">Registrieren</button>
|
||
</div>
|
||
<!-- LOGIN -->
|
||
<div class="modal-form active" id="formLogin">
|
||
<h2 data-de="Willkommen zurück" data-en="Welcome back">Willkommen zurück</h2>
|
||
<p class="sub" data-de="Melde dich bei deinem Verein an." data-en="Sign in to your club.">Melde dich bei deinem Verein an.</p>
|
||
<div class="form-group">
|
||
<label data-de="E-Mail" data-en="Email">E-Mail</label>
|
||
<input type="email" placeholder="deine@email.de" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label data-de="Passwort" data-en="Password">Passwort</label>
|
||
<input type="password" placeholder="••••••••" />
|
||
</div>
|
||
<a href="admin.html"><button class="btn-primary btn-full" data-de="Anmelden" data-en="Log in">Anmelden</button></a>
|
||
<div class="divider" data-de="oder" data-en="or">oder</div>
|
||
<p style="text-align:center;font-size:0.88rem;color:var(--gray)">
|
||
<span data-de="Noch kein Konto?" data-en="No account yet?">Noch kein Konto?</span>
|
||
<a href="#" onclick="switchTab('register')" style="color:var(--orange);font-weight:600" data-de=" Registrieren" data-en=" Register"> Registrieren</a>
|
||
</p>
|
||
</div>
|
||
<!-- REGISTER -->
|
||
<div class="modal-form" id="formRegister">
|
||
<h2 data-de="Verein registrieren" data-en="Register club">Verein registrieren</h2>
|
||
<p class="sub" data-de="Starte kostenlos – keine Kreditkarte nötig." data-en="Start free – no credit card needed.">Starte kostenlos – keine Kreditkarte nötig.</p>
|
||
<div class="form-group">
|
||
<label data-de="Vereinsname" data-en="Club name">Vereinsname</label>
|
||
<input type="text" placeholder="Mein Verein e.V." />
|
||
</div>
|
||
<div class="form-group">
|
||
<label data-de="Dein Name" data-en="Your name">Dein Name</label>
|
||
<input type="text" placeholder="Max Mustermann" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label data-de="E-Mail" data-en="Email">E-Mail</label>
|
||
<input type="email" placeholder="deine@email.de" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label data-de="Passwort" data-en="Password">Passwort</label>
|
||
<input type="password" placeholder="••••••••" />
|
||
</div>
|
||
<a href="admin.html"><button class="btn-primary btn-full" data-de="Kostenlos registrieren" data-en="Register for free">Kostenlos registrieren</button></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let currentLang = 'de';
|
||
function toggleLang() {
|
||
currentLang = currentLang === 'de' ? 'en' : 'de';
|
||
document.getElementById('langBtn').textContent = currentLang === 'de' ? 'EN' : 'DE';
|
||
document.querySelectorAll('[data-de]').forEach(el => {
|
||
const val = el.getAttribute('data-' + currentLang);
|
||
if (val) el.innerHTML = val;
|
||
});
|
||
}
|
||
function openModal(tab) {
|
||
document.getElementById('modalOverlay').classList.add('active');
|
||
switchTab(tab);
|
||
}
|
||
function closeModal() { document.getElementById('modalOverlay').classList.remove('active'); }
|
||
function closeModalOutside(e) { if (e.target === document.getElementById('modalOverlay')) closeModal(); }
|
||
function switchTab(tab) {
|
||
document.getElementById('tabLogin').classList.toggle('active', tab === 'login');
|
||
document.getElementById('tabRegister').classList.toggle('active', tab === 'register');
|
||
document.getElementById('formLogin').classList.toggle('active', tab === 'login');
|
||
document.getElementById('formRegister').classList.toggle('active', tab === 'register');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|