make it with html css javascript. non modular  in a way that i put your output in the html file and works correctly.
also make the ui modern and like a well known big compony product.

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.


<!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>

do not copy my code, do it in your own way and methods of modern coding to make a fresh one.