From c1c63ab01c7bd5a33c124d6049c7777c292ca640 Mon Sep 17 00:00:00 2001
From: shaoxiang <1026025056@qq.com>
Date: Thu, 10 Oct 2019 16:59:42 +0800
Subject: [PATCH] add scrollFunc and product search

---
 docs/assets/css/main.css |  140 ++--
 docs/index.html          |   78 +-
 docs/index.md            |  225 ++++--
 docs/zh_CN/README.md     | 1555 ++++++++++++++++++++------------------
 4 files changed, 1124 insertions(+), 874 deletions(-)

diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
index 88ed9a6a..fc5999f6 100644
--- a/docs/assets/css/main.css
+++ b/docs/assets/css/main.css
@@ -16,19 +16,6 @@
 }
 
 
-/* en */
-
-
-/* body[data-page="index.md"] article.markdown-section {
-    max-width: 80%;
-    margin-top: 50px;
-} */
-
-
-/* body[data-page="index.md"] article.markdown-section {
-    max-width: 80%;
-    margin-top: 50px;
-} */
 
 body[data-page="zh_CN/uiflow/uiflow_home_page.md"] article.markdown-section {
     max-width: 100%;
@@ -108,23 +95,6 @@ body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
 }
 
 
-/* zh_CN */
-
-
-/* body[data-page="zh_CN/README.md"] article.markdown-section {
-    max-width: 80%;
-    margin-top: 50px;
-}
-
-body[data-page="zh_CN/README.md"] article.markdown-section .item {
-    width: 150px;
-    margin-right: 10px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    display: inline-block;
-    position: relative;
-    transition: box-shadow 0.3s;
-} */
 
 .item a {
     color: black;
@@ -136,12 +106,6 @@ body[data-page="zh_CN/README.md"] article.markdown-section .item {
 }
 
 
-/* body[data-page="zh_CN/README.md"] article.markdown-section p.item-title {
-    text-align: center;
-    margin-top: 10px;
-    margin-bottom: 10px;
-} */
-
 .dropdown{
     display: inline-block;
 }
@@ -282,7 +246,7 @@ div.card-img-overlay:hover {
 }
 
 .d-flex {
-    z-index: 9999;
+    z-index: 1000;
     position: fixed;
     top: 0;
     right: 0;
@@ -293,12 +257,66 @@ div.card-img-overlay:hover {
     display: none;
 }
 
-.back_top {
-    position: fixed;
-    right: 150px;
-    bottom: 150px;
+.pc-navigation {
+    position:fixed;
+    top:20%;
+    left:5%;
 }
 
+.mb-navigation {
+    display: none;
+}
+
+.product_page {
+    margin-left:125px;
+    margin-top:55px;
+}
+
+.search{
+    display: none;
+	position: fixed;
+    z-index: 1001;
+    top: 20px;
+    left: 18%;
+	height: 56px;
+	line-height: 0px;
+	padding: 0 20px;
+}	
+.search input{
+	border-radius: 40px;
+	border: 0;
+	outline: none;
+	background: #eee;
+	width: 240px;
+    height: 38px;
+    padding: 0 0 0 20px;
+}
+ 
+.search .search-btn {
+    position: absolute;
+    top: 10px;
+    right: 40px;
+    border-radius: 100px;
+    width: 30px;
+    height: 30px;
+}
+.search i {
+    position: absolute;
+    top: 6px;
+    right: 7px;
+    font-size: 18px;
+}
+
+body[data-page="index.md"] .search {
+    display: inline-block;
+
+}
+
+body[data-page="zh_CN/README.md"] .search {
+    display: inline-block;
+}
+
+
 @media screen and (max-width: 768px) {
     .d-flex {
         display: none !important;
@@ -310,7 +328,7 @@ div.card-img-overlay:hover {
         right: 0;
         width: 50%;
         background-color: white;
-        z-index: 9999;
+        z-index: 1000;
         left: inherit;
     }
     .d-flex.open>h5 {
@@ -326,7 +344,7 @@ div.card-img-overlay:hover {
         top: 0;
         width: 50px;
         height: 50px;
-        z-index: 9999;
+        z-index: 1000;
     }
     .btn-toggle::before,
     .btn-toggle::after {
@@ -394,6 +412,42 @@ div.card-img-overlay:hover {
     .uiflow_p{
         height: auto;
     }
+    .pc-navigation {
+        display: none;
+    }
+    .product_page {
+        margin-left:0px;
+        margin-top:0px;
+    }
+    .mb-navigation {
+        z-index: 9999;
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        right: 50px;
+        height: 50px;
+        color: #343a40;
+        border-radius: 0;
+        background: white;
+        line-height: inherit;
+        display: block;
+        box-shadow: -12px -1px 10px #888888;
+    }
+    .nav-content {
+        position: fixed;
+        top:50px;
+        left:0px;
+        right:0px;
+        z-index:999;
+        /* color: white; */
+    }
+    .search {
+        position: fixed;
+        bottom: 0px;
+        left: 20px;
+        z-index: 1001;
+        top: 92%;
+    }
 }
 
 #loading {
diff --git a/docs/index.html b/docs/index.html
index 71dba811..745d4276 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -51,6 +51,12 @@
 
 <body>
     <div class="btn-toggle"></div>
+    <div class="search">
+            <form action="" method="get" accept-charset="utf-8">
+                <input type="text" placeholder="Search" oninput="onEnter(event)">
+                <a id="search_button" class="search-btn" style="width: 20px;height: 20px;color: #007bff" onclick="mode_search()"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" role="img" viewBox="0 0 24 24" focusable="false"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"></circle><path d="M21 21l-5.2-5.2"></path></svg></a>
+            </form>
+    </div>
     <div class="d-flex a flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
         <h5 class="my-0 mr-md-auto font-weight-normal">
             <a href="https://m5stack.com/"><img src="//cdn.shopify.com/s/files/1/0056/7689/2250/files/LOGO_70x.jpg?v=1563273356" style="margin-right:10px;margin-top:-5px" width="52"></a>M5Stack Docs</h5>
@@ -70,7 +76,7 @@
         <a id="language" class="btn btn-primary" style="color:#fff" onclick="language()">中文</a>
     </div>
     <div id="app">loading...</div>
-    <div><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/back_top.png" class="back_top" onclick="(function(){$('html, body').animate({scrollTop: 0}, 500);})()"></div>
+    <!-- <div><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/back_top.png" class="back_top" onclick="(function(){$('html, body').animate({scrollTop: 0}, 500);})()"></div> -->
     <script>
         window.$docsify = {
             // GENERAL
@@ -121,6 +127,76 @@
             // }, 600);
         };
 
+        function product_search(){
+            var p = $(".item p");
+            temp_product_name = [];
+            all_product_name = [];
+            for (var i=0; i<p.length; i++ ) {
+                temp_product_name.push(p[i].textContent.toLowerCase());
+                var match1 = temp_product_name.filter(item => item.startsWith(onEnter_content));
+                all_product_name.push(p[i].textContent.toLowerCase());
+                var match2 = all_product_name.filter(item => item.startsWith(onEnter_content));
+                if( match1.length > 0){
+                    $(".item").eq(i).css("display","inline-block");
+                    $(".item").eq(i).parent().children("p").css("display","block");
+                    $(".item").eq(i).parent().next("hr").css("display","block");
+                }
+                else{   
+                    $(".item").eq(i).css("display","none");
+                    $(".item").parent().children("p").css("display","none");
+                    $(".item").eq(i).parent().next("hr").css("display","none");
+                }
+
+                if((match2.length == 0)){
+                    $("#search_note").css("display","block");
+                }
+                else{  
+                    $("#search_note").css("display","none");
+                }
+                temp_product_name.shift();
+            }
+        }
+        function onEnter(event){
+            timer = setTimeout(function () {
+                onEnter_content = event.target.value.toLowerCase();
+                mode_search();
+                clearTimeout(timer);
+                timer = null;
+                    }, 250); 
+        }
+
+        function mode_search(){
+            link = window.location.href;
+            if(((link.slice(-4) == "/en/")||(link.slice(-7)== "/zh_CN/"))||((link.indexOf(/en/) == -1) && (link.indexOf(/zh_CN/) == -1))){
+                product_search();
+                }
+        }
+        // function keyup_submit(e){ 
+        //     var evt = window.event || e; 
+        //     if (evt.keyCode == 13){
+        //         mode_search();
+        //     }
+        // }
+        var Input = $('form input');
+            Input.focusin(function (){
+            Input.animate({width:300});
+        });
+        
+            Input.focusout(function (){
+            Input.animate({width:240});
+            onEnter_content = event.target.value.toLowerCase();
+        })
+        
+        function select(event){
+            
+            var s = event.textContent.toLowerCase();
+            $("#thetarget").removeClass("show");
+            $(".btn-group-vertical button").addClass("btn-light");
+            $(event).removeClass("btn-light");
+            $(event).addClass("btn-primary");
+            page_move(s);
+        }
+
         $(document).ready(function() {
             $(".btn-toggle").on('click', function() {
                 $(".btn-toggle").toggleClass('open');
diff --git a/docs/index.md b/docs/index.md
index 39bae593..df20d27b 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,63 +1,70 @@
- <div>
-  <div class="banner img-fluid" onclick= page_move("core")>
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/core.jpg">
-    <div class="card-img-overlay">
-      <h4 >Core</h4>
+<div class="pc-navigation">
+  <div class="btn-group-vertical" style="width: 160px;">
+    <div class="btn-group">
+        <button id="core-btn" type="button" class="btn btn-primary" onclick="select(this)">Core</button>
     </div>
-  </a>
-  </div>
-
-  <div class="banner img-fluid" onclick= page_move("module")>
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/module.jpg">
-    <div class="card-img-overlay">
-      <h4>Module</h4>
+        <div class="btn-group">
+        <button id="module-btn" type="button" class="btn btn-light"  onclick="select(this)">Module</button>
     </div>
-  </div>
-
-  <div class="banner img-fluid" onclick= page_move("base")>
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/base.jpg">
-    <div class="card-img-overlay">
-      <h4>Base</h4>
+    <div class="btn-group">
+        <button id="base-btn" type="button" class="btn btn-light"  onclick="select(this)">Base</button>
     </div>
-  </div>
-
-  <div class="banner img-fluid" onclick= page_move("unit")>
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/unit.jpg">
-    <div class="card-img-overlay">
-      <h4>Unit</h4>
+    <div class="btn-group">
+        <button id="unit-btn" type="button" class="btn btn-light"  onclick="select(this)">Unit</button>
     </div>
-  </div>
-
-
-  <div class="banner img-fluid" onclick= page_move("application")>
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/application.jpg">
-    <div class="card-img-overlay">
-      <h4>Application</h4>
+    <div class="btn-group">
+        <button id="application-btn" type="button" class="btn btn-light"  onclick="select(this)">Application</button>
     </div>
-  </div>
-
-
-  <div class="banner img-fluid" onclick= page_move("accessory")>
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/accessory.jpg">
-    <div class="card-img-overlay">
-      <h4>Accessory</h4>
+        <div class="btn-group">
+        <button id="accessory-btn" type="button" class="btn btn-light"  onclick="select(this)">Accessory</button>
     </div>
-  </div>
-
-
-  <div class="banner img-fluid" onclick= page_move("aluminium")>
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/aluminium_profile.jpg">
-    <div class="card-img-overlay">
-      <h4>Aluminium Profile</h4>
+    <div class="btn-group">
+        <button id="aluminium-btn" type="button" class="btn btn-light"  onclick="select(this)">Aluminium</button>
     </div>
-  </div>
 </div>
+</div>
+
+
+  <div class="navbar-toggler mb-navigation" data-toggle="collapse" data-target="#thetarget">
+  Core
+  </div>
+  <div class="collapse navbar-collapse" id="thetarget">
+  <nav class="navbar-expand-sm bg-light navbar-dark nav-content">
+    <ul class="navbar-nav">
+      <li class="nav-item active">
+        <a class="dropdown-item"  onclick="select(this)">Core</a>
+      </li>
+      <li class="nav-item">
+        <a class="dropdown-item"  onclick="select(this)">Module</a>
+      </li>
+      <li class="nav-item">
+        <a class="dropdown-item"  onclick="select(this)">Base</a>
+      </li>
+      <li class="nav-item">
+        <a class="dropdown-item"  onclick="select(this)">Unit</a>
+      </li>
+      <li class="nav-item">
+        <a class="dropdown-item"  onclick="select(this)">Application</a>
+      </li>
+      <li class="nav-item">
+        <a class="dropdown-item"  onclick="select(this)">Accessory</a>
+      </li>
+      <li class="nav-item">
+        <a class="dropdown-item"  onclick="select(this)">Aluminium</a>
+      </li>
+    </ul>
+  </nav>    
+</div>
+
+<div class="product_page">
+
+
+<div id="search_note" style="display:none;position:fixed;top:30%">
+  <h3>not obtained the content, please enter the first letter of the product and search again.</h3>
+</div>
+
 
 <div id="core">
-     <img src="assets/img/product_pics/icon_core.png" style="vertical-align:middle;margin-top:30px">
-     <span style="font-size:30px">Core</span>
-</div>
-
 
 **M5Core**
 
@@ -67,7 +74,6 @@
   <a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Core_Compare">M5Core comparison »</a>
 
 
-
 <div class="item">
   <a href="/#/en/core/basic">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/core_basic_01.png">
@@ -148,12 +154,12 @@
   </a>
 </div>
 
+</div>
+
+
 ***
 
-<div id="module">
-     <img src="assets/img/product_pics/icon_module.png" style="vertical-align:middle;">
-     <span style="font-size:30px">Module</span>
-</div>
+<div id="module" >
 
 
 <a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Module_I2C">I2C AddressTable</a>&nbsp;&nbsp;&nbsp;&nbsp;
@@ -324,16 +330,14 @@
 </div> 
 
 
-<div id="base">
-     <img src="assets/img/product_pics/icon_base.png" style="vertical-align:middle;margin-top:20px">
-     <span style="font-size:30px">Base</span>
 </div>
 
-<!-- *( **[IIC Address Table](https://shimo.im/sheets/GWkjHV3XyCCgwDpQ)** )* -->
 
-&nbsp;
+***
 
+<div id="base" >
 
+**base** 
 
 <div class="item">
   <a href="/#/en/base/lan_base">
@@ -415,13 +419,11 @@
 </div>
 
 
-***
-
-<div id="unit">
-     <img src="assets/img/product_pics/icon_unit.png" style="vertical-align:middle;">
-     <span style="font-size:30px">Unit</span>
 </div>
 
+***
+
+<div id="unit" >
 
   <a class="btn btn btn-primary" href="#en/quick_start/m5camera/m5camera_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">Camera QuickStart</a>&nbsp;&nbsp;&nbsp;&nbsp;
   <a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Unit_I2C">I2C AddressTable</a>&nbsp;&nbsp;&nbsp;&nbsp;
@@ -906,15 +908,14 @@
 
 
 
-***
-
-<div id="application">
-     <img src="assets/img/product_pics/icon_app.png" style="vertical-align:middle;">
-     <span style="font-size:30px">Application</span>
 </div>
 
-<!-- *( **[IIC Address Table](https://shimo.im/sheets/GWkjHV3XyCCgwDpQ)** )* -->
 
+***
+
+<div id="application" >
+
+**Application**
 
 <div class="item">
   <a href="/#/en/app/bala">
@@ -1014,13 +1015,14 @@
 </div>
 
 
+</div>
+
 
 ***
 
-<div id="accessory">
-     <img src="assets/img/product_pics/icon_accessory.png" style="vertical-align:middle;">
-     <span style="font-size:30px">Accessory</span>
-</div>
+<div id="accessory" >
+
+**Accessory**
 
 <div class="item">
   <a href="/#/en/accessory/converter/grove_t">
@@ -1116,15 +1118,15 @@
 </div>
 
 
-***  
-
-
-<div id="aluminium">
-     <img src="assets/img/product_pics/icon_1515.jpg" style="vertical-align:middle;">
-     <span style="font-size:30px">Aluminium Profile</span>
 </div>
 
 
+***
+
+<div id="aluminium">
+
+**Aluminium Profil**
+
 <div class="item">
   <a href="/#/en/1515/corner">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/acs_corner_01.jpg">
@@ -1152,6 +1154,9 @@
   <p class="item-title"> Aluminium-Profile</p>
   </a>
 </div>
+</div>
+
+</div>
 
 
 
@@ -1245,4 +1250,60 @@
 </div>
 </div>
 </div>
-</div>
\ No newline at end of file
+</div>
+
+
+<script>
+
+  var scrollFunc = function (e) {  
+  e = e || window.event;  
+  // if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件    
+      var test = window.location.href;
+      if(((test.slice(-4) == "/en/")||(test.slice(-4)== "/zh_CN/"))||((test.indexOf(/en/) == -1) && (test.indexOf(/zh_CN/) == -1))){
+        $(".btn-group-vertical button").addClass("btn-light");
+        if((core.getBoundingClientRect().top + core.getBoundingClientRect().height) > 200){
+            $(".mb-navigation").text('Core');
+            $("#core-btn").removeClass("btn-light");
+            $("#core-btn").addClass("btn-primary");
+        }else if((module.getBoundingClientRect().top + module.getBoundingClientRect().height) > 200){
+            $(".mb-navigation").text('Module');
+            $("#module-btn").removeClass("btn-light");
+            $("#module-btn").addClass("btn-primary"); 
+        }else if((base.getBoundingClientRect().top + base.getBoundingClientRect().height) > 200){
+            $(".mb-navigation").text('Base');          
+            $("#base-btn").removeClass("btn-light");
+            $("#base-btn").addClass("btn-primary");  
+        }else if((unit.getBoundingClientRect().top + unit.getBoundingClientRect().height) > 200){
+            $(".mb-navigation").text('Unit');           
+            $("#unit-btn").removeClass("btn-light");
+            $("#unit-btn").addClass("btn-primary");  
+        }else if((application.getBoundingClientRect().top + application.getBoundingClientRect().height) > 200){
+            $(".mb-navigation").text('Application');          
+            $("#application-btn").removeClass("btn-light");
+            $("#application-btn").addClass("btn-primary");  
+        }else if((accessory.getBoundingClientRect().top + accessory.getBoundingClientRect().height) > 700){
+            $(".mb-navigation").text('Accessory');          
+            $("#accessory-btn").removeClass("btn-light");
+            $("#accessory-btn").addClass("btn-primary");  
+        }else if((aluminium.getBoundingClientRect().top + aluminium.getBoundingClientRect().height) > 600){
+            $(".mb-navigation").text('Aluminium');           
+            $("#aluminium-btn").removeClass("btn-light");
+            $("#aluminium-btn").addClass("btn-primary");  
+        }
+      // }
+  }  
+} 
+/*IE、Opera注册事件*/
+if(document.attachEvent){
+  document.attachEvent('onmousewheel',scrollFunc);
+
+}
+//Firefox使用addEventListener添加滚轮事件  
+if (document.addEventListener) {//firefox  
+  document.addEventListener('DOMMouseScroll', scrollFunc, false);  
+}  
+//Safari与Chrome属于同一类型
+// window.onmousewheel = document.onmousewheel = scrollFunc;
+// window.onscroll = document.onscroll = scrollFunc;
+window.onscroll = scrollFunc;
+</script>
\ No newline at end of file
diff --git a/docs/zh_CN/README.md b/docs/zh_CN/README.md
index 489e0ac2..5fb3f359 100644
--- a/docs/zh_CN/README.md
+++ b/docs/zh_CN/README.md
@@ -1,909 +1,906 @@
-  <div class="banner img-fluid" onclick= page_move("core")>
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/core.jpg">
-    <div class="card-img-overlay">
-      <h4 >Core</h4>
+<div class="pc-navigation">
+  <div class="btn-group-vertical" style="width: 160px;">
+    <div class="btn-group">
+        <button id="core-btn" type="button" class="btn btn-primary" onclick="select(this)">Core</button>
     </div>
-  </a>
-  </div>
-
-  <div class="banner img-fluid" onclick= page_move("module")>
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/module.jpg">
-    <div class="card-img-overlay">
-      <h4>Module</h4>
+        <div class="btn-group">
+        <button id="module-btn" type="button" class="btn btn-light"  onclick="select(this)">Module</button>
     </div>
-  </div>
-
-  <div class="banner img-fluid" onclick= page_move("base")>
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/base.jpg">
-    <div class="card-img-overlay">
-      <h4>Base</h4>
+    <div class="btn-group">
+        <button id="base-btn" type="button" class="btn btn-light"  onclick="select(this)">Base</button>
     </div>
-  </div>
-
-  <div class="banner img-fluid" onclick= page_move("unit")>
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/unit.jpg">
-    <div class="card-img-overlay">
-      <h4>Unit</h4>
+    <div class="btn-group">
+        <button id="unit-btn" type="button" class="btn btn-light"  onclick="select(this)">Unit</button>
     </div>
-  </div>
-
-
-  <div class="banner img-fluid" onclick= page_move("application")>
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/application.jpg">
-    <div class="card-img-overlay">
-      <h4>Application</h4>
+    <div class="btn-group">
+        <button id="application-btn" type="button" class="btn btn-light"  onclick="select(this)">Application</button>
     </div>
-  </div>
-
-
-  <div class="banner img-fluid" onclick= page_move("accessory")>
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/accessory.jpg">
-    <div class="card-img-overlay">
-      <h4>Accessory</h4>
+        <div class="btn-group">
+        <button id="accessory-btn" type="button" class="btn btn-light"  onclick="select(this)">Accessory</button>
     </div>
-  </div>
-
-
-  <div class="banner img-fluid" onclick= page_move("aluminium")>
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/aluminium_profile.jpg">
-    <div class="card-img-overlay">
-      <h4>Aluminium Profile</h4>
+    <div class="btn-group">
+        <button id="aluminium-btn" type="button" class="btn btn-light"  onclick="select(this)">Aluminium</button>
     </div>
-  </div>
-
-
-<div id="core">
-     <img src="assets/img/product_pics/icon_core.png" style="vertical-align:middle;margin-top:30px">
-     <span style="font-size:30px">Core</span>
+</div>
 </div>
 
 
+<div class="navbar-toggler mb-navigation" data-toggle="collapse" data-target="#thetarget">
+  Core
+  </div>
+  <div class="collapse navbar-collapse" id="thetarget">
+  <nav class="navbar-expand-sm bg-light navbar-dark nav-content">
+    <ul class="navbar-nav">
+      <li class="nav-item active">
+        <a class="dropdown-item"  onclick="select(this)">Core</a>
+      </li>
+      <li class="nav-item">
+        <a class="dropdown-item"  onclick="select(this)">Module</a>
+      </li>
+      <li class="nav-item">
+        <a class="dropdown-item"  onclick="select(this)">Base</a>
+      </li>
+      <li class="nav-item">
+        <a class="dropdown-item"  onclick="select(this)">Unit</a>
+      </li>
+      <li class="nav-item">
+        <a class="dropdown-item"  onclick="select(this)">Application</a>
+      </li>
+      <li class="nav-item">
+        <a class="dropdown-item"  onclick="select(this)">Accessory</a>
+      </li>
+      <li class="nav-item">
+        <a class="dropdown-item"  onclick="select(this)">Aluminium</a>
+      </li>
+    </ul>
+  </nav>    
+</div>
+
+<div class="product_page">
+
+
+<div id="search_note" style="display:none;position:fixed;top:30%">
+  <h3>not obtained the content, please enter the first letter of the product and search again.</h3>
+</div>
+
+
+<div id="core">
+
 **M5Core**
 
-  <a class="btn btn btn-primary" href="#zh_CN/quick_start/m5core/m5stack_core_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">M5Core上手指南</a>&nbsp;&nbsp;&nbsp;&nbsp;
-  <a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Core_I2C">I2C地址表</a>&nbsp;&nbsp;&nbsp;&nbsp;
-  <a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Core_Compare">M5Core硬件区别 »</a>
+  <a class="btn btn btn-primary" href="#en/quick_start/m5core/m5stack_core_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">M5Core QuickStart</a>&nbsp;&nbsp;&nbsp;&nbsp;
+  <a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Core_I2C">I2C AddressTable</a>&nbsp;&nbsp;&nbsp;&nbsp;
+  <!-- <a class="btn btn btn-primary" href="https://github.com/m5stack/M5-Schematic/blob/master/Core/hardware_difference_between_cores.md" role="button" style="color:white;text-decoration:none">Cores comparison »</a> -->
+  <a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Core_Compare">M5Core comparison »</a>
+
 
 <div class="item">
-  <a href="/#/zh_CN/core/basic">
+  <a href="/#/en/core/basic">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/core_basic_01.png">
     <p class="item-title">BASIC</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/core/gray">
+  <a href="/#/en/core/gray">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/core_gray_01.png">
-  <p class="item-title"  >GRAY</p>    
+  <p class="item-title">GRAY</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/core/fire">
+  <a href="/#/en/core/fire">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/core_fire_01.png">
-    <p class="item-title"  >FIRE</p>
-  </a>
+  <p class="item-title">FIRE</p>
+ </a>
 </div>
 
-
 **M5Stick**
-<!-- <div class="btn-group"> -->
-  <a class="btn btn btn-primary" href="#zh_CN/quick_start/m5stick/m5stick_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">M5Stick上手指南</a>&nbsp;&nbsp;&nbsp;&nbsp;
-  <a class="btn btn btn-primary" href="#zh_CN/quick_start/m5stickc/m5stickc_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">M5StickC上手指南</a>&nbsp;&nbsp;&nbsp;&nbsp;
-  <a class="btn btn btn-primary" href="#zh_CN/quick_start/m5stickv/m5stickv_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">M5StickV上手指南</a>&nbsp;&nbsp;&nbsp;&nbsp;
-  <a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Stick_Compare">M5Stick硬件区别 »</a>
-<!-- </div> -->
+
+
+  <a class="btn btn btn-primary" href="#en/quick_start/m5stick/m5stick_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">M5Stick QuickStart</a>&nbsp;&nbsp;&nbsp;&nbsp;
+  <a class="btn btn btn-primary" href="#en/quick_start/m5stickc/m5stickc_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">M5StickC QuickStart</a>&nbsp;&nbsp;&nbsp;&nbsp;
+  <a class="btn btn btn-primary" href="#en/quick_start/m5stickv/m5stickv_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">M5StickV QuickStart</a>&nbsp;&nbsp;&nbsp;&nbsp;
+  <a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Stick_Compare">M5Stick comparison »</a>
 
 
 
 <div class="item">
-  <a href="/#/zh_CN/core/m5stick">
+  <a href="/#/en/core/m5stick">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/core_m5stick_01.png">
-    <p class="item-title"  >M5Stick</p>
+  <p class="item-title">M5Stick</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/core/m5stickc">
+  <a href="/#/en/core/m5stickc">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/core_m5stickc_01.png">
-    <p class="item-title"  >M5StickC</p>
-  </a>
+  <p class="item-title">M5StickC</p>
+</a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/core/m5stickv">
+  <a href="/#/en/core/m5stickv">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/m5stickv_01.jpg">
-    <p class="item-title"  >M5StickV</p>
+  <p class="item-title">M5StickV</p>
   </a>
 </div>
 
 
-<!-- </div> -->
 
-**M5GO/FACES 套件**
+**M5GO/FACES Kit**
 
-
-  <a class="btn btn btn-primary" href="#zh_CN/quick_start/m5core/m5stack_core_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">M5GO上手指南</a>&nbsp;&nbsp;&nbsp;&nbsp;
-  <a class="btn btn btn-primary" href="#zh_CN/quick_start/m5core/m5stack_core_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">FACES-kit上手指南 »</a>
+  <a class="btn btn btn-primary" href="#en/quick_start/m5core/m5stack_core_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">M5GO QuickStart</a>&nbsp;&nbsp;&nbsp;&nbsp;
+  <a class="btn btn btn-primary" href="#en/quick_start/m5core/m5stack_core_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">FACES-kit QuickStart »</a>
 
 <div class="item">
-  <a href="/#/zh_CN/core/m5go_lite">
+  <a href="/#/en/core/m5go_lite">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/kit_m5go_lite_01.png">
-    <p class="item-title"  >M5GO Lite</p>
+  <p class="item-title">M5GO Lite</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/core/m5go">
+  <a href="/#/en/core/m5go">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/kit_m5go_01.png">
-    <p class="item-title"  >M5GO Kit</p>
+  <p class="item-title">M5GO Kit</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/core/face_kit">
+  <a href="/#/en/core/face_kit">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/kit_faces_01.png">
-    <p class="item-title"  >FACES Kit</p>
+  <p class="item-title">FACES Kit</p>
   </a>
 </div>
 
-***
-
-<div id="module">
-     <img src="assets/img/product_pics/icon_module.png" style="vertical-align:middle;">
-     <span style="font-size:30px">Module</span>
 </div>
 
 
-<a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Module_I2C">I2C地址表</a>&nbsp;&nbsp;&nbsp;&nbsp;
+***
 
-**通讯模块**
+<div id="module" >
+
+
+<a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Module_I2C">I2C AddressTable</a>&nbsp;&nbsp;&nbsp;&nbsp;
+
+
+**Communication Modules**
 
 <div class="item">
-  <a href="/#/zh_CN/module/gps">
+  <a href="/#/en/module/gps">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_gps_01.png">
-    <p class="item-title"  >GPS</p>
+  <p class="item-title">GPS</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/lora">
+  <a href="/#/en/module/lora">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_lora_01.jpg">
-    <p class="item-title"  >LORA</p>
+  <p class="item-title">LORA</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/lorawan">
+  <a href="/#/en/module/lorawan">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_lorawan_01.png">
-    <p class="item-title"  >LoRaWAN</p>
+  <p class="item-title">LoRaWAN</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/sim800">
+  <a href="/#/en/module/sim800">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_sim800_01.png">
-     <p class="item-title"  >SIM800L</p>
+  <p class="item-title">SIM800L</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/commu">
+  <a href="/#/en/module/commu">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_commu_01.png">
-    <p class="item-title"  >COMMU</p>
+  <p class="item-title">COMMU</p>
   </a>
 </div>
 
-
 <div class="item">
-  <a href="/#/zh_CN/module/lte">
+  <a href="/#/en/module/lte">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/lte_01.jpg">
-    <p class="item-title">LTE</p> 
+  <p class="item-title">LTE</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/gsm">
+  <a href="/#/en/module/gsm">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/gsm_01.jpg">
-    <p class="item-title">GSM</p>
+  <p class="item-title">GSM</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/nb-iot">
+  <a href="/#/en/module/nb-iot">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/nb_iot_01.jpg">
-    <p class="item-title">NB-IoT</p>
+  <p class="item-title">NB-IoT</p>
   </a>
 </div>
 
-**拓展模块**
+**Expansion Modules**
 
 <div class="item">
-  <a href="/#/zh_CN/module/battery">
+  <a href="/#/en/module/battery">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_battery_01.png">
-    <p class="item-title"  >BATTERY</p>
+  <p class="item-title">BATTERY</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/proto">
+  <a href="/#/en/module/proto">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_proto_01.png">
-    <p class="item-title"  >PROTO</p>
+  <p class="item-title">PROTO</p>
   </a>
 </div>
 
-
 <div class="item">
-  <a href="/#/zh_CN/module/plus">
+  <a href="/#/en/module/plus">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_plus_01.png">
-    <p class="item-title"  >PLUS</p>
+  <p class="item-title">PLUS</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/usb">
+  <a href="/#/en/module/usb">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_usb_01.png">
-    <p class="item-title"  >USB</p>
+  <p class="item-title">USB</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/bus">
+  <a href="/#/en/module/bus">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_bus_01.png">
-    <p class="item-title"  >BUS</p>
+  <p class="item-title">BUS</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/goplus">
+  <a href="/#/en/module/goplus">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_goplus_p1.png">
-    <p class="item-title"  >GoPlus</p>
+  <p class="item-title">GoPlus</p>
   </a>
 </div>
 
 
-**驱动模块**
+**Drive Modules**
 
 <div class="item">
-  <a href="/#/zh_CN/module/stepmotor">
+  <a href="/#/en/module/stepmotor">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_stepmotor_01.png">
-    <p class="item-title"  >STEPMOTOR</p>
+  <p class="item-title">STEPMOTOR</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/servo">
+  <a href="/#/en/module/servo">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_servo_01.png">
-    <p class="item-title"  >SERVO</p>
+  <p class="item-title">SERVO</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/lego_plus">
+  <a href="/#/en/module/lego_plus">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_lego_plus_01.png">
-    <p class="item-title"  >LEGO+</p>
+  <p class="item-title">LEGO+</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/fan">
+  <a href="/#/en/module/fan">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_FAN.png">
-    <p class="item-title"  >FAN</p>
+  <p class="item-title">FAN</p>
   </a>
 </div>
 
 
-
-**FACES系列模块**
+**FACES Series**
 
 <div class="item">
-  <a href="/#/zh_CN/module/encoder">
+  <a href="/#/en/module/encoder">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_encoder_01.png">
-    <p class="item-title"  >ENCODER</p>
+  <p class="item-title">ENCODER</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/joystick">
+  <a href="/#/en/module/joystick">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_joystick_01.png">
-    <p class="item-title"  >JOYSTICK</p>
+  <p class="item-title">JOYSTICK</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/faces_finger">
+  <a href="/#/en/module/faces_finger">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/faces_finger_01.jpg">
-    <p class="item-title"  >FINGER</p>
+  <p class="item-title">FINGER</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/faces_rfid">
+  <a href="/#/en/module/faces_rfid">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/faces_rfid_01.jpg">
-    <p class="item-title"  >RFID</p>
-  </a>
-</div>
-
-
-
-<div id="base">
-     <img src="assets/img/product_pics/icon_base.png" style="vertical-align:middle;margin-top:20px">
-     <span style="font-size:30px">Base</span>
-</div>
-
-
-
-
-<div class="item">
-  <a href="/#/zh_CN/base/lan_base">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_lan_01.png">
-    <p class="item-title"  >LAN</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/base/node_base">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_node_01.png">
-    <p class="item-title"  >NODE</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/base/btc_base">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_btc_01.png">
-    <p class="item-title"  >BTC</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/base/plc_base">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/plc_m12_01.jpg">
-     <p class="item-title"  >PLC</p> 
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/base/core_bottom">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_core_bottom_01.png">
-    <p class="item-title"  >Core BOTTOM</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/base/m5go_bottom">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_m5go_bottom_01.png">
-    <p class="item-title"  >M5GO BOTTOM</p>
-  </a>
-</div>
-
-
-<div class="item">
-  <a href="/#/zh_CN/base/m5go_rfid">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_m5go_rfid_01.png">
-    <p class="item-title"  >M5GO RFID</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/base/m5go_charger">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_m5go_base_01.png">
-    <p class="item-title"  >M5GO CHARGER</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/base/base15">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_base15_01.jpg">
-    <p class="item-title"  >BASE15</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/base/base26">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_base26_01.jpg">
-    <p class="item-title"  >BASE26</p>
-  </a>
-</div>
-
-
-<div class="item">
-  <a href="/#/zh_CN/accessory/battery_base">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/battery_base_01.jpg">
-    <p class="item-title" >M5Camera Battery</p>
-  </a>
-</div>
-
-***
-
-
-<div id="unit">
-     <img src="assets/img/product_pics/icon_unit.png" style="vertical-align:middle;">
-     <span style="font-size:30px">Unit</span>
-</div>
-
-
-
-  <a class="btn btn btn-primary" href="#zh_CN/quick_start/m5camera/m5camera_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">摄像头上手指南</a>&nbsp;&nbsp;&nbsp;&nbsp;
-  <a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Unit_I2C">I2C地址表</a>&nbsp;&nbsp;&nbsp;&nbsp;
-  <a class="btn btn btn-primary" href="https://github.com/m5stack/M5-Schematic/blob/master/Units/m5camera/CameraComparison_zh_CN.md" role="button" style="color:white;margin-top:10px;text-decoration:none">款式硬件区别 »</a>
-
-
-**摄像头类** 
-
-
-<div class="item">
-  <a href="/#/zh_CN/unit/esp32cam">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_esp32cam_01.png">
-    <p class="item-title"  >ESP32CAM</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/m5camera">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5camera_01.png">
-    <p class="item-title"  >M5Camera</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/m5camera_f">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5camera_f_01.png">
-    <p class="item-title"  >M5CameraF</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/m5camera_x">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5camera_x_01.png">
-    <p class="item-title"  >M5CameraX</p>
-  </a>
-</div>
-
-**传感器类**
-
-
-<div class="item">
-  <a href="/#/zh_CN/unit/env">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_env_01.png">
-    <p class="item-title"  >ENV</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/earth">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_earth_01.png">
-    <p class="item-title"  >EARTH</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/light">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_light_01.png">
-    <p class="item-title"  >LIGHT</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/pir">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_pir_01.png">
-    <p class="item-title"  >PIR</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/ncir">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_ncir_01.png">
-    <p class="item-title"  >NCIR</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/thermal">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_thermal_01.png">
-    <p class="item-title"  >THERMAL</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/color">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_color_01.png">
-    <p class="item-title"  >COLOR</p>
-  </a>
-</div>
-
-
-
-<div class="item">
-  <a href="/#/zh_CN/unit/tof">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_tof_01.png">
-    <p class="item-title"  >TOF</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/heart">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_heart_01.png">
-    <p class="item-title"  >HEART</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/adc">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_adc_01.png">
-    <p class="item-title"  >ADC</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/makey">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_makey_01.png">
-    <p class="item-title"  >MAKEY</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/finger">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_finger_01.png">
-    <p class="item-title"  >FINGER</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/weight">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_weight_01.png">
-    <p class="item-title"  >WEIGHT</p>
-  </a>
-</div>
-
-
-
-<div class="item">
-  <a href="/#/zh_CN/unit/accel">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_accel_01.jpg">
-    <p class="item-title"  >ACCEL</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/op90">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_op90_01.jpg">
-    <p class="item-title"  >OP.90</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/op180">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_op180_01.jpg">
-    <p class="item-title"  >OP.180</p>
-  </a>
-</div>
-
-
-**I / 0  类**
-
-<div class="item">
-  <a href="/#/zh_CN/unit/extio">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_extio_01.png">
-    <p class="item-title"  >EXT.IO</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/dac">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_dac_01.png">
-    <p class="item-title"  >DAC</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/relay">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_relay_01.png">
-    <p class="item-title"  >RELAY</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/hub">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_hub_01.png">
-    <p class="item-title"  >HUB</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/pahub">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_pahub_p1.png">
-    <p class="item-title"  >PaHUB</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/pbhub">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_pbhub_p1.png">
-    <p class="item-title"  >PbHUB</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/396port">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_396port_01.png">
-    <p class="item-title"  >3.96Port</p>
-  </a>
-</div>
-
-
-<div class="item">
-  <a href="/#/zh_CN/unit/m5-bit">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5bit_01.jpg">
-    <p class="item-title"  >M5:bit</p>
-  </a>
-</div>
-
-
-<div class="item">
-  <a href="/#/zh_CN/unit/proto">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_proto_01.png">
-    <p class="item-title"  >PROTO</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/mini-proto">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/mini_proto_01.jpg">
-    <p class="item-title"  >MINI-PROTO</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/fan">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_fan_01.jpg">
-    <p class="item-title"  >FAN</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/vibrator">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_vibrator_motor_01.jpg">
-    <p class="item-title"  >Vibrator-Motor</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/angle">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_angle_01.png">
-  <p class="item-title"  >ANGLE</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/button">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_button_01.png">
-  <p class="item-title"  >BUTTON</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/dual_button">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_dual_button_01.png">
-  <p class="item-title"  >Dual-BUTTON</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/joystick">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_joystick_01.png">
-  <p class="item-title"  >JOYSTICK</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/cardkb">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_cardkb_01.png">
-  <p class="item-title"  >CardKB</p>
-  </a>
-</div>
-
-**通讯类**
-
-
-<div class="item">
-  <a href="/#/zh_CN/unit/ir">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_ir_01.png">
-  <p class="item-title"  >IR</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/gps">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_gps_01.png">
-    <p class="item-title"  >GPS</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/rs485">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_rs485_01.png">
-  <p class="item-title"  >RS485</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/rfid">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_rfid_01.png">
-  <p class="item-title"  >RFID</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/laser-rx">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/laser_rx_01.jpg">
-  <p class="item-title"  >LASER-RX</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/laser-tx">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/laser_tx_01.jpg">
-  <p class="item-title"  >LASER-TX</p>
-  </a>
-</div>
-
-**LED类**
-
-
-
-<div class="item">
-  <a href="/#/zh_CN/unit/neopixel">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/M5GO_Unit_neopixel.jpg">
-  <p class="item-title"  >RGB LED</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/unit/hex">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_hex_01.jpg">
-  <p class="item-title"  >HEX</p>
-  </a>
-</div>
-
-
-<div class="item">
-  <a href="/#/zh_CN/unit/rgb">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_rgb_01.png">
-  <p class="item-title"  >RGB</p>
-  </a>
-</div>
-
-**C-HAT 类**
-
-
-<div class="item">
-  <a href="/#/zh_CN/hat/hat-env">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/hat_env_01.jpg">
-  <p class="item-title"  >ENV</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/hat/hat-pir">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/hat_pir_01.jpg">
-  <p class="item-title"  >PIR</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/hat/hat-spk">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/hat_spk_01.jpg">
-  <p class="item-title"  >SPK</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/hat/hat-proto">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/hat_proto_01.jpg">
-  <p class="item-title"  >PROTO</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/hat/hat-ncir">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/hat_ncir_01.jpg">
-  <p class="item-title"  >NCIR</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/hat/hat-thermal">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/hat_thermal_01.jpg">
-  <p class="item-title"  >Thermal</p>
-  </a>
-</div>
-
-
- <div class="item">
-  <a href="/#/zh_CN/hat/hat-rs485">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/rs485_hat_01.jpg">
-  <p class="item-title"  >RS485</p>
-  </a>
-</div>
-
-
-<div class="item">
-  <a href="/#/zh_CN/hat/hat-adc">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/adc_hat_01.jpg">
-  <p class="item-title"  >ADC</p>
-  </a>
-</div>
-
-<div class="item">
-  <a href="/#/zh_CN/hat/hat-dac">
-    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/dac_hat_01.jpg">
-  <p class="item-title"  >DAC</p>
-  </a>
+  <p class="item-title">RFID</p>
+ </a>
 </div> 
 
 
+</div>
+
+
+***
+
+<div id="base" >
+
+**base** 
+
 <div class="item">
-  <a href="/#/zh_CN/hat/hat-beetlec">
+  <a href="/#/en/base/lan_base">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_lan_01.png">
+  <p class="item-title">LAN</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/base/node_base">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_node_01.png">
+  <p class="item-title">NODE</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/base/btc_base">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_btc_01.png">
+  <p class="item-title">BTC</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/base/plc_base">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/plc_m12_01.jpg">
+  <p class="item-title">PLC</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/base/core_bottom">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_core_bottom_01.png">
+  <p class="item-title">Core BOTTOM</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/base/m5go_bottom">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_m5go_bottom_01.png">
+  <p class="item-title">M5GO BOTTOM</p>
+  </a>
+</div>
+
+
+<div class="item">
+  <a href="/#/en/base/m5go_rfid">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_m5go_rfid_01.png">
+  <p class="item-title">M5GO RFID</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/base/m5go_charger">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_m5go_base_01.png">
+  <p class="item-title">M5GO CHARGER</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/base/base15">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_base15_01.jpg">
+  <p class="item-title">BASE15</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/base/base26">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_base26_01.jpg">
+  <p class="item-title">BASE26</p>
+  </a>
+</div>
+
+
+<div class="item">
+  <a href="/#/en/accessory/battery_base">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/battery_base_01.jpg">
+  <p class="item-title">M5Camera Battery</p>
+  </a>
+</div>
+
+
+</div>
+
+***
+
+<div id="unit" >
+
+  <a class="btn btn btn-primary" href="#en/quick_start/m5camera/m5camera_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">Camera QuickStart</a>&nbsp;&nbsp;&nbsp;&nbsp;
+  <a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Unit_I2C">I2C AddressTable</a>&nbsp;&nbsp;&nbsp;&nbsp;
+  <a class="btn btn btn-primary" href="https://github.com/m5stack/M5-Schematic/blob/master/Units/m5camera/CameraComparison_en.md" role="button" style="color:white;margin-top:10px;text-decoration:none">Cameras comparison »</a>
+
+**Camera class** 
+
+<!-- **Camera class** *( **[Quick Start](en/quick_start/m5camera/m5camera_quick_start)**&nbsp;&nbsp;&nbsp;**[Cameras comparison](https://github.com/m5stack/M5-Schematic/blob/master/Units/m5camera/CameraComparison_en.md)** )* -->
+
+<div class="item">
+  <a href="/#/en/unit/esp32cam">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_esp32cam_01.png">
+  <p class="item-title">ESP32CAM</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/m5camera">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5camera_01.png">
+  <p class="item-title">M5Camera</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/m5camera_f">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5camera_f_01.png">
+  <p class="item-title">M5CameraF</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/m5camera_x">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5camera_x_01.png">
+  <p class="item-title">M5CameraX</p>
+  </a>
+</div>
+
+**Sensor class**
+
+
+<div class="item">
+  <a href="/#/en/unit/env">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_env_01.png">
+  <p class="item-title">ENV</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/earth">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_earth_01.png">
+  <p class="item-title">EARTH</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/light">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_light_01.png">
+  <p class="item-title">LIGHT</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/pir">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_pir_01.png">
+  <p class="item-title">PIR</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/ncir">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_ncir_01.png">
+  <p class="item-title">NCIR</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/thermal">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_thermal_01.png">
+  <p class="item-title">THERMAL</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/color">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_color_01.png">
+  <p class="item-title">COLOR</p>
+  </a>
+</div>
+
+
+<div class="item">
+  <a href="/#/en/unit/tof">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_tof_01.png">
+  <p class="item-title">TOF</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/heart">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_heart_01.png">
+  <p class="item-title">HEART</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/adc">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_adc_01.png">
+  <p class="item-title">ADC</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/makey">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_makey_01.png">
+  <p class="item-title">MAKEY</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/finger">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_finger_01.png">
+  <p class="item-title">FINGER</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/weight">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_weight_01.png">
+  <p class="item-title">WEIGHT</p>
+  </a>
+</div>
+
+
+<div class="item">
+  <a href="/#/en/unit/accel">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_accel_01.jpg">
+  <p class="item-title">ACCEL</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/op90">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_op90_01.jpg">
+  <p class="item-title">OP.90</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/op180">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_op180_01.jpg">
+  <p class="item-title">OP.180</p>
+  </a>
+</div>
+
+
+**I / 0  class**
+
+
+<div class="item">
+  <a href="/#/en/unit/extio">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_extio_01.png">
+  <p class="item-title">EXT.IO</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/dac">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_dac_01.png">
+  <p class="item-title">DAC</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/relay">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_relay_01.png">
+  <p class="item-title">RELAY</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/hub">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_hub_01.png">
+  <p class="item-title">HUB</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/pahub">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_pahub_p1.png">
+  <p class="item-title">PaHUB</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/pbhub">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_pbhub_p1.png">
+  <p class="item-title">PbHUB</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/396port">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_396port_01.png">
+  <p class="item-title">3.96Port</p>
+  </a>
+</div>
+
+
+<div class="item">
+  <a href="/#/en/unit/m5-bit">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5bit_01.jpg">
+  <p class="item-title">M5:bit</p>
+  </a>
+</div>
+
+
+<div class="item">
+  <a href="/#/en/unit/proto">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_proto_01.png">
+  <p class="item-title">PROTO</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/mini-proto">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/mini_proto_01.jpg">
+  <p class="item-title">MINI-PROTO</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/unit_fan">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_fan_01.jpg">
+  <p class="item-title">FAN</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/vibrator">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_vibrator_motor_01.jpg">
+  <p class="item-title">Vibrator-Motor</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/angle">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_angle_01.png">
+  <p class="item-title">ANGLE</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/button">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_button_01.png">
+  <p class="item-title">BUTTON</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/dual_button">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_dual_button_01.png">
+  <p class="item-title">Dual-BUTTON</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/joystick">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_joystick_01.png">
+  <p class="item-title">JOYSTICK</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/cardkb">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_cardkb_01.png">
+  <p class="item-title">CardKB</p>
+  </a>
+</div>
+
+
+**Communication class**
+
+
+<div class="item">
+  <a href="/#/en/unit/ir">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_ir_01.png">
+  <p class="item-title">IR</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/gps">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_gps_01.png">
+  <p class="item-title">GPS</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/rs485">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_rs485_01.png">
+  <p class="item-title">RS485</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/rfid">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_rfid_01.png">
+  <p class="item-title">RFID</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/laser-rx">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/laser_rx_01.jpg">
+  <p class="item-title">LASER-RX</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/unit/laser-tx">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/laser_tx_01.jpg">
+  <p class="item-title">LASER-TX</p>
+  </a>
+</div>
+
+**LED class**
+
+
+<div class="item">
+  <a href="/#/en/unit/neopixel">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/M5GO_Unit_neopixel.jpg">
+  <p class="item-title">RGB LED</p>
+  </a>
+</div>
+
+
+<div class="item">
+  <a href="/#/en/unit/hex">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_hex_01.jpg">
+  <p class="item-title">HEX</p>
+  </a>
+</div>
+
+
+<div class="item">
+  <a href="/#/en/unit/rgb">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_rgb_01.png">
+  <p class="item-title">RGB</p>
+  </a>
+</div>
+
+**C-HAT class**
+
+
+<div class="item">
+  <a href="/#/en/hat/hat-env">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/hat_env_01.jpg">
+  <p class="item-title">ENV</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/hat/hat-pir">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/hat_pir_01.jpg">
+  <p class="item-title">PIR</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/hat/hat-spk">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/hat_spk_01.jpg">
+  <p class="item-title">SPK</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/hat/hat-proto">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/hat_proto_01.jpg">
+  <p class="item-title">PROTO</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/hat/hat-ncir">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/hat_ncir_01.jpg">
+  <p class="item-title">NCIR</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/hat/hat-thermal">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/hat_thermal_01.jpg">
+  <p class="item-title">Thermal</p>
+  </a>
+</div>
+
+ <div class="item">
+  <a href="/#/en/hat/hat-rs485">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/rs485_hat_01.jpg">
+  <p class="item-title">RS485</p>
+  </a>
+</div>
+
+
+<div class="item">
+  <a href="/#/en/hat/hat-adc">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/adc_hat_01.jpg">
+  <p class="item-title">ADC</p>
+  </a>
+</div>
+
+<div class="item">
+  <a href="/#/en/hat/hat-dac">
+    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/dac_hat_01.jpg">
+  <p class="item-title">DAC</p>
+ </a>
+</div> 
+
+<div class="item">
+  <a href="/#/en/hat/hat-beetlec">
     <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 class="item">
-  <a href="/#/zh_CN/hat/hat-proto-plus">
+  <a href="/#/en/hat/hat-proto-plus">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/hat_proto_plus_01.jpg">
   <p class="item-title">PROTO PLUS</p>
  </a>
 </div>
 
-
 <div class="item">
-  <a href="/#/zh_CN/hat/hat-yun">
+  <a href="/#/en/hat/hat-yun">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/yun_hat_01.jpg">
   <p class="item-title">YUN</p>
  </a>
 </div>
 
+
 <div class="item">
-  <a href="/#/zh_CN/hat/hat-neoflash">
+  <a href="/#/en/hat/hat-neoflash">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/neoflash_hat_01.jpg">
   <p class="item-title">Neoflash</p>
  </a>
 </div>
 
-
 <div class="item">
-  <a href="/#/zh_CN/hat/hat-tof">
+  <a href="/#/en/hat/hat-tof">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/tof_hat_01.jpg">
   <p class="item-title">ToF</p>
  </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/hat/hat-joystick">
+  <a href="/#/en/hat/hat-joystick">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/joystick_hat_01.jpg">
   <p class="item-title">Joystick</p>
  </a>
 </div>
 
-
-
 <div class="item">
-  <a href="/#/zh_CN/hat/hat-finger">
+  <a href="/#/en/hat/hat-finger">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/finger_hat_01.jpg">
   <p class="item-title">FINGER</p>
  </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/hat/hat-servo">
+  <a href="/#/en/hat/hat-servo">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/servo_hat_01.jpg">
   <p class="item-title">SERVO</p>
  </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/hat/hat-puppyc">
+  <a href="/#/en/hat/hat-puppyc">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/puppyc_01.jpg">
   <p class="item-title">PuppyC</p>
   </a>
@@ -911,197 +908,194 @@
 
 
 
+</div>
+
 
 ***
 
+<div id="application" >
 
-<div id="application">
-     <img src="assets/img/product_pics/icon_app.png" style="vertical-align:middle;">
-     <span style="font-size:30px">Application</span>
-</div>
-
-
-
+**Application**
 
 <div class="item">
-  <a href="/#/zh_CN/app/bala">
+  <a href="/#/en/app/bala">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/app/app_bala_01.png">
-  <p class="item-title"  >BALA</p>
+  <p class="item-title">BALA</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/app/lidarbot">
+  <a href="/#/en/app/lidarbot">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/app/app_lidarbot_01.png">
-  <p class="item-title"  >LidarBOT</p>
+  <p class="item-title">LidarBOT</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/app/piano">
+  <a href="/#/en/app/piano">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/app/app_piano_01.png">
-  <p class="item-title"  >PIANO</p>
+  <p class="item-title">PIANO</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/app/flir">
+  <a href="/#/en/app/flir">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/app/app_flir_01.png">
-  <p class="item-title"  >FLIR</p>
+  <p class="item-title">FLIR</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/app/demo-board">
+  <a href="/#/en/app/demo-board">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/app/app_DemoBoard_01.jpg">
-  <p class="item-title"  >Demo Board</p>
+  <p class="item-title">Demo Board</p>
   </a>
 </div>
 
+
 <div class="item">
-  <a href="/#/zh_CN/unit/neoflash">
+  <a href="/#/en/unit/neoflash">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_neoflash_01.png">
-  <p class="item-title"  >NeoFlash</p>
+  <p class="item-title">NeoFlash</p>
   </a>
 </div>
 
 
 <div class="item">
-  <a href="/#/zh_CN/unit/catear">
+  <a href="/#/en/unit/catear">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_catear_01.png">
-  <p class="item-title"  >CatEar</p>
+  <p class="item-title">CatEar</p>
   </a>
 </div>
 
+
 <div class="item">
-  <a href="/#/zh_CN/unit/butterfly">
+  <a href="/#/en/unit/butterfly">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/app/butterfly_01.jpg">
-  <p class="item-title"  >BUTTERFLY</p>
+  <p class="item-title">BUTTERFLY</p>
   </a>
 </div>
 
+
 <div class="item">
-  <a href="/#/zh_CN/1515/6060-push">
+  <a href="/#/en/1515/6060-push">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/1515/6060_push_01.jpg">
   <p class="item-title"> 6060-PUSH</p>
   </a>
 </div>
 
+
 <div class="item">
-  <a href="/#/zh_CN/app/m5scale_diy_kit">
+  <a href="/#/en/app/m5scale_diy_kit">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/app/m5scale_diy_kit_01.jpg">
   <p class="item-title">M5SCALE DIY Kit</p>
   </a>
 </div>
 
+
 <div class="item">
-  <a href="/#/zh_CN/app/ac_socket">
+  <a href="/#/en/app/ac_socket">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/app/ac_socket_01.jpg">
   <p class="item-title">AC Socket</p>
   </a>
 </div>
 
-
 <div class="item">
-  <a href="/#/zh_CN/base/pm2.5">
+  <a href="/#/en/base/pm2.5">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_pm25_01.jpg">
-    <p class="item-title"  >PM2.5</p>
   </a>
+  <p class="item-title">PM2.5</p>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/base/iiot_dual_switch_kit_with_core">
+  <a href="/#/en/base/iiot_dual_switch_kit_with_core">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/iiot_dual_switch%20kit_with_core_01.jpg">
   <p class="item-title">IIoT Dual-Switch Kit</p>
   </a>
 </div>
 
 
+</div>
 
 
 ***
-<!--Below is adding on  -->
 
+<div id="accessory" >
 
-<div id="accessory">
-     <img src="assets/img/product_pics/icon_accessory.png" style="vertical-align:middle;">
-     <span style="font-size:30px">Accessory</span>
-</div>
+**Accessory**
 
 <div class="item">
-  <a href="/#/zh_CN/accessory/converter/grove_t">
+  <a href="/#/en/accessory/converter/grove_t">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/grove_t_01.png">
-  <p class="item-title"  >Grove-T</p>
+  <p class="item-title">Grove-T</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/accessory/cable/grove_cable">
+  <a href="/#/en/accessory/cable/grove_cable">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/grove_cable_01.png">
-  <p class="item-title"  >Grove Cable</p>
+  <p class="item-title">Grove Cable</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/accessory/converter/grove2grove">
+  <a href="/#/en/accessory/converter/grove2grove">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/acs_g2g_01.jpg">
-  <p class="item-title"  >GROVE2GROVE</p>
+  <p class="item-title">GROVE2GROVE</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/accessory/screw">
+  <a href="/#/en/accessory/screw">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/screw_p1.png">
-  <p class="item-title"  >SCREW</p>
+  <p class="item-title">SCREW</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/accessory/bus_socket">
+  <a href="/#/en/accessory/bus_socket">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/acs_bus_socket_01.jpg">
-  <p class="item-title"  >BUS-Socket</p>
+  <p class="item-title">BUS-Socket</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/accessory/frame">
+  <a href="/#/en/accessory/frame">
     <img src="assets/img/product_pics/accessory/frame_01.jpg">
-  <p class="item-title"  >Frame</p>
-  </a>
+  <p class="item-title">Frame</p>
+ </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/unit/trace">
+  <a href="/#/en/unit/trace">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_trace_01.png">
-  <p class="item-title"  >TRACE</p>
-  </a>
+  <p class="item-title">TRACE</p>
+ </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/module/proto_kit">
+  <a href="/#/en/module/proto_kit">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_proto_02.jpg">
-  <p class="item-title"  >PROTO-KIT</p>
-  </a>
+  <p class="item-title">PROTO-KIT</p>
+ </a>
 </div>
 
-
 <div class="item">
-  <a href="/#/zh_CN/tool/usb_downloader">
+  <a href="/#/en/tool/usb_downloader">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/tool/usb_downloader_01.png">
-  <p class="item-title"  >USB Downloader</p>
+  <p class="item-title">USB Downloader</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/tool/usb_isp">
+  <a href="/#/en/tool/usb_isp">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/tool/tool_usb_isp_01.png">
-  <p class="item-title"  >USB-ISP</p>
+  <p class="item-title">USB-ISP</p>
   </a>
 </div>
 
-
 <div class="item">
-  <a href="/#/zh_CN/accessory/glass_panel_repair_kit">
+  <a href="/#/en/accessory/glass_panel_repair_kit">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/glass_panel_repair_kit_01.jpg">
   <p class="item-title">Glass Panel Repair Kit</p>
   </a>
@@ -1109,55 +1103,61 @@
 
 
 <div class="item">
-  <a href="/#/zh_CN/accessory/485t">
+  <a href="/#/en/accessory/485t">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/485t_01.jpg">
   <p class="item-title">485T</p>
   </a>
 </div>
 
+
 <div class="item">
-  <a href="/#/zh_CN/accessory/watch">
+  <a href="/#/en/accessory/watch">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/watch_01.jpg">
   <p class="item-title">Watch</p>
   </a>
 </div>
 
 
-***  
+</div>
+
+
+***
 
 <div id="aluminium">
-     <img src="assets/img/product_pics/icon_1515.jpg" style="vertical-align:middle;">
-     <span style="font-size:30px">Aluminium Profile</span>
-</div>
 
+**Aluminium Profil**
 
 <div class="item">
-  <a href="/#/zh_CN/1515/corner">
+  <a href="/#/en/1515/corner">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/acs_corner_01.jpg">
-  <p class="item-title"  >CORNER</p>
+  <p class="item-title">CORNER</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/1515/nut">
+  <a href="/#/en/1515/nut">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/acs_nut_01.jpg">
-  <p class="item-title"  >NUT</p>
+  <p class="item-title">NUT</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/1515/connectors">
+  <a href="/#/en/1515/connectors">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/1515/ap_30_01.jpg">
-  <p class="item-title"  > Connector</p>
+  <p class="item-title"> Connector</p>
   </a>
 </div>
 
 <div class="item">
-  <a href="/#/zh_CN/1515/ap">
+  <a href="/#/en/1515/ap">
     <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/1515/ap_ap_01.jpg">
-  <p class="item-title"  > Aluminium-Profile</p>
+  <p class="item-title"> Aluminium-Profile</p>
   </a>
 </div>
+</div>
+
+</div>
+
 
 
 <!-- <script>
@@ -1166,9 +1166,14 @@
                   <img class="logo" src="//cdn.shopify.com/s/files/1/0056/7689/2250/t/2/assets/magnifier.png?14592" style="position: absolute; top: 50px; left: 50px;">
               </div>`);
      });
+
+
+
 </script> -->
 
 
+
+
 <div class="container">
 
   <div class="modal fade" id="Core_I2C">
@@ -1245,6 +1250,60 @@
 </div>
 </div>
 </div>
+</div>
 
 
-</div>
\ No newline at end of file
+<script>
+
+  var scrollFunc = function (e) {  
+  e = e || window.event;  
+  // if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件    
+      var test = window.location.href;
+      if(((test.slice(-4) == "/en/")||(test.slice(-7)== "/zh_CN/"))||((test.indexOf(/en/) == -1) && (test.indexOf(/zh_CN/) == -1))){
+        $(".btn-group-vertical button").addClass("btn-light");
+        if((core.getBoundingClientRect().top + core.getBoundingClientRect().height) > 200){
+            $(".mb-navigation").text('Core');
+            $("#core-btn").removeClass("btn-light");
+            $("#core-btn").addClass("btn-primary");
+        }else if((module.getBoundingClientRect().top + module.getBoundingClientRect().height) > 200){
+            $(".mb-navigation").text('Module');
+            $("#module-btn").removeClass("btn-light");
+            $("#module-btn").addClass("btn-primary"); 
+        }else if((base.getBoundingClientRect().top + base.getBoundingClientRect().height) > 200){
+            $(".mb-navigation").text('Base');          
+            $("#base-btn").removeClass("btn-light");
+            $("#base-btn").addClass("btn-primary");  
+        }else if((unit.getBoundingClientRect().top + unit.getBoundingClientRect().height) > 200){
+            $(".mb-navigation").text('Unit');           
+            $("#unit-btn").removeClass("btn-light");
+            $("#unit-btn").addClass("btn-primary");  
+        }else if((application.getBoundingClientRect().top + application.getBoundingClientRect().height) > 200){
+            $(".mb-navigation").text('Application');          
+            $("#application-btn").removeClass("btn-light");
+            $("#application-btn").addClass("btn-primary");  
+        }else if((accessory.getBoundingClientRect().top + accessory.getBoundingClientRect().height) > 700){
+            $(".mb-navigation").text('Accessory');          
+            $("#accessory-btn").removeClass("btn-light");
+            $("#accessory-btn").addClass("btn-primary");  
+        }else if((aluminium.getBoundingClientRect().top + aluminium.getBoundingClientRect().height) > 600){
+            $(".mb-navigation").text('Aluminium');           
+            $("#aluminium-btn").removeClass("btn-light");
+            $("#aluminium-btn").addClass("btn-primary");  
+        }
+      // }
+  }  
+} 
+/*IE、Opera注册事件*/
+if(document.attachEvent){
+  document.attachEvent('onmousewheel',scrollFunc);
+
+}
+//Firefox使用addEventListener添加滚轮事件  
+if (document.addEventListener) {//firefox  
+  document.addEventListener('DOMMouseScroll', scrollFunc, false);  
+}  
+//Safari与Chrome属于同一类型
+// window.onmousewheel = document.onmousewheel = scrollFunc;
+// window.onscroll = document.onscroll = scrollFunc;
+window.onscroll = scrollFunc;
+</script>
\ No newline at end of file