Update index.html

index.html

@@ -90,6 +90,29 @@
       color: black;
     }
 
+    /* Existing tag styles */
+    .tag.text { background-color: #9c27b0; color: white; }
+    .tag.audio { background-color: #ff9800; color: white; }
+    .tag.vision { background-color: #03a9f4; color: white; }
+    .tag.multimodal { background-color: #795548; color: white; }
+    .tag.video { background-color: #E91E63; color: white; }
+    .tag.image { background-color: #00BCD4; color: white; }
+    .tag.utility { background-color: #9E9E9E; color: white; }
+    .tag.predict { background-color: #673AB7; color: white; }
+    .tag.game { background-color: #4CAF50; color: white; }
+    .tag.education { background-color: #3F51B5; color: white; }
+    .tag.announcement { background-color: #607d8b; color: white; }
+
+    /* New Productivity Tag Styles */
+    .tag.productivity {
+      background-color: #009688; /* Teal color */
+      color: white;
+    }
+    .tag.Productivity { /* Ensure case-insensitive matching */
+      background-color: #009688; /* Teal color */
+      color: white;
+    }
+
     .tag.text { background-color: #9c27b0; color: white; }
     .tag.audio { background-color: #ff9800; color: white; }
     .tag.vision { background-color: #03a9f4; color: white; }
@@ -162,15 +185,7 @@
       color: white;
     }
 
-    .category-group {
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      gap: 8px;
-      margin-top: 10px;
-      flex-wrap: wrap;
-    }
-
+    /* Existing toggle button styles */
     .toggle-button[data-filter="best"] { background-color: #FFD700; color: black; }
     .toggle-button[data-filter="new"] { background-color: #FF4081; color: white; }
     .toggle-button[data-filter="popular"] { background-color: #ffa500; color: black; }
@@ -185,6 +200,10 @@
     .toggle-button[data-filter="game"] { background-color: #4CAF50; color: white; }
     .toggle-button[data-filter="education"] { background-color: #3F51B5; color: white; }
 
+    /* New Productivity Toggle Button Style */
+    .toggle-button[data-filter="productivity"] { background-color: #009688; color: white; }
+    .toggle-button[data-filter="productivity"].active { background-color: #00796b; border-color: #00796b; }
+
     .counter-container {
       text-align: center;
       padding: 15px;
@@ -236,6 +255,9 @@
       <button class="toggle-button" data-filter="predict">Predict</button>
       <button class="toggle-button" data-filter="game">Game</button>
       <button class="toggle-button" data-filter="education">Education</button>
+      
+      <!-- New Productivity Toggle Button -->
+      <button class="toggle-button" data-filter="productivity">Productivity</button>
     </div>
   </div>
   
@@ -1316,6 +1338,7 @@
   </div>
   
  
+
   <script>
     function updateCounts() {
       const bestCount = document.querySelectorAll('.tag.best').length;