Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Обратный отсчёт до 2027 года.

Осуждён за гениальность или проклят за талант?
Сен
336
371
Пользователь
Код:
<div class="countdown-container sakura-theme" id="newYearCountdown">
    <!-- Фоновые элементы -->
    <div class="sakura-branch left"></div>
    <div class="sakura-branch right"></div>
    
    <!-- Заголовок -->
    <div class="countdown-title">
        <div class="title-text">Новый Год</div>
        <div class="title-subtext">Обратный отсчёт</div>
    </div>
    
    <!-- Основной таймер -->
    <div class="countdown-main">
        <!-- Дни -->
        <div class="time-block">
            <div class="time-number" id="days">00</div>
            <div class="time-label">Дней</div>
        </div>
        
        <div class="time-separator">:</div>
        
        <!-- Часы -->
        <div class="time-block">
            <div class="time-number" id="hours">00</div>
            <div class="time-label">Часов</div>
        </div>
        
        <div class="time-separator">:</div>
        
        <!-- Минуты -->
        <div class="time-block">
            <div class="time-number" id="minutes">00</div>
            <div class="time-label">Мин</div>
        </div>
        
        <div class="time-separator">:</div>
        
        <!-- Секунды -->
        <div class="time-block">
            <div class="time-number" id="seconds">00</div>
            <div class="time-label">Сек</div>
        </div>
    </div>
    
    <!-- Год -->
    <div class="year-display">
        <span class="year-number" id="nextYear">2026</span>
    </div>
    
    <!-- Фоновые лепестки -->
    <div class="petals-container"></div>
</div>

<style>
/* Тема сакуры - КОМПАКТНЫЙ РАЗМЕР */
.sakura-theme {
    background: linear-gradient(145deg,
        rgba(20, 15, 35, 0.95) 0%,
        rgba(40, 20, 60, 0.95) 50%,
        rgba(25, 15, 40, 0.95) 100%);
    border: none;
    border-radius: 12px;
    padding: 12px 10px;
    max-width: 320px;
    margin: 8px auto;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 8px 20px rgba(255, 105, 180, 0.08),
        0 0 0 1px rgba(255, 182, 193, 0.06) inset;
}

/* Ветви сакуры - МАЛЕНЬКИЕ */
.sakura-branch {
    position: absolute;
    width: 60px;
    height: 90px;
    background: linear-gradient(45deg, transparent 40%, #8b5a2b 45%, #8b5a2b 55%, transparent 60%);
    opacity: 0.08;
    z-index: 1;
}

.sakura-branch.left {
    top: -15px;
    left: -15px;
    transform: rotate(45deg);
}

.sakura-branch.right {
    bottom: -15px;
    right: -15px;
    transform: rotate(-135deg);
}

/* Заголовок - КОМПАКТНЫЙ */
.countdown-title {
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.title-text {
    color: #ff66b2;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 4px;
    text-shadow: 0 0 8px rgba(255, 105, 180, 0.3);
    letter-spacing: 0.5px;
}

.title-subtext {
    color: #ffccd5;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Основной таймер - КОМПАКТНЫЙ */
.countdown-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 12px 0;
    position: relative;
    z-index: 2;
}

.time-block {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 8px 4px;
    border: 1px solid rgba(255, 182, 193, 0.08);
    position: relative;
    min-width: 45px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-block:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 182, 193, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.06);
}

.time-number {
    font-family: 'Courier New', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 105, 180, 0.3);
    background: linear-gradient(180deg, #fff 0%, #ffccd5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-bottom: 3px;
    text-align: center;
    min-width: 35px;
    transition: all 0.2s;
}

.time-label {
    font-size: 0.65rem;
    color: #ffccd5;
    font-weight: 500;
    opacity: 0.9;
    text-align: center;
}

/* Разделители - КОМПАКТНЫЕ */
.time-separator {
    color: rgba(255, 182, 193, 0.3);
    font-size: 1rem;
    font-weight: 300;
    padding-bottom: 8px;
    animation: blink 2s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* Год - КОМПАКТНЫЙ */
.year-display {
    text-align: center;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 182, 193, 0.06);
    position: relative;
    z-index: 2;
}

.year-number {
    color: #ff66b2;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(255, 105, 180, 0.3);
    animation: yearPulse 3s infinite;
    display: inline-block;
}

@keyframes yearPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(0.98); }
}

