Update backup

backup

@@ -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>
   
@@ -262,7 +284,7 @@
       <div class="event">
         <h4>aiqcamp/diagram</h4>
         <p>FLUX DIAGRAM GENERATOR(<a href="https://huggingface.co/spaces/aiqcamp/diagram" target="_blank">link</a>).</p>
-        <span class="tag utility">Utility</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag best">BEST</span>
       </div>
       
@@ -401,7 +423,7 @@
       <div class="event">
         <h4>aiqcamp/fash</h4>
         <p>Link (<a href="https://huggingface.co/spaces/aiqcamp/fash" target="_blank">link</a>).</p>
-        <span class="tag image">Image</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag popular">POPULAR</span>
 
       </div>
@@ -410,7 +432,7 @@
       <div class="event">
         <h4>gunship999/Korea-Daily-News</h4>
         <p>Link (<a href="https://huggingface.co/spaces/gunship999/Korea-Daily-News" target="_blank">link</a>).</p>
-        <span class="tag text">Text</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag popular">POPULAR</span>
 
       </div>
@@ -436,7 +458,7 @@
       <div class="event">
         <h4>immunobiotech/ChicagoGallery</h4>
         <p>Link (<a href="https://huggingface.co/spaces/immunobiotech/ChicagoGallery" target="_blank">link</a>).</p>
-        <span class="tag image">Image</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag popular">POPULAR</span>
 
       </div>
@@ -445,7 +467,7 @@
       <div class="event">
         <h4>immunobiotech/MetropolitanMuseum</h4>
         <p>Link (<a href="https://huggingface.co/spaces/immunobiotech/MetropolitanMuseum" target="_blank">link</a>).</p>
-        <span class="tag image">Image</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag popular">POPULAR</span>
 
       </div>
@@ -591,7 +613,7 @@
       <div class="event">
         <h4>ginigen/CANVAS-o3</h4>
         <p>Link (<a href="https://huggingface.co/spaces/ginigen/CANVAS-o3" target="_blank">link</a>).</p>
-        <span class="tag image">Image</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag best">BEST</span>
       </div>
       
@@ -825,7 +847,7 @@
       <div class="event">
         <h4>ginipick/ginimedi</h4>
         <p>RAG Chatbot(<a href="https://huggingface.co/spaces/ginipick/ginimedi" target="_blank">link</a>).</p>
-        <span class="tag Text">Text</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag best">BEST</span>
       </div>
       
@@ -833,7 +855,7 @@
       <div class="event">
         <h4>ginipick/ginilaw</h4>
         <p>RAG Chatbot(<a href="https://huggingface.co/spaces/ginipick/ginilaw" target="_blank">link</a>).</p>
-        <span class="tag Text">Text</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag best">BEST</span>
       </div>
       
@@ -841,7 +863,7 @@
       <div class="event">
         <h4>ginipick/ginipharm</h4>
         <p>RAG Chatbot(<a href="https://huggingface.co/spaces/ginipick/ginipharm" target="_blank">link</a>).</p>
-        <span class="tag Text">Text</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag best">BEST</span>
       </div>
       
@@ -849,7 +871,7 @@
       <div class="event">
         <h4>ginipick/FitGen</h4>
         <p>Fashion Generation(<a href="https://huggingface.co/spaces/ginipick/FitGen" target="_blank">link</a>).</p>
-        <span class="tag Image">Image</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag best">BEST</span>
       </div>
       
@@ -866,7 +888,7 @@
       <div class="event">
         <h4>fantaxy/Remove-Video-Background</h4>
         <p>Remove Video Background(<a href="https://huggingface.co/spaces/fantaxy/Remove-Video-Background" target="_blank">link</a>).</p>
-        <span class="tag video">Video</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag best">BEST</span>
       </div>
       
@@ -874,7 +896,7 @@
       <div class="event">
         <h4>fantaxy/ofai-flx-logo</h4>
         <p>Flux Image Generation(<a href="https://huggingface.co/spaces/fantaxy/ofai-flx-logo" target="_blank">link</a>).</p>
-        <span class="tag image">Image</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag popular">POPULAR</span>
 
       </div>
@@ -892,7 +914,7 @@
       <div class="event">
         <h4>fantaxy/flx-upscale</h4>
         <p>Flux Image Inpainting(<a href="https://huggingface.co/spaces/fantaxy/flx-upscale" target="_blank">link</a>).</p>
-        <span class="tag image">Image</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag best">BEST</span>
       </div>
       
@@ -900,7 +922,7 @@
       <div class="event">
         <h4>aiqcamp/Fashion-FLUX</h4>
         <p>Fashion Generation(<a href="https://huggingface.co/spaces/aiqcamp/Fashion-FLUX" target="_blank">link</a>).</p>
-        <span class="tag image">Image</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag best">BEST</span>
       </div>
       
@@ -908,7 +930,7 @@
       <div class="event">
         <h4>ginipick/StyleGen</h4>
         <p>Fashion Generation(<a href="https://huggingface.co/spaces/ginipick/StyleGen" target="_blank">link</a>).</p>
-        <span class="tag image">Image</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag best">BEST</span>
       </div>
       
@@ -949,7 +971,7 @@
       <div class="event">
         <h4>ginipick/SORA-3D</h4>
         <p>Text/Image to 3D(<a href="https://huggingface.co/spaces/ginipick/SORA-3D" target="_blank">link</a>).</p>
-        <span class="tag image">Image</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag best">BEST</span>
       </div>
       
@@ -1001,7 +1023,7 @@
       <div class="event">
         <h4>aiqcamp/FLUX-VisionReply</h4>
         <p>Flux Image Inpainting(<a href="https://huggingface.co/spaces/aiqcamp/FLUX-VisionReply" target="_blank">link</a>).</p>
-        <span class="tag Image">Image</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag popular">POPULAR</span>
 
       </div>
@@ -1027,7 +1049,7 @@
       <div class="event">
         <h4>VIDraft/mouse1</h4>
         <p>NLP Creative Coding & Web/App(<a href="https://huggingface.co/spaces/VIDraft/mouse1" target="_blank">link</a>).</p>
-        <span class="tag Text">Text</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag best">BEST</span>
       </div>
       
@@ -1077,7 +1099,7 @@
       <div class="event">
         <h4>VIDraft/mouse-chat</h4>
         <p>Rich Chatbot(<a href="https://huggingface.co/spaces/VIDraft/mouse-chat" target="_blank">link</a>).</p>
-        <span class="tag text">Text</span>
+        <span class="tag Productivity">Productivity</span>
         <span class="tag best">BEST</span>
       </div>
       
@@ -1316,6 +1338,7 @@
   </div>
   
  
+
   <script>
     function updateCounts() {
       const bestCount = document.querySelectorAll('.tag.best').length;