{"product_id":"m5stack-faces-calculator-panel-v3-0","title":"M5STACK Faces Calculator 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 Calculator3 is a calculator input panel designed for the Faces Bottom series. It features a 4 x 5 key layout covering commonly used numbers, operators, and function keys, making it suitable for building interactive terminals with local calculation capabilities. The panel communicates with the host via I2C and can provide numeric input, basic calculations, and calculation result display capabilities.\u003c\/p\u003e\n\u003ch2 id=\"features\"\u003eFeatures\u003c\/h2\u003e\n\u003cul\u003e\n\u003cli\u003eBuilt-in STM32 MCU: STM32G031G8U6\u003c\/li\u003e\n\u003cli\u003eI2C communication interface\u003c\/li\u003e\n\u003cli\u003eCalculator key layout\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch2 id=\"includes\"\u003eIncludes\u003c\/h2\u003e\n\u003cul\u003e\n\u003cli\u003e1x Faces Calculator3\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch2 id=\"applications\"\u003eApplications\u003c\/h2\u003e\n\u003cul\u003e\n\u003cli\u003eNumeric input and calculation interaction\u003c\/li\u003e\n\u003cli\u003eLocal calculation and parameter entry\u003c\/li\u003e\n\u003cli\u003eTeaching demonstrations and prototype validation projects\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\u003eSpecification\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\u003eSTM32G031G8U6\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\u003e4 x 5 calculator keys\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eNumber of Keys\u003c\/td\u003e\n\u003ctd\u003e20 keys\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eStandby Power (Panel Only)\u003c\/td\u003e\n\u003ctd\u003e3.3V@1.79mA\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eProduct Size\u003c\/td\u003e\n\u003ctd\u003exxx\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eProduct Weight\u003c\/td\u003e\n\u003ctd\u003e20.7g\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ePackage Size\u003c\/td\u003e\n\u003ctd\u003e56.0 x 59.0 x 19.0mm\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eGross Weight\u003c\/td\u003e\n\u003ctd\u003e25.5g\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003c\/tbody\u003e\n\u003c\/table\u003e\n\u003ch2 id=\"product-comparison\"\u003eProduct Comparison\u003c\/h2\u003e\n\u003cdiv class=\"compare-table-container\"\u003e\n\u003cdiv class=\"table-container\"\u003e\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eProduct Comparison\u003c\/th\u003e\n\u003cth\u003eFaces Calculator3 \u003c\/th\u003e\n\u003cth\u003eFaces Calculator \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\u003eSTM32G031G8U6\u003c\/td\u003e\n\u003ctd\u003eMEGA328\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\/A005-V3\" target=\"_blank\" id=\"learn-and-documents-btn\"\u003e\n  → DOCUMENTS\n\u003c\/a\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"m5stack-store","offers":[{"title":"Default Title","offer_id":50271427690753,"sku":"A005-V3","price":7.95,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0056\/7689\/2250\/files\/A005-V3_M5Stack_Faces_Calculator_Panel_V3.0_1.webp?v=1788431624","url":"https:\/\/shop.m5stack.com\/products\/m5stack-faces-calculator-panel-v3-0","provider":"M5Stack-Store","version":"1.0","type":"link"}