{"product_id":"m5stack-faces-keyboard-panel-v3-0","title":"M5STACK Faces KeyBoard Panel v3.0","description":"\u003cstyle\u003e\n\/* ===== Scoped Description Style ===== *\/\n.product-description.rte {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  color: #2c2c2c;\n  line-height: 1.65;\n  font-size: 16px;\n}\n\n\/* ===== Headings ===== *\/\n.product-description.rte h2 {\n  font-size: 1.8em;\n  color: #0D47A1;\n  border-left: 4px solid #1f6fe5;\n  padding-left: 12px;\n  margin-top: 32px;\n  margin-bottom: 16px;\n}\n\n\/* ===== H3 Titles Optimization ===== *\/\n.product-description.rte h3 {\n  font-size: 1.4em;\n  color: #0D47A1;\n  margin-top: 24px;\n  margin-bottom: 12px;\n  font-weight: 500;\n  padding-bottom: 6px;\n  border-bottom: 2px solid #e6e6e6;\n}\n\n\/* ===== Paragraphs ===== *\/\n.product-description.rte p {\n  margin-bottom: 20px;\n  line-height: 1.8;\n  color: #4a4f57;\n  font-size: 16px;\n}\n\n\/* ===== Paragraph Images (only in description) ===== *\/\n.product-description.rte img {\n  display: block;\n  max-width: 100%;\n  height: auto;\n  margin: 24px auto;\n  border-radius: 12px;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);\n}\n\n\/* ===== Lists ===== *\/\n.product-description.rte ul {\n  padding-left: 20px;\n  margin-bottom: 16px;\n  list-style-type: disc;\n}\n.product-description.rte li {\n  margin-bottom: 6px;\n}\n\n\/* ===== Links ===== *\/\n.product-description.rte a {\n  color: #0288D1;\n  text-decoration: none;\n  transition: color 0.3s ease;\n}\n.product-description.rte a:hover {\n  color: #01579B;\n}\n\n\/* ===== M5Stack-style Spec Table ===== *\/\n.product-description.rte .table-container {\n  width: 100%;\n  margin: 24px 0;\n  overflow-x: auto;\n}\n.product-description.rte .table-container table {\n  width: 100%;\n  border-collapse: collapse;\n  font-family: inherit;\n  font-size: 14px;\n  color: #2c2f36;\n  background-color: #ffffff;\n  border-radius: 10px;\n  overflow: hidden;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);\n}\n.product-description.rte .table-container thead th {\n  background: #1f6fe5;\n  color: #ffffff;\n  padding: 14px 16px;\n  text-align: center;\n  font-weight: 600;\n  border: none;\n  vertical-align: middle;\n}\n.product-description.rte .table-container td {\n  padding: 14px 16px;\n  border-bottom: 1px solid #e6ebf2;\n  vertical-align: middle;\n}\n.product-description.rte .table-container tbody td:first-child {\n  width: 36%;\n  text-align: center;\n  font-weight: 500;\n  color: #4a4f57;\n  background-color: rgba(31, 111, 229, 0.02);\n}\n.product-description.rte .table-container tbody tr:nth-child(even) {\n  background-color: #f7f9fc;\n}\n@media (hover: hover) {\n  .product-description.rte .table-container tbody tr:hover {\n    background-color: #eef3ff;\n  }\n}\n\n\/* ===== Learn \u0026 Documents Button ===== *\/\n.product-description.rte #learn-and-documents-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 14px;\n  background-color: #1f6fe5;\n  color: #ffffff;\n  font-weight: 600;\n  border-radius: 6px;\n  margin-top: 8px;\n  text-decoration: none;\n  transition: background 0.3s ease;\n}\n.product-description.rte #learn-and-documents-btn:hover {\n  background-color: #1661c1;\n}\n\n\/* ===== Responsive Design for Smaller Screens (with table adjustments) ===== *\/\n@media screen and (max-width: 768px) {\n  .product-description.rte .table-container table,\n  .product-description.rte .table-container thead,\n  .product-description.rte .table-container tbody,\n  .product-description.rte .table-container th,\n  .product-description.rte .table-container td,\n  .product-description.rte .table-container tr {\n    display: block;\n    width: 100%;\n  }\n  .product-description.rte .table-container thead {\n    display: none;\n  }\n  .product-description.rte .table-container tbody tr {\n    padding: 12px 0;\n    border-bottom: 1px solid #e6ebf2;\n  }\n  .product-description.rte .table-container tbody td {\n    padding: 8px 16px;\n    border: none;\n    text-align: left;\n  }\n  .product-description.rte .table-container tbody td:first-child {\n    width: 100%;\n    background: none;\n    color: #1f6fe5;\n    font-weight: 600;\n    padding-top: 16px;\n  }\n  .product-description.rte .table-container tbody td:last-child {\n    padding-bottom: 16px;\n    color: #2c2f36;\n    line-height: 1.6;\n  }\n\n  \/* Ensure button appears correctly on mobile *\/\n  .product-description.rte #learn-and-documents-btn {\n    font-size: 14px;\n    padding: 8px 16px;\n  }\n}\n\u003c\/style\u003e\n\u003ch2 id=\"description\"\u003eDescription\u003c\/h2\u003e\n\u003cp\u003eFaces Keyboard3 is a keyboard input module designed for the Faces Bottom series. It uses a 35-key layout and supports multi-character input through key combinations, meeting common text input and shortcut control needs. The module integrates an STM32 MCU and communicates with the host through I2C and an interrupt pin, offering fast response and high integration.\u003c\/p\u003e\n\u003ch2 id=\"features\"\u003eFeatures\u003c\/h2\u003e\n\u003cul\u003e\n\u003cli\u003eBuilt-in STM32 MCU: STM32F030C8T6\u003c\/li\u003e\n\u003cli\u003eI2C communication interface\u003c\/li\u003e\n\u003cli\u003eKey layout: QWERTY keyboard\u003c\/li\u003e\n\u003cli\u003eInput status indicator: Blue LED x2\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch2 id=\"includes\"\u003eIncludes\u003c\/h2\u003e\n\u003cul\u003e\n\u003cli\u003e1x Faces Keyboard3\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch2 id=\"applications\"\u003eApplications\u003c\/h2\u003e\n\u003cul\u003e\n\u003cli\u003eHuman-machine input interaction\u003c\/li\u003e\n\u003cli\u003eParameter configuration and shortcut operations\u003c\/li\u003e\n\u003cli\u003eText input and menu control\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch2 id=\"specifications\"\u003eSpecifications\u003c\/h2\u003e\n\u003cdiv class=\"table-container\"\u003e\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eItem\u003c\/th\u003e\n\u003cth\u003eParameter\u003c\/th\u003e\n\u003c\/tr\u003e\n\u003c\/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003eMCU\u003c\/td\u003e\n\u003ctd\u003eSTM32F030C8T6\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eCommunication Interface\u003c\/td\u003e\n\u003ctd\u003eI2C @ 0x08\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eKey Layout\u003c\/td\u003e\n\u003ctd\u003eQWERTY keyboard\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eNumber of Keys\u003c\/td\u003e\n\u003ctd\u003e35 keys\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eInput Status Indicator\u003c\/td\u003e\n\u003ctd\u003eBlue LED x2\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003c\/tbody\u003e\n\u003c\/table\u003e\n\u003ch2\u003eLearn and Documents\u003c\/h2\u003e\n\u003ca href=\"https:\/\/docs.m5stack.com\/en\/products\/sku\/A003-V3\" target=\"_blank\" id=\"learn-and-documents-btn\"\u003e\n  → DOCUMENTS\n\u003c\/a\u003e\n\u003c\/div\u003e","brand":"m5stack-store","offers":[{"title":"Default Title","offer_id":50271482806529,"sku":"A003-V3","price":12.5,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0056\/7689\/2250\/files\/A003-V3_M5STACK_Faces_KeyBoard_Panel_v3.0_1.webp?v=1788432372","url":"https:\/\/shop.m5stack.com\/products\/m5stack-faces-keyboard-panel-v3-0","provider":"M5Stack-Store","version":"1.0","type":"link"}