Unser Script SubScrub Pro ist ein psychologisch optimiertes Tool zur Analyse von Abo Fixkosten. Es zeigt Nutzern nicht nur ihre jährlichen Ausgaben, sondern berechnet sofort, wie viel dieses Geld bei einer Anlage in einen ETF wert wäre. Ein mächtiger Konvertierungs Hebel für Affiliate Marketing (Depot Vergleiche oder Sparpläne). Minimalistisches Design, blitzschnell und SEO optimiert für 2026.
<?php
$cssPath = 'css/subscrub.css';
// --- SETUP BLOCK: SELBSTLÖSCHEND ---
if (!file_exists($cssPath)) {
if (!is_dir('css')) mkdir('css', 0755, true);
$css = ":root { --primary: #3b82f6; --danger: #ef4444; --success: #10b981; --bg: #0f172a; --card: rgba(30, 41, 59, 0.8); --text: #f8fafc; --muted: #94a3b8; }\n";
$css .= "body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; margin: 0; padding: 0; }\n";
$css .= ".wrapper { max-width: 1000px; margin: 60px auto; padding: 20px; }\n";
$css .= ".hero { text-align: center; margin-bottom: 50px; }\n";
$css .= ".hero h1 { font-size: 3rem; font-weight: 900; background: linear-gradient(to right, #60a5fa, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; }\n";
$css .= ".hero h1 span { color: #fff; -webkit-text-fill-color: #fff; }\n";
$css .= ".main-box { background: var(--card); backdrop-filter: blur(20px); border-radius: 35px; padding: 40px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 25px 50px rgba(0,0,0,0.5); }\n";
$css .= ".grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }\n";
$css .= ".title-sm { margin-bottom: 20px; font-weight: 700; }\n";
$css .= ".service-item { display: flex; align-items: center; background: rgba(255,255,255,0.03); padding: 15px 20px; border-radius: 18px; margin-bottom: 12px; transition: 0.3s; border: 1px solid transparent; }\n";
$css .= ".service-item:hover { background: rgba(255,255,255,0.06); border-color: var(--primary); }\n";
$css .= ".service-item input[type='checkbox'] { width: 22px; height: 22px; margin-right: 15px; cursor: pointer; }\n";
$css .= ".service-name { flex-grow: 1; font-weight: 600; }\n";
$css .= ".service-price { width: 80px; background: #1e293b; border: 1px solid #334155; color: #fff; padding: 8px; border-radius: 10px; text-align: center; }\n";
$css .= ".btn-calc { width: 100%; background: var(--primary); color: #fff; border: none; padding: 20px; border-radius: 18px; font-size: 1.2rem; font-weight: 800; cursor: pointer; margin-top: 20px; transition: 0.3s; }\n";
$css .= ".btn-calc:hover { filter: brightness(1.1); transform: translateY(-2px); }\n";
$css .= ".shocker { text-align: center; padding: 30px; border-radius: 25px; background: rgba(239, 68, 68, 0.1); border: 1px solid var(--danger); margin-bottom: 30px; }\n";
$css .= ".shocker label { color: var(--danger); font-weight: 800; text-transform: uppercase; display: block; margin-bottom: 5px; }\n";
$css .= ".shocker-val { font-size: 3.5rem; font-weight: 900; color: var(--danger); display: block; }\n";
$css .= ".future-card { padding: 30px; border-radius: 25px; background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success); text-align: center; }\n";
$css .= ".future-card label { color: var(--success); font-weight: 800; text-transform: uppercase; display: block; margin-bottom: 5px; }\n";
$css .= ".future-val { font-size: 3rem; font-weight: 900; color: var(--success); display: block; }\n";
$css .= ".sub-info { margin-top: 20px; text-align: center; opacity: 0.6; font-size: 0.9rem; }\n";
$css .= ".empty-state { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0.3; }\n";
$css .= ".faq-section { margin-top: 80px; }\n";
$css .= ".faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; }\n";
$css .= ".faq-card { background: rgba(255,255,255,0.03); padding: 30px; border-radius: 25px; }\n";
$css .= ".faq-card h4 { margin-top: 0; margin-bottom: 10px; }\n";
$css .= ".faq-card p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }\n";
$css .= "footer { text-align: center; padding: 80px; opacity: 0.6; font-weight: 600; }\n";
$css .= "footer a { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--primary); }";
file_put_contents($cssPath, $css);
$fileContent = file_get_contents(__FILE__);
$cleanContent = preg_replace('/(\/\/ --- SETUP BLOCK).*?(\/\/ --- END SETUP BLOCK ---)/s', '// Setup abgeschlossen.', $fileContent);
file_put_contents(__FILE__, $cleanContent);
}
// --- END SETUP BLOCK ---
$total_monthly = 0; $services_active = [];
$default_services = ['Netflix' => 17.99, 'Spotify' => 10.99, 'Disney+' => 8.99, 'DAZN' => 29.99, 'Amazon Prime' => 8.99, 'ChatGPT Plus' => 20.00];
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_POST['subs'])) {
foreach ($_POST['subs'] as $name) {
$price = (float)$_POST['prices'][$name];
$total_monthly += $price;
$services_active[] = $name;
}
}
$years = 10; $rate = 0.07; $future_val = 0;
for ($i = 0; $i < ($years * 12); $i++) { $future_val = ($future_val + $total_monthly) * (1 + ($rate / 12)); }
$total_yearly = $total_monthly * 12;
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SubScrub Pro | Abo-Kosten Rechner 2026</title>
<link rel="stylesheet" href="<?= $cssPath ?>">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header class="hero">
<h1>Sub<span>Scrub</span> Pro</h1>
<p>Dein Abo-Check: Vom monatlichen Kleingeld zum kleinen Vermögen.</p>
</header>
<div class="main-box">
<form method="POST">
<div class="grid">
<div class="selection-area">
<h3 class="title-sm">Deine Abos wählen</h3>
<?php foreach ($default_services as $name => $price): ?>
<div class="service-item">
<input type="checkbox" name="subs[]" value="<?= $name ?>" <?= in_array($name, $services_active) ? 'checked' : '' ?>>
<span class="service-name"><?= $name ?></span>
<input type="number" step="0.01" name="prices[<?= $name ?>]" class="service-price" value="<?= $price ?>">
</div>
<?php endforeach; ?>
<button type="submit" class="btn-calc">Kosten analysieren</button>
</div>
<div class="result-area">
<?php if (isset($total_yearly)): ?>
<div class="shocker">
<label>Kosten pro Jahr</label>
<span class="shocker-val"><?= number_format($total_yearly, 2, ',', '.') ?> €</span>
<p>Das zahlst du jedes Jahr für diese Dienste.</p>
</div>
<div class="future-card">
<label>Die Opportunity-Kosten</label>
<span class="future-val"><?= number_format($future_val, 0, ',', '.') ?> €</span>
<p>Betrag nach 10 Jahren bei 7% p.a. Investment.</p>
</div>
<div class="sub-info">
<p>Zinsgewinn allein: <?= number_format($future_val - ($total_yearly * 10), 2, ',', '.') ?> €</p>
</div>
<?php else: ?>
<div class="empty-state">
<p>Wähle deine Abos links aus,<br>um den Spar-Check zu starten.</p>
</div>
<?php endif; ?>
</div>
</div>
</form>
</div>
<div class="faq-section">
<h2 class="hero">Warum dieser Rechner?</h2>
<div class="faq-grid">
<div class="faq-card">
<h4 style="color:var(--primary)">Der Salami-Taktik Effekt</h4>
<p>Kleine Beträge fühlen sich harmlos an, summieren sich aber unbemerkt zu riesigen Jahresbeträgen.</p>
</div>
<div class="faq-card">
<h4 style="color:var(--success)">Macht der Reinvestition</h4>
<p>Jeder gesparte Euro arbeitet durch den Zinseszins über Jahre hinweg für deinen Vermögensaufbau.</p>
</div>
</div>
</div>
<footer>
© 2026 · Entwickelt von <a href="https://www.dreamcodes.net" target="_blank">Dreamcodes</a>
</footer>
</div>
</body>
</html>
