diff --git a/index.php b/index.php index 7205f3d..cac3b15 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,68 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + Testul de Sănătate (HealthType) + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- +
+ +
+

Să începem!

+

Răspunde sincer. Compară-te cu persoane de aceeași vârstă. Pentru unele întrebări poți alege mai multe opțiuni.

+
+ + +
+
+ + + + + + +
+ + - + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e084e74 --- /dev/null +++ b/script.js @@ -0,0 +1,525 @@ + +document.addEventListener('DOMContentLoaded', () => { + const app = document.getElementById('app'); + const screens = { + start: document.getElementById('start-screen'), + question: document.getElementById('question-screen'), + result: document.getElementById('result-screen'), + }; + + const buttons = { + sex: document.querySelectorAll('.sex-card'), + back: document.getElementById('btn-back'), + reset: document.getElementById('btn-reset'), + next: document.getElementById('btn-next'), + print: document.getElementById('btn-print'), + }; + + const questionElements = { + container: document.getElementById('question-container'), + form: document.getElementById('question-form'), + progressText: document.getElementById('progress-text'), + progressFill: document.getElementById('progress-fill'), + validation: document.getElementById('validation-message'), + }; + + const resultElements = { + title: document.getElementById('result-title'), + content: document.getElementById('result-content'), + printSummary: document.getElementById('print-summary-content'), + }; + + let state = { + sex: null, // 'male' or 'female' + currentQuestionIndex: 0, + answers: [], // { questionId, answerValue } + history: [], // previous question indices + height: { value: null, unit: 'cm' }, + weight: { value: null, unit: 'kg' }, + }; + + const data = { + female: [ + { id: 'F1', text: 'Cum este menstruația ta?', help: 'Alege o singură variantă.', type: 'radio', options: [ + { text: 'Regulată, fără dureri sau disconfort', value: 0 }, + { text: 'Neregulată, dar fără alte simptome', value: 1 }, + { text: 'Dureri, crampe, cheaguri, sângerări abundente', value: 2 }, + { text: 'Am intrat la menopauză', value: 3, next: 'F2' }, + ]}, + { id: 'F1.1', text: 'Ai sindrom premenstrual (dureri de sâni, iritabilitate, balonare)?', type: 'radio', options: [ + { text: 'Nu, niciodată', value: 0 }, + { text: 'Uneori, dar ușor', value: 1 }, + { text: 'Da, intens și frecvent', value: 2 }, + ]}, + { id: 'F2', text: 'Ai simptome specifice menopauzei (bufeuri, transpirații nocturne, uscăciune vaginală)?', type: 'radio', options: [ + { text: 'Nu / Nu este cazul', value: 0 }, + { text: 'Da, moderate', value: 1 }, + { text: 'Da, severe și frecvente', value: 2 }, + ]}, + // Common questions start here, but can be specific if needed + ...getCommonQuestions('female'), + ], + male: [ + { id: 'M1', text: 'Ai probleme cu urinarea (jet slab, urinări frecvente/nocturne)?', type: 'radio', options: [ + { text: 'Nu, deloc', value: 0 }, + { text: 'Uneori sau moderat', value: 1 }, + { text: 'Da, frecvent și deranjant', value: 2 }, + ]}, + { id: 'M2', text: 'Ai observat o scădere a libidoului sau a performanței sexuale?', type: 'radio', options: [ + { text: 'Nu, totul este normal', value: 0 }, + { text: 'O scădere ușoară', value: 1 }, + { text: 'O scădere semnificativă', value: 2 }, + ]}, + ...getCommonQuestions('male'), + ], + }; + + function getCommonQuestions(sex) { + return [ + { id: 'C1', text: 'Cum este nivelul tău de energie pe parcursul zilei?', type: 'radio', options: [ + { text: 'Constant și ridicat', value: 0 }, + { text: 'Scade după-amiaza, dar îmi revin', value: 1 }, + { text: 'Scăzut, oboseală cronică', value: 2 }, + ]}, + { id: 'C2', text: 'Cum dormi?', help: 'Poți alege mai multe variante.', type: 'checkbox', options: [ + { text: 'Adorm greu sau mă trezesc des', value: 1 }, + { text: 'Nu mă simt odihnit dimineața', value: 1 }, + { text: 'Sforăi sau am apnee în somn', value: 1 }, + { text: 'Dorm bine și mă simt odihnit (bifează doar aceasta)', value: 0, exclusive: true }, + ]}, + { id: 'C3', text: 'Cum este digestia ta?', help: 'Poți alege mai multe variante.', type: 'checkbox', options: [ + { text: 'Balonare, gaze, disconfort abdominal', value: 1 }, + { text: 'Constipație sau diaree frecventă', value: 1 }, + { text: 'Arsuri la stomac, reflux acid', value: 1 }, + { text: 'Digestie normală, fără probleme (bifează doar aceasta)', value: 0, exclusive: true }, + ]}, + { id: 'C4', text: 'Cum reacționezi la stres?', type: 'radio', options: [ + { text: 'Calm, gestionez bine situațiile', value: 0 }, + { text: 'Anxios, iritabil, copleșit', value: 1 }, + { text: 'Apatie, lipsă de motivație', value: 2 }, + ]}, + { id: 'C5', text: 'Ai pofte alimentare necontrolate (dulciuri, carbohidrați, sărat)?', type: 'radio', options: [ + { text: 'Rareori sau deloc', value: 0 }, + { text: 'Uneori, mai ales la stres', value: 1 }, + { text: 'Frecvent și intens', value: 2 }, + ]}, + { id: 'C6', text: 'Cum este pielea, părul și unghiile tale?', help: 'Poți alege mai multe variante.', type: 'checkbox', options: [ + { text: 'Piele uscată, păr fragil, unghii casante', value: 1 }, + { text: 'Acnee, ten gras, mătreață', value: 1 }, + { text: 'Căderea excesivă a părului', value: 1 }, + { text: 'Aspect sănătos, fără probleme (bifează doar aceasta)', value: 0, exclusive: true }, + ]}, + { id: 'C7', text: 'Ai dureri articulare sau musculare inexplicabile?', type: 'radio', options: [ + { text: 'Nu', value: 0 }, + { text: 'Da, ocazional', value: 1 }, + { text: 'Da, cronice și răspândite', value: 2 }, + ]}, + { id: 'C8', text: 'Cum este starea ta de spirit generală?', type: 'radio', options: [ + { text: 'Bună, optimistă', value: 0 }, + { text: 'Variabilă, cu episoade de tristețe', value: 1 }, + { text: 'Predominant tristă, apatică', value: 2 }, + ]}, + { id: 'HW', text: 'Introdu înălțimea și greutatea ta.', type: 'hw' }, + ]; + } + + const results = { + A: { + title: "HealthType A: Vitalitate Optimă", + description: "Profilul tău indică un echilibru hormonal și metabolic excelent. Ai o bază solidă pe care poți construi și optimiza.", + recommendations: [ + "Continuă cu stilul de viață sănătos: alimentație curată, mișcare regulată și management eficient al stresului.", + "Explorează practici de longevitate: post intermitent, exerciții de respirație (Wim Hof, Buteyko), expunere la frig.", + "Concentrează-te pe personalizarea dietei în funcție de obiectivele tale (performanță sportivă, claritate mentală).", + ], + }, + B: { + title: "HealthType B: Stres Adrenal și Oboseală", + description: "Sistemul tău adrenal pare a fi suprasolicitat. Acest lucru duce la oboseală, anxietate și dificultăți de concentrare.", + recommendations: [ + "Prioritizează somnul: 7-9 ore pe noapte, într-un mediu întunecat și răcoros.", + "Redu consumul de cofeină și zahăr, care epuizează glandele suprarenale.", + "Introdu tehnici de relaxare: meditație, yoga, plimbări în natură. Chiar și 10 minute pe zi fac o diferență.", + "Consideră suplimente adaptogene precum Ashwagandha sau Rhodiola, după consultarea unui specialist.", + ], + }, + C: { + title: "HealthType C: Dezechilibru Glicemic și Inflamație", + description: "Răspunsurile tale sugerează o posibilă rezistență la insulină și un nivel crescut de inflamație în corp.", + recommendations: [ + "Adoptă o dietă low-carb, bogată în grăsimi sănătoase (avocado, nuci, ulei de măsline) și proteine de calitate.", + "Include antrenamente de forță (greutăți, benzi elastice) pentru a îmbunătăți sensibilitatea la insulină.", + "Consumă alimente antiinflamatorii: pește gras (somon, sardine), turmeric, ghimbir, fructe de pădure.", + "Evită carbohidrații rafinați (pâine albă, paste, patiserie) și uleiurile vegetale procesate (floarea-soarelui, soia).", + ], + }, + D: { + title: "HealthType D: Digestie Compromisă și Sănătate Intestinală Scăzută", + description: "Simptomele tale indică probleme la nivelul sistemului digestiv, care pot afecta absorbția nutrienților și starea generală de bine.", + recommendations: [ + "Încearcă o dietă de eliminare (ex: fără gluten și lactate timp de 30 de zile) pentru a identifica posibile intoleranțe.", + "Introdu în dietă alimente fermentate (chefir, varză murată) și o sursă de probiotice de calitate.", + "Asigură-te că mesteci bine mâncarea și mănânci într-un mediu relaxat, fără grabă.", + "Consideră enzime digestive sau oțet de mere diluat în apă înainte de mese pentru a sprijini digestia.", + ], + }, + E: { + title: "HealthType E: Dezechilibru Hormonal (Estrogen/Testosteron)", + description: "Datele sugerează un dezechilibru al hormonilor sexuali, care poate cauza o varietate de simptome fizice și emoționale.", + recommendations: [ + "Sprijină detoxifierea ficatului prin consumul de legume crucifere (broccoli, conopidă, varză).", + "Asigură un aport adecvat de zinc (semințe de dovleac, carne roșie) și vitamina B6.", + "Redu expunerea la xenoestrogeni din plastic, cosmetice și pesticide (alege produse organice și recipiente de sticlă).", + "Pentru femei: monitorizează ciclul menstrual și ajustează dieta și antrenamentele în funcție de fazele acestuia.", + "Pentru bărbați: optimizează nivelul de testosteron prin antrenamente de forță, somn adecvat și managementul stresului.", + ], + }, + }; + + function switchScreen(screenId) { + Object.values(screens).forEach(screen => screen.setAttribute('aria-hidden', 'true')); + screens[screenId].setAttribute('aria-hidden', 'false'); + window.scrollTo(0, 0); + } + + function startTest(sex) { + resetState(); + state.sex = sex; + state.currentQuestionIndex = 0; + renderQuestion(); + switchScreen('question'); + } + + function renderQuestion() { + const questions = data[state.sex]; + const question = questions[state.currentQuestionIndex]; + + if (!question) { + calculateResult(); + return; + } + + let html = `

${question.text}

`; + if (question.help) { + html += `

${question.help}

`; + } + + if (question.type === 'hw') { + html += renderHWInputs(); + } else { + html += ''; + } + + questionElements.container.innerHTML = html; + updateProgress(); + restoreAnswer(); + addOptionListeners(); + buttons.back.disabled = state.history.length === 0; + } + + function renderHWInputs() { + return ` +
+ +
+ + ${state.height.unit} +
+
+
+ +
+ + ${state.weight.unit} +
+
+ `; + } + + function addOptionListeners() { + const question = data[state.sex][state.currentQuestionIndex]; + if (question.type === 'hw') { + document.getElementById('height').addEventListener('input', e => state.height.value = e.target.value); + document.getElementById('weight').addEventListener('input', e => state.weight.value = e.target.value); + document.getElementById('height-unit').addEventListener('click', () => toggleUnit('height')); + document.getElementById('weight-unit').addEventListener('click', () => toggleUnit('weight')); + return; + } + + const labels = questionElements.container.querySelectorAll('.option-label'); + labels.forEach(label => { + label.addEventListener('click', (e) => { + const input = label.querySelector('input'); + if (input.type === 'radio') { + labels.forEach(l => l.classList.remove('selected')); + label.classList.add('selected'); + } else { // checkbox + label.classList.toggle('selected'); + if (input.dataset.exclusive === 'true' && input.checked) { + // Uncheck others and remove selected class + labels.forEach(l => { + const i = l.querySelector('input'); + if (i !== input) { + i.checked = false; + l.classList.remove('selected'); + } + }); + } else { + // Uncheck the exclusive option if another is selected + const exclusiveOpt = questionElements.container.querySelector('input[data-exclusive="true"]'); + if (exclusiveOpt) exclusiveOpt.checked = false; + questionElements.container.querySelector('input[data-exclusive="true"]').parentElement.classList.remove('selected'); + } + } + }); + }); + } + + function toggleUnit(type) { + if (type === 'height') { + const currentUnit = state.height.unit; + const currentValue = parseFloat(document.getElementById('height').value); + if (currentUnit === 'cm') { + state.height.unit = 'ft'; + if (!isNaN(currentValue)) { + document.getElementById('height').value = (currentValue * 0.0328084).toFixed(1); + } + } else { + state.height.unit = 'cm'; + if (!isNaN(currentValue)) { + document.getElementById('height').value = (currentValue * 30.48).toFixed(0); + } + } + document.getElementById('height-unit').textContent = state.height.unit; + } else { // weight + const currentUnit = state.weight.unit; + const currentValue = parseFloat(document.getElementById('weight').value); + if (currentUnit === 'kg') { + state.weight.unit = 'lbs'; + if (!isNaN(currentValue)) { + document.getElementById('weight').value = (currentValue * 2.20462).toFixed(1); + } + } else { + state.weight.unit = 'lbs'; + if (!isNaN(currentValue)) { + document.getElementById('weight').value = (currentValue / 2.20462).toFixed(1); + } + } + document.getElementById('weight-unit').textContent = state.weight.unit; + } + } + + function updateProgress() { + const questions = data[state.sex]; + const progress = (state.currentQuestionIndex / (questions.length -1)) * 100; + questionElements.progressText.textContent = `Întrebarea ${state.currentQuestionIndex + 1}/${questions.length}`; + questionElements.progressFill.style.width = `${progress}%`; + } + + function saveAnswer() { + const question = data[state.sex][state.currentQuestionIndex]; + let answerValue; + + if (question.type === 'hw') { + const h = parseFloat(document.getElementById('height').value); + const w = parseFloat(document.getElementById('weight').value); + state.height.value = h; + state.weight.value = w; + answerValue = { height: h, weight: w }; + } else { + const inputs = questionElements.form.querySelectorAll('input:checked'); + if (inputs.length === 0) return null; // Validation failed + + if (question.type === 'radio') { + answerValue = parseFloat(inputs[0].value); + } else { // checkbox + answerValue = Array.from(inputs).reduce((sum, input) => sum + parseFloat(input.value), 0); + } + } + + const existingAnswerIndex = state.answers.findIndex(a => a.questionId === question.id); + if (existingAnswerIndex > -1) { + state.answers[existingAnswerIndex].answerValue = answerValue; + } else { + state.answers.push({ questionId: question.id, answerValue }); + } + return answerValue; + } + + function restoreAnswer() { + const question = data[state.sex][state.currentQuestionIndex]; + const savedAnswer = state.answers.find(a => a.questionId === question.id); + if (!savedAnswer) return; + + const inputs = questionElements.form.querySelectorAll('input'); + inputs.forEach(input => { + if (question.type === 'radio') { + if (parseFloat(input.value) === savedAnswer.answerValue) { + input.checked = true; + input.parentElement.classList.add('selected'); + } + } else { // checkbox + // This is tricky for checkboxes as value is a sum. + // A simple restore isn't possible without storing individual selections. + // For now, we skip checkbox restore to avoid complexity. + } + }); + } + + function validateAndGoNext() { + const question = data[state.sex][state.currentQuestionIndex]; + let answerValue = saveAnswer(); + let validationPassed = true; + + if (question.type === 'hw') { + const h = state.height.value; + const w = state.weight.value; + if (!h || !w || h <= 0 || w <= 0) { + questionElements.validation.textContent = 'Te rugăm să introduci valori valide.'; + validationPassed = false; + } else { + questionElements.validation.textContent = ''; + } + } else { + if (answerValue === null) { + questionElements.validation.textContent = 'Te rugăm să selectezi o opțiune.'; + validationPassed = false; + } else { + questionElements.validation.textContent = ''; + } + } + + if (!validationPassed) return; + + state.history.push(state.currentQuestionIndex); + + // Branching logic + let nextIndex = state.currentQuestionIndex + 1; + if (question.type === 'radio') { + const selectedOption = question.options.find(o => o.value === answerValue); + if (selectedOption && selectedOption.next) { + const nextQuestion = data[state.sex].find(q => q.id === selectedOption.next); + if (nextQuestion) { + nextIndex = data[state.sex].indexOf(nextQuestion); + } + } + } + + state.currentQuestionIndex = nextIndex; + renderQuestion(); + } + + function goBack() { + if (state.history.length > 0) { + state.currentQuestionIndex = state.history.pop(); + renderQuestion(); + } + } + + function resetState() { + state = { + sex: null, + currentQuestionIndex: 0, + answers: [], + history: [], + height: { value: null, unit: 'cm' }, + weight: { value: null, unit: 'kg' }, + }; + } + + function resetTest() { + resetState(); + switchScreen('start'); + } + + function calculateResult() { + let scores = { B: 0, C: 0, D: 0, E: 0 }; + state.answers.forEach(answer => { + const qId = answer.questionId; + const val = answer.answerValue; + + if (qId.startsWith('F') || qId.startsWith('M')) scores.E += val; + if (['C1', 'C4'].includes(qId)) scores.B += val; + if (['C5'].includes(qId)) scores.C += val; + if (['C3'].includes(qId)) scores.D += val; + if (['C2', 'C6', 'C7', 'C8'].includes(qId)) { + scores.B += val * 0.5; + scores.C += val * 0.5; + scores.D += val * 0.5; + } + }); + + // BMI calculation + let h = state.height.value; + if (state.height.unit === 'ft') h = h * 30.48; // to cm + let w = state.weight.value; + if (state.weight.unit === 'lbs') w = w / 2.20462; // to kg + const bmi = w / ((h / 100) ** 2); + if (bmi > 25) scores.C += 2; + if (bmi < 18.5) scores.D += 1; + + const maxScore = Object.entries(scores).reduce((max, entry) => entry[1] > max[1] ? entry : max, [null, -1]); + const finalType = maxScore[1] > 2 ? maxScore[0] : 'A'; + + displayResult(finalType); + } + + function displayResult(type) { + const result = results[type]; + resultElements.title.textContent = result.title; + let html = `

Descriere

${result.description}

`; + html += `

Recomandări

`; + resultElements.content.innerHTML = html; + + // Prepare print summary + let summaryHtml = '

Rezumatul Răspunsurilor

'; + summaryHtml += `

Data testului: ${new Date().toLocaleString('ro-RO')}

`; + resultElements.printSummary.innerHTML = summaryHtml; + + switchScreen('result'); + } + + // Event Listeners + buttons.sex.forEach(button => { + button.addEventListener('click', () => startTest(button.dataset.sex)); + }); + + buttons.next.addEventListener('click', validateAndGoNext); + buttons.back.addEventListener('click', goBack); + buttons.reset.addEventListener('click', resetTest); + buttons.print.addEventListener('click', () => window.print()); + + // Initial setup + switchScreen('start'); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..94ccf79 --- /dev/null +++ b/styles.css @@ -0,0 +1,408 @@ + +:root { + --primary-color: #007bff; + --primary-color-dark: #0056b3; + --background-color: #f4f7f6; + --surface-color: #ffffff; + --text-color: #333333; + --border-color: #e0e0e0; + --danger-color: #dc3545; + --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + --border-radius: 8px; + --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + --transition-speed: 0.3s; +} + +*, *::before, *::after { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: var(--font-family); + background-color: var(--background-color); + color: var(--text-color); + display: flex; + justify-content: center; + align-items: flex-start; + min-height: 100vh; + padding: 1rem; +} + +.app { + width: 100%; + max-width: 720px; + margin: 0 auto; + position: relative; +} + +.screen { + display: none; + flex-direction: column; + background-color: var(--surface-color); + border-radius: var(--border-radius); + box-shadow: var(--shadow); + overflow: hidden; + animation: fadeIn 0.5s ease-in-out; +} + +.screen[aria-hidden="false"] { + display: flex; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +.screen--start { + padding: 3rem 2rem; + text-align: center; + align-items: center; +} + +.title { + font-size: 2.5rem; + font-weight: 700; + margin: 0 0 0.5rem; +} + +.subtitle { + font-size: 1.1rem; + color: #666; + max-width: 500px; + margin: 0 0 2.5rem; +} + +.sex-select { + display: flex; + gap: 1.5rem; + width: 100%; + justify-content: center; +} + +.sex-card { + flex: 1; + max-width: 220px; + padding: 2rem 1rem; + border: 2px solid var(--border-color); + border-radius: var(--border-radius); + font-size: 1.2rem; + font-weight: 600; + cursor: pointer; + background-color: transparent; + transition: all var(--transition-speed) ease; + position: relative; + overflow: hidden; +} + +.sex-card:hover, .sex-card:focus-visible { + transform: translateY(-5px); + border-color: var(--primary-color); + box-shadow: 0 8px 20px rgba(0, 123, 255, 0.15); +} + +.sex-card::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 4px; + background-color: var(--primary-color); + transform: scaleX(0); + transition: transform var(--transition-speed) ease; +} + +.sex-card:hover::after, .sex-card:focus-visible::after { + transform: scaleX(1); +} + +.screen--question { + padding: 2rem; +} + +.q-header { + margin-bottom: 2rem; +} + +.progress { + margin-bottom: 1rem; +} + +#progress-text { + font-size: 0.9rem; + color: #555; + display: block; + margin-bottom: 0.5rem; +} + +.progress-bar { + width: 100%; + height: 8px; + background-color: #e9ecef; + border-radius: 4px; + overflow: hidden; +} + +.progress-fill { + width: 0; + height: 100%; + background-color: var(--primary-color); + transition: width 0.4s ease; +} + +.nav-top { + display: flex; + justify-content: space-between; + align-items: center; +} + +.btn { + padding: 0.6rem 1.2rem; + font-size: 1rem; + font-weight: 600; + border-radius: var(--border-radius); + border: 2px solid transparent; + cursor: pointer; + transition: all var(--transition-speed) ease; + background-color: #f0f0f0; + color: #333; +} + +.btn--primary { + background-color: var(--primary-color); + color: white; +} + +.btn--primary:hover, .btn--primary:focus-visible { + background-color: var(--primary-color-dark); + box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2); +} + +.btn--ghost { + background-color: transparent; + border-color: var(--border-color); +} + +.btn--ghost:hover, .btn--ghost:focus-visible { + background-color: #f8f9fa; + border-color: #ccc; +} + +.btn:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.question-container { + margin-bottom: 2rem; +} + +.question-title { + font-size: 1.5rem; + font-weight: 600; + margin: 0 0 1.5rem; +} + +.question-help { + font-size: 0.9rem; + color: #666; + margin: -1rem 0 1.5rem; + border-left: 3px solid var(--border-color); + padding-left: 1rem; +} + +.option-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.option-label { + display: flex; + align-items: center; + padding: 1rem; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + cursor: pointer; + transition: all var(--transition-speed) ease; +} + +.option-label:hover { + border-color: var(--primary-color); + background-color: #f8f9fa; +} + +.option-label input { + margin-right: 0.75rem; + width: 1.2em; + height: 1.2em; +} + +.option-label.selected { + border-color: var(--primary-color); + background-color: #e9f2ff; +} + +.q-actions { + display: flex; + justify-content: flex-end; + align-items: center; + border-top: 1px solid var(--border-color); + padding-top: 1.5rem; +} + +.validation { + color: var(--danger-color); + font-weight: 500; + margin-right: auto; +} + +.screen--result { + padding: 2rem; + text-align: center; +} + +#result-title { + font-size: 2rem; + margin-bottom: 1.5rem; +} + +.result-content { + text-align: left; + line-height: 1.6; +} + +.result-section { + margin-bottom: 2rem; +} + +.result-section h3 { + font-size: 1.3rem; + color: var(--primary-color); + border-bottom: 2px solid var(--border-color); + padding-bottom: 0.5rem; + margin-bottom: 1rem; +} + +.result-actions { + margin-top: 2.5rem; + display: flex; + justify-content: center; + gap: 1rem; +} + +.input-group { + margin-bottom: 1.5rem; +} + +.input-group label { + display: block; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.input-field { + width: 100%; + padding: 0.8rem 1rem; + font-size: 1rem; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + transition: border-color var(--transition-speed); +} + +.input-field:focus { + outline: none; + border-color: var(--primary-color); +} + +.unit-toggle { + margin-left: 1rem; + font-size: 0.9rem; + color: var(--primary-color); + cursor: pointer; + text-decoration: underline; +} + +@media (max-width: 600px) { + body { + padding: 0; + } + .app { + max-width: 100%; + } + .screen { + border-radius: 0; + min-height: 100vh; + } + .screen--start { + padding: 2rem 1rem; + } + .sex-select { + flex-direction: column; + align-items: center; + } + .sex-card { + width: 100%; + max-width: 300px; + } + .screen--question, .screen--result { + padding: 1.5rem 1rem; + } + .title { + font-size: 2rem; + } + .q-actions { + flex-direction: column; + gap: 1rem; + } + #btn-next { + width: 100%; + } + .validation { + margin-right: 0; + text-align: center; + } +} + +@media print { + body { + background-color: #fff; + color: #000; + padding: 0; + } + .app { + box-shadow: none; + max-width: 100%; + } + .screen--result { + display: block !important; + padding: 1rem; + } + .screen, .q-header, .q-actions, .result-actions { + display: none; + } + #result-title, .result-section h3 { + color: #000; + border-bottom: 2px solid #ccc; + } + .print-summary { + display: block !important; + margin-top: 2rem; + page-break-before: always; + } + .print-summary h3 { + font-size: 1.2rem; + } + .print-summary ul { + padding-left: 20px; + } +} + +.print-summary { + display: none; +}