GAMECMS | Новогодний Таймер

exe

Team TSG Community
exe
Репутация
0
Отзывы
0
Сообщения
44
Реакции
29
LEVEL 14 1800 XP
 
🎉 Модуль "Новогодний Таймер": Создайте Праздничное Настроение на Вашем Сайте! 🎉

Приближается Новый Год — время волшебства и новых начинаний! Хотите, чтобы ваш игровой сервер был в центре внимания и дарил пользователям ощущение праздника задолго до полуночи? Наш модуль "Новогодний Таймер" – это идеальное решение!

Что вы получаете:
• Элегантный Отсчет: Стильный и заметный блок с динамическим обратным отсчетом до Нового Года.
• Точность до Секунды: Ваши игроки будут видеть, сколько дней, часов, минут и даже секунд осталось до самого долгожданного события.
• Актуальная Информация: Помимо таймера, модуль отображает текущую дату и время, а также целевую дату Нового Года (например, до 1 января 2026 года), как на скриншоте.
• Привлекательный Дизайн: Интуитивно понятный интерфейс и яркие акценты (как на скриншоте), которые прекрасно впишутся в дизайн вашего сайта.

Почему это нужно вашему серверу?
• Повышение Вовлеченности: Стимулируйте игроков чаще посещать сайт, чтобы следить за обратным отсчетом.
• Создание Атмосферы: Окуните ваших пользователей в предвкушение праздника и подарите им чувство ожидания чуда.
• Современный Вид: Добавьте вашему сайту свежий и актуальный элемент, демонстрирующий заботу о сообществе.


1762703504372.webp


ВАЖНОЕ ПРИМЕЧАНИЕ ПО СОВМЕСТИМОСТИ:
Данный модуль был тщательно протестирован и гарантированно корректно работает только на шаблоне Solution для GameCMS. Мы не можем гарантировать полную совместимость и корректное отображение на других шаблонах без дополнительной адаптации.


Привнесите праздничный дух на ваш сайт уже сегодня! Приобретите модуль "Новогодний Таймер" и сделайте ожидание Нового Года по-настоящему особенным!​

За покупкой писать в ЛС - https://tsgame.ru/members/exe.94/​
Нажмите для раскрытия...
 
Сделаю такую же за бесплатно
 
Поставили лайк 1 пользователь:
exe exe
Доплачу вам чтоб сделать такую же
 
Screenshot_20251110-201330.webp
Создаем виджет в внешний вид
Определение виджета:
HTML
Нажмите для раскрытия...
Ключ виджета:
newyear-countdown
Нажмите для раскрытия...
Позиции для отображения:
Под узлами
Нажмите для раскрытия...
Шаблон:
Код:
Expand Collapse Copy 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Обратный отсчет до Нового Года</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #0d1b2a;
            color: white;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        
        .countdown-container {
            background-color: #1c1f29;
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            width: 450px;
        }
        
        .title {
            font-size: 24px;
            margin-bottom: 25px;
            color: #e0e1dd;
        }
        
        .countdown {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
        }
        
        .time-block {
            text-align: center;
        }
        
        .time-value {
            font-size: 32px;
            font-weight: bold;
            background-color: #2f323c;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 5px;
            color: #ff5155;
text-shadow: #ff5155 1px 1px 10px;
        }
        
        .time-label {
            font-size: 14px;
            color: #ffd652;
        }
        
        .date-info {
            font-size: 16px;
            color: #e0e1dd;
            margin-bottom: 10px;
background: #2f323c;
border-radius: 7px;
Padding: 2px 4px;
        }
        
        .target-date {
            font-size: 16px;
            color: #a8b3c0;
        }
    </style>
