i will provide you a css javascript html code that you will make a better app than that.
Ensure that no functionality is lost or altered, and all the features remain fully operational. Do not remove any future of my app.
here is my css html javascript code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Forex Checklist Analyzer Pro</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
    --bg-color: #1A2634;
    --card-bg: #1E1E1E;
    --accent-color: #B38184;
    --text-color: #F2F2F2;
    --inactive-color: #C1C1C1;
    --active-color: #D8A7A1;
    --danger-color: #ff4757;
    --success-color: #2ed573;
    --warning-color: #ffa502;
    --info-color: #70a1ff;
    --font-primary: 'Roboto', sans-serif;
    --gradient-start: #1A2634;
    --gradient-middle: #323C4F;
    --gradient-end: #424D5C;
    --container-bg: rgba(28, 33, 42, 0.98);
    --item-bg: #1E1E1E;
    --button-gradient-start: #B38184;
    --button-gradient-end: #D8A7A1;
    --text-primary: #F2F2F2;
    --text-secondary: #C1C1C1;
    --border-radius: 10px;
    --shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    --transition-main: all 0.4s ease-in-out;
    --transition-fast: all 0.25s ease-in-out;
    --max-container-width: 800px;
    --slider-height: 40px;
    --slider-bg: #f2f2f2;
    --slider-fill-start: #4a90e2;
    --slider-fill-end: #82c4e8;
    --slider-thumb: #fff;
    --slider-thumb-border: #4a90e2;
    --slider-transition: width 0.6s ease-out;
}
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}
.app-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px;
}
.dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1200px;
    width: 100%;
}
.card {
    background-color: var(--card-bg);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}
