💪 나이별 맞춤 근력 운동 체크리스트

매일 꾸준하게 운동해서 건강한 몸을 만들어보세요! 20대부터 60대 이상까지 연령별 최적화된 운동 루틴을 제공합니다.

1세부터 120세까지 입력 가능합니다.

👋 나이를 입력하고 시작을 눌러주세요!

당신의 연령에 가장 적합한 근력 운동 루틴을 추천해드립니다.

🎯 맞춤 추천

20대/40대/60대 이상 연령별 최적화된 운동

📊 진행 추적

실시간으로 운동 완료율을 확인하세요

📹 영상 가이드

각 운동별 올바른 자세 영상 제공

💾 자동 저장

브라우저에 진행 상황이 자동 저장됩니다

💪 나이별 맞춤 근력 운동 체크리스트

매일 꾸준하게 운동해서 건강한 몸을 만들어보세요! 20대부터 60대 이상까지 연령별 최적화된 운동 루틴을 제공합니다.

1세부터 120세까지 입력 가능합니다.

👋 나이를 입력하고 시작을 눌러주세요!

당신의 연령에 가장 적합한 근력 운동 루틴을 추천해드립니다.

🎯 맞춤 추천

20대/40대/60대 이상 연령별 최적화된 운동

📊 진행 추적

실시간으로 운동 완료율을 확인하세요

📹 영상 가이드

각 운동별 올바른 자세 영상 제공

💾 자동 저장

브라우저에 진행 상황이 자동 저장됩니다

`; }); html += ``; }); // 다운로드 및 공유 섹션 html += `

📥 오프라인에서도 사용하세요

이 페이지를 브라우저에 저장하면 인터넷 없이도 언제든지 운동을 확인할 수 있습니다.

친구와 함께 운동해요

