Add no-results messages for completed and not completed programs

index.html

@@ -226,6 +226,19 @@
         </div>
 
         <div id="programs-container" class="fade-in"></div>
+        
+        <div class="no-results-message" id="user-completed-empty">
+            <h3>You haven't completed any programs yet</h3>
+            <p>Click the circle button on a program card when you've completed it to track your progress.</p>
+            <button class="filter-btn" data-category="all">View all programs</button>
+        </div>
+        
+        <div class="no-results-message" id="user-not-completed-empty">
+            <div class="no-results-icon">🎉</div>
+            <h3>Congratulations!</h3>
+            <p>You've completed all the programs available! Check back later for new opportunities.</p>
+            <button class="filter-btn" data-category="all">View all programs</button>
+        </div>
     </div>
 
     <footer class="site-footer">

script.js

@@ -540,6 +540,9 @@ function filterPrograms(category) {
     const sections = document.querySelectorAll('.category-section');
     const buttons = document.querySelectorAll('.filter-btn');
 
+    document.getElementById('user-completed-empty').classList.remove('visible');
+    document.getElementById('user-not-completed-empty').classList.remove('visible');
+
     buttons.forEach(btn => {
         btn.classList.toggle('active', btn.dataset.category === category);
     });
@@ -577,6 +580,22 @@ function filterPrograms(category) {
                          !card.classList.contains('hidden-by-search'));
         section.classList.toggle('hidden', !hasVisibleCards);
     });
+
+    if (category === 'user-completed' || category === 'user-not-completed') {
+        const allProgramCards = document.querySelectorAll('.program-card');
+        const hasVisibleCards = Array.from(allProgramCards).some(card => 
+            !card.classList.contains('hidden-by-filter') && 
+            !card.classList.contains('hidden-by-search')
+        );
+
+        if (!hasVisibleCards) {
+            if (category === 'user-completed') {
+                document.getElementById('user-completed-empty').classList.add('visible');
+            } else {
+                document.getElementById('user-not-completed-empty').classList.add('visible');
+            }
+        }
+    }
 }
 
 function searchPrograms(searchTerm) {

styles.css

@@ -2155,4 +2155,44 @@ html {
     margin-bottom: var(--spacing-1);
     margin-right: 0;
   }
+}
+
+.no-results-message {
+  display: none;
+  text-align: center;
+  padding: var(--spacing-5);
+  font-size: var(--font-3);
+  color: var(--muted);
+  width: 100%;
+  border: 2px dashed var(--border);
+  border-radius: var(--radii-default);
+  margin: var(--spacing-4) 0;
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(5px);
+}
+
+.no-results-message.visible {
+  display: block;
+  animation: fade-in 0.5s ease forwards;
+}
+
+.no-results-message h3 {
+  font-size: var(--font-4);
+  margin-bottom: var(--spacing-2);
+  color: var(--text);
+}
+
+.no-results-message p {
+  margin-bottom: var(--spacing-3);
+}
+
+.no-results-message .action-hint {
+  font-weight: var(--font-weight-bold);
+  color: var(--primary);
+}
+
+.no-results-icon {
+  font-size: 3rem;
+  margin-bottom: var(--spacing-3);
+  opacity: 0.7;
 }