`).join(''); } // --- UI LOGIC --- function updateUI() { tabs.forEach((tab, index) => tab.classList.toggle('hidden', index + 1 !== currentTab)); tabBtns.forEach((btn, index) => { btn.classList.toggle('tab-active', index + 1 === currentTab); btn.classList.toggle('tab-inactive', index + 1 !== currentTab); }); prevBtn.classList.toggle('invisible', currentTab === 1); nextBtn.textContent = currentTab === 2 ? 'Generate Plan' : 'Next'; nextBtn.classList.toggle('hidden', currentTab >= 3); } window.changeTab = (tabNumber) => { currentTab = tabNumber; updateUI(); }; // --- CORE LOGIC --- function generatePlan() { const selectedIngredients = Array.from(document.querySelectorAll('input[name="ingredient"]:checked')).map(el => el.value); const amRoutine = []; const pmRoutine = []; const notes = new Set(); // Build AM Routine amRoutine.push({ step: 'Cleanse', product: 'Gentle Cleanser', note: 'Start with a clean face.' }); if (selectedIngredients.includes('vitaminc')) amRoutine.push({ step: 'Treat', product: 'Vitamin C Serum', note: 'Apply to dry skin for antioxidant protection.' }); if (selectedIngredients.includes('antioxidants') && !selectedIngredients.includes('vitaminc')) amRoutine.push({ step: 'Treat', product: 'Antioxidant Serum', note: 'Protect against environmental damage.' }); if (selectedIngredients.includes('peptides')) amRoutine.push({ step: 'Treat', product: 'Peptide Serum', note: 'Helps with firmness and elasticity.' }); if (selectedIngredients.includes('hyaluronic')) amRoutine.push({ step: 'Hydrate', product: 'Hyaluronic Acid Serum', note: 'Apply to damp skin for extra hydration.' }); amRoutine.push({ step: 'Moisturize', product: 'Moisturizer', note: 'Lock in hydration.' }); amRoutine.push({ step: 'Protect', product: 'Broad-Spectrum SPF 30+', note: 'The most important anti-aging step. Apply generously.' }); // Build PM Routine pmRoutine.push({ step: 'Cleanse', product: 'Cleanser', note: 'Consider a double cleanse to remove SPF/makeup.' }); if (selectedIngredients.includes('exfoliants')) pmRoutine.push({ step: 'Exfoliate', product: 'AHA / BHA Toner or Serum', note: 'Use 2-3 times a week on nights you don\'t use Retinoids.' }); if (selectedIngredients.includes('retinoids')) pmRoutine.push({ step: 'Treat', product: 'Retinoid', note: 'Start with a low concentration 1-2 times a week.' }); if (selectedIngredients.includes('niacinamide')) pmRoutine.push({ step: 'Treat', product: 'Niacinamide Serum', note: 'Can help calm skin and reduce pore size.' }); if (selectedIngredients.includes('peptides')) pmRoutine.push({ step: 'Treat', product: 'Peptide Serum', note: 'Support skin repair overnight.' }); if (selectedIngredients.includes('hyaluronic')) pmRoutine.push({ step: 'Hydrate', product: 'Hyaluronic Acid Serum', note: 'Apply to damp skin before moisturizer.' }); pmRoutine.push({ step: 'Moisturize', product: 'Moisturizer / Night Cream', note: 'Use a richer cream for overnight repair.' }); // Add conflict notes if (selectedIngredients.includes('retinoids') && selectedIngredients.includes('exfoliants')) { notes.add('Important: Use Retinoids and AHAs/BHAs on alternate nights to avoid irritation.'); } if (selectedIngredients.includes('retinoids')) { notes.add('Patch Test: Always patch test new active ingredients, especially Retinoids.'); } notes.add('Listen to your skin: If irritation occurs, reduce frequency or stop using the product.'); displayPlan(amRoutine, pmRoutine, Array.from(notes)); currentTab = 3; updateUI(); } function displayPlan(amRoutine, pmRoutine, notes) { const amContainer = document.getElementById('am-routine-steps'); amContainer.innerHTML = amRoutine.map((item, i) => ` `).join(''); const pmContainer = document.getElementById('pm-routine-steps'); pmContainer.innerHTML = pmRoutine.map((item, i) => ` `).join(''); const notesContainer = document.getElementById('routine-notes'); notesContainer.innerHTML = notes.map(note => `

• ${note}

