scripts.js

// Main JavaScript file for the AI Personality Creator

document.addEventListener('DOMContentLoaded', function() {
    // Auto-resize textareas
    const textareas = document.querySelectorAll('textarea');
    textareas.forEach(textarea => {
        textarea.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });
        
        // Initial height adjustment
        textarea.style.height = 'auto';
        textarea.style.height = (textarea.scrollHeight) + 'px';
    });
    
    // File input preview for avatar uploads
    const fileInput = document.getElementById('avatar');
    if (fileInput) {
        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file && file.type.match('image.*')) {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    // Check if preview container exists, if not create it
                    let previewContainer = document.querySelector('.avatar-preview');
                    
                    if (!previewContainer) {
                        previewContainer = document.createElement('div');
                        previewContainer.className = 'avatar-preview';
                        previewContainer.style.width = '100px';
                        previewContainer.style.height = '100px';
                        previewContainer.style.borderRadius = '50%';
                        previewContainer.style.overflow = 'hidden';
                        previewContainer.style.margin = '10px 0';
                        previewContainer.style.border = '2px solid #e2e8f0';
                        
                        const img = document.createElement('img');
                        img.style.width = '100%';
                        img.style.height = '100%';
                        img.style.objectFit = 'cover';
                        
                        previewContainer.appendChild(img);
                        fileInput.parentNode.insertBefore(previewContainer, fileInput.nextSibling);
                    }
                    
                    const img = previewContainer.querySelector('img');
                    img.src = e.target.result;
                };
                
                reader.readAsDataURL(file);
            }
        });
    }
    
    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });
});