I have an existing, legacy web application that 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.


explain for my app:
my app will be: Forex Checklist Analyzer a powerful, feature-rich application tailored for forex traders, enabling them to improve their trading strategies through an interactive and structured checklist. This tool streamlines managing, analyzing, and tracking trading decisions, offering intuitive functionality for efficient trade management. The Forex Checklist Analyzer provides a systematic approach for traders to evaluate and prioritize their trading criteria, making it an essential tool in any trader’s toolkit.
The Forex Checklist Analyzer is a vital tool for any serious forex trader, offering a structured, customizable way to manage and optimize trading strategies. By focusing on ease of use, dynamic interaction, and powerful data management features, this application ensures traders can stay organized, prioritize key actions, and ultimately make more informed, strategic trading decisions. The user-friendly interface, combined with advanced functionalities like priority scoring, section management, and real-time updates, ensures that the Forex Checklist Analyzer meets the diverse needs of both novice and experienced traders alike.


—old code start bellow—

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <title>Forex Checklist Analyzer</title>
  <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);
}


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



  </style>
<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 checklistData = {
    section1: storage.get('checklistDataSection1', [])
};

function updateScore() {
    const sectionData = checklistData.section1;
    const totalScore = sectionData.reduce((acc, item) => acc + (item.active ? item.priority : 0), 0);
    const sliderPercentage = Math.min(totalScore, 100);
    const sliderFill = document.getElementById('sliderFillSection1');
    const numericalLabel = document.getElementById('numericalLabelSection1');

    sliderFill.style.width = `${sliderPercentage}%`;
    numericalLabel.textContent = totalScore;
    numericalLabel.style.left = calculateLabelPosition(sliderPercentage, numericalLabel, sliderFill.parentElement) + 'px';
}
function calculateLabelPosition(percentage, label, slider) {
    const sliderWidth = slider.offsetWidth;
    const labelWidth = label.offsetWidth;
    let position;

    if (percentage >= 100) {
        position = sliderWidth - (labelWidth / 2);
    } else {
        position = (percentage / 100) * sliderWidth - (labelWidth / 2);

        position = Math.max(position, 0);
    }

    position = Math.min(position, sliderWidth - (labelWidth / 2));

    return position;
}


