File size: 2,729 Bytes
1ccc4ec 32aa8db 1ccc4ec | 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 | // 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;
|