Freitag, 10 April 2026

Diese Woche am beliebtesten

Vertiefendes Material

BioAge Pro Script

Steigern Sie die Attraktivität Ihrer Webseite mit einem interaktiven praktische Tool. Unser BioAge Pro Rechner ist ein schlüsselfertiges PHP Script, das biologische Alterswerte für Menschen und Haustiere präzise ermittelt. Dank des modernen Dashboard Designs und der intuitiven Bedienung ist es ein echter Besuchermagnet.

Warum Sie dieses Script installieren sollten:

  • 3 in 1 Funktionalität: Ein Tool für die ganze Familie (inklusive Hund und Katze).
  • Wissenschaftlicher Mehrwert: Nutzt aktuelle veterinärmedizinische Standards statt veralteter Mythen.
  • SEO Powerhouse: Inklusive Daten (Schema.org), Meta Tags und Content Silos (FAQs), damit Google gerne vorbeischaut.
  • Performance: Extrem schneller Page Speed durch kompakten CSS und PHP Code.
  • 100% Privat: Keine externe Datenverarbeitung via API, volle Kontrolle auf Ihrem eigenen Server.

Ideal für Tier Blogs, Gesundheitsportale oder als eigenständiges Tool Projekt. Starten Sie jetzt Ihr eigenes Informationszentrum für biologische Altersbestimmung!

