Dieses Web Tool ist als autarkes Ökosystem konzipiert, das sich beim ersten Aufruf der index.php vollständig selbst konfiguriert. Durch ein Bootstrapping-Verfahren generiert das Skript autonom die notwendige Ordnerstruktur sowie die physischen Asset-Dateien für CSS und JavaScript, während im Hintergrund eine wartungsfreie SQLite-Datenbank initialisiert wird.
Strategisch fungiert die Seite genau als SEO Kraftpaket: Durch die tiefe Integration von Schema.org-Daten (JSON-LD) und die semantische HTML5 Struktur wird das Tool von Suchmaschinen als wertvolle Software Anwendung erkannt. Die Kombination aus Algorithmus, ausführlichen Tutorials und optimierten FAQ-Sektionen sorgt zudem für eine exzellente Abdeckung relevanter Long Tail Keywords, wodurch die Seite ideal für organisches Wachstum und hohe Conversion-Raten positioniert ist.
<?php
$cssPath = 'css/style.css';
$jsPath = 'js/script.js';
$dbPath = 'data/database.sqlite';
// --- SETUP BLOCK: SELBSTREINIGEND ---
if (!file_exists($cssPath)) {
foreach (['css', 'js', 'data'] as $dir) if (!is_dir($dir)) mkdir($dir, 0755, true);
$css = ":root{--primary:#ff477e;--primary-dark:#e6396e;--secondary:#7f00ff;--dark:#1a1a1a;--light:#ffffff;--ease:cubic-bezier(0.23,1,0.32,1)} ";
$css .= "@keyframes gradientBg{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} ";
$css .= "@keyframes float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}} ";
$css .= "@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,71,126,0.7)}70%{box-shadow:0 0 0 15px rgba(255,71,126,0)}100%{box-shadow:0 0 0 0 rgba(255,71,126,0)}} ";
$css .= "@keyframes slideUpFade{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} ";
$css .= "body{font-family:'Inter',sans-serif;background:linear-gradient(-45deg,#fff5f7,#ffe0e9,#e0f7fa,#fff);background-size:400% 400%;animation:gradientBg 15s ease infinite;color:var(--dark);margin:0;line-height:1.6;overflow-x:hidden} ";
$css .= ".container{max-width:900px;margin:0 auto;padding:60px 20px;position:relative;z-index:1} ";
$css .= ".bg-circle{position:fixed;border-radius:50%;filter:blur(60px);opacity:0.5;z-index:0;animation:float 10s infinite ease-in-out} ";
$css .= ".circle-1{width:400px;height:400px;background:var(--secondary);top:-100px;right:-100px} ";
$css .= ".circle-2{width:300px;height:300px;background:var(--primary);bottom:-50px;left:-100px;animation-delay:-2s} ";
$css .= "header{text-align:center;margin-bottom:60px;animation:slideUpFade 1s var(--ease)} ";
$css .= "h1{font-size:3.5rem;font-weight:800;margin:0;background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-2px} ";
$css .= "h1 span{color:var(--secondary);-webkit-text-fill-color:var(--secondary)} ";
$css .= ".subtitle{font-size:1.2rem;color:#555;max-width:600px;margin:20px auto 0} ";
$css .= ".card{background:rgba(255,255,255,0.7);backdrop-filter:blur(20px);border-radius:30px;padding:50px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.1);border:1px solid rgba(255,255,255,0.5);animation:slideUpFade 1s var(--ease) .2s both} ";
$css .= ".form-group{margin-bottom:30px} ";
$css .= "label{font-weight:600;color:#444;display:block;margin-bottom:10px;font-size:.95rem;text-transform:uppercase;letter-spacing:1px} ";
$css .= "input,select{width:100%;padding:18px 25px;border:2px solid transparent;border-radius:15px;outline:none;background:rgba(255,255,255,0.8);font-size:1.1rem;transition:all .3s var(--ease);box-sizing:border-box} ";
$css .= "input:focus,select:focus{border-color:var(--primary);background:#fff;transform:scale(1.02);box-shadow:0 10px 20px rgba(255,71,126,.1)} ";
$css .= ".btn-calc{background:linear-gradient(135deg,var(--primary),var(--secondary));color:white;border:none;padding:20px;border-radius:50px;cursor:pointer;font-weight:700;width:100%;font-size:1.2rem;text-transform:uppercase;letter-spacing:2px;animation:pulse 2s infinite} ";
$css .= ".result-box{margin-top:40px;padding:30px;border-radius:20px;background:#fff;border:2px solid var(--primary);animation:slideUpFade .6s var(--ease) both;text-align:center} ";
$css .= ".res-divider{border-top: 1px solid rgba(0,0,0,0.05); padding-top: 15px; margin-top: 15px;} ";
$css .= ".result-date{display:inline-block;padding:5px 15px;background:var(--primary);color:white;border-radius:10px;font-weight:bold;font-size:1.3rem;margin-top:5px} ";
$css .= ".result-date.alt{background:var(--secondary)} ";
$css .= ".faq-section{margin-top:80px} ";
$css .= ".faq-item{background:rgba(255,255,255,0.6);margin-bottom:15px;padding:25px;border-radius:15px;border:1px solid rgba(255,255,255,0.5)} ";
$css .= "footer{text-align:center;padding:60px 0;opacity:0.6} ";
$css .= "footer a{color:var(--secondary);text-decoration:none;font-weight:bold}";
file_put_contents($cssPath, $css);
file_put_contents($jsPath, "document.addEventListener('DOMContentLoaded',()=>console.log('Dreamcodes Engine Loaded'));");
}
// --- END SETUP BLOCK ---
try {
$db = new PDO("sqlite:$dbPath");
$db->exec("CREATE TABLE IF NOT EXISTS calculations (id INTEGER PRIMARY KEY, date TEXT, cycle INTEGER, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP)");
} catch (PDOException $e) {}
$result = null;
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['last_period'])) {
$last_period = new DateTime($_POST['last_period']);
$cycle_length = (int)$_POST['cycle_length'];
$ovulation_date = clone $last_period;
$ovulation_date->modify('+' . ($cycle_length - 14) . ' days');
$start_fertile = clone $ovulation_date;
$start_fertile->modify('-5 days');
$end_fertile = clone $ovulation_date;
$end_fertile->modify('+1 day');
$result = [
'ovulation' => $ovulation_date->format('d.m.Y'),
'start' => $start_fertile->format('d.m.Y'),
'end' => $end_fertile->format('d.m.Y'),
'iso' => $ovulation_date->format('Y-m-d')
];
$stmt = $db->prepare("INSERT INTO calculations (date, cycle) VALUES (?, ?)");
$stmt->execute([$_POST['last_period'], $cycle_length]);
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BioCycle Pro 2026 | Eisprung & Fruchtbarkeit berechnen</title>
<link rel="stylesheet" href="<?= $cssPath ?>">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-circle circle-1"></div>
<div class="bg-circle circle-2"></div>
<div class="container">
<header>
<h1>Eisprung<span>rechner</span></h1>
<p class="subtitle">Präzise Zyklusanalyse basierend auf biologischen Standards 2026.</p>
</header>
<main class="card">
<form method="POST">
<div class="form-group">
<label for="last_period">Beginn der letzten Periode</label>
<input type="date" name="last_period" id="last_period" required value="<?= $_POST['last_period'] ?? '' ?>">
</div>
<div class="form-group">
<label for="cycle_length">Ihre Zykluslänge</label>
<select name="cycle_length" id="cycle_length">
<?php for($i=22; $i<=40; $i++): ?>
<option value="<?= $i ?>" <?= (isset($_POST['cycle_length']) && $_POST['cycle_length'] == $i) ? 'selected' : ($i==28 ? 'selected' : '') ?>>
<?= $i ?> Tage <?= $i==28 ? '(Standard)' : '' ?>
</option>
<?php endfor; ?>
</select>
</div>
<button type="submit" class="btn-calc">Analyse starten</button>
</form>
<?php if ($result): ?>
<div class="result-box">
<div>
Dein berechneter Eisprung:<br>
<span class="result-date"><?= $result['ovulation'] ?></span>
</div>
<div class="res-divider">
Deine fruchtbarste Phase:<br>
<span class="result-date alt"><?= $result['start'] ?> - <?= $result['end'] ?></span>
</div>
</div>
<?php endif; ?>
</main>
<section class="faq-section">
<h2>Häufig gestellte Fragen</h2>
<div class="faq-item">
<h3>Wie genau ist die Berechnung?</h3>
<p>Dieser Rechner nutzt die Kalendermethode. Da biologische Prozesse schwanken können, dient das Ergebnis als präziser Richtwert für Ihre Planung.</p>
</div>
<div class="faq-item">
<h3>Was beeinflusst den Eisprung?</h3>
<p>Stress, Ernährungsumstellungen und Schlafrythmen können den Termin verschieben. Eine Kombination mit Ovulationstests wird empfohlen.</p>
</div>
</section>
<footer>
© 2026 · <a href="https://www.dreamcodes.net" target="_blank">Dreamcodes</a>
</footer>
</div>
<script src="<?= $jsPath ?>"></script>
</body>
</html>
