kuska1.github.io/script.js at main · kuska1/kuska1.github.io · GitHub

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
document.addEventListener('DOMContentLoaded', () => {
    const themeDropdown = document.getElementById('theme-dropdown');
    const themeMenu = document.getElementById('theme-menu');

    // Material Design Icons for Light, Dark, System
    const themes = [
        { id: 'light', label: 'Light', icon: 'M8.463 15.538Q7 14.075 7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17t-3.537-1.463M2 13q-.425 0-.712-.288T1 12t.288-.712T2 11h2q.425 0 .713.288T5 12t-.288.713T4 13zm18 0q-.425 0-.712-.288T19 12t.288-.712T20 11h2q.425 0 .713.288T23 12t-.288.713T22 13zm-8.712-8.287Q11 4.425 11 4V2q0-.425.288-.712T12 1t.713.288T13 2v2q0 .425-.288.713T12 5t-.712-.288m0 18Q11 22.426 11 22v-2q0-.425.288-.712T12 19t.713.288T13 20v2q0 .425-.288.713T12 23t-.712-.288M5.65 7.05L4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7t-.687.288t-.713-.288M18 19.425l-1.05-1.075q-.275-.3-.275-.712t.275-.688q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3M16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275M4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.288.688t-.288.712L6 19.425q-.275.3-.7.288t-.725-.288' },
        { id: 'dark', label: 'Dark', icon: 'M12 21q-3.775 0-6.387-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.325-.05.575.088t.4.362t.163.525t-.188.575q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.275-.175.563-.162t.512.137q.25.125.388.375t.087.6q-.35 3.45-2.937 5.725T12 21' },
        { id: 'system', label: 'System', icon: 'M8.1 21.213q-1.825-.788-3.175-2.138T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22t-3.9-.788m4.9-1.287q2.975-.375 4.988-2.613T20 12t-2.013-5.312T13 4.075z' }
    ];

    let currentTheme = localStorage.getItem('theme') || 'system';

    function applyTheme(theme) {
        if (theme === 'system') {
            document.documentElement.style.colorScheme = 'light dark';
        } else {
            document.documentElement.style.colorScheme = theme;
        }
    }

    function renderThemeMenu() {
        themeMenu.innerHTML = '';
        themes.forEach(t => {
            const btn = document.createElement('button');
            btn.className = `dropdown-item ${t.id === currentTheme ? 'active' : ''}`;
            btn.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"  fill="currentColor">
                    <path d="${t.icon}"/>
                </svg>
                ${t.label}
            `;
            btn.onclick = () => {
                currentTheme = t.id;
                localStorage.setItem('theme', currentTheme);
                applyTheme(currentTheme);
                themeDropdown.classList.remove('active');
                renderThemeMenu();
            };
            themeMenu.appendChild(btn);
        });
    }

    const themeToggle = document.getElementById('theme-toggle');
    themeToggle.addEventListener('click', (e) => {
        e.stopPropagation();
        themeDropdown.classList.toggle('active');
    });

    document.addEventListener('click', (e) => {
        if (!themeDropdown.contains(e.target)) {
            themeDropdown.classList.remove('active');
        }
    });

    // App Bar scroll elevation
    const appBar = document.getElementById('app-bar');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 0) {
            appBar.classList.add('scrolled');
        } else {
            appBar.classList.remove('scrolled');
        }
    });

    // Initial setup
    applyTheme(currentTheme);
    renderThemeMenu();

    // Copy Dialog Logic
    const copyBtns = document.querySelectorAll('.copy-btn');
    const copyDialogOverlay = document.getElementById('copy-dialog-overlay');
    const copyAddressInput = document.getElementById('copy-address-input');
    const copyDialogClose = document.getElementById('copy-dialog-close');
    const copyDialogConfirm = document.getElementById('copy-dialog-confirm');

    copyBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.preventDefault();
            const address = btn.getAttribute('data-address');
            if (address) {
                copyAddressInput.value = address;
                copyDialogOverlay.classList.add('active');
                copyDialogConfirm.textContent = 'Copy'; // Reset text
            }
        });
    });

    copyDialogClose.addEventListener('click', () => {
        copyDialogOverlay.classList.remove('active');
    });

    copyDialogOverlay.addEventListener('click', (e) => {
        if (e.target === copyDialogOverlay) {
            copyDialogOverlay.classList.remove('active');
        }
    });

    copyDialogConfirm.addEventListener('click', () => {
        const textToCopy = copyAddressInput.value;
        navigator.clipboard.writeText(textToCopy).then(() => {
            copyDialogConfirm.textContent = 'Copied!';
            setTimeout(() => {
                copyDialogOverlay.classList.remove('active');
            }, 1000);
        }).catch(err => {
            console.error('Failed to copy: ', err);
            copyDialogConfirm.textContent = 'Error';
        });
    });
});