.title { font-size: 1.5rem; font-weight: bold; color: #1e40af; margin-bottom: 0.5rem; }

.controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-bottom: 1rem; }

.star-count { display: flex; align-items: center; gap: 0.25rem; }

.star-icon { color: #eab308; width: 1.25rem; height: 1.25rem; }

.star-number { font-size: 1.125rem; font-weight: bold; color: #ca8a04; }

.control-btn { padding: 0.5rem; border-radius: 9999px; border: none; cursor: pointer; transition: background-color 0.2s; }

.sound-btn { background: #bbf7d0; color: #166534; }

.sound-btn.disabled { background: #e5e7eb; color: #6b7280; }

.reset-btn { background: #bfdbfe; color: #1d4ed8; }

.reset-btn:hover { background: #93c5fd; }

.progress-section { margin-bottom: 1.5rem; }

.progress-text { display: flex; justify-content: space-between; font-size: 0.875rem; color: #2563eb; margin-bottom: 0.5rem; }

.progress-bar { width: 100%; background: #e5e7eb; border-radius: 9999px; height: 0.75rem; }

.progress-fill { height: 0.75rem; border-radius: 9999px; background: linear-gradient(to right, #3b82f6, #10b981); transition: width 0.5s; }

.current-step { background: white; border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); margin-bottom: 1.5rem; border: 2px solid #bfdbfe; }

.step-visual { text-align: center; margin-bottom: 1rem; }

.step-emoji { font-size: 3.75rem; margin-bottom: 0.75rem; }

.step-title { font-size: 1.25rem; font-weight: bold; color: #1e40af; margin-bottom: 0.5rem; }

.step-description { color: #374151; font-size: 1.125rem; line-height: 1.625; }

.action-button { display: flex; justify-content: center; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 0.75rem; color: white; font-weight: bold; font-size: 1.125rem; border: none; cursor: pointer; transition: all 0.2s; margin: 0 auto; }

.action-button:not(:disabled) { background: #3b82f6; }

.action-button:not(:disabled):hover { background: #2563eb; transform: scale(1.05); }

.action-button:disabled { background: #10b981; cursor: not-allowed; }

.navigation { display: flex; justify-content: space-between; margin-bottom: 1.5rem; }

.nav-btn { padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; border: none; cursor: pointer; }

.nav-btn:not(:disabled) { background: #bfdbfe; color: #1d4ed8; }

.nav-btn:not(:disabled):hover { background: #93c5fd; }

.nav-btn:disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }

.steps-overview { background: white; border-radius: 0.75rem; padding: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }

.overview-title { font-weight: bold; color: #1e40af; margin-bottom: 0.75rem; text-align: center; }

.steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }

.step-btn { aspect-ratio: 1; border-radius: 0.5rem; padding: 0.5rem; font-size: 0.75rem; font-weight: 500; transition: all 0.2s; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.step-btn.current { background: #3b82f6; color: white; box-shadow: 0 0 0 2px #93c5fd; }

.step-btn.completed { background: #bbf7d0; color: #166534; }

.step-btn.incomplete { background: #f3f4f6; color: #6b7280; }

.step-btn:hover:not(.current) { background: #e5e7eb; }

.step-icon { font-size: 1.125rem; margin-bottom: 0.25rem; }

.success-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 50; }

.success-content { background: white; border-radius: 0.75rem; padding: 2rem; text-align: center; animation: bounce 1s infinite; }

.success-emoji { font-size: 3.75rem; margin-bottom: 1rem; }

.success-title { font-size: 1.5rem; font-weight: bold; color: #16a34a; margin-bottom: 0.5rem; }

.success-message { color: #374151; margin-bottom: 1rem; }

.success-icons { display: flex; justify-content: center; gap: 0.5rem; }

.footer { text-align: center; margin-top: 1.5rem; font-size: 0.875rem; color: #6b7280; }

@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } }

.hidden { display: none; }

const steps = [ { id: 1, title: "Walk to the Bathroom", icon: "🚶‍♂️", description: "Walk slowly to the bathroom. Take your time.", visual: "👦➡️🚽" }, { id: 2, title: "Turn on the Light", icon: "💡", description: "Press the light switch. The bathroom is now bright.", visual: "👆💡" }, { id: 3, title: "Pull Down Pants", icon: "👖", description: "Pull down your pants and underwear to your ankles.", visual: "👖⬇️" }, { id: 4, title: "Sit on the Toilet", icon: "🚽", description: "Sit down on the toilet seat. Both feet on the floor or footstool.", visual: "👦🚽" }, { id: 5, title: "Use the Toilet", icon: "✅", description: "Relax and use the toilet. This might take a few minutes.", visual: "🚽✨" }, { id: 6, title: "Wipe Properly", icon: "🧻", description: "Use toilet paper to wipe. Front to back, then throw in toilet.", visual: "🧻➡️🚽" }, { id: 7, title: "Pull Up Pants", icon: "👕", description: "Pull up your underwear and pants. Make sure they fit well.", visual: "👖⬆️" }, { id: 8, title: "Flush the Toilet", icon: "🌊", description: "Press the flush button or handle. Watch the water go down.", visual: "👆🌊" }, { id: 9, title: "Wash Your Hands", icon: "🧼", description: "Use soap and warm water. Wash for 20 seconds.", visual: "👐🧼" }, { id: 10, title: "Dry Your Hands", icon: "🤲", description: "Use a clean towel or paper towel to dry your hands.", visual: "👐🏻📄" } ];

// DOM elements const stepText = document.getElementById('stepText'); const completeText = document.getElementById('completeText'); const progressFill = document.getElementById('progressFill'); const stepEmoji = document.getElementById('stepEmoji'); const stepTitle = document.getElementById('stepTitle'); const stepDescription = document.getElementById('stepDescription'); const actionBtn = document.getElementById('actionBtn'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const stepsGrid = document.getElementById('stepsGrid'); const starCount = document.getElementById('starCount'); const soundBtn = document.getElementById('soundBtn'); const resetBtn = document.getElementById('resetBtn'); const successModal = document.getElementById('successModal');

// Sound function function playSound() { if (soundEnabled && window.AudioContext) { const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain();

oscillator.connect(gainNode); gainNode.connect(audioContext.destination);

oscillator.frequency.value = 523.25; oscillator.type = 'sine';

gainNode.gain.setValueAtTime(0.3, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);

oscillator.start(audioContext.currentTime); oscillator.stop(audioContext.currentTime + 0.5); } }

// Complete step function function completeStep(stepIndex) { if (!completedSteps.includes(stepIndex)) { completedSteps.push(stepIndex); stars++; playSound(); updateDisplay();

if (stepIndex === steps.length - 1) { successModal.classList.remove('hidden'); setTimeout(() => { successModal.classList.add('hidden'); }, 3000); } } }

// Update display function function updateDisplay() { // Update step info stepText.textContent = `Step ${currentStep + 1} of ${steps.length}`; completeText.textContent = `${completedSteps.length}/${steps.length} complete`;

// Update progress bar const progressPercent = (completedSteps.length / steps.length) * 100; progressFill.style.width = `${progressPercent}%`;

// Update current step const step = steps[currentStep]; stepEmoji.textContent = step.visual; stepTitle.textContent = step.title; stepDescription.textContent = step.description;

// Update action button if (completedSteps.includes(currentStep)) { actionBtn.innerHTML = '✅ Done!'; actionBtn.disabled = true; } else { actionBtn.textContent = 'I Did This Step!'; actionBtn.disabled = false; }

// Update navigation prevBtn.disabled = currentStep === 0; nextBtn.disabled = currentStep === steps.length - 1;

// Update stars starCount.textContent = stars;

// Update sound button if (soundEnabled) { soundBtn.innerHTML = '🔊'; soundBtn.className = 'control-btn sound-btn'; } else { soundBtn.innerHTML = '🔇'; soundBtn.className = 'control-btn sound-btn disabled'; }

// Update steps grid updateStepsGrid(); }

// Update steps grid function updateStepsGrid() { stepsGrid.innerHTML = ''; steps.forEach((step, index) => { const btn = document.createElement('button'); btn.className = `step-btn ${ index === currentStep ? 'current' : completedSteps.includes(index) ? 'completed' : 'incomplete' }`; btn.innerHTML = `

`; btn.onclick = () => { currentStep = index; updateDisplay(); }; stepsGrid.appendChild(btn); }); }

// Event listeners actionBtn.onclick = () => completeStep(currentStep);

prevBtn.onclick = () => { if (currentStep > 0) { currentStep--; updateDisplay(); } };

nextBtn.onclick = () => { if (currentStep { soundEnabled = !soundEnabled; updateDisplay(); };

resetBtn.onclick = () => { currentStep = 0; completedSteps = []; stars = 0; successModal.classList.add('hidden'); updateDisplay(); };

// Initialize display updateDisplay();