const paths = Array.from(document.querySelectorAll('path'))
const colors = Array.from(document.getElementsByClassName('color'))
const g1 = document.getElementById('g1')
const ypomnima = document.getElementById('ypomnima')
const eye = document.getElementById('eye')
const img1 = document.getElementById('img1')
const eyes = Array.from(document.getElementsByClassName('color-eye'))

console.log(paths)
colors.forEach((color,index)=>{

    let toggle = false;

    color.addEventListener('click',()=>{
        toggle = !toggle
        if(toggle){
            paths[index].style.opacity = '1'
            eyes[index].classList.remove('bi-eye')
            eyes[index].classList.add('bi-eye-slash')
        }else{
            paths[index].style.opacity = '0'
            eyes[index].classList.remove('bi-eye-slash')
            eyes[index].classList.add('bi-eye')
        }
    
    })
})


let show = false;

eye.addEventListener('click',()=>{

    show = !show

    if(show){
        g1.style.display = 'none'
        ypomnima.style.display = 'none'
        eye.classList.remove('bi-eye')
        eye.classList.add('bi-eye-slash')
        img1.style.opacity = '1';
    }else{

        img1.style.opacity = '0';
        setTimeout(()=>{
            g1.style.display = 'block'
            ypomnima.style.display = 'block'
            eye.classList.remove('bi-eye-slash')
            eye.classList.add('bi-eye')
        },400)
    }
})