<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Notfall-Kontakt</title>
  <style>
    :root{--bg:#0f1724;--card:#0b1220;--accent:#06b6d4;--muted:#94a3b8;--white:#e6eef8}
    body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--white);
         background:linear-gradient(180deg,#00101a 0%,#072230 100%)}
    .wrap{max-width:760px;margin:28px auto;padding:18px}
    .card{background:rgba(255,255,255,0.03);padding:20px;border-radius:14px;
          box-shadow:0 6px 18px rgba(2,6,23,0.6)}
    header{display:flex;gap:16px;align-items:center}
    .avatar{width:84px;height:84px;border-radius:12px;
            background:linear-gradient(135deg,var(--accent),#7c3aed);
            display:flex;align-items:center;justify-content:center;
            font-weight:700;font-size:28px}
    h1{margin:0;font-size:20px}
    .label{font-size:12px;color:var(--muted);margin-top:14px}
    .value{font-size:16px;margin:4px 0 10px}
    .buttons{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
    a.btn{background:var(--accent);color:#042027;padding:10px 14px;
          border-radius:10px;font-weight:600;text-decoration:none}
    footer{margin-top:14px;font-size:12px;color:var(--muted)}
  </style>
</head>
<body>
  <main class="wrap">
    <div class="card">
      <header>
        <div class="avatar" id="avatar">KD</div>
        <div>
          <h1 id="childName">[Name Deiner Tochter]</h1>
          <p class="label">Letzte Aktualisierung: <span id="updated"></span></p>
        </div>
      </header>

      <div class="label">Eltern</div>
      <div class="value" id="parents"></div>

      <div class="label">Adresse</div>
      <div class="value"><a id="mapLink" target="_blank"></a></div>

      <div class="label">Medizinische Infos</div>
      <div class="value" id="medical"></div>

      <div class="label">Standort senden</div>
      <div class="buttons">
        <a class="btn" id="waMutter"> WhatsApp an Mutter</a>
        <a class="btn" id="waVater"> WhatsApp an Vater</a>
        <a class="btn" id="smsMutter">✉️ SMS an Mutter</a>
        <a class="btn" id="smsVater">✉️ SMS an Vater</a>
      </div>

      <footer>⚠️ Nur an vertrauenswürdige Personen weitergeben.</footer>
    </div>
  </main>

<script>
const config = {
  childName: "Mathilda Ayasse",
  parent1: {name: "Mutter", phone: "+491234567890"},
  parent2: {name: "Vater", phone: "+4917621001216"},
  address: "Musterstraße 1, 12345 Musterstadt",
  medical: "Allergien: Keine • Medikation: Keine • Blutgruppe: A+",
  updated: new Date().toLocaleDateString('de-DE')
};

// Seite füllen
document.getElementById('childName').textContent = config.childName;
document.getElementById('avatar').textContent = config.childName.split(" ").map(s=>s[0]).slice(0,2).join('');
document.getElementById('updated').textContent = config.updated;
document.getElementById('parents').innerHTML =
  `${config.parent1.name}: <a href="tel:${config.parent1.phone}">${config.parent1.phone}</a><br>`+
  `${config.parent2.name}: <a href="tel:${config.parent2.phone}">${config.parent2.phone}</a>`;
document.getElementById('mapLink').href = "https://maps.google.com/?q="+encodeURIComponent(config.address);
document.getElementById('mapLink').textContent = config.address;
document.getElementById('medical').textContent = config.medical;

function normalizeWa(number){ return number.replace(/[^0-9]/g,''); }
function normalizeSms(number){ return number.replace(/[^0-9+]/g,''); }

function getLocationText(cb){
  if(!navigator.geolocation){
    cb("Standort nicht verfügbar");
    return;
  }
  navigator.geolocation.getCurrentPosition(pos=>{
    const lat = pos.coords.latitude.toFixed(6);
    const lon = pos.coords.longitude.toFixed(6);
    cb(`https://maps.google.com/?q=${lat},${lon}`);
  },err=>{
    cb("Standort nicht verfügbar");
  });
}

function sendWhatsApp(to){
  getLocationText(loc=>{
    const msg = `Notfall: Standort von ${config.childName}: ${loc}`;
    window.location.href = `https://wa.me/${normalizeWa(to)}?text=${encodeURIComponent(msg)}`;
  });
}
function sendSms(to){
  getLocationText(loc=>{
    const msg = `Notfall: Standort von ${config.childName}: ${loc}`;
    const r = normalizeSms(to);
    window.location.href = `sms:${encodeURIComponent(r)}?&body=${encodeURIComponent(msg)}`;
  });
}

// Event-Handler
document.getElementById('waMutter').onclick = e => {e.preventDefault(); sendWhatsApp(config.parent1.phone);};
document.getElementById('waVater').onclick  = e => {e.preventDefault(); sendWhatsApp(config.parent2.phone);};
document.getElementById('smsMutter').onclick = e => {e.preventDefault(); sendSms(config.parent1.phone);};
document.getElementById('smsVater').onclick  = e => {e.preventDefault(); sendSms(config.parent2.phone);};
</script>
</body>
</html>