valitovgaziz/tp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: main_dc/valitovgaziz/html/digital_background.js

Browse Source 
modified:   main_dc/valitovgaziz/html/style.css
	modified:   main_dc/valitovgaziz/html/style/digital_background.css
add workible digital background
This commit is contained in:
Газиз Валитов
2025-11-09 06:29:29 +05:00
parent f60ad0d3d8
commit bd4c94b112
3 changed files with 194 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main_dc/valitovgaziz/html/digital_background.js
+117 -24
View File
@@ -1,10 +1,31 @@
// Initialize digital background
document.addEventListener('DOMContentLoaded', function() {
createBinaryRain();
createFloatingCode();
createConnectionNodes();
createDataFlows();
});
// Digital Background Initialization
// Обновляем функцию для интеграции с темной темой
function updateBackgroundForTheme() {
const isDarkMode = document.body.classList.contains('dark-mode');
const binaryDigits = document.querySelectorAll('.binary-digit');
const floatingCode = document.querySelectorAll('.floating-code');
const connectionNodes = document.querySelectorAll('.connection-node');
const dataFlows = document.querySelectorAll('.data-flow');
// Обновляем цвета элементов в реальном времени
const accentColor = isDarkMode ? 'rgba(41, 128, 185, 0.8)' : 'rgba(0, 123, 255, 0.8)';
binaryDigits.forEach(digit => {
digit.style.color = accentColor;
});
floatingCode.forEach(code => {
code.style.color = accentColor;
});
connectionNodes.forEach(node => {
node.style.background = accentColor;
});
dataFlows.forEach(flow => {
flow.style.background = `linear-gradient(90deg, transparent, ${accentColor}, transparent)`;
});
}
// Create binary rain effect
function createBinaryRain() {
@@ -12,27 +33,35 @@ function createBinaryRain() {
container.className = 'binary-rain';
document.body.appendChild(container);
for (let i = 0; i < 50; i++) {
// Создаем больше потоков для полного покрытия
for (let i = 0; i < 80; i++) { // Увеличиваем количество потоков
setTimeout(() => {
createBinaryStream(container);
}, i * 200);
}, i * 150);
}
}
function createBinaryStream(container) {
const stream = document.createElement('div');
stream.className = 'binary-stream';
// Распределяем потоки по всей ширине экрана
const left = Math.random() * 100;
stream.style.left = `${left}%`;
stream.style.position = 'absolute';
stream.style.width = 'auto';
for (let i = 0; i < 20; i++) {
// Создаем больше цифр в каждом потоке
for (let i = 0; i < 25; i++) {
const digit = document.createElement('div');
digit.className = 'binary-digit';
digit.textContent = Math.random() > 0.5 ? '1' : '0';
digit.style.position = 'absolute';
digit.style.left = '0';
digit.style.top = `${-i * 20}px`;
digit.style.animationDuration = `${3 + Math.random() * 4}s`;
digit.style.animationDelay = `${i * 0.2}s`;
digit.style.top = `${-i * 25}px`; // Увеличиваем расстояние между цифрами
digit.style.animationDuration = `${2 + Math.random() * 3}s`; // Быстрее анимация
digit.style.animationDelay = `${i * 0.15}s`;
digit.style.opacity = `${0.3 + Math.random() * 0.7}`; // Разная прозрачность
digit.style.fontSize = `${12 + Math.random() * 8}px`; // Разный размер шрифта
stream.appendChild(digit);
}
@@ -41,41 +70,105 @@ function createBinaryStream(container) {
// Create floating code elements
function createFloatingCode() {
const symbols = ['{', '}', '<>', '();', '[]', '</>', '=>', '&&'];
const symbols = ['{', '}', '<>', '();', '[]', '</>', '=>', '&&', 'function', 'const', 'let', 'var', 'class', 'import', 'export', 'return'];
const classes = ['code-bracket', 'code-parenthesis', 'code-brace', 'code-tag'];
symbols.forEach((symbol, index) => {
// Создаем больше плавающих элементов
for (let i = 0; i < 25; i++) {
const symbol = symbols[Math.floor(Math.random() * symbols.length)];
const element = document.createElement('div');
element.className = `floating-code ${classes[index % classes.length]}`;
element.className = `floating-code ${classes[Math.floor(Math.random() * classes.length)]}`;
element.textContent = symbol;
element.style.left = `${Math.random() * 100}%`;
element.style.top = `${Math.random() * 100}%`;
element.style.animationDuration = `${20 + Math.random() * 20}s`;
element.style.fontSize = `${10 + Math.random() * 6}px`;
element.style.opacity = `${0.05 + Math.random() * 0.1}`;
document.body.appendChild(element);
});
}
}
// Create connection nodes
function createConnectionNodes() {
for (let i = 0; i < 15; i++) {
for (let i = 0; i < 20; i++) {
const node = document.createElement('div');
node.className = 'connection-node';
node.style.left = `${Math.random() * 100}%`;
node.style.top = `${Math.random() * 100}%`;
node.style.animationDelay = `${Math.random() * 4}s`;
node.style.width = `${4 + Math.random() * 6}px`;
node.style.height = node.style.width;
document.body.appendChild(node);
}
}
// Create data flow lines
function createDataFlows() {
for (let i = 0; i < 8; i++) {
for (let i = 0; i < 12; i++) {
const flow = document.createElement('div');
flow.className = 'data-flow';
flow.style.top = `${Math.random() * 100}%`;
flow.style.width = `${30 + Math.random() * 40}%`;
flow.style.left = `${-Math.random() * 20}%`;
flow.style.animationDuration = `${4 + Math.random() * 8}s`;
flow.style.animationDelay = `${Math.random() * 6}s`;
flow.style.width = `${40 + Math.random() * 50}%`;
flow.style.left = `${-Math.random() * 30}%`;
flow.style.animationDuration = `${5 + Math.random() * 10}s`;
flow.style.animationDelay = `${Math.random() * 8}s`;
flow.style.height = `${1 + Math.random() * 2}px`;
document.body.appendChild(flow);
}
}
}
// Initialize digital background with theme integration
document.addEventListener('DOMContentLoaded', function() {
// Сначала создаем элементы
createBinaryRain();
createFloatingCode();
createConnectionNodes();
createDataFlows();
// Затем настраиваем наблюдение за темой
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
setTimeout(updateBackgroundForTheme, 100); // Небольшая задержка для применения стилей
}
});
});
observer.observe(document.body, {
attributes: true,
attributeFilter: ['class']
});
// Инициализируем цвета при загрузке
setTimeout(updateBackgroundForTheme, 500);
});
// Также обновляем тему при переключении
function toggleTheme() {
document.body.classList.toggle('dark-mode');
const btn = document.querySelector('.theme-toggle');
if (document.body.classList.contains('dark-mode')) {
btn.textContent = '☀️ Светлая тема';
localStorage.setItem('theme', 'dark');
} else {
btn.textContent = '🌙 Темная тема';
localStorage.setItem('theme', 'light');
}
// Обновляем фон после переключения темы
setTimeout(updateBackgroundForTheme, 100);
}
// Загрузка темы при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
const savedTheme = localStorage.getItem('theme');
const btn = document.querySelector('.theme-toggle');
if (savedTheme === 'dark') {
document.body.classList.add('dark-mode');
btn.textContent = '☀️ Светлая тема';
} else {
btn.textContent = '🌙 Темная тема';
}
});
main_dc/valitovgaziz/html/style.css
+1 -1
View File
@@ -1,3 +1,4 @@
@import url("./style/digital_background.css");
@import url("saveContactsButtonStyle.css");
@import url("darkTheme.css");
@import url("./style/about.css");
@@ -8,7 +9,6 @@
@import url("./style/repository_section.css");
@import url("./style/links_style.css");
@import url("./style/skill_section.css");
@import url("./style/digital_background.css");
/* style.css - обновленный */
:root {
main_dc/valitovgaziz/html/style/digital_background.css
+76 -134
View File
@@ -1,22 +1,24 @@
/* Digital Background for Software Development Website */
/* CSS Variables for Theme Support */
/* Интеграция с существующей системой тем */
/* Используем переменные из darkTheme.css */
:root {
/* Light Theme Colors */
/* Light Theme Colors - интегрируем с существующими переменными */
--bg-primary-light: #f8f9fa;
--bg-secondary-light: #e9ecef;
--accent-primary-light: #007bff;
--accent-secondary-light: #6c757d;
--text-primary-light: #212529;
--particle-color-light: rgba(0, 123, 255, 0.1);
/* Dark Theme Colors */
--bg-primary-dark: #121212;
--bg-secondary-dark: #1e1e1e;
--accent-primary-dark: #0d6efd;
--accent-secondary-dark: #495057;
--text-primary-dark: #f8f9fa;
--particle-color-dark: rgba(13, 110, 253, 0.15);
/* Dark Theme Colors - используем переменные из darkTheme.css */
--bg-primary-dark: var(--dark-bg, #1a252f);
--bg-secondary-dark: var(--dark-card, #2c3e50);
--accent-primary-dark: var(--dark-secondary, #2980b9);
--accent-secondary-dark: var(--dark-border, #34495e);
--text-primary-dark: var(--dark-text, #ecf0f1);
--particle-color-dark: rgba(41, 128, 185, 0.15);
/* Current Theme - defaults to light */
--bg-primary: var(--bg-primary-light);
--bg-secondary: var(--bg-secondary-light);
@@ -26,8 +28,8 @@
--particle-color: var(--particle-color-light);
}
/* Dark Theme Class */
body.dark-theme {
/* Интеграция с существующей темной темой */
body.dark-mode {
--bg-primary: var(--bg-primary-dark);
--bg-secondary: var(--bg-secondary-dark);
--accent-primary: var(--accent-primary-dark);
@@ -36,62 +38,35 @@ body.dark-theme {
--particle-color: var(--particle-color-dark);
}
/* Auto Theme Detection */
@media (prefers-color-scheme: dark) {
body.auto-theme {
--bg-primary: var(--bg-primary-dark);
--bg-secondary: var(--bg-secondary-dark);
--accent-primary: var(--accent-primary-dark);
--accent-secondary: var(--accent-secondary-dark);
--text-primary: var(--text-primary-dark);
--particle-color: var(--particle-color-dark);
}
}
/* Base Body Styles */
body {
margin: 0;
padding: 0;
min-height: 100vh;
background: linear-gradient(
135deg,
var(--bg-primary) 0%,
var(--bg-secondary) 100%
);
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
color: var(--text-primary);
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow-x: hidden;
position: relative;
}
/* Animated Background Elements */
body::before {
content: "";
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(
circle at 20% 80%,
var(--particle-color) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 20%,
var(--particle-color) 0%,
transparent 50%
),
radial-gradient(
circle at 40% 40%,
var(--particle-color) 0%,
transparent 50%
);
background:
radial-gradient(circle at 20% 80%, var(--particle-color) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, var(--particle-color) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, var(--particle-color) 0%, transparent 50%);
animation: backgroundPulse 8s ease-in-out infinite;
z-index: -1;
z-index: -3;
}
/* Binary Code Rain Effect */
/* Binary Code Rain Effect - ИСПРАВЛЕННЫЙ СТИЛЬ */
.binary-rain {
position: fixed;
top: 0;
@@ -100,17 +75,17 @@ body::before {
height: 100%;
pointer-events: none;
z-index: -1;
opacity: 0.4;
opacity: 0.6;
}
.binary-digit {
position: absolute;
color: var(--accent-primary);
font-family: "Courier New", monospace;
font-size: 14px;
font-family: 'Courier New', monospace;
font-weight: bold;
animation: fall linear infinite;
text-shadow: 0 0 8px currentColor;
text-shadow: 0 0 5px currentColor;
white-space: nowrap;
}
/* Circuit Board Grid */
@@ -120,46 +95,33 @@ body::before {
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
var(--accent-secondary) 1px,
transparent 1px
),
background-image:
linear-gradient(var(--accent-secondary) 1px, transparent 1px),
linear-gradient(90deg, var(--accent-secondary) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.03;
z-index: -1;
z-index: -2;
animation: gridMove 20s linear infinite;
}
/* Floating Code Elements */
.floating-code {
position: fixed;
font-family: "Courier New", monospace;
font-size: 12px;
font-family: 'Courier New', monospace;
color: var(--accent-primary);
opacity: 0.1;
z-index: -1;
pointer-events: none;
}
.code-bracket {
animation: float 15s ease-in-out infinite;
}
.code-parenthesis {
animation: float 18s ease-in-out infinite reverse;
}
.code-brace {
animation: float 20s ease-in-out infinite;
}
.code-tag {
animation: float 16s ease-in-out infinite reverse;
}
.code-bracket { animation: float 15s ease-in-out infinite; }
.code-parenthesis { animation: float 18s ease-in-out infinite reverse; }
.code-brace { animation: float 20s ease-in-out infinite; }
.code-tag { animation: float 16s ease-in-out infinite reverse; }
/* Connection Nodes */
.connection-node {
position: fixed;
width: 6px;
height: 6px;
background: var(--accent-primary);
border-radius: 50%;
opacity: 0.2;
@@ -170,90 +132,65 @@ body::before {
/* Data Flow Lines */
.data-flow {
position: fixed;
height: 1px;
background: linear-gradient(
90deg,
transparent,
var(--accent-primary),
transparent
);
background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
opacity: 0.1;
z-index: -1;
animation: dataFlow 6s linear infinite;
}
/* ОБЯЗАТЕЛЬНО: Убедимся что основной контент поверх фона */
header, .section, footer {
position: relative;
z-index: 1;
}
/* Animations */
@keyframes backgroundPulse {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 0.8;
}
0%, 100% { opacity: 0.5; }
50% { opacity: 0.8; }
}
@keyframes fall {
to {
transform: translateY(100vh);
to {
transform: translateY(100vh);
}
}
@keyframes float {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(100px, 50px) rotate(90deg);
25% {
transform: translate(20px, 20px) rotate(5deg);
}
50% {
transform: translate(50px, 100px) rotate(180deg);
50% {
transform: translate(-15px, 30px) rotate(-5deg);
}
75% {
transform: translate(-50px, 75px) rotate(270deg);
75% {
transform: translate(10px, -10px) rotate(3deg);
}
}
@keyframes gridMove {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(40px, 40px);
}
0% { transform: translate(0, 0); }
100% { transform: translate(20px, 20px); }
}
@keyframes nodePulse {
0%,
100% {
transform: scale(1);
opacity: 0.2;
}
50% {
transform: scale(1.5);
opacity: 0.4;
}
0%, 100% { transform: scale(1); opacity: 0.2; }
50% { transform: scale(1.3); opacity: 0.4; }
}
@keyframes dataFlow {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
opacity: 0.3;
}
100% {
transform: translateX(100%);
opacity: 0;
}
0% { transform: translateX(-100%); opacity: 0; }
50% { opacity: 0.3; }
100% { transform: translateX(100%); opacity: 0; }
}
/* Interactive Elements */
.connection-node:hover {
opacity: 0.6;
transform: scale(2);
transform: scale(1.5);
transition: all 0.3s ease;
}
@@ -271,14 +208,19 @@ body::before {
/* Responsive Adjustments */
@media (max-width: 768px) {
.binary-digit {
font-size: 12px;
}
.circuit-grid {
background-size: 30px 30px;
}
.floating-code {
font-size: 10px;
}
.circuit-grid {
background-size: 20px 20px;
}
.floating-code {
font-size: 8px;
}
}
/* Убедимся что кнопка переключения темы всегда поверх всего */
.theme-toggle {
z-index: 1000 !important;
}