Commit 83993d57 authored by Pavel Beketov's avatar Pavel Beketov

bugfix: add particles.js and license.html. Minimal redesign

parent eebb7ea3
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Загрузки</title> <title>Загрузки - Ximper Linux</title>
<link rel="icon" href="images/ximperlinux.svg" type="image/x-icon"> <link rel="icon" href="images/ximperlinux.svg" type="image/x-icon">
<link rel="stylesheet" href="downloads.css?v=1.3"> <link rel="stylesheet" href="downloads.css?v=1.8">
<link rel="stylesheet" href="styles.css?v=1.3"> <link rel="stylesheet" href="styles.css?v=1.8">
<link rel="stylesheet" href="libs/webfonts/css/all.min.css"> <link rel="stylesheet" href="libs/webfonts/css/all.min.css">
<script src="libs/jquery-3.6.0.min.js"></script> <script src="libs/jquery-3.6.0.min.js"></script>
</head> </head>
...@@ -48,77 +48,98 @@ ...@@ -48,77 +48,98 @@
<h2 class="styled-title">Загрузить Ximper Linux прямо сейчас</h2> <h2 class="styled-title">Загрузить Ximper Linux прямо сейчас</h2>
<div class="download-distro"> <div class="download-distro">
<div class="download-left"> <div class="download-left">
<img src="images/ximpernvda.png" alt=""> <img src="images/ximpernvda.png" alt="Ximper Linux GNOME с поддержкой Nvidia">
</div> </div>
<div class="download-right"> <div class="download-right">
<h3>Ximper Linux 0.9.3 GNOME с поддержкой Nvidia</h3> <h3>Ximper Linux 0.9.3 GNOME с поддержкой Nvidia</h3>
<p>Варианты загрузки:</p> <p>Варианты загрузки:</p>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-gnome-nvidia-0.9.3-x86_64.iso" class="button">ISO-образ (7.4Гб)</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-gnome-nvidia-0.9.3-x86_64.iso" class="button outline">ISO-образ (7.4Гб)</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-gnome-nvidia-0.9.3-x86_64.torrent" class="button">Torrent</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-gnome-nvidia-0.9.3-x86_64.torrent" class="button outline">Torrent</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-gnome-nvidia-0.9.3-x86_64.iso.md5" class="button">Контрольные суммы (md5sum)</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-gnome-nvidia-0.9.3-x86_64.iso.md5" class="button outline">Контрольные суммы (md5sum)</a>
</div> </div>
</div> </div>
<div class="download-distro"> <div class="download-distro">
<div class="download-right"> <div class="download-right">
<h3>Ximper Linux GNOME 0.9.3</h3> <h3>Ximper Linux GNOME 0.9.3</h3>
<p>Варианты загрузки:</p> <p>Варианты загрузки:</p>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-gnome-0.9.3-x86_64.iso" class="button">ISO-образ (6.6Гб)</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-gnome-0.9.3-x86_64.iso" class="button outline">ISO-образ (6.6Гб)</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-gnome-0.9.3-x86_64.torrent" class="button">Torrent</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-gnome-0.9.3-x86_64.torrent" class="button outline">Torrent</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-gnome-0.9.3-x86_64.iso.md5" class="button">Контрольные суммы (md5sum)</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-gnome-0.9.3-x86_64.iso.md5" class="button outline">Контрольные суммы (md5sum)</a>
</div> </div>
<div class="download-left"> <div class="download-left">
<img src="images/ximperclassicd.png" alt=""> <img src="images/ximperclassicd.png" alt="Ximper Linux GNOME">
</div> </div>
</div> </div>
<div class="download-distro"> <div class="download-distro">
<div class="download-left"> <div class="download-left">
<img src="images/ximphnvdd.png" alt=""> <img src="images/ximphnvdd.png" alt="Ximper Linux Hyprland с поддержкой Nvidia">
</div> </div>
<div class="download-right"> <div class="download-right">
<h3>Ximper Linux Hyprland 0.9.3 с поддержкой Nvidia</h3> <h3>Ximper Linux Hyprland 0.9.3 с поддержкой Nvidia</h3>
<p>Варианты загрузки:</p> <p>Варианты загрузки:</p>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-hyprland-nvidia-0.9.3-x86_64.iso" class="button">ISO-образ (7.4Гб)</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-hyprland-nvidia-0.9.3-x86_64.iso" class="button outline">ISO-образ (7.4Гб)</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-hyprland-nvidia-0.9.3-x86_64.torrent" class="button">Torrent</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-hyprland-nvidia-0.9.3-x86_64.torrent" class="button outline">Torrent</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-hyprland-nvidia-0.9.3-x86_64.iso.md5" class="button">Контрольные суммы (md5sum)</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-hyprland-nvidia-0.9.3-x86_64.iso.md5" class="button outline">Контрольные суммы (md5sum)</a>
</div> </div>
</div> </div>
<div class="download-distro"> <div class="download-distro">
<div class="download-right"> <div class="download-right">
<h3>Ximper Linux Hyprland 0.9.3</h3> <h3>Ximper Linux Hyprland 0.9.3</h3>
<p>Варианты загрузки:</p> <p>Варианты загрузки:</p>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-hyprland-0.9.3-x86_64.iso" class="button">ISO-образ (6.7Гб)</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-hyprland-0.9.3-x86_64.iso" class="button outline">ISO-образ (6.7Гб)</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-hyprland-0.9.3-x86_64.torrent" class="button">Torrent</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-hyprland-0.9.3-x86_64.torrent" class="button outline">Torrent</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-hyprland-0.9.3-x86_64.iso.md5" class="button">Контрольные суммы (md5sum)</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/Current/ISO/ximper-hyprland-0.9.3-x86_64.iso.md5" class="button outline">Контрольные суммы (md5sum)</a>
</div> </div>
<div class="download-left"> <div class="download-left">
<img src="images/ximpbookhypr.png" alt=""> <img src="images/ximpbookhypr.png" alt="Ximper Linux Hyprland">
</div> </div>
</div> </div>
<div class="install-guide"> <div class="install-guide">
<div class="guide-content"> <div class="guide-content">
<h3>Инструкция по установке</h3> <h3>Инструкция по установке</h3>
<p>Узнайте, как записать дистрибутив на флеш-накопитель и установить Ximper Linux на ваш компьютер.</p> <p>Узнайте, как записать дистрибутив на флеш-накопитель и установить Ximper Linux на ваш компьютер.</p>
<a href="https://wiki.ximperlinux.ru/ru/start/installing-image-on-USB-flash-drive" class="button">Перейти к инструкции</a> <a href="https://wiki.ximperlinux.ru/ru/start/installing-image-on-USB-flash-drive" class="button outline">Перейти к инструкции</a>
</div> </div>
</div> </div>
<div class="explore-source"> <div class="explore-source">
<div class="source-left"> <div class="source-left">
<img src="images/source.png" alt=""> <img src="images/source.png" alt="Исходный код">
</div> </div>
<div class="source-right"> <div class="source-right">
<h3>Исследуйте исходный код</h3> <h3>Исследуйте исходный код</h3>
<p>Исследуйте исходный код для более глубокого понимания Ximper Linux</p> <p>Исследуйте исходный код для более глубокого понимания Ximper Linux</p>
<a href="https://gitlab.eterfund.ru/ximperlinux" class="button">GitLab</a> <a href="https://gitlab.eterfund.ru/ximperlinux" class="button outline">GitLab</a>
</div> </div>
</div> </div>
<div class="support-project"> <div class="repo-info-static">
<h3>Поддержать проект</h3> <div class="repo-header">
<p>Помощь проекту Ximper Linux — инвестиция в будущее свободного программного обеспечения. Благодаря вашей помощи мы сможем развивать систему, доступную каждому. Спасибо за вашу поддержку!</p> <h3><i class="fas fa-database"></i> Информация о состоянии репозитория</h3>
<a href="https://t.me/tribute/app?startapp=donation_4144" class="button">Поддержать</a> </div>
<div class="repo-content-static">
<div class="repo-data-grid">
<div class="repo-data-item">
<span class="data-label">Last update date:</span>
<span class="data-value">2025-09-10 07:20:09</span>
</div>
<div class="repo-data-item">
<span class="data-label">Sisyphus archive date:</span>
<span class="data-value">2025-09-10</span>
</div>
</div>
<div class="repo-action">
<a href="https://download.etersoft.ru/pub/Etersoft/Sisyphus/Deferred_Info.html" target="_blank" class="button outline">
<i class="fas fa-external-link-alt"></i> Проверить состояние репозитория
</a>
</div>
<div class="repo-footer">
<p> Изначально Ximper Linux был роллинг-релизом, напрямую основанным на ALT Sisyphus. В настоящий момент мы осуществили переход на модель отложенного репозитория Deferred.
Это позволяет нам тщательнее тестировать пакеты, прежде чем они попадут к пользователям, тем самым повышая общую стабильность дистрибутива.</p>
</div>
</div>
</div>
</div> </div>
</div> </section>
</section> </main>
</main>
<footer> <footer>
<div class="footer-left"> <div class="footer-left">
<a href="https://t.me/ximperlinux" class="social-icon"><i class="fab fa-telegram"></i></a> <a href="https://t.me/ximperlinux" class="social-icon"><i class="fab fa-telegram"></i></a>
...@@ -126,11 +147,12 @@ ...@@ -126,11 +147,12 @@
</div> </div>
<div class="footer-center"> <div class="footer-center">
<p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</p> <p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</p>
<a href="license.html" id="license-link">Лицензионное соглашение</a>
</div> </div>
<div class="footer-right"> <div class="footer-right">
<a href="https://etersoft.ru"><img src="images/logoteamv2.png" alt="Etersoft" class="logo"></a> <a href="https://etersoft.ru"><img src="images/logoteamv2.png" alt="Etersoft" class="logo"></a>
</div> </div>
</footer> </footer>
<script src="script.js?v=1.3"></script> <script src="script.js?v=1.8"></script>
</body> </body>
</html> </html>
...@@ -5,9 +5,10 @@ ...@@ -5,9 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ximper Linux</title> <title>Ximper Linux</title>
<link rel="icon" href="images/ximperlinux.svg" type="image/x-icon"> <link rel="icon" href="images/ximperlinux.svg" type="image/x-icon">
<link rel="stylesheet" href="styles.css?v=1.3"> <link rel="stylesheet" href="styles.css?v=1.8">
<link rel="stylesheet" href="libs/webfonts/css/all.min.css"> <link rel="stylesheet" href="libs/webfonts/css/all.min.css">
<script src="libs/jquery-3.6.0.min.js"></script> <script src="libs/jquery-3.6.0.min.js"></script>
<script src="libs/particles.min.js"></script>
</head> </head>
<div class="menu-button"> <div class="menu-button">
<i class="fas fa-bars"></i> <i class="fas fa-bars"></i>
...@@ -43,79 +44,29 @@ ...@@ -43,79 +44,29 @@
</header> </header>
<main> <main>
<div id="hero-section"> <div id="hero-section">
<div class="circle-container"> <div id="particles-js"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="hero-text"> <div class="hero-text">
<div class="hero-image"> <div class="hero-image">
<img src="images/ximperlinux.svg" alt="logo"> <img src="images/ximperlinux.svg" alt="logo">
</div> </div>
<h2>Ximper Linux</h2> <h2>Ximper Linux</h2>
<p>Роллинг-релиз на базе ALT Sisyphus, создан для тех, кто ищет идеальное сочетание высокой производительности, современного дизайна и стабильности.</p> <p>Для тех, кто требует от системы всего и сразу: современный дизайн, высокая скорость и уверенность в завтрашнем дне. Построен на отложенном репозитории ALT Sisyphus и гарантирует стабильность.</p>
<button id="next-section" class="button">Узнать больше</button> <button id="next-section" class="button outline">Узнать больше</button>
<div class="arrows"> <div class="arrows">
<span class="arrow"></span> <span class="arrow"></span>
<span class="arrow"></span> <span class="arrow"></span>
<span class="arrow"></span> <span class="arrow"></span>
</div>
</div>
</div> </div>
</div>
</div>
<div id="blocks-text"> <div id="blocks-text">
<h1>Возможности и удобства</h1> <h1>Возможности и удобства</h1>
</div> </div>
<div id="blocks-section"> <div id="blocks-section">
<div class="info-block"> <div class="info-block">
<img src="images/app.png" alt=""> <img src="images/Deffered.png" alt="">
<h3>Sisyphus on board</h3> <h3>Tested. Trusted. Deferred.</h3>
<p>В наличии обширный репозиторий пакетов Sisyphus, у Вас всегда будет широкий выбор пакетов и приложений для установки.</p> <p>В вашем распоряжении — вся мощь и разнообразие репозитория ALT Sisyphus. Благодаря модели Deferred каждое обновление проходит тщательную проверку, прежде чем попасть к вам.</p>
</div> </div>
<div class="info-block"> <div class="info-block">
<img src="images/easy.png" alt=""> <img src="images/easy.png" alt="">
...@@ -134,8 +85,8 @@ ...@@ -134,8 +85,8 @@
</div> </div>
<div class="info-block"> <div class="info-block">
<img src="images/console.png" alt=""> <img src="images/console.png" alt="">
<h3>Хорошая производительность в играх благодаря PortProton</h3> <h3>Играйте с максимальной производительностью</h3>
<p>PortProton — это проект, разработанный для того, чтобы сделать легким и удобным запуск Windows игр на Linux. Работает из коробки.</p> <p>Используем передовые решения для запуска Windows-игр на Linux. PortProton работает из коробки, обеспечивая плавный гейминг без компромиссов.</p>
</div> </div>
<div class="info-block"> <div class="info-block">
<img src="images/file-system.png" alt=""> <img src="images/file-system.png" alt="">
...@@ -146,41 +97,84 @@ ...@@ -146,41 +97,84 @@
<div class="variants-text"> <div class="variants-text">
<h1>Идеальный выбор для каждого</h1> <h1>Идеальный выбор для каждого</h1>
</div> </div>
<div class="cards-section"> <div class="distro-showcase">
<div class="card"> <div class="distro-variant">
<img src="images/ximperclassic.png" alt=""> <div class="distro-image">
<div class="card-text"> <img src="images/ximperclassic.png" alt="Ximper Linux GNOME">
<h3>Ximper Linux GNOME</h3> </div>
<div class="distro-content">
<h2>Ximper Linux GNOME</h2>
<p>Классический Ximper Linux с GNOME подходит для тех, кто ценит привычный, стабильный рабочий стол. Идеален для офисной работы, обучения и повседневного использования.</p> <p>Классический Ximper Linux с GNOME подходит для тех, кто ценит привычный, стабильный рабочий стол. Идеален для офисной работы, обучения и повседневного использования.</p>
<div class="requirements">
<h3>Системные требования</h3>
<ul>
<li><i class="fas fa-microchip"></i> Процессор: 2-ядерный, 64-бит (рекомендуется 4-ядерный)</li>
<li><i class="fas fa-memory"></i> ОЗУ: 4 Гб (рекомендуется 8 Гб для комфортной работы)</li>
<li><i class="fas fa-desktop"></i> Графика: Любой совместимый GPU с поддержкой OpenGL 3.3+</li>
<li><i class="fas fa-hdd"></i> ПЗУ: 40 Гб</li>
</ul>
</div>
</div> </div>
</div> </div>
<div class="card"> <div class="distro-variant reverse">
<img src="images/ximperhypr.png" alt=""> <div class="distro-image">
<div class="card-text"> <img src="images/ximperhypr.png" alt="Ximper Linux Hyprland">
<h3>Ximper Linux Hyprland</h3> </div>
<div class="distro-content">
<h2>Ximper Linux Hyprland</h2>
<p>Современный дистрибутив с оконным менеджером Hyprland для продвинутых пользователей, стремящихся к легкости и скорости работы. Идеален для экспериментов и нестандартных конфигураций.</p> <p>Современный дистрибутив с оконным менеджером Hyprland для продвинутых пользователей, стремящихся к легкости и скорости работы. Идеален для экспериментов и нестандартных конфигураций.</p>
<div class="requirements">
<h3>Системные требования</h3>
<ul>
<li><i class="fas fa-microchip"></i> Процессор: 2-ядерный, 64-бит</li>
<li><i class="fas fa-memory"></i> ОЗУ: 4 Гб</li>
<li><i class="fas fa-desktop"></i> Графика: Современный GPU с поддержкой Wayland</li>
<li><i class="fas fa-hdd"></i> ПЗУ: 40 Гб</li>
</ul>
</div>
</div> </div>
</div> </div>
<div class="card"> <div class="distro-variant">
<img src="images/ximpnvd.png" alt=""> <div class="distro-image">
<div class="card-text"> <img src="images/ximpnvd.png" alt="Ximper Linux GNOME NVIDIA">
<h3>Ximper Linux GNOME NVIDIA</h3> </div>
<div class="distro-content">
<h2>Ximper Linux GNOME NVIDIA</h2>
<p>Оптимизирован для видеокарт NVIDIA, этот вариант обеспечивает наилучшую производительность в играх и графических приложениях. Подходит для геймеров и специалистов в области дизайна.</p> <p>Оптимизирован для видеокарт NVIDIA, этот вариант обеспечивает наилучшую производительность в играх и графических приложениях. Подходит для геймеров и специалистов в области дизайна.</p>
<div class="requirements">
<h3>Системные требования</h3>
<ul>
<li><i class="fas fa-microchip"></i> Процессор: 4-ядерный, 64-бит</li>
<li><i class="fas fa-memory"></i> ОЗУ: 8 Гб</li>
<li><i class="fas fa-desktop"></i> Графика: Видеокарта NVIDIA с поддержкой проприетарных драйверов</li>
<li><i class="fas fa-hdd"></i> ПЗУ: 40 Гб (рекомендуется 60+ Гб)</li>
</ul>
</div>
</div> </div>
</div> </div>
<div class="card"> <div class="distro-variant reverse">
<img src="images/ximphnvd.png" alt=""> <div class="distro-image">
<div class="card-text"> <img src="images/ximphnvd.png" alt="Ximper Linux Hyprland NVIDIA">
<h3>Ximper Linux Hyprland NVIDIA</h3> </div>
<div class="distro-content">
<h2>Ximper Linux Hyprland NVIDIA</h2>
<p>Оптимизирован для видеокарт NVIDIA. Обеспечивает быструю работу и высокую эффективность как в играх, так и в ресурсоемких графических приложениях. Идеален для геймеров и дизайнеров, ценящих скорость, стабильность и гибкость.</p> <p>Оптимизирован для видеокарт NVIDIA. Обеспечивает быструю работу и высокую эффективность как в играх, так и в ресурсоемких графических приложениях. Идеален для геймеров и дизайнеров, ценящих скорость, стабильность и гибкость.</p>
<div class="requirements">
<h3>Системные требования</h3>
<ul>
<li><i class="fas fa-microchip"></i> Процессор: 2-ядерный, 64-бит (рекомендуется 4-ядерный)</li>
<li><i class="fas fa-memory"></i> ОЗУ: 4 Гб</li>
<li><i class="fas fa-desktop"></i> Графика: Видеокарта NVIDIA с поддержкой проприетарных драйверов</li>
<li><i class="fas fa-hdd"></i> ПЗУ: 40 Гб (рекомендуется 60+ Гб)</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="download-text-block"> <div class="download-text-block">
<h1>Скачайте Ximper Linux и наслаждайтесь его возможностями!</h1> <h1>Скачайте Ximper Linux и наслаждайтесь его возможностями!</h1>
<a href="downloads.html" class="button">Перейти на страницу загрузок</a> <a href="downloads.html" class="button outline">Перейти на страницу загрузок</a>
</div> </div>
</main> </main>
<footer> <footer>
<div class="footer-left"> <div class="footer-left">
...@@ -189,11 +183,12 @@ ...@@ -189,11 +183,12 @@
</div> </div>
<div class="footer-center"> <div class="footer-center">
<p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</p> <p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</p>
<a href="license.html" id="license-link">Лицензионное соглашение</a>
</div> </div>
<div class="footer-right"> <div class="footer-right">
<a href="https://etersoft.ru"><img src="images/logoteamv2.png" alt="Etersoft" class="logo"></a> <a href="https://etersoft.ru"><img src="images/logoteamv2.png" alt="Etersoft" class="logo"></a>
</div> </div>
</footer> </footer>
<script src="script.js?v=1.3"></script> <script src="script.js?v=1.8"></script>
</body> </body>
</html> </html>
/* -----------------------------------------------
/* Author : Vincent Garreau - vincentgarreau.com
/* MIT license: http://opensource.org/licenses/MIT
/* Demo / Generator : vincentgarreau.com/particles.js
/* GitHub : github.com/VincentGarreau/particles.js
/* How to use? : Check the GitHub README
/* v2.0.0
/* ----------------------------------------------- */
function hexToRgb(e){var a=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;e=e.replace(a,function(e,a,t,i){return a+a+t+t+i+i});var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}function clamp(e,a,t){return Math.min(Math.max(e,a),t)}function isInArray(e,a){return a.indexOf(e)>-1}var pJS=function(e,a){var t=document.querySelector("#"+e+" > .particles-js-canvas-el");this.pJS={canvas:{el:t,w:t.offsetWidth,h:t.offsetHeight},particles:{number:{value:400,density:{enable:!0,value_area:800}},color:{value:"#fff"},shape:{type:"circle",stroke:{width:0,color:"#ff0000"},polygon:{nb_sides:5},image:{src:"",width:100,height:100}},opacity:{value:1,random:!1,anim:{enable:!1,speed:2,opacity_min:0,sync:!1}},size:{value:20,random:!1,anim:{enable:!1,speed:20,size_min:0,sync:!1}},line_linked:{enable:!0,distance:100,color:"#fff",opacity:1,width:1},move:{enable:!0,speed:2,direction:"none",random:!1,straight:!1,out_mode:"out",bounce:!1,attract:{enable:!1,rotateX:3e3,rotateY:3e3}},array:[]},interactivity:{detect_on:"canvas",events:{onhover:{enable:!0,mode:"grab"},onclick:{enable:!0,mode:"push"},resize:!0},modes:{grab:{distance:100,line_linked:{opacity:1}},bubble:{distance:200,size:80,duration:.4},repulse:{distance:200,duration:.4},push:{particles_nb:4},remove:{particles_nb:2}},mouse:{}},retina_detect:!1,fn:{interact:{},modes:{},vendors:{}},tmp:{}};var i=this.pJS;a&&Object.deepExtend(i,a),i.tmp.obj={size_value:i.particles.size.value,size_anim_speed:i.particles.size.anim.speed,move_speed:i.particles.move.speed,line_linked_distance:i.particles.line_linked.distance,line_linked_width:i.particles.line_linked.width,mode_grab_distance:i.interactivity.modes.grab.distance,mode_bubble_distance:i.interactivity.modes.bubble.distance,mode_bubble_size:i.interactivity.modes.bubble.size,mode_repulse_distance:i.interactivity.modes.repulse.distance},i.fn.retinaInit=function(){i.retina_detect&&window.devicePixelRatio>1?(i.canvas.pxratio=window.devicePixelRatio,i.tmp.retina=!0):(i.canvas.pxratio=1,i.tmp.retina=!1),i.canvas.w=i.canvas.el.offsetWidth*i.canvas.pxratio,i.canvas.h=i.canvas.el.offsetHeight*i.canvas.pxratio,i.particles.size.value=i.tmp.obj.size_value*i.canvas.pxratio,i.particles.size.anim.speed=i.tmp.obj.size_anim_speed*i.canvas.pxratio,i.particles.move.speed=i.tmp.obj.move_speed*i.canvas.pxratio,i.particles.line_linked.distance=i.tmp.obj.line_linked_distance*i.canvas.pxratio,i.interactivity.modes.grab.distance=i.tmp.obj.mode_grab_distance*i.canvas.pxratio,i.interactivity.modes.bubble.distance=i.tmp.obj.mode_bubble_distance*i.canvas.pxratio,i.particles.line_linked.width=i.tmp.obj.line_linked_width*i.canvas.pxratio,i.interactivity.modes.bubble.size=i.tmp.obj.mode_bubble_size*i.canvas.pxratio,i.interactivity.modes.repulse.distance=i.tmp.obj.mode_repulse_distance*i.canvas.pxratio},i.fn.canvasInit=function(){i.canvas.ctx=i.canvas.el.getContext("2d")},i.fn.canvasSize=function(){i.canvas.el.width=i.canvas.w,i.canvas.el.height=i.canvas.h,i&&i.interactivity.events.resize&&window.addEventListener("resize",function(){i.canvas.w=i.canvas.el.offsetWidth,i.canvas.h=i.canvas.el.offsetHeight,i.tmp.retina&&(i.canvas.w*=i.canvas.pxratio,i.canvas.h*=i.canvas.pxratio),i.canvas.el.width=i.canvas.w,i.canvas.el.height=i.canvas.h,i.particles.move.enable||(i.fn.particlesEmpty(),i.fn.particlesCreate(),i.fn.particlesDraw(),i.fn.vendors.densityAutoParticles()),i.fn.vendors.densityAutoParticles()})},i.fn.canvasPaint=function(){i.canvas.ctx.fillRect(0,0,i.canvas.w,i.canvas.h)},i.fn.canvasClear=function(){i.canvas.ctx.clearRect(0,0,i.canvas.w,i.canvas.h)},i.fn.particle=function(e,a,t){if(this.radius=(i.particles.size.random?Math.random():1)*i.particles.size.value,i.particles.size.anim.enable&&(this.size_status=!1,this.vs=i.particles.size.anim.speed/100,i.particles.size.anim.sync||(this.vs=this.vs*Math.random())),this.x=t?t.x:Math.random()*i.canvas.w,this.y=t?t.y:Math.random()*i.canvas.h,this.x>i.canvas.w-2*this.radius?this.x=this.x-this.radius:this.x<2*this.radius&&(this.x=this.x+this.radius),this.y>i.canvas.h-2*this.radius?this.y=this.y-this.radius:this.y<2*this.radius&&(this.y=this.y+this.radius),i.particles.move.bounce&&i.fn.vendors.checkOverlap(this,t),this.color={},"object"==typeof e.value)if(e.value instanceof Array){var s=e.value[Math.floor(Math.random()*i.particles.color.value.length)];this.color.rgb=hexToRgb(s)}else void 0!=e.value.r&&void 0!=e.value.g&&void 0!=e.value.b&&(this.color.rgb={r:e.value.r,g:e.value.g,b:e.value.b}),void 0!=e.value.h&&void 0!=e.value.s&&void 0!=e.value.l&&(this.color.hsl={h:e.value.h,s:e.value.s,l:e.value.l});else"random"==e.value?this.color.rgb={r:Math.floor(256*Math.random())+0,g:Math.floor(256*Math.random())+0,b:Math.floor(256*Math.random())+0}:"string"==typeof e.value&&(this.color=e,this.color.rgb=hexToRgb(this.color.value));this.opacity=(i.particles.opacity.random?Math.random():1)*i.particles.opacity.value,i.particles.opacity.anim.enable&&(this.opacity_status=!1,this.vo=i.particles.opacity.anim.speed/100,i.particles.opacity.anim.sync||(this.vo=this.vo*Math.random()));var n={};switch(i.particles.move.direction){case"top":n={x:0,y:-1};break;case"top-right":n={x:.5,y:-.5};break;case"right":n={x:1,y:-0};break;case"bottom-right":n={x:.5,y:.5};break;case"bottom":n={x:0,y:1};break;case"bottom-left":n={x:-.5,y:1};break;case"left":n={x:-1,y:0};break;case"top-left":n={x:-.5,y:-.5};break;default:n={x:0,y:0}}i.particles.move.straight?(this.vx=n.x,this.vy=n.y,i.particles.move.random&&(this.vx=this.vx*Math.random(),this.vy=this.vy*Math.random())):(this.vx=n.x+Math.random()-.5,this.vy=n.y+Math.random()-.5),this.vx_i=this.vx,this.vy_i=this.vy;var r=i.particles.shape.type;if("object"==typeof r){if(r instanceof Array){var c=r[Math.floor(Math.random()*r.length)];this.shape=c}}else this.shape=r;if("image"==this.shape){var o=i.particles.shape;this.img={src:o.image.src,ratio:o.image.width/o.image.height},this.img.ratio||(this.img.ratio=1),"svg"==i.tmp.img_type&&void 0!=i.tmp.source_svg&&(i.fn.vendors.createSvgImg(this),i.tmp.pushing&&(this.img.loaded=!1))}},i.fn.particle.prototype.draw=function(){function e(){i.canvas.ctx.drawImage(r,a.x-t,a.y-t,2*t,2*t/a.img.ratio)}var a=this;if(void 0!=a.radius_bubble)var t=a.radius_bubble;else var t=a.radius;if(void 0!=a.opacity_bubble)var s=a.opacity_bubble;else var s=a.opacity;if(a.color.rgb)var n="rgba("+a.color.rgb.r+","+a.color.rgb.g+","+a.color.rgb.b+","+s+")";else var n="hsla("+a.color.hsl.h+","+a.color.hsl.s+"%,"+a.color.hsl.l+"%,"+s+")";switch(i.canvas.ctx.fillStyle=n,i.canvas.ctx.beginPath(),a.shape){case"circle":i.canvas.ctx.arc(a.x,a.y,t,0,2*Math.PI,!1);break;case"edge":i.canvas.ctx.rect(a.x-t,a.y-t,2*t,2*t);break;case"triangle":i.fn.vendors.drawShape(i.canvas.ctx,a.x-t,a.y+t/1.66,2*t,3,2);break;case"polygon":i.fn.vendors.drawShape(i.canvas.ctx,a.x-t/(i.particles.shape.polygon.nb_sides/3.5),a.y-t/.76,2.66*t/(i.particles.shape.polygon.nb_sides/3),i.particles.shape.polygon.nb_sides,1);break;case"star":i.fn.vendors.drawShape(i.canvas.ctx,a.x-2*t/(i.particles.shape.polygon.nb_sides/4),a.y-t/1.52,2*t*2.66/(i.particles.shape.polygon.nb_sides/3),i.particles.shape.polygon.nb_sides,2);break;case"image":if("svg"==i.tmp.img_type)var r=a.img.obj;else var r=i.tmp.img_obj;r&&e()}i.canvas.ctx.closePath(),i.particles.shape.stroke.width>0&&(i.canvas.ctx.strokeStyle=i.particles.shape.stroke.color,i.canvas.ctx.lineWidth=i.particles.shape.stroke.width,i.canvas.ctx.stroke()),i.canvas.ctx.fill()},i.fn.particlesCreate=function(){for(var e=0;e<i.particles.number.value;e++)i.particles.array.push(new i.fn.particle(i.particles.color,i.particles.opacity.value))},i.fn.particlesUpdate=function(){for(var e=0;e<i.particles.array.length;e++){var a=i.particles.array[e];if(i.particles.move.enable){var t=i.particles.move.speed/2;a.x+=a.vx*t,a.y+=a.vy*t}if(i.particles.opacity.anim.enable&&(1==a.opacity_status?(a.opacity>=i.particles.opacity.value&&(a.opacity_status=!1),a.opacity+=a.vo):(a.opacity<=i.particles.opacity.anim.opacity_min&&(a.opacity_status=!0),a.opacity-=a.vo),a.opacity<0&&(a.opacity=0)),i.particles.size.anim.enable&&(1==a.size_status?(a.radius>=i.particles.size.value&&(a.size_status=!1),a.radius+=a.vs):(a.radius<=i.particles.size.anim.size_min&&(a.size_status=!0),a.radius-=a.vs),a.radius<0&&(a.radius=0)),"bounce"==i.particles.move.out_mode)var s={x_left:a.radius,x_right:i.canvas.w,y_top:a.radius,y_bottom:i.canvas.h};else var s={x_left:-a.radius,x_right:i.canvas.w+a.radius,y_top:-a.radius,y_bottom:i.canvas.h+a.radius};switch(a.x-a.radius>i.canvas.w?(a.x=s.x_left,a.y=Math.random()*i.canvas.h):a.x+a.radius<0&&(a.x=s.x_right,a.y=Math.random()*i.canvas.h),a.y-a.radius>i.canvas.h?(a.y=s.y_top,a.x=Math.random()*i.canvas.w):a.y+a.radius<0&&(a.y=s.y_bottom,a.x=Math.random()*i.canvas.w),i.particles.move.out_mode){case"bounce":a.x+a.radius>i.canvas.w?a.vx=-a.vx:a.x-a.radius<0&&(a.vx=-a.vx),a.y+a.radius>i.canvas.h?a.vy=-a.vy:a.y-a.radius<0&&(a.vy=-a.vy)}if(isInArray("grab",i.interactivity.events.onhover.mode)&&i.fn.modes.grabParticle(a),(isInArray("bubble",i.interactivity.events.onhover.mode)||isInArray("bubble",i.interactivity.events.onclick.mode))&&i.fn.modes.bubbleParticle(a),(isInArray("repulse",i.interactivity.events.onhover.mode)||isInArray("repulse",i.interactivity.events.onclick.mode))&&i.fn.modes.repulseParticle(a),i.particles.line_linked.enable||i.particles.move.attract.enable)for(var n=e+1;n<i.particles.array.length;n++){var r=i.particles.array[n];i.particles.line_linked.enable&&i.fn.interact.linkParticles(a,r),i.particles.move.attract.enable&&i.fn.interact.attractParticles(a,r),i.particles.move.bounce&&i.fn.interact.bounceParticles(a,r)}}},i.fn.particlesDraw=function(){i.canvas.ctx.clearRect(0,0,i.canvas.w,i.canvas.h),i.fn.particlesUpdate();for(var e=0;e<i.particles.array.length;e++){var a=i.particles.array[e];a.draw()}},i.fn.particlesEmpty=function(){i.particles.array=[]},i.fn.particlesRefresh=function(){cancelRequestAnimFrame(i.fn.checkAnimFrame),cancelRequestAnimFrame(i.fn.drawAnimFrame),i.tmp.source_svg=void 0,i.tmp.img_obj=void 0,i.tmp.count_svg=0,i.fn.particlesEmpty(),i.fn.canvasClear(),i.fn.vendors.start()},i.fn.interact.linkParticles=function(e,a){var t=e.x-a.x,s=e.y-a.y,n=Math.sqrt(t*t+s*s);if(n<=i.particles.line_linked.distance){var r=i.particles.line_linked.opacity-n/(1/i.particles.line_linked.opacity)/i.particles.line_linked.distance;if(r>0){var c=i.particles.line_linked.color_rgb_line;i.canvas.ctx.strokeStyle="rgba("+c.r+","+c.g+","+c.b+","+r+")",i.canvas.ctx.lineWidth=i.particles.line_linked.width,i.canvas.ctx.beginPath(),i.canvas.ctx.moveTo(e.x,e.y),i.canvas.ctx.lineTo(a.x,a.y),i.canvas.ctx.stroke(),i.canvas.ctx.closePath()}}},i.fn.interact.attractParticles=function(e,a){var t=e.x-a.x,s=e.y-a.y,n=Math.sqrt(t*t+s*s);if(n<=i.particles.line_linked.distance){var r=t/(1e3*i.particles.move.attract.rotateX),c=s/(1e3*i.particles.move.attract.rotateY);e.vx-=r,e.vy-=c,a.vx+=r,a.vy+=c}},i.fn.interact.bounceParticles=function(e,a){var t=e.x-a.x,i=e.y-a.y,s=Math.sqrt(t*t+i*i),n=e.radius+a.radius;n>=s&&(e.vx=-e.vx,e.vy=-e.vy,a.vx=-a.vx,a.vy=-a.vy)},i.fn.modes.pushParticles=function(e,a){i.tmp.pushing=!0;for(var t=0;e>t;t++)i.particles.array.push(new i.fn.particle(i.particles.color,i.particles.opacity.value,{x:a?a.pos_x:Math.random()*i.canvas.w,y:a?a.pos_y:Math.random()*i.canvas.h})),t==e-1&&(i.particles.move.enable||i.fn.particlesDraw(),i.tmp.pushing=!1)},i.fn.modes.removeParticles=function(e){i.particles.array.splice(0,e),i.particles.move.enable||i.fn.particlesDraw()},i.fn.modes.bubbleParticle=function(e){function a(){e.opacity_bubble=e.opacity,e.radius_bubble=e.radius}function t(a,t,s,n,c){if(a!=t)if(i.tmp.bubble_duration_end){if(void 0!=s){var o=n-p*(n-a)/i.interactivity.modes.bubble.duration,l=a-o;d=a+l,"size"==c&&(e.radius_bubble=d),"opacity"==c&&(e.opacity_bubble=d)}}else if(r<=i.interactivity.modes.bubble.distance){if(void 0!=s)var v=s;else var v=n;if(v!=a){var d=n-p*(n-a)/i.interactivity.modes.bubble.duration;"size"==c&&(e.radius_bubble=d),"opacity"==c&&(e.opacity_bubble=d)}}else"size"==c&&(e.radius_bubble=void 0),"opacity"==c&&(e.opacity_bubble=void 0)}if(i.interactivity.events.onhover.enable&&isInArray("bubble",i.interactivity.events.onhover.mode)){var s=e.x-i.interactivity.mouse.pos_x,n=e.y-i.interactivity.mouse.pos_y,r=Math.sqrt(s*s+n*n),c=1-r/i.interactivity.modes.bubble.distance;if(r<=i.interactivity.modes.bubble.distance){if(c>=0&&"mousemove"==i.interactivity.status){if(i.interactivity.modes.bubble.size!=i.particles.size.value)if(i.interactivity.modes.bubble.size>i.particles.size.value){var o=e.radius+i.interactivity.modes.bubble.size*c;o>=0&&(e.radius_bubble=o)}else{var l=e.radius-i.interactivity.modes.bubble.size,o=e.radius-l*c;o>0?e.radius_bubble=o:e.radius_bubble=0}if(i.interactivity.modes.bubble.opacity!=i.particles.opacity.value)if(i.interactivity.modes.bubble.opacity>i.particles.opacity.value){var v=i.interactivity.modes.bubble.opacity*c;v>e.opacity&&v<=i.interactivity.modes.bubble.opacity&&(e.opacity_bubble=v)}else{var v=e.opacity-(i.particles.opacity.value-i.interactivity.modes.bubble.opacity)*c;v<e.opacity&&v>=i.interactivity.modes.bubble.opacity&&(e.opacity_bubble=v)}}}else a();"mouseleave"==i.interactivity.status&&a()}else if(i.interactivity.events.onclick.enable&&isInArray("bubble",i.interactivity.events.onclick.mode)){if(i.tmp.bubble_clicking){var s=e.x-i.interactivity.mouse.click_pos_x,n=e.y-i.interactivity.mouse.click_pos_y,r=Math.sqrt(s*s+n*n),p=((new Date).getTime()-i.interactivity.mouse.click_time)/1e3;p>i.interactivity.modes.bubble.duration&&(i.tmp.bubble_duration_end=!0),p>2*i.interactivity.modes.bubble.duration&&(i.tmp.bubble_clicking=!1,i.tmp.bubble_duration_end=!1)}i.tmp.bubble_clicking&&(t(i.interactivity.modes.bubble.size,i.particles.size.value,e.radius_bubble,e.radius,"size"),t(i.interactivity.modes.bubble.opacity,i.particles.opacity.value,e.opacity_bubble,e.opacity,"opacity"))}},i.fn.modes.repulseParticle=function(e){function a(){var a=Math.atan2(d,p);if(e.vx=u*Math.cos(a),e.vy=u*Math.sin(a),"bounce"==i.particles.move.out_mode){var t={x:e.x+e.vx,y:e.y+e.vy};t.x+e.radius>i.canvas.w?e.vx=-e.vx:t.x-e.radius<0&&(e.vx=-e.vx),t.y+e.radius>i.canvas.h?e.vy=-e.vy:t.y-e.radius<0&&(e.vy=-e.vy)}}if(i.interactivity.events.onhover.enable&&isInArray("repulse",i.interactivity.events.onhover.mode)&&"mousemove"==i.interactivity.status){var t=e.x-i.interactivity.mouse.pos_x,s=e.y-i.interactivity.mouse.pos_y,n=Math.sqrt(t*t+s*s),r={x:t/n,y:s/n},c=i.interactivity.modes.repulse.distance,o=100,l=clamp(1/c*(-1*Math.pow(n/c,2)+1)*c*o,0,50),v={x:e.x+r.x*l,y:e.y+r.y*l};"bounce"==i.particles.move.out_mode?(v.x-e.radius>0&&v.x+e.radius<i.canvas.w&&(e.x=v.x),v.y-e.radius>0&&v.y+e.radius<i.canvas.h&&(e.y=v.y)):(e.x=v.x,e.y=v.y)}else if(i.interactivity.events.onclick.enable&&isInArray("repulse",i.interactivity.events.onclick.mode))if(i.tmp.repulse_finish||(i.tmp.repulse_count++,i.tmp.repulse_count==i.particles.array.length&&(i.tmp.repulse_finish=!0)),i.tmp.repulse_clicking){var c=Math.pow(i.interactivity.modes.repulse.distance/6,3),p=i.interactivity.mouse.click_pos_x-e.x,d=i.interactivity.mouse.click_pos_y-e.y,m=p*p+d*d,u=-c/m*1;c>=m&&a()}else 0==i.tmp.repulse_clicking&&(e.vx=e.vx_i,e.vy=e.vy_i)},i.fn.modes.grabParticle=function(e){if(i.interactivity.events.onhover.enable&&"mousemove"==i.interactivity.status){var a=e.x-i.interactivity.mouse.pos_x,t=e.y-i.interactivity.mouse.pos_y,s=Math.sqrt(a*a+t*t);if(s<=i.interactivity.modes.grab.distance){var n=i.interactivity.modes.grab.line_linked.opacity-s/(1/i.interactivity.modes.grab.line_linked.opacity)/i.interactivity.modes.grab.distance;if(n>0){var r=i.particles.line_linked.color_rgb_line;i.canvas.ctx.strokeStyle="rgba("+r.r+","+r.g+","+r.b+","+n+")",i.canvas.ctx.lineWidth=i.particles.line_linked.width,i.canvas.ctx.beginPath(),i.canvas.ctx.moveTo(e.x,e.y),i.canvas.ctx.lineTo(i.interactivity.mouse.pos_x,i.interactivity.mouse.pos_y),i.canvas.ctx.stroke(),i.canvas.ctx.closePath()}}}},i.fn.vendors.eventsListeners=function(){"window"==i.interactivity.detect_on?i.interactivity.el=window:i.interactivity.el=i.canvas.el,(i.interactivity.events.onhover.enable||i.interactivity.events.onclick.enable)&&(i.interactivity.el.addEventListener("mousemove",function(e){if(i.interactivity.el==window)var a=e.clientX,t=e.clientY;else var a=e.offsetX||e.clientX,t=e.offsetY||e.clientY;i.interactivity.mouse.pos_x=a,i.interactivity.mouse.pos_y=t,i.tmp.retina&&(i.interactivity.mouse.pos_x*=i.canvas.pxratio,i.interactivity.mouse.pos_y*=i.canvas.pxratio),i.interactivity.status="mousemove"}),i.interactivity.el.addEventListener("mouseleave",function(e){i.interactivity.mouse.pos_x=null,i.interactivity.mouse.pos_y=null,i.interactivity.status="mouseleave"})),i.interactivity.events.onclick.enable&&i.interactivity.el.addEventListener("click",function(){if(i.interactivity.mouse.click_pos_x=i.interactivity.mouse.pos_x,i.interactivity.mouse.click_pos_y=i.interactivity.mouse.pos_y,i.interactivity.mouse.click_time=(new Date).getTime(),i.interactivity.events.onclick.enable)switch(i.interactivity.events.onclick.mode){case"push":i.particles.move.enable?i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb,i.interactivity.mouse):1==i.interactivity.modes.push.particles_nb?i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb,i.interactivity.mouse):i.interactivity.modes.push.particles_nb>1&&i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb);break;case"remove":i.fn.modes.removeParticles(i.interactivity.modes.remove.particles_nb);break;case"bubble":i.tmp.bubble_clicking=!0;break;case"repulse":i.tmp.repulse_clicking=!0,i.tmp.repulse_count=0,i.tmp.repulse_finish=!1,setTimeout(function(){i.tmp.repulse_clicking=!1},1e3*i.interactivity.modes.repulse.duration)}})},i.fn.vendors.densityAutoParticles=function(){if(i.particles.number.density.enable){var e=i.canvas.el.width*i.canvas.el.height/1e3;i.tmp.retina&&(e/=2*i.canvas.pxratio);var a=e*i.particles.number.value/i.particles.number.density.value_area,t=i.particles.array.length-a;0>t?i.fn.modes.pushParticles(Math.abs(t)):i.fn.modes.removeParticles(t)}},i.fn.vendors.checkOverlap=function(e,a){for(var t=0;t<i.particles.array.length;t++){var s=i.particles.array[t],n=e.x-s.x,r=e.y-s.y,c=Math.sqrt(n*n+r*r);c<=e.radius+s.radius&&(e.x=a?a.x:Math.random()*i.canvas.w,e.y=a?a.y:Math.random()*i.canvas.h,i.fn.vendors.checkOverlap(e))}},i.fn.vendors.createSvgImg=function(e){var a=i.tmp.source_svg,t=/#([0-9A-F]{3,6})/gi,s=a.replace(t,function(a,t,i,s){if(e.color.rgb)var n="rgba("+e.color.rgb.r+","+e.color.rgb.g+","+e.color.rgb.b+","+e.opacity+")";else var n="hsla("+e.color.hsl.h+","+e.color.hsl.s+"%,"+e.color.hsl.l+"%,"+e.opacity+")";return n}),n=new Blob([s],{type:"image/svg+xml;charset=utf-8"}),r=window.URL||window.webkitURL||window,c=r.createObjectURL(n),o=new Image;o.addEventListener("load",function(){e.img.obj=o,e.img.loaded=!0,r.revokeObjectURL(c),i.tmp.count_svg++}),o.src=c},i.fn.vendors.destroypJS=function(){cancelAnimationFrame(i.fn.drawAnimFrame),t.remove(),pJSDom=null},i.fn.vendors.drawShape=function(e,a,t,i,s,n){var r=s*n,c=s/n,o=180*(c-2)/c,l=Math.PI-Math.PI*o/180;e.save(),e.beginPath(),e.translate(a,t),e.moveTo(0,0);for(var v=0;r>v;v++)e.lineTo(i,0),e.translate(i,0),e.rotate(l);e.fill(),e.restore()},i.fn.vendors.exportImg=function(){window.open(i.canvas.el.toDataURL("image/png"),"_blank")},i.fn.vendors.loadImg=function(e){if(i.tmp.img_error=void 0,""!=i.particles.shape.image.src)if("svg"==e){var a=new XMLHttpRequest;a.open("GET",i.particles.shape.image.src),a.onreadystatechange=function(e){4==a.readyState&&(200==a.status?(i.tmp.source_svg=e.currentTarget.response,i.fn.vendors.checkBeforeDraw()):(console.log("Error pJS - Image not found"),i.tmp.img_error=!0))},a.send()}else{var t=new Image;t.addEventListener("load",function(){i.tmp.img_obj=t,i.fn.vendors.checkBeforeDraw()}),t.src=i.particles.shape.image.src}else console.log("Error pJS - No image.src"),i.tmp.img_error=!0},i.fn.vendors.draw=function(){"image"==i.particles.shape.type?"svg"==i.tmp.img_type?i.tmp.count_svg>=i.particles.number.value?(i.fn.particlesDraw(),i.particles.move.enable?i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw):cancelRequestAnimFrame(i.fn.drawAnimFrame)):i.tmp.img_error||(i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw)):void 0!=i.tmp.img_obj?(i.fn.particlesDraw(),i.particles.move.enable?i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw):cancelRequestAnimFrame(i.fn.drawAnimFrame)):i.tmp.img_error||(i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw)):(i.fn.particlesDraw(),i.particles.move.enable?i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw):cancelRequestAnimFrame(i.fn.drawAnimFrame))},i.fn.vendors.checkBeforeDraw=function(){"image"==i.particles.shape.type?"svg"==i.tmp.img_type&&void 0==i.tmp.source_svg?i.tmp.checkAnimFrame=requestAnimFrame(check):(cancelRequestAnimFrame(i.tmp.checkAnimFrame),i.tmp.img_error||(i.fn.vendors.init(),i.fn.vendors.draw())):(i.fn.vendors.init(),i.fn.vendors.draw())},i.fn.vendors.init=function(){i.fn.retinaInit(),i.fn.canvasInit(),i.fn.canvasSize(),i.fn.canvasPaint(),i.fn.particlesCreate(),i.fn.vendors.densityAutoParticles(),i.particles.line_linked.color_rgb_line=hexToRgb(i.particles.line_linked.color)},i.fn.vendors.start=function(){isInArray("image",i.particles.shape.type)?(i.tmp.img_type=i.particles.shape.image.src.substr(i.particles.shape.image.src.length-3),i.fn.vendors.loadImg(i.tmp.img_type)):i.fn.vendors.checkBeforeDraw()},i.fn.vendors.eventsListeners(),i.fn.vendors.start()};Object.deepExtend=function(e,a){for(var t in a)a[t]&&a[t].constructor&&a[t].constructor===Object?(e[t]=e[t]||{},arguments.callee(e[t],a[t])):e[t]=a[t];return e},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}(),window.cancelRequestAnimFrame=function(){return window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame||clearTimeout}(),window.pJSDom=[],window.particlesJS=function(e,a){"string"!=typeof e&&(a=e,e="particles-js"),e||(e="particles-js");var t=document.getElementById(e),i="particles-js-canvas-el",s=t.getElementsByClassName(i);if(s.length)for(;s.length>0;)t.removeChild(s[0]);var n=document.createElement("canvas");n.className=i,n.style.width="100%",n.style.height="100%";var r=document.getElementById(e).appendChild(n);null!=r&&pJSDom.push(new pJS(e,a))},window.particlesJS.load=function(e,a,t){var i=new XMLHttpRequest;i.open("GET",a),i.onreadystatechange=function(a){if(4==i.readyState)if(200==i.status){var s=JSON.parse(a.currentTarget.response);window.particlesJS(e,s),t&&t()}else console.log("Error pJS - XMLHttpRequest status: "+i.status),console.log("Error pJS - File config not found")},i.send()};
\ No newline at end of file
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Лицензионное соглашение - Ximper Linux</title>
<link rel="icon" href="images/ximperlinux.svg" type="image/x-icon">
<link rel="stylesheet" href="styles.css?v=1.8">
<link rel="stylesheet" href="libs/webfonts/css/all.min.css">
<script src="libs/jquery-3.6.0.min.js"></script>
<script src="libs/particles.min.js"></script>
</head>
<div class="menu-button">
<i class="fas fa-bars"></i>
</div>
<div class="mobile-menu">
<a href="index.html">Главная</a>
<a href="downloads.html">Загрузки</a>
<a href="news.html">Новости</a>
<a href="https://wiki.ximperlinux.ru">Wiki</a>
</div>
<body>
<header>
<div class="header-left">
<a href="index.html" class="home-link">
<img src="images/ximperlinux.svg" alt="Ximper" class="logo">
<h1>Ximper Linux</h1>
</a>
</div>
<div class="header-center">
<nav class="header-menu">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="downloads.html">Загрузки</a></li>
<li><a href="news.html">Новости</a></li>
<li><a href="https://wiki.ximperlinux.ru">Wiki</a></li>
</ul>
</nav>
</div>
<div class="header-right">
<a href="https://vk.com/ximperlinux" class="social-icon"><i class="fab fa-vk"></i></a>
<a href="https://t.me/ximperlinux" class="social-icon"><i class="fab fa-telegram"></i></a>
</div>
</header>
<main>
<div class="license-container">
<div class="license-content">
<h1>Лицензионный договор</h1>
<h2>на программное обеспечение Ximper Linux 0.9.3 и включенные в него программы для ЭВМ</h2>
<div class="license-section">
<h3>1. Сведения о договоре</h3>
<h4>1.1 Участники договора</h4>
<p>Настоящий лицензионный договор (далее договор) заключается между ООО «ЭТЕРСОФТ», обладателем прав на программное обеспечение
<strong>Ximper Linux 0.9.3</strong>
(далее ДИСТРИБУТИВ), и Вами, владельцем экземпляра ДИСТРИБУТИВА.</p>
<h4>1.2 Предмет договора</h4>
<p>Настоящий договор регулирует права владельца экземпляра ДИСТРИБУТИВА на использование ДИСТРИБУТИВА, а также включенных в состав ДИСТРИБУТИВА отдельных программ для ЭВМ (далее ПРОГРАММЫ) и других результатов интеллектуальной деятельности и средств индивидуализации в объеме, указанном в настоящем договоре.</p>
<h4>1.3 Заключение договора</h4>
<p>В настоящем договоре определены права конечных пользователей и не передаются права на распространение ДИСТРИБУТИВА. Системным интеграторам, дистрибьюторам и OEM-производителям для получения прав на распространение следует обращаться в ООО «ЭТЕРСОФТ» по адресу sales@etersoft.ru для заключения письменного договора.</p>
<p>Настоящий договор является договором присоединения и не требует письменного заключения. Использование ДИСТРИБУТИВА способами, оговоренными в настояном договоре, означает принятие условий настоящего договора и влечет за собой заключение настоящего договора.</p>
</div>
<div class="license-section">
<h3>2. Права владельца экземпляра ДИСТРИБУТИВА</h3>
<h4>2.1 Права на ДИСТРИБУТИВ</h4>
<p>ДИСТРИБУТИВ содержит как свободные, так и несвободные компоненты. На распространение несвободных компонент в составе дистрибутивов ООО «ЭТЕРСОФТ» получены соответствующие разрешения правообладателей. Авторские права на ДИСТРИБУТИВ как составное произведение принадлежат ООО «ЭТЕРСОФТ».</p>
<h4>2.2 Использование свободных программ, включенных в состав ДИСТРИБУТИВА.</h4>
<p>Все СВОБОДНЫЕ ПРОГРАММЫ, включенные в состав ДИСТРИБУТИВА, сопровождаются лицензионными договорами, бессрочно и безвозмездно предоставляющими Вам следующие неисключительные права, действующие на территории любой страны:</p>
<ul>
<li>право эксплуатировать ПРОГРАММЫ (пользоваться экземплярами ПРОГРАММ) на неограниченном количестве компьютеров в любых целях;</li>
<li>право модифицировать ПРОГРАММЫ, а также публиковать и распространять модификации на безвозмездной или возмездной основе (по Вашему усмотрению) на условиях лицензии исходной ПРОГРАММЫ;</li>
<li>право передавать ПРОГРАММЫ третьим лицам на безвозмездной или возмездной основе (по Вашему усмотрению) без каких-либо отчислений владельцам авторских прав;</li>
<li>право беспрепятственно получать и изучать исходные тексты ПРОГРАММ.</li>
</ul>
<p>ООО «ЭТЕРСОФТ» в течение трех лет с начала действия настоящего договора обязуется предоставить исходные тексты любой СВОБОДНОЙ ПРОГРАММЫ, включенной в состав ДИСТРИБУТИВА, по Вашему требованию за плату, не превышающую стоимость физического предоставления исходного текста.</p>
<h4>2.3 Использование несвободных программ, включенных в состав ДИСТРИБУТИВА.</h4>
<p>На все несвободные ПРОГРАММЫ, включенные в состав ДИСТРИБУТИВА, получены разрешения правообладателей на распространение этих ПРОГРАММ в составе ДИСТРИБУТИВА и на использование конечными пользователями.</p>
<h4>2.4 Использование элементов оформления ДИСТРИБУТИВА и текстов на его обложке или коробке</h4>
<p>Права ООО «ЭТЕРСОФТ» на элементы оформления ДИСТРИБУТИВА и тексты на его обложке или коробке охраняются законами об авторском праве, товарных знаках и промышленных образцах. Их использование способами, которые в соответствии с применимым законодательством требуют наличия исключительных прав, возможно только в случае получения письменного согласия ООО «ЭТЕРСОФТ».</p>
<h4>2.5 Иные права</h4>
<p>Право авторства, право на имя и иные личные неимущественные права автора, являющиеся неотчуждаемыми в соответствии с применимым национальным законодательством либо не предоставленные Вам применимым законодательством или лицензионными договорами на отдельные ПРОГРАММЫ, включенные в состав ДИСТРИБУТИВА, сохраняются за их обладателями и не предоставляются владельцу экземпляра ДИСТРИБУТИВА.</p>
<h4>2.6 Отчет об использовании ДИСТРИБУТИВА</h4>
<p>ООО «ЭТЕРСОФТ» не требует от владельца экземпляра ДИСТРИБУТИВА предоставления отчетов об использовании ДИСТРИБУТИВА.</p>
</div>
<div class="license-section">
<h3>3. Ответственность сторон</h3>
<p class="company-info">
<em>ООО «ЭТЕРСОФТ».<br>
г.Санкт-Петербург, вн.тер.г. Муниципальный Округ Лиговка-ямская, ул Черняховского, д. 25, литера А<br>
ИНН 7806152611<br>
<a href="https://etersoft.ru">https://etersoft.ru</a></em>
</p>
</div>
<div class="back-button">
<a href="index.html" class="button outline">Вернуться на главную</a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer-left">
<a href="https://t.me/ximperlinux" class="social-icon"><i class="fab fa-telegram"></i></a>
<a href="https://vk.com/ximperlinux" class="social-icon"><i class="fab fa-vk"></i></a>
</div>
<div class="footer-center">
<p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</p>
<a href="license.html" id="license-link">Лицензионное соглашение</a>
</div>
<div class="footer-right">
<a href="https://etersoft.ru"><img src="images/logoteamv2.png" alt="Etersoft" class="logo"></a>
</div>
</footer>
<script src="script.js?v=1.8"></script>
</body>
</html>
.news-section { .news-section {
padding: 50px 20px; padding: 80px 20px 50px;
background: transparent; background: transparent;
background-size: 400% 400%; min-height: 100vh;
} }
.news-container { .news-container {
max-width: 800px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
.styled-title { .styled-title {
font-size: 48px; font-size: 48px;
margin-bottom: 40px; margin-bottom: 50px;
color: #fff; color: #fff;
background: linear-gradient(45deg, #fff 30%, #b79ced 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 4px rgba(126, 1, 255, 0.3);
position: relative;
display: inline-block;
}
.styled-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(90deg, #7E01FF, #b79ced);
border-radius: 3px;
} }
.news-block { .news-block {
background: var(--bg); background: rgba(11, 14, 29, 0.8);
border: 2px solid var(--border); border: 2px solid var(--border);
border-radius: 15px; border-radius: 15px;
color: #fff; color: #fff;
...@@ -26,44 +44,163 @@ ...@@ -26,44 +44,163 @@
text-align: left; text-align: left;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
opacity: 0;
transform: translateY(20px);
} }
.news-block.visible {
opacity: 1;
transform: translateY(0);
}
.news-content { .news-content {
padding: 20px; padding: 30px;
} }
.news-image { .news-image {
width: 100%; width: 100%;
height: auto; height: auto;
border-radius: 10px 10px 0 0; border-radius: 13px 13px 0 0;
margin-bottom: 0; margin-bottom: 0;
} }
.news-content h3 { .news-content h3 {
font-size: 24px; font-size: 28px;
margin: 20px 0 10px; margin: 25px 0 10px;
background: linear-gradient(45deg, #fff 30%, #b79ced 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.news-date { .news-date {
font-size: 14px; font-size: 14px;
color: #ddd; color: #b79ced;
margin-bottom: 10px; margin-bottom: 20px;
display: block; display: block;
font-style: italic;
}
.news-content p {
line-height: 1.7;
margin-bottom: 18px;
font-size: 16px;
}
.news-content b {
color: #b79ced;
font-weight: 600;
}
/* Стили для ссылок в новостях */
.news-content a {
color: #b79ced;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
font-weight: 500;
padding: 0 2px;
}
.news-content a:hover {
color: #fff;
text-decoration: none;
background: rgba(126, 1, 255, 0.2);
border-radius: 3px;
}
.news-content a::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: -2px;
left: 0;
background: linear-gradient(90deg, #7E01FF, #b79ced);
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s ease;
}
.news-content a:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
/* Стили для видео */
.news-content iframe {
border-radius: 10px;
margin: 20px 0;
border: 2px solid var(--border);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Стили для списков в новостях */
.news-content ul {
margin: 15px 0;
padding-left: 20px;
} }
/* Медиа-запросы для блоков новостей для мобильных устройств */ .news-content li {
margin-bottom: 10px;
line-height: 1.5;
}
/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) { @media (max-width: 768px) {
.news-section {
padding: 70px 15px 30px;
}
.styled-title {
font-size: 36px;
margin-bottom: 40px;
}
.news-block { .news-block {
padding: 10px; padding: 0;
margin-bottom: 40px;
}
.news-content {
padding: 20px;
} }
.news-date { .news-date {
font-size: 12px; font-size: 12px;
top: 10px;
left: 10px;
} }
.news-image { .news-content h3 {
margin-bottom: 10px; font-size: 22px;
}
.news-content p {
font-size: 15px;
line-height: 1.6;
}
.news-content iframe {
height: 250px;
}
}
@media (max-width: 480px) {
.styled-title {
font-size: 28px;
}
.news-content h3 {
font-size: 20px;
}
.news-content {
padding: 15px;
}
.news-content iframe {
height: 200px;
} }
} }
...@@ -3,23 +3,24 @@ ...@@ -3,23 +3,24 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Новости</title> <title>Новости - Ximper Linux</title>
<link rel="icon" href="images/ximperlinux.svg" type="image/x-icon"> <link rel="icon" href="images/ximperlinux.svg" type="image/x-icon">
<link rel="stylesheet" href="news.css?v=1.3"> <link rel="stylesheet" href="news.css?v=1.8">
<link rel="stylesheet" href="styles.css?v=1.3"> <link rel="stylesheet" href="styles.css?v=1.8">
<link rel="stylesheet" href="libs/webfonts/css/all.min.css"> <link rel="stylesheet" href="libs/webfonts/css/all.min.css">
<script src="libs/jquery-3.6.0.min.js"></script> <script src="libs/jquery-3.6.0.min.js"></script>
</head> </head>
<div class="menu-button">
<i class="fas fa-bars"></i>
</div>
<div class="mobile-menu">
<a href="index.html">Главная</a>
<a href="downloads.html">Загрузки</a>
<a href="#">Новости</a>
<a href="https://wiki.ximperlinux.ru">Wiki</a>
</div>
<body> <body>
<div class="menu-button">
<i class="fas fa-bars"></i>
</div>
<div class="mobile-menu">
<a href="index.html">Главная</a>
<a href="downloads.html">Загрузки</a>
<a href="#">Новости</a>
<a href="https://wiki.ximperlinux.ru">Wiki</a>
</div>
<header> <header>
<div class="header-left"> <div class="header-left">
<a href="index.html" class="home-link"> <a href="index.html" class="home-link">
...@@ -42,249 +43,204 @@ ...@@ -42,249 +43,204 @@
<a href="https://t.me/ximperlinux" class="social-icon"><i class="fab fa-telegram"></i></a> <a href="https://t.me/ximperlinux" class="social-icon"><i class="fab fa-telegram"></i></a>
</div> </div>
</header> </header>
<main> <main>
<section class="news-section"> <section class="news-section">
<div class="news-container"> <div class="news-container">
<h2 class="styled-title">Новости Ximper Linux</h2> <h2 class="styled-title">Новости Ximper Linux</h2>
<div class="news-block"> <div class="news-block">
<div class="news-content"> <div class="news-content">
<img src="images/news/ximperrelease093.jpg" alt="" class="news-image"> <img src="images/news/ximperrelease093.jpg" alt="Релиз XimperLinux 0.9.3" class="news-image">
<h3>Релиз XimperLinux 0.9.3</h3> <h3>Релиз XimperLinux 0.9.3</h3>
<span class="news-date">20 февраля 2025 года</span> <span class="news-date">20 февраля 2025 года</span>
<p><b>Только вперёд!</b></br> <p><b>Только вперёд!</b></p>
</br> <p>Дорогие друзья! Прошёл почти месяц с момента анонса rc2-сборки, и сегодня мы готовы предоставить вам итоговый вариант Ximper Linux 0.9.3!</p>
Дорогие друзья! Прошёл почти месяц с момента анонса rc2-сборки, и сегодня мы готовы предоставить вам итоговый вариант Ximper Linux 0.9.3!</br> <p>➡️ Образы доступны на нашем сайте!</p>
</br> <p>Давайте кратко пройдёмся по основным обновлениям!</p>
➡️ Образы доступны на нашем сайте!</br> <p>🌐 <b>Репозиторий Ximper:</b><br>
</br> Репозиторий переехал и теперь подписывается GPG-ключом. В новых сборках он уже предустановлен.</p>
Давайте кратко пройдёмся по основным обновлениям!</br> <p>Если вы обновляетесь с предыдущей версии, может понадобиться выполнить обновление дважды, чтобы изменения репозитория применились корректно.</p>
</br> <p><b>Обновлённое ядро и окружение:</b><br>
🌐 <b>Репозиторий Ximper:</b></br> - Ядро обновлено до версии <b>6.12.</b><br>
Репозиторий переехал и теперь подписывается GPG-ключом. В новых сборках он уже предустановлен.</br> - GNOME обновлён до верции <b>47.3.</b></p>
Если вы обновляетесь с предыдущей версии, может понадобиться выполнить обновление дважды, чтобы изменения репозитория применились корректно.</br> <p><b>Новые фишки в Neofetch:</b><br>
<b>Обновлённое ядро и окружение:</b></br> - Добавлен логотип Ximper.<br>
- Ядро обновлено до версии <b>6.12.</b></br> - Теперь учитываются пакеты, установленные через cargo.</p>
- GNOME обновлён до версии <b>47.3.</b></br> <p>🖥 <b>Руководство в один клик!</b><br>
</br> В меню приложений появился значок <b>«Руководство»</b>, который ведёт на Ximper Wiki. Теперь найти нужную информацию стало ещё проще!</p>
<b>Новые фишки в Neofetch:</b></br> <p>🎮 <b>Новые утилиты:</b><br>
- Добавлен логотип Ximper.</br> <b>ximper-unified-theme-switcher</b><br>
- Теперь учитываются пакеты, установленные через cargo.</br> Утилита на GTK4 и сервис, которые автоматически переключают светлую и тёмную темы для приложений на <b>Qt, GTK3 и GTK4.</b> Сервис отслеживает изменения и синхронизирует их для всех приложений.</p>
<p><b>eepm-play-gui</b><br>
🖥 <b>Руководство в один клик!</b></br> Графический интерфейс для <b>epm play,</b> написанный на GTK4. Теперь он предустановлен в системе.</p>
В меню приложений появился значок <b>«Руководство»</b>, который ведёт на Ximper Wiki. Теперь найти нужную информацию стало ещё проще!</br> <p>⬇️ <b>Обновления в установщике:</b><br>
Переработаны группы программ, теперь всё рассортировано по категориям. Также, добавлено несколько новых приложений.</p>
🎮 <b>Новые утилиты:</b></br> <p>⚠️ <b>Исправление!</b><br>
<b>ximper-unified-theme-switcher</b></br> Обновление GNOME сломало работу VPN OpenConnect у некоторых пользователей. Добавлен <b>NetworkManager-openconnect-gtk4</b> для исправления этой проблемы.</p>
Утилита на GTK4 и сервис, которые автоматически переключают светлую и тёмную темы для приложений на <b>Qt, GTK3 и GTK4.</b> Сервис отслеживает изменения и синхронизирует их для всех приложений.</br> <p>🐧 <b>Новые сборки с Hyprland!</b><br>
</br> Мы подготовили для вас <b>дополнительные образы дистрибутива</b> с оконным менеджером <b>Hyprland</b> (основные образы по-прежнему идут с GNOME). Если вы любите экспериментировать с окружениями, эта сборка для вас!</p>
<b>eepm-play-gui</b></br> <p>⚙️ <b>Как обновиться?</b><br>
Графический интерфейс для <b>epm play,</b> написанный на GTK4. Теперь он предустановлен в системе.</br> Если вы уже используете Ximper Linux, выполните данную команду:<br>
</br> $ epm full-upgrade</p>
⬇️ <b>Обновления в установщике:</b></br> <p>Не забудьте, что из-за изменений в дополнительном репозитории необходимо выполнить обновление <b>дважды.</b></p>
Переработаны группы программ, теперь всё рассортировано по категориям. Также, добавлено несколько новых приложений.</br> <p>💬 Мы продолжаем двигаться только вперёд, и ваша поддержка вдохновляет нас на новые свершения! Скачивайте новую версию, пробуйте, делитесь впечатлениями и предлагайте идеи для будущих обновлений.</p>
</br> <p>✌️ Напоминаем, что предложить улучшение или уведомить нас об ошибке в дистрибутиве можно на нашем <a href="https://github.com/Etersoft/XimperLinux/issues/new/choose">github</a></p>
⚠️ <b>Исправление!</b></br>
Обновление GNOME сломало работу VPN OpenConnect у некоторых пользователей. Добавлен <b>NetworkManager-openconnect-gtk4</b> для исправления этой проблемы.</br>
</br>
🐧 <b>Новые сборки с Hyprland!</b></br>
Мы подготовили для вас <b>дополнительные образы дистрибутива</b> с оконным менеджером <b>Hyprland</b> (основные образы по-прежнему идут с GNOME). Если вы любите экспериментировать с окружениями, эта сборка для вас!</br>
</br>
⚙️ <b>Как обновиться?</b></br>
Если вы уже используете Ximper Linux, выполните данную команду:</br>
$ epm full-upgrade</br>
</br>
Не забудьте, что из-за изменений в дополнительном репозитории необходимо выполнить обновление <b>дважды.</b></br>
</br>
💬 Мы продолжаем двигаться только вперёд, и ваша поддержка вдохновляет нас на новые свершения! Скачивайте новую версию, пробуйте, делитесь впечатлениями и предлагайте идеи для будущих обновлений.</br>
</br>
✌️ Напоминаем, что предложить улучшение или уведомить нас об ошибке в дистрибутиве можно на нашем <a href="https://github.com/Etersoft/XimperLinux/issues/new/choose">github</a></br>
</div> </div>
</div> </div>
<div class="news-block"> <div class="news-block">
<div class="news-content"> <div class="news-content">
<img src="images/news/release092.png" alt="" class="news-image"> <img src="images/news/release092.png" alt="Релиз XimperLinux 0.9.2" class="news-image">
<h3>Релиз XimperLinux 0.9.2</h3> <h3>Релиз XimperLinux 0.9.2</h3>
<span class="news-date">7 июня 2024 года</span> <span class="news-date">7 июня 2024 года</span>
<p>Дистрибутив версии 0.9.2 вышел в свет и доступен на сайте!</br> <p>Дистрибутив версии 0.9.2 вышел в свет и доступен на сайте!</p>
</br> <p>1. Обновление пакетной базы образа.<br>
1. Обновление пакетной базы образа. </br> Ядро 6.6.32 un-def<br>
Ядро 6.6.32 un-def</br> Mesa 24.0.8<br>
Mesa 24.0.8</br> И другие обновления…<br>
И другие обновления…</br> Спасибо ALT Team за их труд!</p>
Спасибо ALT Team за их труд!</br> <p>2. Добавлены российские коренные сертификаты.<br>
</br> $ epmi ca-certificates-digital.gov.ru</p>
2. Добавлены российские коренные сертификаты.</br> <p>3. Добавлена поддержка миниатюр разных форматов файлов таких как:<br>
$ epmi ca-certificates-digital.gov.ru</br> exe (к сожалению не все), RAW, AppImage и видеофайлов.</p>
</br> <p>4. Установщик пакетов epmgpi теперь входит в поставку дистрибутива.<br>
3. Добавлена поддержка миниатюр разных форматов файлов таких как:</br> $ epmi epmgpi</p>
exe (к сожалению не все), RAW, AppImage и видеофайлов.</br> <p>5. В меню ПКМ добавлена возможность создания некоторых типов файлов (.odt .odg .odp .ods)</p>
</br> <p>6. Был встроен пак пакетов ximper-metapackages, для сохранения аутентичности вашего Ximper Linux.<br>
4. Установщик пакетов epmgpi теперь входит в поставку дистрибутива.</br> $ epmi ximper-metapackage-base ximper-metapackage-base-gnome ximper-metapackage-base-gnome-apps</p>
$ epmi epmgpi</br> <p>----<br>
</br> Исправления:</p>
5. В меню ПКМ добавлена возможность создания некоторых типов файлов (.odt .odg .odp .ods)</br> <p>1. У некоторых пользователей ноутбуков с видеокартами нвидиа появлялся второй фантомный монитор. Фикс этой ошибки снова работает.</p>
6. Был встроен пак пакетов ximper-metapackages, для сохранения аутентичности вашего Ximper Linux.</br> <p>Все изменения детально можно посмотреть тут:<br>
$ epmi ximper-metapackage-base ximper-metapackage-base-gnome ximper-metapackage-base-gnome-apps</br> <a href="https://gitlab.eterfund.ru/ximper/mkimage-profiles/">mkimage-profiles</a><br>
</br> <a href="https://gitlab.eterfund.ru/ximper/branding-etersoft-ximper/">branding-etersoft-ximper</a></p>
----</br> <p>Напоминаем, что предложить улучшение или уведомить нас об ошибке в дистрибутиве можно на нашем <a href="https://github.com/Etersoft/XimperLinux/issues/new/choose">github</a></p>
Исправления:</br>
</br>
1. У некоторых пользователей ноутбуков с видеокартами нвидиа появлялся второй фантомный монитор. Фикс этой ошибки снова работает.</br>
</br>
Все изменения детально можно посмотреть тут:</br>
<a href="https://gitlab.eterfund.ru/ximper/mkimage-profiles/">mkimage-profiles</a></br>
<a href="https://gitlab.eterfund.ru/ximper/branding-etersoft-ximper/">branding-etersoft-ximper</a></br>
</br>
Напоминаем, что предложить улучшение или уведомить нас об ошибке в дистрибутиве можно на нашем <a href="https://github.com/Etersoft/XimperLinux/issues/new/choose">github</a>
</div> </div>
</div> </div>
<div class="news-block"> <div class="news-block">
<div class="news-content"> <div class="news-content">
<img src="images/news/release091.jpg" alt="" class="news-image"> <img src="images/news/release091.jpg" alt="Релиз XimperLinux 0.9.1" class="news-image">
<h3>Дистрибутив версии 0.9.1 вышел в свет и доступен на сайте!</h3> <h3>Дистрибутив версии 0.9.1 вышел в свет и доступен на сайте!</h3>
<span class="news-date">20 февраля 2024 года</span> <span class="news-date">20 февраля 2024 года</span>
<p>1. Обновлена пакетная база дистрибутива:</br> <p>1. Обновлена пакетная база дистрибутива:<br>
Ядро 6.6.17 un-def и std-def 6.1.78</br> Ядро 6.6.17 un-def и std-def 6.1.78<br>
Mesa 24.0.1</br> Mesa 24.0.1<br>
И другие обновления…</br> И другие обновления…<br>
Спасибо ALT Team за их труд!</br> Спасибо ALT Team за их труд!</p>
</br> <p>2. Яндекс браузер теперь по-умолчанию! (Вы всё еще можете выбрать другой браузер во время установки)</p>
2. Яндекс браузер теперь по-умолчанию! (Вы всё еще можете выбрать другой браузер во время установки)</br> <p>3. В контекстное меню добавлены пункты безвозвратного удаления и создания символических ссылок.</p>
</br> <p>4. В выбор софта во время установки добавлено:<br>
3. В контекстное меню добавлены пункты безвозвратного удаления и создания символических ссылок.</br> • Редактор разделов gparted<br>
</br> $ epmi gparted<br>
4. В выбор софта во время установки добавлено:</br> • ASUSctl ROG GUI утилита, позволяющая управлять многими аспектами различных ноутбуков ASUS<br>
<li>Редактор разделов gparted</br> $ epmi asusctl asusctl-rog-gui && sudo systemctl enable --now asusd</p>
$ epmi gparted</li></br> <p>----<br>
Исправления:</p>
<p>1. Теперь миниатюры изображений форматов webp и электронных книг отображаются в файловом менеджере.<br>
$ epmi libwebp-pixbuf-loader<br>
$ epmi mate-document-viewer-thumbnailer</p>
<p>2. У некоторых пользователей ноутбуков с видеокартами нвидиа появлялся второй фантомный монитор. Это было исправлено.</p>
<p>3. Добавлен пакет firmware-alsa-sof для исправления звука на некоторых ноутбуках.</p>
<p>4. Возвращен cups для работы принтеров.<br>
$ epmi cups && sudo systemctl enable --now cups</p>
<p>5. Временно (или нет) задействован дисплейный менеджер LightDM, как фикс ввода логина на экране входа.<br>
Ждем ваших отзывов по этому поводу!</p>
<p>---</p>
<p>Все изменения детально можно посмотреть тут:<br>
<a href="https://gitlab.eterfund.ru/ximper/mkimage-profiles/">mkimage-profiles</a><br>
<a href="https://gitlab.eterfund.ru/ximper/branding-etersoft-ximper/">branding-etersoft-ximper</a></p>
</div>
</div>
<li>ASUSctl ROG GUI утилита, позволяющая управлять многими аспектами различных ноутбуков ASUS</br> <div class="news-block">
$ epmi asusctl asusctl-rog-gui && sudo systemctl enable --now asusd</li></br> <div class="news-content">
</br> <img src="images/news/announce091.jpg" alt="Анонс релиза XimperLinux 0.9.1" class="news-image">
----</br> <h3>Анонс релиза XimperLinux 0.9.1</h3>
Исправления:</br> <span class="news-date">5 февраля 2024 года</span>
</br> <p>Анонсируем Ximper Linux 0.9.1!<br>
1. Теперь миниатюры изображений форматов webp и электронных книг отображаются в файловом менеджере.</br> Релиз запланирован на 20 февраля!</p>
$ epmi libwebp-pixbuf-loader</br> <p>Что точно будет в новом релизе?</p>
$ epmi mate-document-viewer-thumbnailer</br> <p>1. Обновление пакетной базы образа (новое ядро и другие пакеты).</p>
</br> <p>2. Яндекс браузер теперь по-умолчанию! (Вы всё еще можете выбрать другой браузер во время установки)</p>
2. У некоторых пользователей ноутбуков с видеокартами нвидиа появлялся второй фантомный монитор. Это было исправлено.</br> <p>3. В контекстное меню добавлены пункты безвозвратного удаления и создания символических ссылок.</p>
</br> <p>----<br>
3. Добавлен пакет firmware-alsa-sof для исправления звука на некоторых ноутбуках.</br> Исправления:</p>
</br> <p>1. Теперь миниатюры файлов webp отображаются в файловом менеджере.<br>
4. Возвращен cups для работы принтеров.</br> $ epmi libwebp-pixbuf-loader</p>
$ epmi cups && sudo systemctl enable --now cups</br> <p>2. У некоторых пользователей ноутбуков с видеокартами нвидиа появлялся второй фантомный монитор. Это было исправлено.</p>
</br> <p>3. Добавлен пакет firmware-alsa-sof для исправления звука на некоторых ноутбуках.</p>
5. Временно (или нет) задействован дисплейный менеджер LightDM, как фикс ввода логина на экране входа.</br> <p>-----<br>
Ждем ваших отзывов по этому поводу!</br> Под вопросом:<br>
</br> Переход на lightdm во избежание ввода имени пользователя при входе в систему.<br>
---</br> <a href="https://bugzilla.altlinux.org/48825">Bug #48825</a><br>
</br> <a href="https://bugzilla.altlinux.org/47499">Bug #47499</a></p>
Все изменения детально можно посмотреть тут:</br> </div>
<a href="https://gitlab.eterfund.ru/ximper/mkimage-profiles/">mkimage-profiles</a></br> </div>
<a href="https://gitlab.eterfund.ru/ximper/branding-etersoft-ximper/">branding-etersoft-ximper</a></br>
</div>
</div>
<div class="news-block">
<div class="news-content">
<img src="images/news/announce091.jpg" alt="" class="news-image">
<h3>Анонс релиза XimperLinux 0.9.1</h3>
<span class="news-date">5 февраля 2024 года</span>
<p>Анонсируем Ximper Linux 0.9.1!</br>
Релиз запланирован на 20 февраля!</br>
</br>
Что точно будет в новом релизе?</br>
1. Обновление пакетной базы образа (новое ядро и другие пакеты).</br> <div class="news-block">
2. Яндекс браузер теперь по-умолчанию! (Вы всё еще можете выбрать другой браузер во время установки)</br> <div class="news-content">
3. В контекстное меню добавлены пункты безвозвратного удаления и создания символических ссылок.</br> <img src="images/news/foundbug.jpg" alt="Сообщение об ошибках" class="news-image">
</br> <h3>Нашли баг и не знаете, что с этим делать? Есть решение!</h3>
----</br> <span class="news-date">14 декабря 2023 года</span>
Исправления:</br> <p>Нашли баг или ваша проблема затерялась в чате?
Сообщите о проблеме через репозиторий проекта на Github!</p>
<p><a href="https://github.com/Etersoft/XimperLinux/issues/new/choose">https://github.com/Etersoft/XimperLinux/</a></p>
<p>Создайте предложение по улучшению или баг-репорт по предложенным шаблонам, чтобы разработчики дистрибутива точно ничего не упустили!</p>
</div>
</div>
1. Теперь миниатюры файлов webp отображаются в файловом менеджере.</br> <div class="news-block">
$ epmi libwebp-pixbuf-loader</br> <div class="news-content">
2. У некоторых пользователей ноутбуков с видеокартами нвидиа появлялся второй фантомный монитор. Это было исправлено.</br> <iframe width="100%" height="315" src="https://www.youtube.com/embed/tmYotj0QzEw?si=I5sFpBvpzS4tp509" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
3. Добавлен пакет firmware-alsa-sof для исправления звука на некоторых ноутбуках.</br> <h3>Обзор Ximper Linux 0.9 от Обычного Пользователя</h3>
</br> <span class="news-date">28 октября 2023 года</span>
-----</br> <p>Ximper linux(ALT linux sisyphus) 0.9 - поддержка nvidia из коробки и ещё много чего по мелочи:</p>
Под вопросом:</br> <p><a href="https://dzen.ru/video/watch/653d40376a06345c86362e38">Дзен</a><br>
Переход на lightdm во избежание ввода имени пользователя при входе в систему.</br> <a href="https://vk.com/video-211872434_456239215">ВК</a><br>
<a href="https://bugzilla.altlinux.org/48825">Bug #48825</a></br> <a href="https://rutube.ru/video/private/47397795730f4d9c2dc9d97ddc8873b9/?p=rM0oEJ1Da8JzvT7fzuDw9w">Рутуб</a><br>
<a href ="https://bugzilla.altlinux.org/47499">Bug #47499</a></br> <a href="https://youtu.be/tmYotj0QzEw">Ютуб</a></p>
</div> </div>
</div> </div>
<div class="news-block">
<div class="news-content">
<img src="images/news/foundbug.jpg" alt="" class="news-image">
<h3>Нашли баг и не знаете, что с этим делать? Есть решение!</h3>
<span class="news-date">14 декабря 2023 года</span>
<p>Нашли баг или ваша проблема затерялась в чате?
Сообщите о проблеме через репозиторий проекта на Github!</br>
</br>
<a href="https://github.com/Etersoft/XimperLinux/issues/new/choose">https://github.com/Etersoft/XimperLinux/</a></br>
</br>
Создайте предложение по улучшению или баг-репорт по предложенным шаблонам, чтобы разработчики дистрибутива точно ничего не упустили!</p>
</div>
</div>
<div class="news-block">
<div class="news-content">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/tmYotj0QzEw?si=I5sFpBvpzS4tp509" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h3>Обзор Ximper Linux 0.9 от Обычного Пользователя</h3>
<span class="news-date">28 октября 2023 года</span>
<p>Ximper linux(ALT linux sisyphus) 0.9 - поддержка nvidia из коробки и ещё много чего по мелочи:</br>
<a href="https://dzen.ru/video/watch/653d40376a06345c86362e38">Дзен</a></br>
<a href="https://vk.com/video-211872434_456239215">ВК</a></br>
<a href="https://rutube.ru/video/private/47397795730f4d9c2dc9d97ddc8873b9/?p=rM0oEJ1Da8JzvT7fzuDw9w">Рутуб</a></br>
<a href="https://youtu.be/tmYotj0QzEw">Ютуб</a></br>
</div>
</div>
<div class="news-block">
<div class="news-content">
<img src="images/news/release09.jpg" alt="News Image 3" class="news-image">
<h3>Дистрибутив версии 0.9 вышел в свет и доступен на сайте!</h3>
<span class="news-date">27 октября 2023 года</span>
<p>Теперь у нас есть образ с драйверами NVIDIA! </br>Спасибо @Toxblh за реализацию и тестирование.</br>
Общие изменения:</br> <div class="news-block">
</br> <div class="news-content">
1. Обновлена пакетная база дистрибутива:</br> <img src="images/news/release09.jpg" alt="Релиз XimperLinux 0.9" class="news-image">
Ядро 6.5.9 un-def</br> <h3>Дистрибутив версии 0.9 вышел в свет и доступен на сайте!</h3>
Mesa 23.2.1</br> <span class="news-date">27 октября 2023 года</span>
И другие обновления…</br> <p>Теперь у нас есть образ с драйверами NVIDIA! <br>Спасибо @Toxblh за реализацию и тестирование.</p>
Спасибо ALT Team за их труд!</br> <p>Общие изменения:</p>
</br> <p>1. Обновлена пакетная база дистрибутива:<br>
2. Дефолтный терминал заменен на GNOME Console.</br> Ядро 6.5.9 un-def<br>
$ epmi gnome-console</br> Mesa 23.2.1<br>
</br> И другие обновления…<br>
3. Некоторые настройки dash-to-dock удалены. Это помогло решить проблему с большими индикаторами уведомлений.</br> Спасибо ALT Team за их труд!</p>
</br> <p>2. Дефолтный терминал заменен на GNOME Console.<br>
4. Добавлены группы:</br> $ epmi gnome-console</p>
Fragments (GTK4 битторрент-клиент). По-умолчанию галочка с ним активна.</br> <p>3. Некоторые настройки dash-to-dock удалены. Это помогло решить проблему с большими индикаторами уведомлений.</p>
$ epmi fragments</br> <p>4. Добавлены группы:<br>
</br> Fragments (GTK4 битторрент-клиент). По-умолчанию галочка с ним активна.<br>
Geany IDE:</br> $ epmi fragments<br>
$ epmi geany geany-plugins geany-themes</br> Geany IDE:<br>
Аудиоплеер Amberol:</br> $ epmi geany geany-plugins geany-themes<br>
$ epmi amberol</br> Аудиоплеер Amberol:<br>
</br> $ epmi amberol</p>
5. Добавлен system-monitoring-center (Многофункциональный системный монитор)</br> <p>5. Добавлен system-monitoring-center (Многофункциональный системный монитор)<br>
$ epmi system-monitoring-center</br> $ epmi system-monitoring-center</p>
</br> <p>6. Вместе с установкой Timeshift теперь устанавливается пакет grub-btrfs, позволяющий запускаться в снимки системы.<br>
6. Вместе с установкой Timeshift теперь устанавливается пакет grub-btrfs, позволяющий запускаться в снимки системы.</br> $ epmi grub-btrfs</p>
$ epmi grub-btrfs</br> <p>7. Удалены программы «Пакеты» и «Обновление пакетов».</p>
</br> <p>8. Удалена возможность установки системы из live режима. (Возможно, временно).</p>
7. Удалены программы «Пакеты» и «Обновление пакетов».</br> <p>Все изменения детально можно посмотреть тут:<br>
</br> <a href="https://gitlab.eterfund.ru/ximper/mkimage-profiles/">mkimage-profiles</a><br>
8. Удалена возможность установки системы из live режима. (Возможно, временно).</br> <a href="https://gitlab.eterfund.ru/ximper/branding-etersoft-ximper/">branding-etersoft-ximper</a></p>
</br> </div>
Все изменения детально можно посмотреть тут:</br> </div>
<a href="https://gitlab.eterfund.ru/ximper/mkimage-profiles/">mkimage-profiles</a></br>
<a href="https://gitlab.eterfund.ru/ximper/branding-etersoft-ximper/">branding-etersoft-ximper</a></p></br>
</div>
</div>
</div> </div>
</section> </section>
</main> </main>
<footer> <footer>
<div class="footer-left"> <div class="footer-left">
<a href="https://t.me/ximperlinux" class="social-icon"><i class="fab fa-telegram"></i></a> <a href="https://t.me/ximperlinux" class="social-icon"><i class="fab fa-telegram"></i></a>
...@@ -292,11 +248,13 @@ $ epmi grub-btrfs</br> ...@@ -292,11 +248,13 @@ $ epmi grub-btrfs</br>
</div> </div>
<div class="footer-center"> <div class="footer-center">
<p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</p> <p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</p>
<a href="license.html" id="license-link">Лицензионное соглашение</a>
</div> </div>
<div class="footer-right"> <div class="footer-right">
<a href="https://etersoft.ru"><img src="images/logoteamv2.png" alt="Etersoft" class="logo"></a> <a href="https://etersoft.ru"><img src="images/logoteamv2.png" alt="Etersoft" class="logo"></a>
</div> </div>
</footer> </footer>
<script src="script.js?v=1.3"></script>
<script src="script.js?v=1.8"></script>
</body> </body>
</html> </html>
$(document).ready(function(){ $(document).ready(function() {
// Обработчик кнопки "Узнать больше" $('#next-section').click(function() {
$('#next-section').click(function(){ const target = $('#blocks-text');
// Плавная прокрутка к следующему блоку const windowHeight = $(window).height();
const offset = target.offset().top - (windowHeight * 0.1); // Смещение на 10% вверх
$('html, body').animate({ $('html, body').animate({
scrollTop: $('#blocks-text').offset().top scrollTop: offset
}, 1500); //Время в секундах (можно поигарться) }, 1500);
}); });
}); });
// Ждем загрузки DOM // Инициализация Particles.js
document.addEventListener("DOMContentLoaded", function () { document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector(".circle-container"); // Инициализируем частицы только в блоке hero-section
const circles = Array.from(document.querySelectorAll(".circle")); particlesJS('particles-js', {
particles: {
// Для каждого шарика создаём объект с физическими данными: number: {
// Скорость будет постоянной, а направление определяется случайно value: 80,
const constantSpeed = 100; // px/с density: {
let circlesData = circles.map(el => { enable: true,
const style = window.getComputedStyle(el); value_area: 800
let x = parseFloat(style.left); }
let y = parseFloat(style.top); },
let radius = el.offsetWidth / 2; color: {
// Случайное направление value: "#ffffff"
const angle = Math.random() * 2 * Math.PI; },
let vx = Math.cos(angle) * constantSpeed; shape: {
let vy = Math.sin(angle) * constantSpeed; type: "circle",
// прозрачность stroke: {
el.style.opacity = 0.35; width: 0,
return { el, x, y, vx, vy, radius }; color: "#000000"
}); }
},
let lastTime = performance.now(); opacity: {
value: 0.5,
function animate(time) { random: false,
const dt = (time - lastTime) / 1000; // время в секундах anim: {
lastTime = time; enable: false,
const containerWidth = container.clientWidth; speed: 1,
const containerHeight = container.clientHeight; opacity_min: 0.1,
sync: false
circlesData.forEach(circle => { }
// Обновляем координаты с постоянной скоростью },
circle.x += circle.vx * dt; size: {
circle.y += circle.vy * dt; value: 3,
random: true,
// Столкновение с левой/правой границей – отражение по оси X anim: {
if (circle.x < 0) { enable: false,
circle.x = 0; speed: 40,
circle.vx = Math.abs(circle.vx); size_min: 0.1,
} else if (circle.x + circle.el.offsetWidth > containerWidth) { sync: false
circle.x = containerWidth - circle.el.offsetWidth; }
circle.vx = -Math.abs(circle.vx); },
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 6,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
} }
// Столкновение с верхней/нижней границей – отражение по оси Y },
if (circle.y < 0) { interactivity: {
circle.y = 0; detect_on: "canvas",
circle.vy = Math.abs(circle.vy); events: {
} else if (circle.y + circle.el.offsetHeight > containerHeight) { onhover: {
circle.y = containerHeight - circle.el.offsetHeight; enable: true,
circle.vy = -Math.abs(circle.vy); mode: "grab"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
} }
},
// Обновляем позицию элемента retina_detect: true
circle.el.style.left = circle.x + "px"; });
circle.el.style.top = circle.y + "px";
});
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
}); });
$(document).ready(function () { $(document).ready(function () {
...@@ -83,3 +129,20 @@ $(document).ready(function () { ...@@ -83,3 +129,20 @@ $(document).ready(function () {
} }
}); });
}); });
// Анимация появления новостных блоков при прокрутке
const newsBlocks = document.querySelectorAll('.news-block');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.classList.add('visible');
}, 100 * Array.from(newsBlocks).indexOf(entry.target));
}
});
}, { threshold: 0.1 });
newsBlocks.forEach(block => {
observer.observe(block);
});
/* Подключение шрифта Evolventa */
@font-face {
font-family: 'Evolventa';
src: url('libs/webfonts/webfonts/Evolventa-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Evolventa';
src: url('libs/webfonts/webfonts/Evolventa-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Evolventa';
src: url('libs/webfonts/webfonts/Evolventa-Oblique.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Evolventa';
src: url('libs/webfonts/webfonts/Evolventa-BoldOblique.woff') format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
}
:root { :root {
--border: #7E01FF; --border: #7E01FF;
--bg: #0B0E1D; --bg: #0B0E1D;
--link-color: #b79ced;
--link-hover: #ffffff;
--gradient: linear-gradient(45deg, #fff 30%, #b79ced 100%);
} }
/* Общие стили */ /* Общие стили */
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: Arial, sans-serif; font-family: Evolventa, Arial, sans-serif;
color: #fff; color: #fff;
background: #000; background: #000;
position: relative; position: relative;
...@@ -57,6 +93,62 @@ body::before { ...@@ -57,6 +93,62 @@ body::before {
} }
} }
/* Контейнер для частиц */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
}
/* Стили для ссылок */
a {
color: var(--link-color);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
a:hover {
color: var(--link-hover);
text-decoration: none;
}
/* Подчеркивание при наведении для ссылок */
a:not(.button, .social-icon, .home-link, .header-menu a)::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: -2px;
left: 0;
background: var(--gradient);
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s ease;
}
a:not(.button, .social-icon, .home-link, .header-menu, .footer-right, .mobile-menu, a):hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
/* Специфичные стили для разных типов ссылок */
.header-menu a:hover,
.footer-left a:hover, {
background-color: rgba(126, 1, 255, 0.2);
}
#license-link {
transition: all 0.3s ease;
}
#license-link:hover {
text-decoration-color: #7E01FF;
}
.button { .button {
display: inline-block; display: inline-block;
padding: 10px 20px; padding: 10px 20px;
...@@ -69,12 +161,30 @@ body::before { ...@@ -69,12 +161,30 @@ body::before {
box-sizing: border-box; box-sizing: border-box;
border: 2px solid var(--border); border: 2px solid var(--border);
border-radius: 15px; border-radius: 15px;
position: relative;
overflow: hidden;
} }
.button:hover { .button:hover {
transform: translateY(-10px) scale(1.02); transform: translateY(-10px) scale(1.02);
border-color: var(--border); border-color: var(--border);
box-shadow: 0 15px 45px rgba(126, 1, 255, 0.4); box-shadow: 0 15px 45px rgba(126, 1, 255, 0.4);
color: #fff;
}
.button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.7s ease;
}
.button:hover::before {
left: 100%;
} }
/* Стили для хедера */ /* Стили для хедера */
...@@ -84,14 +194,13 @@ header { ...@@ -84,14 +194,13 @@ header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 8px; padding: 8px 20px;
position: fixed; position: fixed;
width: calc(100% - 24px); width: calc(100% - 40px);
top: 12px; top: 12px;
left: 12px; left: 12px;
right: 12px; right: 12px;
z-index: 1000; z-index: 1000;
flex-wrap: wrap;
transition: background-color 0.8s; transition: background-color 0.8s;
box-sizing: border-box; box-sizing: border-box;
border: 2px solid var(--border); border: 2px solid var(--border);
...@@ -101,8 +210,8 @@ header { ...@@ -101,8 +210,8 @@ header {
.header-left { .header-left {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 10px; flex: 1;
flex-grow: 1; min-width: 0;
} }
.header-left .logo { .header-left .logo {
...@@ -115,6 +224,7 @@ header { ...@@ -115,6 +224,7 @@ header {
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
white-space: nowrap;
} }
.home-link:hover { .home-link:hover {
...@@ -125,19 +235,24 @@ header { ...@@ -125,19 +235,24 @@ header {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-grow: 1; flex: 2;
text-align: center; min-width: 0;
}
.header-menu {
width: 100%;
} }
.header-menu ul { .header-menu ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
display: flex;
justify-content: center;
} }
.header-menu ul li { .header-menu ul li {
display: inline; margin: 0 15px;
margin-right: 20px;
} }
.header-menu ul li a { .header-menu ul li a {
...@@ -148,6 +263,7 @@ header { ...@@ -148,6 +263,7 @@ header {
padding: 5px 10px; padding: 5px 10px;
transition: background-color 0.3s; transition: background-color 0.3s;
border-radius: 5px; border-radius: 5px;
white-space: nowrap;
} }
.header-menu ul li a:hover { .header-menu ul li a:hover {
...@@ -155,43 +271,62 @@ header { ...@@ -155,43 +271,62 @@ header {
} }
.header-right { .header-right {
margin-right: 100px; display: flex;
flex-grow: 1; align-items: center;
text-align: right; justify-content: flex-end;
flex: 1;
min-width: 0;
} }
.header-right .social-icon { .header-right .social-icon {
color: #fff; color: #fff;
margin-left: 15px; margin-left: 15px;
text-decoration: none; text-decoration: none;
font-size: 30px; font-size: 24px;
transition: transform 0.3s;
}
.header-right .social-icon:hover {
transform: translateY(-3px);
} }
header h1 { header h1 {
margin: 0; margin: 0;
font-size: 20px; font-size: 20px;
white-space: nowrap;
} }
/* Мобильная версия для хедера */ /* Мобильная версия для хедера */
@media (max-width: 768px) { @media (max-width: 768px) {
header {
padding: 8px 15px;
width: calc(100% - 30px);
}
.header-center { .header-center {
order: 1; order: 1;
flex-grow: 0; flex: 0 0 100%;
margin: 0; margin-top: 10px;
text-align: center; display: none;
} }
.header-right { .header-right {
order: 2; order: 2;
flex-grow: 0; flex: 0;
margin: 0 0 0 20px; margin: 0;
text-align: left;
} }
.header-menu ul li { .header-menu ul li {
margin-right: 15px; margin: 0 10px;
} }
.header-right .social-icon { .header-right .social-icon {
font-size: 24px; font-size: 20px;
margin-left: 12px; margin-left: 10px;
}
.header-left {
flex: 1;
} }
} }
...@@ -211,12 +346,18 @@ header h1 { ...@@ -211,12 +346,18 @@ header h1 {
cursor: pointer; cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
z-index: 1000; z-index: 1000;
transition: all 0.3s ease;
}
.menu-button:hover {
transform: scale(1.1);
box-shadow: 0 6px 10px rgba(126, 1, 255, 0.3);
} }
/* Иконка внутри кнопки */ /* Иконка внутри кнопки */
.menu-button i { .menu-button i {
font-size: 24px; font-size: 24px;
color: var(--text); color: #fff;
} }
/* Скрытое мобильное меню */ /* Скрытое мобильное меню */
...@@ -236,14 +377,15 @@ header h1 { ...@@ -236,14 +377,15 @@ header h1 {
.mobile-menu a { .mobile-menu a {
text-decoration: none; text-decoration: none;
color: var(--text); color: #fff;
padding: 8px 12px; padding: 8px 12px;
display: block; display: block;
border-radius: 5px;
transition: background-color 0.3s;
} }
.mobile-menu a:hover { .mobile-menu a:hover {
background-color: var(--border); background-color: var(--border);
border-radius: 5px;
} }
/* Скрываем обычное меню на мобильных устройствах */ /* Скрываем обычное меню на мобильных устройствах */
...@@ -266,6 +408,7 @@ main { ...@@ -266,6 +408,7 @@ main {
flex: 1; flex: 1;
padding-bottom: 20px; padding-bottom: 20px;
position: relative; position: relative;
margin-top: 80px;
} }
#hero-section { #hero-section {
...@@ -292,12 +435,15 @@ main { ...@@ -292,12 +435,15 @@ main {
.hero-text { .hero-text {
max-width: 600px; max-width: 600px;
position: relative; position: relative;
z-index: 1; z-index: 2;
} }
.hero-text h2 { .hero-text h2 {
font-size: 48px; font-size: 48px;
margin: 20px 0; margin: 20px 0;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.hero-text p { .hero-text p {
...@@ -416,7 +562,7 @@ main { ...@@ -416,7 +562,7 @@ main {
.info-block h3 { .info-block h3 {
font-size: 1.4em; font-size: 1.4em;
margin-bottom: 12px; margin-bottom: 12px;
background: linear-gradient(45deg, #fff 30%, #b79ced 100%); background: var(--gradient);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
text-shadow: 0 2px 4px rgba(126, 1, 255, 0.3); text-shadow: 0 2px 4px rgba(126, 1, 255, 0.3);
...@@ -485,17 +631,28 @@ main { ...@@ -485,17 +631,28 @@ main {
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(126, 1, 255, 0.3);
} }
.card img { .card img {
width: 100%; width: 100%;
height: auto; height: auto;
transition: transform 0.3s ease;
}
.card:hover img {
transform: scale(1.05);
} }
.card-text h3 { .card-text h3 {
font-size: 1.4em; font-size: 1.4em;
margin-bottom: 12px; margin-bottom: 12px;
background: linear-gradient(45deg, #fff 30%, #b79ced 100%); background: var(--gradient);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
text-shadow: 0 2px 4px rgba(126, 1, 255, 0.3); text-shadow: 0 2px 4px rgba(126, 1, 255, 0.3);
...@@ -525,7 +682,7 @@ main { ...@@ -525,7 +682,7 @@ main {
/* Стили для футера */ /* Стили для футера */
footer { footer {
background-color: var(--bg); background-color: var(--bg);
padding: 10px; padding: 15px 20px;
color: #fff; color: #fff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -539,170 +696,572 @@ footer { ...@@ -539,170 +696,572 @@ footer {
width: calc(100% - 24px); width: calc(100% - 24px);
} }
.footer-left, .footer-right { .footer-left {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex: 1;
min-width: 0;
} }
.footer-left .social-icon, .footer-right .social-icon { .footer-left .social-icon {
color: #fff; color: #fff;
margin-right: 15px; margin-right: 15px;
text-decoration: none; text-decoration: none;
font-size: 30px; font-size: 24px;
transition: transform 0.3s;
} }
.footer-right .logo { .footer-left .social-icon:hover {
width: 180px; transform: translateY(-3px);
} }
.footer-center { .footer-center {
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%;
text-align: center; text-align: center;
flex: 2;
min-width: 0;
} }
#contact-info { #contact-info {
font-size: 14px;
margin: 0 0 5px 0;
}
#license-link {
color: #fff;
text-decoration: none;
font-size: 12px; font-size: 12px;
opacity: 0.8;
transition: opacity 0.3s;
} }
#license-link:hover {
opacity: 1;
}
.footer-right {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1;
min-width: 0;
}
.footer-right .logo {
width: 115px;
margin: 0;
transition: transform 0.3s;
}
/* Респонсив для экранов менее 768px */ /* Респонсив для экранов менее 768px */
@media (max-width: 768px) { @media (max-width: 768px) {
footer { footer {
flex-direction: column; flex-direction: column;
padding: 15px; padding: 15px;
text-align: center;
} }
.footer-left, .footer-right { .footer-left, .footer-center, .footer-right {
margin: 10px 0; margin: 10px 0;
justify-content: center;
width: 100%; width: 100%;
justify-content: center;
} }
.footer-left .social-icon, .footer-right .social-icon { .footer-left {
font-size: 25px; order: 3;
margin-right: 10px;
} }
#contact-info { .footer-center {
font-size: 14px; order: 2;
text-align: center; }
margin-top: 15px;
.footer-right {
order: 1;
}
.footer-left .social-icon {
margin: 0 10px;
} }
} }
/* Для экранов от 770px до 1100px */ /* Для экранов от 770px до 1100px */
@media (min-width: 770px) and (max-width: 1100px) { @media (min-width: 770px) and (max-width: 1100px) {
footer { footer {
flex-direction: row;
justify-content: space-between;
padding: 10px 15px; padding: 10px 15px;
} }
.footer-left, .footer-right { .footer-right .logo {
justify-content: flex-start; width: 150px;
margin: 0;
} }
.footer-center { .footer-left .social-icon {
width: auto; margin-right: 12px;
text-align: center; font-size: 22px;
margin-top: 10px; }
}
/* Стили для страницы лицензионного соглашения */
.license-container {
max-width: 1000px;
margin: 100px auto 50px;
padding: 0 20px;
}
.license-content {
background: rgba(11, 14, 29, 0.8);
border: 2px solid var(--border);
border-radius: 20px;
padding: 40px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.license-content h1 {
font-size: 2.5em;
text-align: center;
margin-bottom: 10px;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.license-content h2 {
font-size: 1.5em;
text-align: center;
margin-bottom: 40px;
color: rgba(255, 255, 255, 0.8);
}
.license-content h3 {
font-size: 1.6em;
margin: 30px 0 20px;
color: #fff;
border-bottom: 1px solid var(--border);
padding-bottom: 10px;
}
.license-content h4 {
font-size: 1.2em;
margin: 25px 0 15px;
color: #fff;
}
.license-content p {
font-size: 1em;
line-height: 1.6;
margin-bottom: 15px;
color: rgba(255, 255, 255, 0.9);
}
.license-content ul {
margin: 15px 0;
padding-left: 20px;
}
.license-content li {
margin-bottom: 10px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
}
.license-section {
margin-bottom: 30px;
}
.company-info {
font-style: italic;
background: rgba(126, 1, 255, 0.1);
padding: 15px;
border-radius: 10px;
border-left: 3px solid var(--border);
}
.back-button {
text-align: center;
margin-top: 40px;
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
.license-container {
margin: 80px auto 30px;
padding: 0 15px;
} }
.footer-left .social-icon, .footer-right .social-icon { .license-content {
font-size: 28px; padding: 25px;
margin-right: 15px;
} }
#contact-info { .license-content h1 {
font-size: 14px; font-size: 2em;
text-align: center;
margin-top: 0;
} }
}
/* Для десктопа, если нужно */ .license-content h2 {
@media (min-width: 1024px) { font-size: 1.2em;
.footer-left, .footer-right {
margin-left: 100px;
margin-right: 100px;
} }
.footer-center { .license-content h3 {
width: auto; font-size: 1.4em;
} }
} }
/* Стили для статического блока информации о репозитории */
.repo-info-static {
background: rgba(11, 14, 29, 0.8);
border: 2px solid var(--border);
border-radius: 20px;
padding: 25px;
margin: 30px 0;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
/* Стили для шариков – их позиционирование обновляется через JS */ .repo-info-static::before {
.circle-container { content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0;
height: 3px;
}
.repo-header {
margin-bottom: 20px;
}
.repo-header h3 {
font-size: 1.5em;
margin: 0;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: flex;
align-items: center;
}
.repo-header h3 i {
margin-right: 12px;
font-size: 1.2em;
}
.repo-data-grid {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}
.repo-data-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
border-radius: 8px;
transition: background 0.3s ease;
background: rgba(126, 1, 255, 0.15);
font-weight: bold;
border-left: 3px solid var(--border);
}
.repo-data-item:hover {
background: rgba(126, 1, 255, 0.1);
}
.data-label {
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.data-value {
color: rgba(255, 255, 255, 0.9);
font-family: 'Evolventa';
font-size: 1.1em;
font-weight: 500;
}
.repo-action {
text-align: center;
margin: 25px 0 20px;
}
.button.outline {
background: transparent;
border: 2px solid var(--border);
color: #fff;
transition: all 0.3s ease;
}
.button.outline:hover {
background: var(--border);
transform: translateY(-2px);
}
.repo-footer {
text-align: center;
padding: 15px;
background: rgba(126, 1, 255, 0.1);
border-radius: 8px;
font-size: 0.9em;
color: rgba(255, 255, 255, 0.7);
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
.repo-data-item {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.repo-status {
flex-direction: column;
text-align: center;
gap: 10px;
}
.status-indicator {
margin-right: 0;
}
.repo-header h3 {
font-size: 1.3em;
text-align: center;
justify-content: center;
}
}
/* Стили для системных требований */
.system-requirements {
padding: 60px 20px;
background: transparent;
position: relative;
}
.requirements-title {
text-align: center;
margin-bottom: 40px;
font-size: 2.2em;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.requirements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-bottom: 50px;
}
.requirement-card {
background: rgba(11, 14, 29, 0.8);
border: 2px solid var(--border);
border-radius: 20px;
padding: 25px;
position: relative;
backdrop-filter: blur(10px);
transform-style: preserve-3d;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.requirement-card:hover {
transform: translateY(-10px) scale(1.02);
border-color: var(--border);
box-shadow: 0 15px 45px rgba(126, 1, 255, 0.4);
}
.requirement-card h3 {
font-size: 1.4em;
margin-bottom: 20px;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.requirement-list {
list-style: none;
padding: 0;
margin: 0;
}
.requirement-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
font-size: 0.95em;
}
.requirement-icon {
margin-right: 12px;
color: #7E01FF;
font-size: 1.2em;
min-width: 24px;
text-align: center;
}
.requirement-text {
flex: 1;
}
.requirement-note {
margin-top: 20px;
padding: 12px;
background: rgba(126, 1, 255, 0.1);
border-radius: 10px;
border-left: 3px solid var(--border);
font-style: italic;
font-size: 0.9em;
}
.requirement-note i {
margin-right: 8px;
color: var(--border);
}
@media (max-width: 768px) {
.requirements-grid {
grid-template-columns: 1fr;
}
.requirement-card {
padding: 20px;
}
}
.distro-showcase {
padding: 10px 10px;
background: transparent;
position: relative;
}
.distro-variant {
display: flex;
align-items: center;
margin-bottom: 80px;
background: rgba(11, 14, 29, 0.8);
border: 2px solid var(--border);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.distro-variant.reverse {
flex-direction: row-reverse;
}
.distro-image {
flex: 1;
min-width: 40%;
overflow: hidden;
}
.distro-image img {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 0; object-fit: cover;
overflow: hidden; transition: transform 0.5s ease;
} }
.circle { .distro-variant:hover .distro-image img {
position: absolute; transform: scale(1.05);
border-radius: 50%; }
opacity: 0.8;
.distro-content {
flex: 1;
padding: 40px;
} }
/* Начальные размеры, позиции и цвета для 50 шариков */ .distro-content h2 {
.circle:nth-child(1) { width: 30px; height: 30px; background: #ff4d4d; left: 10%; top: 5%; } font-size: 2em;
.circle:nth-child(2) { width: 40px; height: 40px; background: #4da6ff; left: 80%; top: 15%; } margin-bottom: 20px;
.circle:nth-child(3) { width: 35px; height: 35px; background: #4dff4d; left: 20%; top: 25%; } background: var(--gradient);
.circle:nth-child(4) { width: 45px; height: 45px; background: #ffd24d; left: 60%; top: 35%; } -webkit-background-clip: text;
.circle:nth-child(5) { width: 50px; height: 50px; background: #b84dff; left: 30%; top: 45%; } -webkit-text-fill-color: transparent;
.circle:nth-child(6) { width: 25px; height: 25px; background: #ff944d; left: 70%; top: 55%; } }
.circle:nth-child(7) { width: 55px; height: 55px; background: #4dffea; left: 15%; top: 65%; }
.circle:nth-child(8) { width: 60px; height: 60px; background: #ff4da6; left: 85%; top: 75%; } .distro-content p {
.circle:nth-child(9) { width: 30px; height: 30px; background: #fffa4d; left: 40%; top: 85%; } font-size: 1.1em;
.circle:nth-child(10) { width: 45px; height: 45px; background: #ff4d4d; left: 60%; top: 95%; } line-height: 1.6;
.circle:nth-child(11) { width: 35px; height: 35px; background: #4da6ff; left: 25%; top: 8%; } margin-bottom: 30px;
.circle:nth-child(12) { width: 40px; height: 40px; background: #4dff4d; left: 55%; top: 18%; } color: rgba(255, 255, 255, 0.9);
.circle:nth-child(13) { width: 50px; height: 50px; background: #ffd24d; left: 15%; top: 28%; } }
.circle:nth-child(14) { width: 30px; height: 30px; background: #b84dff; left: 75%; top: 38%; }
.circle:nth-child(15) { width: 55px; height: 55px; background: #ff944d; left: 35%; top: 48%; } .requirements {
.circle:nth-child(16) { width: 60px; height: 60px; background: #4dffea; left: 85%; top: 58%; } background: rgba(126, 1, 255, 0.1);
.circle:nth-child(17) { width: 25px; height: 25px; background: #ff4da6; left: 20%; top: 68%; } padding: 20px;
.circle:nth-child(18) { width: 45px; height: 45px; background: #fffa4d; left: 50%; top: 78%; } border-radius: 12px;
.circle:nth-child(19) { width: 35px; height: 35px; background: #ff4d4d; left: 70%; top: 88%; } border-left: 4px solid var(--border);
.circle:nth-child(20) { width: 40px; height: 40px; background: #4da6ff; left: 30%; top: 98%; } }
.circle:nth-child(21) { width: 50px; height: 50px; background: #4dff4d; left: 40%; top: 12%; }
.circle:nth-child(22) { width: 30px; height: 30px; background: #ffd24d; left: 60%; top: 22%; } .requirements h3 {
.circle:nth-child(23) { width: 45px; height: 45px; background: #b84dff; left: 20%; top: 32%; } font-size: 1.4em;
.circle:nth-child(24) { width: 55px; height: 55px; background: #ff944d; left: 80%; top: 42%; } margin-bottom: 15px;
.circle:nth-child(25) { width: 60px; height: 60px; background: #4dffea; left: 50%; top: 52%; } color: #fff;
.circle:nth-child(26) { width: 25px; height: 25px; background: #ff4da6; left: 10%; top: 62%; } }
.circle:nth-child(27) { width: 35px; height: 35px; background: #fffa4d; left: 90%; top: 72%; }
.circle:nth-child(28) { width: 40px; height: 40px; background: #ff4d4d; left: 40%; top: 82%; } .requirements ul {
.circle:nth-child(29) { width: 50px; height: 50px; background: #4da6ff; left: 70%; top: 92%; } list-style: none;
.circle:nth-child(30) { width: 45px; height: 45px; background: #4dff4d; left: 60%; top: 5%; } padding: 0;
.circle:nth-child(31) { width: 30px; height: 30px; background: #ffd24d; left: 15%; top: 15%; } margin: 0;
.circle:nth-child(32) { width: 55px; height: 55px; background: #b84dff; left: 85%; top: 25%; } }
.circle:nth-child(33) { width: 60px; height: 60px; background: #ff944d; left: 45%; top: 35%; }
.circle:nth-child(34) { width: 25px; height: 25px; background: #4dffea; left: 25%; top: 45%; } .requirements li {
.circle:nth-child(35) { width: 35px; height: 35px; background: #ff4da6; left: 75%; top: 55%; } display: flex;
.circle:nth-child(36) { width: 40px; height: 40px; background: #fffa4d; left: 35%; top: 65%; } align-items: center;
.circle:nth-child(37) { width: 50px; height: 50px; background: #ff4d4d; left: 55%; top: 75%; } margin-bottom: 10px;
.circle:nth-child(38) { width: 45px; height: 45px; background: #4da6ff; left: 20%; top: 85%; } font-size: 0.95em;
.circle:nth-child(39) { width: 30px; height: 30px; background: #4dff4d; left: 80%; top: 95%; } }
.circle:nth-child(40) { width: 55px; height: 55px; background: #ffd24d; left: 50%; top: 10%; }
.circle:nth-child(41) { width: 60px; height: 60px; background: #b84dff; left: 70%; top: 20%; } .requirements li i {
.circle:nth-child(42) { width: 25px; height: 25px; background: #ff944d; left: 30%; top: 30%; } margin-right: 10px;
.circle:nth-child(43) { width: 35px; height: 35px; background: #4dffea; left: 90%; top: 40%; } color: #7E01FF;
.circle:nth-child(44) { width: 40px; height: 40px; background: #ff4da6; left: 40%; top: 50%; } font-size: 1.2em;
.circle:nth-child(45) { width: 50px; height: 50px; background: #fffa4d; left: 60%; top: 60%; } min-width: 24px;
.circle:nth-child(46) { width: 45px; height: 45px; background: #ff4d4d; left: 10%; top: 70%; } text-align: center;
.circle:nth-child(47) { width: 30px; height: 30px; background: #4da6ff; left: 80%; top: 80%; } }
.circle:nth-child(48) { width: 55px; height: 55px; background: #4dff4d; left: 40%; top: 90%; }
.circle:nth-child(49) { width: 60px; height: 60px; background: #ffd24d; left: 90%; top: 5%; } /* Адаптация для планшетов */
.circle:nth-child(50) { width: 35px; height: 35px; background: #b84dff; left: 60%; top: 15%; } @media (max-width: 1024px) {
.distro-variant,
.distro-variant.reverse {
flex-direction: column;
}
.distro-image {
min-height: 300px;
}
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
.distro-showcase {
padding: 40px 15px;
}
.distro-content {
padding: 25px;
}
.distro-content h2 {
font-size: 1.6em;
}
.distro-content p {
font-size: 1em;
}
.requirements {
padding: 15px;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment