script-sql.js

// ============================================
// SQL для новачків - Інтерактивність дашборду
// ============================================

// Ініціалізація при завантаженні сторінки
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: #2563eb;
            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📊 SQL для новачків', 'font-size: 20px; color: #2563eb; font-weight: bold;');
console.log('%cДашборд успішно завантажено!', 'font-size: 14px; color: #1e40af;');
console.log('%cПочніть з вкладки "Базові запити"', 'font-size: 12px; color: #718096;');