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
$directories = ['css', 'js', 'data'];
foreach ($directories as $dir) {
if (!is_dir($dir)) mkdir($dir, 0755, true);
}
if (!file_exists('.htaccess')) {
$htaccess = "RewriteEngine On\nRewriteCond %{REQUEST_FILENAME} !-f\nRewriteCond %{REQUEST_FILENAME} !-d\nRewriteRule ^ index.php [L]\n\n<Files \"data/database.sqlite\">\n Order allow,deny\n Deny from all\n</Files>";
file_put_contents('.htaccess', $htaccess);
}
$css = ":root{--primary:#ff477e;--primary-dark:#e6396e;--secondary:#7f00ff;--dark:#1a1a1a;--light:#ffffff;--ease:cubic-bezier(0.23,1,0.32,1)} @keyframes gradientBg{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @keyframes float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}} @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)}} @keyframes slideUpFade{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} body{font-family:'Inter',system-ui,-apple-system,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} .container{max-width:900px;margin:0 auto;padding:60px 20px;position:relative;z-index:1} .bg-circle{position:fixed;border-radius:50%;filter:blur(60px);opacity:0.5;z-index:0;animation:float 10s infinite ease-in-out} .circle-1{width:400px;height:400px;background:var(--secondary);top:-100px;right:-100px} .circle-2{width:300px;height:300px;background:var(--primary);bottom:-50px;left:-100px;animation-delay:-2s} header{text-align:center;margin-bottom:60px;animation:slideUpFade 1s var(--ease)} h1{font-size:3.5rem;font-weight:800;margin-bottom:10px;background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-2px} .subtitle{font-size:1.2rem;color:#555;max-width:600px;margin:0 auto} .card{background:rgba(255,255,255,0.7);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);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);transition:transform .3s var(--ease),box-shadow .3s var(--ease);animation:slideUpFade 1s var(--ease) .2s both} .card:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 35px 60px -12px rgba(255,71,126,0.15)} .form-group{position:relative;margin-bottom:30px} label{font-weight:600;color:#444;display:block;margin-bottom:10px;font-size:.95rem;text-transform:uppercase;letter-spacing:1px} 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;box-shadow:inset 0 2px 4px rgba(0,0,0,0.05)} input:focus,select:focus{border-color:var(--primary);background:#fff;transform:scale(1.02);box-shadow:0 10px 20px rgba(255,71,126,.1)} .btn-calc{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:white;border:none;padding:20px 40px;border-radius:50px;cursor:pointer;font-weight:700;width:100%;font-size:1.2rem;text-transform:uppercase;letter-spacing:2px;transition:all .4s var(--ease);animation:pulse 2s infinite} .btn-calc:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 15px 30px rgba(127,0,255,0.3);animation:none} .result-box{margin-top:40px;padding:30px;border-radius:20px;background:linear-gradient(135deg,#fff 0%,#fff0f5 100%);border:2px solid var(--primary);animation:slideUpFade .6s var(--ease) both;display:flex;flex-direction:column;gap:15px;text-align:center} .result-item{font-size:1.1rem} .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;box-shadow:0 5px 10px rgba(255,71,126,0.2)} .faq-section{margin-top:80px;animation:slideUpFade 1s var(--ease) .4s both} h2{font-size:2.2rem;color:var(--dark);margin-bottom:30px;text-align:center} .faq-item{background:rgba(255,255,255,0.6);backdrop-filter:blur(10px);margin-bottom:15px;padding:25px;border-radius:15px;box-shadow:0 5px 15px rgba(0,0,0,0.03);transition:all .3s ease;border:1px solid rgba(255,255,255,0.5)} .faq-item:hover{transform:translateX(10px);background:#fff;border-color:var(--secondary)} .faq-item h3{margin-top:0;color:var(--secondary);font-size:1.3rem} footer{text-align:center;padding:60px 0 30px;color:#666;font-size:1rem;position:relative;z-index:1} footer a{color:var(--secondary);text-decoration:none;font-weight:bold;position:relative} footer a::after{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px;bottom:-3px;left:0;background-color:var(--primary);transform-origin:bottom right;transition:transform .3s var(--ease)} footer a:hover::after{transform:scaleX(1);transform-origin:bottom left} @media (max-width:600px){h1{font-size:2.2rem}.card{padding:30px 20px}.container{padding:30px 15px}}";
file_put_contents('css/style.css', $css);
if (!file_exists('js/script.js')) {
$js = "document.addEventListener('DOMContentLoaded', () => { console.log('Dreamcodes Engine Loaded'); });";
file_put_contents('js/script.js', $js);
}
try {
$db = new PDO('sqlite:data/database.sqlite');
$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' => $ovulation_date->format('Y-m-d')
];
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>High-Precision Eisprungrechner 2026 | Fruchtbare Tage berechnen | Dreamcodes</title>
<meta name="description" content="Berechnen Sie Ihren Eisprung mit maximaler Präzision. Modernster Algorithmus für fruchtbare Tage. Inklusive Experten-FAQ und Video-Tutorials.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌸</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Eisprungrechner Pro by Dreamcodes",
"operatingSystem": "All",
"applicationCategory": "HealthApplication",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "EUR" },
"featureList": "Eisprungberechnung, Fruchtbarkeitsfenster, Zykluskalender"
}
</script>
</head>
<body>
<div class="bg-circle circle-1"></div>
<div class="bg-circle circle-2"></div>
<div class="container">
<header>
<h1>Eisprung<span style="color:var(--secondary)">rechner</span></h1>
<p class="subtitle">Entdecken Sie Ihren Körper neu. Unser Algorithmus berechnet Ihre fruchtbarsten Tage sekundenschnell und präzise.</p>
</header>
<main class="card">
<form id="ovulationForm" method="POST" action="#result">
<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' : 'Durchschnitt' ?>)
</option>
<?php endfor; ?>
</select>
</div>
<button type="submit" class="btn-calc">Analyse starten</button>
</form>
<?php if ($result): ?>
<div id="result" class="result-box">
<div class="result-item">
Dein berechneter Eisprung:<br>
<span class="result-date"><?= $result['ovulation'] ?></span>
</div>
<div class="result-item" style="border-top: 1px solid rgba(0,0,0,0.05); padding-top: 15px;">
Deine fruchtbarste Phase:<br>
<span class="result-date" style="background: var(--secondary);"><?= $result['start'] ?> - <?= $result['end'] ?></span>
</div>
<p style="font-size:0.85rem; color: #888; margin-top: 10px;">
💡 Tipp: Die höchste Wahrscheinlichkeit einer Empfängnis besteht am Tag des Eisprungs und am Tag davor.
</p>
</div>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Event",
"name": "Voraussichtlicher Eisprung",
"startDate": "<?= $result['iso_ovulation'] ?>",
"location": { "@type": "Place", "name": "Virtuelle Berechnung" },
"description": "Ihr berechneter Ovulationstermin."
}
</script>
<?php endif; ?>
</main>
<section class="faq-section">
<h2>Deep Dive: Zykluswissen & Tutorials</h2>
<div class="faq-item">
<h3>🎥 Video-Tutorial: Die Basaltemperaturmethode</h3>
<p>Lernen Sie in diesem kurzen Guide, wie Sie durch tägliches Messen der Aufwachtemperatur Ihren Eisprung noch genauer eingrenzen können. (Video-Integration hier möglich)</p>
</div>
<div class="faq-item">
<h3>Der LH-Anstieg einfach erklärt</h3>
<p>Das Luteinisierende Hormon (LH) löst den Eisprung aus. Ovulationstests reagieren auf dieses Hormon. Erfahren Sie, wann der perfekte Zeitpunkt für einen Test ist.</p>
</div>
<h2>Häufig gestellte Fragen</h2>
<div itemscope itemtype="https://schema.org/FAQPage">
<div class="faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name">Kann sich der Eisprung verschieben?</h3>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
Ja, Stress, Krankheit oder Reisen können den Zyklus beeinflussen. Daher ist ein Rechner immer als Richtwert zu sehen.
</div>
</div>
</div>
<div class="faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name">Wann ist die Chance auf eine Schwangerschaft am höchsten?</h3>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
Im "fruchtbaren Fenster", das etwa 5 Tage vor dem Eisprung beginnt und einen Tag danach endet.
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<p>© 2026 · <a href="https://www.dreamcodes.net" target="_blank" rel="noopener">Dreamcodes</a></p>
</footer>
<script src="js/script.js"></script>
</body>
</html>
