Skip to content

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

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

parent eebb7ea3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 282 additions and 82 deletions
license.html 0 → 100644
View file @ 83993d57
This diff is collapsed. Click to expand it.
news.css
View file @ 83993d57
.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;
} }
} }
script.js
View file @ 83993d57
$(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);
});
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