<!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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            background: url('background.jpg') no-repeat center center fixed; 
            background-size: cover;
            overflow: hidden;
        }
        .filter-container {
            margin: 20px 0;
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
        }
        .filter-button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
        }
        .filter-button:hover {
            background-color: #45a049;
        }
        .filter-button:active {
            background-color: #3e8e41;
            transform: translateY(2px);
        }
        .filter-button.active {
            background-color: #008CBA;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow-y: auto; /* Enable vertical scrolling */
            overflow-x: hidden; /* Prevent horizontal scrolling */
            height: 85%;
            width: 95%;
        }
        .item {
            border: 2px solid #ccc;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            width: 280px; /* Fixed width */
            height: 380px; /* Fixed height */
            margin: 10px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
            cursor: pointer;
        }
        .item:hover {
            transform: translateY(-10px);
        }
        .item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
        }
        .item p {
            font-size: 18px;
            margin: 10px 0;
            padding: 0 10px;
            color: #333;
        }
        .buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px 0;
        }
        .buttons button, .buttons input {
            margin: 0 5px;
            padding: 10px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
        }
        .buttons input {
            width: 60px;
            text-align: center;
            border: 1px solid #ccc;
        }
        .buttons button {
            background-color: #4CAF50;
            color: white;
            transition: background-color 0.3s;
        }
        .buttons button:hover {
            background-color: #45a049;
        }
        .buttons button:active {
            background-color: #3e8e41;
        }
        .buttons button.decrement {
            background-color: #f44336;
        }
        .buttons button.decrement:hover {
            background-color: #e53935;
        }
        .buttons button.decrement:active {
            background-color: #d32f2f;
        }
        .buttons button.apply {
            background-color: #008CBA;
        }
        .buttons button.apply:hover {
            background-color: #007bb5;
        }
        .buttons button.apply:active {
            background-color: #006aa8;
        }
        .hidden {
            display: none;
        }
        @media (max-width: 768px) {
            .filter-container {
                flex-direction: column;
                align-items: center;
            }
            .container {
                width: 100%;
                padding: 10px;
            }
            .item {
                margin: 10px; /* Maintain margins */
            }
        }
        @media (max-width: 480px) {
            .filter-button {
                width: 100%; /* Full width buttons on small screens */
                margin-bottom: 10px;
            }
            .buttons {
                flex-direction: column; /* Stack buttons vertically */
            }
            .buttons button, .buttons input {
                width: 100%; /* Full width buttons and input */
                margin: 5px 0;
            }
        }
    </style>
</head>
<body>
    <div class="filter-container">
        <button class="filter-button active" data-category="all">الجميع</button>
        <button class="filter-button" data-category="استغفار">استغفار</button>
        <button class="filter-button" data-category="تسبيح">تسبيح</button>
    </div>
    <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, "category": "تسبيح", "url": "https://example.com/page1"},
            "سُبْحَانَ اللهِ العَظِيمِ وَبِحَمْدِهِ ": {"reps": 0, "image": "2.jpg", "completed": false, "increment": 1, "decrement": 1, "category": "تسبيح", "url": "https://example.com/page2"},
            "سُبْحَانَ اللَّهِ وَبِحَمْدِهِ ، سُبْحَانَ اللَّهِ الْعَظِيمِ ": {"reps": 0, "image": "3.jpg", "completed": false, "increment": 1, "decrement": 1, "category": "تسبيح", "url": "https://example.com/page3"},
            "لاإله إلا الله وحده لا شريك له له الملك وله الحمد وهو على كل شيء قدير": {"reps": 0, "image": "4.jpg", "completed": false, "increment": 1, "decrement": 1, "category": "استغفار", "url": "https://example.com/page4"},
            "لا حَوْلَ وَلا قُوَّةَ إِلا بِاللَّهِ ": {"reps": 0, "image": "5.jpeg", "completed": false, "increment": 1, "decrement": 1, "category": "استغفار", "url": "https://example.com/page5"},
            "الْحَمْدُ للّهِ رَبِّ الْعَالَمِينَ ": {"reps": 0, "image": "6.jpg", "completed": false, "increment": 1, "decrement": 1, "category": "تسبيح", "url": "https://example.com/page6"},
            "الْلَّهُم صَلِّ وَسَلِم وَبَارِك عَلَى سَيِّدِنَا مُحَمَّد ": {"reps": 0, "image": "7.jpg", "completed": false, "increment": 1, "decrement": 1, "category": "تسبيح", "url": "https://example.com/page7"},
            "الله أكبر": {"reps": 0, "image": "8.jpg", "completed": false, "increment": 1, "decrement": 1, "category": "تسبيح", "url": "https://example.com/page8"}
        };

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

            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 = (event) => {
                event.stopPropagation(); // Prevent click event from bubbling up to the card
                changeReps(key, 'yes');
            };
            buttons.appendChild(incrementButton);

            const decrementButton = document.createElement('button');
            decrementButton.textContent = '-';
            decrementButton.className = 'decrement';
            decrementButton.onclick = (event) => {
                event.stopPropagation(); // Prevent click event from bubbling up to the card
                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.className = 'apply';
            customButton.onclick = (event) => {
                event.stopPropagation(); // Prevent click event from bubbling up to the card
                changeReps(key, 'custom', entry.value);
            };
            buttons.appendChild(customButton);

            item.appendChild(buttons);

            item.onclick = () => {
                window.location.href = value.url;
            };

            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 filterItems(category) {
            const items = document.querySelectorAll('.item');
            items.forEach(item => {
                if (category === 'all' || item.getAttribute('data-category') === category) {
                    item.classList.remove('hidden');
                } else {
                    item.classList.add('hidden');
                }
            });

            document.querySelectorAll('.filter-button').forEach(button => {
                if (button.getAttribute('data-category') === category) {
                    button.classList.add('active');
                } else {
                    button.classList.remove('active');
                }
            });
        }

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

            document.querySelectorAll('.filter-button').forEach(button => {
                button.addEventListener('click', (event) => {
                    const category = event.target.getAttribute('data-category');
                    filterItems(category);
                });
            });
        }

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

hide the bar