.score-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}
.score-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    flex-grow: 1;
    margin-left: 20px;
}
.title-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
h1 {
    font-size: 2.5em;
    margin: 0;
    background: linear-gradient(45deg, var(--text-primary), var(--button-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.circular-progress {
    position: relative;
    width: 200px;
    height: 200px;
}
.circular-progress svg {
    transform: rotate(-90deg);
}
.circular-progress circle {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}
.progress-bg {
    stroke: var(--inactive-color);
}
.progress-bar {
    stroke: var(--accent-color);
    transition: stroke-dashoffset 1s ease;
}
.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: bold;
}
.checklist-section {
    margin-bottom: 30px;
}
.checklist-section h2 {
    color: var(--button-gradient-start);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.8em;
}
.checklist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: rgba(255,255,255,0.05);
    border-radius: 12px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    cursor: move;
}
.checklist-item:hover {
    background-color: rgba(255,255,255,0.1);
    transform: translateX(5px);
}
.toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--inactive-color);
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: var(--button-gradient-end);
}
input:checked + .slider:before {
    transform: translateX(26px);
}
.action-buttons {
    display: flex;
    gap: 15px;
}
.action-button {
    background-color: var(--button-gradient-start);
    border: none;
    color: var(--text-color);
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}
.action-button:hover {
    background-color: var(--button-gradient-end);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
}
.modal-content {
    background-color: var(--card-bg);
    margin: 10% auto;
    padding: 30px;
    border-radius: 15px;
    width: 50%;
    max-width: 500px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    animation: modalFadeIn 0.5s;
}
@keyframes modalFadeIn {
    from {opacity: 0; transform: translateY(-50px);}
    to {opacity: 1; transform: translateY(0);}
}
.close {
    color: var(--text-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
    transition: all 0.3s ease;
}
.close:hover,
.close:focus {
    color: var(--danger-color);
    text-decoration: none;
    cursor: pointer;
    transform: scale(1.2);
}
#newCriteriaInput, #newSectionInput, #sectionSelect, .priority-input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    border-radius: 8px;
    border: 1px solid var(--inactive-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 16px;
}
#addNewCriteriaButton, #addNewSectionButton {
    background-color: var(--success-color);
    color: var(--text-color);
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}
#addNewCriteriaButton:hover, #addNewSectionButton:hover {
    background-color: var(--active-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.edit-section-name, .edit-criteria, .delete-section, .delete-criteria {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease;
}
.edit-section-name:hover, .edit-criteria:hover {
    color: var(--warning-color);
    transform: scale(1.2);
}
.delete-section:hover, .delete-criteria:hover {
    color: var(--danger-color);
    transform: scale(1.2);
}
.section-card {
    cursor: move;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.section-buttons, .criteria-buttons {
    display: flex;
    gap: 15px;
}
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.dashboard-title {
    font-size: 2.5em;
    margin: 0;
    background: linear-gradient(45deg, var(--text-primary), var(--button-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dashboard-stats {
    display: flex;
    gap: 20px;
}
.stat-card {
    background-color: rgba(255,255,255,0.1);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}
.stat-value {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 5px;
}
.stat-label {
    font-size: 0.9em;
    opacity: 0.8;
}
.checklist-grid {
    display: flex;
    flex-direction: column;
    gap: 30px; 
}
.section-progress {
    height: 5px;
    background-color: var(--inactive-color);
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}
.section-progress-bar {
    height: 100%;
    background-color: var(--button-gradient-start);
    transition: width 0.5s ease;
}
.checklist-item-content {
    flex-grow: 1;
    margin-right: 15px;
}
.checklist-item-text {
    font-size: 1.1em;
    margin-bottom: 5px;
}
.checklist-item-description {
    font-size: 0.9em;
    opacity: 0.7;
}
.priority-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
}
.priority-high {
    background-color: var(--danger-color);
}
.priority-medium {
    background-color: var(--warning-color);
}
.priority-low {
    background-color: var(--success-color);
}
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: var(--bg-color);
    color: var(--text-color);
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .dashboard-stats {
        margin-top: 20px;
        flex-wrap: wrap;
    }
    .checklist-grid {
        grid-template-columns: 1fr;
    }
    .modal-content {
        width: 90%;
    }
}
.notes-section {
    margin-top: 10px;
    display: none;
}
.notes-toggle {
    cursor: pointer;
    font-size: 0.9em;
    color: var(--info-color);
}
.notes-textarea {
    width: 100%;
    height: 80px;
    margin-top: 5px;
    border: 1px solid var(--inactive-color);
    border-radius: 5px;
    padding: 5px;
    background-color: var(--bg-color);
    color: var(--text-color);
    resize: vertical;
}
.file-upload {
    margin-top: 5px;
}
.file-upload input[type="file"] {
    display: none;
}
.file-upload label {
    background-color: var(--button-gradient-start);
    color: var(--text-color);
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.file-upload label:hover {
    background-color: var(--button-gradient-end);
}
.file-preview {
    margin-top: 5px;
    max-width: 100%;
    max-height: 100px;
}
.priority-number {
    margin-right: 10px;
    font-weight: bold;
}
.priority-input {
    width: 40px;
}
</style>
</head>
<body>
    <div class="app-container">
        <div class="dashboard">
            <div class="dashboard-header">
                <h1 class="dashboard-title">Advanced Forex Checklist Analyzer Pro</h1>
                <div class="dashboard-stats">
                    <div class="stat-card">
                        <div class="stat-value" id="totalItemsCount">0</div>
                        <div class="stat-label">Total Items</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="completedItemsCount">0</div>
                        <div class="stat-label">Completed</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="sectionsCount">0</div>
                        <div class="stat-label">Sections</div>
                    </div>
                </div>
            </div>
            <div class="card score-card">
                <div class="circular-progress">
                    <svg width="200" height="200">
                        <circle class="progress-bg" cx="100" cy="100" r="90"></circle>
                        <circle class="progress-bar" cx="100" cy="100" r="90"></circle>
                    </svg>
                    <div class="progress-text">0%</div>
                </div>
                <div class="score-info">
                    <div class="title-buttons">
                        <h2>Overall Progress</h2>
                        <div class="action-buttons">
                            <button class="action-button" onclick="showAddCriteriaModal()">Add Criteria</button>
                            <button class="action-button" onclick="showAddSectionModal()">Add Section</button>
                            <button class="action-button" onclick="exportChecklistData()">Export Data</button>
                            <button class="action-button" onclick="importChecklistData()">Import Data</button>
                            <button class="action-button" onclick="resetChecklistData()">Reset Data</button>
                        </div>
                    </div>
                    <p>Overall Score: <span id="scoreDisplay">0</span>%</p>
                </div>
            </div>
            <div class="checklist-grid" id="checklistContainer">
            </div>
        </div>
    </div>
    <div id="addCriteriaModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('addCriteriaModal')">×</span>
            <h2>Add New Criteria</h2>
            <select id="sectionSelect">
            </select>
            <input type="text" id="newCriteriaInput" placeholder="Enter new criteria">
            <input type="number" id="newCriteriaPriority" placeholder="Priority" min="1" value="1">
            <button id="addNewCriteriaButton" onclick="addNewCriteria()">Add Criteria</button>
        </div>
    </div>
    <div id="addSectionModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('addSectionModal')">×</span>
            <h2>Add New Section</h2>
            <input type="text" id="newSectionInput" placeholder="Enter new section name">
            <button id="addNewSectionButton" onclick="addNewSection()">Add Section</button>
        </div>
    </div>
    <script>
        let checklistData = {
            sections: []
        };
        let undoStack = [];
        let redoStack = [];

        function updateUI() {
            const container = document.getElementById('checklistContainer');
            container.innerHTML = '';
            checklistData.sections.forEach((section, sectionIndex) => {
                const sectionCard = document.createElement('div');
                sectionCard.className = 'card section-card';
                sectionCard.setAttribute('draggable', true);
                sectionCard.addEventListener('dragstart', dragStart);
                sectionCard.addEventListener('dragover', dragOver);
                sectionCard.addEventListener('drop', drop);
                sectionCard.setAttribute('data-section-index', sectionIndex);

                const sectionHeader = document.createElement('div');
                sectionHeader.className = 'section-header';
                const sectionTitle = document.createElement('h2');
                sectionTitle.textContent = section.name;
                const sectionButtons = document.createElement('div');
                sectionButtons.className = 'section-buttons';
                const editSectionButton = document.createElement('button');
                editSectionButton.className = 'edit-section-name';
                editSectionButton.innerHTML = '✎';
                editSectionButton.onclick = () => editSectionName(sectionIndex);
                const deleteSectionButton = document.createElement('button');
                deleteSectionButton.className = 'delete-section';
                deleteSectionButton.innerHTML = '';
                deleteSectionButton.onclick = () => deleteSection(sectionIndex);

                sectionButtons.appendChild(editSectionButton);
                sectionButtons.appendChild(deleteSectionButton);
                sectionHeader.appendChild(sectionTitle);
                sectionHeader.appendChild(sectionButtons);
                sectionCard.appendChild(sectionHeader);

                const sectionProgress = document.createElement('div');
                sectionProgress.className = 'section-progress';
                const sectionProgressBar = document.createElement('div');
                sectionProgressBar.className = 'section-progress-bar';
                sectionProgress.appendChild(sectionProgressBar);
                sectionCard.appendChild(sectionProgress);

                section.criteria.forEach((criteria, criteriaIndex) => {
                    const criteriaItem = document.createElement('div');
                    criteriaItem.className = 'checklist-item';
                    criteriaItem.setAttribute('draggable', true);
                    criteriaItem.addEventListener('dragstart', dragStart);
                    criteriaItem.addEventListener('dragover', dragOver);
                    criteriaItem.addEventListener('drop', drop);
                    criteriaItem.setAttribute('data-section-index', sectionIndex);
                    criteriaItem.setAttribute('data-criteria-index', criteriaIndex);

                    const priorityNumber = document.createElement('span');
                    priorityNumber.className = 'priority-number';
                    priorityNumber.textContent = criteria.priority;
                    priorityNumber.setAttribute('contenteditable', true);
                    priorityNumber.onblur = () => {
                        const newPriority = parseInt(priorityNumber.textContent, 10);
                        if (!isNaN(newPriority) && newPriority > 0) {
                            saveState();
                            criteria.priority = newPriority;
                            updateScore();
                            updateSectionProgress();
                        } else {
                            priorityNumber.textContent = criteria.priority;
                        }
                    };
                    criteriaItem.appendChild(priorityNumber);

                    const criteriaContent = document.createElement('div');
                    criteriaContent.className = 'checklist-item-content';
                    const criteriaText = document.createElement('div');
                    criteriaText.className = 'checklist-item-text';
                    criteriaText.textContent = criteria.text;
                    criteriaContent.appendChild(criteriaText);

                    const toggle = document.createElement('label');
                    toggle.className = 'toggle';
                    const toggleInput = document.createElement('input');
                    toggleInput.type = 'checkbox';
                    toggleInput.checked = criteria.checked;
                    toggleInput.onchange = () => updateCriteriaStatus(sectionIndex, criteriaIndex);
                    const slider = document.createElement('span');
                    slider.className = 'slider';
                    toggle.appendChild(toggleInput);
                    toggle.appendChild(slider);

                    const criteriaButtons = document.createElement('div');
                    criteriaButtons.className = 'criteria-buttons';
                    const editCriteriaButton = document.createElement('button');
                    editCriteriaButton.className = 'edit-criteria';
                    editCriteriaButton.innerHTML = '✎';
                    editCriteriaButton.onclick = () => editCriteria(sectionIndex, criteriaIndex);
                    const deleteCriteriaButton = document.createElement('button');
                    deleteCriteriaButton.className = 'delete-criteria';
                    deleteCriteriaButton.innerHTML = '';
                    deleteCriteriaButton.onclick = () => deleteCriteria(sectionIndex, criteriaIndex);

                    criteriaButtons.appendChild(editCriteriaButton);
                    criteriaButtons.appendChild(deleteCriteriaButton);
                    criteriaItem.appendChild(criteriaContent);
                    criteriaItem.appendChild(toggle);
                    criteriaItem.appendChild(criteriaButtons);

                    const notesToggle = document.createElement('div');
                    notesToggle.className = 'notes-toggle';
                    notesToggle.textContent = 'Notes';
                    notesToggle.onclick = () => toggleNotes(sectionIndex, criteriaIndex);
                    criteriaItem.appendChild(notesToggle);

                    const notesSection = document.createElement('div');
                    notesSection.className = 'notes-section';
                    const notesTextarea = document.createElement('textarea');
                    notesTextarea.className = 'notes-textarea';
                    notesTextarea.placeholder = 'Add notes here...';
                    notesTextarea.value = criteria.notes || '';
                    notesTextarea.onblur = () => saveNotes(sectionIndex, criteriaIndex, notesTextarea.value);
                    notesSection.appendChild(notesTextarea);

                    const fileUpload = document.createElement('div');
                    fileUpload.className = 'file-upload';
                    const fileInput = document.createElement('input');
                    fileInput.type = 'file';
                    fileInput.accept = 'image/png, image/jpeg';
                    fileInput.id = `fileInput-${sectionIndex}-${criteriaIndex}`;
                    fileInput.onchange = (event) => handleFileUpload(event, sectionIndex, criteriaIndex);
                    const fileLabel = document.createElement('label');
                    fileLabel.htmlFor = `fileInput-${sectionIndex}-${criteriaIndex}`;
                    fileLabel.textContent = 'Upload Image';
                    fileUpload.appendChild(fileInput);
                    fileUpload.appendChild(fileLabel);
                    notesSection.appendChild(fileUpload);

                    const filePreview = document.createElement('img');
                    filePreview.className = 'file-preview';
                    if (criteria.imageData) {
                        filePreview.src = criteria.imageData;
                    }
                    notesSection.appendChild(filePreview);

                    criteriaItem.appendChild(notesSection);
                    sectionCard.appendChild(criteriaItem);
                });
                container.appendChild(sectionCard);
            });
            updateScore();
            updateSectionProgress();
        }

        function updateScore() {
    let totalPriority = 0;
    let activePriority = 0;
    checklistData.sections.forEach(section => {
        section.criteria.forEach(criteria => {
            totalPriority += criteria.priority;
            if (criteria.checked) {
                activePriority += criteria.priority;
            }
        });
    });

    // Calculate uncapped percentage for text display
    let uncappedPercentage = 0;
    if (totalPriority > 0) {
        uncappedPercentage = Math.round((activePriority / totalPriority) * 100);
    }

    // Calculate capped percentage for progress bar
    let cappedPercentage = Math.min(uncappedPercentage, 100);

    // Special case: If only one item and it's checked, show its priority as percentage
    if (getTotalItems() === 1 && activePriority > 0) {
        uncappedPercentage = activePriority;
        cappedPercentage = Math.min(activePriority, 100);
    }

    // Update text display with uncapped percentage
    document.getElementById('scoreDisplay').textContent = uncappedPercentage;

    // Update progress bar with capped percentage
    const progressBar = document.querySelector('.progress-bar');
    const circumference = 2 * Math.PI * 90;
    const offset = circumference - (cappedPercentage / 100) * circumference;
    progressBar.style.strokeDasharray = `${circumference} ${circumference}`;
    progressBar.style.strokeDashoffset = offset;
    document.querySelector('.progress-text').textContent = `${cappedPercentage}%`;

    // Update other elements
    document.getElementById('totalItemsCount').textContent = getTotalItems();
    document.getElementById('completedItemsCount').textContent = getCompletedItems();
    document.getElementById('sectionsCount').textContent = checklistData.sections.length;
}

        function updateSectionProgress() {
            checklistData.sections.forEach((section, index) => {
                const totalPriority = section.criteria.reduce((sum, criteria) => sum + criteria.priority, 0);
                const activePriority = section.criteria.reduce((sum, criteria) => criteria.checked ? sum + criteria.priority : sum, 0);
                const progress = totalPriority > 0 ? (activePriority / totalPriority) * 100 : 0;
                const sectionCard = document.querySelector(`.section-card[data-section-index="${index}"]`);
                const progressBar = sectionCard.querySelector('.section-progress-bar');
                progressBar.style.width = `${progress}%`;
            });
        }

        function updateCriteriaStatus(sectionIndex, criteriaIndex) {
            saveState();
            checklistData.sections[sectionIndex].criteria[criteriaIndex].checked = !checklistData.sections[sectionIndex].criteria[criteriaIndex].checked;
            updateScore();
            updateSectionProgress();
            localStorage.setItem('checklistData', JSON.stringify(checklistData));
        }

        function showAddCriteriaModal() {
            const modal = document.getElementById('addCriteriaModal');
            const select = document.getElementById('sectionSelect');
            select.innerHTML = '';
            checklistData.sections.forEach((section, index) => {
                const option = document.createElement('option');
                option.value = index;
                option.textContent = section.name;
                select.appendChild(option);
            });
            modal.style.display = 'block';
        }

        function showAddSectionModal() {
            const modal = document.getElementById('addSectionModal');
            modal.style.display = 'block';
        }

        function closeModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.style.display = 'none';
        }

        function addNewCriteria() {
            const sectionIndex = document.getElementById('sectionSelect').value;
            const newCriteria = document.getElementById('newCriteriaInput').value;
            const newCriteriaPriority = parseInt(document.getElementById('newCriteriaPriority').value, 10);
            if (newCriteria) {
                saveState();
                checklistData.sections[sectionIndex].criteria.push({
                    text: newCriteria,
                    checked: false,
                    priority: newCriteriaPriority,
                    notes: '',
                    imageData: null
                });
                updateUI();
                closeModal('addCriteriaModal');
                document.getElementById('newCriteriaInput').value = '';
                document.getElementById('newCriteriaPriority').value = '1';
            }
        }

        function addNewSection() {
            const newSectionName = document.getElementById('newSectionInput').value;
            if (newSectionName) {
                saveState();
                checklistData.sections.push({ name: newSectionName, criteria: [] });
                updateUI();
                closeModal('addSectionModal');
                document.getElementById('newSectionInput').value = '';
            }
        }

        function editSectionName(sectionIndex) {
            const newName = prompt('Enter new section name:', checklistData.sections[sectionIndex].name);
            if (newName) {
                saveState();
                checklistData.sections[sectionIndex].name = newName;
                updateUI();
            }
        }

        function deleteSection(sectionIndex) {
            if (confirm('Are you sure you want to delete this section?')) {
                saveState();
                checklistData.sections.splice(sectionIndex, 1);
                updateUI();
            }
        }

        function editCriteria(sectionIndex, criteriaIndex) {
            const newText = prompt('Edit criteria:', checklistData.sections[sectionIndex].criteria[criteriaIndex].text);
            const newPriority = parseInt(prompt('Edit priority (number):', checklistData.sections[sectionIndex].criteria[criteriaIndex].priority), 10);
            if (newText !== null && !isNaN(newPriority)) {
                saveState();
                checklistData.sections[sectionIndex].criteria[criteriaIndex].text = newText;
                checklistData.sections[sectionIndex].criteria[criteriaIndex].priority = newPriority;
                updateUI();
            }
        }

        function deleteCriteria(sectionIndex, criteriaIndex) {
            if (confirm('Are you sure you want to delete this criteria?')) {
                saveState();
                checklistData.sections[sectionIndex].criteria.splice(criteriaIndex, 1);
                updateUI();
            }
        }

        function dragStart(e) {
            e.dataTransfer.setData('text/plain', e.target.getAttribute('data-section-index') + ',' + (e.target.getAttribute('data-criteria-index') || ''));
        }

        function dragOver(e) {
            e.preventDefault();
        }

        function drop(e) {
            e.preventDefault();
            const [fromSectionIndex, fromCriteriaIndex] = e.dataTransfer.getData('text').split(',');
            const toSectionIndex = e.target.closest('.section-card').getAttribute('data-section-index');
            const toCriteriaIndex = e.target.closest('.checklist-item')?.getAttribute('data-criteria-index');

            if (fromCriteriaIndex === '') { // Moving a section
                saveState();
                const [movedSection] = checklistData.sections.splice(fromSectionIndex, 1);
                checklistData.sections.splice(toSectionIndex, 0, movedSection);
            } else { // Moving a criteria
                saveState();
                const [movedCriteria] = checklistData.sections[fromSectionIndex].criteria.splice(fromCriteriaIndex, 1);
                if (toCriteriaIndex !== null) {
                    checklistData.sections[toSectionIndex].criteria.splice(toCriteriaIndex, 0, movedCriteria);
                } else {
                    checklistData.sections[toSectionIndex].criteria.push(movedCriteria);
                }
            }

            updateUI();
        }

        function exportChecklistData() {
            const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(checklistData));
            const downloadAnchorNode = document.createElement('a');
            downloadAnchorNode.setAttribute("href", dataStr);
            downloadAnchorNode.setAttribute("download", "checklist_data.json");
            document.body.appendChild(downloadAnchorNode);
            downloadAnchorNode.click();
            downloadAnchorNode.remove();
        }

        function importChecklistData() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.json';
            input.onchange = function(event) {
                const file = event.target.files[0];
                const reader = new FileReader();
                reader.onload = function(e) {
                    try {
                        saveState();
                        checklistData = JSON.parse(e.target.result);
                        updateUI();
                    } catch (error) {
                        alert('Error importing data: ' + error.message);
                    }
                };
                reader.readAsText(file);
            };
            input.click();
        }

        function resetChecklistData() {
            if (confirm('Are you sure you want to reset all data?')) {
                saveState();
                checklistData = { sections: [] };
                updateUI();
            }
        }

        function toggleNotes(sectionIndex, criteriaIndex) {
            const notesSection = document.querySelector(`.checklist-item[data-section-index="${sectionIndex}"][data-criteria-index="${criteriaIndex}"] .notes-section`);
            notesSection.style.display = notesSection.style.display === 'block' ? 'none' : 'block';
        }

        function saveNotes(sectionIndex, criteriaIndex, notes) {
            saveState();
            checklistData.sections[sectionIndex].criteria[criteriaIndex].notes = notes;
            localStorage.setItem('checklistData', JSON.stringify(checklistData));
        }

        function handleFileUpload(event, sectionIndex, criteriaIndex) {
            const file = event.target.files[0];
            const reader = new FileReader();
            reader.onload = function(e) {
                saveState();
                checklistData.sections[sectionIndex].criteria[criteriaIndex].imageData = e.target.result;
                updateUI();
            };
            reader.readAsDataURL(file);
        }

        function getTotalItems() {
            return checklistData.sections.reduce((total, section) => total + section.criteria.length, 0);
        }

        function getCompletedItems() {
            return checklistData.sections.reduce((total, section) => total + section.criteria.filter(criteria => criteria.checked).length, 0);
        }

        function saveState() {
            undoStack.push(JSON.parse(JSON.stringify(checklistData)));
            redoStack = []; 
        }

        function undo() {
            if (undoStack.length > 1) {
                redoStack.push(undoStack.pop());
                checklistData = JSON.parse(JSON.stringify(undoStack[undoStack.length - 1]));
                updateUI();
            }
        }

        function redo() {
            if (redoStack.length > 0) {
                undoStack.push(redoStack.pop());
                checklistData = JSON.parse(JSON.stringify(undoStack[undoStack.length - 1]));
                updateUI();
            }
        }

        document.addEventListener('keydown', function(event) {
            if (event.ctrlKey && event.key === 'z') {
                undo();
            } else if (event.ctrlKey && event.shiftKey && event.key === 'Z') {
                redo();
            }
        });

        function loadState() {
            const storedData = localStorage.getItem('checklistData');
            if (storedData) {
                checklistData = JSON.parse(storedData);
            } else {
                checklistData = {
                    sections: [
                        {
                            name: 'Section 1',
                            criteria: [
                                { text: 'Criteria 1', checked: false, priority: 1, notes: '', imageData: null },
                                { text: 'Criteria 2', checked: true, priority: 2, notes: '', imageData: null }
                            ]
                        }
                    ]
                };
            }
        }

        loadState();
        updateUI();
    </script>
</body>
</html>

now refactor my above code.

provide the full code, start with code and end with it.

make sure all buttens will work properly.
craft it in one peace that if i copy your outpot and past into an html file, it work correctly.