# 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:** 1

<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:** [30 Dezembro , 2023 18:28 UTC](https://meta.discourse.org/t/countdown-script-in-header-duplicating-avatar-dropdown/290095/1 "2023-12-30T18:28:17Z")

</div>

Tenho o seguinte script em execução no meu cabeçalho, e ele está sendo renderizado corretamente.

 ![Screen Shot 2023-12-30 at 1.26.21 PM](https://global.discourse-cdn.com/meta/original/4X/e/1/d/e1d40d4bd893b624232ed3d2a5dc9e6a7501d2e2.png)

Mas quando navego para um tópico, o dropdown de avatar se replica assim:

 ![Screen Shot 2023-12-30 at 1.26.13 PM](https://global.discourse-cdn.com/meta/original/4X/8/3/1/831dcbb3bca3d029bff1312820c622ec3624a858.png)

Espero que seja uma correção simples, mas talvez eu esteja tentando fazer o Discourse fazer muito com um componente.

```html
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Create Countdown HTML with Styling
    var countdownHtml = `
        <div id="countdown-banner" style="position: relative; display: inline-block; margin-left: 20px; vertical-align: middle;">
            <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="https://thedenforum.com/t/official-lions-vs-cowboys-game-day-thread-2023/30290" style="background-color: #0076B6; color: white; padding: 5px 10px; border-radius: 5px; text-decoration: none;">
                    Game Thread
                </a>
            </div>
        </div>`;

    // Insert the Countdown Banner next to the logo
    var headerLogo = document.querySelector('.d-header .title');
    if (headerLogo) {
        headerLogo.insertAdjacentHTML('afterend', countdownHtml);
    } else {
        console.error("Header logo not found");
    }

    // Countdown Functionality
    const eventTime = new Date('December 30, 2023 20:00:00 GMT-0400').getTime();
    const countdownElement = document.getElementById('countdown');

    if (!countdownElement) {
        console.error("Countdown element not found");
        return;
    }

    function updateCountdown() {
        const now = new Date().getTime();
        const distance = eventTime - now;

        if (distance < 0) {
            countdownElement.innerHTML = "The Game Has started!";
            clearInterval(interval);
            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 ";
    }

    var interval = setInterval(updateCountdown, 1000);
});
</script>

```

---

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