Различия

Показаны различия между двумя версиями страницы.

--- software:development:demo:cms:ucms:application_template:install [2026/05/02 16:21] – VladPolskiy
+++ software:development:demo:cms:ucms:application_template:install [2026/05/02 17:25] (текущий) – [Фоновое изображение] VladPolskiy
@@ Строка 16: / Строка 16: @@
 </html>
 </note>
-То же самое с фоном.\\
-Для этого скриншота с техническим интерфейсом установки (UCMS Demo) лучше всего подойдут нейтральные и «спокойные» фоны, которые не будут конфликтовать со светло-зеленым основным блоком.Рекомендуемые варианты фона:Чистый белый или светло-серый:Классический выбор для ИТ-интерфейсов. Белый цвет (#FFFFFF) или очень светлый серый (#F5F5F5) создаст эффект «чистого холста» и сделает акцент на самом информационном блоке.Мягкий градиент:Переход от белого к очень бледному серому или небесно-голубому. Это добавит глубины, не перегружая визуальное восприятие.Темно-синий или глубокий графит:Если вы хотите создать контрастный, современный вид в стиле «темной темы». Светло-зеленый блок будет хорошо выделяться на фоне цвета «полуночный синий» или темно-серого.Технологичная текстура:Минималистичный фон с элементами кода, микросхем или геометрических паттернов в приглушенных тонах. Это подчеркнет техническую направленность изображения.Природный «землистый» фон:Светло-бежевый или песочный оттенки хорошо гармонируют с зеленым, создавая более мягкое и дружелюбное впечатление от интерфейса.Совет: Старайтесь избегать слишком ярких или насыщенных цветов (ядовито-желтого, ярко-красного), так как они будут «спорить» с нежным оттенком зеленого на самой картинке.
+==== Фоновое изображение ====
+=== Градиент от белого к небесно-голубому ===
+Рекомендуемые варианты фона:
+Мягкий градиент:Переход от белого к небесно-голубому. Это добавит глубины, не
+перегружая визуальное восприятие.
 <note shadow>
 <html>
-<iframe height="400" width="750" scrolling="yes" title="Untitled" src="./demo_ucms/css_sidenav_icon_responsive_install_fone/index.php" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="250" width="750" scrolling="yes" title="Untitled" src="./demo_ucms/css_sidenav_icon_responsive_install_fone/index.php" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 </iframe>
 </html>
 </note>
+=== Салатовый градиент ===
+Природный «землистый» фон:Светло-бежевый
+хорошо гармонируют с зеленым, создавая более мягкое и дружелюбное впечатление от интерфейса.
+<note shadow>
+<html>
+<iframe height="250" width="750" scrolling="yes" title="Untitled" src="./demo_ucms/css_sidenav_icon_responsive_install_fone_salad_ingredient/index.php" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+</note>
+=== Светло бежевый с частицами ===
+<note shadow>
+<html>
+<iframe height="00" width="750" scrolling="yes" title="Untitled" src="./demo_ucms/css_sidenav_icon_responsive_install_fone_light_beige/index.php" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+</note>
+=== Градиент от белого к небесно - голубому ===
+<note shadow>
+<html>
+<iframe height="400" width="750" scrolling="yes" title="Untitled" src="./demo_ucms/css_sidenav_icon_responsive_install_fone_ingredient_white_to_sky_blue/index.php" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+</note>
+=== Градиент от белого к светло - серому ===
+Чистый белый или светло-серый:Классический выбор для ИТ-интерфейсов. Белый цвет (#FFFFFF) или очень
+светлый серый (#F5F5F5) создаст эффект «чистого холста» и сделает акцент на самом информационном блоке.
+<note shadow>
+<html>
+<iframe height="400" width="750" scrolling="yes" title="Untitled" src="./demo_ucms/css_sidenav_icon_responsive_install_fone_ingredient_white_to_gray/index.php" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+</note>
+===== particles-js настройка =====
+Настройка **%%particles.js%%** включает подключение библиотеки, создание контейнера (HTML) и инициализацию **(%%JSON-конфиг%%)**. Ключевые параметры: плотность **(%%number%%)**, размер **(%%size%%)**, скорость **(%%move%%)**, взаимодействие **(%%interactivity%%)**. Для работы как фона важно задать **%%position: absolute и z-index%%**. Используйте генератор для визуальной настройки.
+. Подключение и HTML \\
+{{ :software:development:demo:cms:ucms:application_template:particles.js-master.zip |Скачайте particles.min.js}} и подключите его в HTML. Создайте блок для анимации:
+<code html index.html>
+<div id="particles-js"></div>
+<script src="particles.min.js"></script>
+</code>
+. Стили (CSS)
+Чтобы частицы работали как фон:
+<code css style.css>
+#particles-js {
+  position: absolute; /* или fixed */
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: -1; /* под контент */
+}
+</code>
+. Инициализация (JS)
+<code js script.js>
+javascriptparticlesJS.load('particles-js', 'particles.json', function() {
+  console.log('particles.js loaded');
+});
+</code>
+. Основные настройки **%%(particles.json)%%**
+  * **%%particles.number: value%%** - количество частиц
+  * **%%particles.color: value%%** - цвет **%%(hex, rgb)%%**
+  * **%%particles.shape:%%** тип **%%(circle, edge, triangle)%%**
+  * **%%particles.opacity:%%** прозрачность
+  * **%%particles.size:%%** размер частиц
+  * **%%particles.line_linked:%%** настройки линий между частицами (%%enable: true/false%%)
+  * **%%particles.move: speed%%** (скорость), %%direction%% (направление)
+  * **%%interactivity: onhover%%** (реакция на наведение), %%onclick%% (на клик).
+===== Дополнения и Файлы =====
+см. также:
+  * [[https://github.com/VincentGarreau/particles.js/|]]
+  * [[https://github.com/VincentGarreau/particles.js/archive/master.zip|]]
+  * {{ :software:development:demo:cms:ucms:application_template:particles.js-master.zip |}}