/* Падающие лепестки - МИНИМАЛЬНЫЕ */
.petals-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.petal {
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #ff99cc, #ff66b2);
    clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%, 0% 35%);
    opacity: 0.4;
    filter: blur(0.2px);
    animation: petalFall linear infinite;
}

@keyframes petalFall {
    to {
        transform: translateY(100vh) rotate(360deg);
    }
}

/* Адаптивность */
@media (max-width: 480px) {
    .sakura-theme {
        max-width: 280px;
        padding: 10px 8px;
    }
    
    .title-text {
        font-size: 1.2rem;
    }
    
    .time-number {
        font-size: 1.2rem;
        min-width: 30px;
    }
    
    .time-block {
        min-width: 40px;
        padding: 6px 3px;
    }
    
    .time-label {
        font-size: 0.6rem;
    }
    
    .time-separator {
        font-size: 0.9rem;
        padding-bottom: 6px;
    }
    
    .year-number {
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .sakura-theme {
        max-width: 260px;
        padding: 8px 6px;
    }
    
    .countdown-main {
        gap: 3px;
    }
    
    .title-text {
        font-size: 1.1rem;
    }
    
    .time-number {
        font-size: 1.1rem;
        min-width: 28px;
    }
    
    .time-block {
        min-width: 38px;
        padding: 5px 2px;
    }
    
    .time-label {
        font-size: 0.55rem;
    }
    
    .time-separator {
        font-size: 0.8rem;
        padding-bottom: 5px;
    }
}

/* Эффект для перехода цифр */
.digit-changing {
    animation: digitChange 0.2s ease;
}

@keyframes digitChange {
    0% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-5px); opacity: 0; }
    51% { transform: translateY(5px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
</style>

<script>
// Создание падающих лепестков - МИНИМАЛЬНОЕ КОЛИЧЕСТВО
function createPetals() {
    const container = document.querySelector('.petals-container');
    const petalCount = 6; // Очень мало для компактности
    
    for (let i = 0; i < petalCount; i++) {
        const petal = document.createElement('div');
        petal.classList.add('petal');
        
        // Случайная позиция
        petal.style.left = Math.random() * 100 + '%';
        petal.style.top = -Math.random() * 30 + 'px';
        
        // Случайные параметры анимации
        const duration = Math.random() * 3 + 5;
        const delay = Math.random() * 2;
        const size = Math.random() * 4 + 6;
        
        petal.style.width = size + 'px';
        petal.style.height = size + 'px';
        petal.style.animationDuration = duration + 's';
        petal.style.animationDelay = delay + 's';
        petal.style.opacity = Math.random() * 0.2 + 0.2;
        
        // Случайный оттенок розового
        const hue = Math.random() * 10 + 320;
        petal.style.background = `linear-gradient(135deg,
            hsl(${hue}, 90%, 85%),
            hsl(${hue}, 90%, 75%))`;
        
        container.appendChild(petal);
    }
}

// Обновление отсчёта
function updateCountdown() {
    const now = new Date();
    const currentYear = now.getFullYear();
    const nextYear = currentYear + 1;
    const newYear = new Date(`January 1, ${nextYear} 00:00:00`);
    
    const diff = newYear - now;
    
    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);
    
    // Обновляем цифры
    document.getElementById('days').textContent = days.toString().padStart(2, '0');
    document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
    document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
    document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
    
    // Обновляем год
    document.getElementById('nextYear').textContent = nextYear;
    
    // Эффект для последних 10 секунд
    if (days === 0 && hours === 0 && minutes === 0 && seconds <= 10) {
        const timeNumbers = document.querySelectorAll('.time-number');
        timeNumbers.forEach(el => {
            el.style.animation = 'digitChange 0.2s infinite';
        });
    } else {
        const timeNumbers = document.querySelectorAll('.time-number');
        timeNumbers.forEach(el => {
            el.style.animation = '';
        });
    }
}

// Инициализация
document.addEventListener('DOMContentLoaded', function() {
    // Создаем лепестки
    createPetals();
    
    // Запускаем таймер
    updateCountdown();
    setInterval(updateCountdown, 1000);
    
    // Автоматическое скрытие после сезона
    function shouldShowCountdown() {
        const now = new Date();
        const month = now.getMonth();
        const day = now.getDate();
        
        // Показываем с 1 декабря по 10 января
        if ((month === 11 && day >= 1) || (month === 0 && day <= 10)) {
            return true;
        }
        return false;
    }
    
    if (!shouldShowCountdown()) {
        document.getElementById('newYearCountdown').style.display = 'none';
    }
    
    // Интерактивность при наведении на блоки времени
    document.querySelectorAll('.time-block').forEach(block => {
        block.addEventListener('mouseenter', function() {
            this.querySelector('.time-number').style.transform = 'scale(1.05)';
        });
        
        block.addEventListener('mouseleave', function() {
            this.querySelector('.time-number').style.transform = 'scale(1)';
        });
    });
});
</script>
 
Дек
191
18
Пользователь
@сергей рахман, панель управления> три полоски >листаеш вниз в меню и выбераеш внешний вид>жмеш виджеты>потом жмеш добавить виджет выбераеш Html и пишеш там ключ заголовок и выбераеш где оно будет ну сам виджет, и внизу в шаблон вставляеш код
 
Дек
191
18
Пользователь
Код:
<div class="countdown-container sakura-theme" id="newYearCountdown">
    <!-- Фоновые элементы -->
    <div class="sakura-branch left"></div>
    <div class="sakura-branch right"></div>
   
    <!-- Заголовок -->
    <div class="countdown-title">
        <div class="title-text">Новый Год</div>
        <div class="title-subtext">Обратный отсчёт</div>
    </div>
   
    <!-- Основной таймер -->
    <div class="countdown-main">
        <!-- Дни -->
        <div class="time-block">
            <div class="time-number" id="days">00</div>
            <div class="time-label">Дней</div>
        </div>
       
        <div class="time-separator">:</div>
       
        <!-- Часы -->
        <div class="time-block">
            <div class="time-number" id="hours">00</div>
            <div class="time-label">Часов</div>
        </div>
       
        <div class="time-separator">:</div>
       
        <!-- Минуты -->
        <div class="time-block">
            <div class="time-number" id="minutes">00</div>
            <div class="time-label">Мин</div>
        </div>
       
        <div class="time-separator">:</div>
       
        <!-- Секунды -->
        <div class="time-block">
            <div class="time-number" id="seconds">00</div>
            <div class="time-label">Сек</div>
        </div>
    </div>
   
    <!-- Год -->
    <div class="year-display">
        <span class="year-number" id="nextYear">2026</span>
    </div>
   
    <!-- Фоновые лепестки -->
    <div class="petals-container"></div>
</div>

<style>
/* Тема сакуры - КОМПАКТНЫЙ РАЗМЕР */
.sakura-theme {
    background: linear-gradient(145deg,
        rgba(20, 15, 35, 0.95) 0%,
        rgba(40, 20, 60, 0.95) 50%,
        rgba(25, 15, 40, 0.95) 100%);
    border: none;
    border-radius: 12px;
    padding: 12px 10px;
    max-width: 320px;
    margin: 8px auto;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 8px 20px rgba(255, 105, 180, 0.08),
        0 0 0 1px rgba(255, 182, 193, 0.06) inset;
}

/* Ветви сакуры - МАЛЕНЬКИЕ */
.sakura-branch {
    position: absolute;
    width: 60px;
    height: 90px;
    background: linear-gradient(45deg, transparent 40%, #8b5a2b 45%, #8b5a2b 55%, transparent 60%);
    opacity: 0.08;
    z-index: 1;
}

.sakura-branch.left {
    top: -15px;
    left: -15px;
    transform: rotate(45deg);
}

.sakura-branch.right {
    bottom: -15px;
    right: -15px;
    transform: rotate(-135deg);
}

/* Заголовок - КОМПАКТНЫЙ */
.countdown-title {
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.title-text {
    color: #ff66b2;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 4px;
    text-shadow: 0 0 8px rgba(255, 105, 180, 0.3);
    letter-spacing: 0.5px;
}

.title-subtext {
    color: #ffccd5;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Основной таймер - КОМПАКТНЫЙ */
.countdown-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 12px 0;
    position: relative;
    z-index: 2;
}

.time-block {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 8px 4px;
    border: 1px solid rgba(255, 182, 193, 0.08);
    position: relative;
    min-width: 45px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-block:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 182, 193, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.06);
}

.time-number {
    font-family: 'Courier New', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 105, 180, 0.3);
    background: linear-gradient(180deg, #fff 0%, #ffccd5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-bottom: 3px;
    text-align: center;
    min-width: 35px;
    transition: all 0.2s;
}

.time-label {
    font-size: 0.65rem;
    color: #ffccd5;
    font-weight: 500;
    opacity: 0.9;
    text-align: center;
}

/* Разделители - КОМПАКТНЫЕ */
.time-separator {
    color: rgba(255, 182, 193, 0.3);
    font-size: 1rem;
    font-weight: 300;
    padding-bottom: 8px;
    animation: blink 2s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* Год - КОМПАКТНЫЙ */
.year-display {
    text-align: center;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 182, 193, 0.06);
    position: relative;
    z-index: 2;
}

.year-number {
    color: #ff66b2;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(255, 105, 180, 0.3);
    animation: yearPulse 3s infinite;
    display: inline-block;
}

@keyframes yearPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(0.98); }
}

