Update index.html

index.html

@@ -90,41 +90,28 @@
       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 */
+    /* 새로운 하위 카테고리 태그 스타일 */
+    .tag.image-gen {
+      background-color: #4CAF50; /* 녹색 */
       color: white;
     }
-    .tag.Productivity { /* Ensure case-insensitive matching */
-      background-color: #009688; /* Teal color */
+    .tag.image-edit {
+      background-color: #FF5722; /* 주황색 */
       color: white;
     }
 
-    .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; }
-
     .event p a {
       color: #4caf50;
       text-decoration: none;
@@ -185,7 +172,7 @@
       color: white;
     }
 
-    /* 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; }
@@ -194,15 +181,17 @@
     .toggle-button[data-filter="vision"] { background-color: #03a9f4; color: white; }
     .toggle-button[data-filter="multimodal"] { background-color: #795548; color: white; }
     .toggle-button[data-filter="video"] { background-color: #E91E63; color: white; }
-    .toggle-button[data-filter="image"] { background-color: #00BCD4; color: white; }
     .toggle-button[data-filter="utility"] { background-color: #9E9E9E; color: white; }
     .toggle-button[data-filter="predict"] { background-color: #673AB7; color: white; }
     .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; }
+    /* 새로운 하위 카테고리 필터 버튼 스타일 */
+    .toggle-button[data-filter="image-gen"] { background-color: #4CAF50; color: white; }
+    .toggle-button[data-filter="image-edit"] { background-color: #FF5722; color: white; }
+
+    .toggle-button[data-filter="image-gen"].active { background-color: #388E3C; border-color: #388E3C; }
+    .toggle-button[data-filter="image-edit"].active { background-color: #E64A19; border-color: #E64A19; }
 
     .counter-container {
       text-align: center;
@@ -250,14 +239,14 @@
       <button class="toggle-button" data-filter="vision">Vision</button>
       <button class="toggle-button" data-filter="multimodal">Multimodal</button>
       <button class="toggle-button" data-filter="video">Video</button>
-      <button class="toggle-button" data-filter="image">Image</button>
       <button class="toggle-button" data-filter="utility">Utility</button>
       <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>
+      <!-- 새로운 하위 카테고리 필터 버튼 -->
+      <button class="toggle-button" data-filter="image-gen">Image Gen</button>
+      <button class="toggle-button" data-filter="image-edit">Image Edit</button>
     </div>
   </div>
   
@@ -1339,6 +1328,7 @@
   
  
 
+
   <script>
     function updateCounts() {
       const bestCount = document.querySelectorAll('.tag.best').length;
@@ -1369,10 +1359,20 @@
     function applyFilters() {
       const events = document.querySelectorAll('.event');
       events.forEach(event => {
-        const matchesCategory =
-          currentFilters.category === 'all' ||
-          event.querySelector(`.tag.${currentFilters.category}`);
-        event.style.display = matchesCategory ? 'block' : 'none';
+        const activeFilters = Array.from(document.querySelectorAll('.toggle-button.active')).map(button => button.getAttribute('data-filter'));
+
+        // 'all' 필터가 활성화된 경우 모든 이벤트 표시
+        if (activeFilters.includes('all')) {
+          event.style.display = 'block';
+          return;
+        }
+
+        // 활성화된 필터 중 하나라도 일치하는 경우 이벤트 표시
+        const matches = activeFilters.some(filter => {
+          return event.querySelector(`.tag.${filter}`);
+        });
+
+        event.style.display = matches ? 'block' : 'none';
       });
       updateCounts();
     }