diff --git a/index.html b/index.html index df8584f..0eae868 100644 --- a/index.html +++ b/index.html @@ -69,7 +69,7 @@ background: linear-gradient(135deg, var(--bg1), var(--bg2)); color: var(--text); padding: 20px; - overscroll-behavior: none; /* Prevent pull-to-refresh issues */ + overscroll-behavior: none; } .app { width: 100%; @@ -133,8 +133,8 @@ background: var(--card); outline: none; color: var(--text); - font-size: 16px; /* Improved for touch */ - -webkit-appearance: none; /* Fix iOS styling */ + font-size: 16px; + -webkit-appearance: none; } input:focus { box-shadow: 0 6px 20px rgba(255,107,157,0.12); @@ -152,8 +152,8 @@ padding: 10px 16px; border-radius: 12px; font-weight: 700; - font-size: 16px; /* Improved for touch */ - touch-action: manipulation; /* Better touch response */ + font-size: 16px; + touch-action: manipulation; } .btn-primary { background: linear-gradient(45deg, var(--pink), var(--soft)); @@ -196,7 +196,7 @@ flex-direction: column; border: 1px solid #f4f4f4; position: relative; - touch-action: manipulation; /* Better touch */ + touch-action: manipulation; } .cell.other { background: #fafafa; @@ -241,7 +241,8 @@ border-radius: 10px; padding: 8px 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); - white-space: nowrap; + white-space: normal; + max-width: 90vw; font-size: 13px; color: var(--text); display: none; @@ -255,8 +256,6 @@ bottom: auto; top: 100%; transform: translateX(-50%); - white-space: normal; /* Wrap text on small screens */ - max-width: 90vw; /* Prevent overflow */ } .grid { gap: 6px; } .cell { min-height: 64px; } @@ -295,7 +294,7 @@ border-radius: 12px; max-width: 420px; box-shadow: 0 10px 40px rgba(0,0,0,0.18); - width: 90%; /* Better for mobile */ + width: 90%; } footer { margin-top: 16px; @@ -312,6 +311,47 @@ cursor: pointer; color: var(--pink); } + /* New styles for recommendations */ + .recommendations { + margin-top: 20px; + padding: 15px; + background: var(--card); + border-radius: 12px; + box-shadow: 0 4px 18px rgba(0,0,0,0.04); + } + .recommendations h3 { + margin: 0 0 10px; + font-size: 18px; + font-weight: 700; + } + .product-list { + display: flex; + flex-wrap: wrap; + gap: 15px; + } + .product-card { + flex: 1 1 200px; + background: var(--card); + border-radius: 10px; + padding: 10px; + text-align: center; + border: 1px solid #f4f4f4; + } + .product-card img { + max-width: 100%; + height: auto; + border-radius: 8px; + } + .product-card a { + display: block; + margin-top: 10px; + color: var(--pink); + text-decoration: none; + font-weight: 600; + } + .product-card a:hover { + text-decoration: underline; + } @@ -333,7 +373,7 @@

Hello — let's make this simple ✨

We will ask just a few friendly questions. You can go back anytime.

- +
@@ -355,15 +395,15 @@

Period details

Just one last step — this is used to create friendly estimates.

- +
- +
- +
@@ -411,6 +451,31 @@

Period details

⚠️ This is a student-built prototype for education. Not medically approved. Predictions are estimates. Use as guidance only.

+ +
+

Recommended Menstrual Products

+

Explore these options from Flipkart and Amazon (affiliate links not included; for illustration only).

+
+
+ Everteen Period Care XXL Soft Sanitary Pad (Pack of 40) - ₹399 +
+
+ Floh Regular Tampons (Pack of 20) - ₹180 +
+
+ Sirona Medium Reusable Menstrual Cup - ₹245 +
+
+ Whisper Ultra Hygiene+Comfort Sanitary Pads on Amazon - Explore Options +
+
+ Stayfree Tampons by OB on Amazon - Explore Options +
+
+ Reusable Menstrual Cups on Amazon - Explore Options +
+
+
@@ -474,7 +539,7 @@

Period details

function nextToStep2() { const name = el('name').value.trim(); const dob = el('dob').value; - if (name === '') return showModal('Please enter your name — a short nickname is fine.'); + if (!name) return showModal('Please enter your name — a short nickname is fine.'); state.name = name; if (dob) { const parsed = new Date(dob); @@ -669,12 +734,20 @@

Period details

function toggleTheme() { const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', theme); - localStorage.setItem('theme', theme); // Persist theme choice + try { + localStorage.setItem('theme', theme); + } catch (e) { + console.warn('localStorage unavailable, theme not persisted'); + } } - // Initialize theme from localStorage - if (localStorage.getItem('theme') === 'dark') { - document.documentElement.setAttribute('data-theme', 'dark'); + // Initialize theme + try { + if (localStorage.getItem('theme') === 'dark') { + document.documentElement.setAttribute('data-theme', 'dark'); + } + } catch (e) { + document.documentElement.setAttribute('data-theme', 'light'); } // keyboard & binding @@ -708,13 +781,20 @@

Period details

}); } - // set max dates + // set max dates and input validation (function setMaxDates() { const today = new Date().toISOString().split('T')[0]; - const dobMax = new Date(); - dobMax.setFullYear(dobMax.getFullYear() - 9); el('dob').setAttribute('max', today); el('last').setAttribute('max', today); + // Enforce min/max for number inputs + el('cycle').addEventListener('input', () => { + if (el('cycle').value < 15) el('cycle').value = 15; + if (el('cycle').value > 45) el('cycle').value = 45; + }); + el('periodLen').addEventListener('input', () => { + if (el('periodLen').value < 3) el('periodLen').value = 3; + if (el('periodLen').value > 10) el('periodLen').value = 10; + }); })(); // accessibility: focus first field on step change @@ -734,7 +814,7 @@

Period details

// Register service worker for PWA if ('serviceWorker' in navigator) { window.addEventListener('load', () => { - navigator.serviceWorker.register('./serviceworker.js') + navigator.serviceWorker.register('./serviceworker.js', { scope: './' }) .then(reg => console.log('Service Worker registered', reg)) .catch(err => console.log('Service Worker registration failed', err)); });