KZdra.github.io/script.js at main · KZdra/KZdra.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
112
113
114
115
/**
 * Interactive functionality for KZdra Profile Landing Page
 */

document.addEventListener('DOMContentLoaded', () => {
    // Dynamic Year in Footer
    const yearEl = document.getElementById('year');
    if (yearEl) {
        yearEl.textContent = new Date().getFullYear();
    }

    // Elements
    const toast = document.getElementById('toast');
    const toastMessage = document.getElementById('toast-message');
    const btnShare = document.getElementById('btn-share');
    const btnCopyLink = document.getElementById('btn-copy-link');
    const linkCards = document.querySelectorAll('.link-card');

    let toastTimeout;

    /**
     * Show toast message
     * @param {string} msg
     */
    function showToast(msg) {
        if (!toast) return;

        if (toastMessage) {
            toastMessage.textContent = msg;
        }

        clearTimeout(toastTimeout);
        toast.classList.add('show');

        toastTimeout = setTimeout(() => {
            toast.classList.remove('show');
        }, 3000);
    }

    /**
     * Copy text to clipboard with fallback
     * @param {string} text
     * @param {string} successMessage
     */
    async function copyToClipboard(text, successMessage) {
        try {
            if (navigator.clipboard && window.isSecureContext) {
                await navigator.clipboard.writeText(text);
                showToast(successMessage);
            } else {
                // Fallback for non-https/legacy
                const textArea = document.createElement('textarea');
                textArea.value = text;
                textArea.style.position = 'fixed';
                textArea.style.opacity = '0';
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                const successful = document.execCommand('copy');
                document.body.removeChild(textArea);

                if (successful) {
                    showToast(successMessage);
                } else {
                    showToast('Failed to copy link');
                }
            }
        } catch (err) {
            console.error('Clipboard copy error:', err);
            showToast('Failed to copy link');
        }
    }

    // Share Button Handler
    if (btnShare) {
        btnShare.addEventListener('click', async () => {
            const shareData = {
                title: 'Indra Hardika (@KZdra)',
                text: 'Check out Indra Hardika\'s developer links and portfolio!',
                url: window.location.href
            };

            if (navigator.share && navigator.canShare && navigator.canShare(shareData)) {
                try {
                    await navigator.share(shareData);
                } catch (err) {
                    if (err.name !== 'AbortError') {
                        copyToClipboard(window.location.href, 'Link copied to clipboard!');
                    }
                }
            } else {
                copyToClipboard(window.location.href, 'Link copied to clipboard!');
            }
        });
    }

    // Copy Link Button Handler
    if (btnCopyLink) {
        btnCopyLink.addEventListener('click', () => {
            copyToClipboard(window.location.href, 'Profile link copied to clipboard!');
        });
    }

    // Dynamic Spotlight Effect on Cards
    linkCards.forEach(card => {
        card.addEventListener('mousemove', (e) => {
            const rect = card.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            card.style.setProperty('--mouse-x', `${x}px`);
            card.style.setProperty('--mouse-y', `${y}px`);
        });
    });
});