77 lines
2.7 KiB
Plaintext
77 lines
2.7 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>PlusFit24 – Tarif Wählen</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
</head>
|
||
<body>
|
||
<header class="site-header">
|
||
<div class="header-inner">
|
||
<div class="logo">Plusfit<span>24</span></div>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- Progress bar (step 1) -->
|
||
<nav class="progress-nav">
|
||
<span class="step active">TARIF</span>
|
||
<span class="step-dot active"></span>
|
||
<span class="step">4</span>
|
||
<span class="step-dot"></span>
|
||
<span class="step">ANSCHRIFT</span>
|
||
<span class="step-dot"></span>
|
||
<span class="step">LASTSCHRIFT</span>
|
||
<span class="step-dot"></span>
|
||
<span class="step">ABSCHLUSS</span>
|
||
</nav>
|
||
|
||
<section class="tarif-section">
|
||
<h1 class="page-title">Tarif Wählen</h1>
|
||
|
||
<% if (error) { %>
|
||
<div class="alert alert-error"><%= error %></div>
|
||
<% } %>
|
||
|
||
<div class="tarif-grid">
|
||
<% tariffs.forEach(tariff => { %>
|
||
<div class="tarif-card">
|
||
<div class="tarif-card-inner">
|
||
<div class="tarif-badge">
|
||
<span class="tarif-icon">◑</span>
|
||
<span><%= tariff.name %></span>
|
||
</div>
|
||
<h2 class="tarif-name"><%= tariff.name %></h2>
|
||
<div class="tarif-feature">
|
||
<span class="feature-icon">📦</span>
|
||
<span>Startpaket <%= Number(tariff.start_package_price).toFixed(2).replace('.', ',') %>€/einmalig</span>
|
||
</div>
|
||
<div class="tarif-price">
|
||
<span class="price-amount"><%= Number(tariff.price_monthly).toFixed(2).replace('.', ',') %>€</span>
|
||
<span class="price-period">/Monat</span>
|
||
</div>
|
||
<a href="/anmelden/<%= tariff.id %>" class="btn btn-primary btn-full">
|
||
Tarif auswählen
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<% }) %>
|
||
|
||
<% if (tariffs.length === 0) { %>
|
||
<div class="no-tarifs">
|
||
<p>Aktuell sind keine Tarife verfügbar. Bitte versuche es später erneut.</p>
|
||
</div>
|
||
<% } %>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<p>© 2024 PlusFit24 UG · <a href="https://plusfit24.de/datenschutz-2/" target="_blank">Datenschutz</a> · <a href="/public/pdfs/AG_PlusFit24.pdf" target="_blank">AGB</a></p>
|
||
</footer>
|
||
</body>
|
||
</html>
|