Отсчет до нового года 2026

Полностью переделан код + вид

Код:Скопировать

<xf:css>
.widget-newyear-countdown {
    text-align: center;
    padding: 20px 15px;
    background: linear-gradient(135deg, rgba(21, 21, 21, 0.95) 0%, rgba(40, 40, 40, 0.95) 100%);
    color: #fff;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    margin: 15px 0;
    border: 1px solid #2d2d44;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}


.snowflake {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}


.countdown-title,
.countdown-subtitle,
.countdown-row,
.countdown-year {
    position: relative;
    z-index: 2;
}

.countdown-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.countdown-subtitle {
    font-size: 14px;
    margin-bottom: 15px;
    color: #cccccc;
    font-weight: normal;
}

.countdown-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.countdown-label {
    font-size: 14px;
    color: #cccccc;
    margin-right: 5px;
    white-space: nowrap;
}

.countdown-numbers {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 8px 4px;
    position: relative;
    z-index: 2;
}

.countdown-number {
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}


@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.countdown-number.updated {
    animation: pulse 0.5s ease;
}

.countdown-unit {
    font-size: 12px;
    color: #aaaaaa;
    margin-top: 2px;
    text-transform: lowercase;
}

.countdown-year {
    font-size: 16px;
    color: #4fc3f7;
    font-weight: bold;
    margin-top: 10px;
}

@media (max-width: 650px) {
    .countdown-number {
        font-size: 24px;
    }
   
    .countdown-title {
        font-size: 18px;
    }
   
    .countdown-year {
        font-size: 14px;
    }
   
    .countdown-item {
        min-width: 45px;
        padding: 6px 3px;
    }
}
</xf:css>

<div class="widget-newyear-countdown" id="newYearCountdown">
    <div class="countdown-title">ОТСЧЁТ ДО НОВОГО ГОДА</div>
    <div class="countdown-subtitle">ДО НОВОГО ГОДА</div>
   
    <div class="countdown-row">
        <div class="countdown-numbers">
            <div class="countdown-item">
                <span class="countdown-number" data-days>338</span>
                <span class="countdown-unit">дней</span>
            </div>
            <div class="countdown-item">
                <span class="countdown-number" data-hours>15</span>
                <span class="countdown-unit">часов</span>
            </div>
            <div class="countdown-item">
                <span class="countdown-number" data-minutes>06</span>
                <span class="countdown-unit">мин</span>
            </div>
            <div class="countdown-item">
                <span class="countdown-number" data-seconds>09</span>
                <span class="countdown-unit">сек</span>
            </div>
        </div>
    </div>
   
    <div class="countdown-year" id="targetYearDisplay">2026 год скоро!</div>
</div>

<xf:js>
(function() {

    function createSnowflakes(container, count) {
        
        const style = document.createElement('style');
        style.textContent = `
            @keyframes snowFall {
                0% {
                    transform: translateY(-10px) translateX(0px) rotate(0deg);
                    opacity: 0;
                }
                10% {
                    opacity: 0.8;
                }
                90% {
                    opacity: 0.8;
                }
                100% {
                    transform: translateY(180px) translateX(20px) rotate(360deg);
                    opacity: 0;
                }
            }
           
            @keyframes snowFall2 {
                0% {
                    transform: translateY(-10px) translateX(10px) rotate(0deg);
                    opacity: 0;
                }
                10% {
                    opacity: 0.7;
                }
                90% {
                    opacity: 0.7;
                }
                100% {
                    transform: translateY(200px) translateX(-10px) rotate(360deg);
                    opacity: 0;
                }
            }
           
            @keyframes snowFall3 {
                0% {
                    transform: translateY(-10px) translateX(-5px) rotate(0deg);
                    opacity: 0;
                }
                10% {
                    opacity: 0.6;
                }
                90% {
                    opacity: 0.6;
                }
                100% {
                    transform: translateY(160px) translateX(15px) rotate(360deg);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);
       
        for (let i = 0; i < count; i++) {
            setTimeout(() => {
                const snowflake = document.createElement('div');
                snowflake.className = 'snowflake';
               
       
                const size = Math.random() * 3 + 1; 
                const startX = Math.random() * 100; 
                const duration = Math.random() * 5 + 8; 
                const delay = Math.random() * 5; 
                const animationType = Math.floor(Math.random() * 3) + 1; 
               
                snowflake.style.width = `${size}px`;
                snowflake.style.height = `${size}px`;
                snowflake.style.left = `${startX}%`;
                snowflake.style.top = '-10px';
                snowflake.style.opacity = '0';
                snowflake.style.animation = `snowFall${animationType} ${duration}s linear ${delay}s infinite`;
               
                container.appendChild(snowflake);
            }, i * 300); 
        }
    }
   
 
    const container = document.getElementById('newYearCountdown');
    if (container) {
        createSnowflakes(container, 25);
    }
   
    function updateCountdown() {
        const now = new Date();
        const currentYear = now.getFullYear();

        let targetYear = currentYear + 1;
        const targetDate = new Date(targetYear, 0, 1, 0, 0, 0, 0);
       
        const diff = targetDate - now;
       
 
        if (diff <= 0) {
            document.querySelector('.countdown-title').textContent = 'С НОВЫМ ' + targetYear + ' ГОДОМ!';
            document.querySelector('.countdown-subtitle').textContent = 'Поздравляем!';
            document.getElementById('targetYearDisplay').textContent = `${targetYear} год наступил!`;
            return;
        }
       
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((diff % (1000 * 60)) / 1000);
       
        const daysEl = document.querySelector('[data-days]');
        const hoursEl = document.querySelector('[data-hours]');
        const minutesEl = document.querySelector('[data-minutes]');
        const secondsEl = document.querySelector('[data-seconds]');
        const yearEl = document.getElementById('targetYearDisplay');
       
       
        updateWithAnimation(daysEl, days);
        updateWithAnimation(hoursEl, hours.toString().padStart(2, '0'));
        updateWithAnimation(minutesEl, minutes.toString().padStart(2, '0'));
        updateWithAnimation(secondsEl, seconds.toString().padStart(2, '0'));
       
        if (yearEl) {
            yearEl.textContent = `${targetYear} год скоро!`;
        }
    }
   
    function updateWithAnimation(element, newValue) {
        if (element && element.textContent !== newValue.toString()) {
            element.textContent = newValue;
            element.classList.add('updated');
            setTimeout(() => {
                element.classList.remove('updated');
            }, 500);
        }
    }

    updateCountdown();
    setInterval(updateCountdown, 1000);
})();
</xf:js>