modified: main_dc/valitovgaziz/html/digital_background.js

modified:   main_dc/valitovgaziz/html/style.css
	modified:   main_dc/valitovgaziz/html/style/digital_background.css
add workible digital background

main_dc/valitovgaziz/html/digital_background.js

@@ -1,38 +1,67 @@
-// Initialize digital background
+// Digital Background Initialization
-document.addEventListener('DOMContentLoaded', function() {
+// Обновляем функцию для интеграции с темной темой
-  createBinaryRain();
+function updateBackgroundForTheme() {
-  createFloatingCode();
+  const isDarkMode = document.body.classList.contains('dark-mode');
-  createConnectionNodes();
+  const binaryDigits = document.querySelectorAll('.binary-digit');
-  createDataFlows();
+  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() {
   const container = document.createElement('div');
   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.top = `${-i * 25}px`; // Увеличиваем расстояние между цифрами
-    digit.style.animationDuration = `${3 + Math.random() * 4}s`;
+    digit.style.animationDuration = `${2 + Math.random() * 3}s`; // Быстрее анимация
-    digit.style.animationDelay = `${i * 0.2}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.width = `${40 + Math.random() * 50}%`;
-    flow.style.left = `${-Math.random() * 20}%`;
+    flow.style.left = `${-Math.random() * 30}%`;
-    flow.style.animationDuration = `${4 + Math.random() * 8}s`;
+    flow.style.animationDuration = `${5 + Math.random() * 10}s`;
-    flow.style.animationDelay = `${Math.random() * 6}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,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

@@ -1,7 +1,9 @@
 /* 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;
@@ -9,13 +11,13 @@
   --text-primary-light: #212529;
   --particle-color-light: rgba(0, 123, 255, 0.1);
   
-  /* Dark Theme Colors */
+  /* Dark Theme Colors - используем переменные из darkTheme.css */
-  --bg-primary-dark: #121212;
+  --bg-primary-dark: var(--dark-bg, #1a252f);
-  --bg-secondary-dark: #1e1e1e;
+  --bg-secondary-dark: var(--dark-card, #2c3e50);
-  --accent-primary-dark: #0d6efd;
+  --accent-primary-dark: var(--dark-secondary, #2980b9);
-  --accent-secondary-dark: #495057;
+  --accent-secondary-dark: var(--dark-border, #34495e);
-  --text-primary-dark: #f8f9fa;
+  --text-primary-dark: var(--dark-text, #ecf0f1);
-  --particle-color-dark: rgba(13, 110, 253, 0.15);
+  --particle-color-dark: rgba(41, 128, 185, 0.15);
   
   /* Current Theme - defaults to light */
   --bg-primary: var(--bg-primary-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(
+  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
-    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(
+  background: 
-      circle at 20% 80%,
+    radial-gradient(circle at 20% 80%, var(--particle-color) 0%, transparent 50%),
-      var(--particle-color) 0%,
+    radial-gradient(circle at 80% 20%, var(--particle-color) 0%, transparent 50%),
-      transparent 50%
+    radial-gradient(circle at 40% 40%, 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-family: 'Courier New', monospace;
-  font-size: 14px;
   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(
+  background-image: 
-      var(--accent-secondary) 1px,
+    linear-gradient(var(--accent-secondary) 1px, transparent 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-family: 'Courier New', monospace;
-  font-size: 12px;
   color: var(--accent-primary);
   opacity: 0.1;
   z-index: -1;
   pointer-events: none;
 }
 
-.code-bracket {
+.code-bracket { animation: float 15s ease-in-out infinite; }
-  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-parenthesis {
+.code-tag { animation: float 16s ease-in-out infinite reverse; }
-  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,27 +132,22 @@ 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%,
+  0%, 100% { opacity: 0.5; }
-  100% {
+  50% { opacity: 0.8; }
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 0.8;
-  }
 }
 
 @keyframes fall {
@@ -200,60 +157,40 @@ body::before {
 }
 
 @keyframes float {
-  0%,
+  0%, 100% { 
-  100% {
     transform: translate(0, 0) rotate(0deg); 
   }
   25% { 
-    transform: translate(100px, 50px) rotate(90deg);
+    transform: translate(20px, 20px) rotate(5deg); 
   }
   50% { 
-    transform: translate(50px, 100px) rotate(180deg);
+    transform: translate(-15px, 30px) rotate(-5deg); 
   }
   75% { 
-    transform: translate(-50px, 75px) rotate(270deg);
+    transform: translate(10px, -10px) rotate(3deg); 
   }
 }
 
 @keyframes gridMove {
-  0% {
+  0% { transform: translate(0, 0); }
-    transform: translate(0, 0);
+  100% { transform: translate(20px, 20px); }
-  }
-  100% {
-    transform: translate(40px, 40px);
-  }
 }
 
 @keyframes nodePulse {
-  0%,
+  0%, 100% { transform: scale(1); opacity: 0.2; }
-  100% {
+  50% { transform: scale(1.3); opacity: 0.4; }
-    transform: scale(1);
-    opacity: 0.2;
-  }
-  50% {
-    transform: scale(1.5);
-    opacity: 0.4;
-  }
 }
 
 @keyframes dataFlow {
-  0% {
+  0% { transform: translateX(-100%); opacity: 0; }
-    transform: translateX(-100%);
+  50% { opacity: 0.3; }
-    opacity: 0;
+  100% { 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;
+    font-size: 10px;
   }
   
   .circuit-grid {
-    background-size: 30px 30px;
+    background-size: 20px 20px;
   }
   
   .floating-code {
-    font-size: 10px;
+    font-size: 8px;
   }
 }
+
+/* Убедимся что кнопка переключения темы всегда поверх всего */
+.theme-toggle {
+  z-index: 1000 !important;
+}