Create script.js

script.js

@@ -0,0 +1,129 @@
+// ============================================
+// Git для новачків - Інтерактивність дашборду
+// ============================================
+
+// Ініціалізація при завантаженні сторінки
+document.addEventListener('DOMContentLoaded', function() {
+    initTabs();
+    initCopyButtons();
+    initSmoothScroll();
+});
+
+// ============================================
+// ФУНКЦІЯ: Ініціалізація табів
+// ============================================
+function initTabs() {
+    const tabButtons = document.querySelectorAll('.tab-button');
+    const tabContents = document.querySelectorAll('.tab-content');
+
+    tabButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const tabName = this.getAttribute('data-tab');
+
+            // Видалення активного класу з усіх кнопок та контенту
+            tabButtons.forEach(btn => btn.classList.remove('active'));
+            tabContents.forEach(content => content.classList.remove('active'));
+
+            // Додавання активного класу до вибраного таба
+            this.classList.add('active');
+            document.getElementById(tabName).classList.add('active');
+
+            // Плавна прокрутка до контенту
+            smoothScrollToElement('#' + tabName);
+        });
+    });
+}
+
+// ============================================
+// ФУНКЦІЯ: Копіювання коду в буфер обміну
+// ============================================
+function initCopyButtons() {
+    const codeBlocks = document.querySelectorAll('pre code');
+
+    codeBlocks.forEach(codeBlock => {
+        // Створення кнопки копіювання
+        const copyButton = document.createElement('button');
+        copyButton.textContent = '📋 Копіювати';
+        copyButton.className = 'copy-button';
+        copyButton.style.cssText = `
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            padding: 5px 10px;
+            background: #f05033;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.8rem;
+            opacity: 0;
+            transition: opacity 0.2s;
+        `;
+
+        // Огортання pre в контейнер з позицією
+        const preElement = codeBlock.parentElement;
+        preElement.style.position = 'relative';
+        preElement.appendChild(copyButton);
+
+        // Показ кнопки при наведенні
+        preElement.addEventListener('mouseenter', function() {
+            copyButton.style.opacity = '1';
+        });
+
+        preElement.addEventListener('mouseleave', function() {
+            copyButton.style.opacity = '0';
+        });
+
+        // Функція копіювання
+        copyButton.addEventListener('click', function() {
+            const text = codeBlock.textContent;
+            navigator.clipboard.writeText(text).then(function() {
+                copyButton.textContent = '✅ Скопійовано!';
+                setTimeout(function() {
+                    copyButton.textContent = '📋 Копіювати';
+                }, 2000);
+            }).catch(function(err) {
+                console.error('Помилка копіювання:', err);
+                copyButton.textContent = '❌ Помилка';
+                setTimeout(function() {
+                    copyButton.textContent = '📋 Копіювати';
+                }, 2000);
+            });
+        });
+    });
+}
+
+// ============================================
+// ФУНКЦІЯ: Плавна прокрутка
+// ============================================
+function smoothScrollToElement(selector) {
+    const element = document.querySelector(selector);
+    if (element) {
+        const elementPosition = element.getBoundingClientRect().top + window.scrollY;
+        const offsetPosition = elementPosition - 100;
+
+        window.scrollBy({
+            top: offsetPosition - window.scrollY,
+            behavior: 'smooth'
+        });
+    }
+}
+
+function initSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                smoothScrollToElement(this.getAttribute('href'));
+            }
+        });
+    });
+}
+
+// ============================================
+// ФУНКЦІЯ: Логування версії
+// ============================================
+console.log('%c🚀 Git для новачків', 'font-size: 20px; color: #f05033; font-weight: bold;');
+console.log('%cДашборд успішно завантажено!', 'font-size: 14px; color: #244c5a;');
+console.log('%cПочніть з вкладки "Базові команди"', 'font-size: 12px; color: #718096;');