build: add touch key

Author: 9m-ele

assets/css/main.css

@@ -1039,75 +1039,35 @@ mark {
     background-color: rgb(15, 194, 215);
 }
 
-/* .anchor-box a:first-child {
-    border-top-right-radius: 5px;
-    background-color: rgb(15, 194, 237) ;
-}
-
-.anchor-box a {
-    background-color: rgb(15, 194, 237) ;
-} */
-
 .anchor-box a:nth-child(8) {
     /* border-bottom-right-radius: 5px; */
     background-color: rgb(15, 194, 237) ;
 }
 .anchor-box a:nth-child(9) {
-    border-bottom-right-radius: 5px;
     background-color: rgb(15, 194, 255) ;
 }
-
-#gateway strong:hover {
-    background-color: rgba(15, 194, 237,0.3);
-}
-
-#cubecell strong:hover {
-    background-color: rgba(15, 194, 237,0.3);
-}
-
-#esp32_lora strong:hover {
-    background-color: rgba(15, 194, 237,0.3);
-}
-
-#stm32_lora strong:hover {
-    background-color: rgba(15, 194, 237,0.3);
-}
-
-#esp32_arduino strong:hover {
-    background-color: rgba(15, 194, 237,0.3);
-}
-
-#esp8266_arduino strong:hover {
-    background-color: rgba(15, 194, 237,0.3);
-}
-
-#oled strong:hover {
-    background-color: rgba(15, 194, 237,0.3);
+.anchor-box a:nth-child(10) {
+    border-bottom-right-radius: 5px;
+    background-color: hsla(195, 91%, 50%, 0.842);
 }
 
+#gateway strong:hover,
+#cubecell strong:hover,
+#esp32_lora strong:hover,
+#stm32_lora strong:hover,
+#esp32_arduino strong:hover,
+#esp8266_arduino strong:hover,
+#oled strong:hover,
 #e_ink strong:hover {
     background-color: rgba(15, 194, 237,0.3);
 }
-/* #accessories strong:hover {
-    background-color: rgba(15, 194, 237,0.3);
-} */
-
-/* .anchor-active{
-    background-color: rgb(15, 93, 237) !important;
-    box-shadow: 0 10px 30px 0 rgba(51,51,51,.5) !important;
-    -moz-box-shadow: 0 10px 30px 0 rgba(51,51,51,.5) !important;
-    -webkit-box-shadow: 0 10px 30px 0 rgba(51,51,51,.5) !important;
-} */
-
-/* .anchor-quiet {
-    background-color: rgb(15, 93, 237) !important;
-    box-shadow: 0 10px 30px 0 rgba(51,51,51,.5) !important;
-    -moz-box-shadow: 0 10px 30px 0 rgba(51,51,51,.5) !important;
-    -webkit-box-shadow: 0 10px 30px 0 rgba(51,51,51,.5) !important;
-} */
-
-
 
+#touch_key
+.item>a 
+img {
+    /* width: 220px;
+    height: 97px; */
+}
 
 @media screen and (max-width: 1450px) {
     .anchor-box {
@@ -1137,14 +1097,4 @@ mark {
         flex-direction:column;
         z-index: 9999;
     }
-
-    /* .anchor-active {
-        float: left;
-        transform: translateX(-600px) !important;
-    }
-
-    .anchor-quiet {
-        float: left;
-        transform: translateX(-600px) !important;
-    } */
 }

index.html

@@ -338,6 +338,8 @@ <h5 class="my-0 mr-md-auto font-weight-normal">
             }
             else if(anchor_name === "ACCESSORIES") {
                 $(".anchor-box").append(Part_A+Part_B);
+            } else if (anchor_name === "TOUCH_KEY") {
+                $('.anchor-box').append(Part_A + Part_B);
             }
         }
         function anchor_search(purchase_link="none",quickstart_link="none"){

index.md

@@ -141,9 +141,13 @@
       //HT-M01 to RPI Special converter
       {a:'https://heltec.cn/product/m01-converter/', img:'http://resource.heltec.cn/img/docs/accessories/M01_To_RPI.jpg',p:'HT-M01 to RPI Special converter'}
    ];
+
+   const touchKeyList = [
+      {a: 'https://heltec.org/project/touch-button/', img: 'http://resource.heltec.cn/img/docs/touch_key_1.jpg', p: 'Touch Key'}
+   ]
     // var product = [core,module,unit,base,application,accessory,aluminium];