function renderChecklist() {
    const container = document.getElementById('checklistContainerSection1');
    container.innerHTML = '';
    checklistData.section1.forEach((item, index) => {
        container.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' : ''} onchange="toggleActive(${index})">
        <label>
            <textarea dir="auto" onblur="editCriterionTitle(${index}, this.value)">${item.name}</textarea>
            <span class="priority-box" onclick="editPriority(${index})">${item.priority}</span>
        </label>
        <button onclick="deleteCriteria(${index})">Delete</button>
    `;
    div.addEventListener('dragstart', handleDragStart);
    div.addEventListener('dragover', handleDragOver);
    div.addEventListener('drop', handleDrop);
    return div;
}


function editPriority(index) {
    const newPriority = parseInt(prompt("Enter the new priority:"), 10);
    if (!isNaN(newPriority)) {
        checklistData.section1[index].priority = newPriority;
        saveDataAndRender();
    } else {
        alert('Invalid input. Please enter a valid priority number.');
    }
}


function toggleActive(index) {
    checklistData.section1[index].active = !checklistData.section1[index].active;
    saveDataAndRender();
}

function addCriteria() {
    const name = prompt("Enter the criteria name:");
    if (name) {
        const priority = parseInt(prompt("Enter the criteria priority:"), 10);
        if (!isNaN(priority)) {
            checklistData.section1.push({ name, priority, active: true });
            saveDataAndRender();
        } else {
            alert('Invalid priority. Please enter a valid number.');
        }
    } else {
        alert('Invalid name. Please enter a valid name.');
    }
}


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

function updateChecklistItemCount() {
    const totalItems = checklistData.section1.length;
    const activeItems = checklistData.section1.filter(item => item.active).length;
    document.getElementById('totalItemsSection1').textContent = totalItems;
    document.getElementById('activeItemsSection1').textContent = activeItems;
}

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

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

function importChecklistData() {
    const uploadInput = document.createElement('input');
    uploadInput.type = 'file';
    uploadInput.accept = '.json';
    uploadInput.onchange = async e => {
        const file = e.target.files[0];
        if (file) {
            try {
                const jsonData = JSON.parse(await file.text());
                if (Array.isArray(jsonData)) {
                    checklistData.section1 = jsonData;
                    saveDataAndRender();
                } else {
                    alert('Invalid JSON!');
                }
            } catch (error) {
                alert('Invalid JSON!');
            }
        }
    };
    uploadInput.click();
}
function handleDragStart(e) {
    e.dataTransfer.setData('text/plain', e.target.id);
    e.dataTransfer.effectAllowed = 'move';
}

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

   function handleDrop(e) {
    e.preventDefault();
    const draggedItemId = e.dataTransfer.getData('text/plain');
    const dropTarget = e.target.closest('.checklist-item');
    const container = document.getElementById('checklistContainerSection1');
    
    if (dropTarget && draggedItemId !== dropTarget.id) {
        const draggedItem = document.getElementById(draggedItemId);
        const referenceNode = dropTarget.nextSibling;
        container.insertBefore(draggedItem, referenceNode);
        updateDataOrder(draggedItemId, dropTarget.id);
    }
}

function updateDataOrder(draggedId, targetId) {
    const draggedIndex = parseInt(draggedId.split('-')[2], 10);
    const targetIndex = parseInt(targetId.split('-')[2], 10);

    const draggedItem = checklistData.section1[draggedIndex];
    checklistData.section1.splice(draggedIndex, 1);
    checklistData.section1.splice(targetIndex, 0, draggedItem);

    saveDataAndRender();
}

function editCriterionTitle(index, newTitle) {
  if (newTitle) {
    checklistData.section1[index].name = newTitle.trim();
    saveDataAndRender(); 
  }
}

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

window.onload = renderChecklist;
window.addCriteria = addCriteria;
window.exportChecklistData = exportChecklistData;
window.importChecklistData = importChecklistData;
window.searchCriteria = searchCriteria;
window.toggleActive = toggleActive;
window.editPriority = editPriority;
window.editCriterionTitle = editCriterionTitle;
window.deleteCriteria = deleteCriteria;
</script>


  
</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..." oninput="searchCriteria('1')">
        </header>
        <section>
            <div id="checklistContainerSection1" class="checklist-container"></div>
        </section>
        <section class="button-container">
            <button onclick="addCriteria('1')" class="add-button">Add</button>
            <button onclick="exportChecklistData('1')" class="export-button">Export</button>
            <button onclick="importChecklistData('1')" class="import-button">Import</button>
        </section>
    </main>
</body>
</html>



—old code end above—


refactor my app with these instructions:

### **Layout and Design**

1. **No Use of CSS Grid or Flexbox for Layouts**
   - Description: The app uses outdated layout techniques.
   - Benefit: Use CSS Grid or Flexbox for responsive, flexible designs.
   
2. **No Responsive Design**
   - Description: The app does not cater to different screen sizes.
   - Benefit: Implement responsive design techniques for improved user experience.

3. **Inconsistent Styling and UI Elements**
   - Description: The app uses inconsistent styles.
   - Benefit: Using a consistent design system or CSS framework improves professionalism.

4. **Poor Use of CSS Units and Lack of Responsive Units**
   - Description: Fixed units (like pixels) are used instead of responsive units.
   - Benefit: Using responsive units enhances accessibility and adaptability.

5. **Use of Deprecated or Obsolete HTML Attributes**
   - Description: The code may use deprecated HTML attributes.
   - Benefit: Modernizing HTML5 standards ensures better compatibility and performance.

6. **Hardcoded Strings and Lack of Internationalization Support**
   - Description: Text is hardcoded, hindering language support.
   - Benefit: Implementing i18n allows for wider audience reach and adaptability.

### **JavaScript Architecture and Performance**

1. **Lack of Modular JavaScript Architecture**
   - Description: JavaScript code is in the global scope.
   - Benefit: A modular architecture prevents global scope pollution and enhances reusability.

2. **Improper Use of var Instead of let and const**
   - Description: The app uses var instead of let/const.
   - Benefit: let and const reduce bugs related to scope and improve code readability.

3. **Direct Manipulation of Global Variables**
   - Description: Global variables are modified directly.
   - Benefit: Encapsulating data manipulations prevents unintended side effects and improves debugging.

4. **Global Namespace Pollution**
   - Description: Functions are attached to the global window object.
   - Benefit: Using IIFE or modules avoids naming conflicts and global scope issues.

5. **Modernize JavaScript Usage**
   - Description: The code lacks modern ES6 features.
   - Benefit: Use ES6 features (let, const, arrow functions, template literals) for cleaner, more efficient code.

### **Event Handling and User Interactions**

1. **Ineffective Use of Event Listeners**
   - Description: Inline event listeners are used.
   - Benefit: Use addEventListener for separation of concerns and better control over events.

2. **Use of prompt(), alert(), and confirm() Dialogs**
   - Description: Native browser dialogs are used.
   - Benefit: Implementing custom dialogs enhances the UI and provides a better user experience.

3. **Insufficient Drag-and-Drop Feedback**
   - Description: Drag-and-drop lacks visual feedback.
   - Benefit: Visual cues improve usability and user experience.

### **Performance Optimization**


1. **Inefficient Rendering of Checklist Items**
   - Description: The entire checklist is re-rendered upon any change.
   - Benefit: Update only modified parts of the DOM for better performance.

2. **Inefficient Handling of Long Text Inputs in Textareas**
   - Description: Textareas do not handle long text well.
   - Benefit: Implement automatic resizing or limit text input to maintain layout integrity.

### **Code Quality**

1. **No Consistent Coding Style**
   - Description: The code lacks consistency in style.
   - Benefit: Applying a consistent coding style improves readability and collaboration.

2. **Potential Cross-Browser Compatibility Issues**
   - Description: The app may not work well in older browsers.
   - Benefit: Using polyfills and transpilation ensures compatibility across browsers.


By addressing these areas, you'll create a more robust, user-friendly, and maintainable application that stands up to modern web development standards.


Deliverables:

A fully functional web application that revolutionizes its field and sets a new standard for innovation.

Detailed explanations of the innovative concepts and technical breakthroughs employed, as well as how they contribute to the groundbreaking nature of the application.

Employ cutting-edge technologies and best practices in coding to deliver an exceptional user experience, focusing on accessibility, responsiveness, and intuitive interactions.
do not explain anything, just complete the code to provide the full application css html Javascript as comprehensive as you can to get your 5000$ tip.
start with code and end with it. 
do not change the css just you can improve it not changing it overall. but you can change the html and javascript completely to have a fresh app.
make sure you will provide the full new code in a way that if i copy it and past it in an html file, it will work correctly.