fix: 🐛 fix img position after screen rotate and update placeholder in index-en.html

Author: chaoyen1111

index-en.html

@@ -85,7 +85,7 @@
             />
           </svg>
         </div>
-        <footer >
+        <footer>
           <div id="monsterBlock">
             <div id="svgGreen" class="monster-btn">
               <svg viewBox="0 0 249.6 251.4">
@@ -421,7 +421,12 @@
                       rx="4.8"
                       ry="4.8"
                     />
-                    <circle style="fill: #ffffff" cx="129.5" cy="65.1" r="1.1" />
+                    <circle
+                      style="fill: #ffffff"
+                      cx="129.5"
+                      cy="65.1"
+                      r="1.1"
+                    />
                   </g>
                 </g>
               </svg>
@@ -716,7 +721,7 @@
             type="text"
             class="input-group-input"
             id="customMessage"
-            placeholder="輸入文字"
+            placeholder="Input text"
           />
           <button class="input-group-button">Send</button>
         </div>

js/main-en.js

@@ -381,6 +381,9 @@
   }
 
   // 處理中間圖片跟隨視窗大小移動位置
-  window.addEventListener('resize', imgPosition);
+  window.addEventListener('resize', () => {
+    kebbi.classList.remove('reset');
+    imgPosition();
+  });
 
 }();

js/main.js

@@ -350,12 +350,13 @@
         console.log('reset');
         mqttPush(list.topic1, list.kebbiReset);
       }
-      sendCheck();
+
       drag = false;
       kebbi.classList.remove('target');
       kebbi.classList.add('reset');
       kebbi.style.left = `${(content.offsetWidth - kebbi.offsetWidth) / 2}px`;
       kebbi.style.top = `${(content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2}px`;
+      sendCheck();
     }
 
     function updateCarSize() {
@@ -380,6 +381,9 @@
   }
 
   // 處理中間圖片跟隨視窗大小移動位置
-  window.addEventListener('resize', imgPosition);
+  window.addEventListener('resize', () => {
+    kebbi.classList.remove('reset');
+    imgPosition();
+  });
 
 }();