/* Падающие лепестки - МИНИМАЛЬНЫЕ */
.petals-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.petal {
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #ff99cc, #ff66b2);
    clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%, 0% 35%);
    opacity: 0.4;
    filter: blur(0.2px);
    animation: petalFall linear infinite;
}

@keyframes petalFall {
    to {
        transform: translateY(100vh) rotate(360deg);
    }
}

/* Адаптивность */
@media (max-width: 480px) {
    .sakura-theme {
        max-width: 280px;
        padding: 10px 8px;
    }
   
    .title-text {
        font-size: 1.2rem;
    }
   
    .time-number {
        font-size: 1.2rem;
        min-width: 30px;
    }
   
    .time-block {
        min-width: 40px;
        padding: 6px 3px;
    }
   
    .time-label {
        font-size: 0.6rem;
    }
   
    .time-separator {
        font-size: 0.9rem;
        padding-bottom: 6px;
    }
   
    .year-number {
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .sakura-theme {
        max-width: 260px;
        padding: 8px 6px;
    }
   
    .countdown-main {
        gap: 3px;
    }
   
    .title-text {
        font-size: 1.1rem;
    }
   
    .time-number {
        font-size: 1.1rem;
        min-width: 28px;
    }
   
    .time-block {
        min-width: 38px;
        padding: 5px 2px;
    }
   
    .time-label {
        font-size: 0.55rem;
    }
   
    .time-separator {
        font-size: 0.8rem;
        padding-bottom: 5px;
    }
}

/* Эффект для перехода цифр */
.digit-changing {
    animation: digitChange 0.2s ease;
}

@keyframes digitChange {
    0% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-5px); opacity: 0; }
    51% { transform: translateY(5px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
</style>

<script>
// Создание падающих лепестков - МИНИМАЛЬНОЕ КОЛИЧЕСТВО
function createPetals() {
    const container = document.querySelector('.petals-container');
    const petalCount = 6; // Очень мало для компактности
   
    for (let i = 0; i < petalCount; i++) {
        const petal = document.createElement('div');
        petal.classList.add('petal');
       
        // Случайная позиция
        petal.style.left = Math.random() * 100 + '%';
        petal.style.top = -Math.random() * 30 + 'px';
       
        // Случайные параметры анимации
        const duration = Math.random() * 3 + 5;
        const delay = Math.random() * 2;
        const size = Math.random() * 4 + 6;
       
        petal.style.width = size + 'px';
        petal.style.height = size + 'px';
        petal.style.animationDuration = duration + 's';
        petal.style.animationDelay = delay + 's';
        petal.style.opacity = Math.random() * 0.2 + 0.2;
       
        // Случайный оттенок розового
        const hue = Math.random() * 10 + 320;
        petal.style.background = `linear-gradient(135deg,
            hsl(${hue}, 90%, 85%),
            hsl(${hue}, 90%, 75%))`;
       
        container.appendChild(petal);
    }
}

// Обновление отсчёта
function updateCountdown() {
    const now = new Date();
    const currentYear = now.getFullYear();
    const nextYear = currentYear + 1;
    const newYear = new Date(`January 1, ${nextYear} 00:00:00`);
   
    const diff = newYear - now;
   
    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);
   
    // Обновляем цифры
    document.getElementById('days').textContent = days.toString().padStart(2, '0');
    document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
    document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
    document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
   
    // Обновляем год
    document.getElementById('nextYear').textContent = nextYear;
   
    // Эффект для последних 10 секунд
    if (days === 0 && hours === 0 && minutes === 0 && seconds <= 10) {
        const timeNumbers = document.querySelectorAll('.time-number');
        timeNumbers.forEach(el => {
            el.style.animation = 'digitChange 0.2s infinite';
        });
    } else {
        const timeNumbers = document.querySelectorAll('.time-number');
        timeNumbers.forEach(el => {
            el.style.animation = '';
        });
    }
}

// Инициализация
document.addEventListener('DOMContentLoaded', function() {
    // Создаем лепестки
    createPetals();
   
    // Запускаем таймер
    updateCountdown();
    setInterval(updateCountdown, 1000);
   
    // Автоматическое скрытие после сезона
    function shouldShowCountdown() {
        const now = new Date();
        const month = now.getMonth();
        const day = now.getDate();
       
        // Показываем с 1 декабря по 10 января
        if ((month === 11 && day >= 1) || (month === 0 && day <= 10)) {
            return true;
        }
        return false;
    }
   
    if (!shouldShowCountdown()) {
        document.getElementById('newYearCountdown').style.display = 'none';
    }
   
    // Интерактивность при наведении на блоки времени
    document.querySelectorAll('.time-block').forEach(block => {
        block.addEventListener('mouseenter', function() {
            this.querySelector('.time-number').style.transform = 'scale(1.05)';
        });
       
        block.addEventListener('mouseleave', function() {
            this.querySelector('.time-number').style.transform = 'scale(1)';
        });
    });
});
</script>
У тя ИИ код походу)
 

Вложения

  • Screenshot_2026-02-15-15-09-51-748_com.android.chrome.jpg
    Screenshot_2026-02-15-15-09-51-748_com.android.chrome.jpg
    393.3 KB · Просмотры: 16
  • Screenshot_2026-02-15-15-10-43-040_com.android.chrome-edit.jpg
    Screenshot_2026-02-15-15-10-43-040_com.android.chrome-edit.jpg
    437.6 KB · Просмотры: 16
Фев
88
26
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
У тя ИИ код походу)
OFFTOP

Америку открыл

 
Сверху