craft a visual appealing css for my html javascript app. it should be visually complex and feature-rich interface.


the javascript will crafted for this html css:

<!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>
--your output will pasted here--
</style>
<script type="module">
document.addEventListener('DOMContentLoaded', () => {
const STORAGE_KEY = 'criteriaList';
const checklistContainer = document.getElementById('checklistContainerSection1');
const searchBox = document.getElementById('searchBoxSection1');
const sliderFill = document.getElementById('sliderFillSection1');
const numericalLabel = document.getElementById('numericalLabelSection1');
const totalItemsLabel = document.getElementById('totalItemsSection1');
const activeItemsLabel = document.getElementById('activeItemsSection1');
const addButton = document.querySelector('.add-button');
const exportButton = document.querySelector('.export-button');
const importButton = document.querySelector('.import-button');

let criteriaList = [];

// Initialize the application
const init = () => {
loadCriteria();
renderCriteriaList();
updateProgress();
attachEventListeners();
};

// Load criteria from localStorage
const loadCriteria = () => {
const data = localStorage.getItem(STORAGE_KEY);
criteriaList = data ? JSON.parse(data) : [];
};

// Save criteria to localStorage
const saveCriteria = () => {
localStorage.setItem(STORAGE_KEY, JSON.stringify(criteriaList));
};

// Attach event listeners
const attachEventListeners = () => {
addButton.addEventListener('click', addCriterion);
exportButton.addEventListener('click', exportData);
importButton.addEventListener('click', importData);
searchBox.addEventListener('input', searchCriteria);
};

// Add new criterion
const addCriterion = () => {
const name = prompt('Enter criterion name:');
if (!name) {
alert('Criterion name cannot be empty.');
return;
}
const priorityInput = prompt('Enter priority (non-negative number):', '0');
const priority = parseFloat(priorityInput);
if (isNaN(priority) || priority < 0) {
alert('Priority must be a non-negative number.');
return;
}
const criterion = {
id: Date.now(),
name: name.trim(),
priority,
active: false
};
criteriaList.push(criterion);
saveCriteria();
addCriterionToDOM(criterion);
updateProgress();
};

// Create and add criterion to DOM
const addCriterionToDOM = (criterion) => {
const itemDiv = createCriterionElement(criterion);
checklistContainer.appendChild(itemDiv);
updateItemCounts();
};

// Create criterion element
const createCriterionElement = (criterion) => {
const itemDiv = document.createElement('div');
itemDiv.className = 'checklist-item';
itemDiv.dataset.id = criterion.id;
itemDiv.draggable = true;

// Use CSS Grid for layout
itemDiv.style.display = 'grid';
itemDiv.style.gridTemplateColumns = 'auto 1fr auto';
itemDiv.style.gridGap = '10px';
itemDiv.style.alignItems = 'center';

// Drag and Drop Event Listeners
itemDiv.addEventListener('dragstart', handleDragStart);
itemDiv.addEventListener('dragover', handleDragOver);
itemDiv.addEventListener('drop', handleDrop);
itemDiv.addEventListener('dragend', handleDragEnd);

// Checkbox
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = criterion.active;
checkbox.addEventListener('change', () => {
criterion.active = checkbox.checked;
saveCriteria();
updateProgress();
});

// Textarea for criterion name
const textarea = document.createElement('textarea');
textarea.value = criterion.name;
textarea.addEventListener('input', () => {
criterion.name = textarea.value;
saveCriteria();
});

// Right Side Container
const rightDiv = document.createElement('div');
rightDiv.style.display = 'flex';
rightDiv.style.alignItems = 'center';
rightDiv.style.gap = '5px';

// Priority Box
const priorityBox = document.createElement('div');
priorityBox.className = 'priority-box';
priorityBox.textContent = criterion.priority;
priorityBox.addEventListener('click', () => {
const newPriorityInput = prompt('Enter new priority:', criterion.priority);
const newPriority = parseFloat(newPriorityInput);
if (isNaN(newPriority) || newPriority < 0) {
alert('Priority must be a non-negative number.');
return;
}
criterion.priority = newPriority;
priorityBox.textContent = newPriority;
saveCriteria();
updateProgress();
});

// Delete Button
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', () => {
if (confirm('Are you sure you want to delete this criterion?')) {
removeCriterion(criterion.id);
}
});

rightDiv.appendChild(priorityBox);
rightDiv.appendChild(deleteButton);

// Append elements to itemDiv
itemDiv.appendChild(checkbox);
itemDiv.appendChild(textarea);
itemDiv.appendChild(rightDiv);

return itemDiv;
};

// Remove criterion
const removeCriterion = (id) => {
criteriaList = criteriaList.filter(c => c.id !== id);
saveCriteria();
const itemDiv = checklistContainer.querySelector([data-id='${id}']);
if (itemDiv) checklistContainer.removeChild(itemDiv);
updateProgress();
updateItemCounts();
};

// Render criteria list
const renderCriteriaList = () => {
checklistContainer.innerHTML = '';
criteriaList.forEach(criterion => {
addCriterionToDOM(criterion);
});
};

// Update progress bar and numerical label
const updateProgress = () => {
const totalScore = criteriaList.filter(c => c.active).reduce((sum, c) => sum + c.priority, 0);
const cappedScore = Math.min(totalScore, 100);
sliderFill.style.width = ${cappedScore}%;
numericalLabel.textContent = cappedScore;
numericalLabel.style.left = calc(${cappedScore}% - ${numericalLabel.offsetWidth / 2}px);
};

