script.js

        // ===== WAIT FOR DOM =====
        document.addEventListener('DOMContentLoaded', function() {
            
            // ===== REFERENCES =====
            var form = document.getElementById("cardForm");
            var previewContainer = document.getElementById("preview");
            var cardsGallery = document.getElementById("cardsGallery");
            var addLinkBtn = document.getElementById("addbtn");
            var linksContainer = document.getElementById("links");
            var themeBtn = document.getElementById("themebtn");
            var galleryEmpty = document.getElementById("galleryEmpty");
            var cardCountEl = document.getElementById("cardCount");
            var nameInput = document.getElementById("name");
            var ageInput = document.getElementById("age");
            var emailInput = document.getElementById("email");
            var bioInput = document.getElementById("bio");
            var picInput = document.getElementById("pic");
            var picurlInput = document.getElementById("picurl");
            var color1Input = document.getElementById("color1");
            var color2Input = document.getElementById("color2");
            var totalCards = 0;

            // ===== THEME TOGGLE =====
            themeBtn.addEventListener("click", function() {
                document.body.classList.toggle("dark");
                var icon = themeBtn.querySelector("i");
                if (document.body.classList.contains("dark")) {
                    icon.className = "fas fa-sun";
                } else {
                    icon.className = "fas fa-moon";
                }
            });

            // ===== TOAST =====
            function showToast(msg) {
                var toast = document.getElementById("toast");
                document.getElementById("toastMsg").textContent = msg;
                toast.classList.add("show");
                setTimeout(function() {
                    toast.classList.remove("show");
                }, 3000);
            }

            // ===== DETECT SOCIAL MEDIA =====
            function detectSocialMedia(url) {
                if (!url || !url.trim()) return null;
                
                url = url.trim();
                
                if (url.indexOf('linkedin.com') !== -1) return { platform: 'linkedin', icon: 'fab fa-linkedin-in', url: url };
                if (url.indexOf('github.com') !== -1) return { platform: 'github', icon: 'fab fa-github', url: url };
                if (url.indexOf('instagram.com') !== -1) return { platform: 'instagram', icon: 'fab fa-instagram', url: url };
                if (url.indexOf('twitter.com') !== -1 || url.indexOf('x.com') !== -1) return { platform: 'twitter', icon: 'fab fa-twitter', url: url };
                if (url.indexOf('facebook.com') !== -1) return { platform: 'facebook', icon: 'fab fa-facebook-f', url: url };
                if (url.indexOf('youtube.com') !== -1) return { platform: 'youtube', icon: 'fab fa-youtube', url: url };
                if (url.indexOf('tiktok.com') !== -1) return { platform: 'tiktok', icon: 'fab fa-tiktok', url: url };
                if (url.indexOf('wa.me') !== -1 || url.indexOf('whatsapp') !== -1) return { platform: 'whatsapp', icon: 'fab fa-whatsapp', url: url };
                if (url.indexOf('t.me') !== -1 || url.indexOf('telegram') !== -1) return { platform: 'telegram', icon: 'fab fa-telegram-plane', url: url };
                
                return { platform: 'website', icon: 'fas fa-globe', url: url };
            }

            // ===== GET FORM DATA =====
            function getFormData() {
                var socialLinks = [];
                var linkInputs = document.querySelectorAll(".link");
                
                for (var i = 0; i < linkInputs.length; i++) {
                    var val = linkInputs[i].value;
                    if (val && val.trim()) {
                        var detected = detectSocialMedia(val.trim());
                        if (detected) socialLinks.push(detected);
                    }
                }

                return {
                    name: nameInput.value.trim(),
                    age: ageInput.value.trim(),
                    email: emailInput.value.trim(),
                    bio: bioInput.value.trim(),
                    profilePic: picurlInput.value.trim(),
                    color1: color1Input.value,
                    color2: color2Input.value,
                    socialLinks: socialLinks
                };
            }

            // ===== CREATE CARD HTML =====
            function createCardHTML(data, isPreview) {
                var avatarURL = 'https://ui-avatars.com/api/?name=' + encodeURIComponent(data.name || 'U') + '&background=random&color=fff&size=150&bold=true';
                var imgSrc = data.profilePic || avatarURL;
                
                var socialsHTML = '';
                if (data.socialLinks && data.socialLinks.length > 0) {
                    socialsHTML = '<div class="socials">';
                    for (var i = 0; i < data.socialLinks.length; i++) {
                        var link = data.socialLinks[i];
                        socialsHTML += '<a href="' + link.url + '" target="_blank" class="social" title="' + link.platform + '"><i class="' + link.icon + '"></i></a>';
                    }
                    socialsHTML += '</div>';
                }

                var actionsHTML = '';
                if (!isPreview) {
                    actionsHTML = '<div class="card-actions">' +
                        '<button class="download-main-btn" onclick="toggleDownload(this)"><i class="fas fa-download"></i> DOWNLOAD CARD</button>' +
                        '<div class="download-formats">' +
                            '<button class="fmt-btn" onclick="downloadCard(this,\'png\')"><i class="fas fa-image"></i> PNG</button>' +
                            '<button class="fmt-btn" onclick="downloadCard(this,\'jpg\')"><i class="fas fa-file-image"></i> JPG</button>' +
                            '<button class="fmt-btn" onclick="downloadCard(this,\'pdf\')"><i class="fas fa-file-pdf"></i> PDF</button>' +
                        '</div>' +
                        '<button class="share-main-btn" onclick="toggleShare(this)"><i class="fas fa-share-alt"></i> SHARE CARD</button>' +
                        '<div class="share-options">' +
                            '<div class="share-item"><button class="share-icon-btn wa" onclick="shareWhatsApp(this)"><i class="fab fa-whatsapp"></i></button><span class="share-label">WhatsApp</span></div>' +
                            '<div class="share-item"><button class="share-icon-btn fb" onclick="shareFacebook(this)"><i class="fab fa-facebook-f"></i></button><span class="share-label">Facebook</span></div>' +
                            '<div class="share-item"><button class="share-icon-btn tw" onclick="shareTwitter(this)"><i class="fab fa-twitter"></i></button><span class="share-label">Twitter</span></div>' +
                            '<div class="share-item"><button class="share-icon-btn li" onclick="shareLinkedIn(this)"><i class="fab fa-linkedin-in"></i></button><span class="share-label">LinkedIn</span></div>' +
                            '<div class="share-item"><button class="share-icon-btn tg" onclick="shareTelegram(this)"><i class="fab fa-telegram-plane"></i></button><span class="share-label">Telegram</span></div>' +
                            '<div class="share-item"><button class="share-icon-btn em" onclick="shareEmail(this)"><i class="fas fa-envelope"></i></button><span class="share-label">Email</span></div>' +
                            '<div class="share-item"><button class="share-icon-btn cp" onclick="copyCardInfo(this)"><i class="fas fa-link"></i></button><span class="share-label">Copy</span></div>' +
                        '</div>' +
                    '</div>';
                }

                var html = '<div class="card' + (isPreview ? '' : ' card-animate') + '" style="background: linear-gradient(135deg, ' + data.color1 + ' 0%, ' + data.color2 + ' 100%);" data-name="' + (data.name || 'User') + '" data-age="' + (data.age || '') + '" data-email="' + (data.email || '') + '" data-bio="' + (data.bio || '') + '">' +
                    '<div class="profile">' +
                        '<img src="' + imgSrc + '" alt="Profile" onerror="this.src=\'' + avatarURL + '\'">' +
                    '</div>' +
                    '<h3>' + (data.name || 'Your Name') + '</h3>' +
                    '<h5>' + (data.age ? data.age + ' years old' : '') + '</h5>' +
                    '<p class="card-email"><i class="fas fa-envelope"></i> ' + (data.email || 'email@example.com') + '</p>' +
                    (data.bio ? '<p class="card-bio">' + data.bio + '</p>' : '') +
                    socialsHTML +
                    actionsHTML +
                '</div>';

                return html;
            }

            // ===== UPDATE PREVIEW - MAIN FUNCTION =====
            function updatePreview() {
                console.log("updatePreview called!"); // Debug
                
                var data = getFormData();
                
                console.log("Form data:", data); // Debug
                
                if (data.name || data.email || data.bio || data.age) {
                    previewContainer.innerHTML = createCardHTML(data, true);
                    console.log("Preview updated with card"); // Debug
                } else {
                    previewContainer.innerHTML = '<div class="preview-empty"><i class="far fa-address-card"></i><h4>No preview yet</h4><p>Start filling the form to see your card</p></div>';
                    console.log("Preview shows empty state"); // Debug
                }
            }

            // ===== ATTACH ALL LISTENERS =====
            
            // Text inputs - both 'input' and 'keyup' for safety
            nameInput.addEventListener("input", updatePreview);
            nameInput.addEventListener("keyup", updatePreview);
            
            ageInput.addEventListener("input", updatePreview);
            ageInput.addEventListener("keyup", updatePreview);
            
            emailInput.addEventListener("input", updatePreview);
            emailInput.addEventListener("keyup", updatePreview);
            
            bioInput.addEventListener("input", updatePreview);
            bioInput.addEventListener("keyup", updatePreview);
            
            picurlInput.addEventListener("input", updatePreview);
            picurlInput.addEventListener("keyup", updatePreview);
            
            // Color inputs - use 'input' for live update while dragging
            color1Input.addEventListener("input", updatePreview);
            color1Input.addEventListener("change", updatePreview);
            
            color2Input.addEventListener("input", updatePreview);
            color2Input.addEventListener("change", updatePreview);
            
            // Initial link input
            var initialLink = document.querySelector(".link");
            if (initialLink) {
                initialLink.addEventListener("input", updatePreview);
                initialLink.addEventListener("keyup", updatePreview);
            }

            // ===== FILE UPLOAD =====
            picInput.addEventListener("change", function(e) {
                var file = e.target.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function(ev) {
                        picurlInput.value = ev.target.result;
                        updatePreview();
                    };
                    reader.readAsDataURL(file);
                }
            });

            // ===== ADD LINK =====
            addLinkBtn.addEventListener("click", function() {
                var div = document.createElement("div");
                div.className = "link-input";
                div.innerHTML = '<input type="text" class="link" placeholder="https://github.com/username"><button type="button" class="remove-link-btn"><i class="fas fa-times"></i></button>';
                linksContainer.appendChild(div);

                var newInput = div.querySelector("input");
                newInput.addEventListener("input", updatePreview);
                newInput.addEventListener("keyup", updatePreview);
                
                div.querySelector(".remove-link-btn").addEventListener("click", function() {
                    div.remove();
                    updatePreview();
                });
                
                newInput.focus();
            });

            // ===== FORM SUBMIT =====
            form.addEventListener("submit", function(e) {
                e.preventDefault();
                
                var data = getFormData();

                if (!data.name || !data.email) {
                    showToast("⚠️ Please fill Name and Email!");
                    return;
                }

                if (galleryEmpty) galleryEmpty.style.display = "none";

                var tempDiv = document.createElement("div");
                tempDiv.innerHTML = createCardHTML(data, false);
                var card = tempDiv.firstChild;
                cardsGallery.appendChild(card);

                totalCards++;
                cardCountEl.textContent = totalCards + (totalCards === 1 ? ' card' : ' cards');

                showToast("✅ Card generated successfully!");

                setTimeout(function() {
                    card.scrollIntoView({ behavior: "smooth", block: "center" });
                }, 300);

                // Reset form
                form.reset();
                color1Input.value = "#0366d6";
                color2Input.value = "#2ea44f";
                linksContainer.innerHTML = '<div class="link-input"><input type="text" class="link" placeholder="https://linkedin.com/in/username"></div>';
                
                // Re-attach listener to new link input
                var newLinkInput = document.querySelector(".link");
                if (newLinkInput) {
                    newLinkInput.addEventListener("input", updatePreview);
                    newLinkInput.addEventListener("keyup", updatePreview);
                }

                previewContainer.innerHTML = '<div class="preview-empty"><i class="far fa-address-card"></i><h4>No preview yet</h4><p>Start filling the form to see your card</p></div>';
            });

            console.log("All listeners attached!"); // Debug

        }); // End DOMContentLoaded

        // ===== GLOBAL FUNCTIONS (for onclick) =====
        
        function toggleDownload(btn) {
            var formats = btn.nextElementSibling;
            formats.classList.toggle("show");
            var shareOpts = btn.parentElement.querySelector('.share-options');
            if (shareOpts) shareOpts.classList.remove("show");
        }

        function toggleShare(btn) {
            var opts = btn.nextElementSibling;
            opts.classList.toggle("show");
            var dlFormats = btn.parentElement.querySelector('.download-formats');
            if (dlFormats) dlFormats.classList.remove("show");
        }

        function showToastGlobal(msg) {
            var toast = document.getElementById("toast");
            document.getElementById("toastMsg").textContent = msg;
            toast.classList.add("show");
            setTimeout(function() { toast.classList.remove("show"); }, 3000);
        }

        function downloadCard(btn, format) {
            var card = btn.closest('.card');
            var actions = card.querySelector('.card-actions');
            var cardName = card.getAttribute('data-name') || 'card';

            if (actions) actions.style.display = 'none';
            var originalTransform = card.style.transform;
            card.style.transform = 'none';

            html2canvas(card, {
                scale: 3,
                useCORS: true,
                allowTaint: true,
                backgroundColor: null,
                logging: false
            }).then(function(canvas) {
                if (actions) actions.style.display = '';
                card.style.transform = originalTransform;
                card.classList.add('card-rotating');

                setTimeout(function() {
                    card.classList.remove('card-rotating');

                    if (format === 'png') {
                        var link = document.createElement('a');
                        link.download = cardName + '-card.png';
                        link.href = canvas.toDataURL('image/png');
                        link.click();
                        showToastGlobal("✅ PNG downloaded!");
                    } 
                    else if (format === 'jpg') {
                        var jpgCanvas = document.createElement('canvas');
                        jpgCanvas.width = canvas.width;
                        jpgCanvas.height = canvas.height;
                        var ctx = jpgCanvas.getContext('2d');
                        ctx.fillStyle = '#ffffff';
                        ctx.fillRect(0, 0, jpgCanvas.width, jpgCanvas.height);
                        ctx.drawImage(canvas, 0, 0);
                        var link = document.createElement('a');
                        link.download = cardName + '-card.jpg';
                        link.href = jpgCanvas.toDataURL('image/jpeg', 0.95);
                        link.click();
                        showToastGlobal("✅ JPG downloaded!");
                    } 
                    else if (format === 'pdf') {
                        var jsPDF = window.jspdf.jsPDF;
                        var pdf = new jsPDF('p', 'mm', 'a4');
                        var imgData = canvas.toDataURL('image/png');
                        var imgW = 90;
                        var imgH = (canvas.height * imgW) / canvas.width;
                        var x = (210 - imgW) / 2;
                        pdf.addImage(imgData, 'PNG', x, 20, imgW, imgH);
                        pdf.save(cardName + '-card.pdf');
                        showToastGlobal("✅ PDF downloaded!");
                    }
                }, 1200);

            }).catch(function(err) {
                console.error('Download error:', err);
                if (actions) actions.style.display = '';
                card.style.transform = originalTransform;
                showToastGlobal("❌ Download failed!");
            });
        }

        function getCardText(btn) {
            var card = btn.closest('.card');
            var name = card.getAttribute('data-name');
            var age = card.getAttribute('data-age');
            var email = card.getAttribute('data-email');
            var bio = card.getAttribute('data-bio');
            
            var text = '👤 ' + name + "'s Professional Card\n";
            if (age) text += '🎂 Age: ' + age + '\n';
            if (email) text += '📧 Email: ' + email + '\n';
            if (bio) text += '📝 Bio: ' + bio + '\n';
            text += '\n🚀 Made with CardGen Pro';
            return text;
        }

        function shareWhatsApp(btn) {
            window.open('https://wa.me/?text=' + encodeURIComponent(getCardText(btn)), '_blank');
            showToastGlobal("📤 Opening WhatsApp...");
        }

        function shareFacebook(btn) {
            window.open('https://www.facebook.com/sharer/sharer.php?quote=' + encodeURIComponent(getCardText(btn)), '_blank');
            showToastGlobal("📤 Opening Facebook...");
        }

        function shareTwitter(btn) {
            window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(getCardText(btn)), '_blank');
            showToastGlobal("📤 Opening Twitter...");
        }

        function shareLinkedIn(btn) {
            window.open('https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(window.location.href), '_blank');
            showToastGlobal("📤 Opening LinkedIn...");
        }

        function shareTelegram(btn) {
            window.open('https://t.me/share/url?url=' + encodeURIComponent(window.location.href) + '&text=' + encodeURIComponent(getCardText(btn)), '_blank');
            showToastGlobal("📤 Opening Telegram...");
        }

        function shareEmail(btn) {
            var card = btn.closest('.card');
            var name = card.getAttribute('data-name');
            window.open('mailto:?subject=' + encodeURIComponent(name + "'s Card") + '&body=' + encodeURIComponent(getCardText(btn)));
            showToastGlobal("📤 Opening Email...");
        }

        function copyCardInfo(btn) {
            navigator.clipboard.writeText(getCardText(btn)).then(function() {
                var icon = btn.querySelector('i');
                icon.className = 'fas fa-check';
                showToastGlobal("📋 Copied to clipboard!");
                setTimeout(function() { icon.className = 'fas fa-link'; }, 2000);
            });
        }