<h1>Yumurtlama ve Cinsiyet Hesaplama</h1>
<form>
    <label for="lastPeriod">Son Adet Tarihi:</label>
    <input type="date" id="lastPeriod" name="lastPeriod">
    <label for="cycleLength">Döngü Uzunluğu (Ortalama 28 gün):</label>
    <input type="number" id="cycleLength" name="cycleLength" value="28">
    <button type="button" onclick="calculateOvulation()">Hesapla</button>
</form>
<div id="result"></div>

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:300px;
  margin:0 auto;
  margin-top:30px;
}

.kiz {
  color: #d53854;
  font-weight:bold;
}

.erkek {
  color: #0087ff;
  font-weight:bold;
}

form {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #F6F7FC;
  padding: 15px;
  border-radius: 15px;
}

h1 {
  font-size:18px;
}

input {
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
border: none;
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 54px;
background: #fff;
}

label {
  font-size: 17px;
  margin-bottom: 5px;
  margin-top: 5px;
  color: #332c73;
  font-weight: bold;
}

button {
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #fff;
border: none;
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 54px;
background: #332c73;
margin-top:15px;
}

p {
  background: #F6F7FC;
  padding: 15px;
  border-radius: 15px;
  line-height: 20px;
}

function calculateOvulation() {
    var lastPeriod = new Date(document.getElementById("lastPeriod").value);
    var cycleLength = document.getElementById("cycleLength").value;
    var ovulationDate = new Date(lastPeriod);

    ovulationDate.setDate(ovulationDate.getDate() + (cycleLength / 2));
    var options = { year: 'numeric', month: 'long', day: 'numeric' };
    var ovulationDateString = ovulationDate.toLocaleDateString('tr-TR', options);

    var resultHTML = "<p>Yumurtlama tarihiniz: " + ovulationDateString + "</p>";
    // resultHTML += "<p>Yumurtlama tarihine göre cinsiyet tahmini bilimsel olarak desteklenmez, ancak bazı teorilere göre:</p>";

    var girlDate = new Date(ovulationDate);
    girlDate.setDate(girlDate.getDate() - 2);
    var boyDate = new Date(ovulationDate);
    boyDate.setDate(boyDate.getDate() + 1);

    resultHTML += "<p>" + girlDate.toLocaleDateString('tr-TR', options) + " tarihinden önce ilişkiye girerseniz, <span class='kiz'>kız</span> çocuğun doğma olasılığı daha yüksek olabilir.</p>";
    resultHTML += "<p>" + boyDate.toLocaleDateString('tr-TR', options) + " tarihinde veya sonrasında ilişkiye girerseniz, <span class='erkek'>erkek</span> çocuğun doğma olasılığı daha yüksek olabilir.</p>";

    document.getElementById("result").innerHTML = resultHTML;
}