Can you improve the look of this task app?  I want to see what it would look like with a more satisfying skeuomorphic touch.  I want clean, obvious metaphors for each element, and a good fiddle factor would be nice too.  Can you do that please?: <html><head><base href="https://task-manager-app.example.com/">
<title>Task Management Notebook</title>
<style>
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(20px); }
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

body {
    font-family: 'Courier New', monospace;
    background-color: #f0e6d2;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: 
        linear-gradient(#e6dcc6 1px, transparent 1px),
        linear-gradient(90deg, #e6dcc6 1px, transparent 1px);
    background-size: 20px 20px;
    transition: background-color 0.3s ease;
}

.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #8B4513;
    color: #f0e6d2;
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    animation: slideIn 0.5s ease-out;
    transition: background-color 0.3s ease;
}

.tabs {
    display: flex;
    justify-content: flex-start;
    padding: 0 20px;
    background-color: #a0522d;
    border-bottom: 2px solid #704214;
    overflow-x: auto;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.tab {
    padding: 10px 20px;
    background-color: #d2b48c;
    color: #8B4513;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1);
}

.tab.active {
    background-color: #f0e6d2;
    font-weight: bold;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    transform: translateY(2px);
}

.tab:hover {
    filter: brightness(110%);
}

#addCategoryTab {
    background-color: #8B4513;
    color: #f0e6d2;
}

.input-container {
    background: linear-gradient(to bottom, #8B4513, #704214);
    border: 1px solid #5e2c0b;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    max-width: 900px;
    width: 90%;
    transition: all 0.3s ease;
}

#taskInput, #taskDate, #taskTime, #taskImportance {
    height: 30px;
    padding: 5px;
    border: 1px solid #5e2c0b;
    border-radius: 3px;
    font-size: 16px;
    background-color: #fff8dc;
    color: #5e2c0b;
    transition: all 0.3s ease;
}

#taskInput:focus, #taskDate:focus, #taskTime:focus, #taskImportance:focus {
    box-shadow: 0 0 5px rgba(139, 69, 19, 0.5);
    transform: translateY(-2px);
}

#taskInput {
    width: 300px;
}

#taskDate, #taskTime {
    width: 150px;
}

#taskImportance {
    width: 120px;
}

#addTask {
    height: 42px;
    padding: 0 20px;
    background: linear-gradient(to bottom, #5e2c0b, #3d1c07);
    color: #f0e6d2;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#addTask:hover {
    filter: brightness(110%);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}

.task-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    margin-top: 200px;
}