</head>
<body>
    <div class="countdown-container">
        <div class="title" style= box-shadow: 0 4px 8px #ffd652; padding: 15px; max-width: 300px; margin: 0 auto;"> <h2 align="center" style="color: #ffd652; text-shadow: #ffd652 1px 1px 10px; margin: 0; font-size: 18px;"><b>До Нового Года</b></div>
        
        <div class="countdown">
            <div class="time-block">
                <div class="time-value" id="days">52</div>
                <div class="time-label">ДНЕЙ</div>
            </div>
            
            <div class="time-block">
                <div class="time-value" id="hours">05</div>
                <div class="time-label">ЧАСОВ</div>
            </div>
            
            <div class="time-block">
                <div class="time-value" id="minutes">08</div>
                <div class="time-label">МИНУТ</div>
            </div>
            
            <div class="time-block">
                <div class="time-value" id="seconds">21</div>
                <div class="time-label">СЕКУНД</div>
            </div>
        </div>
        
        <div class="date-info" id="current-date">Сегодня: 9 ноября, 18:51:38</div>
        <div class="target-date">До 1 января 2026 года</div>
    </div>

    <script>
        // Функция для обновления обратного отсчета
        function updateCountdown() {
            const now = new Date();
            const targetYear = 2026;
            const newYearDate = new Date(`January 1, ${targetYear} 00:00:00`);
            
            // Разница во времени между текущим моментом и Новым Годом
            const timeDiff = newYearDate - now;
            
            // Расчет дней, часов, минут и секунд
            const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeDiff % (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');
            
            // Обновление текущей даты
            const options = {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            };
            document.getElementById('current-date').textContent = `Сегодня: ${now.toLocaleDateString('ru-RU', options)}`;
        }
        
        // Запуск обратного отсчета при загрузке страницы
        updateCountdown();
        
        // Обновление каждую секунду
        setInterval(updateCountdown, 1000);
    </script>
</body>
</html>
 
Kortezzers написал(а):
Посмотреть вложение 2322
Создаем виджет в внешний вид



Шаблон:
Код:
Expand Collapse Copy 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Обратный отсчет до Нового Года</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #0d1b2a;
            color: white;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
       
        .countdown-container {
            background-color: #1c1f29;
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            width: 450px;
        }
       
        .title {
            font-size: 24px;
            margin-bottom: 25px;
            color: #e0e1dd;
        }
       
        .countdown {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
        }
       
        .time-block {
            text-align: center;
        }
       
        .time-value {
            font-size: 32px;
            font-weight: bold;
            background-color: #2f323c;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 5px;
            color: #ff5155;
text-shadow: #ff5155 1px 1px 10px;
        }
       
        .time-label {
            font-size: 14px;
            color: #ffd652;
        }
       
        .date-info {
            font-size: 16px;
            color: #e0e1dd;
            margin-bottom: 10px;
background: #2f323c;
border-radius: 7px;
Padding: 2px 4px;
        }
       
        .target-date {
            font-size: 16px;
            color: #a8b3c0;
        }
    </style>
</head>
<body>
    <div class="countdown-container">
        <div class="title" style= box-shadow: 0 4px 8px #ffd652; padding: 15px; max-width: 300px; margin: 0 auto;"> <h2 align="center" style="color: #ffd652; text-shadow: #ffd652 1px 1px 10px; margin: 0; font-size: 18px;"><b>До Нового Года</b></div>
       
        <div class="countdown">
            <div class="time-block">
                <div class="time-value" id="days">52</div>
                <div class="time-label">ДНЕЙ</div>
            </div>
           
            <div class="time-block">
                <div class="time-value" id="hours">05</div>
                <div class="time-label">ЧАСОВ</div>
            </div>
           
            <div class="time-block">
                <div class="time-value" id="minutes">08</div>
                <div class="time-label">МИНУТ</div>
            </div>
           
            <div class="time-block">
                <div class="time-value" id="seconds">21</div>
                <div class="time-label">СЕКУНД</div>
            </div>
        </div>
       
        <div class="date-info" id="current-date">Сегодня: 9 ноября, 18:51:38</div>
        <div class="target-date">До 1 января 2026 года</div>
    </div>

    <script>
        // Функция для обновления обратного отсчета
        function updateCountdown() {
            const now = new Date();
            const targetYear = 2026;
            const newYearDate = new Date(`January 1, ${targetYear} 00:00:00`);
           
            // Разница во времени между текущим моментом и Новым Годом
            const timeDiff = newYearDate - now;
           
            // Расчет дней, часов, минут и секунд
            const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeDiff % (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');
           
            // Обновление текущей даты
            const options = {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            };
            document.getElementById('current-date').textContent = `Сегодня: ${now.toLocaleDateString('ru-RU', options)}`;
        }
       
        // Запуск обратного отсчета при загрузке страницы
        updateCountdown();
       
        // Обновление каждую секунду
        setInterval(updateCountdown, 1000);
    </script>
</body>
</html>
Нажмите для раскрытия...
Все здорово, но это виджет для ксени, а тема про для gamecms)
За умение пользоваться нейронкой отдельный лайк
 
Поставили лайк 1 пользователь:
exe exe
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху