static/js/main.js

// Marine Species API - Main JavaScript

// Global state
window.MarineAPI = {
    baseURL: window.location.origin,
    currentImage: null,
    isProcessing: false
};

// Utility functions
const utils = {
    // Show/hide loading state
    setLoading: (element, isLoading) => {
        if (isLoading) {
            element.disabled = true;
            element.innerHTML = '<span class="spinner"></span> Processing...';
        } else {
            element.disabled = false;
            element.innerHTML = element.dataset.originalText || 'Identify Marine Life';
        }
    },

    // Format file size
    formatFileSize: (bytes) => {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    },

    // Show notification
    showNotification: (message, type = 'info') => {
        // Simple notification system
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.textContent = message;
        
        // Style the notification
        Object.assign(notification.style, {
            position: 'fixed',
            top: '20px',
            right: '20px',
            padding: '12px 20px',
            borderRadius: '8px',
            color: 'white',
            fontWeight: '500',
            zIndex: '1000',
            transform: 'translateX(100%)',
            transition: 'transform 0.3s ease'
        });

        // Set background color based on type
        const colors = {
            success: '#059669',
            error: '#dc2626',
            warning: '#d97706',
            info: '#2563eb'
        };
        notification.style.backgroundColor = colors[type] || colors.info;

        document.body.appendChild(notification);

        // Animate in
        setTimeout(() => {
            notification.style.transform = 'translateX(0)';
        }, 100);

        // Remove after 5 seconds
        setTimeout(() => {
            notification.style.transform = 'translateX(100%)';
            setTimeout(() => {
                document.body.removeChild(notification);
            }, 300);
        }, 5000);
    }
};

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    console.log('Seamo Species API Dashboard Loaded');
    
    // Store original button text for loading states
    document.querySelectorAll('.btn').forEach(btn => {
        btn.dataset.originalText = btn.textContent;
    });
});

// Export utils for use in other scripts
window.MarineAPI.utils = utils;