`; document.getElementById('exerciseContent').innerHTML = html; updateProgress(); // 초기 포커스 설정 (접근성) const firstCheckbox = document.querySelector('.checkbox'); if (firstCheckbox) { setTimeout(() => firstCheckbox.focus(), 100); } } // 효과 토글 function toggleEffect(effectId, event) { event.stopPropagation(); const effectElement = document.getElementById(effectId); const button = event.target; const isExpanded = button.getAttribute('aria-expanded') === 'true'; if (isExpanded) { effectElement.style.display = 'none'; effectElement.classList.remove('show'); button.setAttribute('aria-expanded', 'false'); button.textContent = '효과 보기'; } else { effectElement.style.display = 'block'; effectElement.classList.add('show'); button.setAttribute('aria-expanded', 'true'); button.textContent = '효과 숨기기'; // Google Analytics 이벤트 if (typeof gtag !== 'undefined') { gtag('event', 'view_exercise_effect', { 'event_category': 'engagement', 'event_label': effectId }); } } } // 운동 체크 토글 function toggleExercise(exerciseId) { const checkbox = document.getElementById(exerciseId); checkbox.checked = !checkbox.checked; saveExerciseState(exerciseId, checkbox.checked); const item = document.getElementById(`item-${exerciseId}`); const exerciseName = item.getAttribute('data-exercise-name'); const exerciseMain = item.querySelector('.exercise-main'); if (checkbox.checked) { item.classList.add('completed'); exerciseMain.setAttribute('aria-pressed', 'true'); exerciseMain.setAttribute('aria-label', `${exerciseName} 완료됨`); // 완료 효과음 (선택적) if ('vibrate' in navigator) { navigator.vibrate(50); // 모바일 진동 } } else { item.classList.remove('completed'); exerciseMain.setAttribute('aria-pressed', 'false'); exerciseMain.setAttribute('aria-label', `${exerciseName} 미완료`); } updateProgress(); // Google Analytics 이벤트 if (typeof gtag !== 'undefined') { gtag('event', checkbox.checked ? 'complete_exercise' : 'uncomplete_exercise', { 'event_category': 'engagement', 'event_label': exerciseName }); } } // 운동 상태 저장 function saveExerciseState(exerciseId, completed) { const storageKey = `exercises-${currentDate}-${currentAge}`; let data = JSON.parse(sessionStorage.getItem(storageKey) || '{}'); data[exerciseId] = completed; sessionStorage.setItem(storageKey, JSON.stringify(data)); // 로컬 스토리지에도 백업 (더 긴 지속성) try { localStorage.setItem(storageKey, JSON.stringify(data)); } catch (e) { console.warn('LocalStorage not available'); } } // 운동 완료 상태 확인 function isExerciseCompleted(exerciseId) { const storageKey = `exercises-${currentDate}-${currentAge}`; let data = {}; // 세션 스토리지 먼저 확인 const sessionData = sessionStorage.getItem(storageKey); if (sessionData) { data = JSON.parse(sessionData); } else { // 로컬 스토리지 확인 const localData = localStorage.getItem(storageKey); if (localData) { data = JSON.parse(localData); } } return data[exerciseId] || false; } // 진행 상황 업데이트 function updateProgress() { const checkboxes = document.querySelectorAll('.checkbox'); const total = checkboxes.length; const completed = document.querySelectorAll('.checkbox:checked').length; const percentage = total > 0 ? Math.round((completed / total) * 100) : 0; const progressBar = document.getElementById('progressBar'); const progressBarContainer = document.getElementById('progressBarContainer'); const progressText = document.getElementById('progressText'); if (progressBar && progressBarContainer) { progressBar.style.width = percentage + '%'; progressBar.textContent = percentage + '%'; progressBarContainer.setAttribute('aria-valuenow', percentage); if (progressText) { if (percentage === 0) { progressText.textContent = '아직 완료한 운동이 없습니다. 시작해보세요! 💪'; } else if (percentage < 50) { progressText.textContent = `좋아요! ${completed}/${total}개 운동을 완료했습니다. 계속하세요! 🔥`; } else if (percentage < 100) { progressText.textContent = `훌륭해요! ${completed}/${total}개 운동을 완료했습니다. 거의 다 왔어요! ⚡`; } else { progressText.textContent = '🎉 축하합니다! 오늘의 모든 운동을 완료했습니다! 내일도 함께해요! 🌟'; // 완료 축하 효과 if ('vibrate' in navigator) { navigator.vibrate([100, 50, 100, 50, 200]); } } } } } // 진행 상황 초기화 function resetProgress() { if (confirm('오늘의 모든 운동 기록을 초기화하시겠습니까? 이 작업은 되돌릴 수 없습니다.')) { const storageKey = `exercises-${currentDate}-${currentAge}`; sessionStorage.removeItem(storageKey); localStorage.removeItem(storageKey); // 체크박스 및 스타일 초기화 document.querySelectorAll('.checkbox').forEach(checkbox => { checkbox.checked = false; const item = checkbox.closest('.exercise-item'); item.classList.remove('completed'); item.querySelector('.exercise-main').setAttribute('aria-pressed', 'false'); }); updateProgress(); // Google Analytics 이벤트 if (typeof gtag !== 'undefined') { gtag('event', 'reset_progress', { 'event_category': 'engagement', 'event_label': currentDate }); } } } // 페이지 다운로드 function downloadPage() { const htmlContent = document.documentElement.outerHTML; const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'age-based-muscle-training-checklist-ko.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); alert('페이지가 저장되었습니다. 저장된 파일을 브라우저에서 열면 오프라인에서도 사용할 수 있습니다.'); if (typeof gtag !== 'undefined') { gtag('event', 'download_page', { 'event_category': 'engagement', 'event_label': 'offline_save' }); } } // 링크 복사 function copyLink() { const url = window.location.href.split('#')[0]; navigator.clipboard.writeText(url).then(() => { alert('링크가 복사되었습니다! 친구들과 공유해보세요.'); }).catch(() => { // 폴백: 구식 방법 const textArea = document.createElement('textarea'); textArea.value = url; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); alert('링크가 복사되었습니다! 친구들과 공유해보세요.'); }); } // 페이지 로드 시 초기화 window.onload = function() { // 저장된 나이 확인 const storedData = JSON.parse(sessionStorage.getItem('ageData') || '{}'); if (storedData.age) { currentAge = storedData.age; document.getElementById('ageInput').value = currentAge; displayExercises(); } // URL 해시에서 나이 확인 const hash = window.location.hash; if (hash && hash.startsWith('#age-')) { const ageFromHash = parseInt(hash.replace('#age-', '')); if (ageFromHash && ageFromHash >= 1 && ageFromHash <= 120) { currentAge = ageFromHash; document.getElementById('ageInput').value = currentAge; displayExercises(); } } // Google Analytics 초기화 (있는 경우) if (typeof gtag === 'undefined') { window.gtag = function() { console.log('GA Event:', arguments); }; } }; // 키보드 단축키 지원 document.addEventListener('keydown', function(e) { // ESC 키로 모든 효과 닫기 if (e.key === 'Escape') { document.querySelectorAll('.exercise-effect.show').forEach(el => { el.style.display = 'none'; el.classList.remove('show'); }); document.querySelectorAll('.effect-button').forEach(btn => { btn.setAttribute('aria-expanded', 'false'); btn.textContent = '효과 보기'; }); } }); // 서비스 워커 등록 (PWA 지원) if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then( function(registration) { console.log('ServiceWorker registration successful'); }, function(err) { console.log('ServiceWorker registration failed: ', err); } ); }