diff --git a/main_dc/valitovgaziz/html/digital_background.js b/main_dc/valitovgaziz/html/digital_background.js new file mode 100644 index 0000000..9be1465 --- /dev/null +++ b/main_dc/valitovgaziz/html/digital_background.js @@ -0,0 +1,81 @@ +// Initialize digital background +document.addEventListener('DOMContentLoaded', function() { + createBinaryRain(); + createFloatingCode(); + createConnectionNodes(); + createDataFlows(); +}); + +// 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++) { + setTimeout(() => { + createBinaryStream(container); + }, i * 200); + } +} + +function createBinaryStream(container) { + const stream = document.createElement('div'); + stream.className = 'binary-stream'; + const left = Math.random() * 100; + stream.style.left = `${left}%`; + + for (let i = 0; i < 20; i++) { + const digit = document.createElement('div'); + digit.className = 'binary-digit'; + digit.textContent = Math.random() > 0.5 ? '1' : '0'; + 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`; + stream.appendChild(digit); + } + + container.appendChild(stream); +} + +// Create floating code elements +function createFloatingCode() { + const symbols = ['{', '}', '<>', '();', '[]', '', '=>', '&&']; + const classes = ['code-bracket', 'code-parenthesis', 'code-brace', 'code-tag']; + + symbols.forEach((symbol, index) => { + const element = document.createElement('div'); + element.className = `floating-code ${classes[index % classes.length]}`; + element.textContent = symbol; + element.style.left = `${Math.random() * 100}%`; + element.style.top = `${Math.random() * 100}%`; + document.body.appendChild(element); + }); +} + +// Create connection nodes +function createConnectionNodes() { + for (let i = 0; i < 15; 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`; + document.body.appendChild(node); + } +} + +// Create data flow lines +function createDataFlows() { + for (let i = 0; i < 8; 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`; + document.body.appendChild(flow); + } +} \ No newline at end of file diff --git a/main_dc/valitovgaziz/html/index.html b/main_dc/valitovgaziz/html/index.html index 2d83285..3b2a9b4 100644 --- a/main_dc/valitovgaziz/html/index.html +++ b/main_dc/valitovgaziz/html/index.html @@ -14,6 +14,7 @@ + ValitovGaziz - Fullstack-разработчик diff --git a/main_dc/valitovgaziz/html/style/digital_background.css b/main_dc/valitovgaziz/html/style/digital_background.css index e69de29..101134e 100644 --- a/main_dc/valitovgaziz/html/style/digital_background.css +++ b/main_dc/valitovgaziz/html/style/digital_background.css @@ -0,0 +1,284 @@ +/* Digital Background for Software Development Website */ +/* CSS Variables for Theme Support */ +:root { + /* 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); + + /* Current Theme - defaults to light */ + --bg-primary: var(--bg-primary-light); + --bg-secondary: var(--bg-secondary-light); + --accent-primary: var(--accent-primary-light); + --accent-secondary: var(--accent-secondary-light); + --text-primary: var(--text-primary-light); + --particle-color: var(--particle-color-light); +} + +/* Dark Theme Class */ +body.dark-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); +} + +/* 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% + ); + color: var(--text-primary); + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + overflow-x: hidden; + position: relative; +} + +/* Animated Background Elements */ +body::before { + 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% + ); + animation: backgroundPulse 8s ease-in-out infinite; + z-index: -1; +} + +/* Binary Code Rain Effect */ +.binary-rain { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: -1; + opacity: 0.4; +} + +.binary-digit { + position: absolute; + color: var(--accent-primary); + font-family: "Courier New", monospace; + font-size: 14px; + font-weight: bold; + animation: fall linear infinite; + text-shadow: 0 0 8px currentColor; +} + +/* Circuit Board Grid */ +.circuit-grid { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + 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; + animation: gridMove 20s linear infinite; +} + +/* Floating Code Elements */ +.floating-code { + position: fixed; + font-family: "Courier New", monospace; + font-size: 12px; + 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; +} + +/* Connection Nodes */ +.connection-node { + position: fixed; + width: 6px; + height: 6px; + background: var(--accent-primary); + border-radius: 50%; + opacity: 0.2; + z-index: -1; + animation: nodePulse 4s ease-in-out infinite; +} + +/* Data Flow Lines */ +.data-flow { + position: fixed; + height: 1px; + background: linear-gradient( + 90deg, + transparent, + var(--accent-primary), + transparent + ); + opacity: 0.1; + z-index: -1; + animation: dataFlow 6s linear infinite; +} + +/* Animations */ +@keyframes backgroundPulse { + 0%, + 100% { + opacity: 0.5; + } + 50% { + opacity: 0.8; + } +} + +@keyframes fall { + to { + transform: translateY(100vh); + } +} + +@keyframes float { + 0%, + 100% { + transform: translate(0, 0) rotate(0deg); + } + 25% { + transform: translate(100px, 50px) rotate(90deg); + } + 50% { + transform: translate(50px, 100px) rotate(180deg); + } + 75% { + transform: translate(-50px, 75px) rotate(270deg); + } +} + +@keyframes gridMove { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(40px, 40px); + } +} + +@keyframes nodePulse { + 0%, + 100% { + transform: scale(1); + opacity: 0.2; + } + 50% { + transform: scale(1.5); + opacity: 0.4; + } +} + +@keyframes dataFlow { + 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); + transition: all 0.3s ease; +} + +/* Performance Optimizations */ +@media (prefers-reduced-motion: reduce) { + .binary-digit, + .floating-code, + .connection-node, + .data-flow, + body::before { + animation: none; + } +} + +/* Responsive Adjustments */ +@media (max-width: 768px) { + .binary-digit { + font-size: 12px; + } + + .circuit-grid { + background-size: 30px 30px; + } + + .floating-code { + font-size: 10px; + } +}