// Update total and active item counts
const updateItemCounts = () => {
totalItemsLabel.textContent = criteriaList.length;
activeItemsLabel.textContent = criteriaList.filter(c => c.active).length;
};

// Search criteria
const searchCriteria = () => {
const searchTerm = searchBox.value.toLowerCase();
const items = checklistContainer.querySelectorAll('.checklist-item');
items.forEach(item => {
const text = item.querySelector('textarea').value.toLowerCase();
item.style.display = text.includes(searchTerm) ? 'grid' : 'none';
});
};

// Export data
const exportData = () => {
const dataStr = JSON.stringify(criteriaList, null, 2);
const blob = new Blob([dataStr], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'criteria.json';
a.click();
URL.revokeObjectURL(url);
};

// Import data
const importData = () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'application/json';
input.addEventListener('change', (event) => {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
try {
const data = JSON.parse(e.target.result);
if (!Array.isArray(data)) throw new Error('Invalid data format.');
criteriaList = data.map(item => ({
id: item.id || Date.now(),
name: item.name || '',
priority: item.priority >= 0 ? item.priority : 0,
active: !!item.active
}));
saveCriteria();
renderCriteriaList();
updateProgress();
} catch (error) {
alert('Error importing data: ' + error.message);
}
};
reader.readAsText(file);
});
input.click();
};

// Drag and Drop Handlers
let draggedItem = null;

const handleDragStart = function(e) {
draggedItem = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', '');
this.classList.add('dragging');
};

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

const handleDrop = function(e) {
e.stopPropagation();
if (draggedItem !== this) {
const draggedId = parseInt(draggedItem.dataset.id);
const targetId = parseInt(this.dataset.id);
const draggedIndex = criteriaList.findIndex(c => c.id === draggedId);
const targetIndex = criteriaList.findIndex(c => c.id === targetId);
if (draggedIndex >= 0 && targetIndex >= 0) {
const [movedItem] = criteriaList.splice(draggedIndex, 1);
criteriaList.splice(targetIndex, 0, movedItem);
saveCriteria();
renderCriteriaList();
}
}
this.classList.remove('dragging');
};

const handleDragEnd = function(e) {
this.classList.remove('dragging');
draggedItem = null;
};

// Initialize the app
init();
});
</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>

---
example css:

 <style>
/* Global Styles */
body {
    background: linear-gradient(to bottom, #1A2634, #323C4F, #424D5C);
    color: #F2F2F2;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Header Styles */
header {
    margin-bottom: 30px;
}

header .editable-title {
    color: #F2F2F2;
    font-weight: 700;
    font-size: 2.5em;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
}

header .editable-title:focus {
    outline: none;
    border-bottom: 2px solid #D8A7A1;
}

header .slider-background {
    background-color: rgba(255, 255, 255, 0.2);
    height: 20px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

header .slider-fill {
    background: linear-gradient(to right, #B38184, #D8A7A1);
    height: 100%;
    border-radius: 10px;
    width: 0%;
    position: relative;
    transition: width 0.3s ease-in-out;
}

header .numerical-label {
    position: absolute;
    top: -30px;
    color: #F2F2F2;
    font-weight: 700;
    font-size: 1.2em;
    transform: translateX(-50%);
    white-space: nowrap;
}

header .item-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

header .item-count label,
header .item-count span {
    font-size: 1em;
}

header .narrow-search-box {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    padding: 10px 15px;
    color: #F2F2F2;
    width: 100%;
    margin-top: 10px;
    border-radius: 5px;
}

header .narrow-search-box::placeholder {
    color: #F2F2F2;
    opacity: 0.7;
}

header .narrow-search-box:focus {
    outline: none;
    box-shadow: 0 0 5px #D8A7A1;
}

/* Checklist Item Styles */
.checklist-container {
    margin-bottom: 30px;
}

.checklist-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-gap: 15px;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.checklist-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.checklist-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #D8A7A1;
    cursor: pointer;
}

.checklist-item textarea {
    background-color: transparent;
    color: #F2F2F2;
    border: none;
    resize: none;
    width: 100%;
    font-family: inherit;
    font-size: 1em;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: border-bottom 0.3s;
}

.checklist-item textarea:focus {
    outline: none;
    border-bottom: 1px solid #D8A7A1;
}

.checklist-item .priority-box {
    background-color: #B38184;
    padding: 5px 10px;
    color: #1A2634;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.checklist-item .priority-box:hover {
    background-color: #D8A7A1;
}

.checklist-item button {
    background: none;
    border: none;
    color: #F2F2F2;
    font-size: 1em;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s;
}

.checklist-item button:hover {
    color: #D8A7A1;
}

.checklist-item .rightDiv {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Button Styles */
.button-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.button-container button {
    background: linear-gradient(to right, #B38184, #D8A7A1);
    border: none;
    color: #1A2634;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 700;
    flex: 1;
    transition: background 0.3s, transform 0.1s;
}

.button-container button:hover {
    background: linear-gradient(to right, #D8A7A1, #B38184);
}

.button-container button:active {
    transform: scale(0.98);
}

.button-container button:not(:last-child) {
    margin-right: 10px;
}

/* Drag and Drop Styles */
.dragging {
    opacity: 0.5;
    background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
    header .editable-title {
        font-size: 2em;
    }

    .button-container {
        flex-direction: column;
    }

    .button-container button {
        margin-bottom: 10px;
    }

    .button-container button:not(:last-child) {
        margin-right: 0;
    }

    .checklist-item {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .checklist-item .rightDiv {
        margin-top: 10px;
        justify-content: flex-start;
    }
}
  </style>


craft somthing else but use same colors