RoboTech Parts - Shop<\/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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: #f5f5f5;\r\n min-height: 100vh;\r\n color: #333;\r\n }\r\n\r\n .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n\r\n\r\n\r\n .search-filter-bar {\r\n background: transparent;\r\n padding: 0px 0;\r\n margin-bottom: 40px;\r\n display: flex;\r\n justify-content: center;\r\n margin-top: 20px;\r\n }\r\n\r\n .search-box {\r\n position: relative;\r\n width: 100%;\r\n max-width: 500px;\r\n background: rgba(255, 255, 255, 0.95);\r\n border-radius: 50px; \/* \u2705 rounded corners *\/\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); \/* \u2705 visible shadow *\/\r\n overflow: hidden; \/* \u2705 ensures children respect border-radius *\/\r\n display: flex;\r\n align-items: center;\r\n padding: 10px\r\n}\r\n\r\n\r\n .search-box input {\r\n width: 100%;\r\n padding: 20px 120px 20px 24px;\r\n background: rgba(255, 255, 255, 0.95);\r\n border: none;\r\n border-radius: 50px;\r\n font-size: 16px;\r\n outline: none;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), \r\n 0 2px 6px rgba(102, 126, 234, 0.2); \/* new effect *\/\r\n backdrop-filter: blur(10px);\r\n font-weight: 400;\r\n color: #374151;\r\n}\r\n\r\n\r\n .search-box input::placeholder {\r\n color: #9CA3AF;\r\n font-weight: 400;\r\n }\r\n\r\n .search-box input:focus {\r\n background: rgba(255, 255, 255, 1);\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), \r\n 0 10px 30px rgba(0, 0, 0, 0.1),\r\n 0 0 0 4px rgba(102, 126, 234, 0.1);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .search-btn {\r\n position: absolute;\r\n right: 8px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n border: none;\r\n border-radius: 50px;\r\n padding: 12px 24px;\r\n color: white;\r\n font-weight: 600;\r\n font-size: 14px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);\r\n }\r\n\r\n .search-btn:hover {\r\n background: linear-gradient(135deg, #5a67d8 0%, #6c5ce7 100%);\r\n transform: translateY(-50%) scale(1.05);\r\n box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);\r\n }\r\n\r\n .search-btn:active {\r\n transform: translateY(-50%) scale(0.98);\r\n }\r\n\r\n\r\n\r\n .filter-group {\r\n display: flex;\r\n gap: 15px;\r\n align-items: center;\r\n }\r\n\r\n .filter-btn {\r\n padding: 10px 20px;\r\n background: #f8f9fa;\r\n border: 2px solid #e1e5e9;\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-btn:hover, .filter-btn.active {\r\n background: #667eea;\r\n color: white;\r\n border-color: #667eea;\r\n }\r\n\r\n .cart-icon-corner {\r\n position: fixed;\r\n top: 30px;\r\n right: 30px;\r\n background: #667eea;\r\n color: white;\r\n padding: 12px 20px;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-weight: 600;\r\n box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);\r\n z-index: 1000;\r\n }\r\n\r\n .cart-icon-corner:hover {\r\n background: #5a67d8;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .cart-count {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n background: #ff4757;\r\n color: white;\r\n border-radius: 50%;\r\n width: 24px;\r\n height: 24px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 12px;\r\n font-weight: bold;\r\n }\r\n\r\n .products-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .product-card {\r\n background: rgba(255, 255, 255, 0.95);\r\n border-radius: 20px;\r\n padding: 25px;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n\r\n .product-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.15);\r\n }\r\n\r\n .product-image {\r\n width: 100%;\r\n height: 300px;\r\n background: linear-gradient(45deg, #f0f2f5, #e1e5e9);\r\n border-radius: 15px;\r\n margin-bottom: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 48px;\r\n color: #667eea;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .product-image img {\r\n width: 80% !important;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 15px;\r\n }\r\n\r\n .product-image::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 35%;\r\n height: 200%;\r\n background: linear-gradient(45deg, transparent, rgba(102, 126, 234, 0.1), transparent);\r\n transform: rotate(45deg);\r\n transition: all 0.6s ease;\r\n }\r\n\r\n .product-card:hover .product-image::before {\r\n animation: shimmer 1.5s ease-in-out;\r\n }\r\n\r\n @keyframes shimmer {\r\n 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }\r\n 100% { transform: translateX(100%) translateY(100%) rotate(45deg); }\r\n }\r\n\r\n .product-category {\r\n color: #667eea;\r\n font-size: 14px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .product-name {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n margin-bottom: 8px;\r\n color: #2d3748;\r\n }\r\n\r\n .product-description {\r\n color: #718096;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .product-specs {\r\n background: #f7fafc;\r\n padding: 12px;\r\n border-radius: 8px;\r\n margin-bottom: 15px;\r\n font-size: 12px;\r\n color: #4a5568;\r\n }\r\n\r\n .product-footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .product-price {\r\n font-size: 1.4rem;\r\n font-weight: 800;\r\n color:black;\r\n }\r\n\r\n .add-to-cart {\r\n background: #5624d0;\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n border-radius: 20px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .add-to-cart:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\r\n }\r\n\r\n .load-more {\r\n text-align: center;\r\n margin: 40px 0;\r\n }\r\n\r\n .load-more button {\r\n background: rgba(255, 255, 255, 0.9);\r\n color: #5624d0;\r\n border: 2px solid #5624d0;\r\n padding: 15px 40px;\r\n border-radius: 25px;\r\n cursor: pointer;\r\n font-size: 16px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .load-more button:hover {\r\n background: #5624d0;\r\n color: white;\r\n }\r\n\r\n .floating-cart {\r\n position: fixed;\r\n bottom: 30px;\r\n right: 30px;\r\n background: #667eea;\r\n color: white;\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);\r\n transition: all 0.3s ease;\r\n font-size: 24px;\r\n }\r\n\r\n .floating-cart:hover {\r\n transform: scale(1.1);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .search-filter-bar {\r\n padding: 20px;\r\n }\r\n \r\n .search-box {\r\n max-width: 100%;\r\n }\r\n\r\n .search-box input {\r\n padding: 16px 100px 16px 20px;\r\n font-size: 15px;\r\n }\r\n\r\n .search-btn {\r\n padding: 10px 20px;\r\n font-size: 13px;\r\n }\r\n\r\n .products-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n h1 {\r\n font-size: 2rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"search-filter-bar\">\r\n <div class=\"search-box\">\r\n <input type=\"text\" placeholder=\"Search for robotics parts...\" id=\"searchInput\">\r\n <button class=\"search-btn\" onclick=\"performSearch()\">Search<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n\r\n <div class=\"products-grid\" id=\"productsGrid\">\r\n \r\n <\/div>\r\n\r\n <div class=\"load-more\">\r\n <button onclick=\"loadMoreProducts()\">Load More Products<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"floating-cart\" onclick=\"toggleCart()\">\r\n \ud83d\uded2\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Sample robotics parts data\r\n const products = [\r\n {\r\n id: 1,\r\n name: \"Raspberry Pi Motherboard\",\r\n category: \"controllers\",\r\n price: 89.99 ,\r\n description: \"High-performance single-board computer with advanced processing capabilities\",\r\n specs: \"Quad-core ARM \u2022 4GB RAM \u2022 Wi-Fi \u2022 Bluetooth \u2022 GPIO pins \u2022 4K output\",\r\n image: \"https:\/\/enthira.mo.vc\/wp-content\/uploads\/2025\/08\/powerful-microchip-circuit-board-detailed-view-high-tech-innovation.png\"\r\n },\r\n {\r\n id: 2,\r\n name: \"Professional 3D Printer\",\r\n category: \"printers\",\r\n price:299.99 ,\r\n description: \"High-precision 3D printer for rapid prototyping and manufacturing\",\r\n specs: \"200x200x250mm build \u2022 0.1mm layer resolution \u2022 Heated bed \u2022 Auto-leveling\",\r\n image: \"https:\/\/enthira.mo.vc\/wp-content\/uploads\/2025\/08\/printing-abstract-form-scaled.jpg\"\r\n },\r\n {\r\n id: 3,\r\n name: \"HD Vision Camera Module\",\r\n category: \"sensors\",\r\n price:45.99 ,\r\n description: \"High-definition camera module for computer vision and robotics applications\",\r\n specs: \"1080p HD \u2022 30fps \u2022 Auto-focus \u2022 Low light performance \u2022 USB interface\",\r\n image: \"https:\/\/enthira.mo.vc\/wp-content\/uploads\/2025\/08\/10344528-scaled.png\"\r\n },\r\n {\r\n id: 4,\r\n name: \"Gaming Controller Pro\",\r\n category: \"controllers\",\r\n price: 69.99,\r\n description: \"Advanced wireless gaming controller with precision controls and haptic feedback\",\r\n specs: \"Wireless connectivity \u2022 Dual analog sticks \u2022 12-hour battery \u2022 RGB lighting \u2022 Programmable buttons\",\r\n image: \"https:\/\/enthira.mo.vc\/wp-content\/uploads\/2025\/08\/03june22_game_controller_icon_05-scaled.jpg\"\r\n },\r\n {\r\n id: 5,\r\n name: \"Smart Smoke & CO Detector\",\r\n category: \"sensors\",\r\n price: 34.99,\r\n description: \"Intelligent smoke and carbon monoxide detector with wireless connectivity and app alerts\",\r\n specs: \"Dual sensor technology \u2022 Wi-Fi enabled \u2022 10-year battery \u2022 Voice alerts \u2022 Mobile notifications \u2022 Easy installation\",\r\n image: \"https:\/\/enthira.mo.vc\/wp-content\/uploads\/2025\/08\/smoke-carbon-monoxide-alarm-isolated-white-background-scaled.jpg\"\r\n }\r\n ];\r\n\r\n let cart = [];\r\n let displayedProducts = 6;\r\n\r\n function renderProducts() {\r\n const grid = document.getElementById('productsGrid');\r\n \r\n const searchTerm = document.getElementById('searchInput').value.toLowerCase();\r\n const searchFiltered = products.filter(p => \r\n p.name.toLowerCase().includes(searchTerm) || \r\n p.description.toLowerCase().includes(searchTerm)\r\n );\r\n\r\n grid.innerHTML = '';\r\n \r\n searchFiltered.slice(0, displayedProducts).forEach(product => {\r\n const productCard = document.createElement('div');\r\n productCard.className = 'product-card';\r\n productCard.innerHTML = `\r\n <div class=\"product-image\">\r\n <img decoding=\"async\" src=\"${product.image}\" alt=\"${product.name}\" style=\"width: 100%; height: 100%; object-fit: cover; border-radius: 15px;\">\r\n <\/div>\r\n <div class=\"product-category\">${product.category}<\/div>\r\n <div class=\"product-name\">${product.name}<\/div>\r\n <div class=\"product-description\">${product.description}<\/div>\r\n <div class=\"product-specs\">${product.specs}<\/div>\r\n <div class=\"product-footer\">\r\n <div class=\"product-price\">${product.price}<\/div>\r\n <button class=\"add-to-cart\" onclick=\"addToCart(${product.id})\">Add to Cart<\/button>\r\n <\/div>\r\n `;\r\n grid.appendChild(productCard);\r\n });\r\n }\r\n\r\n function addToCart(productId) {\r\n const product = products.find(p => p.id === productId);\r\n const existingItem = cart.find(item => item.id === productId);\r\n \r\n if (existingItem) {\r\n existingItem.quantity += 1;\r\n } else {\r\n cart.push({...product, quantity: 1});\r\n }\r\n \r\n updateCartCount();\r\n \r\n \/\/ Show feedback\r\n const button = event.target;\r\n const originalText = button.textContent;\r\n button.textContent = 'Added!';\r\n button.style.background = '#48bb78';\r\n setTimeout(() => {\r\n button.textContent = originalText;\r\n button.style.background = '';\r\n }, 1000);\r\n }\r\n\r\n function updateCartCount() {\r\n const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);\r\n document.getElementById('cartCount').textContent = totalItems;\r\n }\r\n\r\n function toggleCart() {\r\n if (cart.length === 0) {\r\n alert('Your cart is empty!');\r\n return;\r\n }\r\n \r\n let cartSummary = 'Cart Contents:\\n\\n';\r\n let total = 0;\r\n \r\n cart.forEach(item => {\r\n cartSummary += `${item.name} - Qty: ${item.quantity} - $${(item.price * item.quantity).toFixed(2)}\\n`;\r\n total += item.price * item.quantity;\r\n });\r\n \r\n cartSummary += `\\nTotal: $${total.toFixed(2)}`;\r\n alert(cartSummary);\r\n }\r\n\r\n function loadMoreProducts() {\r\n displayedProducts += 3;\r\n renderProducts();\r\n }\r\n\r\n function performSearch() {\r\n displayedProducts = 6;\r\n renderProducts();\r\n }\r\n\r\n \/\/ Event listeners\r\n document.getElementById('searchInput').addEventListener('input', () => {\r\n displayedProducts = 6;\r\n renderProducts();\r\n });\r\n\r\n document.getElementById('searchInput').addEventListener('keypress', (e) => {\r\n if (e.key === 'Enter') {\r\n performSearch();\r\n }\r\n });\r\n\r\n \/\/ Initial render\r\n renderProducts();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>RoboTech Parts – Shop Search Load More Products \ud83d\uded2<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","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-143","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":71,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/143\/revisions"}],"predecessor-version":[{"id":593,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/143\/revisions\/593"}],"wp:attachment":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/media?parent=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n RoboTech Parts - Shop<\/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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: #f5f5f5;\r\n min-height: 100vh;\r\n color: #333;\r\n }\r\n\r\n .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n\r\n\r\n\r\n .search-filter-bar {\r\n background: transparent;\r\n padding: 0px 0;\r\n margin-bottom: 40px;\r\n display: flex;\r\n justify-content: center;\r\n margin-top: 20px;\r\n }\r\n\r\n .search-box {\r\n position: relative;\r\n width: 100%;\r\n max-width: 500px;\r\n background: rgba(255, 255, 255, 0.95);\r\n border-radius: 50px; \/* \u2705 rounded corners *\/\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); \/* \u2705 visible shadow *\/\r\n overflow: hidden; \/* \u2705 ensures children respect border-radius *\/\r\n display: flex;\r\n align-items: center;\r\n padding: 10px\r\n}\r\n\r\n\r\n .search-box input {\r\n width: 100%;\r\n padding: 20px 120px 20px 24px;\r\n background: rgba(255, 255, 255, 0.95);\r\n border: none;\r\n border-radius: 50px;\r\n font-size: 16px;\r\n outline: none;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), \r\n 0 2px 6px rgba(102, 126, 234, 0.2); \/* new effect *\/\r\n backdrop-filter: blur(10px);\r\n font-weight: 400;\r\n color: #374151;\r\n}\r\n\r\n\r\n .search-box input::placeholder {\r\n color: #9CA3AF;\r\n font-weight: 400;\r\n }\r\n\r\n .search-box input:focus {\r\n background: rgba(255, 255, 255, 1);\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), \r\n 0 10px 30px rgba(0, 0, 0, 0.1),\r\n 0 0 0 4px rgba(102, 126, 234, 0.1);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .search-btn {\r\n position: absolute;\r\n right: 8px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n border: none;\r\n border-radius: 50px;\r\n padding: 12px 24px;\r\n color: white;\r\n font-weight: 600;\r\n font-size: 14px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);\r\n }\r\n\r\n .search-btn:hover {\r\n background: linear-gradient(135deg, #5a67d8 0%, #6c5ce7 100%);\r\n transform: translateY(-50%) scale(1.05);\r\n box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);\r\n }\r\n\r\n .search-btn:active {\r\n transform: translateY(-50%) scale(0.98);\r\n }\r\n\r\n\r\n\r\n .filter-group {\r\n display: flex;\r\n gap: 15px;\r\n align-items: center;\r\n }\r\n\r\n .filter-btn {\r\n padding: 10px 20px;\r\n background: #f8f9fa;\r\n border: 2px solid #e1e5e9;\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-btn:hover, .filter-btn.active {\r\n background: #667eea;\r\n color: white;\r\n border-color: #667eea;\r\n }\r\n\r\n .cart-icon-corner {\r\n position: fixed;\r\n top: 30px;\r\n right: 30px;\r\n background: #667eea;\r\n color: white;\r\n padding: 12px 20px;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-weight: 600;\r\n box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);\r\n z-index: 1000;\r\n }\r\n\r\n .cart-icon-corner:hover {\r\n background: #5a67d8;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .cart-count {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n background: #ff4757;\r\n color: white;\r\n border-radius: 50%;\r\n width: 24px;\r\n height: 24px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 12px;\r\n font-weight: bold;\r\n }\r\n\r\n .products-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .product-card {\r\n background: rgba(255, 255, 255, 0.95);\r\n border-radius: 20px;\r\n padding: 25px;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n\r\n .product-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.15);\r\n }\r\n\r\n .product-image {\r\n width: 100%;\r\n height: 300px;\r\n background: linear-gradient(45deg, #f0f2f5, #e1e5e9);\r\n border-radius: 15px;\r\n margin-bottom: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 48px;\r\n color: #667eea;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .product-image img {\r\n width: 80% !important;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 15px;\r\n }\r\n\r\n .product-image::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 35%;\r\n height: 200%;\r\n background: linear-gradient(45deg, transparent, rgba(102, 126, 234, 0.1), transparent);\r\n transform: rotate(45deg);\r\n transition: all 0.6s ease;\r\n }\r\n\r\n .product-card:hover .product-image::before {\r\n animation: shimmer 1.5s ease-in-out;\r\n }\r\n\r\n @keyframes shimmer {\r\n 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }\r\n 100% { transform: translateX(100%) translateY(100%) rotate(45deg); }\r\n }\r\n\r\n .product-category {\r\n color: #667eea;\r\n font-size: 14px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .product-name {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n margin-bottom: 8px;\r\n color: #2d3748;\r\n }\r\n\r\n .product-description {\r\n color: #718096;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .product-specs {\r\n background: #f7fafc;\r\n padding: 12px;\r\n border-radius: 8px;\r\n margin-bottom: 15px;\r\n font-size: 12px;\r\n color: #4a5568;\r\n }\r\n\r\n .product-footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .product-price {\r\n font-size: 1.4rem;\r\n font-weight: 800;\r\n color:black;\r\n }\r\n\r\n .add-to-cart {\r\n background: #5624d0;\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n border-radius: 20px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .add-to-cart:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\r\n }\r\n\r\n .load-more {\r\n text-align: center;\r\n margin: 40px 0;\r\n }\r\n\r\n .load-more button {\r\n background: rgba(255, 255, 255, 0.9);\r\n color: #5624d0;\r\n border: 2px solid #5624d0;\r\n padding: 15px 40px;\r\n border-radius: 25px;\r\n cursor: pointer;\r\n font-size: 16px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .load-more button:hover {\r\n background: #5624d0;\r\n color: white;\r\n }\r\n\r\n .floating-cart {\r\n position: fixed;\r\n bottom: 30px;\r\n right: 30px;\r\n background: #667eea;\r\n color: white;\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);\r\n transition: all 0.3s ease;\r\n font-size: 24px;\r\n }\r\n\r\n .floating-cart:hover {\r\n transform: scale(1.1);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .search-filter-bar {\r\n padding: 20px;\r\n }\r\n \r\n .search-box {\r\n max-width: 100%;\r\n }\r\n\r\n .search-box input {\r\n padding: 16px 100px 16px 20px;\r\n font-size: 15px;\r\n }\r\n\r\n .search-btn {\r\n padding: 10px 20px;\r\n font-size: 13px;\r\n }\r\n\r\n .products-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n h1 {\r\n font-size: 2rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"search-filter-bar\">\r\n <div class=\"search-box\">\r\n <input type=\"text\" placeholder=\"Search for robotics parts...\" id=\"searchInput\">\r\n <button class=\"search-btn\" onclick=\"performSearch()\">Search<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n\r\n <div class=\"products-grid\" id=\"productsGrid\">\r\n \r\n <\/div>\r\n\r\n <div class=\"load-more\">\r\n <button onclick=\"loadMoreProducts()\">Load More Products<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"floating-cart\" onclick=\"toggleCart()\">\r\n \ud83d\uded2\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Sample robotics parts data\r\n const products = [\r\n {\r\n id: 1,\r\n name: \"Raspberry Pi Motherboard\",\r\n category: \"controllers\",\r\n price: 89.99 ,\r\n description: \"High-performance single-board computer with advanced processing capabilities\",\r\n specs: \"Quad-core ARM \u2022 4GB RAM \u2022 Wi-Fi \u2022 Bluetooth \u2022 GPIO pins \u2022 4K output\",\r\n image: \"https:\/\/enthira.mo.vc\/wp-content\/uploads\/2025\/08\/powerful-microchip-circuit-board-detailed-view-high-tech-innovation.png\"\r\n },\r\n {\r\n id: 2,\r\n name: \"Professional 3D Printer\",\r\n category: \"printers\",\r\n price:299.99 ,\r\n description: \"High-precision 3D printer for rapid prototyping and manufacturing\",\r\n specs: \"200x200x250mm build \u2022 0.1mm layer resolution \u2022 Heated bed \u2022 Auto-leveling\",\r\n image: \"https:\/\/enthira.mo.vc\/wp-content\/uploads\/2025\/08\/printing-abstract-form-scaled.jpg\"\r\n },\r\n {\r\n id: 3,\r\n name: \"HD Vision Camera Module\",\r\n category: \"sensors\",\r\n price:45.99 ,\r\n description: \"High-definition camera module for computer vision and robotics applications\",\r\n specs: \"1080p HD \u2022 30fps \u2022 Auto-focus \u2022 Low light performance \u2022 USB interface\",\r\n image: \"https:\/\/enthira.mo.vc\/wp-content\/uploads\/2025\/08\/10344528-scaled.png\"\r\n },\r\n {\r\n id: 4,\r\n name: \"Gaming Controller Pro\",\r\n category: \"controllers\",\r\n price: 69.99,\r\n description: \"Advanced wireless gaming controller with precision controls and haptic feedback\",\r\n specs: \"Wireless connectivity \u2022 Dual analog sticks \u2022 12-hour battery \u2022 RGB lighting \u2022 Programmable buttons\",\r\n image: \"https:\/\/enthira.mo.vc\/wp-content\/uploads\/2025\/08\/03june22_game_controller_icon_05-scaled.jpg\"\r\n },\r\n {\r\n id: 5,\r\n name: \"Smart Smoke & CO Detector\",\r\n category: \"sensors\",\r\n price: 34.99,\r\n description: \"Intelligent smoke and carbon monoxide detector with wireless connectivity and app alerts\",\r\n specs: \"Dual sensor technology \u2022 Wi-Fi enabled \u2022 10-year battery \u2022 Voice alerts \u2022 Mobile notifications \u2022 Easy installation\",\r\n image: \"https:\/\/enthira.mo.vc\/wp-content\/uploads\/2025\/08\/smoke-carbon-monoxide-alarm-isolated-white-background-scaled.jpg\"\r\n }\r\n ];\r\n\r\n let cart = [];\r\n let displayedProducts = 6;\r\n\r\n function renderProducts() {\r\n const grid = document.getElementById('productsGrid');\r\n \r\n const searchTerm = document.getElementById('searchInput').value.toLowerCase();\r\n const searchFiltered = products.filter(p => \r\n p.name.toLowerCase().includes(searchTerm) || \r\n p.description.toLowerCase().includes(searchTerm)\r\n );\r\n\r\n grid.innerHTML = '';\r\n \r\n searchFiltered.slice(0, displayedProducts).forEach(product => {\r\n const productCard = document.createElement('div');\r\n productCard.className = 'product-card';\r\n productCard.innerHTML = `\r\n <div class=\"product-image\">\r\n <img decoding=\"async\" src=\"${product.image}\" alt=\"${product.name}\" style=\"width: 100%; height: 100%; object-fit: cover; border-radius: 15px;\">\r\n <\/div>\r\n <div class=\"product-category\">${product.category}<\/div>\r\n <div class=\"product-name\">${product.name}<\/div>\r\n <div class=\"product-description\">${product.description}<\/div>\r\n <div class=\"product-specs\">${product.specs}<\/div>\r\n <div class=\"product-footer\">\r\n <div class=\"product-price\">${product.price}<\/div>\r\n <button class=\"add-to-cart\" onclick=\"addToCart(${product.id})\">Add to Cart<\/button>\r\n <\/div>\r\n `;\r\n grid.appendChild(productCard);\r\n });\r\n }\r\n\r\n function addToCart(productId) {\r\n const product = products.find(p => p.id === productId);\r\n const existingItem = cart.find(item => item.id === productId);\r\n \r\n if (existingItem) {\r\n existingItem.quantity += 1;\r\n } else {\r\n cart.push({...product, quantity: 1});\r\n }\r\n \r\n updateCartCount();\r\n \r\n \/\/ Show feedback\r\n const button = event.target;\r\n const originalText = button.textContent;\r\n button.textContent = 'Added!';\r\n button.style.background = '#48bb78';\r\n setTimeout(() => {\r\n button.textContent = originalText;\r\n button.style.background = '';\r\n }, 1000);\r\n }\r\n\r\n function updateCartCount() {\r\n const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);\r\n document.getElementById('cartCount').textContent = totalItems;\r\n }\r\n\r\n function toggleCart() {\r\n if (cart.length === 0) {\r\n alert('Your cart is empty!');\r\n return;\r\n }\r\n \r\n let cartSummary = 'Cart Contents:\\n\\n';\r\n let total = 0;\r\n \r\n cart.forEach(item => {\r\n cartSummary += `${item.name} - Qty: ${item.quantity} - $${(item.price * item.quantity).toFixed(2)}\\n`;\r\n total += item.price * item.quantity;\r\n });\r\n \r\n cartSummary += `\\nTotal: $${total.toFixed(2)}`;\r\n alert(cartSummary);\r\n }\r\n\r\n function loadMoreProducts() {\r\n displayedProducts += 3;\r\n renderProducts();\r\n }\r\n\r\n function performSearch() {\r\n displayedProducts = 6;\r\n renderProducts();\r\n }\r\n\r\n \/\/ Event listeners\r\n document.getElementById('searchInput').addEventListener('input', () => {\r\n displayedProducts = 6;\r\n renderProducts();\r\n });\r\n\r\n document.getElementById('searchInput').addEventListener('keypress', (e) => {\r\n if (e.key === 'Enter') {\r\n performSearch();\r\n }\r\n });\r\n\r\n \/\/ Initial render\r\n renderProducts();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>RoboTech Parts – Shop Search Load More Products \ud83d\uded2<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","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-143","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":71,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/143\/revisions"}],"predecessor-version":[{"id":593,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/143\/revisions\/593"}],"wp:attachment":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/media?parent=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}