---

document.addEventListener('DOMContentLoaded', function() {

    const settingsModal = document.getElementById('myModal');
    const settingsBtn = document.getElementById('openModalBtn');
    const settingsClose = settingsModal ? settingsModal.querySelector('.close-btn') : null;
    if (settingsBtn && settingsModal) {
        settingsBtn.onclick = function() {
            settingsModal.style.display = "flex";
        }
    }

    const accountsModal = document.getElementById('accountsModal');
    const accountsBtn = document.getElementById('openAccountsBtn');
    const accountsBtn2 = document.getElementById('openAccountsBtn2'); 
    const accountsClose = accountsModal ? accountsModal.querySelector('.close-btn') : null;
    if (accountsBtn && accountsModal) {
        accountsBtn.onclick = function(e) {
            e.preventDefault();
            accountsModal.style.display = "flex";
        }
    }
    if (accountsBtn2 && accountsModal) {
        accountsBtn2.onclick = function(e) {
            e.preventDefault();
            accountsModal.style.display = "flex";
        }
    }
    if (settingsClose) settingsClose.onclick = () => settingsModal.style.display = "none";
    if (accountsClose) accountsClose.onclick = () => accountsModal.style.display = "none";

    window.addEventListener('click', function(event) {
        if (event.target === settingsModal) {
            settingsModal.style.display = "none";
        }
        if (event.target === accountsModal) {
            accountsModal.style.display = "none";
        }
    });
});



const openBtnImg = document.getElementById('openModalBtn-img');
const closeBtnImg = document.getElementById('closeModalBtn-img');
const modalImg = document.getElementById('myModal-img');
const modalContentImg = modal.querySelector('.modal-img-content');
openBtnImg.addEventListener('click', () => {
    modalImg.classList.add('open');
});
closeBtnImg.addEventListener('click', () => {
    modalImg.classList.remove('open');
});
modalImg.addEventListener('click', (event) => {
    if (event.target === body) {
        modalImg.classList.remove('open');
    }
});
document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && modalImg.classList.contains('open')) {
        modalImg.classList.remove('open');
    }
});



const openBtnMore = document.getElementById('openModalBtn-more');
const closeBtnMore = document.getElementById('closeModalBtn-more');
const modalMore = document.getElementById('myModal-more');
const modalContentMore = modal.querySelector('.modal-more-content');
openBtnMore.addEventListener('click', () => {
    modalMore.classList.add('open');
});
closeBtnMore.addEventListener('click', () => {
    modalMore.classList.remove('open');
});
modalMore.addEventListener('click', (event) => {
    if (event.target === body) {
        modalMore.classList.remove('open');
    }
});
document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && modalMore.classList.contains('open')) {
        modalMore.classList.remove('open');
    }
});



document.addEventListener('DOMContentLoaded', function() {
    const accModal = document.getElementById('accountsModal');
    const openAccBtn = document.getElementById('openAccountsBtn');
    const closeAccBtn = document.getElementById('closeAccountsBtn');
    if (openAccBtn && accModal) {
        openAccBtn.addEventListener('click', function(e) {
            e.preventDefault();
            accModal.style.display = 'flex';
        });
    }
    if (closeAccBtn && accModal) {
        closeAccBtn.addEventListener('click', function() {
            accModal.style.display = 'none';
        });
    }
    window.addEventListener('click', function(event) {
        if (event.target === accModal) {
            accModal.style.display = 'none';
        }
    });
});