71 lines
2.9 KiB
Plaintext
71 lines
2.9 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 – Mitgliedschaft verlängern</title>
|
||
<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 class="signup-main">
|
||
<div class="signup-container" style="max-width:680px">
|
||
<h2 class="step-title bold" style="margin-bottom:8px">Mitgliedschaft verlängern</h2>
|
||
<p class="step-subtitle">Hallo <%= request.first_name %>! Wähle deinen neuen Tarif.</p>
|
||
|
||
<% if (success) { %>
|
||
<div class="alert alert-success" style="margin-bottom:24px"><%= success %></div>
|
||
<a href="/" class="btn btn-primary">Zurück zur Startseite</a>
|
||
<% } else { %>
|
||
<% if (error) { %><div class="alert alert-error"><%= error %></div><% } %>
|
||
|
||
<form method="POST" action="/renew/<%= request.token %>">
|
||
<div class="tarif-grid" style="margin-bottom:24px">
|
||
<% tariffs.forEach(tariff => { %>
|
||
<label class="tarif-card renewal-tarif-card">
|
||
<input type="radio" name="tariff_id" value="<%= tariff.id %>" required
|
||
style="display:none" class="tarif-radio">
|
||
<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>
|
||
</div>
|
||
</label>
|
||
<% }) %>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary btn-full">Mitgliedschaft verlängern →</button>
|
||
</form>
|
||
<% } %>
|
||
</div>
|
||
</main>
|
||
<footer class="site-footer">
|
||
<p>© 2024 PlusFit24 UG</p>
|
||
</footer>
|
||
<script>
|
||
// Tarif-Karte anklicken → Radio aktivieren
|
||
document.querySelectorAll('.renewal-tarif-card').forEach(card => {
|
||
card.addEventListener('click', () => {
|
||
document.querySelectorAll('.renewal-tarif-card').forEach(c => c.style.borderColor = '');
|
||
card.style.borderColor = '#2d2dcc';
|
||
card.querySelector('input').checked = true;
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|