• Как это работает
• Пример промпта
• Где разместить код в шаблоне?
• Готовый код (ориентир)
• Проверка работы
• Как доработать результат с помощью ассистента

AI Code может помочь вам создать готовые скрипты для сайта uCoz. Достаточно описать задачу понятными словами — и ассистент предложит код на JavaScript, CSS или HTML. Вы можете использовать его для анимаций, интерфейсов или автоматизации действий на странице.

Главное — формулировать запрос максимально подробно. Чем точнее вы опишете задачу (где именно нужен скрипт, как должно работать и выглядеть), тем лучше AI Code сгенерирует решение.

В этом примере сгенерируем простую кнопку «Наверх»: квадратную, синюю, со стрелкой, которая появляется после прокрутки и плавно возвращает страницу к началу.

Как это работает

1. Перейдите в раздел «Дизайн» → «Редактор шаблонов», выберите нужный шаблон и откройте AI Code.
2. Сформулируйте запрос обычным текстом, без технических терминов.
3. Получите готовый код и вставьте его в шаблон.
4. При необходимости уточните детали: ассистент доработает скрипт под ваши условия.

Пример промпта

Модуль: Редактор страниц

Шаблон: Страницы сайта

Сделай кнопку “Наверх”, которая появляется только после того, как я прокручу страницу вниз. 
Пусть она будет закреплена в правом нижнем углу, квадратная, [#507fff] цвета. 
Внутри сделай современную SVG-иконку [стрелки] вверх. 
Когда нажимаешь — страница плавно возвращается к самому верху. 
Она должна плавно появляться и исчезать.

Где разместить код в шаблоне?

1. HTML кнопки вставьте в шаблон перед закрывающим тегом </body>.
2. CSS добавьте в Таблицу стилей (CSS) (или в <style> рядом с кнопкой).
3. JS поместите внизу после HTML кнопки или перед закрывающим тегом </body>.

Готовый код (ориентир)

<style>
#scrollTopBtn {
 position: fixed;
 bottom: 20px;
 right: 20px;
 width: 60px;
 height: 60px;
 background-color: #507fff;
 border: none;
 border-radius: 16px;
 cursor: pointer;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.4s ease, visibility 0.4s ease;
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 9999;
}
#scrollTopBtn.show {
 opacity: 1;
 visibility: visible;
}
#scrollTopBtn svg {
 fill: white;
 width: 20px;
 height: 20px;
}
</style>

<button id="scrollTopBtn" title="Наверх" onclick="scrollToTop()">
 <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
 <path d="M12 4l-8 8h6v8h4v-8h6z"/>
 </svg>
</button>

<script>
(function(){
 var btn = document.getElementById('scrollTopBtn');
 window.addEventListener('scroll', function() {
 if (window.pageYOffset > 100) {
 btn.classList.add('show');
 } else {
 btn.classList.remove('show');
 }
 });
})();
function scrollToTop() {
 window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>

Проверка работы

Прокрутите страницу вниз — кнопка плавно появится. Нажмите на неё — страница мягко вернётся к началу. Вверху кнопка исчезает.

Как доработать результат с помощью ассистента

Если вам не нравится результат или вы хотите что-то изменить, просто продолжите диалог с AI Code — он доработает код под ваши условия. Не нужно начинать заново, достаточно уточнить детали.

Примеры уточнений

• Сделай размер кнопки 48×48 px, радиус 8 px; отступы справа и снизу по 20 px.
• Порог появления пусть будет после 600 px прокрутки.
• Поменяй цвет кнопки на #507fff, а иконку сделай белой.
• Добавь лёгкую тень и эффект нажатия при клике.
• Смести кнопку левее: отступ справа сделай 40 px, снизу оставь 20 px.
• Увеличь размер иконки стрелки до 28 px, а толщину линии сделай чуть толще.
• На мобильных экранах уменьши размер кнопки, чтобы она не перекрывала контент.