<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Workout App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #91bab3;
            margin: 0;
            padding: 0;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            background-color: #C0C0C0;
            padding: 20px;
        }
        .item {
            border: 2px solid #000;
            background-color: #C0C0C0;
            width: 300px;
            margin: 10px;
            text-align: center;
        }
        .item img {
            width: 100%;
            height: auto;
        }
        .buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px 0;
        }
        .buttons button, .buttons input {
            margin: 0 5px;
            padding: 10px;
        }
        .buttons input {
            width: 50px;
        }
    </style>
</head>
<body>
    <div class="container" id="items-container">
        <!-- Items will be injected here by JavaScript -->
    </div>

    <script>
        const data = {
            "سُبْحَانَ اللَّهِ وَبِحَمْدِهِ ": {"reps": 0, "image": "1.jpg", "completed": false, "increment": 1, "decrement": 1},
            "سُبْحَانَ اللهِ العَظِيمِ وَبِحَمْدِهِ ": {"reps": 0, "image": "2.jpg", "completed": false, "increment": 1, "decrement": 1},
            "سُبْحَانَ اللَّهِ وَبِحَمْدِهِ ، سُبْحَانَ اللَّهِ الْعَظِيمِ ": {"reps": 0, "image": "3.jpg", "completed": false, "increment": 1, "decrement": 1},
            "لاإله إلا الله وحده لا شريك له له الملك وله الحمد وهو على كل شيء قدير": {"reps": 0, "image": "4.jpg", "completed": false, "increment": 1, "decrement": 1},
            "لا حَوْلَ وَلا قُوَّةَ إِلا بِاللَّهِ ": {"reps": 0, "image": "5.jpeg", "completed": false, "increment": 1, "decrement": 1},
            "الْحَمْدُ للّهِ رَبِّ الْعَالَمِينَ ": {"reps": 0, "image": "6.jpg", "completed": false, "increment": 1, "decrement": 1},
            "الْلَّهُم صَلِّ وَسَلِم وَبَارِك عَلَى سَيِّدِنَا مُحَمَّد ": {"reps": 0, "image": "7.jpg", "completed": false, "increment": 1, "decrement": 1},
            "الله أكبر": {"reps": 0, "image": "8.jpg", "completed": false, "increment": 1, "decrement": 1}
        };

        function createItem(key, value) {
            const item = document.createElement('div');
            item.className = 'item';

            const label = document.createElement('p');
            label.innerHTML = `${key}<br>عدد: <span id="reps-${key}">${value.reps}</span>`;
            item.appendChild(label);

            const image = document.createElement('img');
            image.src = value.image;
            item.appendChild(image);

            const buttons = document.createElement('div');
            buttons.className = 'buttons';

            const incrementButton = document.createElement('button');
            incrementButton.textContent = '+';
            incrementButton.onclick = () => changeReps(key, 'yes');
            buttons.appendChild(incrementButton);

            const decrementButton = document.createElement('button');
            decrementButton.textContent = '-';
            decrementButton.onclick = () => changeReps(key, 'no');
            buttons.appendChild(decrementButton);

            const entry = document.createElement('input');
            entry.type = 'number';
            entry.value = '';
            entry.placeholder = 'عدد';
            buttons.appendChild(entry);

            const customButton = document.createElement('button');
            customButton.textContent = 'تطبيق';
            customButton.onclick = () => changeReps(key, 'custom', entry.value);
            buttons.appendChild(customButton);

            item.appendChild(buttons);
            return item;
        }

        function changeReps(key, incrementType, customValue = null) {
            const workoutData = data[key];
            if (incrementType === 'yes') {
                workoutData.reps += workoutData.increment;
            } else if (incrementType === 'no') {
                workoutData.reps -= workoutData.decrement;
            } else if (incrementType === 'custom' && customValue !== null) {
                try {
                    customValue = parseInt(customValue);
                    workoutData.reps += customValue;
                } catch {
                    console.error("Invalid custom value");
                }
            }
            document.getElementById(`reps-${key}`).textContent = workoutData.reps;
            saveProgress();
        }

        function saveProgress() {
            localStorage.setItem('workoutProgress', JSON.stringify(data));
        }

        function loadProgress() {
            const savedData = localStorage.getItem('workoutProgress');
            if (savedData) {
                Object.assign(data, JSON.parse(savedData));
            }
        }

        function initialize() {
            loadProgress();
            const container = document.getElementById('items-container');
            for (const [key, value] of Object.entries(data)) {
                const item = createItem(key, value);
                container.appendChild(item);
            }
        }

        window.onload = initialize;
    </script>
</body>
</html>
improve the design