webui: adjust input box

- Add animation on exit input
- Adjust position

module/webroot/index.js

@@ -508,25 +508,23 @@ function showPrompt(key, isSuccess = true, duration = 2000, preValue = "", postV
     }, 100);
 }
 
-// Function to handle input focus
-function handleFocus(event) {
-    setTimeout(() => {
+// Prevent input box blocked by keyboard
+inputs.forEach(input => {
+    input.addEventListener('focus', event => {
         document.body.classList.add(focusClass);
-        event.target.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }, 100);
-}
-
-// Function to handle input blur
-function handleBlur() {
-    setTimeout(() => {
+        setTimeout(() => {
+            const offsetAdjustment = window.innerHeight * 0.1;
+            const targetPosition = event.target.getBoundingClientRect().top + window.scrollY;
+            const adjustedPosition = targetPosition - (window.innerHeight / 2) + offsetAdjustment;
+            window.scrollTo({
+                top: adjustedPosition,
+                behavior: 'smooth',
+            });
+        }, 100);
+    });
+    input.addEventListener('blur', () => {
         document.body.classList.remove(focusClass);
-    }, 100);
-}
-
-// Add event listeners to each input
-inputs.forEach(input => {
-    input.addEventListener('focus', handleFocus);
-    input.addEventListener('blur', handleBlur);
+    });
 });
 
 // Scroll event

module/webroot/styles.css

@@ -2,10 +2,11 @@ body {
     background-color: #F5F5F5;
     padding-top: var(--window-inset-top);
     padding-bottom: var(--window-inset-bottom);
+    transition: padding-bottom 0.2s ease;
 }
 
 body.input-focused {
-    padding-bottom: 250px;
+    padding-bottom: 50vh;
 }
 
 .cover {