From 7b2b6d75e0824ccb6577a34042e9447bf00fa82f Mon Sep 17 00:00:00 2001
From: shaoxiang <1026025056@qq.com>
Date: Fri, 16 Aug 2019 10:33:04 +0800
Subject: [PATCH] create PROTO PLUS Product page

---
 docs/assets/css/main.css         | 116 ++++++++++++++++++++++++++++++-
 docs/en/hat/hat-adc.md           |   2 +-
 docs/en/hat/hat-beetlec.md       |   2 +-
 docs/en/hat/hat-dac.md           |   2 +-
 docs/en/hat/hat-env.md           |   2 +-
 docs/en/hat/hat-ncir.md          |   4 +-
 docs/en/hat/hat-pir.md           |   2 +-
 docs/en/hat/hat-proto-plus.md    |  58 ++++++++++++++++
 docs/en/hat/hat-proto.md         |   4 +-
 docs/en/hat/hat-rs485.md         |   2 +-
 docs/en/hat/hat-spk.md           |   4 +-
 docs/en/hat/hat-thermal.md       |   2 +-
 docs/index.md                    |   2 +-
 docs/zh_CN/api.md                |  39 ++++++++++-
 docs/zh_CN/hat/hat-adc.md        |   2 +-
 docs/zh_CN/hat/hat-beetlec.md    |   4 +-
 docs/zh_CN/hat/hat-dac.md        |   2 +-
 docs/zh_CN/hat/hat-env.md        |   2 +-
 docs/zh_CN/hat/hat-ncir.md       |   2 +-
 docs/zh_CN/hat/hat-pir.md        |   2 +-
 docs/zh_CN/hat/hat-proto-plus.md |  57 +++++++++++++++
 docs/zh_CN/hat/hat-proto.md      |   8 +--
 docs/zh_CN/hat/hat-rs485.md      |   4 +-
 docs/zh_CN/hat/hat-spk.md        |   2 +-
 docs/zh_CN/hat/hat-thermal.md    |   4 +-
 25 files changed, 298 insertions(+), 32 deletions(-)
 create mode 100644 docs/en/hat/hat-proto-plus.md
 create mode 100644 docs/zh_CN/hat/hat-proto-plus.md

diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
index 5927c9dc..8756e942 100644
--- a/docs/assets/css/main.css
+++ b/docs/assets/css/main.css
@@ -499,4 +499,118 @@ div.card-img-overlay:hover {
 
 .table_center tr{
     text-align:center;
-}
\ No newline at end of file
+}
+
+
+/* Table Styles */
+
+.table-wrapper{
+    /* margin: 10px 70px 70px; */
+    box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.2 );
+}
+
+.fl-table {
+    border-radius: 5px;
+    font-size: 12px;
+    font-weight: normal;
+    border: none;
+    border-collapse: collapse;
+    width: 100%;
+    max-width: 100%;
+    white-space: nowrap;
+    background-color: white;
+}
+
+.fl-table td, .fl-table th {
+    text-align: center;
+    padding: 8px;
+}
+
+.fl-table td {
+    border-right: 1px solid #f8f8f8;
+    font-size: 12px;
+}
+
+.fl-table thead th {
+    color: #ffffff;
+    background: #4FC3A1;
+}
+
+
+.fl-table thead th:nth-child(odd) {
+    color: #ffffff;
+    background: #324960;
+}
+
+.fl-table tr:nth-child(even) {
+    background: #F8F8F8;
+}
+
+/* Responsive */
+
+@media screen and (max-width: 768px) {
+    .fl-table {
+        display: block !important;
+        width: 100%;
+        overflow-x: auto;
+    }
+    .table-wrapper:before{
+        content: "Scroll horizontally >";
+        display: block;
+        text-align: right;
+        font-size: 11px;
+        color: white;
+        padding: 0 0 10px;
+    }
+    .fl-table thead, .fl-table tbody, .fl-table thead th {
+        display: block;
+    }
+    .fl-table thead th:last-child{
+        border-bottom: none;
+    }
+    .fl-table thead {
+        float: left;
+        display: block !important;
+    }
+    .fl-table tbody {
+        width: auto;
+        position: relative;
+        overflow-x: auto;
+    }
+    .fl-table td, .fl-table th {
+        padding: 20px .625em .625em .625em;
+        height: 60px;
+        vertical-align: middle;
+        box-sizing: border-box;
+        overflow-x: hidden;
+        overflow-y: auto;
+        width: 120px;
+        font-size: 13px;
+        text-overflow: ellipsis;
+    }
+    
+    .fl-table thead th {
+        text-align: left;
+        border-bottom: 1px solid #f7f7f9;
+    }
+    .fl-table tbody tr {
+        display: table-cell !important;
+    }
+    .fl-table tbody tr:nth-child(odd) {
+        background: none;
+    }
+    .fl-table tr:nth-child(even) {
+        background: transparent;
+    }
+    .fl-table tr td:nth-child(odd) {
+        background: #F8F8F8;
+        border-right: 1px solid #E6E4E4;
+    }
+    .fl-table tr td:nth-child(even) {
+        border-right: 1px solid #E6E4E4;
+    }
+    .fl-table tbody td {
+        display: block;
+        text-align: center;
+    }
+}
diff --git a/docs/en/hat/hat-adc.md b/docs/en/hat/hat-adc.md
index cd6506ff..cfcad324 100644
--- a/docs/en/hat/hat-adc.md
+++ b/docs/en/hat/hat-adc.md
@@ -1,4 +1,4 @@
-# Hat ADC {docsify-ignore-all}
+# M5StickC ADC HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\adc_hat\adc_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\adc_hat\adc_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\adc_hat\adc_hat_03.jpg" width="30%" height="30%">
 
