Skip to content

Update index.html #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alwin-m wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update index.html #13

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 45 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@
<div style="font-size:12px;color:var(--muted)">No data stored. Local only for this demo.</div>
</div>
</header>

<main aria-live="polite">
<!-- Step 1 -->
<section class="step active" id="step-1">
Expand All @@ -128,6 +129,7 @@ <h3 style="margin:0 0 8px">Hello — let's make this simple ✨</h3>
</div>
</div>
</section>

<!-- Step PCOD -->
<section class="step" id="step-pcod">
<div class="step-indicator">Step 2 of 4</div>
Expand All @@ -152,6 +154,7 @@ <h3 style="margin:0 0 8px">Check for Possible PCOD Symptoms</h3>
</form>
</div>
</section>

<!-- Step 2: Period details -->
<section class="step" id="step-2">
<div class="step-indicator">Step 3 of 4</div>
Expand Down Expand Up @@ -180,6 +183,7 @@ <h3 style="margin:0 0 8px">Period details</h3>
</div>
</div>
</section>

<!-- Step 3: Calendar -->
<section class="step" id="step-3">
<div class="step-indicator">Step 4 of 4</div>
Expand Down Expand Up @@ -222,6 +226,7 @@ <h3 style="margin:0 0 8px">Period details</h3>
</p>
</section>
</main>

<footer>
<div style="font-size:12px;color:var(--muted)">
Open-source • MIT License • <a href="https://github.com/alwin-m/ROS-Cycle-Project" class="github-link" target="_blank" rel="noopener">GitHub</a> •
Expand All @@ -233,6 +238,7 @@ <h3 style="margin:0 0 8px">Period details</h3>
</div>
</footer>
</div>

<!-- Modals -->
<div class="modal" id="modal">
<div class="box">
Expand All @@ -243,6 +249,7 @@ <h3 style="margin:0 0 8px">Period details</h3>
</div>
</div>
</div>

<div class="modal" id="resetModal">
<div class="box">
<div>Start over? This will clear the current session.</div>
Expand All @@ -252,38 +259,52 @@ <h3 style="margin:0 0 8px">Period details</h3>
</div>
</div>
</div>

<script>
let state = {
name: '', dob: null, age: null, last: null, cycle: 28, periodLen: 5, sigma: 2,
months: [], visibleIndex: 0, pcodChance: null, pcodSymptoms: []
};

const el = id => document.getElementById(id);

function showStep(n) {
document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
if (typeof n === 'string') el('step-' + n).classList.add('active');
else el('step-' + n).classList.add('active');
const first = (typeof n === 'string' ? el('step-' + n) : el('step-' + n)).querySelector('input, button');
if (first) first.focus();
}

function showModal(msg) {
el('modalText').innerHTML = msg.replace(/\n\n/g, '<br><br>');
el('modal').classList.add('active');
}

function closeModal(id = 'modal') {
el(id).classList.remove('active');
}

function showResetModal() {
el('resetModal').classList.add('active');
}

function resetAll() {
state = {name:'', dob:null, age:null, last:null, cycle:28, periodLen:5, sigma:2, months:[], visibleIndex:0, pcodChance:null, pcodSymptoms:[]};
['name','dob','last','cycle','periodLen','variability'].forEach(id => el(id).value = id==='cycle'?28:id==='periodLen'?5:id==='variability'?2:'');
['name','dob','last','cycle','periodLen','variability'].forEach(id =>
el(id).value = id==='cycle'?28:id==='periodLen'?5:id==='variability'?2:''
);
Comment on lines +294 to +296
Copy link
Copy Markdown
Owner Author

@alwin-m alwin-m Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add some space

el('pcod-form').reset();
el('calendarGrid').innerHTML = '';
closeModal('resetModal');
showStep(1);
}
function skipInfo() { state.name = state.dob = state.age = null; showStep(2); }

function skipInfo() {
state.name = state.dob = state.age = null;
showStep(2);
}

Comment on lines +302 to +307
Copy link
Copy Markdown
Owner Author

@alwin-m alwin-m Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add some space

function nextToStep2() {
const name = el('name').value.trim();
if (!name) return showModal('Please enter your name — a short nickname is fine.');
Expand All @@ -297,10 +318,12 @@ <h3 style="margin:0 0 8px">Period details</h3>
}
showStep(2);
}

function nextToPCOD() {
nextToStep2(); // reuse validation
nextToStep2();
showStep('pcod');
}

function checkPCOD() {
const checked = document.querySelectorAll('#pcod-form input:checked');
state.pcodSymptoms = Array.from(checked).map(c => c.nextElementSibling.textContent);
Expand All @@ -314,13 +337,15 @@ <h3 style="margin:0 0 8px">Period details</h3>
state.pcodChance = chance;
showModal(msg);
}

function calculateAge(dob) {
const today = new Date();
let age = today.getFullYear() - dob.getFullYear();
const m = today.getMonth() - dob.getMonth();
if (m < 0 || (m === 0 && today.getDate() < dob.getDate())) age--;
return age;
}

function getDayDetails(targetDate, lastPeriodDate, cycleLength, periodLength, sigma) {
const daysSinceLast = Math.floor((targetDate - lastPeriodDate) / (24*60*60*1000));
if (daysSinceLast < 0) return { type: 'past', phase: 'unknown', pov: 0, fertility: 'low' };
Expand All @@ -343,6 +368,7 @@ <h3 style="margin:0 0 8px">Period details</h3>
else if (fertility === 'medium') type = 'fertile';
return { type, phase, pov, fertility };
}

function generateMonthsAhead(count = 12) {
state.months = [];
const base = new Date(state.last.getFullYear(), state.last.getMonth(), 1);
Expand All @@ -358,6 +384,7 @@ <h3 style="margin:0 0 8px">Period details</h3>
state.months.push(monthObj);
}
}

function renderMonth(index) {
if (index < 0 || index >= 12) return;
const month = state.months[index];
Expand Down Expand Up @@ -408,6 +435,7 @@ <h3 style="margin:0 0 8px">Period details</h3>
grid.appendChild(cell);
}
}

function createCalendar() {
const lastVal = el('last').value;
const cycle = parseInt(el('cycle').value, 10);
Expand All @@ -426,19 +454,30 @@ <h3 style="margin:0 0 8px">Period details</h3>
renderMonth(0);
showStep(3);
}
el('prevBtn').onclick = () => { state.visibleIndex = Math.max(0, state.visibleIndex - 1); renderMonth(state.visibleIndex); };
el('nextBtn').onclick = () => { state.visibleIndex = Math.min(11, state.visibleIndex + 1); renderMonth(state.visibleIndex); };

el('prevBtn').onclick = () => {
state.visibleIndex = Math.max(0, state.visibleIndex - 1);
renderMonth(state.visibleIndex);
};
el('nextBtn').onclick = () => {
state.visibleIndex = Math.min(11, state.visibleIndex + 1);
renderMonth(state.visibleIndex);
};

Comment on lines +457 to +466
Copy link
Copy Markdown
Owner Author

@alwin-m alwin-m Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add some space

function toggleTheme() {
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
document.documentElement.setAttribute('data-theme', isDark ? 'light' : 'dark');
localStorage.setItem('theme', isDark ? 'light' : 'dark');
}

(function() {
document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') || 'light');
const today = new Date().toISOString().split('T')[0];
el('dob').max = today; el('last').max = today;
el('dob').max = today;
el('last').max = today;
el('name').focus();
})();

document.addEventListener('keydown', e => {
if (e.key === 'Escape') {
if (el('modal').classList.contains('active')) closeModal();
Expand Down