craft a prompt for this code then i will give it to chatgpt and it will craft the code for me without giving it the code.

do not write code in your prompt.

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


here is an example prompt

--
**Forex Checklist Analyzer** is 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.

### Key Features:

1. **Comprehensive Checklist Management**:
   - **Interactive Checklist Editing**: Traders can seamlessly add, edit, and remove checklist items, with each item including a checkbox to toggle status, a text area for adding detailed descriptions, and a priority indicator to rank each criterion based on importance.
   - **Enhanced User Interaction**: The app integrates various user-friendly elements such as checkboxes and editable text fields that are simple to use and visually clear. This fosters active engagement, encouraging traders to interact with their checklists regularly.
   - **Drag-and-Drop Reordering**: To personalize their workflows, users can reorder checklist items with drag-and-drop functionality, providing a dynamic, flexible way to prioritize criteria.

2. **Priority Assessment**:
   - **Visual Scoring Slider**: A visually appealing scoring slider is prominently displayed, showing the cumulative score of active checklist items based on their set priorities. This feature assists users in quickly assessing the overall importance of the criteria in their list.
   - **Real-Time Numerical Score**: An adjacent numerical display updates in real-time, reflecting the total priority score of active checklist items. This feature offers additional clarity and ensures traders make quick, data-driven decisions.

3. **Comprehensive Item Tracking**:
   - **Overview of Checklist Status**: The app provides users with both the total number of items in their checklist and the count of active items, offering a clear and concise overview of their progress. This ensures users remain aware of what needs attention and how much progress they have made.

4. **Search and Filter Capabilities**:
   - **Efficient Search Functionality**: An integrated search bar allows users to quickly locate specific items within their checklist. As the user types, the app dynamically filters and displays the relevant items, saving time and ensuring ease of information retrieval.

5. **Data Management**:
   - **Easy Import and Export**: The Forex Checklist Analyzer provides options for exporting and importing data in JSON format. Users can easily export their checklist data for backup or sharing purposes and import data to restore or migrate their checklist. This ensures a smooth data management experience.

6. **Responsive Design with Cross-Device Compatibility**:
   - **Fully Responsive Layout**: The application is built to be fully responsive, delivering a consistent user experience across various devices, including desktops, tablets, and smartphones. This adaptability makes the tool accessible and practical for traders on the go.

### Technical Specifications:

1. **HTML Structure**:
   - **Semantic and Accessible Markup**: The app leverages HTML5 to ensure semantic and accessible web structure. Input fields, buttons, containers, and section tags are used to form a well-structured layout that is both functional and accessible to users, including those using assistive technologies.

2. **CSS Styling**:
   - **Modern Visual Design**: The design of the Forex Checklist Analyzer is elevated through the use of CSS, including gradients, custom fonts (such as Roboto), and elegantly styled buttons. Modernized checkboxes and smooth transition effects enhance the overall user experience.
   - **Responsive Media Queries**: The app uses CSS media queries to ensure that the layout adjusts seamlessly across different screen sizes and resolutions. This ensures that the application maintains its usability and aesthetic appeal on any device.

3. **JavaScript Interactivity**:
   - **Dynamic Features**: JavaScript powers the app’s interactive features, such as updating the checklist in real time, calculating and displaying scores, and enabling drag-and-drop functionality for reordering checklist items.
   - **Local Storage Integration**: JavaScript also facilitates interaction with the browser’s local storage, ensuring that users’ data is saved and persists across sessions. This guarantees that traders do not lose their progress even after closing or refreshing the browser.

4. **Persistent Data Storage**:
   - **Local Storage for Data Persistence**: The app relies on the browser’s local storage for saving checklist data, ensuring that the checklist’s state is preserved and readily available to the user even after restarting the browser or refreshing the page.

5. **User-Centric Design**:
   - **Intuitive and Accessible**: The design prioritizes ease of use, featuring clear typography, an intuitive interface, and interactive elements such as color changes and scaling effects upon user interaction. This user-centric design minimizes the learning curve and maximizes efficiency.
   - **Interactive Feedback Mechanisms**: Interactive elements respond visually to user actions, such as color changes on hover or subtle animations on click, providing immediate feedback to enhance the user experience.

---

### User Experience Breakdown:

The **Forex Checklist Analyzer** has been designed with the trader’s experience at its core. Every aspect of the application, from its user interface to its feature set, is crafted to offer a seamless and intuitive trading experience.

#### 1. Application Overview:
   - **Purpose**: A dynamic, interactive checklist tool for traders to organize, prioritize, and track their trading strategies in a structured way.
   - **Core Concept**: The application offers a multi-section checklist system with weighted priorities and progress tracking to ensure that traders can evaluate and rank the significance of their trading decisions.

---

### Core Functionalities:

#### 1. **Section Management**:
   - **Adding Sections**: Users can add new sections to their checklist, each representing a distinct aspect of their trading strategy. A modal window allows for the input of a section name, which is then saved to the checklist.
   - **Editing and Deleting Sections**: Users can rename existing sections or delete them entirely, with a confirmation prompt ensuring that accidental deletions are avoided. The checklist dynamically updates after changes.
   - **Reordering Sections**: Users can rearrange the order of sections through drag-and-drop functionality, allowing for a customizable organization of their strategy.

#### 2. **Criteria Management**:
   - **Adding Criteria**: Users can add new criteria to any section. Criteria include the criterion text, priority ranking, and optional notes, offering a detailed approach to managing trading strategies.
   - **Editing and Deleting Criteria**: Existing criteria can be modified or deleted with ease, and changes are instantly reflected in the user interface.
   - **Reordering Criteria**: Similar to section management, criteria can be reordered within or across sections using drag-and-drop functionality.

#### 3. **Checklist Interaction**:
   - **Toggle Completion Status**: Users can mark criteria as completed by toggling a checkbox, which updates the completion percentage and progress indicators in real time.
   - **Editing Priorities**: Traders can directly adjust the priority of any criterion, influencing its weight in the overall strategy assessment.

#### 4. **Notes and Image Upload Functionality**:
   - **Expandable Notes Section**: Each criterion includes a text area for adding notes, which can be expanded or collapsed for convenience.
   - **Image Upload**: Users can attach images to individual criteria, with image preview functionality. The app converts images into base64 format for storage, ensuring compatibility with local storage and future exports.

---

### Advanced Features:

 **Undo/Redo System**:
   - **Track and Revert Changes**: The app includes an undo/redo system, allowing users to reverse or reapply recent actions. This feature is accessible through keyboard shortcuts, improving efficiency.


### Data Management:

1. **Local Storage Integration**:
   - **Automatic Data Saving**: The application automatically saves checklist data to local storage after each modification, ensuring that users’ progress is preserved without requiring manual backups.
   
2. **Import and Export Functionality**:
   - **JSON File Format**: The app allows users to export their data in JSON format for easy sharing, backup, or transfer. Similarly, users can import data from a JSON file, enabling quick migration between devices or sessions.
   

---

### Progress Tracking:

1. **Overall Progress Calculation**:
   - **Weighted by Priority**: Progress is calculated based on the sum of priorities of completed items relative to the total priorities of all items. This ensures that high-priority items carry more weight in the progress calculation, giving traders an accurate sense of how well they’re adhering to their strategy.
   
2. **Section-Specific Progress**:
   - **Per-Section Calculations**: Progress is also calculated for each section, displayed as a progress bar. This provides users with a detailed view of how far they’ve progressed in each aspect of their trading strategy.

**Conclusion**:

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. 


example prompt has been ended.

now answer as a pro prompt engineer.

in first response, just craft the css part prompt