\u03a0\u03c1\u03bf\u03b7\u03b3\u03bc\u03ad\u03bd\u03bf \u03a6\u03af\u03bb\u03c4\u03c1\u03bf B2B \u03a0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03c9\u03bd<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Arial', sans-serif;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n\r\n .filter-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n background: rgba(255, 255, 255, 0.95);\r\n backdrop-filter: blur(10px);\r\n border-radius: 20px;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);\r\n overflow: hidden;\r\n }\r\n\r\n .filter-header {\r\n background: linear-gradient(45deg, #2c3e50, #34495e);\r\n color: white;\r\n padding: 30px;\r\n text-align: center;\r\n }\r\n\r\n .filter-header h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\r\n }\r\n\r\n .filter-header p {\r\n opacity: 0.9;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .filter-main {\r\n display: grid;\r\n grid-template-columns: 350px 1fr;\r\n min-height: 600px;\r\n }\r\n\r\n .filter-sidebar {\r\n background: #f8f9fa;\r\n padding: 30px;\r\n border-right: 1px solid #e9ecef;\r\n }\r\n\r\n .filter-group {\r\n margin-bottom: 30px;\r\n animation: slideInLeft 0.6s ease-out;\r\n }\r\n\r\n .filter-group h3 {\r\n color: #2c3e50;\r\n font-size: 1.2rem;\r\n margin-bottom: 15px;\r\n padding-bottom: 8px;\r\n border-bottom: 2px solid #3498db;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .filter-group h3::before {\r\n content: '\ud83d\udd27';\r\n font-size: 1.1rem;\r\n }\r\n\r\n .filter-group:nth-child(2) h3::before { content: '\ud83d\ude97'; }\r\n .filter-group:nth-child(3) h3::before { content: '\u2699\ufe0f'; }\r\n .filter-group:nth-child(4) h3::before { content: '\ud83c\udfe2'; }\r\n\r\n .filter-options {\r\n display: grid;\r\n gap: 8px;\r\n }\r\n\r\n .filter-option {\r\n position: relative;\r\n }\r\n\r\n .filter-option input[type=\"checkbox\"] {\r\n position: absolute;\r\n opacity: 0;\r\n cursor: pointer;\r\n }\r\n\r\n .filter-option label {\r\n display: flex;\r\n align-items: center;\r\n padding: 12px 15px;\r\n background: white;\r\n border: 2px solid #e9ecef;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-weight: 500;\r\n }\r\n\r\n .filter-option label:hover {\r\n border-color: #3498db;\r\n transform: translateX(5px);\r\n box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);\r\n }\r\n\r\n .filter-option input[type=\"checkbox\"]:checked + label {\r\n background: linear-gradient(45deg, #3498db, #2980b9);\r\n color: white;\r\n border-color: #2980b9;\r\n transform: translateX(5px);\r\n box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);\r\n }\r\n\r\n .filter-option label::before {\r\n content: '';\r\n width: 20px;\r\n height: 20px;\r\n border: 2px solid #bdc3c7;\r\n border-radius: 4px;\r\n margin-right: 12px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .filter-option input[type=\"checkbox\"]:checked + label::before {\r\n background: white;\r\n border-color: white;\r\n content: '\u2713';\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #3498db;\r\n font-weight: bold;\r\n font-size: 14px;\r\n }\r\n\r\n .results-section {\r\n padding: 30px;\r\n background: white;\r\n }\r\n\r\n .results-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 25px;\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid #f8f9fa;\r\n }\r\n\r\n .results-count {\r\n font-size: 1.2rem;\r\n color: #2c3e50;\r\n font-weight: bold;\r\n }\r\n\r\n .clear-filters {\r\n background: linear-gradient(45deg, #e74c3c, #c0392b);\r\n color: white;\r\n border: none;\r\n padding: 12px 24px;\r\n border-radius: 25px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);\r\n }\r\n\r\n .clear-filters:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);\r\n }\r\n\r\n .products-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .product-card {\r\n background: white;\r\n border: 1px solid #e9ecef;\r\n border-radius: 15px;\r\n padding: 20px;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .product-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, #3498db, #2ecc71);\r\n }\r\n\r\n .product-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);\r\n border-color: #3498db;\r\n }\r\n\r\n .product-title {\r\n font-size: 1.1rem;\r\n font-weight: bold;\r\n color: #2c3e50;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .product-category {\r\n background: linear-gradient(45deg, #f39c12, #e67e22);\r\n color: white;\r\n padding: 4px 12px;\r\n border-radius: 20px;\r\n font-size: 0.8rem;\r\n display: inline-block;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .product-tags {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 5px;\r\n margin-top: 10px;\r\n }\r\n\r\n .product-tag {\r\n background: #ecf0f1;\r\n color: #7f8c8d;\r\n padding: 3px 8px;\r\n border-radius: 12px;\r\n font-size: 0.7rem;\r\n }\r\n\r\n .no-results {\r\n text-align: center;\r\n padding: 60px 20px;\r\n color: #7f8c8d;\r\n }\r\n\r\n .no-results-icon {\r\n font-size: 4rem;\r\n margin-bottom: 20px;\r\n }\r\n\r\n @keyframes slideInLeft {\r\n from {\r\n opacity: 0;\r\n transform: translateX(-30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .product-card {\r\n animation: fadeIn 0.6s ease-out;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .filter-main {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .filter-sidebar {\r\n border-right: none;\r\n border-bottom: 1px solid #e9ecef;\r\n }\r\n \r\n .products-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .filter-header h1 {\r\n font-size: 2rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"filter-container\">\r\n <div class=\"filter-header\">\r\n <h1>\u03a0\u03c1\u03bf\u03b7\u03b3\u03bc\u03ad\u03bd\u03bf \u03a6\u03af\u03bb\u03c4\u03c1\u03bf \u03a0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03c9\u03bd<\/h1>\r\n <p>\u0392\u03c1\u03b5\u03af\u03c4\u03b5 \u03b5\u03cd\u03ba\u03bf\u03bb\u03b1 \u03c4\u03b1 \u03c0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03b1 \u03c0\u03bf\u03c5 \u03c7\u03c1\u03b5\u03b9\u03ac\u03b6\u03b5\u03c3\u03c4\u03b5 \u03b3\u03b9\u03b1 \u03c4\u03b7\u03bd \u03b5\u03c0\u03b9\u03c7\u03b5\u03af\u03c1\u03b7\u03c3\u03ae \u03c3\u03b1\u03c2<\/p>\r\n <\/div>\r\n \r\n <div class=\"filter-main\">\r\n <div class=\"filter-sidebar\">\r\n <div class=\"filter-group\">\r\n <h3>\u0395\u03c0\u03ac\u03b3\u03b3\u03b5\u03bb\u03bc\u03b1<\/h3>\r\n <div class=\"filter-options\">\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"mechanic\" data-filter=\"profession\" value=\"mechanic\">\r\n <label for=\"mechanic\">\u039c\u03b7\u03c7\u03b1\u03bd\u03b9\u03ba\u03cc\u03c2 \u0391\u03c5\u03c4\u03bf\u03ba\u03b9\u03bd\u03ae\u03c4\u03c9\u03bd<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"painter\" data-filter=\"profession\" value=\"painter\">\r\n <label for=\"painter\">\u0392\u03b1\u03c6\u03ad\u03b1\u03c2 \u0391\u03c5\u03c4\u03bf\u03ba\u03b9\u03bd\u03ae\u03c4\u03c9\u03bd<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"cleaner\" data-filter=\"profession\" value=\"cleaner\">\r\n <label for=\"cleaner\">\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03ae\u03c2 \u039f\u03c7\u03b7\u03bc\u03ac\u03c4\u03c9\u03bd<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"motorcycle-mechanic\" data-filter=\"profession\" value=\"motorcycle-mechanic\">\r\n <label for=\"motorcycle-mechanic\">\u039c\u03b7\u03c7\u03b1\u03bd\u03b9\u03ba\u03cc\u03c2 \u039c\u03bf\u03c4\u03bf\u03c3\u03c5\u03ba\u03bb\u03b5\u03c4\u03ce\u03bd<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"filter-group\">\r\n <h3>\u03a4\u03cd\u03c0\u03bf\u03c2 \u039f\u03c7\u03ae\u03bc\u03b1\u03c4\u03bf\u03c2<\/h3>\r\n <div class=\"filter-options\">\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"car\" data-filter=\"vehicle\" value=\"car\">\r\n <label for=\"car\">\u0391\u03c5\u03c4\u03bf\u03ba\u03af\u03bd\u03b7\u03c4\u03bf<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"truck\" data-filter=\"vehicle\" value=\"truck\">\r\n <label for=\"truck\">\u03a6\u03bf\u03c1\u03c4\u03b7\u03b3\u03cc<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"motorcycle\" data-filter=\"vehicle\" value=\"motorcycle\">\r\n <label for=\"motorcycle\">\u039c\u03bf\u03c4\u03bf\u03c3\u03c5\u03ba\u03bb\u03ad\u03c4\u03b1<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"boat\" data-filter=\"vehicle\" value=\"boat\">\r\n <label for=\"boat\">\u03a3\u03ba\u03ac\u03c6\u03bf\u03c2<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"bicycle\" data-filter=\"vehicle\" value=\"bicycle\">\r\n <label for=\"bicycle\">\u03a0\u03bf\u03b4\u03ae\u03bb\u03b1\u03c4\u03bf<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"filter-group\">\r\n <h3>\u0391\u03bd\u03ac\u03b3\u03ba\u03b7<\/h3>\r\n <div class=\"filter-options\">\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"cleaning\" data-filter=\"need\" value=\"cleaning\">\r\n <label for=\"cleaning\">\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03bc\u03cc\u03c2<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"protection\" data-filter=\"need\" value=\"protection\">\r\n <label for=\"protection\">\u03a0\u03c1\u03bf\u03c3\u03c4\u03b1\u03c3\u03af\u03b1<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"repair\" data-filter=\"need\" value=\"repair\">\r\n <label for=\"repair\">\u0395\u03c0\u03b9\u03c3\u03ba\u03b5\u03c5\u03ae<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"maintenance\" data-filter=\"need\" value=\"maintenance\">\r\n <label for=\"maintenance\">\u03a3\u03c5\u03bd\u03c4\u03ae\u03c1\u03b7\u03c3\u03b7<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"polishing\" data-filter=\"need\" value=\"polishing\">\r\n <label for=\"polishing\">\u0393\u03c5\u03ac\u03bb\u03b9\u03c3\u03bc\u03b1<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"painting\" data-filter=\"need\" value=\"painting\">\r\n <label for=\"painting\">\u0392\u03b1\u03c6\u03ae<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"filter-group\">\r\n <h3>\u03a7\u03ce\u03c1\u03bf\u03c2 \u0395\u03c6\u03b1\u03c1\u03bc\u03bf\u03b3\u03ae\u03c2<\/h3>\r\n <div class=\"filter-options\">\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"garage\" data-filter=\"space\" value=\"garage\">\r\n <label for=\"garage\">\u03a3\u03c5\u03bd\u03b5\u03c1\u03b3\u03b5\u03af\u03bf<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"paint-shop\" data-filter=\"space\" value=\"paint-shop\">\r\n <label for=\"paint-shop\">\u03a6\u03b1\u03bd\u03bf\u03b2\u03b1\u03c6\u03b5\u03af\u03bf<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"car-wash\" data-filter=\"space\" value=\"car-wash\">\r\n <label for=\"car-wash\">\u03a0\u03bb\u03c5\u03bd\u03c4\u03ae\u03c1\u03b9\u03bf<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"mobile\" data-filter=\"space\" value=\"mobile\">\r\n <label for=\"mobile\">\u039a\u03b9\u03bd\u03b7\u03c4\u03ae \u039c\u03bf\u03bd\u03ac\u03b4\u03b1<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"results-section\">\r\n <div class=\"results-header\">\r\n <div class=\"results-count\">\r\n \u0392\u03c1\u03ad\u03b8\u03b7\u03ba\u03b1\u03bd <span id=\"results-number\">24<\/span> \u03c0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03b1\r\n <\/div>\r\n <button class=\"clear-filters\" onclick=\"clearAllFilters()\">\r\n \u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03bc\u03cc\u03c2 \u03a6\u03af\u03bb\u03c4\u03c1\u03c9\u03bd\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"products-grid\" id=\"products-container\">\r\n \r\n <\/div>\r\n\r\n <div class=\"no-results\" id=\"no-results\" style=\"display: none;\">\r\n <div class=\"no-results-icon\">\ud83d\udd0d<\/div>\r\n <h3>\u0394\u03b5\u03bd \u03b2\u03c1\u03ad\u03b8\u03b7\u03ba\u03b1\u03bd \u03c0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03b1<\/h3>\r\n <p>\u0394\u03bf\u03ba\u03b9\u03bc\u03ac\u03c3\u03c4\u03b5 \u03bd\u03b1 \u03b1\u03bb\u03bb\u03ac\u03be\u03b5\u03c4\u03b5 \u03c4\u03b1 \u03ba\u03c1\u03b9\u03c4\u03ae\u03c1\u03b9\u03b1 \u03b1\u03bd\u03b1\u03b6\u03ae\u03c4\u03b7\u03c3\u03b7\u03c2<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Sample product data based on your catalog\r\n const products = [\r\n {\r\n id: 1,\r\n title: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc \u039a\u03b9\u03bd\u03b7\u03c4\u03ae\u03c1\u03b1 Premium\",\r\n category: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03ac\",\r\n profession: [\"mechanic\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"cleaning\", \"maintenance\"],\r\n space: [\"garage\"]\r\n },\r\n {\r\n id: 2,\r\n title: \"\u03a0\u03c1\u03bf\u03c3\u03c4\u03b1\u03c4\u03b5\u03c5\u03c4\u03b9\u03ba\u03cc \u039a\u03b1\u03bc\u03c0\u03af\u03bd\u03b1\u03c2\",\r\n category: \"\u03a0\u03c1\u03bf\u03c3\u03c4\u03b1\u03c3\u03af\u03b1\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"protection\", \"cleaning\"],\r\n space: [\"car-wash\", \"garage\"]\r\n },\r\n {\r\n id: 3,\r\n title: \"\u0392\u03bf\u03cd\u03c1\u03c4\u03c3\u03b5\u03c2 \u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03bc\u03bf\u03cd \u0394\u03b5\u03c1\u03bc\u03ac\u03c4\u03c9\u03bd\",\r\n category: \"\u0395\u03c1\u03b3\u03b1\u03bb\u03b5\u03af\u03b1\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\"],\r\n need: [\"cleaning\"],\r\n space: [\"car-wash\", \"mobile\"]\r\n },\r\n {\r\n id: 4,\r\n title: \"\u0393\u03c5\u03b1\u03bb\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc & \u03a3\u03c4\u03b5\u03b3\u03bd\u03c9\u03c4\u03b9\u03ba\u03cc \u039a\u03b5\u03c1\u03af\",\r\n category: \"\u03a0\u03b5\u03c1\u03b9\u03c0\u03bf\u03af\u03b7\u03c3\u03b7\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"motorcycle\"],\r\n need: [\"polishing\", \"protection\"],\r\n space: [\"car-wash\", \"garage\", \"mobile\"]\r\n },\r\n {\r\n id: 5,\r\n title: \"\u03a7\u03c1\u03ce\u03bc\u03b1 \u0391\u03c5\u03c4\u03bf\u03ba\u03b9\u03bd\u03ae\u03c4\u03bf\u03c5 \u039c\u03b5\u03c4\u03b1\u03bb\u03bb\u03b9\u03ba\u03cc\",\r\n category: \"\u0392\u03b1\u03c6\u03ae\",\r\n profession: [\"painter\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"painting\", \"repair\"],\r\n space: [\"paint-shop\"]\r\n },\r\n {\r\n id: 6,\r\n title: \"\u03a3\u03c5\u03bd\u03c4\u03b7\u03c1\u03b7\u03c4\u03b9\u03ba\u03cc \u03a0\u03bb\u03b1\u03c3\u03c4\u03b9\u03ba\u03ce\u03bd\",\r\n category: \"\u03a3\u03c5\u03bd\u03c4\u03ae\u03c1\u03b7\u03c3\u03b7\",\r\n profession: [\"mechanic\", \"cleaner\"],\r\n vehicle: [\"car\", \"truck\", \"motorcycle\"],\r\n need: [\"maintenance\", \"protection\"],\r\n space: [\"garage\", \"car-wash\"]\r\n },\r\n {\r\n id: 7,\r\n title: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc \u0396\u03ac\u03bd\u03c4\u03b1\u03c2 \u0395\u03b9\u03b4\u03b9\u03ba\u03cc\",\r\n category: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03ac\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"motorcycle\"],\r\n need: [\"cleaning\"],\r\n space: [\"car-wash\", \"mobile\"]\r\n },\r\n {\r\n id: 8,\r\n title: \"\u0395\u03c1\u03b3\u03b1\u03bb\u03b5\u03af\u03b1 \u0395\u03c6\u03b1\u03c1\u03bc\u03bf\u03b3\u03ce\u03bd \u0392\u03b1\u03c6\u03ae\u03c2\",\r\n category: \"\u0395\u03c1\u03b3\u03b1\u03bb\u03b5\u03af\u03b1\",\r\n profession: [\"painter\"],\r\n vehicle: [\"car\", \"truck\", \"motorcycle\"],\r\n need: [\"painting\"],\r\n space: [\"paint-shop\"]\r\n },\r\n {\r\n id: 9,\r\n title: \"\u0393\u03ac\u03bd\u03c4\u03b9\u03b1 \u039c\u03b7\u03c7\u03b1\u03bd\u03b9\u03ba\u03ce\u03bd \u039d\u03b9\u03c4\u03c1\u03b9\u03bb\u03af\u03bf\u03c5\",\r\n category: \"\u03a0\u03c1\u03bf\u03c3\u03c4\u03b1\u03c3\u03af\u03b1\",\r\n profession: [\"mechanic\", \"painter\"],\r\n vehicle: [\"car\", \"truck\", \"motorcycle\"],\r\n need: [\"protection\", \"repair\", \"maintenance\"],\r\n space: [\"garage\", \"paint-shop\"]\r\n },\r\n {\r\n id: 10,\r\n title: \"\u03a0\u03bb\u03c5\u03c3\u03c4\u03b9\u03ba\u03cc \u039c\u03b7\u03c7\u03ac\u03bd\u03b7\u03bc\u03b1 \u0396\u03b5\u03c3\u03c4\u03bf\u03cd \u039d\u03b5\u03c1\u03bf\u03cd\",\r\n category: \"\u039c\u03b7\u03c7\u03b1\u03bd\u03ae\u03bc\u03b1\u03c4\u03b1\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"cleaning\"],\r\n space: [\"car-wash\", \"garage\"]\r\n },\r\n {\r\n id: 11,\r\n title: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc \u039c\u03bf\u03c4\u03bf\u03c3\u03c5\u03ba\u03bb\u03b5\u03c4\u03ce\u03bd\",\r\n category: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03ac\",\r\n profession: [\"motorcycle-mechanic\", \"cleaner\"],\r\n vehicle: [\"motorcycle\"],\r\n need: [\"cleaning\", \"maintenance\"],\r\n space: [\"garage\", \"mobile\"]\r\n },\r\n {\r\n id: 12,\r\n title: \"\u03a0\u03c1\u03bf\u03c3\u03c4\u03b1\u03c4\u03b5\u03c5\u03c4\u03b9\u03ba\u03ac \u039c\u03b1\u03c4\u03b9\u03ce\u03bd\",\r\n category: \"\u0391\u03c3\u03c6\u03ac\u03bb\u03b5\u03b9\u03b1\",\r\n profession: [\"mechanic\", \"painter\"],\r\n vehicle: [\"car\", \"truck\", \"motorcycle\"],\r\n need: [\"protection\"],\r\n space: [\"garage\", \"paint-shop\"]\r\n },\r\n {\r\n id: 13,\r\n title: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc \u03a3\u03ba\u03b1\u03c6\u03ce\u03bd Marine\",\r\n category: \"\u039d\u03b1\u03c5\u03c4\u03b9\u03ba\u03ac\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"boat\"],\r\n need: [\"cleaning\", \"protection\"],\r\n space: [\"mobile\"]\r\n },\r\n {\r\n id: 14,\r\n title: \"\u0391\u03c4\u03bc\u03bf\u03ba\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03ae\u03c2 \u0395\u03c0\u03b1\u03b3\u03b3\u03b5\u03bb\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc\u03c2\",\r\n category: \"\u039c\u03b7\u03c7\u03b1\u03bd\u03ae\u03bc\u03b1\u03c4\u03b1\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"cleaning\"],\r\n space: [\"car-wash\", \"garage\"]\r\n },\r\n {\r\n id: 15,\r\n title: \"\u03a3\u03c5\u03bd\u03c4\u03b7\u03c1\u03b7\u03c4\u03b9\u03ba\u03cc \u03a4\u03b1\u03bc\u03c0\u03bb\u03cc\",\r\n category: \"\u03a0\u03b5\u03c1\u03b9\u03c0\u03bf\u03af\u03b7\u03c3\u03b7\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"maintenance\", \"protection\"],\r\n space: [\"car-wash\", \"mobile\"]\r\n },\r\n {\r\n id: 16,\r\n title: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc \u03a0\u03bf\u03b4\u03b7\u03bb\u03ac\u03c4\u03c9\u03bd Eco\",\r\n category: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03ac\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"bicycle\"],\r\n need: [\"cleaning\"],\r\n space: [\"mobile\"]\r\n },\r\n {\r\n id: 17,\r\n title: \"\u03a6\u03ce\u03c4\u03b1 \u0395\u03bb\u03ad\u03b3\u03c7\u03bf\u03c5 \u03a7\u03c1\u03ce\u03bc\u03b1\u03c4\u03bf\u03c2 LED\",\r\n category: \"\u0395\u03be\u03bf\u03c0\u03bb\u03b9\u03c3\u03bc\u03cc\u03c2\",\r\n profession: [\"painter\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"painting\"],\r\n space: [\"paint-shop\"]\r\n },\r\n {\r\n id: 18,\r\n title: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc \u0391\u03bb\u03ac\u03c4\u03c9\u03bd & \u03a3\u03ba\u03bf\u03c5\u03c1\u03b9\u03ac\u03c2\",\r\n category: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03ac\",\r\n profession: [\"mechanic\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"repair\", \"maintenance\"],\r\n space: [\"garage\"]\r\n },\r\n {\r\n id: 19,\r\n title: \"\u0393\u03c5\u03b1\u03bb\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc \u0395\u03bb\u03b1\u03c3\u03c4\u03b9\u03ba\u03ce\u03bd\",\r\n category: \"\u03a0\u03b5\u03c1\u03b9\u03c0\u03bf\u03af\u03b7\u03c3\u03b7\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"truck\", \"motorcycle\"],\r\n need: [\"polishing\"],\r\n space: [\"car-wash\", \"mobile\"]\r\n },\r\n {\r\n id: 20,\r\n title: \"\u0395\u03be\u03c5\u03b3\u03af\u03b1\u03bd\u03c3\u03b7 \u039a\u03b1\u03bc\u03c0\u03af\u03bd\u03b1\u03c2 A\/C\",\r\n category: \"\u03a5\u03b3\u03b9\u03b5\u03b9\u03bd\u03ae\",\r\n profession: [\"mechanic\", \"cleaner\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"cleaning\", \"maintenance\"],\r\n space: [\"garage\", \"car-wash\"]\r\n },\r\n {\r\n id: 21,\r\n title: \"\u039a\u03b5\u03c1\u03b1\u03bc\u03b9\u03ba\u03ac \u0395\u03be\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae\u03c2 \u03a0\u03b5\u03c1\u03b9\u03c0\u03bf\u03af\u03b7\u03c3\u03b7\u03c2\",\r\n category: \"\u03a0\u03c1\u03bf\u03c3\u03c4\u03b1\u03c3\u03af\u03b1\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"motorcycle\"],\r\n need: [\"protection\", \"polishing\"],\r\n space: [\"car-wash\", \"garage\"]\r\n },\r\n {\r\n id: 22,\r\n title: \"\u0393\u03b5\u03bd\u03bd\u03ae\u03c4\u03c1\u03b9\u03b1 \u038c\u03b6\u03bf\u03bd\u03c4\u03bf\u03c2\",\r\n category: \"\u039c\u03b7\u03c7\u03b1\u03bd\u03ae\u03bc\u03b1\u03c4\u03b1\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"cleaning\"],\r\n space: [\"car-wash\", \"garage\"]\r\n },\r\n {\r\n id: 23,\r\n title: \"\u03a4\u03b1\u03b9\u03bd\u03af\u03b5\u03c2 \u039c\u03b1\u03c3\u03ba\u03b1\u03c1\u03af\u03bc\u03b1\u03c4\u03bf\u03c2\",\r\n category: \"\u0392\u03b1\u03c6\u03ae\",\r\n profession: [\"painter\"],\r\n vehicle: [\"car\", \"truck\", \"motorcycle\"],\r\n need: [\"painting\"],\r\n space: [\"paint-shop\"]\r\n },\r\n {\r\n id: 24,\r\n title: \"\u03a0\u03b5\u03c4\u03c3\u03ad\u03c4\u03b5\u03c2 \u039c\u03b9\u03ba\u03c1\u03bf\u03ca\u03bd\u03ce\u03bd Premium\",\r\n category: \"\u0395\u03c1\u03b3\u03b1\u03bb\u03b5\u03af\u03b1\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"truck\", \"motorcycle\"],\r\n need: [\"cleaning\", \"polishing\"],\r\n space: [\"car-wash\", \"mobile\", \"garage\"]\r\n }\r\n ];\r\n\r\n let filteredProducts = [...products];\r\n\r\n function renderProducts(productsToRender) {\r\n const container = document.getElementById('products-container');\r\n const noResults = document.getElementById('no-results');\r\n const resultsNumber = document.getElementById('results-number');\r\n\r\n if (productsToRender.length === 0) {\r\n container.style.display = 'none';\r\n noResults.style.display = 'block';\r\n resultsNumber.textContent = '0';\r\n return;\r\n }\r\n\r\n container.style.display = 'grid';\r\n noResults.style.display = 'none';\r\n resultsNumber.textContent = productsToRender.length;\r\n\r\n container.innerHTML = productsToRender.map(product => `\r\n <div class=\"product-card\">\r\n <div class=\"product-category\">${product.category}<\/div>\r\n <div class=\"product-title\">${product.title}<\/div>\r\n <div class=\"product-tags\">\r\n ${product.profession.map(p => `<span class=\"product-tag\">${getProfessionLabel(p)}<\/span>`).join('')}\r\n ${product.vehicle.map(v => `<span class=\"product-tag\">${getVehicleLabel(v)}<\/span>`).join('')}\r\n ${product.need.map(n => `<span class=\"product-tag\">${getNeedLabel(n)}<\/span>`).join('')}\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n function getProfessionLabel(profession) {\r\n const labels = {\r\n 'mechanic': '\u039c\u03b7\u03c7\u03b1\u03bd\u03b9\u03ba\u03cc\u03c2',\r\n 'painter': '\u0392\u03b1\u03c6\u03ad\u03b1\u03c2',\r\n 'cleaner': '\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03ae\u03c2',\r\n 'motorcycle-mechanic': '\u039c\u03b7\u03c7\u03b1\u03bd\u03b9\u03ba\u03cc\u03c2 \u039c\u03bf\u03c4\u03bf\u03c3\u03c5\u03ba\u03bb\u03b5\u03c4\u03ce\u03bd'\r\n };\r\n return labels[profession] || profession;\r\n }\r\n\r\n function getVehicleLabel(vehicle) {\r\n const labels = {\r\n 'car': '\u0391\u03c5\u03c4\u03bf\u03ba\u03af\u03bd\u03b7\u03c4\u03bf',\r\n 'truck': '\u03a6\u03bf\u03c1\u03c4\u03b7\u03b3\u03cc',\r\n 'motorcycle': '\u039c\u03bf\u03c4\u03bf\u03c3\u03c5\u03ba\u03bb\u03ad\u03c4\u03b1',\r\n 'boat': '\u03a3\u03ba\u03ac\u03c6\u03bf\u03c2',\r\n 'bicycle': '\u03a0\u03bf\u03b4\u03ae\u03bb\u03b1\u03c4\u03bf'\r\n };\r\n return labels[vehicle] || vehicle;\r\n }\r\n\r\n function getNeedLabel(need) {\r\n const labels = {\r\n 'cleaning': '\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03bc\u03cc\u03c2',\r\n 'protection': '\u03a0\u03c1\u03bf\u03c3\u03c4\u03b1\u03c3\u03af\u03b1',\r\n 'repair': '\u0395\u03c0\u03b9\u03c3\u03ba\u03b5\u03c5\u03ae',\r\n 'maintenance': '\u03a3\u03c5\u03bd\u03c4\u03ae\u03c1\u03b7\u03c3\u03b7',\r\n 'polishing': '\u0393\u03c5\u03ac\u03bb\u03b9\u03c3\u03bc\u03b1',\r\n 'painting': '\u0392\u03b1\u03c6\u03ae'\r\n };\r\n return labels[need] || need;\r\n }\r\n\r\n function applyFilters() {\r\n const checkedFilters = {\r\n profession: [],\r\n vehicle: [],\r\n need: [],\r\n space: []\r\n };\r\n\r\n \/\/ Collect all checked filters\r\n document.querySelectorAll('input[type=\"checkbox\"]:checked').forEach(checkbox => {\r\n const filterType = checkbox.dataset.filter;\r\n const value = checkbox.value;\r\n checkedFilters[filterType].push(value);\r\n });\r\n\r\n \/\/ Filter products\r\n filteredProducts = products.filter(product => {\r\n return Object.keys(checkedFilters).every(filterType => {\r\n const selectedValues = checkedFilters[filterType];\r\n if (selectedValues.length === 0) return true;\r\n \r\n return selectedValues.some(value => \r\n product[filterType] && product[filterType].includes(value)\r\n );\r\n });\r\n });\r\n\r\n renderProducts(filteredProducts);\r\n }\r\n\r\n function clearAllFilters() {\r\n document.querySelectorAll('input[type=\"checkbox\"]').forEach(checkbox => {\r\n checkbox.checked = false;\r\n });\r\n filteredProducts = [...products];\r\n renderProducts(filteredProducts);\r\n }\r\n\r\n \/\/ Event listeners\r\n document.querySelectorAll('input[type=\"checkbox\"]').forEach(checkbox => {\r\n checkbox.addEventListener('change', applyFilters);\r\n });\r\n\r\n \/\/ Initial render\r\n renderProducts(products);\r\n <\/script>\r\n<\/body>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3442","page","type-page","status-publish","hentry"],"acf":{"full_width":false,"header_transparent":false,"header_white":false},"_links":{"self":[{"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=\/wp\/v2\/pages\/3442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3442"}],"version-history":[{"count":3,"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=\/wp\/v2\/pages\/3442\/revisions"}],"predecessor-version":[{"id":3445,"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=\/wp\/v2\/pages\/3442\/revisions\/3445"}],"wp:attachment":[{"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3442,"date":"2025-05-28T15:28:55","date_gmt":"2025-05-28T15:28:55","guid":{"rendered":"https:\/\/browserbros.gr\/b2b\/?page_id=3442"},"modified":"2025-05-28T15:28:55","modified_gmt":"2025-05-28T15:28:55","slug":"test","status":"publish","type":"page","link":"https:\/\/wipesnmore.gr\/?page_id=3442","title":{"rendered":"test"},"content":{"rendered":"\r\n\r\n\r\n \r\n \r\n \u03a0\u03c1\u03bf\u03b7\u03b3\u03bc\u03ad\u03bd\u03bf \u03a6\u03af\u03bb\u03c4\u03c1\u03bf B2B \u03a0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03c9\u03bd<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Arial', sans-serif;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n\r\n .filter-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n background: rgba(255, 255, 255, 0.95);\r\n backdrop-filter: blur(10px);\r\n border-radius: 20px;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);\r\n overflow: hidden;\r\n }\r\n\r\n .filter-header {\r\n background: linear-gradient(45deg, #2c3e50, #34495e);\r\n color: white;\r\n padding: 30px;\r\n text-align: center;\r\n }\r\n\r\n .filter-header h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\r\n }\r\n\r\n .filter-header p {\r\n opacity: 0.9;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .filter-main {\r\n display: grid;\r\n grid-template-columns: 350px 1fr;\r\n min-height: 600px;\r\n }\r\n\r\n .filter-sidebar {\r\n background: #f8f9fa;\r\n padding: 30px;\r\n border-right: 1px solid #e9ecef;\r\n }\r\n\r\n .filter-group {\r\n margin-bottom: 30px;\r\n animation: slideInLeft 0.6s ease-out;\r\n }\r\n\r\n .filter-group h3 {\r\n color: #2c3e50;\r\n font-size: 1.2rem;\r\n margin-bottom: 15px;\r\n padding-bottom: 8px;\r\n border-bottom: 2px solid #3498db;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .filter-group h3::before {\r\n content: '\ud83d\udd27';\r\n font-size: 1.1rem;\r\n }\r\n\r\n .filter-group:nth-child(2) h3::before { content: '\ud83d\ude97'; }\r\n .filter-group:nth-child(3) h3::before { content: '\u2699\ufe0f'; }\r\n .filter-group:nth-child(4) h3::before { content: '\ud83c\udfe2'; }\r\n\r\n .filter-options {\r\n display: grid;\r\n gap: 8px;\r\n }\r\n\r\n .filter-option {\r\n position: relative;\r\n }\r\n\r\n .filter-option input[type=\"checkbox\"] {\r\n position: absolute;\r\n opacity: 0;\r\n cursor: pointer;\r\n }\r\n\r\n .filter-option label {\r\n display: flex;\r\n align-items: center;\r\n padding: 12px 15px;\r\n background: white;\r\n border: 2px solid #e9ecef;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-weight: 500;\r\n }\r\n\r\n .filter-option label:hover {\r\n border-color: #3498db;\r\n transform: translateX(5px);\r\n box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);\r\n }\r\n\r\n .filter-option input[type=\"checkbox\"]:checked + label {\r\n background: linear-gradient(45deg, #3498db, #2980b9);\r\n color: white;\r\n border-color: #2980b9;\r\n transform: translateX(5px);\r\n box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);\r\n }\r\n\r\n .filter-option label::before {\r\n content: '';\r\n width: 20px;\r\n height: 20px;\r\n border: 2px solid #bdc3c7;\r\n border-radius: 4px;\r\n margin-right: 12px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .filter-option input[type=\"checkbox\"]:checked + label::before {\r\n background: white;\r\n border-color: white;\r\n content: '\u2713';\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #3498db;\r\n font-weight: bold;\r\n font-size: 14px;\r\n }\r\n\r\n .results-section {\r\n padding: 30px;\r\n background: white;\r\n }\r\n\r\n .results-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 25px;\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid #f8f9fa;\r\n }\r\n\r\n .results-count {\r\n font-size: 1.2rem;\r\n color: #2c3e50;\r\n font-weight: bold;\r\n }\r\n\r\n .clear-filters {\r\n background: linear-gradient(45deg, #e74c3c, #c0392b);\r\n color: white;\r\n border: none;\r\n padding: 12px 24px;\r\n border-radius: 25px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);\r\n }\r\n\r\n .clear-filters:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);\r\n }\r\n\r\n .products-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .product-card {\r\n background: white;\r\n border: 1px solid #e9ecef;\r\n border-radius: 15px;\r\n padding: 20px;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .product-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, #3498db, #2ecc71);\r\n }\r\n\r\n .product-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);\r\n border-color: #3498db;\r\n }\r\n\r\n .product-title {\r\n font-size: 1.1rem;\r\n font-weight: bold;\r\n color: #2c3e50;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .product-category {\r\n background: linear-gradient(45deg, #f39c12, #e67e22);\r\n color: white;\r\n padding: 4px 12px;\r\n border-radius: 20px;\r\n font-size: 0.8rem;\r\n display: inline-block;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .product-tags {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 5px;\r\n margin-top: 10px;\r\n }\r\n\r\n .product-tag {\r\n background: #ecf0f1;\r\n color: #7f8c8d;\r\n padding: 3px 8px;\r\n border-radius: 12px;\r\n font-size: 0.7rem;\r\n }\r\n\r\n .no-results {\r\n text-align: center;\r\n padding: 60px 20px;\r\n color: #7f8c8d;\r\n }\r\n\r\n .no-results-icon {\r\n font-size: 4rem;\r\n margin-bottom: 20px;\r\n }\r\n\r\n @keyframes slideInLeft {\r\n from {\r\n opacity: 0;\r\n transform: translateX(-30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .product-card {\r\n animation: fadeIn 0.6s ease-out;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .filter-main {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .filter-sidebar {\r\n border-right: none;\r\n border-bottom: 1px solid #e9ecef;\r\n }\r\n \r\n .products-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .filter-header h1 {\r\n font-size: 2rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"filter-container\">\r\n <div class=\"filter-header\">\r\n <h1>\u03a0\u03c1\u03bf\u03b7\u03b3\u03bc\u03ad\u03bd\u03bf \u03a6\u03af\u03bb\u03c4\u03c1\u03bf \u03a0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03c9\u03bd<\/h1>\r\n <p>\u0392\u03c1\u03b5\u03af\u03c4\u03b5 \u03b5\u03cd\u03ba\u03bf\u03bb\u03b1 \u03c4\u03b1 \u03c0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03b1 \u03c0\u03bf\u03c5 \u03c7\u03c1\u03b5\u03b9\u03ac\u03b6\u03b5\u03c3\u03c4\u03b5 \u03b3\u03b9\u03b1 \u03c4\u03b7\u03bd \u03b5\u03c0\u03b9\u03c7\u03b5\u03af\u03c1\u03b7\u03c3\u03ae \u03c3\u03b1\u03c2<\/p>\r\n <\/div>\r\n \r\n <div class=\"filter-main\">\r\n <div class=\"filter-sidebar\">\r\n <div class=\"filter-group\">\r\n <h3>\u0395\u03c0\u03ac\u03b3\u03b3\u03b5\u03bb\u03bc\u03b1<\/h3>\r\n <div class=\"filter-options\">\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"mechanic\" data-filter=\"profession\" value=\"mechanic\">\r\n <label for=\"mechanic\">\u039c\u03b7\u03c7\u03b1\u03bd\u03b9\u03ba\u03cc\u03c2 \u0391\u03c5\u03c4\u03bf\u03ba\u03b9\u03bd\u03ae\u03c4\u03c9\u03bd<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"painter\" data-filter=\"profession\" value=\"painter\">\r\n <label for=\"painter\">\u0392\u03b1\u03c6\u03ad\u03b1\u03c2 \u0391\u03c5\u03c4\u03bf\u03ba\u03b9\u03bd\u03ae\u03c4\u03c9\u03bd<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"cleaner\" data-filter=\"profession\" value=\"cleaner\">\r\n <label for=\"cleaner\">\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03ae\u03c2 \u039f\u03c7\u03b7\u03bc\u03ac\u03c4\u03c9\u03bd<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"motorcycle-mechanic\" data-filter=\"profession\" value=\"motorcycle-mechanic\">\r\n <label for=\"motorcycle-mechanic\">\u039c\u03b7\u03c7\u03b1\u03bd\u03b9\u03ba\u03cc\u03c2 \u039c\u03bf\u03c4\u03bf\u03c3\u03c5\u03ba\u03bb\u03b5\u03c4\u03ce\u03bd<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"filter-group\">\r\n <h3>\u03a4\u03cd\u03c0\u03bf\u03c2 \u039f\u03c7\u03ae\u03bc\u03b1\u03c4\u03bf\u03c2<\/h3>\r\n <div class=\"filter-options\">\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"car\" data-filter=\"vehicle\" value=\"car\">\r\n <label for=\"car\">\u0391\u03c5\u03c4\u03bf\u03ba\u03af\u03bd\u03b7\u03c4\u03bf<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"truck\" data-filter=\"vehicle\" value=\"truck\">\r\n <label for=\"truck\">\u03a6\u03bf\u03c1\u03c4\u03b7\u03b3\u03cc<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"motorcycle\" data-filter=\"vehicle\" value=\"motorcycle\">\r\n <label for=\"motorcycle\">\u039c\u03bf\u03c4\u03bf\u03c3\u03c5\u03ba\u03bb\u03ad\u03c4\u03b1<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"boat\" data-filter=\"vehicle\" value=\"boat\">\r\n <label for=\"boat\">\u03a3\u03ba\u03ac\u03c6\u03bf\u03c2<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"bicycle\" data-filter=\"vehicle\" value=\"bicycle\">\r\n <label for=\"bicycle\">\u03a0\u03bf\u03b4\u03ae\u03bb\u03b1\u03c4\u03bf<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"filter-group\">\r\n <h3>\u0391\u03bd\u03ac\u03b3\u03ba\u03b7<\/h3>\r\n <div class=\"filter-options\">\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"cleaning\" data-filter=\"need\" value=\"cleaning\">\r\n <label for=\"cleaning\">\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03bc\u03cc\u03c2<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"protection\" data-filter=\"need\" value=\"protection\">\r\n <label for=\"protection\">\u03a0\u03c1\u03bf\u03c3\u03c4\u03b1\u03c3\u03af\u03b1<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"repair\" data-filter=\"need\" value=\"repair\">\r\n <label for=\"repair\">\u0395\u03c0\u03b9\u03c3\u03ba\u03b5\u03c5\u03ae<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"maintenance\" data-filter=\"need\" value=\"maintenance\">\r\n <label for=\"maintenance\">\u03a3\u03c5\u03bd\u03c4\u03ae\u03c1\u03b7\u03c3\u03b7<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"polishing\" data-filter=\"need\" value=\"polishing\">\r\n <label for=\"polishing\">\u0393\u03c5\u03ac\u03bb\u03b9\u03c3\u03bc\u03b1<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"painting\" data-filter=\"need\" value=\"painting\">\r\n <label for=\"painting\">\u0392\u03b1\u03c6\u03ae<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"filter-group\">\r\n <h3>\u03a7\u03ce\u03c1\u03bf\u03c2 \u0395\u03c6\u03b1\u03c1\u03bc\u03bf\u03b3\u03ae\u03c2<\/h3>\r\n <div class=\"filter-options\">\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"garage\" data-filter=\"space\" value=\"garage\">\r\n <label for=\"garage\">\u03a3\u03c5\u03bd\u03b5\u03c1\u03b3\u03b5\u03af\u03bf<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"paint-shop\" data-filter=\"space\" value=\"paint-shop\">\r\n <label for=\"paint-shop\">\u03a6\u03b1\u03bd\u03bf\u03b2\u03b1\u03c6\u03b5\u03af\u03bf<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"car-wash\" data-filter=\"space\" value=\"car-wash\">\r\n <label for=\"car-wash\">\u03a0\u03bb\u03c5\u03bd\u03c4\u03ae\u03c1\u03b9\u03bf<\/label>\r\n <\/div>\r\n <div class=\"filter-option\">\r\n <input type=\"checkbox\" id=\"mobile\" data-filter=\"space\" value=\"mobile\">\r\n <label for=\"mobile\">\u039a\u03b9\u03bd\u03b7\u03c4\u03ae \u039c\u03bf\u03bd\u03ac\u03b4\u03b1<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"results-section\">\r\n <div class=\"results-header\">\r\n <div class=\"results-count\">\r\n \u0392\u03c1\u03ad\u03b8\u03b7\u03ba\u03b1\u03bd <span id=\"results-number\">24<\/span> \u03c0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03b1\r\n <\/div>\r\n <button class=\"clear-filters\" onclick=\"clearAllFilters()\">\r\n \u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03bc\u03cc\u03c2 \u03a6\u03af\u03bb\u03c4\u03c1\u03c9\u03bd\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"products-grid\" id=\"products-container\">\r\n \r\n <\/div>\r\n\r\n <div class=\"no-results\" id=\"no-results\" style=\"display: none;\">\r\n <div class=\"no-results-icon\">\ud83d\udd0d<\/div>\r\n <h3>\u0394\u03b5\u03bd \u03b2\u03c1\u03ad\u03b8\u03b7\u03ba\u03b1\u03bd \u03c0\u03c1\u03bf\u03ca\u03cc\u03bd\u03c4\u03b1<\/h3>\r\n <p>\u0394\u03bf\u03ba\u03b9\u03bc\u03ac\u03c3\u03c4\u03b5 \u03bd\u03b1 \u03b1\u03bb\u03bb\u03ac\u03be\u03b5\u03c4\u03b5 \u03c4\u03b1 \u03ba\u03c1\u03b9\u03c4\u03ae\u03c1\u03b9\u03b1 \u03b1\u03bd\u03b1\u03b6\u03ae\u03c4\u03b7\u03c3\u03b7\u03c2<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Sample product data based on your catalog\r\n const products = [\r\n {\r\n id: 1,\r\n title: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc \u039a\u03b9\u03bd\u03b7\u03c4\u03ae\u03c1\u03b1 Premium\",\r\n category: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03ac\",\r\n profession: [\"mechanic\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"cleaning\", \"maintenance\"],\r\n space: [\"garage\"]\r\n },\r\n {\r\n id: 2,\r\n title: \"\u03a0\u03c1\u03bf\u03c3\u03c4\u03b1\u03c4\u03b5\u03c5\u03c4\u03b9\u03ba\u03cc \u039a\u03b1\u03bc\u03c0\u03af\u03bd\u03b1\u03c2\",\r\n category: \"\u03a0\u03c1\u03bf\u03c3\u03c4\u03b1\u03c3\u03af\u03b1\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"protection\", \"cleaning\"],\r\n space: [\"car-wash\", \"garage\"]\r\n },\r\n {\r\n id: 3,\r\n title: \"\u0392\u03bf\u03cd\u03c1\u03c4\u03c3\u03b5\u03c2 \u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03bc\u03bf\u03cd \u0394\u03b5\u03c1\u03bc\u03ac\u03c4\u03c9\u03bd\",\r\n category: \"\u0395\u03c1\u03b3\u03b1\u03bb\u03b5\u03af\u03b1\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\"],\r\n need: [\"cleaning\"],\r\n space: [\"car-wash\", \"mobile\"]\r\n },\r\n {\r\n id: 4,\r\n title: \"\u0393\u03c5\u03b1\u03bb\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc & \u03a3\u03c4\u03b5\u03b3\u03bd\u03c9\u03c4\u03b9\u03ba\u03cc \u039a\u03b5\u03c1\u03af\",\r\n category: \"\u03a0\u03b5\u03c1\u03b9\u03c0\u03bf\u03af\u03b7\u03c3\u03b7\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"motorcycle\"],\r\n need: [\"polishing\", \"protection\"],\r\n space: [\"car-wash\", \"garage\", \"mobile\"]\r\n },\r\n {\r\n id: 5,\r\n title: \"\u03a7\u03c1\u03ce\u03bc\u03b1 \u0391\u03c5\u03c4\u03bf\u03ba\u03b9\u03bd\u03ae\u03c4\u03bf\u03c5 \u039c\u03b5\u03c4\u03b1\u03bb\u03bb\u03b9\u03ba\u03cc\",\r\n category: \"\u0392\u03b1\u03c6\u03ae\",\r\n profession: [\"painter\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"painting\", \"repair\"],\r\n space: [\"paint-shop\"]\r\n },\r\n {\r\n id: 6,\r\n title: \"\u03a3\u03c5\u03bd\u03c4\u03b7\u03c1\u03b7\u03c4\u03b9\u03ba\u03cc \u03a0\u03bb\u03b1\u03c3\u03c4\u03b9\u03ba\u03ce\u03bd\",\r\n category: \"\u03a3\u03c5\u03bd\u03c4\u03ae\u03c1\u03b7\u03c3\u03b7\",\r\n profession: [\"mechanic\", \"cleaner\"],\r\n vehicle: [\"car\", \"truck\", \"motorcycle\"],\r\n need: [\"maintenance\", \"protection\"],\r\n space: [\"garage\", \"car-wash\"]\r\n },\r\n {\r\n id: 7,\r\n title: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc \u0396\u03ac\u03bd\u03c4\u03b1\u03c2 \u0395\u03b9\u03b4\u03b9\u03ba\u03cc\",\r\n category: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03ac\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"motorcycle\"],\r\n need: [\"cleaning\"],\r\n space: [\"car-wash\", \"mobile\"]\r\n },\r\n {\r\n id: 8,\r\n title: \"\u0395\u03c1\u03b3\u03b1\u03bb\u03b5\u03af\u03b1 \u0395\u03c6\u03b1\u03c1\u03bc\u03bf\u03b3\u03ce\u03bd \u0392\u03b1\u03c6\u03ae\u03c2\",\r\n category: \"\u0395\u03c1\u03b3\u03b1\u03bb\u03b5\u03af\u03b1\",\r\n profession: [\"painter\"],\r\n vehicle: [\"car\", \"truck\", \"motorcycle\"],\r\n need: [\"painting\"],\r\n space: [\"paint-shop\"]\r\n },\r\n {\r\n id: 9,\r\n title: \"\u0393\u03ac\u03bd\u03c4\u03b9\u03b1 \u039c\u03b7\u03c7\u03b1\u03bd\u03b9\u03ba\u03ce\u03bd \u039d\u03b9\u03c4\u03c1\u03b9\u03bb\u03af\u03bf\u03c5\",\r\n category: \"\u03a0\u03c1\u03bf\u03c3\u03c4\u03b1\u03c3\u03af\u03b1\",\r\n profession: [\"mechanic\", \"painter\"],\r\n vehicle: [\"car\", \"truck\", \"motorcycle\"],\r\n need: [\"protection\", \"repair\", \"maintenance\"],\r\n space: [\"garage\", \"paint-shop\"]\r\n },\r\n {\r\n id: 10,\r\n title: \"\u03a0\u03bb\u03c5\u03c3\u03c4\u03b9\u03ba\u03cc \u039c\u03b7\u03c7\u03ac\u03bd\u03b7\u03bc\u03b1 \u0396\u03b5\u03c3\u03c4\u03bf\u03cd \u039d\u03b5\u03c1\u03bf\u03cd\",\r\n category: \"\u039c\u03b7\u03c7\u03b1\u03bd\u03ae\u03bc\u03b1\u03c4\u03b1\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"cleaning\"],\r\n space: [\"car-wash\", \"garage\"]\r\n },\r\n {\r\n id: 11,\r\n title: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc \u039c\u03bf\u03c4\u03bf\u03c3\u03c5\u03ba\u03bb\u03b5\u03c4\u03ce\u03bd\",\r\n category: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03ac\",\r\n profession: [\"motorcycle-mechanic\", \"cleaner\"],\r\n vehicle: [\"motorcycle\"],\r\n need: [\"cleaning\", \"maintenance\"],\r\n space: [\"garage\", \"mobile\"]\r\n },\r\n {\r\n id: 12,\r\n title: \"\u03a0\u03c1\u03bf\u03c3\u03c4\u03b1\u03c4\u03b5\u03c5\u03c4\u03b9\u03ba\u03ac \u039c\u03b1\u03c4\u03b9\u03ce\u03bd\",\r\n category: \"\u0391\u03c3\u03c6\u03ac\u03bb\u03b5\u03b9\u03b1\",\r\n profession: [\"mechanic\", \"painter\"],\r\n vehicle: [\"car\", \"truck\", \"motorcycle\"],\r\n need: [\"protection\"],\r\n space: [\"garage\", \"paint-shop\"]\r\n },\r\n {\r\n id: 13,\r\n title: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc \u03a3\u03ba\u03b1\u03c6\u03ce\u03bd Marine\",\r\n category: \"\u039d\u03b1\u03c5\u03c4\u03b9\u03ba\u03ac\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"boat\"],\r\n need: [\"cleaning\", \"protection\"],\r\n space: [\"mobile\"]\r\n },\r\n {\r\n id: 14,\r\n title: \"\u0391\u03c4\u03bc\u03bf\u03ba\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03ae\u03c2 \u0395\u03c0\u03b1\u03b3\u03b3\u03b5\u03bb\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc\u03c2\",\r\n category: \"\u039c\u03b7\u03c7\u03b1\u03bd\u03ae\u03bc\u03b1\u03c4\u03b1\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"cleaning\"],\r\n space: [\"car-wash\", \"garage\"]\r\n },\r\n {\r\n id: 15,\r\n title: \"\u03a3\u03c5\u03bd\u03c4\u03b7\u03c1\u03b7\u03c4\u03b9\u03ba\u03cc \u03a4\u03b1\u03bc\u03c0\u03bb\u03cc\",\r\n category: \"\u03a0\u03b5\u03c1\u03b9\u03c0\u03bf\u03af\u03b7\u03c3\u03b7\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"maintenance\", \"protection\"],\r\n space: [\"car-wash\", \"mobile\"]\r\n },\r\n {\r\n id: 16,\r\n title: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc \u03a0\u03bf\u03b4\u03b7\u03bb\u03ac\u03c4\u03c9\u03bd Eco\",\r\n category: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03ac\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"bicycle\"],\r\n need: [\"cleaning\"],\r\n space: [\"mobile\"]\r\n },\r\n {\r\n id: 17,\r\n title: \"\u03a6\u03ce\u03c4\u03b1 \u0395\u03bb\u03ad\u03b3\u03c7\u03bf\u03c5 \u03a7\u03c1\u03ce\u03bc\u03b1\u03c4\u03bf\u03c2 LED\",\r\n category: \"\u0395\u03be\u03bf\u03c0\u03bb\u03b9\u03c3\u03bc\u03cc\u03c2\",\r\n profession: [\"painter\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"painting\"],\r\n space: [\"paint-shop\"]\r\n },\r\n {\r\n id: 18,\r\n title: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc \u0391\u03bb\u03ac\u03c4\u03c9\u03bd & \u03a3\u03ba\u03bf\u03c5\u03c1\u03b9\u03ac\u03c2\",\r\n category: \"\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03b9\u03ba\u03ac\",\r\n profession: [\"mechanic\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"repair\", \"maintenance\"],\r\n space: [\"garage\"]\r\n },\r\n {\r\n id: 19,\r\n title: \"\u0393\u03c5\u03b1\u03bb\u03b9\u03c3\u03c4\u03b9\u03ba\u03cc \u0395\u03bb\u03b1\u03c3\u03c4\u03b9\u03ba\u03ce\u03bd\",\r\n category: \"\u03a0\u03b5\u03c1\u03b9\u03c0\u03bf\u03af\u03b7\u03c3\u03b7\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"truck\", \"motorcycle\"],\r\n need: [\"polishing\"],\r\n space: [\"car-wash\", \"mobile\"]\r\n },\r\n {\r\n id: 20,\r\n title: \"\u0395\u03be\u03c5\u03b3\u03af\u03b1\u03bd\u03c3\u03b7 \u039a\u03b1\u03bc\u03c0\u03af\u03bd\u03b1\u03c2 A\/C\",\r\n category: \"\u03a5\u03b3\u03b9\u03b5\u03b9\u03bd\u03ae\",\r\n profession: [\"mechanic\", \"cleaner\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"cleaning\", \"maintenance\"],\r\n space: [\"garage\", \"car-wash\"]\r\n },\r\n {\r\n id: 21,\r\n title: \"\u039a\u03b5\u03c1\u03b1\u03bc\u03b9\u03ba\u03ac \u0395\u03be\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae\u03c2 \u03a0\u03b5\u03c1\u03b9\u03c0\u03bf\u03af\u03b7\u03c3\u03b7\u03c2\",\r\n category: \"\u03a0\u03c1\u03bf\u03c3\u03c4\u03b1\u03c3\u03af\u03b1\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"motorcycle\"],\r\n need: [\"protection\", \"polishing\"],\r\n space: [\"car-wash\", \"garage\"]\r\n },\r\n {\r\n id: 22,\r\n title: \"\u0393\u03b5\u03bd\u03bd\u03ae\u03c4\u03c1\u03b9\u03b1 \u038c\u03b6\u03bf\u03bd\u03c4\u03bf\u03c2\",\r\n category: \"\u039c\u03b7\u03c7\u03b1\u03bd\u03ae\u03bc\u03b1\u03c4\u03b1\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"truck\"],\r\n need: [\"cleaning\"],\r\n space: [\"car-wash\", \"garage\"]\r\n },\r\n {\r\n id: 23,\r\n title: \"\u03a4\u03b1\u03b9\u03bd\u03af\u03b5\u03c2 \u039c\u03b1\u03c3\u03ba\u03b1\u03c1\u03af\u03bc\u03b1\u03c4\u03bf\u03c2\",\r\n category: \"\u0392\u03b1\u03c6\u03ae\",\r\n profession: [\"painter\"],\r\n vehicle: [\"car\", \"truck\", \"motorcycle\"],\r\n need: [\"painting\"],\r\n space: [\"paint-shop\"]\r\n },\r\n {\r\n id: 24,\r\n title: \"\u03a0\u03b5\u03c4\u03c3\u03ad\u03c4\u03b5\u03c2 \u039c\u03b9\u03ba\u03c1\u03bf\u03ca\u03bd\u03ce\u03bd Premium\",\r\n category: \"\u0395\u03c1\u03b3\u03b1\u03bb\u03b5\u03af\u03b1\",\r\n profession: [\"cleaner\"],\r\n vehicle: [\"car\", \"truck\", \"motorcycle\"],\r\n need: [\"cleaning\", \"polishing\"],\r\n space: [\"car-wash\", \"mobile\", \"garage\"]\r\n }\r\n ];\r\n\r\n let filteredProducts = [...products];\r\n\r\n function renderProducts(productsToRender) {\r\n const container = document.getElementById('products-container');\r\n const noResults = document.getElementById('no-results');\r\n const resultsNumber = document.getElementById('results-number');\r\n\r\n if (productsToRender.length === 0) {\r\n container.style.display = 'none';\r\n noResults.style.display = 'block';\r\n resultsNumber.textContent = '0';\r\n return;\r\n }\r\n\r\n container.style.display = 'grid';\r\n noResults.style.display = 'none';\r\n resultsNumber.textContent = productsToRender.length;\r\n\r\n container.innerHTML = productsToRender.map(product => `\r\n <div class=\"product-card\">\r\n <div class=\"product-category\">${product.category}<\/div>\r\n <div class=\"product-title\">${product.title}<\/div>\r\n <div class=\"product-tags\">\r\n ${product.profession.map(p => `<span class=\"product-tag\">${getProfessionLabel(p)}<\/span>`).join('')}\r\n ${product.vehicle.map(v => `<span class=\"product-tag\">${getVehicleLabel(v)}<\/span>`).join('')}\r\n ${product.need.map(n => `<span class=\"product-tag\">${getNeedLabel(n)}<\/span>`).join('')}\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n function getProfessionLabel(profession) {\r\n const labels = {\r\n 'mechanic': '\u039c\u03b7\u03c7\u03b1\u03bd\u03b9\u03ba\u03cc\u03c2',\r\n 'painter': '\u0392\u03b1\u03c6\u03ad\u03b1\u03c2',\r\n 'cleaner': '\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03c4\u03ae\u03c2',\r\n 'motorcycle-mechanic': '\u039c\u03b7\u03c7\u03b1\u03bd\u03b9\u03ba\u03cc\u03c2 \u039c\u03bf\u03c4\u03bf\u03c3\u03c5\u03ba\u03bb\u03b5\u03c4\u03ce\u03bd'\r\n };\r\n return labels[profession] || profession;\r\n }\r\n\r\n function getVehicleLabel(vehicle) {\r\n const labels = {\r\n 'car': '\u0391\u03c5\u03c4\u03bf\u03ba\u03af\u03bd\u03b7\u03c4\u03bf',\r\n 'truck': '\u03a6\u03bf\u03c1\u03c4\u03b7\u03b3\u03cc',\r\n 'motorcycle': '\u039c\u03bf\u03c4\u03bf\u03c3\u03c5\u03ba\u03bb\u03ad\u03c4\u03b1',\r\n 'boat': '\u03a3\u03ba\u03ac\u03c6\u03bf\u03c2',\r\n 'bicycle': '\u03a0\u03bf\u03b4\u03ae\u03bb\u03b1\u03c4\u03bf'\r\n };\r\n return labels[vehicle] || vehicle;\r\n }\r\n\r\n function getNeedLabel(need) {\r\n const labels = {\r\n 'cleaning': '\u039a\u03b1\u03b8\u03b1\u03c1\u03b9\u03c3\u03bc\u03cc\u03c2',\r\n 'protection': '\u03a0\u03c1\u03bf\u03c3\u03c4\u03b1\u03c3\u03af\u03b1',\r\n 'repair': '\u0395\u03c0\u03b9\u03c3\u03ba\u03b5\u03c5\u03ae',\r\n 'maintenance': '\u03a3\u03c5\u03bd\u03c4\u03ae\u03c1\u03b7\u03c3\u03b7',\r\n 'polishing': '\u0393\u03c5\u03ac\u03bb\u03b9\u03c3\u03bc\u03b1',\r\n 'painting': '\u0392\u03b1\u03c6\u03ae'\r\n };\r\n return labels[need] || need;\r\n }\r\n\r\n function applyFilters() {\r\n const checkedFilters = {\r\n profession: [],\r\n vehicle: [],\r\n need: [],\r\n space: []\r\n };\r\n\r\n \/\/ Collect all checked filters\r\n document.querySelectorAll('input[type=\"checkbox\"]:checked').forEach(checkbox => {\r\n const filterType = checkbox.dataset.filter;\r\n const value = checkbox.value;\r\n checkedFilters[filterType].push(value);\r\n });\r\n\r\n \/\/ Filter products\r\n filteredProducts = products.filter(product => {\r\n return Object.keys(checkedFilters).every(filterType => {\r\n const selectedValues = checkedFilters[filterType];\r\n if (selectedValues.length === 0) return true;\r\n \r\n return selectedValues.some(value => \r\n product[filterType] && product[filterType].includes(value)\r\n );\r\n });\r\n });\r\n\r\n renderProducts(filteredProducts);\r\n }\r\n\r\n function clearAllFilters() {\r\n document.querySelectorAll('input[type=\"checkbox\"]').forEach(checkbox => {\r\n checkbox.checked = false;\r\n });\r\n filteredProducts = [...products];\r\n renderProducts(filteredProducts);\r\n }\r\n\r\n \/\/ Event listeners\r\n document.querySelectorAll('input[type=\"checkbox\"]').forEach(checkbox => {\r\n checkbox.addEventListener('change', applyFilters);\r\n });\r\n\r\n \/\/ Initial render\r\n renderProducts(products);\r\n <\/script>\r\n<\/body>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3442","page","type-page","status-publish","hentry"],"acf":{"full_width":false,"header_transparent":false,"header_white":false},"_links":{"self":[{"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=\/wp\/v2\/pages\/3442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3442"}],"version-history":[{"count":3,"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=\/wp\/v2\/pages\/3442\/revisions"}],"predecessor-version":[{"id":3445,"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=\/wp\/v2\/pages\/3442\/revisions\/3445"}],"wp:attachment":[{"href":"https:\/\/wipesnmore.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}