`).join(''); resultsPlaceholder.classList.add('hidden'); resultsContent.classList.remove('hidden'); } function downloadPDF() { if (resultsContent.classList.contains('hidden')) { alert('Please generate your plan first.'); return; } const { jsPDF } = window.jspdf; const doc = new jsPDF({ unit: 'pt', format: 'a4' }); const pageW = doc.internal.pageSize.getWidth(); const margin = 40; let currentY = 0; const primaryColor = [37, 99, 235], grayColor = [107, 114, 128], blackColor = [17, 24, 39]; // --- HEADER --- doc.setFillColor(...primaryColor); doc.rect(0, 0, pageW, 80, 'F'); doc.setFont('helvetica', 'bold'); doc.setFontSize(24); doc.setTextColor(255, 255, 255); doc.text('Your Anti-Aging Skincare Plan', margin, 50); // --- REPORT INFO --- currentY = 110; const reportDate = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }); doc.setFont('helvetica', 'normal'); doc.setFontSize(9); doc.setTextColor(...grayColor); doc.text(`Generated on: ${reportDate}`, pageW - margin, currentY, { align: 'right' }); currentY += 20; // --- ROUTINE TABLES --- const amRoutine = Array.from(document.querySelectorAll('#am-routine-steps > div')).map(el => [ el.querySelector('.font-bold').textContent, el.querySelector('.font-semibold').textContent, el.querySelector('.text-sm').textContent ]); const pmRoutine = Array.from(document.querySelectorAll('#pm-routine-steps > div')).map(el => [ el.querySelector('.font-bold').textContent, el.querySelector('.font-semibold').textContent, el.querySelector('.text-sm').textContent ]); doc.setFont('helvetica', 'bold'); doc.setFontSize(16); doc.setTextColor(...blackColor); doc.text('☀️ Morning Routine', margin, currentY); currentY += 5; doc.autoTable({ startY: currentY, head: [['Step', 'Product Type', 'Notes']], body: amRoutine, theme: 'striped', headStyles: { fillColor: [59, 130, 246] }, styles: { font: 'helvetica', fontSize: 9 } }); currentY = doc.lastAutoTable.finalY + 30; doc.setFont('helvetica', 'bold'); doc.setFontSize(16); doc.setTextColor(...blackColor); doc.text('🌙 Evening Routine', margin, currentY); currentY += 5; doc.autoTable({ startY: currentY, head: [['Step', 'Product Type', 'Notes']], body: pmRoutine, theme: 'striped', headStyles: { fillColor: [79, 70, 229] }, styles: { font: 'helvetica', fontSize: 9 } }); currentY = doc.lastAutoTable.finalY + 20; // --- NOTES --- const notes = Array.from(document.querySelectorAll('#routine-notes p')).map(el => el.innerHTML.replace(//g, '').replace(/<\/strong>/g, '')); if(notes.length > 0) { doc.setFont('helvetica', 'bold'); doc.setFontSize(12); doc.text('Important Considerations', margin, currentY); currentY += 15; doc.setFont('helvetica', 'normal'); doc.setFontSize(9); notes.forEach(note => { const noteLines = doc.splitTextToSize(`• ${note}`, pageW - (margin * 2)); doc.text(noteLines, margin, currentY); currentY += (noteLines.length * 10) + 5; }); } // --- FOOTER --- const pageH = doc.internal.pageSize.getHeight(); doc.setDrawColor(...grayColor); doc.line(margin, pageH - 60, pageW - margin, pageH - 60); doc.setFont('helvetica', 'normal'); doc.setFontSize(8); doc.setTextColor(...grayColor); const footerText = 'This planner provides a general guideline based on your selections. It is not a substitute for professional medical advice. For personalized recommendations and to address specific skin conditions, please consult a board-certified dermatologist.'; doc.text(doc.splitTextToSize(footerText, pageW - (margin * 2)), margin, pageH - 45); doc.save('My-Skincare-Plan.pdf'); } // --- EVENT LISTENERS --- prevBtn.addEventListener('click', () => { if (currentTab > 1) { currentTab--; updateUI(); } }); nextBtn.addEventListener('click', () => { if (currentTab === 1) { currentTab++; } else if (currentTab === 2) { generatePlan(); } updateUI(); }); pdfDownloadBtn.addEventListener('click', downloadPDF); // --- KICKOFF --- populateOptions(); updateUI(); });