document.addEventListener('DOMContentLoaded', function() {
    // Initialize notes functionality if on notes page
    if (window.location.pathname.includes('notes.html')) {
        const notesContainer = document.getElementById('notesContainer');
        const sampleNotes = [
            {
                title: 'React Hooks Guide',
                content: 'Notes on useState, useEffect, and custom hooks patterns...',
                category: 'JavaScript',
                date: '2023-05-15',
                color: 'bg-blue-100'
            },
            {
                title: 'CSS Grid Tricks',
                content: 'Advanced grid layouts and responsive techniques...',
                category: 'UI/UX',
                date: '2023-06-02',
                color: 'bg-purple-100'
            },
            {
                title: 'Database Optimization',
                content: 'Indexing strategies and query optimization tips...',
                category: 'Databases',
                date: '2023-04-20',
                color: 'bg-green-100'
            }
        ];

        // Render sample notes
        sampleNotes.forEach(note => {
            const noteElement = document.createElement('div');
            noteElement.className = `rounded-lg shadow-sm p-4 ${note.color} hover:shadow-md transition-shadow cursor-pointer`;
            noteElement.innerHTML = `
                <h3 class="font-semibold text-lg mb-1">${note.title}</h3>
                <p class="text-gray-600 text-sm mb-2 line-clamp-2">${note.content}</p>
                <div class="flex justify-between items-center text-xs text-gray-500">
                    <span>${note.category}</span>
                    <span>${note.date}</span>
                </div>
            `;
            notesContainer.appendChild(noteElement);
        });

        // New note button functionality
        document.getElementById('newNoteBtn').addEventListener('click', () => {
            const newNote = {
                title: 'Untitled Note',
                content: 'Start writing your note here...',
                category: 'General',
                date: new Date().toISOString().split('T')[0],
                color: 'bg-gray-100'
            };
            
            const noteElement = document.createElement('div');
            noteElement.className = `rounded-lg shadow-sm p-4 ${newNote.color} hover:shadow-md transition-shadow cursor-pointer`;
            noteElement.innerHTML = `
                <h3 class="font-semibold text-lg mb-1">${newNote.title}</h3>
                <p class="text-gray-600 text-sm mb-2 line-clamp-2">${newNote.content}</p>
                <div class="flex justify-between items-center text-xs text-gray-500">
                    <span>${newNote.category}</span>
                    <span>${newNote.date}</span>
                </div>
            `;
            notesContainer.prepend(noteElement);
        });
    }

// Color mixer functionality
    const colorSliders = document.querySelectorAll('input[type="range"]');
    
    colorSliders.forEach(slider => {
        slider.addEventListener('input', function() {
            const colorName = this.previousElementSibling.firstElementChild.textContent.toLowerCase();
            const value = this.value;
            this.nextElementSibling.textContent = value;
            
            const colorBox = this.parentElement.previousElementSibling;
            colorBox.style.background = `linear-gradient(to bottom right, var(--tw-${colorName}-${value}), var(--tw-${colorName}-${parseInt(value)+100}))`;
        });
    });

    // Generate random color palette
    const generateBtn = document.querySelector('button');
    if (generateBtn) {
        generateBtn.addEventListener('click', function() {
            const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple', 'pink'];
            const randomColor1 = colors[Math.floor(Math.random() * colors.length)];
            const randomColor2 =