<!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>
        :root {
            --color1: rgb(0, 231, 255);
            --color2: rgb(255, 0, 231);
        }

        body {
            font-family: 'Cairo', 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;
        }

        .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;
            scroll-behavior: smooth;
            overflow-x: hidden;
            height: 85%;
            width: 95%;
        }

        .card {
            width: 310px;
            height: 500px;
            position: relative;
            overflow: hidden;
            margin: 60px 70px;
            border-radius: 5%/3.5%;
            box-shadow: -5px -5px 5px -5px var(--color1), 5px 5px 5px -5px var(--color2), -7px -7px 10px -5px transparent, 7px 7px 10px -5px transparent, 0 0 5px 0px rgba(255, 255, 255, 0), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
            transition: transform 0.5s ease, box-shadow 0.2s ease;
            will-change: transform, filter;
            background-color: #040712;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            transform-origin: center;
        }

        .card:before,
        .card:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background-repeat: no-repeat;
            opacity: 0.5;
            mix-blend-mode: color-dodge;
            transition: all 0.33s ease;
        }

        .card:before {
            background-position: 50% 50%;
            background-size: 300% 300%;
            background-image: linear-gradient(115deg, transparent 0%, var(--color1) 25%, transparent 47%, transparent 53%, var(--color2) 75%, transparent 100%);
            opacity: 0.5;
            filter: brightness(0.5) contrast(1);
            z-index: 1;
        }

        .card:after {
            opacity: 1;
            background-image: url("https://assets.codepen.io/13471/sparkles.gif"), url(https://assets.codepen.io/13471/holo.png), linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
            background-position: 50% 50%;
            background-size: 160%;
            background-blend-mode: overlay;
            z-index: 2;
            filter: brightness(1) contrast(1);
            transition: all 0.33s ease;
            mix-blend-mode: color-dodge;
            opacity: 0.75;
        }

        .card:hover {
            box-shadow: -20px -20px 30px -25px var(--color1), 20px 20px 30px -25px var(--color2), -7px -7px 10px -5px var(--color1), 7px 7px 10px -5px var(--color2), 0 0 13px 4px rgba(255, 255, 255, 0.3), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
        }

        .buttons {
            display: none;
            position: absolute;
            top: 50%;
            left: calc(100% + 10px); /* Position buttons to the right of the card */
            transform: translateY(-50%);
            z-index: 10;
        }



        .button {
            display: block;
            margin: 10px 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

        .button:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .filter-container {
                flex-direction: column;
                align-items: center;
            }
            .container {
                width: 100%;
                padding: 10px;
            }
            .card {
                margin: 20px 0;
            }
        }

        @media (max-width: 480px) {
            .filter-button {
                width: 100%;
                margin-bottom: 10px;
            }
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
</head>
<body>
    <div class="filter-container">
        <button class="filter-button active" data-category="all">الجميع</button>
        <button class="filter-button" data-category="forgive">استغفار</button>
        <button class="filter-button" data-category="tasbeh">تسبيح</button>
        <button class="filter-button" id="admin-button">Admin Panel</button>
    </div>
    <div class="container" id="items-container">
        <!-- Items will be injected here by JavaScript -->
    </div>
    <style class="hover"></style>

    <script>
        const data = {
            "سُبْحَانَ اللَّهِ وَبِحَمْدِهِ ": {"reps": 0, "frontImage": "1.jpg", "category": "tasbeh"},
            "سُبْحَانَ اللهِ العَظِيمِ وَبِحَمْدِهِ ": {"reps": 0, "frontImage": "2.jpg", "category": "tasbeh"},
            "سُبْحَانَ اللَّهِ وَبِحَمْدِهِ ، سُبْحَانَ اللَّهِ الْعَظِيمِ ": {"reps": 0, "frontImage": "3.jpg", "category": "tasbeh"},
            "لا حَوْلَ وَلا قُوَّةَ إِلا بِاللَّهِ ": {"reps": 0, "frontImage": "5.jpeg", "category": "forgive"},
            " العلي لا حَوْلَ وَلا قُوَّةَ إِلا بِاللَّهِ ": {"reps": 0, "frontImage": "5.jpeg", "category": "forgive"},
            " البعلي لا حَوْلَ وَلا قُوَّةَ إِلا بِاللَّهِ ": {"reps": 0, "frontImage": "5.jpeg", "category": "forgive"},
            " العلي لا حَوْصصلَ وَلا قُوَّةَ إِلا بِاللَّهِ ": {"reps": 0, "frontImage": "5.jpeg", "category": "forgive"},
            " العلي لا صصحَوْلَ وَلا قُوَّةَ إِلا بِاللَّهِ ": {"reps": 0, "frontImage": "5.jpeg", "category": "forgive"},
        };

        function createItem(key, value) {
            const card = document.createElement('div');
            card.className = 'card';
            card.setAttribute('data-category', value.category);
            card.style.backgroundImage = `url(${value.frontImage})`;

            // Create buttons container
            const buttonsContainer = document.createElement('div');
            buttonsContainer.className = 'buttons';

            // Create button
            const button = document.createElement('div');
            button.className = 'button';
            button.innerText = '+';
            buttonsContainer.appendChild(button);

            card.appendChild(buttonsContainer);

            // Initialize VanillaTilt with adjusted options
            VanillaTilt.init(card, {
                max: 10, // Reduced maximum tilt rotation
                speed: 400, // Speed of the transition
                scale: 1.05, // Slight scale effect
                glare: true, // Enable glare effect
                "max-glare": 0.2, // Maximum glare opacity
                perspective: 1000 // Increase perspective to reduce depth effect
            });

            // Add hover event listener
            card.addEventListener('mouseenter', () => {
                buttonsContainer.style.display = 'block';
            });

            card.addEventListener('mouseleave', () => {
                buttonsContainer.style.display = 'none';
            });

            return card;
        }

        function loadItems() {
            const itemsContainer = document.getElementById('items-container');
            itemsContainer.innerHTML = '';

            const storedData = JSON.parse(localStorage.getItem('workoutAppData')) || data;
            Object.keys(storedData).forEach(key => {
                const value = storedData[key];
                const item = createItem(key, value);
                itemsContainer.appendChild(item);
            });
        }

        document.querySelectorAll('.filter-button').forEach(button => {
            button.onclick = () => {
                document.querySelectorAll('.filter-button').forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
                const category = button.getAttribute('data-category');
                filterItems(category);
            };
        });

        function filterItems(category) {
            const items = document.querySelectorAll('.container .card');
            items.forEach(item => {
                if (category === 'all' || item.getAttribute('data-category') === category) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        }

        document.getElementById('admin-button').onclick = () => {
            window.location.href = 'admin.html';
        };

        window.onload = loadItems;
    </script>
</body>
</html>
I WANT YOU TO ADD UPDATE WHEN I HOVER TO THE CARD IT SHOULD BE A ROUND BUTTON IN THE RIGHT THE SPACE BETWEEN IT AN THE CARD 20 PX ON THE RIGHT