pick-spaces

Running

App Files Files Community

openfree commited on Jan 20

Commit

4105147

verified ·

1 Parent(s): ce5b97d

Update index.html

Browse files

Files changed (1) hide show

index.html +46 -91

index.html CHANGED Viewed

@@ -152,12 +152,11 @@
     .toggle-container {
       display: flex;
       gap: 8px;
-    }
-    .dropdown-filters {
-      display: flex;
-      gap: 8px;
     }
     .toggle-button {
@@ -168,6 +167,8 @@
       font-size: 13px;
       cursor: pointer;
       transition: all 0.2s ease;
     }
     .toggle-button.active {
@@ -176,15 +177,32 @@
       color: white;
     }
-    select {
-      padding: 6px 12px;
-      border: 1px solid #ddd;
-      border-radius: 15px;
-      font-size: 13px;
-      background-color: white;
-      cursor: pointer;
     }
     .counter-container {
       text-align: center;
       padding: 15px;
@@ -202,40 +220,6 @@
       margin: 0 10px;
       color: #ddd;
     }
-    .nested-dropdown {
-      position: relative;
-      display: inline-block;
-    }
-    .nested-content {
-      display: none;
-      position: absolute;
-      background-color: white;
-      min-width: 160px;
-      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-      z-index: 1;
-      border-radius: 5px;
-      margin-top: 5px;
-    }
-    .nested-content button {
-      width: 100%;
-      padding: 8px 16px;
-      border: none;
-      background: none;
-      text-align: left;
-      cursor: pointer;
-      font-size: 13px;
-    }
-    .nested-content button:hover {
-      background-color: #f1f1f1;
-    }
-    .nested-dropdown:hover .nested-content {
-      display: block;
-    }
   </style>
 </head>
 <body>
@@ -248,31 +232,19 @@
       <button class="toggle-button" data-filter="open-source">Open Source</button>
       <button class="toggle-button" data-filter="proprietary">Proprietary Software</button>
     </div>
-    <div class="dropdown-filters">
-      <div class="nested-dropdown">
-        <select id="modalityFilter">
-          <option value="all">All Modalities</option>
-        </select>
-        <div class="nested-content">
-          <button onclick="filterByModality('best')">BEST</button>
-          <button onclick="filterByModality('new')">NEW</button>
-          <button onclick="filterByModality('text')">Text</button>
-          <button onclick="filterByModality('audio')">Audio</button>
-          <button onclick="filterByModality('vision')">Vision</button>
-          <button onclick="filterByModality('multimodal')">Multimodal</button>
-          <button onclick="filterByModality('video')">Video</button>
-          <button onclick="filterByModality('image')">Image</button>
-          <button onclick="filterByModality('utility')">Utility</button>
-          <button onclick="filterByModality('predict')">Predict</button>
-          <button onclick="filterByModality('game')">Game</button>
-          <button onclick="filterByModality('education')">Education</button>
-        </div>
-      </div>
-      <select id="typeFilter" onchange="filterByType(this.value)">
-        <option value="all">All Types</option>
-        <option value="model">Models</option>
-        <option value="announcement">Announcements</option>
-      </select>
     </div>
   </div>
   <div class="counter-container">
@@ -322,18 +294,7 @@
       type: 'all'
     };
-    function filterByModality(modality) {
-      currentFilters.modality = modality;
-      document.getElementById('modalityFilter').value = 'all';
-      applyFilters();
-    }
-    function filterByType(type) {
-      currentFilters.type = type;
-      applyFilters();
-    }
-    function filterEvents(category) {
       const buttons = document.querySelectorAll('.toggle-button');
       buttons.forEach(button => {
         button.classList.remove('active');
@@ -352,14 +313,8 @@
       events.forEach(event => {
         const matchesCategory = currentFilters.category === 'all' ||
           event.querySelector(`.tag.${currentFilters.category}`);
-        const matchesModality = currentFilters.modality === 'all' ||
-          event.querySelector(`.tag.${currentFilters.modality}`);
-        const matchesType = currentFilters.type === 'all' ||
-          (currentFilters.type === 'announcement' ?
-            event.querySelector('.tag.announcement') :
-            !event.querySelector('.tag.announcement'));
-        event.style.display = (matchesCategory && matchesModality && matchesType) ? 'block' : 'none';
       });
       const months = document.querySelectorAll('.month');
@@ -377,7 +332,7 @@
       const buttons = document.querySelectorAll('.toggle-button');
       buttons.forEach(button => {
         button.addEventListener('click', function() {
-          filterEvents(this.getAttribute('data-filter'));
         });
       });
       updateCounts();

     .toggle-container {
       display: flex;
+      flex-wrap: wrap;
       gap: 8px;
+      justify-content: center;
+      max-width: 900px;
+      padding: 0 20px;
     }
     .toggle-button {
       font-size: 13px;
       cursor: pointer;
       transition: all 0.2s ease;
+      min-width: 80px;
+      text-align: center;
     }
     .toggle-button.active {
       color: white;
     }
+    .category-group {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      gap: 8px;
+      margin-top: 10px;
+      flex-wrap: wrap;
+    }
+    .category-group .toggle-button {
+      background-color: #f5f5f5;
     }
+    .toggle-button[data-filter="best"] { background-color: #FFD700; color: black; }
+    .toggle-button[data-filter="new"] { background-color: #FF4081; color: white; }
+    .toggle-button[data-filter="text"] { background-color: #9c27b0; color: white; }
+    .toggle-button[data-filter="audio"] { background-color: #ff9800; color: white; }
+    .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; }
     .counter-container {
       text-align: center;
       padding: 15px;
       margin: 0 10px;
       color: #ddd;
     }
   </style>
 </head>
 <body>
       <button class="toggle-button" data-filter="open-source">Open Source</button>
       <button class="toggle-button" data-filter="proprietary">Proprietary Software</button>
     </div>
+    <div class="category-group">
+      <button class="toggle-button" data-filter="best">BEST</button>
+      <button class="toggle-button" data-filter="new">NEW</button>
+      <button class="toggle-button" data-filter="text">Text</button>
+      <button class="toggle-button" data-filter="audio">Audio</button>
+      <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>
     </div>
   </div>
   <div class="counter-container">
       type: 'all'
     };
+    function filterByCategory(category) {
       const buttons = document.querySelectorAll('.toggle-button');
       buttons.forEach(button => {
         button.classList.remove('active');
       events.forEach(event => {
         const matchesCategory = currentFilters.category === 'all' ||
           event.querySelector(`.tag.${currentFilters.category}`);
+        event.style.display = matchesCategory ? 'block' : 'none';
       });
       const months = document.querySelectorAll('.month');
       const buttons = document.querySelectorAll('.toggle-button');
       buttons.forEach(button => {
         button.addEventListener('click', function() {
+          filterByCategory(this.getAttribute('data-filter'));
         });
       });
       updateCounts();