diff --git a/docs/en/hat/hat-beetlec.md b/docs/en/hat/hat-beetlec.md
index 5fcbcd27..7acd7c01 100644
--- a/docs/en/hat/hat-beetlec.md
+++ b/docs/en/hat/hat-beetlec.md
@@ -1,4 +1,4 @@
-# Beetlec {docsify-ignore-all}
+# M5StickC BeetleC {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\beetlec_hat\beetlec_hat_01.jpg" width="30%" height="30%"> <img src="assets\img\product_pics\hat\beetlec_hat\beetlec_hat_02.jpg" width="30%" height="30%">
 
diff --git a/docs/en/hat/hat-dac.md b/docs/en/hat/hat-dac.md
index 551e2c44..aafc4400 100644
--- a/docs/en/hat/hat-dac.md
+++ b/docs/en/hat/hat-dac.md
@@ -1,4 +1,4 @@
-# Hat DAC {docsify-ignore-all}
+# M5StickC DAC HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\dac_hat\dac_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_03.jpg" width="30%" height="30%">
 
diff --git a/docs/en/hat/hat-env.md b/docs/en/hat/hat-env.md
index 237af664..73e3b3c2 100644
--- a/docs/en/hat/hat-env.md
+++ b/docs/en/hat/hat-env.md
@@ -1,4 +1,4 @@
-# Hat ENV {docsify-ignore-all}
+# M5StickC ENV HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\env_hat\env_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\env_hat\env_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\env_hat\env_hat_03.jpg" width="30%" height="30%">
 
diff --git a/docs/en/hat/hat-ncir.md b/docs/en/hat/hat-ncir.md
index e2545266..729ad356 100644
--- a/docs/en/hat/hat-ncir.md
+++ b/docs/en/hat/hat-ncir.md
@@ -1,4 +1,4 @@
-# Hat NCIR {docsify-ignore-all}
+# M5StickC NCIR HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_01.jpg" width="30%" height="30%">
 <img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_02.jpg" width="30%" height="30%">
@@ -10,7 +10,7 @@
 
 ## Description
 
-**NCIR_HAT**  is an M5StickC compatible infrared sensor. Same as M5Unit NCIR, this stickc HAT module Integrates MLX90614 which can be used to measure the surface temperature of a human body or other object. Now that it has a cover of a case of stickc HAT, you can pretty much move all the implementations to stickc-based controller, featured with tiny, low-cost and highly-productization.<br>
+**NCIR HAT**  is an M5StickC compatible infrared sensor. Same as M5Unit NCIR, this stickc HAT module Integrates MLX90614 which can be used to measure the surface temperature of a human body or other object. Now that it has a cover of a case of stickc HAT, you can pretty much move all the implementations to stickc-based controller, featured with tiny, low-cost and highly-productization.<br>
 
 Unlike most temperature sensors, this sensor measures infrared light bouncing off of remote objects so it can sense temperature without having to touch them physically. Simply point the sensor towards what you want to measure and it will detect the temperature by absorbing IR waves emitted. Because it doesn't have to touch the object it's measuring, it can sense a wider range of temperatures than most digital sensors! It takes the measurement over a 90-degree field of view so it can be handy for determining the average temperature of an area.<br>
 