<?php
$cssPath = 'css/style.css';
// --- SETUP BLOCK: DIESER TEIL LÖSCHT SICH SELBST ---
if (!file_exists($cssPath)) {
    if (!is_dir('css')) mkdir('css', 0755, true);
    $css = ":root { --primary: #4f46e5; --dog: #f59e0b; --cat: #10b981; --bg: #f3f4f6; --card-bg: rgba(255, 255, 255, 0.9); --text: #1f2937; --muted: #6b7280; }\n";
    $css .= "body { background: #eef2f3; background-image: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 100%); color: var(--text); font-family: 'Inter', sans-serif; margin: 0; padding: 0; line-height: 1.6; }\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: 3.5rem; font-weight: 900; letter-spacing: -2px; margin: 0; color: #111827; }\n";
    $css .= ".hero h1 span { color: var(--primary); }\n";
    $css .= ".hero p { color: var(--muted); font-size: 1.2rem; }\n";
    $css .= ".main-box { background: var(--card-bg); backdrop-filter: blur(20px); border-radius: 40px; padding: 50px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1); border: 1px solid #ffffff; }\n";
    $css .= ".mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }\n";
    $css .= ".mode-btn { background: #fff; border: 2px solid #f3f4f6; padding: 20px; border-radius: 24px; cursor: pointer; transition: 0.3s; font-size: 1rem; font-weight: 700; color: #4b5563; display: flex; flex-direction: column; align-items: center; gap: 10px; }\n";
    $css .= ".mode-btn:hover { transform: translateY(-5px); border-color: var(--primary); }\n";
    $css .= ".mode-btn.active { border-color: var(--primary); background: #eff6ff; color: var(--primary); box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.1); }\n";
    $css .= ".field-group { margin-bottom: 20px; }\n";
    $css .= ".field-label { font-weight: 700; color: #374151; margin-bottom: 12px; display: block; }\n";
    $css .= ".input-field { width: 100%; padding: 22px; border-radius: 20px; border: 2px solid #e5e7eb; font-size: 1.3rem; background: #fff; box-sizing: border-box; transition: 0.3s; }\n";
    $css .= ".submit { width: 100%; background: var(--primary); color: #fff; border: none; padding: 22px; border-radius: 20px; font-size: 1.3rem; font-weight: 800; margin-top: 25px; cursor: pointer; transition: 0.3s; }\n";
    $css .= ".submit:hover { filter: brightness(1.2); transform: scale(1.02); }\n";
    $css .= ".result-banner { margin-top: 40px; padding: 40px; border-radius: 30px; text-align: center; border: 1px solid rgba(0,0,0,0.05); }\n";
    $css .= ".res-tag { font-weight: 800; text-transform: uppercase; letter-spacing: 2px; }\n";
    $css .= ".res-val { font-size: 5rem; font-weight: 900; display: block; line-height: 1; margin: 10px 0; }\n";
    $css .= ".res-unit { font-weight: 700; font-size: 1.5rem; }\n";
    $css .= ".mode-human { background: rgba(79, 70, 229, 0.05); border-color: rgba(79, 70, 229, 0.15); color: var(--primary); }\n";
    $css .= ".mode-dog { background: rgba(245, 158, 11, 0.05); border-color: rgba(245, 158, 11, 0.15); color: var(--dog); }\n";
    $css .= ".mode-cat { background: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.15); color: var(--cat); }\n";
    $css .= ".table-section { margin-top: 80px; text-align: center; }\n";
    $css .= ".compare-table { width: 100%; max-width: 900px; margin: 30px auto; border-collapse: separate; border-spacing: 0; border-radius: 25px; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05); }\n";
    $css .= ".compare-table th { background: #111827; color: #fff; padding: 25px; font-size: 1rem; text-transform: uppercase; }\n";
    $css .= ".compare-table td { background: #fff; padding: 20px; border-bottom: 1px solid #f3f4f6; font-size: 1.1rem; }\n";
    $css .= ".faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 60px; }\n";
    $css .= ".faq-card { background: #fff; padding: 35px; border-radius: 30px; border: 1px solid #e5e7eb; transition: 0.3s; }\n";
    $css .= ".faq-card:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05); }\n";
    $css .= ".faq-card h3 { color: var(--text); margin-top: 0; }\n";
    $css .= ".faq-card p { color: var(--muted); margin-bottom: 0; }\n";
    $css .= "footer { text-align: center; padding: 60px; opacity: 0.5; font-weight: 600; }\n";
    $css .= "footer a { color: var(--primary); text-decoration: none; }";
    file_put_contents($cssPath, $css);

    $fileContent = file_get_contents(__FILE__);
    $cleanContent = preg_replace('/(\/\/ --- SETUP BLOCK).*?(\/\/ --- END SETUP BLOCK ---)/s', '// Setup erfolgreich abgeschlossen.', $fileContent);
    file_put_contents(__FILE__, $cleanContent);
}
// --- END SETUP BLOCK ---
$res = null;
$mode = $_POST['mode'] ?? 'human';
if (!empty($_POST['dob'])) {
    $birth = new DateTime($_POST['dob']);
    $now = new DateTime();
    $diff = $now->diff($birth);
    $y = $diff->y + ($diff->m / 12);
    
    $finalValue = $diff->y;
    if ($mode == 'dog') {
        $finalValue = ($y <= 1) ? $y*15 : (($y <= 2) ? 15+($y-1)*9 : 24+($y-2)*5);
    } elseif ($mode == 'cat') {
        $finalValue = ($y <= 1) ? $y*15 : (($y <= 2) ? 15+($y-1)*9 : 24+($y-2)*4);
    }
    $res = [
        'v' => round($finalValue, 1), 
        'l' => ucfirst($mode).'jahre',
        'class' => 'mode-'.$mode
    ];
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BioAge Pro 2026 | Altersrechner für Mensch, Hund & Katze</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>Bio<span>Age</span> Pro</h1>
        <p>Präzise Altersbestimmung nach biologischen Standards 2026.</p>
    </header>
    <main class="main-box">
        <form method="POST">
            <input type="hidden" name="mode" id="mInput" value="<?= $mode ?>">
            <nav class="mode-grid">
                <button type="button" class="mode-btn <?= $mode=='human'?'active':'' ?>" onclick="setM('human', this)"><span>👤</span> Mensch</button>
                <button type="button" class="mode-btn <?= $mode=='dog'?'active':'' ?>" onclick="setM('dog', this)"><span>🐶</span> Hund</button>
                <button type="button" class="mode-btn <?= $mode=='cat'?'active':'' ?>" onclick="setM('cat', this)"><span>🐱</span> Katze</button>
            </nav>
            <div class="field-group">
                <label for="dob" class="field-label">Wann war die Geburt?</label>
                <input type="date" id="dob" name="dob" class="input-field" required value="<?= $_POST['dob'] ?? '' ?>">
            </div>
            <button type="submit" class="submit">Jetzt biologisch analysieren</button>
        </form>
        <?php if ($res): ?>
        <section class="result-banner <?= $res['class'] ?>">
            <span class="res-tag">Biologisches Alter</span>
            <span class="res-val"><?= $res['v'] ?></span>
            <span class="res-unit"><?= $res['l'] ?></span>
        </section>
        <?php endif; ?>
    </main>
    <section class="table-section">
        <h2>Direktvergleich der Lebensphasen</h2>
        <p>Wie die Zeit biologisch im Vergleich zu Menschenjahren vergeht.</p>
        <table class="compare-table">
            <thead><tr><th>Kalenderjahre</th><th>Mensch</th><th>Hund (ø)</th><th>Katze</th></tr></thead>
            <tbody>
                <tr><td>1 Jahr</td><td>Kleinkind</td><td>15 Jahre</td><td>15 Jahre</td></tr>
                <tr><td>2 Jahre</td><td>Kleinkind</td><td>24 Jahre</td><td>24 Jahre</td></tr>
                <tr><td>5 Jahre</td><td>Kind</td><td>39 Jahre</td><td>36 Jahre</td></tr>
                <tr><td>10 Jahre</td><td>Teenager</td><td>64 Jahre</td><td>56 Jahre</td></tr>
            </tbody>
        </table>
    </section>
    <section class="faq-grid">
        <article class="faq-card">
            <h3>Wissenschaft vs. Mythos</h3>
            <p>Die "Mal 7" Regel ist veraltet. Neueste Zellstudien belegen, dass Säugetiere in den ersten zwei Lebensjahren eine massive biologische Reife durchlaufen.</p>
        </article>
        <article class="faq-card">
            <h3>Katzen: Die Schleich Alterung</h3>
            <p>Nach der schnellen Reifephase altern Katzen sehr gleichmäßig, was ihre hohe Lebenserwartung von über 18 Jahren erklärt.</p>
        </article>
        <article class="faq-card">
            <h3>Präzision 2026</h3>
            <p>Unser Rechner basiert auf der 15-9-5 Formel (Hunde) und der 15-9-4 Formel (Katzen), dem Goldstandard der Veterinärmedizin.</p>
        </article>
        <article class="faq-card">
            <h3>Zweck der Analyse</h3>
            <p>Die Kenntnis des Alters hilft dabei, Ernährung und Vorsorge optimal auf die Lebensphase abzustimmen.</p>
        </article>
    </section>
    <footer>
        © 2026 · <a href="https://www.dreamcodes.net" target="_blank">Dreamcodes</a>
    </footer>
</div>
<script>
function setM(m, btn) {
    document.getElementById('mInput').value = m;
    document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
}
</script>
</body>
</html>
Dreamcodes Redaktion
Dreamcodes Redaktion
Qualität als Standard. Verantwortung als Prinzip. Jede Ressource auf Dreamcodes basiert auf geprüften Best Practices und fundierter Praxiserfahrung. Unser Anspruch ist ein belastbares Fundament statt experimenteller Lösungen. Die Integration und Absicherung der Inhalte liegt in Ihrem Ermessen. Wir liefern die fachliche Basis, die Verantwortung für den produktiven Einsatz verbleibt bei Ihnen.
Vorheriges Tutorial
Nächstes Tutorial

Vielleicht einen Blick WERT?