Hugging Face's logo

Spaces:
alexdatamed
/
Sql_Basics
Running

App Files Community
Sql_Basics
File size: 5,088 Bytes
aaccada
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// ============================================
// 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;');