`; document.getElementById('isKid').addEventListener('change', (e) => { isKidMode = e.target.checked; }); } else if (page === 'edit-profile') { const profile = profiles[index]; console.log('Editing profile:', profile); selectedAvatar = profile.image || 'https://via.placeholder.com/100?text=Avatar'; isKidMode = profile.isKid || false; app.innerHTML = `

${getText('editProfile')}

${getText('name')}

${getText('kidMode')}

${getText('birthDate')}

${getText('gender')}

${getText('language')}

`; document.getElementById('isKid').addEventListener('change', (e) => { isKidMode = e.target.checked; }); } } function renderProfiles() { const profilesContainer = document.getElementById('profiles'); profilesContainer.innerHTML = ''; profiles.forEach((profile, index) => { const profileDiv = document.createElement('div'); profileDiv.className = 'profile'; profileDiv.innerHTML = `

${profile.name}

`; profileDiv.onclick = () => handleProfileClick(profile.isKid); profilesContainer.appendChild(profileDiv); }); if (profiles.length < MAX_PROFILES) { const addProfileDiv = document.createElement('div'); addProfileDiv.className = 'add-profile-wrapper'; addProfileDiv.innerHTML = `

+

${getText('addProfile')}

`; addProfileDiv.onclick = () => { previousPage = 'who-is-watching'; renderPage('avatar-selection', 'adult'); }; profilesContainer.appendChild(addProfileDiv); } } function renderManageProfiles() { const profilesContainer = document.getElementById('profiles'); profilesContainer.innerHTML = ''; profiles.forEach((profile, index) => { const profileDiv = document.createElement('div'); profileDiv.className = 'profile'; profileDiv.style.position = 'relative'; profileDiv.innerHTML = `

${profile.name}

`; profileDiv.onclick = () => { previousPage = 'manage-profiles'; renderPage('edit-profile', index); }; profilesContainer.appendChild(profileDiv); }); if (profiles.length < MAX_PROFILES) { const addProfileDiv = document.createElement('div'); addProfileDiv.className = 'add-profile-wrapper'; addProfileDiv.innerHTML = `

+

${getText('addProfile')}

`; addProfileDiv.onclick = () => { previousPage = 'manage-profiles'; renderPage('avatar-selection', 'adult'); }; profilesContainer.appendChild(addProfileDiv); } } function navigateToAvatarSelection(fromPage) { previousPage = fromPage; renderPage('avatar-selection', isKidMode ? 'kid' : 'adult'); } function navigateToAvatarSelection2(fromPage, index) { previousPage = fromPage; renderPage('avatar-selection-2', isKidMode ? 'kid' : 'adult', index); } function checkOverflowAndToggleButtons(avatarGrid, leftButton, rightButton) { const updateVisibility = () => { const hasOverflow = avatarGrid.scrollWidth > avatarGrid.clientWidth; const atStart = avatarGrid.scrollLeft <= 0; const atEnd = Math.abs(avatarGrid.scrollLeft + avatarGrid.clientWidth - avatarGrid.scrollWidth) < 1; leftButton.style.display = hasOverflow && !atStart ? 'block' : 'none'; rightButton.style.display = hasOverflow && !atEnd ? 'block' : 'none'; }; updateVisibility(); avatarGrid.addEventListener('scroll', updateVisibility); } function renderAvatarCategories(isKid) { const categoriesContainer = document.getElementById('avatarCategories'); categoriesContainer.innerHTML = ''; for (const [category, avatars] of Object.entries(avatarCategories)) { const filteredAvatars = avatars.filter(avatar => avatar.isKid === isKid); if (filteredAvatars.length === 0) continue; const categorySection = document.createElement('div'); categorySection.className = 'category-section'; categorySection.innerHTML = `

${category}

`; const avatarGrid = categorySection.querySelector(`#${category.replace(/\s+/g, '-')}-avatars`); const leftButton = categorySection.querySelector('.scroll-left-button'); const rightButton = categorySection.querySelector('.scroll-right-button'); filteredAvatars.forEach(avatar => { const avatarDiv = document.createElement('img'); avatarDiv.src = avatar.url; avatarDiv.className = 'avatar'; if (avatar.url === selectedAvatar) { avatarDiv.classList.add('selected'); } avatarDiv.onclick = () => { selectedAvatar = avatar.url; const allAvatars = document.querySelectorAll('.avatar'); allAvatars.forEach(av => av.classList.remove('selected')); avatarDiv.classList.add('selected'); }; avatarGrid.appendChild(avatarDiv); }); leftButton.onclick = () => { avatarGrid.scrollBy({ left: -150, behavior: 'smooth' }); }; rightButton.onclick = () => { avatarGrid.scrollBy({ left: 150, behavior: 'smooth' }); }; checkOverflowAndToggleButtons(avatarGrid, leftButton, rightButton); categoriesContainer.appendChild(categorySection); } } function proceedToCreateProfile() { if (!selectedAvatar) { showNotification('selectAvatarMsg'); return; } renderPage('create-profile'); } function saveNewProfile() { const name = document.getElementById('profileName').value.trim(); const day = document.getElementById('day').value.trim(); const month = document.getElementById('month').value.trim(); const year = document.getElementById('year').value.trim(); const gender = document.getElementById('gender').value; const language = document.getElementById('language').value || currentLanguage; if (!name) { showNotification('enterName'); return; } if (name.length > 14) { showNotification('nameTooLong'); return; } if (!validateName(name)) { showNotification('nameInvalid'); return; } if (!selectedAvatar) { showNotification('selectAvatarMsg'); return; } if (!day || !month || !year) { showNotification('enterBirthDate'); return; } if (!validateBirthDate(day, month, year)) { showNotification('invalidBirthDate'); return; } if (!gender) { showNotification('selectGenderMsg'); return; } profiles.push({ name: name, isKid: isKidMode, image: selectedAvatar, birthDate: { day, month, year }, gender: gender, language: language }); saveProfiles(); selectedAvatar = null; isKidMode = false; renderPage('who-is-watching'); } function saveEditedProfile(index) { const name = document.getElementById('profileName').value.trim(); const day = document.getElementById('day').value.trim(); const month = document.getElementById('month').value.trim(); const year = document.getElementById('year').value.trim(); const gender = document.getElementById('gender').value; const language = document.getElementById('language').value || currentLanguage; if (!name) { showNotification('enterName'); return; } if (name.length > 14) { showNotification('nameTooLong'); return; } if (!validateName(name)) { showNotification('nameInvalid'); return; } if (!selectedAvatar) { showNotification('selectAvatarMsg'); return; } if (!day || !month || !year) { showNotification('enterBirthDate'); return; } if (!validateBirthDate(day, month, year)) { showNotification('invalidBirthDate'); return; } if (!gender) { showNotification('selectGenderMsg'); return; } profiles[index] = { name: name, isKid: isKidMode, image: selectedAvatar, birthDate: { day, month, year }, gender: gender, language: language }; saveProfiles(); selectedAvatar = null; isKidMode = false; renderPage('manage-profiles'); } function deleteProfile(index, confirm = false) { if (confirm) { showConfirmNotification('confirmDelete', () => { profiles.splice(index, 1); saveProfiles(); renderPage('manage-profiles'); }); } else { profiles.splice(index, 1); saveProfiles(); renderPage('manage-profiles'); } } renderPage('who-is-watching');

İletişim