diff --git a/index.html b/index.html index 353892d..fce7346 100644 --- a/index.html +++ b/index.html @@ -212,7 +212,9 @@ - + + +
diff --git a/script.js b/script.js index 52df11c..2bee58c 100644 --- a/script.js +++ b/script.js @@ -185,14 +185,14 @@ async function loadPrograms() { const response = await fetch('data.yml').then(res => res.text()); const rawPrograms = jsyaml.load(response); - const completed = []; + const ended = []; programs = Object.fromEntries( Object.entries(rawPrograms).map(([category, programsList]) => [ category, (programsList && Array.isArray(programsList)) ? programsList.filter(program => { if (program.status === 'completed' || isEventEnded(program.deadline)) { - completed.push({ ...program, status: 'completed' }); + ended.push({ ...program, status: 'completed' }); return false; } return true; @@ -201,8 +201,8 @@ async function loadPrograms() { ); delete programs['Completed']; - if (completed.length > 0) { - programs['Completed'] = completed; + if (ended.length > 0) { + programs['Ended'] = ended; } programs = Object.fromEntries( @@ -551,6 +551,8 @@ function filterPrograms(category) { const statusElement = card.querySelector('.program-status'); const deadlineElement = card.querySelector('.program-deadline'); const status = statusElement.textContent; + const programName = card.getAttribute('data-name'); + const isCompletedByUser = completedPrograms.has(programName); if (category === 'all') { card.classList.remove('hidden-by-filter'); @@ -559,6 +561,12 @@ function filterPrograms(category) { ['urgent', 'very-urgent'].some(cls => deadlineElement.classList.contains(cls)); card.classList.toggle('hidden-by-filter', !isEndingSoon); + } else if (category === 'user-completed') { + card.classList.toggle('hidden-by-filter', !isCompletedByUser); + } else if (category === 'user-not-completed') { + card.classList.toggle('hidden-by-filter', isCompletedByUser); + } else if (category === 'ended') { + card.classList.toggle('hidden-by-filter', status !== 'completed'); } else { card.classList.toggle('hidden-by-filter', status !== category); } diff --git a/styles.css b/styles.css index 19db1f8..e2be332 100644 --- a/styles.css +++ b/styles.css @@ -795,6 +795,33 @@ td { color: var(--white); } +.filter-btn.user-filter { + position: relative; + overflow: hidden; + border: 1px solid var(--primary); + background: rgba(236, 55, 80, 0.1); + transition: all 0.3s ease; +} + +.filter-btn.user-filter::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(90deg, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.1) 50%, + rgba(255, 255, 255, 0) 100%); + transform: translateX(-100%); + transition: transform 0.8s ease; +} + +.filter-btn.user-filter:hover::before { + transform: translateX(100%); +} + .category-section.hidden { display: none; } @@ -1998,9 +2025,9 @@ html { gap: 5px; font-size: var(--font-1); font-weight: var(--font-weight-bold); - color: var(--green); - background: rgba(51, 214, 166, 0.1); - border: 1px solid var(--green); + color: var(--white); + background: linear-gradient(135deg, var(--green) 0%, #25a080 100%); + border: none; padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radii-circle); margin-right: var(--spacing-2); @@ -2009,6 +2036,29 @@ html { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; visibility: hidden; + box-shadow: 0 2px 8px rgba(51, 214, 166, 0.3); + position: relative; + overflow: hidden; + z-index: 2; +} + +.user-completed-badge::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); + transform: translateX(-100%); + animation: shimmer 2s infinite; + z-index: -1; +} + +@keyframes shimmer { + 100% { + transform: translateX(100%); + } } .user-completed-badge.visible { @@ -2017,6 +2067,10 @@ html { visibility: visible; } +.user-completed-badge svg { + filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); +} + .status-container { display: flex; align-items: center;