.task-item {
    background: linear-gradient(to bottom, #fff8f0, #fff0e0);
    border: 1px solid #d2b48c;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    position: relative;
    animation: fadeIn 0.5s ease-out;
}

.task-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.task-text {
    color: #5e2c0b;
    font-size: 1.1em;
    margin-bottom: 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.task-text:hover {
    filter: brightness(120%);
}

.task-datetime, .task-category {
    font-size: 0.9em;
    color: #8B4513;
    margin-top: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.task-datetime:hover, .task-category:hover {
    filter: brightness(120%);
    transform: translateX(5px);
}

.task-importance {
    font-size: 0.9em;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 3px;
    margin-top: 10px;
    align-self: flex-start;
    cursor: pointer;
    transition: all 0.3s ease;
}

.task-importance:hover {
    transform: scale(1.1);
}

.importance-None { background-color: #e0e0e0; color: #333; }
.importance-Low { background-color: #81c784; color: #1b5e20; }
.importance-Medium { background-color: #fff176; color: #f57f17; }
.importance-High { background-color: #ef5350; color: #ffffff; }

.task-category {
    padding: 3px 8px;
    border-radius: 3px;
    align-self: flex-start;
    transition: all 0.3s ease;
}

.task-category:hover {
    filter: brightness(110%);
}

.delete-task {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ef5350;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.delete-task:hover {
    filter: brightness(110%);
    animation: rotate 0.3s linear;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    animation: fadeIn 0.3s ease-out;
}

.modal-content {
    background-color: #f0e6d2;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #8B4513;
    width: 300px;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    animation: fadeIn 0.5s ease-out;
}

.close {
    color: #8B4513;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    transform: scale(1.1);
}

#newCategoryInput, #categoryColorInput {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #8B4513;
    border-radius: 3px;
    font-size: 16px;
    transition: all 0.3s ease;
}

#newCategoryInput:focus, #categoryColorInput:focus {
    box-shadow: 0 0 5px rgba(139, 69, 19, 0.5);
    transform: translateY(-2px);
}

#addNewCategory {
    width: 100%;
    padding: 10px;
    background-color: #8B4513;
    color: #f0e6d2;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

#addNewCategory:hover {
    filter: brightness(110%);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

.confirm-delete-modal .modal-content {
    text-align: center;
}

.confirm-delete-modal button {
    margin: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.confirm-delete-modal .confirm {
    background-color: #ef5350;
    color: white;
}

.confirm-delete-modal .confirm:hover {
    filter: brightness(110%);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

.confirm-delete-modal .cancel {
    background-color: #81c784;
    color: white;
}

.confirm-delete-modal .cancel:hover {
    filter: brightness(110%);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

.editable {
    cursor: pointer;
    transition: all 0.3s ease;
}

.editable:hover {
    background-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.edit-input {
    width: 100%;
    padding: 5px;
    border: 1px solid #8B4513;
    border-radius: 3px;
    font-size: 16px;
    background-color: #fff8dc;
    color: #8B4513;
    transition: all 0.3s ease;
}

.edit-input:focus {
    box-shadow: 0 0 5px rgba(139, 69, 19, 0.5);
    transform: translateY(-2px);
}

.category-select {
    width: 100%;
    padding: 5px;
    border: 1px solid #8B4513;
    border-radius: 3px;
    font-size: 16px;
    background-color: #fff8dc;
    color: #8B4513;
    transition: all 0.3s ease;
}

.category-select:focus {
    box-shadow: 0 0 5px rgba(139, 69, 19, 0.5);
    transform: translateY(-2px);
}

.task-completed {
    text-decoration: line-through;
    opacity: 0.6;
}

.complete-task {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #81c784;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.complete-task:hover {
    filter: brightness(110%);
    transform: scale(1.1);
}

#sortTasks {
    margin-left: 20px;
    padding: 5px 10px;
    background-color: #8B4513;
    color: #f0e6d2;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

#sortTasks:hover {
    filter: brightness(110%);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.footer {
    text-align: center;
    padding: 20px;
    background-color: #8B4513;
    color: #f0e6d2;
    margin-top: auto;
}

</style>
</head>
<body>
<div class="top-bar">
    <div class="tabs" id="categoryTabs">
        <button class="tab active" data-category="General" data-color="#8B4513">General</button>
        <button class="tab" id="addCategoryTab">+</button>
        <button id="sortTasks">Sort Tasks</button>
    </div>
    <div class="input-container">
        <input type="text" id="taskInput" placeholder="Enter a new task">
        <input type="date" id="taskDate">
        <input type="time" id="taskTime">
        <select id="taskImportance">
            <option value="None">None</option>
            <option value="Low">Low</option>
            <option value="Medium">Medium</option>
            <option value="High">High</option>
        </select>
        <button id="addTask">Add Task</button>
    </div>
</div>
<div class="task-list" id="taskList"></div>

<div id="newCategoryModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>Add New Category</h2>
        <input type="text" id="newCategoryInput" placeholder="Enter category name">
        <input type="color" id="categoryColorInput" value="#8B4513">
        <button id="addNewCategory">Add Category</button>
    </div>
</div>

<div id="confirmDeleteModal" class="modal confirm-delete-modal">
    <div class="modal-content">
        <h2>Confirm Delete</h2>
        <p>Are you sure you want to delete this task?</p>
        <button class="confirm">Yes, Delete</button>
        <button class="cancel">Cancel</button>
    </div>
</div>

<footer class="footer">
    <p>&copy; 2023 Task Management Notebook. All rights reserved.</p>
</footer>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const taskInput = document.getElementById('taskInput');
    const taskDate = document.getElementById('taskDate');
    const taskTime = document.getElementById('taskTime');
    const taskImportance = document.getElementById('taskImportance');
    const addTaskButton = document.getElementById('addTask');
    const taskList = document.getElementById('taskList');
    const categoryTabs = document.getElementById('categoryTabs');
    const addCategoryTab = document.getElementById('addCategoryTab');
    const modal = document.getElementById('newCategoryModal');
    const newCategoryInput = document.getElementById('newCategoryInput');
    const categoryColorInput = document.getElementById('categoryColorInput');
    const addNewCategoryButton = document.getElementById('addNewCategory');
    const closeModal = document.getElementsByClassName('close')[0];
    const confirmDeleteModal = document.getElementById('confirmDeleteModal');
    const confirmDeleteButton = confirmDeleteModal.querySelector('.confirm');
    const cancelDeleteButton = confirmDeleteModal.querySelector('.cancel');
    const topBar = document.querySelector('.top-bar');
    const inputContainer = document.querySelector('.input-container');
    const sortTasksButton = document.getElementById('sortTasks');

    let currentCategory = 'General';
    let taskToDelete = null;
    let categoryColors = {
        'General': '#8B4513'
    };

    // Set default date and time to now
    const now = new Date();
    taskDate.valueAsDate = now;
    taskTime.value = now.getHours().toString().padStart(2, '0') + ':' + 
                     now.getMinutes().toString().padStart(2, '0');

    addTaskButton.addEventListener('click', addTask);
    taskInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            addTask();
        }
    });

    addCategoryTab.addEventListener('click', function() {
        openNewCategoryModal();
    });

    closeModal.addEventListener('click', function() {
        modal.style.display = 'none';
    });

    window.addEventListener('click', function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
        if (event.target == confirmDeleteModal) {
            confirmDeleteModal.style.display = 'none';
        }
    });

    addNewCategoryButton.addEventListener('click', function() {
        const categoryName = newCategoryInput.value.trim();
        const categoryColor = categoryColorInput.value;
        if (categoryName) {
            addNewCategory(categoryName, categoryColor);
            modal.style.display = 'none';
            newCategoryInput.value = '';
        }
    });

    categoryTabs.addEventListener('click', function(e) {
        if (e.target.classList.contains('tab') && e.target.id !== 'addCategoryTab') {
            setActiveCategory(e.target.dataset.category);
        }
    });

    confirmDeleteButton.addEventListener('click', function() {
        if (taskToDelete) {
            taskToDelete.style.animation = 'fadeOut 0.5s ease-out';
            taskToDelete.addEventListener('animationend', function() {
                taskToDelete.remove();
                taskToDelete = null;
                confirmDeleteModal.style.display = 'none';
            });
        }
    });

    cancelDeleteButton.addEventListener('click', function() {
        confirmDeleteModal.style.display = 'none';
        taskToDelete = null;
    });

    sortTasksButton.addEventListener('click', sortTasks);

    function openNewCategoryModal(taskItem = null) {
        modal.style.display = 'block';
        addNewCategoryButton.onclick = function() {
            const categoryName = newCategoryInput.value.trim();
            const categoryColor = categoryColorInput.value;
            if (categoryName) {
                addNewCategory(categoryName, categoryColor);
                modal.style.display = 'none';
                newCategoryInput.value = '';
                if (taskItem) {
                    updateTaskCategory(taskItem, categoryName);
                }
            }
        };
    }

    function addNewCategory(categoryName, categoryColor) {
        if (!document.querySelector(`.tab[data-category="${categoryName}"]`)) {
            const newTab = document.createElement('button');
            newTab.className = 'tab';
            newTab.textContent = categoryName;
            newTab.dataset.category = categoryName;
            newTab.dataset.color = categoryColor;
            newTab.style.animation = 'fadeIn 0.5s ease-out';
            categoryTabs.insertBefore(newTab, addCategoryTab);
            categoryColors[categoryName] = categoryColor;
            updateCategoryStyles(categoryName, categoryColor);
        }
        setActiveCategory(categoryName);
    }

    function setActiveCategory(category) {
        currentCategory = category;
        document.querySelectorAll('.tab').forEach(tab => {
            tab.classList.remove('active');
            if (tab.dataset.category === category) {
                tab.classList.add('active');
            }
        });
        updateCategoryStyles(category, categoryColors[category]);
        filterTasks();
    }

    function updateCategoryStyles(category, color) {
        const style = document.createElement('style');
        const darkerColor = darkenColor(color, 20);
        const lighterColor = lightenColor(color, 20);
        const veryLightColor = lightenColor(color, 80);
        const contrastColor = getContrastColor(color);
        const darkColor = ensureDarkColor(color);

        style.textContent = `
            .tab[data-category="${category}"] {
                background-color: ${color};
                color: ${contrastColor};
            }
            .tab[data-category="${category}"]:hover {
                background-color: ${lighterColor};
            }
            .tab[data-category="${category}"].active {
                background-color: ${darkenColor(color, 10)};
            }
            .task-item[data-category="${category}"] {
                background: linear-gradient(to bottom, ${veryLightColor}, ${lightenColor(color, 70)});
                border-color: ${darkerColor};
            }
            .task-item[data-category="${category}"] .task-text,
            .task-item[data-category="${category}"] .task-datetime,
            .task-item[data-category="${category}"] .task-category {
                color: ${darkColor};
            }
            .task-item[data-category="${category}"] .task-importance {
                background-color: ${lightenColor(color, 10)};
                color: ${getContrastColor(lightenColor(color, 10))};
            }
        `;
        document.head.appendChild(style);

        // Update top bar and input container styles
        topBar.style.backgroundColor = darkColor;
        topBar.style.color = getContrastColor(darkColor);
        categoryTabs.style.backgroundColor = darkenColor(darkColor, 10);
        inputContainer.style.background = `linear-gradient(to bottom, ${darkColor}, ${darkenColor(darkColor, 20)})`;
        inputContainer.style.borderColor = darkenColor(darkColor, 30);

        const inputs = inputContainer.querySelectorAll('input, select');
        inputs.forEach(input => {
            input.style.borderColor = darkenColor(darkColor, 30);
            input.style.backgroundColor = lightenColor(darkColor, 80);
            input.style.color = darkColor;
        });

        addTaskButton.style.background = `linear-gradient(to bottom, ${darkColor}, ${darkenColor(darkColor, 20)})`;
        addTaskButton.style.color = getContrastColor(darkColor);
    }

    function addTask() {
        const taskText = taskInput.value.trim();
        const dateValue = taskDate.value;
        const timeValue = taskTime.value;
        const importanceValue = taskImportance.value;

        if (taskText) {
            const taskItem = document.createElement('div');
            taskItem.className = 'task-item';
            taskItem.dataset.category = currentCategory;
            taskItem.style.animation = 'fadeIn 0.5s ease-out';
            
            const taskTextSpan = document.createElement('span');
            taskTextSpan.className = 'task-text editable';
            taskTextSpan.textContent = taskText;
            taskTextSpan.addEventListener('click', makeEditable);
            
            const taskDateTimeSpan = document.createElement('span');
            taskDateTimeSpan.className = 'task-datetime editable';
            
            if (dateValue && timeValue) {
                const dateTime = new Date(dateValue + 'T' + timeValue);
                taskDateTimeSpan.textContent = dateTime.toLocaleString();
            } else if (dateValue) {
                taskDateTimeSpan.textContent = new Date(dateValue).toLocaleDateString();
            } else if (timeValue) {
                taskDateTimeSpan.textContent = timeValue;
            }
            taskDateTimeSpan.addEventListener('click', makeEditable);
            
            const taskImportanceSpan = document.createElement('span');
            taskImportanceSpan.className = `task-importance importance-${importanceValue} editable`;
            taskImportanceSpan.textContent = importanceValue;
            taskImportanceSpan.addEventListener('click', makeEditable);
            
            const taskCategorySpan = document.createElement('span');
            taskCategorySpan.className = 'task-category editable';
            taskCategorySpan.textContent = currentCategory;
            taskCategorySpan.addEventListener('click', function() {
                makeCategoryEditable(taskItem);
            });
            
            const deleteButton = document.createElement('button');
            deleteButton.className = 'delete-task';
            deleteButton.innerHTML = '&times;';
            deleteButton.addEventListener('click', function(e) {
                e.stopPropagation();
                taskToDelete = taskItem;
                confirmDeleteModal.style.display = 'block';
            });
            
            const completeButton = document.createElement('button');
            completeButton.className = 'complete-task';
            completeButton.innerHTML = '&#10004;';
            completeButton.addEventListener('click', function(e) {
                e.stopPropagation();
                toggleTaskCompletion(taskItem);
            });
            
            taskItem.appendChild(taskTextSpan);
            taskItem.appendChild(taskDateTimeSpan);
            taskItem.appendChild(taskImportanceSpan);
            taskItem.appendChild(taskCategorySpan);
            taskItem.appendChild(deleteButton);
            taskItem.appendChild(completeButton);
            
            taskList.appendChild(taskItem);
            taskInput.value = '';

            filterTasks();
        }
    }

    function filterTasks() {
        const tasks = taskList.getElementsByClassName('task-item');

        for (let task of tasks) {
            if (task.dataset.category === currentCategory) {
                task.style.display = 'flex';
                task.style.animation = 'fadeIn 0.5s ease-out';
            } else {
                task.style.display = 'none';
            }
        }
    }

    function makeEditable(event) {
        const element = event.target;
        const originalText = element.textContent;
        const originalClass = element.className;
        
        let input;
        if (element.classList.contains('task-importance')) {
            input = document.createElement('select');
            const options = ['None', 'Low', 'Medium', 'High'];
            options.forEach(option => {
                const optionElement = document.createElement('option');
                optionElement.value = option;
                optionElement.textContent = option;
                if (option === originalText) {
                    optionElement.selected = true;
                }
                input.appendChild(optionElement);
            });
        } else if (element.classList.contains('task-datetime')) {
            input = document.createElement('input');
            input.type = 'datetime-local';
            const date = new Date(originalText);
            input.value = date.toISOString().slice(0, 16);
        } else {
            input = document.createElement('input');
            input.type = 'text';
            input.value = originalText;
        }
        
        input.className = 'edit-input';
        
        element.textContent = '';
        element.appendChild(input);
        input.focus();
        
        input.addEventListener('blur', function() {
            let newValue = input.value;
            if (element.classList.contains('task-datetime')) {
                newValue = new Date(input.value).toLocaleString();
            }
            element.textContent = newValue;
            element.className = originalClass;
            if (element.classList.contains('task-importance')) {
                element.classList.add(`importance-${newValue}`);
            }
            element.style.animation = 'pulse 0.3s ease-out';
        });
        
        input.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                input.blur();
            }
        });
    }

    function makeCategoryEditable(taskItem) {
        const categorySpan = taskItem.querySelector('.task-category');
        const currentCategory = categorySpan.textContent;
        
        const select = document.createElement('select');
        select.className = 'category-select';
        
        // Add existing categories
        Object.keys(categoryColors).forEach(category => {
            const option = document.createElement('option');
            option.value = category;
            option.textContent = category;
            if (category === currentCategory) {
                option.selected = true;
            }
            select.appendChild(option);
        });
        
        // Add "New Category" option
        const newCategoryOption = document.createElement('option');
        newCategoryOption.value = 'new';
        newCategoryOption.textContent = '+ New Category';
        select.appendChild(newCategoryOption);
        
        categorySpan.textContent = '';
        categorySpan.appendChild(select);
        select.focus();
        
        select.addEventListener('change', function() {
            if (select.value === 'new') {
                openNewCategoryModal(taskItem);
            } else {
                updateTaskCategory(taskItem, select.value);
            }
        });
        
        select.addEventListener('blur', function() {
            if (select.value !== 'new') {
                categorySpan.textContent = select.value;
            }
        });
    }

    function updateTaskCategory(taskItem, newCategory) {
        taskItem.dataset.category = newCategory;
        const categorySpan = taskItem.querySelector('.task-category');
        categorySpan.textContent = newCategory;
        filterTasks();
    }

    function getRandomColor() {
        return '#' + Math.floor(Math.random()*16777215).toString(16);
    }

    function lightenColor(color, percent) {
        const num = parseInt(color.replace('#',''),16),
              amt = Math.round(2.55 * percent),
              R = (num >> 16) + amt,
              B = (num >> 8 & 0x00FF) + amt,
              G = (num & 0x0000FF) + amt;
        return '#' + (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (B<255?B<1?0:B:255)*0x100 + (G<255?G<1?0:G:255)).toString(16).slice(1);
    }

    function darkenColor(color, percent) {
        const num = parseInt(color.replace('#',''),16),
              amt = Math.round(2.55 * percent),
              R = (num >> 16) - amt,
              B = (num >> 8 & 0x00FF) - amt,
              G = (num & 0x0000FF) - amt;
        return '#' + (0x1000000 + (R>0?R:0)*0x10000 + (B>0?B:0)*0x100 + (G>0?G:0)).toString(16).slice(1);
    }

    function getContrastColor(hexcolor) {
        hexcolor = hexcolor.replace("#", "");
        const r = parseInt(hexcolor.substr(0,2),16);
        const g = parseInt(hexcolor.substr(2,2),16);
        const b = parseInt(hexcolor.substr(4,2),16);
        const yiq = ((r*299)+(g*587)+(b*114))/1000;
        return (yiq >= 128) ? 'black' : 'white';
    }

    function ensureDarkColor(color) {
        const hexcolor = color.replace("#", "");
        const r = parseInt(hexcolor.substr(0,2),16);
        const g = parseInt(hexcolor.substr(2,2),16);
        const b = parseInt(hexcolor.substr(4,2),16);
        const yiq = ((r*299)+(g*587)+(b*114))/1000;
        if (yiq < 128) {
            return color;
        } else {
            return darkenColor(color, 40);
        }
    }

    function toggleTaskCompletion(taskItem) {
        taskItem.classList.toggle('task-completed');
        const completeButton = taskItem.querySelector('.complete-task');
        if (taskItem.classList.contains('task-completed')) {
            completeButton.innerHTML = '&#8635;'; // Undo symbol
        } else {
            completeButton.innerHTML = '&#10004;'; // Checkmark
        }
    }

    function sortTasks() {
        const tasks = Array.from(taskList.getElementsByClassName('task-item'));
        tasks.sort((a, b) => {
            const aImportance = a.querySelector('.task-importance').textContent;
            const bImportance = b.querySelector('.task-importance').textContent;
            const importanceOrder = ['High', 'Medium', 'Low', 'None'];
            return importanceOrder.indexOf(aImportance) - importanceOrder.indexOf(bImportance);
        });
        tasks.forEach(task => taskList.appendChild(task));
    }

    // Initialize styles for the default category
    updateCategoryStyles('General', categoryColors['General']);

    // Load tasks from localStorage
    loadTasks();

    // Save tasks to localStorage when adding or updating
    function saveTasks() {
        const tasks = Array.from(taskList.getElementsByClassName('task-item')).map(task => ({
            text: task.querySelector('.task-text').textContent,
            datetime: task.querySelector('.task-datetime').textContent,
            importance: task.querySelector('.task-importance').textContent,
            category: task.dataset.category,
            completed: task.classList.contains('task-completed')
        }));
        localStorage.setItem('tasks', JSON.stringify(tasks));
    }

    function loadTasks() {
        const savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
        savedTasks.forEach(task => {
            const taskItem = createTaskElement(task);
            taskList.appendChild(taskItem);
        });
        filterTasks();
    }

    function createTaskElement(task) {
        const taskItem = document.createElement('div');
        taskItem.className = 'task-item';
        taskItem.dataset.category = task.category;
        if (task.completed) {
            taskItem.classList.add('task-completed');
        }
        
        const taskTextSpan = document.createElement('span');
        taskTextSpan.className = 'task-text editable';
        taskTextSpan.textContent = task.text;
        taskTextSpan.addEventListener('click', makeEditable);
        
        const taskDateTimeSpan = document.createElement('span');
        taskDateTimeSpan.className = 'task-datetime editable';
        taskDateTimeSpan.textContent = task.datetime;
        taskDateTimeSpan.addEventListener('click', makeEditable);
        
        const taskImportanceSpan = document.createElement('span');
        taskImportanceSpan.className = `task-importance importance-${task.importance} editable`;
        taskImportanceSpan.textContent = task.importance;
        taskImportanceSpan.addEventListener('click', makeEditable);
        
        const taskCategorySpan = document.createElement('span');
        taskCategorySpan.className = 'task-category editable';
        taskCategorySpan.textContent = task.category;
        taskCategorySpan.addEventListener('click', function() {
            makeCategoryEditable(taskItem);
        });
        
        const deleteButton = document.createElement('button');
        deleteButton.className = 'delete-task';
        deleteButton.innerHTML = '&times;';
        deleteButton.addEventListener('click', function(e) {
            e.stopPropagation();
            taskToDelete = taskItem;
            confirmDeleteModal.style.display = 'block';
        });
        
        const completeButton = document.createElement('button');
        completeButton.className = 'complete-task';
        completeButton.innerHTML = task.completed ? '&#8635;' : '&#10004;';
        completeButton.addEventListener('click', function(e) {
            e.stopPropagation();
            toggleTaskCompletion(taskItem);
            saveTasks();
        });
        
        taskItem.appendChild(taskTextSpan);
        taskItem.appendChild(taskDateTimeSpan);
        taskItem.appendChild(taskImportanceSpan);
        taskItem.appendChild(taskCategorySpan);
        taskItem.appendChild(deleteButton);
        taskItem.appendChild(completeButton);
        
        return taskItem;
    }

    // Modify existing functions to save tasks after changes
    function addTask() {
        const taskText = taskInput.value.trim();
        const dateValue = taskDate.value;
        const timeValue = taskTime.value;
        const importanceValue = taskImportance.value;

        if (taskText) {
            const taskItem = document.createElement('div');
            taskItem.className = 'task-item';
            taskItem.dataset.category = currentCategory;
            taskItem.style.animation = 'fadeIn 0.5s ease-out';
            
            const taskTextSpan = document.createElement('span');
            taskTextSpan.className = 'task-text editable';
            taskTextSpan.textContent = taskText;
            taskTextSpan.addEventListener('click', makeEditable);
            
            const taskDateTimeSpan = document.createElement('span');
            taskDateTimeSpan.className = 'task-datetime editable';
            
            if (dateValue && timeValue) {
                const dateTime = new Date(dateValue + 'T' + timeValue);
                taskDateTimeSpan.textContent = dateTime.toLocaleString();
            } else if (dateValue) {
                taskDateTimeSpan.textContent = new Date(dateValue).toLocaleDateString();
            } else if (timeValue) {
                taskDateTimeSpan.textContent = timeValue;
            }
            taskDateTimeSpan.addEventListener('click', makeEditable);
            
            const taskImportanceSpan = document.createElement('span');
            taskImportanceSpan.className = `task-importance importance-${importanceValue} editable`;
            taskImportanceSpan.textContent = importanceValue;
            taskImportanceSpan.addEventListener('click', makeEditable);
            
            const taskCategorySpan = document.createElement('span');
            taskCategorySpan.className = 'task-category editable';
            taskCategorySpan.textContent = currentCategory;
            taskCategorySpan.addEventListener('click', function() {
                makeCategoryEditable(taskItem);
            });
            
            const deleteButton = document.createElement('button');
            deleteButton.className = 'delete-task';
            deleteButton.innerHTML = '&times;';
            deleteButton.addEventListener('click', function(e) {
                e.stopPropagation();
                taskToDelete = taskItem;
                confirmDeleteModal.style.display = 'block';
            });
            
            taskItem.appendChild(taskTextSpan);
            taskItem.appendChild(taskDateTimeSpan);
            taskItem.appendChild(taskImportanceSpan);
            taskItem.appendChild(taskCategorySpan);
            taskItem.appendChild(deleteButton);
            
            taskList.appendChild(taskItem);
            taskInput.value = '';

            filterTasks();
            
        }
        saveTasks();
    }

    function makeEditable(event) {
        const element = event.target;
        const originalText = element.textContent;
        const originalClass = element.className;
        
        let input;
        if (element.classList.contains('task-importance')) {
            input = document.createElement('select');
            const options = ['None', 'Low', 'Medium', 'High'];
            options.forEach(option => {
                const optionElement = document.createElement('option');
                optionElement.value = option;
                optionElement.textContent = option;
                if (option === originalText) {
                    optionElement.selected = true;
                }
                input.appendChild(optionElement);
            });
        } else if (element.classList.contains('task-datetime')) {
            input = document.createElement('input');
            input.type = 'datetime-local';
            const date = new Date(originalText);
            input.value = date.toISOString().slice(0, 16);
        } else {
            input = document.createElement('input');
            input.type = 'text';
            input.value = originalText;
        }
        
        input.className = 'edit-input';
        
        element.textContent = '';
        element.appendChild(input);
        input.focus();
        input.addEventListener('blur', function() {
            let newValue = input.value;
            if (element.classList.contains('task-datetime')) {
                newValue = new Date(input.value).toLocaleString();
            }
            element.textContent = newValue;
            element.className = originalClass;
            if (element.classList.contains('task-importance')) {
                element.classList.add(`importance-${newValue}`);
            }
            element.style.animation = 'pulse 0.3s ease-out';
            saveTasks();
        });
    }

    function updateTaskCategory(taskItem, newCategory) {
        taskItem.dataset.category = newCategory;
        const categorySpan = taskItem.querySelector('.task-category');
        categorySpan.textContent = newCategory;
        filterTasks();
        saveTasks();
    }

    confirmDeleteButton.addEventListener('click', function() {
        if (taskToDelete) {
            taskToDelete.style.animation = 'fadeOut 0.5s ease-out';
            taskToDelete.addEventListener('animationend', function() {
                taskToDelete.remove();
                taskToDelete = null;
                confirmDeleteModal.style.display = 'none';
                saveTasks();
            });
        }
    });
});
</script>
</body></html>