Чтобы добавить таймер обратного отсчета с анимированным заполняющимся кружком на Тильду, нужно использовать кастомный HTML/CSS/JS код. Вот пошаговое руководство с готовым кодом, который легко адаптировать под ваш дизайн: --- ### Шаг 1: Добавьте блок HTML в Тильду 1. Откройте страницу в редакторе Тильды. 2. Добавьте блок **"HTML-код"** (например, блок №105 или любой другой блок с поддержкой кастомного HTML). 3. Дважды кликните по блоку, чтобы открыть редактор кода. --- ### Шаг 2: Вставьте готовый код Вставьте этот код в редактор блока. Он включает в себя все необходимые части: кружок, таймер и логику обновления. ```html ``` --- ### Шаг3: Адаптируйте код под ваш дизайн Измените значения переменных в блоке `:root`, чтобы подогнать таймер под ваш сайт: 1. `--accent-color`: Цвет заполняющего кружка (подберите под акцентный цвет вашего сайта). 2. `--circle-size`: Размер кружка (например, `300px` для большего размера). 3. `--digit-size` и `--label-size`: Размеры цифр и подписей. 4. `--inner-bg`: Цвет фона внутри кружка (должен совпадать с фоном вашей страницы). 5. `EVENT_DATE`: Установите дату и время вашего события (например, `new Date("2024-06-15 18:00:00")`). --- ### Шаг4: Проверьте и опубликуйте 1. Сохраните блок и перейдите в предварительный просмотр страницы. 2. Убедитесь, что таймер корректно обновляется, а кружок заполняется плавно. 3. Опубликуйте страницу, чтобы сделать таймер доступным для посетителей. --- ### Дополнительные настройки - Если вы хотите сделать кружок в виде кольца (не сплошной), замените блок стилей `.countdown-circle` и `.countdown-circle::before` на этот код: ```css .countdown-circle { position: relative; width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; border:8px solid var(--empty-color); box-sizing:border-box; } .countdown-circle::before { content:''; position:absolute; width:calc(100% - 16px); height:calc(100% -16px); border-radius:50%; background:var(--inner-bg); z-index:1; } .countdown-circle::after { content:''; position:absolute; top:-8px; left:-8px; width:calc(100% +16px); height:calc(100% +16px); border-radius:50%; background:conic-gradient(from -90deg, var(--accent-color)0deg, var(--accent-color)0deg, transparent 0deg, transparent360deg); z-index:0; clip-path:circle(50% at center); } ``` И в JS замените строку обновления кружка на: ```javascript circleEl.style.setProperty('--progress', progress); ``` (Добавьте переменную `--progress:0deg` в `:root`). - Для изменения часового пояса используйте формат с указанием UTC: `new Date("2024-12-31T23:59:59Z")`. Этот код работает во всех современных браузерах и полностью адаптируется под дизайн вашего сайта на Тильде! 🚀