diff --git a/favorite.html b/favorite.html index ee8b1ee..978acda 100644 --- a/favorite.html +++ b/favorite.html @@ -22,6 +22,29 @@ body { font-family: "Noto Kufi Arabic", sans-serif; } + .filter-btn { + position: relative; + background-color: transparent; + transition: color 0.3s; +} + +.filter-btn::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 3px; + background-color: #C10D10; + transition: width 0.4s ease-in-out; +} + +.filter-btn.active::after { + width: 100%; + right: 0; + left: auto; +} + @@ -32,18 +55,19 @@

♥️ قائمة المفضلة

- - - - + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index a5e2406..f143db3 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,29 @@ body { font-family: "Noto Kufi Arabic", sans-serif; } + .filter-btn { + position: relative; + background-color: transparent; + transition: color 0.3s; +} + +.filter-btn::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 2px; + background-color: #C10D10; + transition: width 0.4s ease-in-out; +} + +.filter-btn.active::after { + width: 100%; + right: 0; + left: auto; +} + .gradient-border { border-width: 3px; border-style: solid; @@ -71,13 +94,15 @@

- - -
diff --git a/js/script.js b/js/script.js index 1f12845..84a5767 100644 --- a/js/script.js +++ b/js/script.js @@ -45,28 +45,27 @@ document.addEventListener("DOMContentLoaded", function() { // Swap Buttons in Index function filterCards(category) { -const cards = document.querySelectorAll('.card'); -const buttons = document.querySelectorAll('.filter-btn'); + const cards = document.querySelectorAll('.card'); + const buttons = document.querySelectorAll('.filter-btn'); -buttons.forEach(btn => { -if (btn.textContent.trim() === getButtonText(category)) { - btn.classList.remove('bg-transparent', 'text-black', 'border-[#C10D10]'); - btn.classList.add('bg-[#C10D10]', 'text-white'); -} else { - btn.classList.remove('bg-[#C10D10]', 'text-white'); - btn.classList.add('bg-transparent', 'text-black', 'border-[#C10D10]'); -} -}); + buttons.forEach(btn => { + if (btn.textContent.trim() === getButtonText(category)) { + btn.classList.add('active'); + } else { + btn.classList.remove('active'); + } + }); -cards.forEach(card => { - if (category === 'all' || card.dataset.category === category) { - card.classList.remove('hidden'); - } else { - card.classList.add('hidden'); - } -}); + cards.forEach(card => { + if (category === 'all' || card.dataset.category === category) { + card.classList.remove('hidden'); + } else { + card.classList.add('hidden'); + } + }); } + function getButtonText(category) { switch(category) { case 'all': return 'الكل';