Please optimize my app's code by shortening it using techniques such as refactoring, simplifying redundant code, or using more efficient syntax. Ensure that no functionality is lost or altered, and all the features remain fully operational. Do not remove any key components or functions, but make the code more concise and readable where possible. my existing, legacy web application is plagued by outdated coding practices, inefficient methods, and numerous bugs. My goal is to create a completely new, modernized web application that is visually appealing, user-friendly, and ready for commercialization. Create a groundbreaking web application that reimagines the core functionality of my existing application, offering a disruptive and innovative user experience that challenges the status quo. Key requirements: Modern Technology: Utilize the latest best practices in HTML, CSS, and JavaScript. Clean Code: Adhere to coding standards and principles for maintainability and scalability. Improved UI/UX: Design a visually appealing and intuitive user interface. Functional Parity: Ensure the new application retains the core functionality of the original, while addressing its shortcomings. Avoid direct code copying: Do not reuse any code from the original application. Focus on functionality: Prioritize replicating the essential features and user flows, while introducing novel enhancements that push the boundaries of what is possible. Emphasize creativity: Explore cutting-edge technologies and unconventional design patterns to achieve a truly unique and memorable experience. Surprise me: Aim to exceed expectations and challenge the status quo in every aspect of your approach.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forex Checklist Analyzer</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --font-primary: 'Roboto', sans-serif;
            --gradient-start: #1A2634;
            --gradient-middle: #323C4F;
            --gradient-end: #424D5C;
            --container-bg: #1c212af5;
            --item-bg: #1E1E1E;
            --button-gradient-start: #B38184;
            --button-gradient-end: #D8A7A1;
            --text-primary: #F2F2F2;
            --text-secondary: #C1C1C1;
            --border-radius: 8px;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition-main: all 0.35s ease-in-out;
            --transition-scale: scale(1.05);
        }

        html {
            height: 100%;
            background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-middle), var(--gradient-end));
            background-attachment: fixed;
            font-size: 16px;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            font-family: var(--font-primary);
            color: var(--text-primary);
            background: transparent;
            line-height: 1.6;
            font-weight: 400;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transition: var(--transition-main);
        }

        button, input, textarea {
            font-family: var(--font-primary);
            border-radius: var(--border-radius);
            padding: 10px 15px;
            transition: background-color 0.3s, transform 0.3s;
        }

        button {
            background: linear-gradient(45deg, var(--button-gradient-start), var(--button-gradient-end));
            border: none;
            box-shadow: var(--shadow);
            cursor: pointer;
            color: white;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        button:hover, button:focus {
            transform: var(--transition-scale);
        }

        input[type="checkbox"] {
            appearance: none;
            width: 24px;
            height: 24px;
            border: 2px solid var(--button-gradient-end);
            border-radius: 4px;
            cursor: pointer;
            position: relative;
        }

        input[type="checkbox"]:checked {
            background-color: var(--button-gradient-start);
            border-color: var(--button-gradient-start);
        }

        input[type="checkbox"]:checked::after {
            content: '';
            position: absolute;
            left: 7px;
            top: 3px;
            width: 6px;
            height: 12px;
            border: solid white;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }

        .container {
            max-width: 700px;
            margin: 20px;
            background: var(--container-bg);
            border-radius: var(--border-radius);
            padding: 40px;
            box-shadow: var(--shadow);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .container div[id^="item-"] {
            background: var(--item-bg);
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: var(--shadow);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition-main);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .container div[id^="item-"] button {
            background: linear-gradient(45deg, var(--button-gradient-end), var(--button-gradient-start));
            box-shadow: var(--shadow);
        }

        @media (max-width: 768px) {
            .container {
                margin: 10px;
                padding: 20px;
            }
        }

        .container h1 {
            font-weight: 700;
            color: var(--button-gradient-end);
            text-align: center;
            margin-bottom: 30px;
        }

        .checklist-item textarea {
            font-size: 1.6em;
            border: 2px solid var(--border-radius);
            background: rgba(255, 255, 255, 0.1);
            outline: none;
            cursor: text;
            width: calc(100% - 40px);
            text-align: start;
            padding: 10px 20px;
            color: var(--text-primary);
            font-family: 'Vazir', 'Roboto', sans-serif;
            direction: rtl;
            resize: none;
            overflow: auto;
            min-height: 50px;
            white-space: pre-wrap;
            transition: height 0.3s ease;
            overflow: auto; 
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .checklist-item textarea::-webkit-scrollbar {
            display: none;
        }

        .checklist-item textarea:focus {
            height: auto;
            min-height: 50px;
        }

        .checklist-item button {
            margin-left: 10px;
            vertical-align: top;
        }

        @media (max-width: 768px) {
            .checklist-item textarea {
                font-size: 1.4em;
                width: calc(100% - 30px);
            }
        }

        .image-upload-button {
            display: inline-block;
            margin-left: 10px;
            cursor: pointer;
            color: white;
            background: linear-gradient(to right, var(--button-gradient-start), var(--button-gradient-end));
            padding: 10px 15px;
            border-radius: var(--border-radius);
            border: none;
            box-shadow: var(--shadow);
            font-weight: 500;
            text-transform: uppercase;
        }

        .slider-background {
            background-color: #f2f2f2;
            height: 40px;
            border-radius: 20px;
            position: relative;
            margin: 30px 0;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }

        .slider-fill {
            background: linear-gradient(to right, #4a90e2, #82c4e8);
            height: 100%;
            border-radius: 20px;
            transition: width 0.4s ease;
        }

        .numerical-label {
            color: #333;
            font-size: 1.2em;
            font-weight: 700;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: left 0.4s ease;
            background: #ffffff;
            border: 2px solid #4a90e2;
            border-radius: 15px;
            padding: 6px 12px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
            text-shadow: none;
        }

        .priority-box {
            background: linear-gradient(45deg, var(--button-gradient-end), var(--button-gradient-start));
            color: white;
            padding: 3px 8px;
            border-radius: var(--border-radius);
            font-weight: bold;
            margin-left: 8px;
        }

        .checklist-container {
            display: grid;
            gap: 1rem;
        }

        .flex-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .narrow-search-box {
            width: 100%;
            margin-bottom: 1rem;
        }

        .button-container {
            display: flex;
            justify-content: space-between;
            margin-top: 1rem;
        }

        .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.4);
        }

        .modal-content {
            background-color: var(--container-bg);
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: var(--border-radius);
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .dragging {
            opacity: 0.5;
        }

        .drag-over {
            border: 2px dashed var(--button-gradient-start);
        }
    </style>
</head>
<body>
    <main class="container" id="containerSection1">
        <header>
            <h1 class="editable-title" id="titleSection1" contenteditable="true">Essential Criteria</h1>
            <div class="slider-background">
                <div id="sliderFillSection1" class="slider-fill">
                    <div id="numericalLabelSection1" class="numerical-label"></div>
                </div>
            </div>
            <div class="item-count flex-container">
                <label>Total:</label>
                <span id="totalItemsSection1"></span>
                <label>Active:</label>
                <span id="activeItemsSection1"></span>
            </div>
            <input type="text" id="searchBoxSection1" class="narrow-search-box" placeholder="Search criteria...">
        </header>
        <section>
            <div id="checklistContainerSection1" class="checklist-container"></div>
        </section>
        <section class="button-container">
            <button id="addButton" class="add-button">Add</button>
            <button id="exportButton" class="export-button">Export</button>
            <button id="importButton" class="import-button">Import</button>
        </section>
    </main>

    <div id="addModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Add New Criteria</h2>
            <input type="text" id="newCriteriaName" placeholder="Enter criteria name">
            <input type="number" id="newCriteriaPriority" placeholder="Enter priority">
            <button id="submitNewCriteria">Add</button>
        </div>
    </div>

    <div id="editModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Edit Priority</h2>
            <input type="number" id="editPriorityInput" placeholder="Enter new priority">
            <button id="submitEditPriority">Update</button>
        </div>
    </div>

    <script>
        (() => {
            const storage = {
                set(key, value) {
                    localStorage.setItem(key, JSON.stringify(value));
                },
                get(key, defaultValue) {
                    const item = localStorage.getItem(key);
                    return item ? JSON.parse(item) : defaultValue;
                }
            };

            const state = {
                checklistData: storage.get('checklistDataSection1', []),
                editingIndex: null
            };

            const dom = {
                container: document.getElementById('containerSection1'),
                checklistContainer: document.getElementById('checklistContainerSection1'),
                sliderFill: document.getElementById('sliderFillSection1'),
                numericalLabel: document.getElementById('numericalLabelSection1'),
                totalItems: document.getElementById('totalItemsSection1'),
                activeItems: document.getElementById('activeItemsSection1'),
                searchBox: document.getElementById('searchBoxSection1'),
                addButton: document.getElementById('addButton'),
                exportButton: document.getElementById('exportButton'),
                importButton: document.getElementById('importButton'),
                addModal: document.getElementById('addModal'),
                editModal: document.getElementById('editModal'),
                newCriteriaName: document.getElementById('newCriteriaName'),
                newCriteriaPriority: document.getElementById('newCriteriaPriority'),
                submitNewCriteria: document.getElementById('submitNewCriteria'),
                editPriorityInput: document.getElementById('editPriorityInput'),
                submitEditPriority: document.getElementById('submitEditPriority')
            };

            function updateScore() {
                const totalScore = state.checklistData.reduce((acc, item) => acc + (item.active ? item.priority : 0), 0);
                const sliderPercentage = Math.min(totalScore, 100);
                dom.sliderFill.style.width = `${sliderPercentage}%`;
                dom.numericalLabel.textContent = totalScore;
                dom.numericalLabel.style.left = calculateLabelPosition(sliderPercentage, dom.numericalLabel, dom.sliderFill.parentElement) + 'px';
            }

            function calculateLabelPosition(percentage, label, slider) {
                const sliderWidth = slider.offsetWidth;
                const labelWidth = label.offsetWidth;
                let position = (percentage / 100) * sliderWidth - (labelWidth / 2);
                return Math.max(0, Math.min(position, sliderWidth - labelWidth));
            }

            function renderChecklist() {
                dom.checklistContainer.innerHTML = '';
                state.checklistData.forEach((item, index) => {
                    dom.checklistContainer.appendChild(createChecklistItem(item, index));
                });
                updateScore();
                updateChecklistItemCount();
            }

            function createChecklistItem(item, index) {
                const div = document.createElement('div');
                div.id = `item-1-${index}`;
                div.classList.add('checklist-item');
                div.draggable = true;
                div.innerHTML = `
                    <input type="checkbox" ${item.active ? 'checked' : ''}>
                    <label>
                        <textarea dir="auto">${item.name}</textarea>
                        <span class="priority-box">${item.priority}</span>
                    </label>
<button class="delete-button">Delete</button>
                `;

                const checkbox = div.querySelector('input[type="checkbox"]');
                checkbox.addEventListener('change', () => toggleActive(index));

                const textarea = div.querySelector('textarea');
                textarea.addEventListener('blur', () => editCriterionTitle(index, textarea.value));

                const priorityBox = div.querySelector('.priority-box');
                priorityBox.addEventListener('click', () => showEditPriorityModal(index));

                const deleteButton = div.querySelector('.delete-button');
                deleteButton.addEventListener('click', () => deleteCriteria(index));

                div.addEventListener('dragstart', handleDragStart);
                div.addEventListener('dragover', handleDragOver);
                div.addEventListener('drop', handleDrop);

                return div;
            }

            function toggleActive(index) {
                state.checklistData[index].active = !state.checklistData[index].active;
                saveDataAndRender();
            }
  function editCriterionTitle(index, newTitle) {
                if (newTitle) {
                    state.checklistData[index].name = newTitle.trim();
                    saveDataAndRender();
                }
            }

            function showEditPriorityModal(index) {
                state.editingIndex = index;
                dom.editPriorityInput.value = state.checklistData[index].priority;
                dom.editModal.style.display = 'block';
            }

            function deleteCriteria(index) {
                state.checklistData.splice(index, 1);
                saveDataAndRender();
            }

            function updateChecklistItemCount() {
                const totalItems = state.checklistData.length;
                const activeItems = state.checklistData.filter(item => item.active).length;
                dom.totalItems.textContent = totalItems;
                dom.activeItems.textContent = activeItems;
            }

            function searchCriteria() {
                const query = dom.searchBox.value.toLowerCase();
                state.checklistData.forEach((item, index) => {
                    const displayStyle = item.name.toLowerCase().includes(query) ? 'grid' : 'none';
                    document.getElementById(`item-1-${index}`).style.display = displayStyle;
                });
            }

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

            function importChecklistData() {
                const input = document.createElement('input');
                input.type = 'file';
                input.accept = '.json';
                input.onchange = e => {
                    const file = e.target.files[0];
                    const reader = new FileReader();
                    reader.onload = event => {
                        try {
                            const jsonData = JSON.parse(event.target.result);
                            if (Array.isArray(jsonData)) {
                                state.checklistData = jsonData;
                                saveDataAndRender();
                            } else {
                                throw new Error('Invalid JSON format');
                            }
                        } catch (error) {
                            console.error('Error parsing JSON file:', error);
                            alert('Error parsing JSON file. Please ensure it\'s a valid checklist data file.');
                        }
                    };
                    reader.readAsText(file);
                };
                input.click();
            }

            function handleDragStart(e) {
                e.dataTransfer.setData('text/plain', e.target.id);
                e.target.classList.add('dragging');
            }

            function handleDragOver(e) {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';
                const dragOverItem = e.target.closest('.checklist-item');
                if (dragOverItem) {
                    dragOverItem.classList.add('drag-over');
                }
            }

            function handleDrop(e) {
                e.preventDefault();
                const draggedItemId = e.dataTransfer.getData('text/plain');
                const draggedItem = document.getElementById(draggedItemId);
                const dropTarget = e.target.closest('.checklist-item');
                
                if (dropTarget && draggedItem !== dropTarget) {
                    const draggedIndex = parseInt(draggedItemId.split('-')[2]);
                    const targetIndex = parseInt(dropTarget.id.split('-')[2]);
                    
                    const [reorderedItem] = state.checklistData.splice(draggedIndex, 1);
                    state.checklistData.splice(targetIndex, 0, reorderedItem);
                    
                    saveDataAndRender();
                }
                
                document.querySelectorAll('.checklist-item').forEach(item => {
                    item.classList.remove('dragging', 'drag-over');
                });
            }

            function saveDataAndRender() {
                storage.set('checklistDataSection1', state.checklistData);
                renderChecklist();
            }

            function showAddModal() {
                dom.addModal.style.display = 'block';
            }

            function hideAddModal() {
                dom.addModal.style.display = 'none';
                dom.newCriteriaName.value = '';
                dom.newCriteriaPriority.value = '';
            }

            function hideEditModal() {
                dom.editModal.style.display = 'none';
                state.editingIndex = null;
            }

            function addNewCriteria() {
                const name = dom.newCriteriaName.value.trim();
                const priority = parseInt(dom.newCriteriaPriority.value, 10);
                
                if (name && !isNaN(priority)) {
                    state.checklistData.push({ name, priority, active: true });
                    saveDataAndRender();
                    hideAddModal();
                } else {
                    alert('Please enter valid name and priority.');
                }
            }

            function editPriority() {
                const newPriority = parseInt(dom.editPriorityInput.value, 10);
                if (!isNaN(newPriority) && state.editingIndex !== null) {
                    state.checklistData[state.editingIndex].priority = newPriority;
                    saveDataAndRender();
                    hideEditModal();
                } else {
                    alert('Please enter a valid priority number.');
                }
            }

            // Event Listeners
            dom.searchBox.addEventListener('input', searchCriteria);
            dom.addButton.addEventListener('click', showAddModal);
            dom.exportButton.addEventListener('click', exportChecklistData);
            dom.importButton.addEventListener('click', importChecklistData);
            dom.submitNewCriteria.addEventListener('click', addNewCriteria);
            dom.submitEditPriority.addEventListener('click', editPriority);

            document.querySelectorAll('.close').forEach(closeBtn => {
                closeBtn.addEventListener('click', () => {
                    hideAddModal();
                    hideEditModal();
                });
            });

            window.addEventListener('click', (event) => {
                if (event.target === dom.addModal) {
                    hideAddModal();
                } else if (event.target === dom.editModal) {
                    hideEditModal();
                }
            });

            // Initialize
            renderChecklist();
        })();
    </script>
</body>
</html>


now provide the next version of the app.