diff --git a/css/marketplace.css b/css/marketplace.css index d177eca..a2ad116 100644 --- a/css/marketplace.css +++ b/css/marketplace.css @@ -31,16 +31,30 @@ font-size: 1rem; } +/* Filter + Sort Row */ +.filter-sort-row { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 16px; + margin-bottom: 32px; + border-bottom: 1px solid #e5e7eb; + padding-bottom: 16px; +} + /* Filter buttons - centered */ .filter-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; - margin-bottom: 32px; - border-bottom: 1px solid #e5e7eb; - padding-bottom: 16px; + flex: 1; + margin: 0; + border-bottom: none; + padding-bottom: 0; } + .filter-btn { background: transparent; border: none; @@ -60,6 +74,20 @@ background: #f1f5f9; } +/* Sort Dropdown - right aligned */ +.sort-dropdown { + background: #f8fafc; + border: 1px solid #e2e8f0; + border-radius: 30px; + padding: 8px 16px; + font-size: 0.9rem; + font-weight: 500; + color: #334155; + cursor: pointer; + outline: none; + margin-left: auto; +} + /* Prompts grid */ .prompts-grid { display: grid; @@ -166,13 +194,21 @@ } /* Responsive */ +@media (max-width: 700px) { + .filter-sort-row { + flex-direction: column; + align-items: stretch; + } + .sort-dropdown { + align-self: flex-end; + margin-left: 0; + } +} + @media (max-width: 768px) { .marketplace-main { padding: 16px !important; } - .filter-buttons { - gap: 8px; - } .filter-btn { padding: 6px 14px; font-size: 0.8rem; diff --git a/html/marketplace.html b/html/marketplace.html index 8317110..73fd66f 100644 --- a/html/marketplace.html +++ b/html/marketplace.html @@ -1,5 +1,6 @@ + - Browse and filter AI prompts with buy/view details buttons and pricing + - Added sort dropdown (Best Rating, Price Low to High, Price High to Low) - UI only --> @@ -14,6 +15,47 @@ +
@@ -32,15 +74,22 @@

Browse and discover high-quality AI prompts

- -
- - - - - - - + +
+
+ + + + + + + +
+