Dabe233/barnyard-brainiacs-notebook

1 2document.addEventListener('DOMContentLoaded', function() {3    // Farm-themed sample data4    let notebooks = [5{6            id: 1,7            name: "🌱 Crop Rotation",8            description: "Track my annual crop rotations and yields",9            tags: ["vegetables", "planning", "yield", "spring", "fall"],10            pages: 3,11            lastEdited: "2023-05-15",12            icon: "sun"13        },14        {15            id: 2,16            name: "🐄 Livestock Health",17            description: "Records of vaccinations and treatments",18            tags: ["animals", "health", "cows", "chickens", "vaccines"],19            pages: 8,20            lastEdited: "2023-05-20",21            icon: "heart"22        },23        {24            id: 3,25            name: "🚜 Equipment Maintenance",26            description: "Service schedules and repair logs",27            tags: ["tractor", "tools", "schedule"],28            pages: 5,29            lastEdited: "2023-05-18",30            icon: "tool"31        },32        {33            id: 4,34            name: "🌧️ Weather Log",35            description: "Daily weather observations and impacts",36            tags: ["rain", "temperature", "forecast"],37            pages: 12,38            lastEdited: "2023-05-22",39            icon: "cloud"40}41    ];42    // DOM elements43    const notebooksContainer = document.getElementById('notebooksContainer');44    const newBookBtn = document.getElementById('newBookBtn');45    const newBookModal = document.getElementById('newBookModal');46    const newBookForm = document.getElementById('newBookForm');47    const searchModal = document.createElement('search-modal');48    document.body.appendChild(searchModal);49    50    // Initialize search button51    document.querySelector('custom-navbar').shadowRoot.getElementById('searchBtn')52        .addEventListener('click', (e) => {53            e.preventDefault();54            searchModal.open();55        });56// Render notebooks57    function renderNotebooks() {58        notebooksContainer.innerHTML = '';59        60        notebooks.forEach((notebook, index) => {61            const notebookElement = document.createElement('div');62            notebookElement.className = `notebook-card bg-white rounded-lg shadow-md overflow-hidden hover-grow`;63            notebookElement.style.setProperty('--order', index);64            notebookElement.innerHTML = `65                <a href="notebook.html?id=${notebook.id}" class="block">66                    <div class="p-4">67                        <div class="flex justify-between items-start">68                            <div class="flex items-center">69                                <i data-feather="${notebook.icon || 'book'}" class="w-5 h-5 mr-2 text-${notebook.icon === 'heart' ? 'farm-red' : 'farm-green'}"></i>70                                <h2 class="text-lg font-semibold text-primary-800">${notebook.name}</h2>71                            </div>72                            <span class="text-xs bg-${notebook.pages > 10 ? 'farm-red' : 'farm-green'}-100 text-${notebook.pages > 10 ? 'farm-red' : 'farm-green'}-800 px-2 py-1 rounded-full">${notebook.pages} pages</span>73                        </div>74                        <p class="text-sm text-gray-600 mt-1">${notebook.description}</p>75                        <div class="mt-3 flex flex-wrap gap-1">76                            ${notebook.tags.map(tag => `77                                <span class="text-xs bg-${tag === 'health' ? 'farm-red' : 'farm-green'}-50 text-${tag === 'health' ? 'farm-red' : 'farm-green'}-700 px-2 py-1 rounded-full">#${tag}</span>78                            `).join('')}79                        </div>80                        <div class="mt-3 text-xs text-gray-500 flex items-center">81                            <i data-feather="clock" class="w-3 h-3 mr-1"></i>82                            Last edited: ${notebook.lastEdited}83                        </div>84                    </div>85                </a>86`;87            88            notebooksContainer.appendChild(notebookElement);89        });90        91        feather.replace();92    }93 94    // Event listeners95    newBookBtn.addEventListener('click', () => {96        newBookModal.setAttribute('open', 'true');97    });98 99    newBookForm.addEventListener('submit', (e) => {100        e.preventDefault();101        102        const name = document.getElementById('bookName').value;103        const description = document.getElementById('bookDescription').value;104        const tags = document.getElementById('bookTags').value.split(',').map(tag => tag.trim());105        106        const newNotebook = {107            id: notebooks.length + 1,108            name,109            description,110            tags,111            pages: 0,112            lastEdited: new Date().toISOString().split('T')[0]113        };114        115        notebooks.push(newNotebook);116        renderNotebooks();117        118        newBookModal.removeAttribute('open');119        newBookForm.reset();120        121        // Show success toast122        showToast('Notebook created successfully!', 'success');123    });124    // Farm-themed toast notification125    function showToast(message, type = 'info') {126        const toast = document.createElement('div');127        toast.className = `fixed bottom-4 left-4 right-4 mx-4 px-4 py-3 rounded-md shadow-lg text-white flex items-center ${128            type === 'success' ? 'bg-green-600' : 129            type === 'error' ? 'bg-red-600' : 'bg-yellow-600'130        } animate-fade-in`;131        132        const iconName = type === 'success' ? 'check-circle' : 133                        type === 'error' ? 'alert-circle' : 'info';134        135        toast.innerHTML = `136            <i data-feather="${iconName}" class="w-5 h-5 mr-2"></i>137            <span>${message}</span>138        `;139document.body.appendChild(toast);140        141        setTimeout(() => {142            toast.classList.remove('animate-fade-in');143            toast.classList.add('animate-fade-out');144            setTimeout(() => toast.remove(), 300);145        }, 3000);146    }147 148    // Initial render149    renderNotebooks();150});