# Script de contagem regressiva no cabeçalho duplicando o menu suspenso de avatar?

**URL:** <https://meta.discourse.org/t/countdown-script-in-header-duplicating-avatar-dropdown/290095>\
**Category:** Development\
**Created:** [30 Dezembro , 2023 18:28 UTC](https://meta.discourse.org/t/countdown-script-in-header-duplicating-avatar-dropdown/290095 "2023-12-30T18:28:17Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![ncaming215](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ncaming215/32/205701_2.png) [@ncaming215](https://meta.discourse.org/u/ncaming215)\
**Post date:** [6 Janeiro , 2024 18:12 UTC](https://meta.discourse.org/t/countdown-script-in-header-duplicating-avatar-dropdown/290095/7 "2024-01-06T18:12:32Z")

</div>

Aqui está o código para todos que perguntaram.

```plaintext
<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // Garante que o banner seja adicionado apenas uma vez
        if (document.getElementById('countdown-banner')) return;

        // Cria o banner de contagem regressiva
        const countdownBanner = document.createElement('div');
        countdownBanner.id = 'countdown-banner';
        countdownBanner.style.cssText = 'position: relative; display: inline-block; margin-left: 20px; vertical-align: middle;';
        countdownBanner.innerHTML = `
            <span id="background-text" style="opacity: 0.2; color: gray; font-size: 4.5em; position: absolute; left: 0; top: -31px; z-index: 1;">
                DET vs. DAL <i class="fas fa-football-ball"></i>
            </span>
            <div id="foreground-text" style="color: white; position: relative; z-index: 2; display: flex; align-items: center;">
                <span id="countdown-container" style="background-color: #0076B6; padding: 5px 10px; border-radius: 5px; margin-right: 10px;">
                    Lions at Cowboys: <span id="countdown" style="font-family: 'LCD', 'Courier New', monospace;"></span>
                </span>
                <a href="[URL]" style="background-color: #0076B6; color: white; padding: 5px 10px; border-radius: 5px; text-decoration: none;">
                    Game Thread
                </a>
            </div>
        `;

        // Encontra o logo do cabeçalho e insere o banner de contagem regressiva
        const headerLogo = document.querySelector('.d-header .title');
        if (headerLogo) {
            headerLogo.insertAdjacentElement('afterend', countdownBanner);
        }

        // Inicializa a contagem regressiva
        const eventTime = new Date('December 30, 2024 20:00:00 GMT-0400').getTime();
        const countdownElement = document.getElementById('countdown');
        setInterval(() => {
            const now = new Date().getTime();
            const distance = eventTime - now;

            if (!countdownElement) return;

            if (distance < 0) {
                countdownElement.innerHTML = "The Game Has started!";
                return;
            }

            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            countdownElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        }, 1000);
    });
</script>

```

CSS …

```plaintext
#countdown-container, #countdown-banner a {
    background-color: #0076B6; /* Cor de fundo sólida */
    opacity: 0.8; /* Ajusta a transparência */
    /* Outros estilos... */
}

#countdown-container {
    background-color: rgba(0, 118, 182, 0.3); /* Fundo ligeiramente transparente */
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 10px;
}

#countdown-banner a {
    background-color: rgba(0, 118, 182, 0.3); /* Fundo ligeiramente transparente */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

#countdown-banner a:hover {
    background-color: rgba(0, 95, 138, 0.3); /* Ligeiramente mais escuro ao passar o mouse com transparência */
}

#countdown-banner {
    font-family: Arial, sans-serif;
    position: relative;
    display: inline-block;
    margin-left: 20px;
    vertical-align: middle;
}

#background-text {
    font-family: 'Impact', sans-serif;
    font-size: 5em; /* Tamanho do texto */
    color: gray; /* Alterado para cinza */
    opacity: 0.5; /* Ajusta a opacidade para visibilidade */
    position: absolute;
    left: 0;
    top: -30px; /* Deslocado mais significativamente para cima */
    z-index: 1;
    font-weight: bold; /* Fonte em negrito */
}

#foreground-text {
    color: white;
    position: relative;
    z-index: 2;
    padding-left: 140px; /* Ajusta com base no layout real */
}

#countdown {
    font-family: 'LCD', 'Courier New', monospace;
    font-size: 1.2em;
}

```

---

_[View the full topic](https://meta.discourse.org/t/countdown-script-in-header-duplicating-avatar-dropdown/290095)._