From df9bb052a9271297169a0fefe05bb985e178472b Mon Sep 17 00:00:00 2001
From: ASDK <168300808+theonlyasdk@users.noreply.github.com>
Date: Sat, 20 Dec 2025 14:12:34 +0530
Subject: [PATCH] Fixed grammar and made some UI refinements

---
 bt/all.js                             |   2 +-
 bt/loading.js                         |   4 +-
 bt/phone_sysToast.js                  |   2 +-
 bt/style.css                          |   2 +-
 index.html                            | 115 +++++++---------
 publicBeta/settingsApp/settingsApp.js |   2 +-
 settingsApp/settingsApp.js            |   2 +-
 style.css                             | 188 ++++++++++++++++----------
 8 files changed, 170 insertions(+), 147 deletions(-)

diff --git a/bt/all.js b/bt/all.js
index 21aec0a..027e92b 100644
--- a/bt/all.js
+++ b/bt/all.js
@@ -2019,7 +2019,7 @@ function handleBoxPass2() {
       : "#ffffff";
     finger_biometrics = box_pass2.classList.contains("off") ? 0 : 1;
     localStorage.setItem("finger_saved", finger_biometrics.toString());
-  } else tb_system("create password first");
+  } else tb_system("To add a fingerprint, please set a password");
 }
 
 function add_pass_events() {
diff --git a/bt/loading.js b/bt/loading.js
index 3c020a6..f19d103 100644
--- a/bt/loading.js
+++ b/bt/loading.js
@@ -9,14 +9,14 @@ setTimeout(() => {
     finger_print.play();
 
     const el = document.getElementById("lolhaha");
-    if (!el || el.textContent.trim() !== "tiktok: @sungsamtech - @._naq.") {
+    if (!el || el.textContent.trim() !== "TikTok: @sungsamtech - @._naq.") {
       localStorage.clear();
       sessionStorage.clear();
       location.reload();
     }
   }, 300);
   const el = document.getElementById("lolhaha");
-  if (!el || el.textContent.trim() !== "tiktok: @sungsamtech - @._naq.") {
+  if (!el || el.textContent.trim() !== "TikTok: @sungsamtech - @._naq.") {
     localStorage.clear();
     sessionStorage.clear();
     location.reload();
diff --git a/bt/phone_sysToast.js b/bt/phone_sysToast.js
index a856fa2..c97adb1 100644
--- a/bt/phone_sysToast.js
+++ b/bt/phone_sysToast.js
@@ -21,7 +21,7 @@ function call_phone() {
   let num = display_phone.innerText;
   display_phone.innerText = " ";
   if (num == "*#0*#") showPopup_open_close("control_panel_hws_phone", "block");
-  else if (num != "") tb_system("SIM card not found");
+  else if (num != "") tb_system("Call failed: No SIM");
   if (num == "") tb_system("Enter numbers");
 }
 
diff --git a/bt/style.css b/bt/style.css
index 10e8df6..a103558 100644
--- a/bt/style.css
+++ b/bt/style.css
@@ -1,3 +1,4 @@
+
 :root {
   -webkit-tap-highlight-color: transparent;
   --bg--text_lock_screen: "";
@@ -1687,7 +1688,6 @@ input[type="file"] {
   width: 260px;
   max-width: 400px;
   margin: 0 auto 15px;
-  transition: all 0.2s;
 }
 .setting-item3 {
   display: flex;
diff --git a/index.html b/index.html
index 35b6bd7..5e15fce 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,9 @@
     />
     <meta name="color-scheme" content="light" />
     <title>OriginOS</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;300;400&display=swap"
       rel="stylesheet"
@@ -16,6 +19,7 @@
       href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap"
       rel="stylesheet"
     />
+    <link href="https://fonts.googleapis.com/css2?family=BBH+Bogle&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <link
       href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Anton&family=Archivo+Black&family=Bebas+Neue&family=Black+Han+Sans&family=Chakra+Petch&family=Comfortaa&family=Indie+Flower&family=Merriweather&family=Orbitron&family=Pacifico&family=Paytone+One&family=Righteous&family=Roboto&family=Silkscreen&family=VT323&display=swap"
       rel="stylesheet"
@@ -30,15 +34,10 @@
       href="https://fonts.googleapis.com/css2?family=Fredoka&display=swap"
       rel="stylesheet"
     />
-
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
       rel="stylesheet"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=backspace"
@@ -265,7 +264,7 @@
             document.getElementById('allApp').style.display = 'flex';
             powerbtn.addEventListener('click', powerbtnEvent);"
             >
-              Go to OriginWEB
+              OK, let's go!
             </button>
           </div>
         </div>
@@ -601,7 +600,7 @@
         </div>
         <div class="box" id="box2">
           <div class="app" id="app2">
-            <div class="center_item">none</div>
+            <div class="center_item">Files</div>
           </div>
         </div>
         <div class="box" id="box3">
@@ -639,7 +638,7 @@
               <div class="player-popup_music" id="playerPopup_music">
                 <div
                   onclick="closePlayer_music()"
-                  style="background: none; position: absolute; right: 10px"
+                  style="background: none;"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -653,6 +652,7 @@
                     />
                   </svg>
                 </div>
+
                 <img id="popupImage_music" src="" alt="Album Art" />
                 <div class="popup-title_music" id="popupTitle_music"></div>
                 <div class="controls_music">
@@ -760,14 +760,14 @@
                 id="animation_name_setting"
                 style="left: 60px"
               >
-                Animation
+                Animations
               </div>
               <div
                 class="left-text-small"
                 id="animation_name_small_setting"
                 style="left: 60px"
               >
-                Animation Speed
+                Animation Speed &middot; Blur
               </div>
             </div>
             <div class="khaysetting4" id="theme_setting">
@@ -787,7 +787,7 @@
                 id="theme_name_small_setting"
                 style="left: 60px"
               >
-                Wallpaper &middot; Finger Print
+                Wallpaper &middot; Fingerprint
               </div>
             </div>
             <div class="khaysetting5" id="audio_setting">
@@ -830,7 +830,7 @@
                 </svg>
               </div>
               <div class="left-text" id="lock_name_style" style="left: 60px">
-                Lock style
+                Passwords & Security
               </div>
               <div
                 class="left-text-small"
@@ -1006,17 +1006,17 @@ <h1>
               </div>
             </div>
             <div class="app4app" id="app4animation" style="z-index: 123213123">
-              <div class="back-button" id="back_to_setting2">Animation</div>
+              <div class="back-button" id="back_to_setting2">Animations</div>
               <div class="box-wrapper">
                 <div class="scaling-box" id="scaling-box"></div>
               </div>
               <div class="speed-container">
-                <div class="speed-box" data-speed="0.6">0.8x</div>
-                <div class="speed-box active" data-speed="0.7">1x</div>
-                <div class="speed-box" data-speed="1">1.5x</div>
-                <div class="speed-box" data-speed="3">4x</div>
-                <div class="speed-box" data-speed="6">8x</div>
-                <div class="speed-box" data-speed="8">10x</div>
+                <div class="speed-box active-scale-effect" data-speed="0.6">0.8x</div>
+                <div class="speed-box active-scale-effect active" data-speed="0.7">1x</div>
+                <div class="speed-box active-scale-effect" data-speed="1">1.5x</div>
+                <div class="speed-box active-scale-effect" data-speed="3">4x</div>
+                <div class="speed-box active-scale-effect" data-speed="6">8x</div>
+                <div class="speed-box active-scale-effect" data-speed="8">10x</div>
               </div>
               <div class="setting-item">
                 <div class="setting-title">Blur</div>
@@ -1027,7 +1027,7 @@ <h1>
                 ></div>
               </div>
               <div class="setting-item" id="animation_more_btn">
-                <div class="setting-title">Animation tuning</div>
+                <div class="setting-title">Animation Tuning</div>
                 <div class="toggle-switch" id="none2" style="opacity: 0"></div>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -1043,10 +1043,10 @@ <h1>
 
               <div class="app4app" id="app4MoreAnimation">
                 <div class="back-button" id="back_to_setting_MoreAnimation">
-                  Animation tuning
+                  Animation Tuning
                 </div>
                 <div class="setting-item" id="anim_unlock_btn">
-                  <div class="setting-title">Unlock animation</div>
+                  <div class="setting-title">Device Unlock Animations</div>
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     height="24px"
@@ -1060,7 +1060,7 @@ <h1>
                 </div>
 
                 <div class="setting-item" id="anim_open_app_btn">
-                  <div class="setting-title">App opening animation</div>
+                  <div class="setting-title">App Open Animations</div>
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     height="24px"
@@ -1074,7 +1074,7 @@ <h1>
                 </div>
 
                 <div class="setting-item" id="anim_close_app_btn">
-                  <div class="setting-title">App closing animation</div>
+                  <div class="setting-title">App Close Animations</div>
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     height="24px"
@@ -1088,7 +1088,7 @@ <h1>
                 </div>
 
                 <div class="setting-item" id="ControlsCenterAnimBtn">
-                  <div class="setting-title">Controls center animation</div>
+                  <div class="setting-title">Control Center Animations</div>
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     height="24px"
@@ -1115,7 +1115,7 @@ <h1>
                     border-bottom-right-radius: 0;
                   "
                 >
-                  <div class="setting-title">upload animation file .txt</div>
+                  <div class="setting-title">Import animation tuning (.txt)</div>
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     height="24px"
@@ -1132,7 +1132,7 @@ <h1>
                   id="exportConfigBtn"
                   style="border-radius: 0"
                 >
-                  <div class="setting-title">Export animation file .txt</div>
+                  <div class="setting-title">Export animation tuning (.txt)</div>
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     height="24px"
@@ -1155,12 +1155,12 @@ <h1>
                     showPopup2_alert(
                       `Join our group to find animation config file!`,
                       `Join`,
-                      `No`,
+                      `Cancel`,
                       () => { window.open("https://t.me/OriginWEBChat", "_blank");},
                       () =>{})
                     '
                 >
-                  <div class="setting-title">Get animation config file?</div>
+                  <div class="setting-title">Get more animations</div>
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     height="24px"
@@ -1175,7 +1175,7 @@ <h1>
 
                 <div class="app4app" id="app4UnlockAnimation">
                   <div class="back-button" id="back_UnlockAnimation">
-                    Animation unlock
+                    Unlock animation
                   </div>
                   <div class="all_cubic_custom_opening">
                     <div
@@ -1183,7 +1183,7 @@ <h1>
                       id="reset_anim_unlock_btn"
                     >
                       <div class="setting-title" style="font-size: 20px">
-                        reset
+                        Reset to defaults
                       </div>
                     </div>
 
@@ -1377,7 +1377,7 @@ <h1>
                     </div>
 
                     <div class="section">
-                      <h3>speed animation unlock</h3>
+                      <h3>Unlock Animation Speed</h3>
                       <div class="label">
                         Speed: <span id="timeAnimationUnlockVal">0.6</span>s
                       </div>
@@ -1438,7 +1438,7 @@ <h3>Aspect-Ratio Animation</h3>
                     </div>
 
                     <div class="section" id="section-all">
-                      <h3>Scale Animation</h3>
+                      <h3>Icon Scale Animation</h3>
 
                       <div class="label">
                         Time: <span id="timeAllVal">0.4</span>s
@@ -1673,7 +1673,7 @@ <h3>Icon position and hiding time when open app</h3>
                     </div>
 
                     <div class="setting-item_volume sectionForSttingItem">
-                      <div class="setting-title_volume">Multiple click</div>
+                      <div class="setting-title_volume">Multiple click animations</div>
                       <div
                         class="toggle-switch_volume active"
                         id="multipleClickAppToggle"
@@ -2031,7 +2031,7 @@ <h3>Navigation bar sensitivity and maximum drag</h3>
                 id="app4wallpaper"
                 style="z-index: 100213923; display: none"
               >
-                <div class="back-button" id="back_to_setting4">WallPaper</div>
+                <div class="back-button" id="back_to_setting4">Wallpaper</div>
                 <div class="button-row" id="button-row">
                   <div
                     class="img-button active"
@@ -3301,7 +3301,7 @@ <h3>Select scope of application</h3>
 
               <div class="app4app" id="app4finger">
                 <div class="back-button" id="back_to_setting9">
-                  Finger print
+                  Fingerprint
                 </div>
                 <div class="half-border-box">
                   <img
@@ -3354,9 +3354,9 @@ <h3>Select scope of application</h3>
               </div>
             </div>
             <div class="app4app" id="app4audio" style="z-index: 123213123">
-              <div class="back-button" id="back_to_setting11">Sound</div>
+              <div class="back-button" id="back_to_setting11">Media & Sounds</div>
               <div class="volume-setting_volume">
-                <div class="setting-title_volume">Master Volume</div>
+                <div class="setting-title_volume">Media Volume</div>
                 <input
                   type="range"
                   id="volume_all_slider"
@@ -3405,7 +3405,7 @@ <h3>Select scope of application</h3>
               </div>
             </div>
             <div class="app4app" id="app4lockstyle" style="z-index: 123213123">
-              <div class="back-button" id="back_to_setting13">Lock style</div>
+              <div class="back-button" id="back_to_setting13">Passwords & Security</div>
               <div id="all_box_pass">
                 <div class="box_pass" id="box_pass1">
                   <div class="setting-title" style="margin: 15px">Password</div>
@@ -3425,7 +3425,7 @@ <h3>Select scope of application</h3>
                     class="setting-title"
                     style="margin: 13px; margin-top: 16px; font-size: 15px"
                   >
-                    FingerPrint
+                    Fingerprint
                   </div>
                   <div class="left-text-small2" id="status_pass2">ON</div>
                   <svg
@@ -3566,17 +3566,17 @@ <h3>Select scope of application</h3>
         </div>
         <div class="box" id="box5">
           <div class="app" id="app5">
-            <div class="center_item">none</div>
+            <div class="center_item">Messaging</div>
           </div>
         </div>
         <div class="box" id="box6">
           <div class="app" id="app6">
-            <div class="center_item">none</div>
+            <div class="center_item">Gallery</div>
           </div>
         </div>
         <div class="box" id="box7">
           <div class="app" id="app7">
-            <div class="center_item">none</div>
+            <div class="center_item">Calendar</div>
           </div>
         </div>
         <div class="box" id="box8">
@@ -3623,14 +3623,9 @@ <h3>Select scope of application</h3>
                   <div
                     class="navicon_phone"
                     style="
-                      background: url('originos_data/phone.jpg') no-repeat
-                        center;
+                      background: url('originos_data/phone.jpg') no-repeat center;
                       background-size: contain;
                       filter: invert(1);
-                      margin-left: 23%;
-                      margin-top: 10%;
-                      width: 30px;
-                      height: 30px;
                     "
                   ></div>
                 </button>
@@ -3710,7 +3705,7 @@ <h3>Select scope of application</h3>
         </div>
         <div class="box" id="box10">
           <div class="app" id="app10">
-            <div class="center_item">none</div>
+            <div class="center_item">Compass</div>
           </div>
         </div>
         <div class="box" id="box11">
@@ -3718,14 +3713,14 @@ <h3>Select scope of application</h3>
             <div class="date-display" id="dateText3"></div>
           </div>
           <div class="app" id="app11">
-            <div class="center_item">coming soon</div>
+            <div class="center_item">Clock Widget</div>
           </div>
         </div>
 
         <div class="box" id="box12">
           <div class="app" id="app12">
             <div class="widgetPreviewWallpaper" style="display: none"></div>
-            <div class="center_item">coming soon</div>
+            <div class="center_item">Gallery Widget</div>
           </div>
         </div>
 
@@ -3844,21 +3839,7 @@ <h3>Select scope of application</h3>
         </div>
       </div>
     </div>
-    <div
-      class="footer-text"
-      style="
-        bottom: -0px;
-        color: white;
-        font-size: 18px;
-        font-family: 'Noto sans', sans;
-        font-weight: bold;
-        z-index: 101000;
-        pointer-events: none;
-      "
-    >
-      V1.5.00
-    </div>
-    <div class="power-button" title="power-button"></div>
+    <div class="power-button" title="Power"></div>
 
     <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.10.2/lottie.min.js"></script>
diff --git a/publicBeta/settingsApp/settingsApp.js b/publicBeta/settingsApp/settingsApp.js
index 15aeacb..ec94f5f 100644
--- a/publicBeta/settingsApp/settingsApp.js
+++ b/publicBeta/settingsApp/settingsApp.js
@@ -401,7 +401,7 @@ function handleBoxPass2() {
       : "#ffffff";
     finger_biometrics = box_pass2.classList.contains("off") ? 0 : 1;
     localStorage.setItem("finger_saved", finger_biometrics.toString());
-  } else tb_system("create password first");
+  } else tb_system("To add a fingerprint, please set a password");
 }
 
 function add_pass_events() {
diff --git a/settingsApp/settingsApp.js b/settingsApp/settingsApp.js
index 02e2599..477ec3d 100644
--- a/settingsApp/settingsApp.js
+++ b/settingsApp/settingsApp.js
@@ -401,7 +401,7 @@ function handleBoxPass2() {
       : "#ffffff";
     finger_biometrics = box_pass2.classList.contains("off") ? 0 : 1;
     localStorage.setItem("finger_saved", finger_biometrics.toString());
-  } else tb_system("create password first");
+  } else tb_system("To add a fingerprint, please set a password");
 }
 
 function add_pass_events() {
diff --git a/style.css b/style.css
index 797a9cc..8f10e00 100644
--- a/style.css
+++ b/style.css
@@ -36,6 +36,7 @@ body {
   /* Scrollbar cho Firefox */
   scrollbar-width: thin;
   scrollbar-color: #bbb transparent;
+  font-family: 'Inter', sans;
 }
 :root {
   --bg-size_img: 115%;
@@ -165,7 +166,7 @@ body::-webkit-scrollbar-thumb:hover {
   left: 15px;
   transform: translateY(-50%);
   z-index: 4884;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 .left-text-small {
   position: absolute;
@@ -178,7 +179,7 @@ body::-webkit-scrollbar-thumb:hover {
   transform: translateY(-50%);
   z-index: 4884;
   color: #a2a2a2;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 /* Base box */
@@ -399,6 +400,10 @@ body::-webkit-scrollbar-thumb:hover {
   user-select: none;
   -webkit-user-select: none;
   -webkit-tap-highlight-color: transparent;
+  transition: 0.2s transform ease-in-out;
+}
+.clicke:hover {
+  transform: scale(0.9);
 }
 #clicke1 {
   bottom: 35px;
@@ -514,6 +519,9 @@ body::-webkit-scrollbar-thumb:hover {
 .thanh.open {
   display: block;
 }
+#name_setting {
+  font-weight: light !important;
+}
 #nav2 {
   position: absolute;
   width: 100%;
@@ -680,7 +688,7 @@ body::-webkit-scrollbar-thumb:hover {
   scale: 1;
   transform-origin: center;
   z-index: 4884;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   transition: all 0.6s cubic-bezier(0.23, 0.55, 0.54, 0.97);
   align-items: flex-end;
   justify-content: center;
@@ -846,7 +854,7 @@ body::-webkit-scrollbar-thumb:hover {
   flex-direction: column;
   align-items: center;
   justify-content: start;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   pointer-events: none;
 }
 .app {
@@ -920,7 +928,7 @@ body::-webkit-scrollbar-thumb:hover {
   color: rgb(78, 78, 78);
   font-size: 17px;
   z-index: 100;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: 600;
   z-index: 10010;
   transition: all 0.3s;
@@ -1059,7 +1067,7 @@ body::-webkit-scrollbar-thumb:hover {
   z-index: 20000;
   font-weight: 400;
   color: #ffffff;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   opacity: 0;
   transition: all 0.4s cubic-bezier(0.23, 0.55, 0.54, 0.97);
   pointer-events: none;
@@ -1083,7 +1091,7 @@ body::-webkit-scrollbar-thumb:hover {
   scale: 1;
   transform-origin: center;
   z-index: 4884;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   transition: all 0.3s ease-out;
 }
 /* Màn hình loading */
@@ -1121,7 +1129,7 @@ p {
   height: 0px;
   font-size: 15px;
   font-weight: 900;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   color: #ffffff;
 }
 .back-button {
@@ -1134,15 +1142,16 @@ p {
   background: none;
   border: none;
   cursor: pointer;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 20px;
   font-weight: bold;
   padding: 5px 10px;
   z-index: 1000;
-  transition: all 0.2s;
+  transition: all 0.1s ease-in-out;
 }
 .back-button:active {
-  color: gray;
+  color: grey;
+  transform: scale(0.99);
 }
 .back-button::before {
   content: "";
@@ -1198,7 +1207,8 @@ p {
 .khaysetting5:active,
 .khaysetting1-1:active,
 .khaysetting1-3:active {
-  filter: brightness(0.7);
+  filter: brightness(0.8);
+  transform: translateX(-50%) translateY(40px) scale(0.98);
 }
 
 .aboutI4Item {
@@ -1212,13 +1222,13 @@ p {
   gap: 5px;
 }
 .aboutI4ItemText {
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 15px;
   color: var(--bg--color);
   text-align: end;
 }
 .aboutI4ItemTextSmall {
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 11px;
   color: gray;
 }
@@ -1291,9 +1301,10 @@ p {
 .speed-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
+  gap: 0.4em;
   z-index: 1;
-  margin-top: 20px;
+  margin-top: 0.4em;
+  margin-bottom: 0.3em;
 }
 .speed-box {
   background: var(--bg--background2);
@@ -1495,7 +1506,7 @@ p {
   text-align: center;
   font-size: 15px;
   bottom: 0px;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: bold;
   transform: translateY(300px);
   transition: transform 0.4s cubic-bezier(0.27, 0, 0.47, -0.31);
@@ -1525,7 +1536,7 @@ p {
   cursor: pointer;
   background: var(--bg--background2);
   transition: background 0.2s;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: bold;
 }
 
@@ -1617,6 +1628,10 @@ input[type="file"] {
   max-width: 400px;
   transition: all 0.2s;
 }
+.setting-item:active {
+  filter: brightness(80%);
+  transform: scale(0.98);
+}
 .setting-item3 {
   display: flex;
   position: absolute;
@@ -1799,7 +1814,7 @@ input[type="file"] {
   cursor: pointer;
   border: 4px solid transparent;
   background: #202020;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   height: 35px;
   font-size: 20px;
 }
@@ -1813,7 +1828,7 @@ input[type="file"] {
   font-size: 16px;
   pointer-events: none;
   font-weight: bold;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 20px;
   color: gray;
 }
@@ -1965,7 +1980,7 @@ input[type="range"] {
   cursor: pointer;
   border: 2px solid transparent;
   background: #202020;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   height: 35px;
   font-size: 20px;
 }
@@ -1977,7 +1992,7 @@ input[type="range"] {
   font-size: 16px;
   pointer-events: none;
   font-weight: bold;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 20px;
   color: gray;
 }
@@ -2116,7 +2131,7 @@ input[type="range"] {
 
 #btn_font,
 #btn_main {
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   transition: all 0.3s;
   background-color: rgba(145, 145, 145, 0.5);
   padding-left: 40px;
@@ -2179,7 +2194,7 @@ input[type="range"] {
 .text_lock {
   position: absolute;
   z-index: 1;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: bold;
   font-size: 12px;
   color: rgba(147, 111, 134, 255);
@@ -2230,7 +2245,7 @@ input[type="range"] {
   z-index: 123;
   transition: all 0.4s ease;
   text-align: center;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   border-radius: var(--bg--border_radius_phone);
   background: linear-gradient(
     to bottom,
@@ -2277,7 +2292,7 @@ input[type="range"] {
   z-index: 123;
   transition: all 0.4s ease;
   text-align: center;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   border-radius: var(--bg--border_radius_phone);
   background: #000;
   flex-direction: column;
@@ -2435,17 +2450,23 @@ input[type="range"] {
   margin-bottom: 0px;
 }
 .btn_phone {
-  width: 70px;
-  margin-right: 15px;
-  margin-left: 15px;
-  height: 70px;
-  border-radius: calc(var(--bg--border_radius_system) + 5px);
+  width: 3em;
+  height: 3em;
+  margin-right: 0.3em;
+  margin-left: 0.3em;
+  margin-bottom: 10px;
+  border-radius: 100%;
   font-size: 1.5rem;
   border: none;
   font-weight: 550;
-  font-family: "Lato", sans-serif;
-  background: #ffffff00;
+  background: #ffffff;
   color: var(--bg--color);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  transition: transform 0.1s ease-in-out, filter 0.1s ease-in-out;
 }
 .btn_phone span {
   display: block;
@@ -2453,6 +2474,10 @@ input[type="range"] {
   font-weight: bold;
   color: #94ba94;
 }
+.btn_phone:active {
+  filter: brightness(80%);
+  transform: scale(0.9);
+}
 .callbtn_phone {
   width: 70px;
   height: 70px;
@@ -2474,12 +2499,13 @@ input[type="range"] {
 }
 .navbar_phone {
   position: absolute;
-  bottom: 20px;
+  bottom: 0.5em;
   width: 100%;
   display: flex;
   justify-content: center;
-  border-top: 2px solid #86868642;
-  padding: 8px 0;
+  border-top: 1px solid #86868642;
+  padding: 9px 0;
+  padding-top: 0.6em;
   gap: 50px;
 }
 .navitem_phone {
@@ -2498,7 +2524,6 @@ input[type="range"] {
 .navicon_phone {
   width: 20px;
   height: 20px;
-  margin-bottom: 4px;
 }
 .wallpaper-btn-2 {
   top: 53px;
@@ -2515,7 +2540,7 @@ input[type="range"] {
   justify-content: center;
   transition: scale 0.2s;
   font-size: 12px;
-  font-family: "noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 .wallpaper-btn-2:active {
   scale: 0.95;
@@ -2539,7 +2564,7 @@ input[type="range"] {
   justify-content: center;
   transition: scale 0.2s;
   font-size: 15px;
-  font-family: "noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 #back_to_setting6:active {
   scale: 0.95;
@@ -2569,7 +2594,7 @@ input[type="range"] {
   top: 45%;
   left: 50%;
   transform: translateX(-50%);
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 .scale-button {
@@ -2585,7 +2610,7 @@ input[type="range"] {
   );
   transition: all 0.3s ease;
   outline: none;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: 600;
 }
 
@@ -2606,7 +2631,7 @@ input[type="range"] {
   z-index: 10012310;
   opacity: 0;
   pointer-events: none;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   text-align: center;
   max-width: none;
   transition: all 0.4s, transform 0s ease 0.4s;
@@ -2685,7 +2710,7 @@ input[type="range"] {
   transition: all 0.3s ease;
   outline: none;
   font-weight: 600;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 .button-finger.acctive {
@@ -2734,7 +2759,7 @@ input[type="range"] {
   margin: 0 0 10px 0;
   font-size: 20px;
   font-weight: bold;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   color: var(--bg--color);
 }
 
@@ -2742,7 +2767,7 @@ input[type="range"] {
   margin: 0;
   font-size: 13px;
   font-weight: 400;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   color: var(--bg--color);
 }
 
@@ -2754,7 +2779,7 @@ input[type="range"] {
   font-size: 10px;
   color: var(--bg--color);
   z-index: 9999;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   overflow-y: scroll;
   height: calc(100% - 150px);
   scrollbar-width: none;
@@ -2780,7 +2805,7 @@ input[type="range"] {
 .footer-text2 {
   margin-top: 350px;
   font-size: 16px;
-  font-family: "noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: bold;
   color: rgb(255, 255, 255);
   z-index: 9999;
@@ -2791,7 +2816,7 @@ input[type="range"] {
 .footer-text-positionab {
   margin-top: 5px;
   font-size: 13px;
-  font-family: "noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: bold;
   color: gray;
   pointer-events: none;
@@ -2865,7 +2890,7 @@ input[type="range"] {
   width: 90%;
   max-width: 400px;
   font-size: 17px;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   border: 2px solid rgb(255, 255, 255);
 }
 .lang_button.selected_language {
@@ -2884,7 +2909,7 @@ input[type="range"] {
   width: 85%;
   font-weight: 600;
   font-size: 15px;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   outline: none;
   color: gray;
 }
@@ -2909,7 +2934,7 @@ input[type="range"] {
   font-weight: 500;
   font-weight: bold;
   font-size: 17px;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 .container_icon {
   width: 90%;
@@ -3253,7 +3278,7 @@ input[type="range"] {
   font-weight: bold;
   margin-left: 10px;
   transition: all 0.3s;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 .time_island.show {
   font-size: 30px;
@@ -3436,7 +3461,7 @@ input[type="range"] {
 .popup-title_music2 {
   position: absolute;
   font-size: 16px;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: bold;
   top: 30px;
   left: 90px;
@@ -3449,7 +3474,7 @@ input[type="range"] {
 
 .popup-author_music2 {
   position: absolute;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: bold;
   font-size: 14px;
   color: #aaa;
@@ -3647,6 +3672,7 @@ input[type="range"] {
 .container_password.show {
   background: #00000050;
   backdrop-filter: blur(10px);
+  border-radius: 42px;
 }
 
 .message_password {
@@ -3676,16 +3702,16 @@ input[type="range"] {
     transform: translateX(0);
   }
   20% {
-    transform: translateX(5px);
+    transform: translateX(10px);
   }
   40% {
-    transform: translateX(-5px);
+    transform: translateX(-10px);
   }
   60% {
-    transform: translateX(5px);
+    transform: translateX(10px);
   }
   80% {
-    transform: translateX(-5px);
+    transform: translateX(-10px);
   }
   100% {
     transform: translateX(0);
@@ -3693,7 +3719,7 @@ input[type="range"] {
 }
 
 .dots_password.shake_password {
-  animation: shaking_password 0.5s cubic-bezier(0.1, 0.51, 0.4, 0.96);
+  animation: shaking_password 0.4s cubic-bezier(0.1, 0.51, 0.4, 0.96);
 }
 
 .dot_password {
@@ -3743,7 +3769,7 @@ input[type="range"] {
   border-radius: 30px;
   cursor: pointer;
   user-select: none;
-  font-family: "noto sans", Sans-Serif;
+  font-family: "Inter", Sans-Serif;
   display: flex;
   opacity: 0;
   transform: translateY(7px) scale(0.9);
@@ -3751,6 +3777,7 @@ input[type="range"] {
 
 .key_password:active {
   scale: 0.95;
+  filter: brightness(60%);
 }
 .key_password.show {
   transform: none;
@@ -3996,7 +4023,7 @@ input[type="range"] {
   margin-left: 60px;
   transform: translateY(-50%);
   z-index: 4884;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 #icon_pass1 {
   position: absolute;
@@ -4195,6 +4222,11 @@ input[type="range"] {
   color: rgba(0, 0, 255, 0.65);
   transition: all 0.3s;
   z-index: 23;
+  cursor: pointer;
+}
+
+#click_setup:hover {
+  filter: brightness(70%);
 }
 
 #click_setup .text {
@@ -4246,7 +4278,7 @@ input[type="range"] {
   bottom: -20px;
   font-size: 13px;
   font-weight: bold;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 #setup_screenid_setup {
@@ -4299,7 +4331,7 @@ input[type="range"] {
   height: 50px;
   cursor: pointer;
   width: 45%;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: bold;
 }
 
@@ -4311,7 +4343,7 @@ input[type="range"] {
   height: 50px;
   cursor: pointer;
   width: 45%;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: bold;
 }
 
@@ -4428,7 +4460,7 @@ input[type="color"] {
   background-color: rgb(30, 30, 30);
   scroll-snap-align: center;
   border: 4px solid rgb(30, 30, 30);
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 15px;
   align-items: center;
   justify-content: center;
@@ -4456,7 +4488,7 @@ input[type="color"] {
   background-color: rgb(30, 30, 30);
   scroll-snap-align: center;
   border: 4px solid rgb(30, 30, 30);
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 15px;
   align-items: center;
   justify-content: center;
@@ -4518,7 +4550,7 @@ input[type="color"] {
   transition: all 0.3s;
   pointer-events: all;
   color: #ccc;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 12px;
 }
 .itemControlsCenter svg {
@@ -4597,7 +4629,7 @@ input[type="color"] {
   position: absolute;
   transform: translateY(45px);
   color: #ccc;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 12px;
 }
 
@@ -4640,7 +4672,7 @@ input[type="color"] {
 }
 #music_textControlsCenter {
   color: rgb(60, 60, 60);
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: bold;
   font-size: 15px;
   height: 20px;
@@ -4826,7 +4858,7 @@ canvas {
   transition: all 0.3s;
   pointer-events: all;
   color: #ccc;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 12px;
 }
 
@@ -4909,7 +4941,7 @@ canvas {
 .popup-message_alert {
   font-size: 14px;
   margin-bottom: 15px;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: bold;
 }
 
@@ -4924,7 +4956,7 @@ canvas {
   cursor: pointer;
   width: 100%;
   transition: opacity 0.2s;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: bold;
   color: var(--bg--color);
 }
@@ -4959,7 +4991,7 @@ canvas {
   background: transparent;
   font-size: 20px;
   font-weight: bold;
-  font-family: "Noto sans", sans-serif;
+  font-family: "Inter", sans-serif;
   color: gray;
   text-align: left;
   pointer-events: none;
@@ -4973,3 +5005,13 @@ canvas {
   max-width: 85%;
   color: gray;
 }
+
+
+.active-scale-effect{
+  transition: transform 0.2s ease-out, filter 0.1s ease-in-out;
+}
+
+.active-scale-effect:active {
+  filter: brightness(0.8);
+  transform: scale(0.95);
+}
\ No newline at end of file