Kalkulator plodnih dana<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Gilroy:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Gilroy', sans-serif;\r\n background-color: #FFFFFF;\r\n padding: 20px;\r\n }\r\n\r\n .container {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n background-color: #ECEEF2;\r\n border-radius: 12px;\r\n padding: 40px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n h1 {\r\n color: #356ABA;\r\n font-size: 28px;\r\n margin-bottom: 15px;\r\n font-weight: 700;\r\n }\r\n\r\n .description {\r\n color: #333;\r\n font-size: 14px;\r\n line-height: 1.6;\r\n margin-bottom: 25px;\r\n background-color: #FFFFFF;\r\n padding: 15px;\r\n border-radius: 8px;\r\n border-left: 4px solid #356ABA;\r\n }\r\n\r\n .warning {\r\n background-color: #fff3cd;\r\n border: 1px solid #ffc107;\r\n color: #856404;\r\n padding: 12px 15px;\r\n border-radius: 6px;\r\n margin-bottom: 25px;\r\n font-size: 13px;\r\n font-weight: 500;\r\n }\r\n\r\n .form-section {\r\n background-color: #FFFFFF;\r\n padding: 25px;\r\n border-radius: 8px;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n label {\r\n display: block;\r\n color: #356ABA;\r\n font-weight: 600;\r\n margin-bottom: 10px;\r\n font-size: 14px;\r\n }\r\n\r\n .input-row {\r\n display: flex;\r\n gap: 15px;\r\n flex-wrap: wrap;\r\n align-items: flex-end;\r\n }\r\n\r\n select {\r\n padding: 10px 12px;\r\n border: 2px solid #356ABA;\r\n border-radius: 6px;\r\n font-family: 'Gilroy', sans-serif;\r\n font-size: 14px;\r\n background-color: #FFFFFF;\r\n color: #333;\r\n cursor: pointer;\r\n transition: border-color 0.3s;\r\n flex: 1;\r\n min-width: 100px;\r\n }\r\n\r\n select:hover {\r\n border-color: #2a4f8a;\r\n }\r\n\r\n select:focus {\r\n outline: none;\r\n border-color: #2a4f8a;\r\n box-shadow: 0 0 0 3px rgba(53, 106, 186, 0.1);\r\n }\r\n\r\n .cycle-info {\r\n font-size: 12px;\r\n color: #666;\r\n margin-top: 5px;\r\n font-style: italic;\r\n }\r\n\r\n button {\r\n background-color: #356ABA;\r\n color: #FFFFFF;\r\n border: none;\r\n padding: 12px 30px;\r\n border-radius: 6px;\r\n font-family: 'Gilroy', sans-serif;\r\n font-size: 14px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n margin-top: 10px;\r\n }\r\n\r\n button:hover {\r\n background-color: #2a4f8a;\r\n }\r\n\r\n button:active {\r\n background-color: #1f3a5f;\r\n }\r\n\r\n .calendar-section {\r\n background-color: #FFFFFF;\r\n padding: 25px;\r\n border-radius: 8px;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .calendar-header {\r\n color: #356ABA;\r\n font-size: 16px;\r\n font-weight: 600;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .calendar-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .month-calendar {\r\n border: 1px solid #ddd;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n background-color: #ECEEF2;\r\n }\r\n\r\n .month-header {\r\n background-color: #356ABA;\r\n color: #FFFFFF;\r\n padding: 12px;\r\n text-align: center;\r\n font-weight: 600;\r\n font-size: 14px;\r\n }\r\n\r\n .weekdays {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n background-color: #FFFFFF;\r\n border-bottom: 1px solid #ddd;\r\n }\r\n\r\n .weekday {\r\n padding: 8px;\r\n text-align: center;\r\n font-weight: 600;\r\n font-size: 12px;\r\n color: #356ABA;\r\n background-color: #f5f5f5;\r\n }\r\n\r\n .days {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n gap: 1px;\r\n background-color: #ddd;\r\n padding: 1px;\r\n background-color: #FFFFFF;\r\n }\r\n\r\n .day {\r\n aspect-ratio: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 12px;\r\n font-weight: 500;\r\n background-color: #FFFFFF;\r\n cursor: default;\r\n border-radius: 4px;\r\n position: relative;\r\n padding: 2px;\r\n gap: 1px;\r\n }\r\n\r\n .day.other-month {\r\n color: #ccc;\r\n background-color: #f9f9f9;\r\n }\r\n\r\n .day-number {\r\n font-size: 13px;\r\n font-weight: 600;\r\n }\r\n\r\n .day-indicators {\r\n display: flex;\r\n gap: 2px;\r\n font-size: 10px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n max-width: 100%;\r\n }\r\n\r\n .day-indicator {\r\n font-size: 9px;\r\n line-height: 1;\r\n }\r\n\r\n .day.menstruation {\r\n background-color: #ff6b6b;\r\n color: #FFFFFF;\r\n }\r\n\r\n .day.menstruation .day-number {\r\n color: #FFFFFF;\r\n }\r\n\r\n .day.ovulation {\r\n background-color: #ffd93d;\r\n color: #333;\r\n }\r\n\r\n .day.ovulation .day-number {\r\n color: #333;\r\n }\r\n\r\n .day.fertile {\r\n background-color: #a8d5ff;\r\n color: #333;\r\n }\r\n\r\n .day.fertile .day-number {\r\n color: #333;\r\n }\r\n\r\n .day.most-fertile {\r\n background-color: #356ABA;\r\n color: #FFFFFF;\r\n }\r\n\r\n .day.most-fertile .day-number {\r\n color: #FFFFFF;\r\n }\r\n\r\n .day.girl-likely {\r\n background-color: #ffb3d9;\r\n color: #333;\r\n }\r\n\r\n .day.girl-likely .day-number {\r\n color: #333;\r\n }\r\n\r\n .day.boy-likely {\r\n background-color: #b3d9ff;\r\n color: #333;\r\n }\r\n\r\n .day.boy-likely .day-number {\r\n color: #333;\r\n }\r\n\r\n .legend {\r\n background-color: #FFFFFF;\r\n padding: 25px;\r\n border-radius: 8px;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .legend-title {\r\n color: #356ABA;\r\n font-size: 16px;\r\n font-weight: 600;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .legend-items {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 15px;\r\n }\r\n\r\n .legend-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 13px;\r\n color: #333;\r\n }\r\n\r\n .legend-color {\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 4px;\r\n flex-shrink: 0;\r\n border: 1px solid #ddd;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 12px;\r\n }\r\n\r\n .results {\r\n background-color: #FFFFFF;\r\n padding: 25px;\r\n border-radius: 8px;\r\n margin-top: 25px;\r\n display: none;\r\n }\r\n\r\n .results.show {\r\n display: block;\r\n }\r\n\r\n .results-title {\r\n color: #356ABA;\r\n font-size: 16px;\r\n font-weight: 600;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .result-item {\r\n margin-bottom: 12px;\r\n padding: 10px;\r\n background-color: #ECEEF2;\r\n border-radius: 6px;\r\n font-size: 14px;\r\n color: #333;\r\n }\r\n\r\n .result-label {\r\n font-weight: 600;\r\n color: #356ABA;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .container {\r\n padding: 20px;\r\n }\r\n\r\n h1 {\r\n font-size: 24px;\r\n }\r\n\r\n .input-row {\r\n flex-direction: column;\r\n }\r\n\r\n select {\r\n width: 100%;\r\n }\r\n\r\n button {\r\n width: 100%;\r\n }\r\n\r\n .calendar-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .legend-items {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <h1>Kalkulator plodnih dana<\/h1>\r\n \r\n <div class=\"description\">\r\n <strong>Trudno\u0107a je pitanje pravog trenutka.<\/strong> Samo tokom plodnih dana \u017eena mo\u017ee ostati u drugom stanju. Uz pomo\u0107 na\u0161eg kalkulatora plodnih dana mo\u017eete saznati kada su va\u0161i plodni dani i kada je najve\u0107a mogu\u0107nost da ostanete u drugom stanju.\r\n <\/div>\r\n\r\n <div class=\"warning\">\r\n \u26a0\ufe0f <strong>Pa\u017enja:<\/strong> Kalkulator plodnih dana se ne sme koristiti kao sredstvo kontracepcije!\r\n <\/div>\r\n\r\n <div class=\"form-section\">\r\n <div class=\"form-group\">\r\n <label>Prvi dan poslednje menstruacije:<\/label>\r\n <div class=\"input-row\">\r\n <select id=\"day\">\r\n <option value=\"\">Dan<\/option>\r\n <\/select>\r\n <select id=\"month\">\r\n <option value=\"\">Mesec<\/option>\r\n <option value=\"0\">Januar<\/option>\r\n <option value=\"1\">Februar<\/option>\r\n <option value=\"2\">Mart<\/option>\r\n <option value=\"3\">April<\/option>\r\n <option value=\"4\">Maj<\/option>\r\n <option value=\"5\">Jun<\/option>\r\n <option value=\"6\">Jul<\/option>\r\n <option value=\"7\">Avgust<\/option>\r\n <option value=\"8\">Septembar<\/option>\r\n <option value=\"9\">Oktobar<\/option>\r\n <option value=\"10\">Novembar<\/option>\r\n <option value=\"11\">Decembar<\/option>\r\n <\/select>\r\n <select id=\"year\">\r\n <option value=\"\">Godina<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>Du\u017eina ciklusa:<\/label>\r\n <div class=\"input-row\">\r\n <select id=\"cycle\">\r\n <option value=\"28\" selected>28 dana<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"cycle-info\">\r\n Ciklus u proseku traje 28 dana, ukoliko ne znate du\u017einu svog ciklusa\r\n <\/div>\r\n <\/div>\r\n\r\n <button onclick=\"calculateCycle()\">Izra\u010dunaj plodne dane<\/button>\r\n <\/div>\r\n\r\n <div class=\"results\" id=\"results\">\r\n <div class=\"results-title\">Rezultati:<\/div>\r\n <div id=\"resultsContent\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"calendar-section\" id=\"calendarSection\" style=\"display: none;\">\r\n <div class=\"calendar-header\">Kalendar plodnih dana<\/div>\r\n <div class=\"calendar-grid\" id=\"calendarGrid\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"legend\">\r\n <div class=\"legend-title\">Legenda:<\/div>\r\n <div class=\"legend-items\">\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background-color: #ff6b6b; color: white;\">\u25cf<\/div>\r\n <span>Prvi dan menstruacije<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background-color: #ffd93d;\">\u25cf<\/div>\r\n <span>Pretpostavka ovulacije<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background-color: #ffb3d9;\">\u2640<\/div>\r\n <span>Verovatnije devoj\u010dica<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background-color: #b3d9ff;\">\u2642<\/div>\r\n <span>Verovatnije de\u010dak<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background-color: #a8d5ff;\">\u25c7<\/div>\r\n <span>Plodni dani<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background-color: #356ABA; color: white;\">\u2605<\/div>\r\n <span>Najplodniji dani<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Popunjavanje dana\r\n for (let i = 1; i <= 31; i++) {\r\n const option = document.createElement('option');\r\n option.value = i;\r\n option.textContent = String(i).padStart(2, '0');\r\n document.getElementById('day').appendChild(option);\r\n }\r\n\r\n \/\/ Popunjavanje godina\r\n const currentYear = new Date().getFullYear();\r\n for (let i = currentYear - 2; i <= currentYear + 2; i++) {\r\n const option = document.createElement('option');\r\n option.value = i;\r\n option.textContent = i;\r\n document.getElementById('year').appendChild(option);\r\n }\r\n\r\n \/\/ Popunjavanje du\u017eine ciklusa\r\n for (let i = 20; i <= 40; i++) {\r\n const option = document.createElement('option');\r\n option.value = i;\r\n option.textContent = i + ' dana';\r\n if (i === 28) {\r\n option.selected = true;\r\n }\r\n document.getElementById('cycle').appendChild(option);\r\n }\r\n\r\n function calculateCycle() {\r\n const day = parseInt(document.getElementById('day').value);\r\n const month = parseInt(document.getElementById('month').value);\r\n const year = parseInt(document.getElementById('year').value);\r\n const cycle = parseInt(document.getElementById('cycle').value);\r\n\r\n if (!day || month === '' || !year || !cycle) {\r\n alert('Molimo popunite sve podatke!');\r\n return;\r\n }\r\n\r\n \/\/ Kreiraj datum - koristi UTC da izbegne\u0161 probleme sa vremenskom zonom\r\n const lastPeriod = new Date(Date.UTC(year, month, day));\r\n \r\n \/\/ Provera da li je datum ispravan\r\n if (lastPeriod.getUTCDate() !== day || lastPeriod.getUTCMonth() !== month) {\r\n \/\/ Ako se datum promenio, zna\u010di da je korisnik un\u0435\u043e dan koji ne postoji u tom mesecu\r\n alert('Uneli ste dan koji ne postoji u tom mesecu. Molimo odaberite ispravan dan.');\r\n return;\r\n }\r\n const ovulationDay = Math.floor(cycle \/ 2);\r\n \r\n const ovulationDate = new Date(lastPeriod);\r\n ovulationDate.setDate(ovulationDate.getDate() + ovulationDay);\r\n\r\n const nextPeriod = new Date(lastPeriod);\r\n nextPeriod.setDate(nextPeriod.getDate() + cycle);\r\n\r\n \/\/ Plodni dani: 5 dana pre ovulacije do 1 dan posle\r\n const fertileStartDate = new Date(ovulationDate);\r\n fertileStartDate.setDate(fertileStartDate.getDate() - 5);\r\n\r\n const fertileEndDate = new Date(ovulationDate);\r\n fertileEndDate.setDate(fertileEndDate.getDate() + 1);\r\n\r\n \/\/ Najplodniji dani: dan pre i dan ovulacije\r\n const mostFertileStartDate = new Date(ovulationDate);\r\n mostFertileStartDate.setDate(mostFertileStartDate.getDate() - 1);\r\n\r\n const mostFertileEndDate = new Date(ovulationDate);\r\n\r\n \/\/ Verovatnije devoj\u010dica: 3 dana pre ovulacije\r\n const girlLikelyStartDate = new Date(ovulationDate);\r\n girlLikelyStartDate.setDate(girlLikelyStartDate.getDate() - 3);\r\n\r\n const girlLikelyEndDate = new Date(ovulationDate);\r\n girlLikelyEndDate.setDate(girlLikelyEndDate.getDate() - 1);\r\n\r\n \/\/ Verovatnije de\u010dak: dan ovulacije i 2 dana posle\r\n const boyLikelyStartDate = new Date(ovulationDate);\r\n\r\n const boyLikelyEndDate = new Date(ovulationDate);\r\n boyLikelyEndDate.setDate(boyLikelyEndDate.getDate() + 2);\r\n\r\n \/\/ Prikazivanje rezultata\r\n const resultsDiv = document.getElementById('results');\r\n const resultsContent = document.getElementById('resultsContent');\r\n \r\n resultsContent.innerHTML = `\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">Prvi dan poslednje menstruacije:<\/span><br>\r\n ${formatDate(lastPeriod)}\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">Pretpostavka ovulacije:<\/span><br>\r\n ${formatDate(ovulationDate)}\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">Plodni dani (5 dana pre ovulacije do 1 dan posle):<\/span><br>\r\n ${formatDate(fertileStartDate)} - ${formatDate(fertileEndDate)}\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">Najplodniji dani (dan pre i dan ovulacije):<\/span><br>\r\n ${formatDate(mostFertileStartDate)} - ${formatDate(mostFertileEndDate)}\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">Verovatnije devoj\u010dica (3 dana pre ovulacije):<\/span><br>\r\n ${formatDate(girlLikelyStartDate)} - ${formatDate(girlLikelyEndDate)}\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">Verovatnije de\u010dak (dan ovulacije i 2 dana posle):<\/span><br>\r\n ${formatDate(boyLikelyStartDate)} - ${formatDate(boyLikelyEndDate)}\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">Procenjena slede\u0107a menstruacija:<\/span><br>\r\n ${formatDate(nextPeriod)}\r\n <\/div>\r\n `;\r\n \r\n resultsDiv.classList.add('show');\r\n\r\n \/\/ Generisanje kalendara\r\n generateCalendar(lastPeriod, cycle, ovulationDate, fertileStartDate, fertileEndDate, mostFertileStartDate, mostFertileEndDate, girlLikelyStartDate, girlLikelyEndDate, boyLikelyStartDate, boyLikelyEndDate);\r\n }\r\n\r\n function formatDate(date) {\r\n const months = ['januar', 'februar', 'mart', 'april', 'maj', 'jun', \r\n 'jul', 'avgust', 'septembar', 'oktobar', 'novembar', 'decembar'];\r\n return date.getUTCDate() + '. ' + months[date.getUTCMonth()] + ' ' + date.getUTCFullYear();\r\n }\r\n\r\n function generateCalendar(lastPeriod, cycle, ovulationDate, fertileStartDate, fertileEndDate, mostFertileStartDate, mostFertileEndDate, girlLikelyStartDate, girlLikelyEndDate, boyLikelyStartDate, boyLikelyEndDate) {\r\n const calendarGrid = document.getElementById('calendarGrid');\r\n const calendarSection = document.getElementById('calendarSection');\r\n calendarGrid.innerHTML = '';\r\n\r\n \/\/ Prikazuj samo dva meseca: mesec menstruacije i slede\u0107i mesec\r\n for (let m = 0; m < 2; m++) {\r\n const monthDate = new Date(Date.UTC(lastPeriod.getUTCFullYear(), lastPeriod.getUTCMonth() + m, 1));\r\n\r\n const monthCalendar = document.createElement('div');\r\n monthCalendar.className = 'month-calendar';\r\n\r\n const monthHeader = document.createElement('div');\r\n monthHeader.className = 'month-header';\r\n const months = ['januar', 'februar', 'mart', 'april', 'maj', 'jun', \r\n 'jul', 'avgust', 'septembar', 'oktobar', 'novembar', 'decembar'];\r\n monthHeader.textContent = months[monthDate.getUTCMonth()].charAt(0).toUpperCase() + months[monthDate.getUTCMonth()].slice(1) + ' ' + monthDate.getUTCFullYear();\r\n monthCalendar.appendChild(monthHeader);\r\n\r\n const weekdaysDiv = document.createElement('div');\r\n weekdaysDiv.className = 'weekdays';\r\n const weekdays = ['Pon', 'Uto', 'Sre', '\u010cet', 'Pet', 'Sub', 'Ned'];\r\n weekdays.forEach(day => {\r\n const weekday = document.createElement('div');\r\n weekday.className = 'weekday';\r\n weekday.textContent = day;\r\n weekdaysDiv.appendChild(weekday);\r\n });\r\n monthCalendar.appendChild(weekdaysDiv);\r\n\r\n const daysDiv = document.createElement('div');\r\n daysDiv.className = 'days';\r\n\r\n const firstDay = new Date(Date.UTC(monthDate.getUTCFullYear(), monthDate.getUTCMonth(), 1));\r\n const lastDay = new Date(Date.UTC(monthDate.getUTCFullYear(), monthDate.getUTCMonth() + 1, 0));\r\n const prevLastDay = new Date(Date.UTC(monthDate.getUTCFullYear(), monthDate.getUTCMonth(), 0));\r\n\r\n \/\/ Prethodni mesec\r\n for (let i = firstDay.getUTCDay() === 0 ? 6 : firstDay.getUTCDay() - 1; i > 0; i--) {\r\n const day = document.createElement('div');\r\n day.className = 'day other-month';\r\n day.textContent = prevLastDay.getUTCDate() - i + 1;\r\n daysDiv.appendChild(day);\r\n }\r\n\r\n \/\/ Trenutni mesec\r\n for (let i = 1; i <= lastDay.getUTCDate(); i++) {\r\n const currentDate = new Date(Date.UTC(monthDate.getUTCFullYear(), monthDate.getUTCMonth(), i));\r\n const day = document.createElement('div');\r\n day.className = 'day';\r\n\r\n let dayTypes = [];\r\n let indicators = [];\r\n\r\n \/\/ Odre\u0111ivanje tipova dana - sve kategorije se mogu prikazati\r\n if (isSameDay(currentDate, lastPeriod)) {\r\n dayTypes.push('menstruation');\r\n indicators.push('\u25cf');\r\n }\r\n \r\n if (isSameDay(currentDate, ovulationDate)) {\r\n dayTypes.push('ovulation');\r\n indicators.push('\u25cf');\r\n }\r\n \r\n if (isDateInRange(currentDate, mostFertileStartDate, mostFertileEndDate)) {\r\n dayTypes.push('most-fertile');\r\n indicators.push('\u2605');\r\n }\r\n \r\n if (isDateInRange(currentDate, girlLikelyStartDate, girlLikelyEndDate)) {\r\n dayTypes.push('girl-likely');\r\n indicators.push('\u2640');\r\n }\r\n \r\n if (isDateInRange(currentDate, boyLikelyStartDate, boyLikelyEndDate)) {\r\n dayTypes.push('boy-likely');\r\n indicators.push('\u2642');\r\n }\r\n \r\n if (isDateInRange(currentDate, fertileStartDate, fertileEndDate) && !dayTypes.includes('most-fertile')) {\r\n dayTypes.push('fertile');\r\n indicators.push('\u25c7');\r\n }\r\n\r\n \/\/ Primeni prvu klasu kao boju pozadine\r\n if (dayTypes.length > 0) {\r\n day.classList.add(dayTypes[0]);\r\n }\r\n\r\n \/\/ Prika\u017ei sve indikatore\r\n let indicatorsHTML = indicators.map(ind => `<span class=\"day-indicator\">${ind}<\/span>`).join('');\r\n day.innerHTML = `<div class=\"day-number\">${i}<\/div><div class=\"day-indicators\">${indicatorsHTML}<\/div>`;\r\n daysDiv.appendChild(day);\r\n }\r\n\r\n \/\/ Slede\u0107i mesec\r\n const remainingDays = 42 - daysDiv.children.length;\r\n for (let i = 1; i <= remainingDays; i++) {\r\n const day = document.createElement('div');\r\n day.className = 'day other-month';\r\n day.textContent = i;\r\n daysDiv.appendChild(day);\r\n }\r\n\r\n monthCalendar.appendChild(daysDiv);\r\n calendarGrid.appendChild(monthCalendar);\r\n }\r\n\r\n calendarSection.style.display = 'block';\r\n }\r\n\r\n function isSameDay(date1, date2) {\r\n return date1.getUTCFullYear() === date2.getUTCFullYear() &&\r\n date1.getUTCMonth() === date2.getUTCMonth() &&\r\n date1.getUTCDate() === date2.getUTCDate();\r\n }\r\n\r\n function isDateInRange(date, start, end) {\r\n \/\/ Koristi UTC za pore\u0111enje datuma\r\n const dateTime = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());\r\n const startTime = Date.UTC(start.getUTCFullYear(), start.getUTCMonth(), start.getUTCDate());\r\n const endTime = Date.UTC(end.getUTCFullYear(), end.getUTCMonth(), end.getUTCDate());\r\n return dateTime >= startTime && dateTime <= endTime;\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p> Kalkulator plodnih dana Trudno\u0107a je pitanje pravog trenutka. Samo tokom plodnih dana \u017eena mo\u017ee ostati u drugom stanju. Uz pomo\u0107 na\u0161eg kalkulatora plodnih dana mo\u017eete saznati kada su va\u0161i plodni dani i kada je najve\u0107a mogu\u0107nost da ostanete u drugom stanju. ⚠️ Pa\u017enja: Kalkulator plodnih dana se ne sme koristiti kao sredstvo kontracepcije! […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8393","page","type-page","status-publish","hentry"],"ams_acf":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/pages\/8393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/comments?post=8393"}],"version-history":[{"count":17,"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/pages\/8393\/revisions"}],"predecessor-version":[{"id":8606,"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/pages\/8393\/revisions\/8606"}],"wp:attachment":[{"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/media?parent=8393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Kalkulator plodnih dana<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Gilroy:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Gilroy', sans-serif;\r\n background-color: #FFFFFF;\r\n padding: 20px;\r\n }\r\n\r\n .container {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n background-color: #ECEEF2;\r\n border-radius: 12px;\r\n padding: 40px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n h1 {\r\n color: #356ABA;\r\n font-size: 28px;\r\n margin-bottom: 15px;\r\n font-weight: 700;\r\n }\r\n\r\n .description {\r\n color: #333;\r\n font-size: 14px;\r\n line-height: 1.6;\r\n margin-bottom: 25px;\r\n background-color: #FFFFFF;\r\n padding: 15px;\r\n border-radius: 8px;\r\n border-left: 4px solid #356ABA;\r\n }\r\n\r\n .warning {\r\n background-color: #fff3cd;\r\n border: 1px solid #ffc107;\r\n color: #856404;\r\n padding: 12px 15px;\r\n border-radius: 6px;\r\n margin-bottom: 25px;\r\n font-size: 13px;\r\n font-weight: 500;\r\n }\r\n\r\n .form-section {\r\n background-color: #FFFFFF;\r\n padding: 25px;\r\n border-radius: 8px;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n label {\r\n display: block;\r\n color: #356ABA;\r\n font-weight: 600;\r\n margin-bottom: 10px;\r\n font-size: 14px;\r\n }\r\n\r\n .input-row {\r\n display: flex;\r\n gap: 15px;\r\n flex-wrap: wrap;\r\n align-items: flex-end;\r\n }\r\n\r\n select {\r\n padding: 10px 12px;\r\n border: 2px solid #356ABA;\r\n border-radius: 6px;\r\n font-family: 'Gilroy', sans-serif;\r\n font-size: 14px;\r\n background-color: #FFFFFF;\r\n color: #333;\r\n cursor: pointer;\r\n transition: border-color 0.3s;\r\n flex: 1;\r\n min-width: 100px;\r\n }\r\n\r\n select:hover {\r\n border-color: #2a4f8a;\r\n }\r\n\r\n select:focus {\r\n outline: none;\r\n border-color: #2a4f8a;\r\n box-shadow: 0 0 0 3px rgba(53, 106, 186, 0.1);\r\n }\r\n\r\n .cycle-info {\r\n font-size: 12px;\r\n color: #666;\r\n margin-top: 5px;\r\n font-style: italic;\r\n }\r\n\r\n button {\r\n background-color: #356ABA;\r\n color: #FFFFFF;\r\n border: none;\r\n padding: 12px 30px;\r\n border-radius: 6px;\r\n font-family: 'Gilroy', sans-serif;\r\n font-size: 14px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n margin-top: 10px;\r\n }\r\n\r\n button:hover {\r\n background-color: #2a4f8a;\r\n }\r\n\r\n button:active {\r\n background-color: #1f3a5f;\r\n }\r\n\r\n .calendar-section {\r\n background-color: #FFFFFF;\r\n padding: 25px;\r\n border-radius: 8px;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .calendar-header {\r\n color: #356ABA;\r\n font-size: 16px;\r\n font-weight: 600;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .calendar-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .month-calendar {\r\n border: 1px solid #ddd;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n background-color: #ECEEF2;\r\n }\r\n\r\n .month-header {\r\n background-color: #356ABA;\r\n color: #FFFFFF;\r\n padding: 12px;\r\n text-align: center;\r\n font-weight: 600;\r\n font-size: 14px;\r\n }\r\n\r\n .weekdays {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n background-color: #FFFFFF;\r\n border-bottom: 1px solid #ddd;\r\n }\r\n\r\n .weekday {\r\n padding: 8px;\r\n text-align: center;\r\n font-weight: 600;\r\n font-size: 12px;\r\n color: #356ABA;\r\n background-color: #f5f5f5;\r\n }\r\n\r\n .days {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n gap: 1px;\r\n background-color: #ddd;\r\n padding: 1px;\r\n background-color: #FFFFFF;\r\n }\r\n\r\n .day {\r\n aspect-ratio: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 12px;\r\n font-weight: 500;\r\n background-color: #FFFFFF;\r\n cursor: default;\r\n border-radius: 4px;\r\n position: relative;\r\n padding: 2px;\r\n gap: 1px;\r\n }\r\n\r\n .day.other-month {\r\n color: #ccc;\r\n background-color: #f9f9f9;\r\n }\r\n\r\n .day-number {\r\n font-size: 13px;\r\n font-weight: 600;\r\n }\r\n\r\n .day-indicators {\r\n display: flex;\r\n gap: 2px;\r\n font-size: 10px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n max-width: 100%;\r\n }\r\n\r\n .day-indicator {\r\n font-size: 9px;\r\n line-height: 1;\r\n }\r\n\r\n .day.menstruation {\r\n background-color: #ff6b6b;\r\n color: #FFFFFF;\r\n }\r\n\r\n .day.menstruation .day-number {\r\n color: #FFFFFF;\r\n }\r\n\r\n .day.ovulation {\r\n background-color: #ffd93d;\r\n color: #333;\r\n }\r\n\r\n .day.ovulation .day-number {\r\n color: #333;\r\n }\r\n\r\n .day.fertile {\r\n background-color: #a8d5ff;\r\n color: #333;\r\n }\r\n\r\n .day.fertile .day-number {\r\n color: #333;\r\n }\r\n\r\n .day.most-fertile {\r\n background-color: #356ABA;\r\n color: #FFFFFF;\r\n }\r\n\r\n .day.most-fertile .day-number {\r\n color: #FFFFFF;\r\n }\r\n\r\n .day.girl-likely {\r\n background-color: #ffb3d9;\r\n color: #333;\r\n }\r\n\r\n .day.girl-likely .day-number {\r\n color: #333;\r\n }\r\n\r\n .day.boy-likely {\r\n background-color: #b3d9ff;\r\n color: #333;\r\n }\r\n\r\n .day.boy-likely .day-number {\r\n color: #333;\r\n }\r\n\r\n .legend {\r\n background-color: #FFFFFF;\r\n padding: 25px;\r\n border-radius: 8px;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .legend-title {\r\n color: #356ABA;\r\n font-size: 16px;\r\n font-weight: 600;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .legend-items {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 15px;\r\n }\r\n\r\n .legend-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 13px;\r\n color: #333;\r\n }\r\n\r\n .legend-color {\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 4px;\r\n flex-shrink: 0;\r\n border: 1px solid #ddd;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 12px;\r\n }\r\n\r\n .results {\r\n background-color: #FFFFFF;\r\n padding: 25px;\r\n border-radius: 8px;\r\n margin-top: 25px;\r\n display: none;\r\n }\r\n\r\n .results.show {\r\n display: block;\r\n }\r\n\r\n .results-title {\r\n color: #356ABA;\r\n font-size: 16px;\r\n font-weight: 600;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .result-item {\r\n margin-bottom: 12px;\r\n padding: 10px;\r\n background-color: #ECEEF2;\r\n border-radius: 6px;\r\n font-size: 14px;\r\n color: #333;\r\n }\r\n\r\n .result-label {\r\n font-weight: 600;\r\n color: #356ABA;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .container {\r\n padding: 20px;\r\n }\r\n\r\n h1 {\r\n font-size: 24px;\r\n }\r\n\r\n .input-row {\r\n flex-direction: column;\r\n }\r\n\r\n select {\r\n width: 100%;\r\n }\r\n\r\n button {\r\n width: 100%;\r\n }\r\n\r\n .calendar-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .legend-items {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <h1>Kalkulator plodnih dana<\/h1>\r\n \r\n <div class=\"description\">\r\n <strong>Trudno\u0107a je pitanje pravog trenutka.<\/strong> Samo tokom plodnih dana \u017eena mo\u017ee ostati u drugom stanju. Uz pomo\u0107 na\u0161eg kalkulatora plodnih dana mo\u017eete saznati kada su va\u0161i plodni dani i kada je najve\u0107a mogu\u0107nost da ostanete u drugom stanju.\r\n <\/div>\r\n\r\n <div class=\"warning\">\r\n \u26a0\ufe0f <strong>Pa\u017enja:<\/strong> Kalkulator plodnih dana se ne sme koristiti kao sredstvo kontracepcije!\r\n <\/div>\r\n\r\n <div class=\"form-section\">\r\n <div class=\"form-group\">\r\n <label>Prvi dan poslednje menstruacije:<\/label>\r\n <div class=\"input-row\">\r\n <select id=\"day\">\r\n <option value=\"\">Dan<\/option>\r\n <\/select>\r\n <select id=\"month\">\r\n <option value=\"\">Mesec<\/option>\r\n <option value=\"0\">Januar<\/option>\r\n <option value=\"1\">Februar<\/option>\r\n <option value=\"2\">Mart<\/option>\r\n <option value=\"3\">April<\/option>\r\n <option value=\"4\">Maj<\/option>\r\n <option value=\"5\">Jun<\/option>\r\n <option value=\"6\">Jul<\/option>\r\n <option value=\"7\">Avgust<\/option>\r\n <option value=\"8\">Septembar<\/option>\r\n <option value=\"9\">Oktobar<\/option>\r\n <option value=\"10\">Novembar<\/option>\r\n <option value=\"11\">Decembar<\/option>\r\n <\/select>\r\n <select id=\"year\">\r\n <option value=\"\">Godina<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>Du\u017eina ciklusa:<\/label>\r\n <div class=\"input-row\">\r\n <select id=\"cycle\">\r\n <option value=\"28\" selected>28 dana<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"cycle-info\">\r\n Ciklus u proseku traje 28 dana, ukoliko ne znate du\u017einu svog ciklusa\r\n <\/div>\r\n <\/div>\r\n\r\n <button onclick=\"calculateCycle()\">Izra\u010dunaj plodne dane<\/button>\r\n <\/div>\r\n\r\n <div class=\"results\" id=\"results\">\r\n <div class=\"results-title\">Rezultati:<\/div>\r\n <div id=\"resultsContent\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"calendar-section\" id=\"calendarSection\" style=\"display: none;\">\r\n <div class=\"calendar-header\">Kalendar plodnih dana<\/div>\r\n <div class=\"calendar-grid\" id=\"calendarGrid\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"legend\">\r\n <div class=\"legend-title\">Legenda:<\/div>\r\n <div class=\"legend-items\">\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background-color: #ff6b6b; color: white;\">\u25cf<\/div>\r\n <span>Prvi dan menstruacije<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background-color: #ffd93d;\">\u25cf<\/div>\r\n <span>Pretpostavka ovulacije<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background-color: #ffb3d9;\">\u2640<\/div>\r\n <span>Verovatnije devoj\u010dica<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background-color: #b3d9ff;\">\u2642<\/div>\r\n <span>Verovatnije de\u010dak<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background-color: #a8d5ff;\">\u25c7<\/div>\r\n <span>Plodni dani<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background-color: #356ABA; color: white;\">\u2605<\/div>\r\n <span>Najplodniji dani<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Popunjavanje dana\r\n for (let i = 1; i <= 31; i++) {\r\n const option = document.createElement('option');\r\n option.value = i;\r\n option.textContent = String(i).padStart(2, '0');\r\n document.getElementById('day').appendChild(option);\r\n }\r\n\r\n \/\/ Popunjavanje godina\r\n const currentYear = new Date().getFullYear();\r\n for (let i = currentYear - 2; i <= currentYear + 2; i++) {\r\n const option = document.createElement('option');\r\n option.value = i;\r\n option.textContent = i;\r\n document.getElementById('year').appendChild(option);\r\n }\r\n\r\n \/\/ Popunjavanje du\u017eine ciklusa\r\n for (let i = 20; i <= 40; i++) {\r\n const option = document.createElement('option');\r\n option.value = i;\r\n option.textContent = i + ' dana';\r\n if (i === 28) {\r\n option.selected = true;\r\n }\r\n document.getElementById('cycle').appendChild(option);\r\n }\r\n\r\n function calculateCycle() {\r\n const day = parseInt(document.getElementById('day').value);\r\n const month = parseInt(document.getElementById('month').value);\r\n const year = parseInt(document.getElementById('year').value);\r\n const cycle = parseInt(document.getElementById('cycle').value);\r\n\r\n if (!day || month === '' || !year || !cycle) {\r\n alert('Molimo popunite sve podatke!');\r\n return;\r\n }\r\n\r\n \/\/ Kreiraj datum - koristi UTC da izbegne\u0161 probleme sa vremenskom zonom\r\n const lastPeriod = new Date(Date.UTC(year, month, day));\r\n \r\n \/\/ Provera da li je datum ispravan\r\n if (lastPeriod.getUTCDate() !== day || lastPeriod.getUTCMonth() !== month) {\r\n \/\/ Ako se datum promenio, zna\u010di da je korisnik un\u0435\u043e dan koji ne postoji u tom mesecu\r\n alert('Uneli ste dan koji ne postoji u tom mesecu. Molimo odaberite ispravan dan.');\r\n return;\r\n }\r\n const ovulationDay = Math.floor(cycle \/ 2);\r\n \r\n const ovulationDate = new Date(lastPeriod);\r\n ovulationDate.setDate(ovulationDate.getDate() + ovulationDay);\r\n\r\n const nextPeriod = new Date(lastPeriod);\r\n nextPeriod.setDate(nextPeriod.getDate() + cycle);\r\n\r\n \/\/ Plodni dani: 5 dana pre ovulacije do 1 dan posle\r\n const fertileStartDate = new Date(ovulationDate);\r\n fertileStartDate.setDate(fertileStartDate.getDate() - 5);\r\n\r\n const fertileEndDate = new Date(ovulationDate);\r\n fertileEndDate.setDate(fertileEndDate.getDate() + 1);\r\n\r\n \/\/ Najplodniji dani: dan pre i dan ovulacije\r\n const mostFertileStartDate = new Date(ovulationDate);\r\n mostFertileStartDate.setDate(mostFertileStartDate.getDate() - 1);\r\n\r\n const mostFertileEndDate = new Date(ovulationDate);\r\n\r\n \/\/ Verovatnije devoj\u010dica: 3 dana pre ovulacije\r\n const girlLikelyStartDate = new Date(ovulationDate);\r\n girlLikelyStartDate.setDate(girlLikelyStartDate.getDate() - 3);\r\n\r\n const girlLikelyEndDate = new Date(ovulationDate);\r\n girlLikelyEndDate.setDate(girlLikelyEndDate.getDate() - 1);\r\n\r\n \/\/ Verovatnije de\u010dak: dan ovulacije i 2 dana posle\r\n const boyLikelyStartDate = new Date(ovulationDate);\r\n\r\n const boyLikelyEndDate = new Date(ovulationDate);\r\n boyLikelyEndDate.setDate(boyLikelyEndDate.getDate() + 2);\r\n\r\n \/\/ Prikazivanje rezultata\r\n const resultsDiv = document.getElementById('results');\r\n const resultsContent = document.getElementById('resultsContent');\r\n \r\n resultsContent.innerHTML = `\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">Prvi dan poslednje menstruacije:<\/span><br>\r\n ${formatDate(lastPeriod)}\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">Pretpostavka ovulacije:<\/span><br>\r\n ${formatDate(ovulationDate)}\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">Plodni dani (5 dana pre ovulacije do 1 dan posle):<\/span><br>\r\n ${formatDate(fertileStartDate)} - ${formatDate(fertileEndDate)}\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">Najplodniji dani (dan pre i dan ovulacije):<\/span><br>\r\n ${formatDate(mostFertileStartDate)} - ${formatDate(mostFertileEndDate)}\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">Verovatnije devoj\u010dica (3 dana pre ovulacije):<\/span><br>\r\n ${formatDate(girlLikelyStartDate)} - ${formatDate(girlLikelyEndDate)}\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">Verovatnije de\u010dak (dan ovulacije i 2 dana posle):<\/span><br>\r\n ${formatDate(boyLikelyStartDate)} - ${formatDate(boyLikelyEndDate)}\r\n <\/div>\r\n <div class=\"result-item\">\r\n <span class=\"result-label\">Procenjena slede\u0107a menstruacija:<\/span><br>\r\n ${formatDate(nextPeriod)}\r\n <\/div>\r\n `;\r\n \r\n resultsDiv.classList.add('show');\r\n\r\n \/\/ Generisanje kalendara\r\n generateCalendar(lastPeriod, cycle, ovulationDate, fertileStartDate, fertileEndDate, mostFertileStartDate, mostFertileEndDate, girlLikelyStartDate, girlLikelyEndDate, boyLikelyStartDate, boyLikelyEndDate);\r\n }\r\n\r\n function formatDate(date) {\r\n const months = ['januar', 'februar', 'mart', 'april', 'maj', 'jun', \r\n 'jul', 'avgust', 'septembar', 'oktobar', 'novembar', 'decembar'];\r\n return date.getUTCDate() + '. ' + months[date.getUTCMonth()] + ' ' + date.getUTCFullYear();\r\n }\r\n\r\n function generateCalendar(lastPeriod, cycle, ovulationDate, fertileStartDate, fertileEndDate, mostFertileStartDate, mostFertileEndDate, girlLikelyStartDate, girlLikelyEndDate, boyLikelyStartDate, boyLikelyEndDate) {\r\n const calendarGrid = document.getElementById('calendarGrid');\r\n const calendarSection = document.getElementById('calendarSection');\r\n calendarGrid.innerHTML = '';\r\n\r\n \/\/ Prikazuj samo dva meseca: mesec menstruacije i slede\u0107i mesec\r\n for (let m = 0; m < 2; m++) {\r\n const monthDate = new Date(Date.UTC(lastPeriod.getUTCFullYear(), lastPeriod.getUTCMonth() + m, 1));\r\n\r\n const monthCalendar = document.createElement('div');\r\n monthCalendar.className = 'month-calendar';\r\n\r\n const monthHeader = document.createElement('div');\r\n monthHeader.className = 'month-header';\r\n const months = ['januar', 'februar', 'mart', 'april', 'maj', 'jun', \r\n 'jul', 'avgust', 'septembar', 'oktobar', 'novembar', 'decembar'];\r\n monthHeader.textContent = months[monthDate.getUTCMonth()].charAt(0).toUpperCase() + months[monthDate.getUTCMonth()].slice(1) + ' ' + monthDate.getUTCFullYear();\r\n monthCalendar.appendChild(monthHeader);\r\n\r\n const weekdaysDiv = document.createElement('div');\r\n weekdaysDiv.className = 'weekdays';\r\n const weekdays = ['Pon', 'Uto', 'Sre', '\u010cet', 'Pet', 'Sub', 'Ned'];\r\n weekdays.forEach(day => {\r\n const weekday = document.createElement('div');\r\n weekday.className = 'weekday';\r\n weekday.textContent = day;\r\n weekdaysDiv.appendChild(weekday);\r\n });\r\n monthCalendar.appendChild(weekdaysDiv);\r\n\r\n const daysDiv = document.createElement('div');\r\n daysDiv.className = 'days';\r\n\r\n const firstDay = new Date(Date.UTC(monthDate.getUTCFullYear(), monthDate.getUTCMonth(), 1));\r\n const lastDay = new Date(Date.UTC(monthDate.getUTCFullYear(), monthDate.getUTCMonth() + 1, 0));\r\n const prevLastDay = new Date(Date.UTC(monthDate.getUTCFullYear(), monthDate.getUTCMonth(), 0));\r\n\r\n \/\/ Prethodni mesec\r\n for (let i = firstDay.getUTCDay() === 0 ? 6 : firstDay.getUTCDay() - 1; i > 0; i--) {\r\n const day = document.createElement('div');\r\n day.className = 'day other-month';\r\n day.textContent = prevLastDay.getUTCDate() - i + 1;\r\n daysDiv.appendChild(day);\r\n }\r\n\r\n \/\/ Trenutni mesec\r\n for (let i = 1; i <= lastDay.getUTCDate(); i++) {\r\n const currentDate = new Date(Date.UTC(monthDate.getUTCFullYear(), monthDate.getUTCMonth(), i));\r\n const day = document.createElement('div');\r\n day.className = 'day';\r\n\r\n let dayTypes = [];\r\n let indicators = [];\r\n\r\n \/\/ Odre\u0111ivanje tipova dana - sve kategorije se mogu prikazati\r\n if (isSameDay(currentDate, lastPeriod)) {\r\n dayTypes.push('menstruation');\r\n indicators.push('\u25cf');\r\n }\r\n \r\n if (isSameDay(currentDate, ovulationDate)) {\r\n dayTypes.push('ovulation');\r\n indicators.push('\u25cf');\r\n }\r\n \r\n if (isDateInRange(currentDate, mostFertileStartDate, mostFertileEndDate)) {\r\n dayTypes.push('most-fertile');\r\n indicators.push('\u2605');\r\n }\r\n \r\n if (isDateInRange(currentDate, girlLikelyStartDate, girlLikelyEndDate)) {\r\n dayTypes.push('girl-likely');\r\n indicators.push('\u2640');\r\n }\r\n \r\n if (isDateInRange(currentDate, boyLikelyStartDate, boyLikelyEndDate)) {\r\n dayTypes.push('boy-likely');\r\n indicators.push('\u2642');\r\n }\r\n \r\n if (isDateInRange(currentDate, fertileStartDate, fertileEndDate) && !dayTypes.includes('most-fertile')) {\r\n dayTypes.push('fertile');\r\n indicators.push('\u25c7');\r\n }\r\n\r\n \/\/ Primeni prvu klasu kao boju pozadine\r\n if (dayTypes.length > 0) {\r\n day.classList.add(dayTypes[0]);\r\n }\r\n\r\n \/\/ Prika\u017ei sve indikatore\r\n let indicatorsHTML = indicators.map(ind => `<span class=\"day-indicator\">${ind}<\/span>`).join('');\r\n day.innerHTML = `<div class=\"day-number\">${i}<\/div><div class=\"day-indicators\">${indicatorsHTML}<\/div>`;\r\n daysDiv.appendChild(day);\r\n }\r\n\r\n \/\/ Slede\u0107i mesec\r\n const remainingDays = 42 - daysDiv.children.length;\r\n for (let i = 1; i <= remainingDays; i++) {\r\n const day = document.createElement('div');\r\n day.className = 'day other-month';\r\n day.textContent = i;\r\n daysDiv.appendChild(day);\r\n }\r\n\r\n monthCalendar.appendChild(daysDiv);\r\n calendarGrid.appendChild(monthCalendar);\r\n }\r\n\r\n calendarSection.style.display = 'block';\r\n }\r\n\r\n function isSameDay(date1, date2) {\r\n return date1.getUTCFullYear() === date2.getUTCFullYear() &&\r\n date1.getUTCMonth() === date2.getUTCMonth() &&\r\n date1.getUTCDate() === date2.getUTCDate();\r\n }\r\n\r\n function isDateInRange(date, start, end) {\r\n \/\/ Koristi UTC za pore\u0111enje datuma\r\n const dateTime = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());\r\n const startTime = Date.UTC(start.getUTCFullYear(), start.getUTCMonth(), start.getUTCDate());\r\n const endTime = Date.UTC(end.getUTCFullYear(), end.getUTCMonth(), end.getUTCDate());\r\n return dateTime >= startTime && dateTime <= endTime;\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p> Kalkulator plodnih dana Trudno\u0107a je pitanje pravog trenutka. Samo tokom plodnih dana \u017eena mo\u017ee ostati u drugom stanju. Uz pomo\u0107 na\u0161eg kalkulatora plodnih dana mo\u017eete saznati kada su va\u0161i plodni dani i kada je najve\u0107a mogu\u0107nost da ostanete u drugom stanju. ⚠️ Pa\u017enja: Kalkulator plodnih dana se ne sme koristiti kao sredstvo kontracepcije! […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8393","page","type-page","status-publish","hentry"],"ams_acf":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/pages\/8393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/comments?post=8393"}],"version-history":[{"count":17,"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/pages\/8393\/revisions"}],"predecessor-version":[{"id":8606,"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/pages\/8393\/revisions\/8606"}],"wp:attachment":[{"href":"https:\/\/apotekar-online.rs\/ro\/wp-json\/wp\/v2\/media?parent=8393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}