diff --git a/docs/en/hat/hat-pir.md b/docs/en/hat/hat-pir.md
index bbe75c19..c2dc6620 100644
--- a/docs/en/hat/hat-pir.md
+++ b/docs/en/hat/hat-pir.md
@@ -1,4 +1,4 @@
-# Unit PIR {docsify-ignore-all}
+# M5StickC PIR HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\pir_hat\pir_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_03.jpg" width="30%" height="30%">
 
diff --git a/docs/en/hat/hat-proto-plus.md b/docs/en/hat/hat-proto-plus.md
new file mode 100644
index 00000000..7525d575
--- /dev/null
+++ b/docs/en/hat/hat-proto-plus.md
@@ -0,0 +1,58 @@
+# M5StickC PROTO PLUS HAT {docsify-ignore-all}
+
+<!-- <img src="assets\img\product_pics\hat\proto_hat\hat_proto_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_03.jpg" width="30%" height="30%"> -->
+
+
+***
+
+:memo:**[Description](#Description)**&nbsp;&nbsp;
+
+## Description
+
+**PROTO PLUS HAT** is a universal board compatible with M5SticKC. Combined with the matching 8 pin header, all the expansion interfaces on the top of M5StickC can be connected to the universal board, so that users can freely design the circuit on the board. The 90° pin header allows the versatile board to be spliced to the M5StatchC in a variety of angles. If you plan to add a simple circuit design to your project and hope to save space by changing the board splicing, HAT PROTO PLUS Would be a good choice.
+
+
+## Product Features
+
+- M5StickC Compatible
+- Hole Size: 0.039" 1mm (CNC Drilled)
+- Hole Pitch: 0.1 in - (2.54 mm)
+- Entire Hole Quantity: 168 Holes
+
+## Include
+
+- 1x PROTO PLUS HAT
+- 1x 8 pin（90°）
+
+## Application
+
+- Prototyping 
+
+
+<!-- 
+## Schematic
+
+<img src="assets\img\product_pics\hat\proto_hat\hat_proto_04.jpg" width="50%" height="50%">
+
+## Links
+
+- **[Official Channel](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
+
+- **[Official forum](http://forum.m5stack.com/)**
+
+
+## Example
+- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV)** -->
+
+
+## Video
+
+**Demo**
+
+<video width="500" height="500" controls>
+    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/PROTO_PLUS_HAT.mp4" type="video/mp4">
+</video>
+
+
+
+
diff --git a/docs/en/hat/hat-proto.md b/docs/en/hat/hat-proto.md
index 4cb4ee22..f5910d35 100644
--- a/docs/en/hat/hat-proto.md
+++ b/docs/en/hat/hat-proto.md
@@ -1,4 +1,4 @@
-# Hat PROTO {docsify-ignore-all}
+# M5StickC PROTO HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\proto_hat\hat_proto_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_03.jpg" width="30%" height="30%">
 
@@ -9,7 +9,7 @@
 
 ## Description
 
-**PROTO_HAT** is a HAT size of universal prototyping board. You can have the total freedom to make your own project as you want it, with prototyping boards that allow laying out the customized circuit to interact with stickC port on top.<br>
+**PROTO HAT** is a HAT size of universal prototyping board. You can have the total freedom to make your own project as you want it, with prototyping boards that allow laying out the customized circuit to interact with stickC port on top.<br>
 
 PINs on top of the device is ported out for building more connections.<br>
 
diff --git a/docs/en/hat/hat-rs485.md b/docs/en/hat/hat-rs485.md
index 02c009f7..35b3544f 100644
--- a/docs/en/hat/hat-rs485.md
+++ b/docs/en/hat/hat-rs485.md
@@ -1,4 +1,4 @@
-# Hat RS485 {docsify-ignore-all}
+# M5StickC RS485 HAT {docsify-ignore-all}
 
 
 <img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_03.jpg" width="30%" height="30%">
diff --git a/docs/en/hat/hat-spk.md b/docs/en/hat/hat-spk.md
index f2779ea2..109a4702 100644
--- a/docs/en/hat/hat-spk.md
+++ b/docs/en/hat/hat-spk.md
@@ -1,4 +1,4 @@
-# Unit PIR {docsify-ignore-all}
+# M5StickC SPK HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\spk_hat\spk_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_03.jpg" width="30%" height="30%">
 
@@ -8,7 +8,7 @@
 
 ## Description
 
-**Hat SPK** is an M5StickC compatible speaker, integrated PAM8303 amplifier (3w single channel type D power amplifier), High PSRR and differential inputs eliminate noise and rf interference, thus it has the characteristics of simple functions and high audio reproduction.
+**SPK HAT** is an M5StickC compatible speaker, integrated PAM8303 amplifier (3w single channel type D power amplifier), High PSRR and differential inputs eliminate noise and rf interference, thus it has the characteristics of simple functions and high audio reproduction.
 
 ## Product Feature
 
diff --git a/docs/en/hat/hat-thermal.md b/docs/en/hat/hat-thermal.md
index 439c6c97..8427f4a7 100644
--- a/docs/en/hat/hat-thermal.md
+++ b/docs/en/hat/hat-thermal.md
@@ -1,4 +1,4 @@
-# Hat THERMAL {docsify-ignore-all}
+# M5StickC THERMAL HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_03.jpg" width="30%" height="30%">
 
diff --git a/docs/index.md b/docs/index.md
index 6117f6fc..45eb7e22 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -827,7 +827,7 @@
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/beetlec_hat_01.jpg">
   <p class="item-title">BeetleC</p>
  </a>
-</div> 
+</div>
 
 
 **LED class**
diff --git a/docs/zh_CN/api.md b/docs/zh_CN/api.md
index 57d4eedd..1c6a94ff 100644
--- a/docs/zh_CN/api.md
+++ b/docs/zh_CN/api.md
@@ -41,4 +41,41 @@
 
 <!-- |**[麦克风](zh_CN/api/spm1423_m5stickc)** | **[LED](zh_CN/api/led_m5stickc)** |
 
-|**[按键](zh_CN/api/buttom_m5stickc)** | **[红外发射](zh_CN/api/led_m5stickc)** | -->
\ No newline at end of file
+|**[按键](zh_CN/api/buttom_m5stickc)** | **[红外发射](zh_CN/api/led_m5stickc)** | -->
+
+
+
+
+<!-- 
+<div class="table-wrapper">
+    <table class="fl-table">
+        <thead>
+        <tr>
+            <th>Header 1</th>
+            <th>Header 2</th>
+            <th>Header 3</th>
+            <th>Header 4</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>1</td>
+            <td>Content</td>
+            <td>Content</td>
+            <td>Content</td>
+        </tr>
+        <tr>
+            <td>2</td>
+            <td>Content</td>
+            <td>Content</td>
+            <td>Content</td>
+        </tr>
+        <tr>
+            <td>3</td>
+            <td>Content</td>
+            <td>Content</td>
+            <td>Content</td>
+        </tr>
+        <tbody>
+    </table>
+</div> -->
\ No newline at end of file
diff --git a/docs/zh_CN/hat/hat-adc.md b/docs/zh_CN/hat/hat-adc.md
index e38069d7..00bf8049 100644
--- a/docs/zh_CN/hat/hat-adc.md
+++ b/docs/zh_CN/hat/hat-adc.md
@@ -1,4 +1,4 @@
-# Hat ADC {docsify-ignore-all}
+# M5StickC ADC HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\adc_hat\adc_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\adc_hat\adc_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\adc_hat\adc_hat_03.jpg" width="30%" height="30%">
 
diff --git a/docs/zh_CN/hat/hat-beetlec.md b/docs/zh_CN/hat/hat-beetlec.md
index 83bc7765..e60a4896 100644
--- a/docs/zh_CN/hat/hat-beetlec.md
+++ b/docs/zh_CN/hat/hat-beetlec.md
@@ -1,4 +1,4 @@
-# BeetleC  {docsify-ignore-all}
+# M5StickC BeetleC {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\beetlec_hat\beetlec_hat_01.jpg" width="30%" height="30%"> <img src="assets\img\product_pics\hat\beetlec_hat\beetlec_hat_02.jpg" width="30%" height="30%">
 
@@ -7,7 +7,7 @@
 
 ## 描述
 
-**Beetlec**是一款迷你机器人小车底座，采用了双电机驱动器和7个可编程RGB LED，配合极其简洁的外观设计和板载ESP32的M5StickC小巧主控，使其成为一款独一无二的迷你机器人小车.
+**BeetleC**是一款迷你机器人小车底座，采用了双电机驱动器和7个可编程RGB LED，配合极其简洁的外观设计和板载ESP32的M5StickC小巧主控，使其成为一款独一无二的迷你机器人小车.
 
 Beetlec底座需要结合M5StickC控制器使用.在底座上，配备了两个由STM32F030驱动的直流减速电机，电路连接至M5StickC的顶部插槽，最终实现控制.
 
diff --git a/docs/zh_CN/hat/hat-dac.md b/docs/zh_CN/hat/hat-dac.md
index 3afe6c89..25f7c463 100644
--- a/docs/zh_CN/hat/hat-dac.md
+++ b/docs/zh_CN/hat/hat-dac.md
@@ -1,4 +1,4 @@
-# Hat DAC {docsify-ignore-all}
+# M5StickC DAC HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\dac_hat\dac_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_03.jpg" width="30%" height="30%">
 
diff --git a/docs/zh_CN/hat/hat-env.md b/docs/zh_CN/hat/hat-env.md
index 78cbbd02..6475a4a4 100644
--- a/docs/zh_CN/hat/hat-env.md
+++ b/docs/zh_CN/hat/hat-env.md
@@ -1,4 +1,4 @@
-# Hat ENV {docsify-ignore-all}
+# M5StickC ENV HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\env_hat\env_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\env_hat\env_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\env_hat\env_hat_03.jpg" width="30%" height="30%">
 
diff --git a/docs/zh_CN/hat/hat-ncir.md b/docs/zh_CN/hat/hat-ncir.md
index 9df68099..482ee21b 100644
--- a/docs/zh_CN/hat/hat-ncir.md
+++ b/docs/zh_CN/hat/hat-ncir.md
@@ -1,4 +1,4 @@
-# Hat NCIR {docsify-ignore-all}
+# M5StickC NCIR HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_03.jpg" width="30%" height="30%">
 
diff --git a/docs/zh_CN/hat/hat-pir.md b/docs/zh_CN/hat/hat-pir.md
index b3b1fde6..7aab715d 100644
--- a/docs/zh_CN/hat/hat-pir.md
+++ b/docs/zh_CN/hat/hat-pir.md
@@ -1,4 +1,4 @@
-# Hat PIR {docsify-ignore-all}
+# M5StickC PIR HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\pir_hat\pir_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_03.jpg" width="30%" height="30%">
 
diff --git a/docs/zh_CN/hat/hat-proto-plus.md b/docs/zh_CN/hat/hat-proto-plus.md
new file mode 100644
index 00000000..82f48cf6
--- /dev/null
+++ b/docs/zh_CN/hat/hat-proto-plus.md
@@ -0,0 +1,57 @@
+# M5StickC PROTO PLUS HAT {docsify-ignore-all}
+
+<!-- <img src="assets\img\product_pics\hat\proto_hat\hat_proto_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_03.jpg" width="30%" height="30%"> -->
+
+***
+
+:memo:**[描述](#描述)**&nbsp;&nbsp;&nbsp;
+
+## 描述
+
+**PROTO PLUS HAT** 是一款兼容M5SticKC的万能板.结合配套的8 pin 排针能够将M5StickC顶部的拓展接口全部连接至万能板内，使得用户能可以自由的在板上进行电路设计. 90°形状的排针能够使万能板以多种角度与M5StickC进行拼接.如果你打算为你的项目添加简单的电路设计并希望通过改变电路板的拼接方式以达到节省空间的目的, HAT PROTO PLUS 会是一个不错的选择.
+
+
+## 产品特性
+
+- 兼容M5StickC
+- 孔尺寸: 0.039" 1mm (CNC工艺)
+- 孔间距: 0.1 in - (2.54 mm)
+- 板孔数量: 168 Holes
+
+## 重量尺寸
+
+- 单品尺寸：54mm x 23.5mm x 1mm
+- 单品重量：2g
+
+
+## 包含
+
+- 1x PROTO PLUS HAT
+- 1x 8 pin 排针（90°）
+
+## 应用
+
+- 电路原型设计
+
+<!-- 
+## 原理图
+
+- **[原理图](https://github.com/m5stack/M5-Schematic/blob/master/Hat/StickHat_PROTO.pdf)**
+
+<img src="assets\img\product_pics\hat\proto_hat\hat_proto_04.jpg" width="50%" height="50%">
+
+## 相关链接
+
+- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
+
+- **[官方论坛](http://forum.m5stack.com/)**
+
+## 例程
+
+- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV)** -->
+
+## 相关视频
+
+<video width="500" height="500" controls>
+    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/PROTO_PLUS_HAT.mp4" type="video/mp4">
+</video>
\ No newline at end of file
diff --git a/docs/zh_CN/hat/hat-proto.md b/docs/zh_CN/hat/hat-proto.md
index 59b30d15..b4c4286f 100644
--- a/docs/zh_CN/hat/hat-proto.md
+++ b/docs/zh_CN/hat/hat-proto.md
@@ -1,4 +1,4 @@
-# Hat Proto {docsify-ignore-all}
+# M5StickC PROTO HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\proto_hat\hat_proto_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_03.jpg" width="30%" height="30%">
 
@@ -8,16 +8,16 @@
 
 ## 描述
 
-**PROTO Hat** 是一款兼容M5SticKC的万能板,你可以自由的在板上进行电路设计.如果你打算为你的设计添加简单的电路并为其添加可靠的保护外壳, Hat PROTO 是一个不错的选择.
+**PROTO HAT** 是一款兼容M5SticKC的万能板,你可以自由的在板上进行电路设计.如果你打算为你的设计添加简单的电路并为其添加可靠的保护外壳, Hat PROTO 是一个不错的选择.
 
 <img src="assets\img\product_pics\hat\proto_hat\hat_proto_05.jpg" width="50%" height="50%">
 
 ## 产品特性
 
 - 兼容M5StickC
-- 孔尺寸: 0.039" 1mm (CNC Drilled)
+- 孔尺寸: 0.039" 1mm (CNC工艺)
 - 孔间距: 0.1 in - (2.54 mm)
-- 板孔数量: x Holes
+- 板孔数量: 40 Holes
 
 
 ## 包含
diff --git a/docs/zh_CN/hat/hat-rs485.md b/docs/zh_CN/hat/hat-rs485.md
index d5ccd818..bb7b6f31 100644
--- a/docs/zh_CN/hat/hat-rs485.md
+++ b/docs/zh_CN/hat/hat-rs485.md
@@ -1,4 +1,4 @@
-# Hat RS485 {docsify-ignore-all}
+# M5StickC RS485 HAT {docsify-ignore-all}
 
 
 <img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_03.jpg" width="30%" height="30%">
@@ -9,7 +9,7 @@
 
 ## 描述
 
-**RS485-HAT** 是一款兼容M5SticKC的RS485转换器.内部集成SP485EEN，主要部分由一个485自动收发器电路和一个DC-DC降压电路组成（可以将输入电压降至5V）
+**RS485 HAT** 是一款兼容M5SticKC的RS485转换器.内部集成SP485EEN，主要部分由一个485自动收发器电路和一个DC-DC降压电路组成（可以将输入电压降至5V）
 <br><br>
 RS485是一种标准，用于定义串行通信系统的驱动器和接收器的电气特性，广泛用于工业领域。 支持多点系统. 
 <br><br>
diff --git a/docs/zh_CN/hat/hat-spk.md b/docs/zh_CN/hat/hat-spk.md
index 51154c98..5bee7972 100644
--- a/docs/zh_CN/hat/hat-spk.md
+++ b/docs/zh_CN/hat/hat-spk.md
@@ -1,4 +1,4 @@
-# Hat SPK {docsify-ignore-all}
+# M5StickC SPK HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\spk_hat\spk_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_03.jpg" width="30%" height="30%">
 
diff --git a/docs/zh_CN/hat/hat-thermal.md b/docs/zh_CN/hat/hat-thermal.md
index 867cc654..45bd9afd 100644
--- a/docs/zh_CN/hat/hat-thermal.md
+++ b/docs/zh_CN/hat/hat-thermal.md
@@ -1,4 +1,4 @@
-# Hat Thermal {docsify-ignore-all}
+# M5StickC THERMAL HAT {docsify-ignore-all}
 
 <img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_03.jpg" width="30%" height="30%">
 
@@ -8,7 +8,7 @@
 
 ## 描述
 
-**Thermal Hat**是一款兼容M5StickC的人体红外热成像.内置**MLX90640**热电堆传感器,能够测量物体表面温度.并通过由表面温度形成的温度梯度，生成热成像图片.(图片分辨率为**32 x 24**)
+**THERMAL HAT**是一款兼容M5StickC的人体红外热成像.内置**MLX90640**热电堆传感器,能够测量物体表面温度.并通过由表面温度形成的温度梯度，生成热成像图片.(图片分辨率为**32 x 24**)
 
 **MLX90640** 红外（IR）传感器阵列具备了高分辨率与在恶劣环境中可靠工作的能力.与昂贵的高端热像仪相比，Hat-Thermal是一个高性价比的替代方案.相对一般的微测辐射热计，该传感器优势在于，不需要频繁重复校准,从而确保了检测的连续性并降低了系统维护成本.视场角提供广角版（110°×75°）.