-    var product_class = [gateway_list,cubecell_list,esp32_lora_list,stm32_lora_list,esp32_arduino_list,esp8266_arduino_list,oled_list,e_ink_list,accessories_list];
-    var product_class_name = ["gateway","cubecell","esp32_lora","stm32_lora","esp32_arduino","esp8266_arduino","oled","e_ink","accessories"];
+    var product_class = [gateway_list,cubecell_list,esp32_lora_list,stm32_lora_list,esp32_arduino_list,esp8266_arduino_list,oled_list,e_ink_list,accessories_list, touchKeyList];
+    var product_class_name = ["gateway","cubecell","esp32_lora","stm32_lora","esp32_arduino","esp8266_arduino","oled","e_ink","accessories", 'touch_key'];
 
     for (var i=0; i<product_class_name.length; i++){
       $(".product_page").append("<div></div>");
@@ -236,6 +240,10 @@
         if(product_class[class_num][i].a === 'https://heltec.cn/product/solar-charging-panel/' ){
            $("#"+product_class_name[class_num]).append('<br><p><strong>Accessories</strong></p>');
         }
+        //touch key
+        if(product_class[class_num][i].a === 'https://heltec.org/project/touch-button/' ){
+           $("#"+product_class_name[class_num]).append('<br><p><strong>Touch Key</strong></p>');
+        }
 
         $("#"+product_class_name[class_num]).append("<div class='item'><a><img><p class='item-title'></p><br></a></div> ");
         $("#"+product_class_name[class_num]+" .item:last-child a").attr("href", product_class[class_num][i].a);//允许图片链接
@@ -309,6 +317,9 @@
 
         $("#accessories div.item a:lt("+accessories_list.length+")").append(mask_html);
         $("#accessories .mask a").attr("href", "javascript:void(0)");
+
+        $(`#touch_key div.item a:lt(${touchKeyList.length})`).append(mask_html);
+        $('#touch_key .mask a').attr('href', 'javascript:void(0)');
 
         anchor_search();
         scrollFunc();

zh_CN/README.md

@@ -144,9 +144,13 @@
       {a:'https://heltec.org/product/m01-converter/', img:'http://resource.heltec.cn/img/docs/accessories/M01_To_RPI.jpg',p:'HT-M01 to RPI Special converter'},
    ];
 
+   const touchKeyList = [
+      {a: 'https://heltec.org/project/touch-button/', img: 'http://resource.heltec.cn/img/docs/touch_key_1.jpg', p: 'Touch Key'}
+   ]
+
     // var product = [core,module,unit,base,application,accessory,aluminium];
-    var product_class = [gateway_list,cubecell_list,esp32_lora_list,stm32_lora_list,esp32_arduino_list,esp8266_arduino_list,oled_list,e_ink_list, accessories_list];
-    var product_class_name = ["gateway","cubecell","esp32_lora","stm32_lora","esp32_arduino","esp8266_arduino","oled","e_ink", "accessories"];
+    var product_class = [gateway_list,cubecell_list,esp32_lora_list,stm32_lora_list,esp32_arduino_list,esp8266_arduino_list,oled_list,e_ink_list, accessories_list, touchKeyList];
+    var product_class_name = ["gateway","cubecell","esp32_lora","stm32_lora","esp32_arduino","esp8266_arduino","oled","e_ink", "accessories", 'touch_key'];
 
     for (var i=0; i<product_class_name.length; i++){
       $(".product_page").append("<div></div>");
@@ -238,6 +242,13 @@
          if(product_class[class_num][i].a === 'https://heltec.org/product/solar-charging-panel/' ){
             $("#"+product_class_name[class_num]).append('<br><p><strong>Accessories</strong></p>');
          }
+
+                 //touch key
+        if(product_class[class_num][i].a === 'https://heltec.org/project/touch-button/' ){
+           $("#"+product_class_name[class_num]).append('<br><p><strong>Touch Key</strong></p>');
+        }
+
+
          $("#"+product_class_name[class_num]).append("<div class='item'><a><img><p class='item-title'></p><br></a></div> ");//<br>不能少
          $("#"+product_class_name[class_num]+" .item:last-child a").attr("href", product_class[class_num][i].a);//允许图片链接
          $("#"+product_class_name[class_num]+" .item:last-child img").attr("src", product_class[class_num][i].img);//产品的图片
@@ -308,6 +319,9 @@
 
          $("#accessories div.item a:lt("+accessories_list.length+")").append(mask_html);//lt后面括号内的数字代表该类中需要添加掩盖页的数量
          $("#accessories .mask a").attr("href", "javascript:void(0)");
+
+         $(`#touch_key div.item a:lt(${touchKeyList.length})`).append(mask_html);
+         $('#touch_key .mask a').attr('href', 'javascript:void(0)');
 
          anchor_search();
          scrollFunc();