Desde o processo de desenvolvimento de um site até a sua publicação são necessários passar por uma série de validações, uma dessas questões envolve a utilização de dados no site, mas você já parou para pensar na importância disso? Afinal, muitos sites hospedados na internet possuem o aceite de cookies, e o que isso significa? Vamos abordar toda essa explicação nesse tópico abaixo.

function avisoTermosAceite() {
    const mensagem = `Nós usamos cookies e outras tecnologias semelhantes para melhorar a sua experiência em nosso site. Confira mais informações em nossa <a id="hyperlink" href="">política de privacidade</a>`;
    const backgroundColor = 'rgba(255,255,255,0.95)';
    const textColor = '#333333';
    const textColorHyperLink = '#00B526';
    const buttonBackgoundColor = '#00B526';
    const buttonHoverBackgoundColor = '#FFF';
    const buttonTextColor = '#ffffff';
    const buttonHoverTextColor = '#00B526';
    const cookies = localStorage.getItem('avisoTermosAceite');
    if(!cookies){
        var body = document.getElementsByTagName('body')[0];
        body.innerHTML += 
            `<style>
                #aviso-cookies{z-index:100000;display:flex;width:100%;position:fixed;bottom:0;left:0;background-color:${backgroundColor};padding:20px;box-sizing:border-box;box-shadow:0 0 7px rgb(0 0 0 / 50%);justify-content:center;align-items:center}
                #texto-cookies{font-family:'Opens Sans', 'Arial',sans-serif;font-size:14px;margin:0 20px 0 0;line-height:1.25rem;color:${textColor}}
                #texto-cookies * {font-family:'Open Sans', 'Arial',sans-serif;font-size:14px;line-height:1.25rem;color:${textColor}}
                #aceitei-cookies{background:${buttonBackgoundColor};transition: 0.3s all ease;-o-transition: 0.3s all ease;-ms-transition:0.3s all ease;-moz-transition:0.3s all ease;-webkit-transition:0.3s all ease;color:${buttonTextColor};text-shadow:0 1px 1px rgb(0 0 0 / 20%);border-radius: 2px;border: 1px solid rgba(0,0,0,0.1);border-bottom-color: rgba(0,0,0,0.2);font-size: 14px;padding: 6px 14px;cursor: pointer;line-height:19px}
                #aceitei-cookies:hover{background-color: ${buttonHoverBackgoundColor};color: ${buttonHoverTextColor}}
                #hyperlink{color:${textColorHyperLink}!important;}
            </style>
            <div id="aviso-cookies">
                <span id="texto-cookies">${mensagem}</span>
                <button id="aceitei-cookies">Prosseguir</button>
            </div>`;
        document.getElementById('aceitei-cookies').addEventListener('click', function(){
            localStorage.setItem("avisoTermosAceite", true);
            document.getElementById('aviso-cookies').remove();
        })
    }
}

avisoTermosAceite();