From d383fb6e86aadb520275abf05289592d856caae2 Mon Sep 17 00:00:00 2001
From: PawiX25 <wyrebakpawel@gmail.com>
Date: Mon, 24 Mar 2025 01:52:28 +0100
Subject: [PATCH] Add no-results messages for completed and not completed
 programs

---
 index.html | 13 +++++++++++++
 script.js  | 19 +++++++++++++++++++
 styles.css | 40 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 72 insertions(+)

diff --git a/index.html b/index.html
index fce7346..4093709 100644
--- a/index.html
+++ b/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">
diff --git a/script.js b/script.js
index 2bee58c..5930257 100644
--- a/script.js
+++ b/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) {
diff --git a/styles.css b/styles.css
index e2be332..535cbef 100644
--- a/styles.css
+++ b/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;
 }
\ No newline at end of file