Skip to content

X
Ximper-Linux-Site
Commit 5a03620d authored by Pavel Beketov's avatar Pavel Beketov
Browse files
Options

global update 0.9.3

parent e1d5981a
Hide whitespace changes
Inline Side-by-side
Showing with 622 additions and 147 deletions
downloads.html
View file @ 5a03620d
...@@ -10,6 +10,15 @@ ...@@ -10,6 +10,15 @@
<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="#">Загрузки</a>
<a href="news.html">Новости</a>
<a href="https://wiki.ximperlinux.ru">Wiki</a>
</div>
<body> <body>
<header> <header>
<div class="header-left"> <div class="header-left">
...@@ -35,13 +44,37 @@ ...@@ -35,13 +44,37 @@
<section class="download-section"> <section class="download-section">
<div class="download-container"> <div class="download-container">
<h2 class="styled-title">Загрузить Ximper Linux прямо сейчас</h2> <h2 class="styled-title">Загрузить Ximper Linux прямо сейчас</h2>
<p class="styled-subtitle">Дистрибутив Ximper Linux доступен в двух вариантах: обычный и с поддержкой видеокарт NVIDIA. При наличии современной видеокарты NVIDIA вам потребуется использовать ISO-образ, содержащий драйвера NVIDIA.</p> <p class="styled-subtitle">Дистрибутив Ximper Linux доступен в нескольких вариантах: классический, hyprland с поддержкой видеокарт NVIDIA и без. При наличии современной видеокарты NVIDIA вам потребуется использовать ISO-образ, содержащий драйвера NVIDIA.</p>
<div class="download-distro">
<div class="download-left">
<img src="images/ximphnvdd.png" alt="">
</div>
<div class="download-right">
<h3>Ximper Linux Hyprland 0.9.3 с поддержкой Nvidia</h3>
<p>Варианты загрузки:</p>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-nvidia-0.9.2-20240526-x86_64.iso" class="button">ISO-образ (6.4Гб)</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-nvidia-0.9.2-20240526-x86_64.torrent" class="button">Torrent</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-nvidia-0.9.2-20240526-x86_64.iso.md5" class="button">Контрольные суммы (md5sum)</a>
</div>
</div>
<div class="download-distro">
<div class="download-right">
<h3>Ximper Linux Hyprland</h3>
<p>Варианты загрузки:</p>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-0.9.2-20240526-x86_64.iso" class="button">ISO-образ (5.6Гб)</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-0.9.2-20240526-x86_64.torrent" class="button">Torrent</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-0.9.2-20240526-x86_64.iso.md5" class="button">Контрольные суммы (md5sum)</a>
</div>
<div class="download-left">
<img src="images/ximpbookhypr.png" alt="">
</div>
</div>
<div class="download-distro"> <div class="download-distro">
<div class="download-left"> <div class="download-left">
<img src="images/3.png" alt=""> <img src="images/3.png" alt="">
</div> </div>
<div class="download-right"> <div class="download-right">
<h3>Ximper Linux 0.9.2 с поддержкой Nvidia</h3> <h3>Ximper Linux 0.9.3 с поддержкой Nvidia</h3>
<p>Варианты загрузки:</p> <p>Варианты загрузки:</p>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-nvidia-0.9.2-20240526-x86_64.iso" class="button">ISO-образ (6.4Гб)</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-nvidia-0.9.2-20240526-x86_64.iso" class="button">ISO-образ (6.4Гб)</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-nvidia-0.9.2-20240526-x86_64.torrent" class="button">Torrent</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-nvidia-0.9.2-20240526-x86_64.torrent" class="button">Torrent</a>
...@@ -50,7 +83,7 @@ ...@@ -50,7 +83,7 @@
</div> </div>
<div class="download-distro"> <div class="download-distro">
<div class="download-right"> <div class="download-right">
<h3>Ximper Linux 0.9.2</h3> <h3>Ximper Linux Classic 0.9.3</h3>
<p>Варианты загрузки:</p> <p>Варианты загрузки:</p>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-0.9.2-20240526-x86_64.iso" class="button">ISO-образ (5.6Гб)</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-0.9.2-20240526-x86_64.iso" class="button">ISO-образ (5.6Гб)</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-0.9.2-20240526-x86_64.torrent" class="button">Torrent</a> <a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-0.9.2-20240526-x86_64.torrent" class="button">Torrent</a>
...@@ -69,7 +102,7 @@ ...@@ -69,7 +102,7 @@
</div> </div>
<div class="explore-source"> <div class="explore-source">
<div class="source-left"> <div class="source-left">
<img src="images/source1.png" alt=""> <img src="images/source.png" alt="">
</div> </div>
<div class="source-right"> <div class="source-right">
<h3>Исследуйте исходный код</h3> <h3>Исследуйте исходный код</h3>
...@@ -90,9 +123,8 @@ ...@@ -90,9 +123,8 @@
<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>
<a href="https://vk.com/ximperlinux" class="social-icon"><i class="fab fa-vk"></i></a> <a href="https://vk.com/ximperlinux" class="social-icon"><i class="fab fa-vk"></i></a>
</div> </div>
<div id="contact-info"> <div class="footer-center">
<!-- Контактная информация --> <p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</p>
<p>© ООО «Этерсофт». Санкт-Петербург</p>
</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>
......
index.html
View file @ 5a03620d
...@@ -9,22 +9,31 @@ ...@@ -9,22 +9,31 @@
<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="#">Главная</a>
<a href="downloads.html">Загрузки</a>
<a href="news.html">Новости</a>
<a href="https://wiki.ximperlinux.ru">Wiki</a>
</div>
<body> <body>
<header> <header>
<div class="header-left"> <div class="header-left">
<img src="images/ximperlinux.svg" alt="InnovateOS Logo" class="logo"> <img src="images/ximperlinux.svg" alt="Ximper" class="logo">
<h1>Ximper Linux</h1> <h1>Ximper Linux</h1>
</div> </div>
<div class="header-center"> <div class="header-center">
<nav class="header-menu"> <nav class="header-menu">
<ul> <ul>
<li><a href="#">Главная</a></li> <li><a href="#">Главная</a></li>
<li><a href="downloads.html">Загрузки</a></li> <li><a href="downloads.html">Загрузки</a></li>
<li><a href="news.html">Новости</a></li> <li><a href="news.html">Новости</a></li>
<li><a href="https://wiki.ximperlinux.ru">Wiki</a></li> <li><a href="https://wiki.ximperlinux.ru">Wiki</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
<div class="header-right"> <div class="header-right">
<a href="https://vk.com/ximperlinux" class="social-icon"><i class="fab fa-vk"></i></a> <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> <a href="https://t.me/ximperlinux" class="social-icon"><i class="fab fa-telegram"></i></a>
...@@ -32,68 +41,152 @@ ...@@ -32,68 +41,152 @@
</header> </header>
<main> <main>
<div id="hero-section"> <div id="hero-section">
<div class="circle-container">
<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">
<img src="images/ximperlinux.svg" alt="logo">
</div>
<h2>Ximper Linux</h2> <h2>Ximper Linux</h2>
<p>Роллинг-релиз дистрибутив на основе ALT Sisyphus с рабочим столом GNOME</p> <p>Роллинг-релиз на базе ALT Sisyphus, создан для тех, кто ищет идеальное сочетание высокой производительности, современного дизайна и стабильности.</p>
<button id="next-section">Узнать больше</button> <button id="next-section">Узнать больше</button>
</div> </div>
</div> </div>
<div id="blocks-text">
<h1>Возможности и удобства</h1>
</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/app.png" alt="">
<h3>Sisyphus on board</h3> <h3>Sisyphus on board</h3>
<p>В наличии обширный репозиторий пакетов Sisyphus, у Вас всегда будет широкий выбор пакетов и приложений для установки.</p> <p>В наличии обширный репозиторий пакетов Sisyphus, у Вас всегда будет широкий выбор пакетов и приложений для установки.</p>
</div> </div>
<div class="info-block"> <div class="info-block">
<img src="images/easy.png" alt=""> <img src="images/easy.png" alt="">
<h3>Минимальная установка</h3> <h3>Минимальная установка</h3>
<p>Опционально доступна, позволяет пользователям настроить систему и добавить только необходимые компоненты.</p> <p>Опционально доступна, позволяет пользователям настроить систему и добавить только необходимые компоненты.</p>
</div> </div>
<div class="info-block"> <div class="info-block">
<img src="images/circles.png" alt=""> <img src="images/circles.png" alt="">
<h3>Однородная цветовая гамма в GTK и QT</h3> <h3>Однородная цветовая гамма в GTK и QT</h3>
<p>Единая цветовая гамма для GTK и QT придает системе стильный и согласованный внешний вид, повышая ее эстетическое качество.</p> <p>Единая цветовая гамма для GTK и QT придает системе стильный и согласованный внешний вид, повышая ее эстетическое качество.</p>
</div>
<div class="info-block">
<img src="images/EPM.png" alt="">
<h3>Удобный пакетный менеджер EPM из коробки</h3>
<p>Присутствие удобного пакетного менеджера EPM упрощает процесс установки, обновления и управления программами, делая опыт использования более комфортным.</p>
</div>
<div class="info-block">
<img src="images/console.png" alt="">
<h3>Хорошая производительность в играх благодаря PortProton</h3>
<p>PortProton — это проект, разработанный для того, чтобы сделать легким и удобным запуск Windows игр на Linux. Работает из коробки.</p>
</div>
<div class="info-block">
<img src="images/file-system.png" alt="">
<h3>Выбор файловой системы при установке</h3>
<p>Возможность выбора файловой системы при установке, включая BTRFS, дополняется интегрированным инструментом резервного копирования Timeshift, что способствует улучшению устойчивости системы.</p>
</div>
</div>
<div class="variants-text">
<h1>Идеальный выбор для каждого</h1>
</div>
<div class="cards-section">
<div class="card">
<img src="images/ximperclassic.png" alt="">
<div class="card-text">
<h3>Ximper Linux Classic</h3>
<p>Классический Ximper Linux с GNOME подходит для тех, кто ценит привычный, стабильный рабочий стол. Идеален для офисной работы, обучения и повседневного использования.</p>
</div>
</div> </div>
<div class="info-block"> <div class="card">
<img src="images/EPM.png" alt=""> <img src="images/ximperhypr.png" alt="">
<h3>Удобный пакетный менеджер EPM из коробки</h3> <div class="card-text">
<p>Присутствие удобного пакетного менеджера EPM упрощает процесс установки, обновления и управления программами, делая опыт использования более комфортным.</p> <h3>Ximper Linux Hyprland</h3>
<p>Современный дистрибутив с оконным менеджером Hyprland для продвинутых пользователей, стремящихся к легкости и скорости работы. Идеален для экспериментов и нестандартных конфигураций.</p>
</div>
</div> </div>
<div class="info-block"> <div class="card">
<img src="images/console.png" alt=""> <img src="images/ximpnvd.png" alt="">
<h3>Хорошая производительность в играх благодаря PortProton</h3> <div class="card-text">
<p>PortProton — это проект, разработанный для того, чтобы сделать легким и удобным запуск Windows игр на Linux. Работает из коробки.</p> <h3>Ximper Linux NVIDIA</h3>
<p>Оптимизирован для видеокарт NVIDIA, этот вариант обеспечивает наилучшую производительность в играх и графических приложениях. Подходит для геймеров и специалистов в области дизайна.</p>
</div>
</div> </div>
<div class="info-block"> <div class="card">
<img src="images/file-system.png" alt=""> <img src="images/ximphnvd.png" alt="">
<h3>Выбор файловой системы при установке</h3> <div class="card-text">
<p>Возможность выбора файловой системы при установке, включая BTRFS, дополняется интегрированным инструментом резервного копирования Timeshift, что способствует улучшению устойчивости системы.</p> <h3>Ximper Linux Hyprland NVIDIA</h3>
<p>Оптимизирован для видеокарт NVIDIA. Обеспечивает быструю работу и высокую эффективность как в играх, так и в ресурсоемких графических приложениях. Идеален для геймеров и дизайнеров, ценящих скорость, стабильность и гибкость.</p>
</div>
</div> </div>
</div> </div>
<div class="download-section"> <div class="download-text-block">
<div class="download-left"> <h1>Скачайте Ximper Linux и наслаждайтесь его возможностями!</h1>
<img src="images/ximpermonitor.png" alt=""> <a href="downloads.html" class="button">Перейти на страницу загрузок</a>
</div> </div>
<div class="download-right">
<h2>Загрузить Ximper Linux прямо сейчас</h2>
<p>Выберите версию для вашей конфигурации и начните установку прямо сейчас!</p>
<a href="downloads.html" class="button">Загрузить</a>
</div>
</div>
</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>
<a href="https://vk.com/ximperlinux" class="social-icon"><i class="fab fa-vk"></i></a> <a href="https://vk.com/ximperlinux" class="social-icon"><i class="fab fa-vk"></i></a>
</div> </div>
<div id="contact-info"> <div class="footer-center">
<!-- Контактная информация --> <p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</p>
<p>© ООО «Этерсофт». Санкт-Петербург</p>
</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"></script>\ <script src="script.js"></script>
</body> </body>
</html> </html>
news.html
View file @ 5a03620d
...@@ -10,6 +10,15 @@ ...@@ -10,6 +10,15 @@
<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>
<header> <header>
<div class="header-left"> <div class="header-left">
...@@ -225,9 +234,8 @@ $ epmi grub-btrfs</br> ...@@ -225,9 +234,8 @@ $ epmi grub-btrfs</br>
<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>
<a href="https://vk.com/ximperlinux" class="social-icon"><i class="fab fa-vk"></i></a> <a href="https://vk.com/ximperlinux" class="social-icon"><i class="fab fa-vk"></i></a>
</div> </div>
<div id="contact-info"> <div class="footer-center">
<!-- Контактная информация --> <p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</p>
<p>© ООО «Этерсофт». Санкт-Петербург</p>
</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>
......
script.js
View file @ 5a03620d
...@@ -3,7 +3,83 @@ $(document).ready(function(){ ...@@ -3,7 +3,83 @@ $(document).ready(function(){
$('#next-section').click(function(){ $('#next-section').click(function(){
// Плавная прокрутка к следующему блоку // Плавная прокрутка к следующему блоку
$('html, body').animate({ $('html, body').animate({
scrollTop: $('#blocks-section').offset().top scrollTop: $('#blocks-text').offset().top
}, 1500); //Время в секундах (можно поигарться) }, 1500); //Время в секундах (можно поигарться)
}); });
}); });
// Ждем загрузки DOM
document.addEventListener("DOMContentLoaded", function () {
const container = document.querySelector(".circle-container");
const circles = Array.from(document.querySelectorAll(".circle"));
// Для каждого шарика создаём объект с физическими данными:
// Скорость будет постоянной, а направление определяется случайно
const constantSpeed = 100; // px/с
let circlesData = circles.map(el => {
const style = window.getComputedStyle(el);
let x = parseFloat(style.left);
let y = parseFloat(style.top);
let radius = el.offsetWidth / 2;
// Случайное направление
const angle = Math.random() * 2 * Math.PI;
let vx = Math.cos(angle) * constantSpeed;
let vy = Math.sin(angle) * constantSpeed;
// прозрачность
el.style.opacity = 0.35;
return { el, x, y, vx, vy, radius };
});
let lastTime = performance.now();
function animate(time) {
const dt = (time - lastTime) / 1000; // время в секундах
lastTime = time;
const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight;
circlesData.forEach(circle => {
// Обновляем координаты с постоянной скоростью
circle.x += circle.vx * dt;
circle.y += circle.vy * dt;
// Столкновение с левой/правой границей – отражение по оси X
if (circle.x < 0) {
circle.x = 0;
circle.vx = Math.abs(circle.vx);
} else if (circle.x + circle.el.offsetWidth > containerWidth) {
circle.x = containerWidth - circle.el.offsetWidth;
circle.vx = -Math.abs(circle.vx);
}
// Столкновение с верхней/нижней границей – отражение по оси Y
if (circle.y < 0) {
circle.y = 0;
circle.vy = Math.abs(circle.vy);
} else if (circle.y + circle.el.offsetHeight > containerHeight) {
circle.y = containerHeight - circle.el.offsetHeight;
circle.vy = -Math.abs(circle.vy);
}
// Обновляем позицию элемента
circle.el.style.left = circle.x + "px";
circle.el.style.top = circle.y + "px";
});
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
});
$(document).ready(function () {
$(".menu-button").click(function () {
$(".mobile-menu").toggle();
});
// Закрытие меню при клике вне его области
$(document).click(function (event) {
if (!$(event.target).closest(".menu-button, .mobile-menu").length) {
$(".mobile-menu").hide();
}
});
});
styles.css
View file @ 5a03620d
...@@ -32,47 +32,40 @@ body::before { ...@@ -32,47 +32,40 @@ body::before {
@keyframes glowAnimation { @keyframes glowAnimation {
0% { 0% {
transform: translate(0%, 0%) scale(1); transform: translate(0, 0) scale(1);
opacity: 0; /* Полностью прозрачный в начале */ opacity: 0;
} }
10% { 10% {
transform: translate(-30%, -30%) scale(1.2); transform: translate(-30%, -30%) scale(1.2);
opacity: 0.4; /* Плавное появление */ opacity: 0.4;
} }
40% { 40% {
transform: translate(30%, -30%) scale(1.4); transform: translate(30%, -30%) scale(1.4);
opacity: 1; /* Максимальная яркость */ opacity: 1;
} }
60% { 60% {
transform: translate(-30%, 30%) scale(1.2); transform: translate(-30%, 30%) scale(1.2);
opacity: 0.4; /* Плавное исчезновение */ opacity: 0.4;
} }
90% { 90% {
transform: translate(30%, 30%) scale(1.3); transform: translate(30%, 30%) scale(1.3);
opacity: 0.2; /* Минимальная яркость */ opacity: 0.2;
} }
100% { 100% {
transform: translate(0%, 0%) scale(1); transform: translate(0, 0) scale(1);
opacity: 0; /* Полностью прозрачный в конце */ opacity: 0;
} }
} }
.button { .button {
display: inline-block; display: inline-block;
padding: 10px 20px; padding: 10px 20px;
font-size: 18px; font-size: 18px;
margin: 4px 4px 16px 4px;
margin-left: 4px;
margin-right: 4px;
margin-top: 4px;
margin-bottom: 16px;
text-decoration: none; text-decoration: none;
background-color: var(--bg); background-color: var(--bg);
color: #fff; color: #fff;
transition-property: background-color; transition: background-color 0.8s;
transition-duration: 0.8s;
box-sizing: border-box; box-sizing: border-box;
border: 2px solid var(--border); border: 2px solid var(--border);
border-radius: 15px; border-radius: 15px;
...@@ -93,8 +86,7 @@ header { ...@@ -93,8 +86,7 @@ header {
right: 12px; right: 12px;
z-index: 1000; z-index: 1000;
flex-wrap: wrap; flex-wrap: wrap;
transition-property: background-color; transition: background-color 0.8s;
transition-duration: 0.8s;
box-sizing: border-box; box-sizing: border-box;
border: 2px solid var(--border); border: 2px solid var(--border);
border-radius: 15px; border-radius: 15px;
...@@ -159,32 +151,95 @@ header h1 { ...@@ -159,32 +151,95 @@ header h1 {
font-size: 20px; font-size: 20px;
} }
/* Мобильная версия */ /* Мобильная версия для хедера */
@media (max-width: 768px) { @media (max-width: 768px) {
.header-center { .header-center {
order: 1; order: 1;
flex-grow: 0; flex-grow: 0;
margin: 0; margin: 0;
text-align: center; text-align: center;
} }
.header-right { .header-right {
order: 2; order: 2;
flex-grow: 0; flex-grow: 0;
margin: 0 0 0 20px; margin: 0 0 0 20px;
text-align: left; text-align: left;
} }
.header-menu ul li { .header-menu ul li {
margin-right: 15px; margin-right: 15px;
} }
.header-right .social-icon { .header-right .social-icon {
font-size: 24px; font-size: 24px;
margin-left: 12px; margin-left: 12px;
} }
} }
/* Кнопка меню */
.menu-button {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: var(--bg);
border: 2px solid var(--border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
/* Иконка внутри кнопки */
.menu-button i {
font-size: 24px;
color: var(--text);
}
/* Скрытое мобильное меню */
.mobile-menu {
position: fixed;
bottom: 80px;
right: 20px;
background-color: var(--bg);
border: 2px solid var(--border);
border-radius: 10px;
display: none;
flex-direction: column;
padding: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
z-index: 999;
}
.mobile-menu a {
text-decoration: none;
color: var(--text);
padding: 8px 12px;
display: block;
}
.mobile-menu a:hover {
background-color: var(--border);
border-radius: 5px;
}
/* Скрываем обычное меню на мобильных устройствах */
@media (max-width: 768px) {
.header-center {
display: none;
}
}
/* Скрытие кнопки меню на десктопе */
@media (min-width: 769px) {
.menu-button,
.mobile-menu {
display: none !important;
}
}
/* Стили для основного контента */ /* Стили для основного контента */
main { main {
flex: 1; flex: 1;
...@@ -201,20 +256,22 @@ main { ...@@ -201,20 +256,22 @@ main {
text-align: center; text-align: center;
position: relative; position: relative;
margin-top: -20px; margin-top: -20px;
overflow: hidden;
} }
.hero-img { .hero-image {
position: absolute; margin-bottom: 20px;
width: 100%; }
height: 100%; .hero-image img {
object-fit: cover; max-width: 30%;
top: 0; height: auto;
left: 0; border-radius: 15px;
z-index: -1;
} }
.hero-text { .hero-text {
max-width: 600px; max-width: 600px;
position: relative;
z-index: 1;
} }
.hero-text h2 { .hero-text h2 {
...@@ -232,94 +289,171 @@ main { ...@@ -232,94 +289,171 @@ main {
font-size: 18px; font-size: 18px;
background-color: var(--bg); background-color: var(--bg);
color: #fff; color: #fff;
transition-property: background-color; transition: background-color 0.8s;
transition-duration: 0.8s;
box-sizing: border-box; box-sizing: border-box;
border: 2px solid var(--border); border: 2px solid var(--border);
border-radius: 15px; border-radius: 15px;
} }
/* Контейнер с преимуществами */
#blocks-section { #blocks-section {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(3, 1fr); /* Три карточки в ряд */
justify-content: center; gap: 30px;
padding: 20px; padding: 60px 20px;
background: transparent; background: transparent;
position: relative;
overflow: hidden;
} }
.info-block { #blocks-text {
background-color: var(--bg); text-align: center;
margin: 10px;
padding: 20px; padding: 20px;
}
.info-block {
background: rgba(11, 14, 29, 0.8);
border: 2px solid var(--border); border: 2px solid var(--border);
border-radius: 15px; border-radius: 20px;
width: calc(35%); padding: 25px;
color: #fff; position: relative;
text-align: center; 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);
width: 90%; /* Уменьшаем ширину карточек */
margin: 0 auto; /* Центрируем карточки */
}
.info-block:hover {
transform: translateY(-10px) scale(1.02);
border-color: var(--border); /* Анимация границы при наведении */
box-shadow: 0 15px 45px rgba(126, 1, 255, 0.4);
}
.info-block:hover::before {
opacity: 1;
} }
.info-block img { .info-block img {
max-width: 100%; width: 70px;
height: auto; height: 70px;
object-fit: contain;
margin-bottom: 20px; margin-bottom: 20px;
width: 100px; filter: drop-shadow(0 4px 6px rgba(126, 1, 255, 0.3));
transition: transform 0.3s;
} }
.info-block:hover img {
transform: scale(1.1) rotate(-5deg);
}
.info-block h3 {
font-size: 1.4em;
margin-bottom: 12px;
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);
}
.info-block p {
font-size: 1em;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
position: relative;
z-index: 1;
}
/* Адаптация для планшетов */
@media (max-width: 1024px) {
#blocks-section {
grid-template-columns: repeat(2, 1fr); /* Две карточки в ряд на планшетах */
}
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) { @media (max-width: 768px) {
#blocks-section {
grid-template-columns: 1fr; /* Одна карточка в ряд на мобильных */
padding: 40px 15px;
}
.info-block { .info-block {
width: calc(100% - 40px); padding: 20px;
} }
.info-block h3 {
font-size: 1.2em;
}
}
/* Блок с карточками */
.variants-text {
text-align: center;
padding: 20px;
}
.variants-text ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.variants-text li {
margin: 10px 0;
} }
.download-section { /* Блок карточек */
.cards-section {
display: flex; display: flex;
justify-content: space-between; justify-content: center;
align-items: center; gap: 20px;
padding: 50px 20px; flex-wrap: wrap;
background: transparent; margin-top: 20px;
} }
.download-left { .card {
flex: 1; width: 24%;
min-width: 280px;
background-color: var(--bg);
border: 2px solid var(--border);
border-radius: 10px;
overflow: hidden; overflow: hidden;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} }
.download-left img { .card img {
width: 100%; width: 100%;
height: auto; height: auto;
border-radius: 10px;
} }
.download-right { .card-text h3 {
flex: 1; font-size: 1.4em;
padding: 0 20px; margin-bottom: 12px;
color: #fff; background: linear-gradient(45deg, #fff 30%, #b79ced 100%);
position: relative; -webkit-background-clip: text;
text-align: center; -webkit-text-fill-color: transparent;
text-shadow: 0 2px 4px rgba(126, 1, 255, 0.3);
} }
.download-right h2 { .card-text p {
font-size: 36px; padding: 15px;
margin-bottom: 20px;
} }
.download-right p { .download-text-block {
font-size: 18px; text-align: center;
margin-bottom: 20px; padding: 20px;
background: transparent;
} }
/* Адаптация карточек для мобильных устройств */
@media (max-width: 768px) { @media (max-width: 768px) {
.download-section { .cards-section {
flex-direction: column; flex-direction: column;
align-items: center;
} }
.download-left, .download-right { .card {
width: 100%; width: 90%;
}
.download-right {
padding: 20px;
}
.download-right h2 {
font-size: 28px;
} }
} }
...@@ -343,9 +477,7 @@ footer { ...@@ -343,9 +477,7 @@ footer {
.footer-left, .footer-right { .footer-left, .footer-right {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 100px; justify-content: flex-start;
margin-right: 100px;
justify-content: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
} }
...@@ -360,18 +492,152 @@ footer { ...@@ -360,18 +492,152 @@ footer {
width: 180px; width: 180px;
} }
#contact-info { .footer-center {
display: inline-block; display: flex;
justify-content: center;
align-items: center;
width: 100%;
text-align: center; text-align: center;
}
#contact-info {
font-size: 12px; font-size: 12px;
align-self: flex-end;
} }
/* Респонсив для экранов менее 768px */
@media (max-width: 768px) { @media (max-width: 768px) {
footer { footer {
flex-direction: column; flex-direction: column;
padding: 15px;
} }
.footer-left, .footer-right { .footer-left, .footer-right {
margin: 10px 0; margin: 10px 0;
justify-content: center;
width: 100%;
}
.footer-left .social-icon, .footer-right .social-icon {
font-size: 25px;
margin-right: 10px;
}
#contact-info {
font-size: 14px;
text-align: center;
margin-top: 15px;
} }
} }
/* Для экранов от 770px до 1100px */
@media (min-width: 770px) and (max-width: 1100px) {
footer {
flex-direction: row;
justify-content: space-between;
padding: 10px 15px;
}
.footer-left, .footer-right {
justify-content: flex-start;
margin: 0;
}
.footer-center {
width: auto;
text-align: center;
margin-top: 10px;
}
.footer-left .social-icon, .footer-right .social-icon {
font-size: 28px;
margin-right: 15px;
}
#contact-info {
font-size: 14px;
text-align: center;
margin-top: 0;
}
}
/* Для десктопа, если нужно */
@media (min-width: 1024px) {
.footer-left, .footer-right {
margin-left: 100px;
margin-right: 100px;
}
.footer-center {
width: auto;
}
}
/* Стили для шариков – их позиционирование обновляется через JS */
.circle-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.circle {
position: absolute;
border-radius: 50%;
opacity: 0.8;
}
/* Начальные размеры, позиции и цвета для 50 шариков */
.circle:nth-child(1) { width: 30px; height: 30px; background: #ff4d4d; left: 10%; top: 5%; }
.circle:nth-child(2) { width: 40px; height: 40px; background: #4da6ff; left: 80%; top: 15%; }
.circle:nth-child(3) { width: 35px; height: 35px; background: #4dff4d; left: 20%; top: 25%; }
.circle:nth-child(4) { width: 45px; height: 45px; background: #ffd24d; left: 60%; top: 35%; }
.circle:nth-child(5) { width: 50px; height: 50px; background: #b84dff; left: 30%; top: 45%; }
.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%; }
.circle:nth-child(9) { width: 30px; height: 30px; background: #fffa4d; left: 40%; top: 85%; }
.circle:nth-child(10) { width: 45px; height: 45px; background: #ff4d4d; left: 60%; top: 95%; }
.circle:nth-child(11) { width: 35px; height: 35px; background: #4da6ff; left: 25%; top: 8%; }
.circle:nth-child(12) { width: 40px; height: 40px; background: #4dff4d; left: 55%; top: 18%; }
.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%; }
.circle:nth-child(16) { width: 60px; height: 60px; background: #4dffea; left: 85%; top: 58%; }
.circle:nth-child(17) { width: 25px; height: 25px; background: #ff4da6; left: 20%; top: 68%; }
.circle:nth-child(18) { width: 45px; height: 45px; background: #fffa4d; left: 50%; top: 78%; }
.circle:nth-child(19) { width: 35px; height: 35px; background: #ff4d4d; left: 70%; top: 88%; }
.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%; }
.circle:nth-child(23) { width: 45px; height: 45px; background: #b84dff; left: 20%; top: 32%; }
.circle:nth-child(24) { width: 55px; height: 55px; background: #ff944d; left: 80%; top: 42%; }
.circle:nth-child(25) { width: 60px; height: 60px; background: #4dffea; left: 50%; top: 52%; }
.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%; }
.circle:nth-child(29) { width: 50px; height: 50px; background: #4da6ff; left: 70%; top: 92%; }
.circle:nth-child(30) { width: 45px; height: 45px; background: #4dff4d; left: 60%; top: 5%; }
.circle:nth-child(31) { width: 30px; height: 30px; background: #ffd24d; left: 15%; top: 15%; }
.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%; }
.circle:nth-child(35) { width: 35px; height: 35px; background: #ff4da6; left: 75%; top: 55%; }
.circle:nth-child(36) { width: 40px; height: 40px; background: #fffa4d; left: 35%; top: 65%; }
.circle:nth-child(37) { width: 50px; height: 50px; background: #ff4d4d; left: 55%; top: 75%; }
.circle:nth-child(38) { width: 45px; height: 45px; background: #4da6ff; left: 20%; top: 85%; }
.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%; }
.circle:nth-child(42) { width: 25px; height: 25px; background: #ff944d; left: 30%; top: 30%; }
.circle:nth-child(43) { width: 35px; height: 35px; background: #4dffea; left: 90%; top: 40%; }
.circle:nth-child(44) { width: 40px; height: 40px; background: #ff4da6; left: 40%; top: 50%; }
.circle:nth-child(45) { width: 50px; height: 50px; background: #fffa4d; left: 60%; top: 60%; }
.circle:nth-child(46) { width: 45px; height: 45px; background: #ff4d4d; left: 10%; top: 70%; }
.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%; }
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