updated v1.17.1 --full, fixed locatins #314

app/build.gradle

@@ -10,8 +10,8 @@ android {
         applicationId "com.example.weathermaster"
         minSdk 22
         targetSdk 33
-        versionCode 116
-        versionName "1.17.0 (W)"
+        versionCode 117
+        versionName "1.17.1 (W)"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }
 

app/release/output-metadata.json

@@ -11,8 +11,8 @@
       "type": "SINGLE",
       "filters": [],
       "attributes": [],
-      "versionCode": 116,
-      "versionName": "1.17.0 (W)",
+      "versionCode": 117,
+      "versionName": "1.17.1 (W)",
       "outputFile": "app-release.apk"
     }
   ],

app/src/main/AndroidManifest.xml

@@ -156,6 +156,12 @@
             android:exported="true"
             android:theme="@style/yelloMainPage"
             />
+        <activity
+            android:name=".AppUnitsActivity"
+            android:screenOrientation="portrait"
+            android:exported="true"
+            android:theme="@style/yelloMainPage"
+            />
         <activity
             android:name=".MainActivity"
             android:theme="@style/app_theme"

app/src/main/assets/app/app.js

@@ -466,7 +466,11 @@ if (navigator.onLine) {
       ),
       "long"
     );
+
   }, 2000);
+
+
+
 }
 
 function handleGeolocationError(error) {
@@ -732,6 +736,8 @@ function saveLocationToContainer(locationName, lat, lon) {
 
 async function loadSavedLocations() {
   const savedLocationsHolder = document.querySelector("savedLocationsHolder");
+  savedLocationsHolder.innerHTML = "";
+
   const savedLocations =
     JSON.parse(localStorage.getItem("savedLocations")) || [];
 
@@ -742,10 +748,21 @@ async function loadSavedLocations() {
   }
 
   const currentTime = new Date().getTime();
-  savedLocationsHolder.innerHTML = "";
   let dataIdCounter = 1;
 
-  for (const location of savedLocations) {
+      const uniqueLocations = {};
+
+      const uniqueSavedLocations = savedLocations.filter(location => {
+        if (!uniqueLocations[location.locationName]) {
+          uniqueLocations[location.locationName] = true;
+          return true;
+        }
+        return false;
+      });
+
+        localStorage.setItem("savedLocations", JSON.stringify(uniqueSavedLocations));
+
+  for (const location of uniqueSavedLocations) {
     const savedLocationItem = document.createElement("savedLocationItem");
     savedLocationItem.setAttribute("data-id", dataIdCounter++);
     savedLocationItem.setAttribute("lat", location.lat);
@@ -3818,7 +3835,7 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 document.addEventListener("DOMContentLoaded", async function () {
-  const currentVersion = "v1.17.0";
+  const currentVersion = "v1.17.1";
   const githubRepo = "PranshulGG/WeatherMaster";
   const releasesUrl = `https://api.github.com/repos/${githubRepo}/releases/latest`;
 
@@ -5728,10 +5745,18 @@ function createHourlyDataCount(data) {
 
   if (localStorage.getItem("selectedVisibilityUnit") === "mileV") {
     Visibility = Math.round(data.hourly.visibility[0] / 1609.34);
+        if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+        VisibilityUnit = "英里";
+        } else{
     VisibilityUnit = "miles";
+    }
   } else {
     Visibility = Math.round(data.hourly.visibility[0] / 1000);
+    if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+    VisibilityUnit = "公里";
+    } else{
     VisibilityUnit = "km";
+    }
   }
 
   document.getElementById("unit_visibility").innerHTML = VisibilityUnit;

app/src/main/assets/app/renderForecastPage.js

@@ -406,17 +406,33 @@ async function displayDailyForecast(forecast, forecastDaily) {
 
         if (SelectedWindUnit === 'mile') {
             WindSpeed = Math.round(forecast.wind_speed_10m_max[index] / 1.60934) ;
-            WindSpeedUnit = 'mph'
+            if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                WindSpeedUnit = '英里/时'
+            } else{
+                WindSpeedUnit = 'mph'
+            }
         } else if (SelectedWindUnit === 'M/s') {
             WindSpeed = (forecast.wind_speed_10m_max[index] / 3.6).toFixed(1).replace('.', local)
+            if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                WindSpeedUnit = '米/秒'
+            } else{
             WindSpeedUnit = 'm/s'
+            }
       } else if (SelectedWindUnit === "Beaufort") {
              WindSpeed = getBeaufort(forecast.wind_speed_10m_max[index]);
-            WindSpeedUnit = 'Bft'
+             if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                WindSpeedUnit = '蒲福风级'
+            } else{
+                WindSpeedUnit = 'Bft'
+            }
 
         } else {
             WindSpeed = Math.round(forecast.wind_speed_10m_max[index]);
+            if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                WindSpeedUnit = '公里/时'
+            } else{
             WindSpeedUnit = 'km/h'
+            }
         }
 
 
@@ -452,15 +468,27 @@ async function displayDailyForecast(forecast, forecastDaily) {
 
         if (SelectedPrecipitationUnit === 'in') {
             rainAmount = forecast.precipitation_sum[index] ? (forecast.precipitation_sum[index] * 0.0393701).toFixed(2).replace('.', local) : '--';
+            if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                rainAmountUnit = '英寸'
+            } else{
             rainAmountUnit = 'in'
+            }
         } else if (SelectedPrecipitationUnit === 'cm') {
              rainAmount = forecast.precipitation_sum[index]
                  ? (forecast.precipitation_sum[index] / 10).toFixed(2).replace('.', local)
                  : '--';
+                 if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                    rainAmountUnit = '厘米'
+                } else{
             rainAmountUnit = 'cm'
+                }
         } else {
             rainAmount = forecast.precipitation_sum[index] ? forecast.precipitation_sum[index].toFixed(1).replace('.', local) : '--';
+            if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                rainAmountUnit = '厘米'
+            } else{
             rainAmountUnit = 'mm'
+            }
 
         }
 
@@ -470,13 +498,25 @@ async function displayDailyForecast(forecast, forecastDaily) {
 
         if (SelectedPressureUnit === 'inHg') {
             pressureMain = (dailyData.pressure * 0.02953).toFixed(2).replace('.', local);
-            pressureMainUnit = 'inHg';
+            if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                pressureMainUnit = '英寸汞柱';
+            } else{
+                pressureMainUnit = 'inHg';
+            }
         } else if (SelectedPressureUnit === 'mmHg') {
             pressureMain = (dailyData.pressure * 0.750062).toFixed(2).replace('.', local);
+            if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                pressureMainUnit = '毫米汞柱';
+            } else{
             pressureMainUnit = 'mmHg';
+            }
         } else {
             pressureMain = Math.round(dailyData.pressure);
+            if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                pressureMainUnit = '百帕';
+            } else{
             pressureMainUnit = 'hPa';
+            }
         }
                 let humidityValue
 

app/src/main/assets/app/renderWeather.js

@@ -560,14 +560,28 @@ function DailyWeather(dailyForecast) {
     let TodaysPrecAmount;
 
     if (localStorage.getItem("selectedPrecipitationUnit") === "in") {
-      TodaysPrecAmount =
-        mmToInches(dailyForecast.precipitation_sum[0]).toFixed(2).replace('.', local) + " in";
+      if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+        TodaysPrecAmount = mmToInches(dailyForecast.precipitation_sum[0]).toFixed(2).replace('.', local) + " 英寸";
+      } else{
+      TodaysPrecAmount = mmToInches(dailyForecast.precipitation_sum[0]).toFixed(2).replace('.', local) + " in";
+      }
     } else if (localStorage.getItem("selectedPrecipitationUnit") === "cm") {
-      TodaysPrecAmount =
+      if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+        TodaysPrecAmount =
         (Math.round(dailyForecast.precipitation_sum[0]) / 10).toFixed(2).replace('.', local) +
-        " cm";
+        " 厘米";
+      } else{
+        TodaysPrecAmount =
+          (Math.round(dailyForecast.precipitation_sum[0]) / 10).toFixed(2).replace('.', local) +
+          " cm";
+      }
     } else {
-      TodaysPrecAmount = dailyForecast.precipitation_sum[0].toFixed(1).replace('.', local) + " mm";
+      if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+        TodaysPrecAmount = dailyForecast.precipitation_sum[0].toFixed(1).replace('.', local) + " 毫米";
+      } else{
+         TodaysPrecAmount = dailyForecast.precipitation_sum[0].toFixed(1).replace('.', local) + " mm";
+
+      }
     }
 
     if (dailyForecast.precipitation_sum[0] <= 0) {
@@ -654,25 +668,58 @@ function CurrentWeather(data, sunrise, sunset, lat, lon) {
   let CurrentWindGust;
 
   if (localStorage.getItem("SelectedWindUnit") === "mile") {
-    CurrentWindGust = Math.round(kmhToMph(data.wind_gusts_10m)) + " mph";
+      if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+        CurrentWindGust = Math.round(kmhToMph(data.wind_gusts_10m)) + " 英里/时";
+      } else{
+        CurrentWindGust = Math.round(kmhToMph(data.wind_gusts_10m)) + " mph";
+      }
   } else if (localStorage.getItem("SelectedWindUnit") === "M/s") {
-    CurrentWindGust = (data.wind_gusts_10m / 3.6).toFixed(1).replace('.', local) + " m/s";
+      if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+        CurrentWindGust = (data.wind_gusts_10m / 3.6).toFixed(1).replace('.', local) + " 米/秒";
+      } else{
+        CurrentWindGust = (data.wind_gusts_10m / 3.6).toFixed(1).replace('.', local) + " m/s";
+      }
   } else if (localStorage.getItem("SelectedWindUnit") === "Beaufort") {
-    CurrentWindGust = getBeaufort(data.wind_speed_10m) + " Bft";
+      if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+        CurrentWindGust = getBeaufort(data.wind_speed_10m) + " 蒲福风级";
+      } else{
+        CurrentWindGust = getBeaufort(data.wind_speed_10m) + " Bft";
+      }
   } else {
-    CurrentWindGust = Math.round(data.wind_gusts_10m) + " km/h";
+      if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+        CurrentWindGust = Math.round(data.wind_gusts_10m) + " 公里/时";
+      } else{
+             CurrentWindGust = Math.round(data.wind_gusts_10m) + " km/h";
+      }
   }
 
   let CurrentWindSpeed;
 
   if (localStorage.getItem("SelectedWindUnit") === "mile") {
-    CurrentWindSpeed = Math.round(kmhToMph(data.wind_speed_10m)) + " mph";
+    if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+      CurrentWindSpeed = Math.round(kmhToMph(data.wind_speed_10m)) + " 英里/时";
+    } else{
+      CurrentWindSpeed = Math.round(kmhToMph(data.wind_speed_10m)) + " mph";
+
+    }
   } else if (localStorage.getItem("SelectedWindUnit") === "M/s") {
-    CurrentWindSpeed = (data.wind_speed_10m / 3.6).toFixed(1).replace('.', local) + " m/s";
+      if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+        CurrentWindSpeed = (data.wind_speed_10m / 3.6).toFixed(1).replace('.', local) + " 米/秒";
+      } else{
+        CurrentWindSpeed = (data.wind_speed_10m / 3.6).toFixed(1).replace('.', local) + " m/s";
+      }
   } else if (localStorage.getItem("SelectedWindUnit") === "Beaufort") {
+    if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+      CurrentWindSpeed = getBeaufort(data.wind_speed_10m) + " 蒲福风级";
+    } else{
     CurrentWindSpeed = getBeaufort(data.wind_speed_10m) + " Bft";
+    }
   } else {
+  if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+    CurrentWindSpeed = Math.round(data.wind_speed_10m) + " 公里/时";
+  } else{
     CurrentWindSpeed = Math.round(data.wind_speed_10m) + " km/h";
+    }
   }
 
   let CurrentPressure;
@@ -680,13 +727,25 @@ function CurrentWeather(data, sunrise, sunset, lat, lon) {
 
   if (localStorage.getItem("selectedPressureUnit") === "inHg") {
     CurrentPressure = hPaToInHg(data.pressure_msl).toFixed(2).replace('.', local);
+    if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+    pressureMainUnit = "英寸汞柱";
+    } else{
     pressureMainUnit = "inHg";
+    }
   } else if (localStorage.getItem("selectedPressureUnit") === "mmHg") {
     CurrentPressure = hPaToMmHg(data.pressure_msl).toFixed(2).replace('.', local);
+    if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+    pressureMainUnit = "毫米汞柱";
+    } else{
     pressureMainUnit = "mmHg";
+    }
   } else {
     CurrentPressure = Math.round(data.pressure_msl);
+    if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+    pressureMainUnit = "百帕";
+    } else{
     pressureMainUnit = "hPa";
+    }
   }
 
   localStorage.setItem("CurrentPressurePage", data.pressure_msl);
@@ -1126,54 +1185,54 @@ function AirQuaility(data) {
   if (localStorage.getItem('selectedAQItype') === 'eu_aqi') {
     if (aqiEU <= 25) {
       aqiCategory = 1;
-       percentage = 10 + ((aqiEU / 25) * 16); // Lowest danger
+      percentage = Math.min(5 + ((aqiEU / 25) * 16), 10);
       percentageColor = '#00e400'
     } else if (aqiEU <= 50) {
       aqiCategory = 2;
-      percentage = 20 + (((aqiEU - 25) / 25) * 16);
+      percentage = Math.min(20 + (((aqiEU - 25) / 25) * 16), 42);
       percentageColor = '#ffff00'
     } else if (aqiEU <= 75) {
       aqiCategory = 3;
-      percentage = 42 + (((aqiEU - 50) / 25) * 16);
+      percentage = Math.min(40 + (((aqiEU - 50) / 50) * 16), 50);
       percentageColor = '#ff7e00'
 
     } else if (aqiEU <= 100) {
       aqiCategory = 4;
-     percentage = 58 + (((aqiEU - 75) / 25) * 16);
+      percentage = Math.min(58 + (((aqiEU - 75) / 50) * 16), 74);
       percentageColor = '#ff0000'
     } else {
       aqiCategory = 5;
-      percentage = 74 + (((aqiEU - 100) / 100) * 16); // Highest danger
+      percentage = Math.min(74 + (((aqiEU - 100) / 100) * 16), 95);
       percentageColor = '#8f3f97'
     }
     document.getElementById("aqi-level-value").innerHTML = aqiEU;
   } else {
     if (aqi <= 50) {
       aqiCategory = 1;
-       percentage = 10 + ((aqi / 50) * 16);
-      percentageColor = '#00e400'
+      percentage = Math.min(5 + ((aqi / 50) * 16), 10);
+      percentageColor = '#00e400';
     } else if (aqi <= 100) {
       aqiCategory = 2;
-       percentage = 20 + (((aqi - 50) / 50) * 16);
-      percentageColor = '#ffff00'
+      percentage = Math.min(20 + (((aqi - 50) / 50) * 16), 42);
+      percentageColor = '#ffff00';
     } else if (aqi <= 150) {
       aqiCategory = 3;
-      percentage = 42 + (((aqi - 100) / 50) * 16);
-      percentageColor = '#ff7e00'
+      percentage = Math.min(42 + (((aqi - 100) / 50) * 16), 50);
+      percentageColor = '#ff0000';
     } else if (aqi <= 200) {
       aqiCategory = 4;
-       percentage = 58 + (((aqi - 150) / 50) * 16);
-      percentageColor = '#ff0000'
+      percentage = Math.min(58 + (((aqi - 150) / 50) * 16), 74);
+      percentageColor = '#ff0000';
     } else {
       aqiCategory = 5;
-      percentage = 74 + (((aqi - 200) / 100) * 16); // Highest danger
-      percentageColor = '#8f3f97'
+      percentage = Math.min(74 + (((aqi - 200) / 100) * 16), 95);
+      percentageColor = '#8f3f97';
     }
     document.getElementById("aqi-level-value").innerHTML = aqi;
   }
 
 
-percentage = Math.min(90, Math.max(10, percentage.toFixed(2)));
+  percentage = Math.min(95, Math.max(5, percentage.toFixed(2)));
 document.querySelector('air_quality_bar_progress').style = `--percentageColor: ${percentageColor}; width: ${percentage}%;`
 
 
@@ -1415,25 +1474,53 @@ let uvPercentageProg = 10;
 let uvColor = "#00e400";
 
 
-if (uvIndex >= 0 && uvIndex <= 4) {
-  uvColor = "#00e400";
-  uvPercentageProg = 8
-} else if (uvIndex > 4 && uvIndex <= 6) {
-  uvColor = "#ffff00";
-  uvPercentageProg = 30
-} else if (uvIndex > 6 && uvIndex <= 8) {
-  uvColor = "#ff7e00";
-  uvPercentageProg = 50
-} else if (uvIndex > 8 && uvIndex <= 11) {
-  uvColor = "#ff0000";
-  uvPercentageProg = 70
-} else if (uvIndex > 11 && uvIndex <= 13) {
-  uvColor = "#8f3f97";
-  uvPercentageProg = 80
-} else if (uvIndex > 13) {
-  uvColor = "#7e0023";
-  uvPercentageProg = 95
-}
+    if (uvIndex === 0) {
+      uvColor = "#00e400";
+      uvPercentageProg = 8;
+    } else if (uvIndex === 1) {
+      uvColor = "#00e400";
+      uvPercentageProg = 8;
+    } else if (uvIndex === 2) {
+      uvColor = "#00e400";
+      uvPercentageProg = 8;
+    } else if (uvIndex === 3) {
+      uvColor = "#00e400";
+      uvPercentageProg = 8;
+    } else if (uvIndex === 4) {
+      uvColor = "#00e400";
+      uvPercentageProg = 8;
+    } else if (uvIndex === 5) {
+      uvColor = "#ffff00";
+      uvPercentageProg = 30;
+    } else if (uvIndex === 6) {
+      uvColor = "#ffff00";
+      uvPercentageProg = 30;
+    } else if (uvIndex === 7) {
+      uvColor = "#ff7e00";
+      uvPercentageProg = 45;
+    } else if (uvIndex === 8) {
+      uvColor = "#ff0000";
+      uvPercentageProg = 50;
+    } else if (uvIndex === 9) {
+      uvColor = "#ff0000";
+      uvPercentageProg = 70;
+    } else if (uvIndex === 10) {
+      uvColor = "#ff0000";
+      uvPercentageProg = 70;
+    } else if (uvIndex === 11) {
+      uvColor = "#ff0000";
+      uvPercentageProg = 70;
+    } else if (uvIndex === 12) {
+      uvColor = "#8f3f97";
+      uvPercentageProg = 80;
+    } else if (uvIndex === 13) {
+      uvColor = "#8f3f97";
+      uvPercentageProg = 80;
+    } else if (uvIndex >= 14) {
+      uvColor = "#7e0023";
+      uvPercentageProg = 95;
+    }
+
 
 
 
@@ -1683,11 +1770,23 @@ function MoreDetailsRender(data) {
   let Precipitation;
 
   if (localStorage.getItem("selectedPrecipitationUnit") === "in") {
+  if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+    Precipitation = mainData.totalprecip_in.toFixed(2).replace('.', local) + " 英寸";
+  } else{
     Precipitation = mainData.totalprecip_in.toFixed(2).replace('.', local) + " in";
+  }
   } else if (localStorage.getItem("selectedPrecipitationUnit") === "cm") {
+    if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+      Precipitation = (mainData.totalprecip_in * 2.54).toFixed(2).replace('.', local) + " 厘米";
+    } else{
     Precipitation = (mainData.totalprecip_in * 2.54).toFixed(2).replace('.', local) + " cm";
+    }
   } else {
+  if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+    Precipitation = inchesToMm(mainData.totalprecip_in).toFixed(2).replace('.', local) + " 英寸";
+  } else{
     Precipitation = inchesToMm(mainData.totalprecip_in).toFixed(2).replace('.', local) + " mm";
+    }
   }
   let precipitationMessage;
   if (mainData.totalprecip_in > 0) {

app/src/main/assets/configSource.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports?module.exports=exports=e():"function"==typeof define&&define.amd?define([],e):t.CryptoJS=e()}(this,function(){var h,t,e,r,i,n,f,o,s,c,a,l,d,m,x,b,H,z,A,u,p,_,v,y,g,B,w,k,S,C,D,E,R,M,F,P,W,O,I,U,K,X,L,j,N,T,q,Z,V,G,J,$,Q,Y,tt,et,rt,it,nt,ot,st,ct,at,ht,lt,ft,dt,ut,pt,_t,vt,yt,gt,Bt,wt,kt,St,bt=bt||function(l){var t;if("undefined"!=typeof window&&window.crypto&&(t=window.crypto),!t&&"undefined"!=typeof window&&window.msCrypto&&(t=window.msCrypto),!t&&"undefined"!=typeof global&&global.crypto&&(t=global.crypto),!t&&"function"==typeof require)try{t=require("crypto")}catch(t){}function i(){if(t){if("function"==typeof t.getRandomValues)try{return t.getRandomValues(new Uint32Array(1))[0]}catch(t){}if("function"==typeof t.randomBytes)try{return t.randomBytes(4).readInt32LE()}catch(t){}}throw new Error("Native crypto module could not be used to get secure random number.")}var r=Object.create||function(t){var e;return n.prototype=t,e=new n,n.prototype=null,e};function n(){}var e={},o=e.lib={},s=o.Base={extend:function(t){var e=r(this);return t&&e.mixIn(t),e.hasOwnProperty("init")&&this.init!==e.init||(e.init=function(){e.$super.init.apply(this,arguments)}),(e.init.prototype=e).$super=this,e},create:function(){var t=this.extend();return t.init.apply(t,arguments),t},init:function(){},mixIn:function(t){for(var e in t)t.hasOwnProperty(e)&&(this[e]=t[e]);t.hasOwnProperty("toString")&&(this.toString=t.toString)},clone:function(){return this.init.prototype.extend(this)}},f=o.WordArray=s.extend({init:function(t,e){t=this.words=t||[],this.sigBytes=null!=e?e:4*t.length},toString:function(t){return(t||a).stringify(this)},concat:function(t){var e=this.words,r=t.words,i=this.sigBytes,n=t.sigBytes;if(this.clamp(),i%4)for(var o=0;o<n;o++){var s=r[o>>>2]>>>24-o%4*8&255;e[i+o>>>2]|=s<<24-(i+o)%4*8}else for(o=0;o<n;o+=4)e[i+o>>>2]=r[o>>>2];return this.sigBytes+=n,this},clamp:function(){var t=this.words,e=this.sigBytes;t[e>>>2]&=4294967295<<32-e%4*8,t.length=l.ceil(e/4)},clone:function(){var t=s.clone.call(this);return t.words=this.words.slice(0),t},random:function(t){for(var e=[],r=0;r<t;r+=4)e.push(i());return new f.init(e,t)}}),c=e.enc={},a=c.Hex={stringify:function(t){for(var e=t.words,r=t.sigBytes,i=[],n=0;n<r;n++){var o=e[n>>>2]>>>24-n%4*8&255;i.push((o>>>4).toString(16)),i.push((15&o).toString(16))}return i.join("")},parse:function(t){for(var e=t.length,r=[],i=0;i<e;i+=2)r[i>>>3]|=parseInt(t.substr(i,2),16)<<24-i%8*4;return new f.init(r,e/2)}},h=c.Latin1={stringify:function(t){for(var e=t.words,r=t.sigBytes,i=[],n=0;n<r;n++){var o=e[n>>>2]>>>24-n%4*8&255;i.push(String.fromCharCode(o))}return i.join("")},parse:function(t){for(var e=t.length,r=[],i=0;i<e;i++)r[i>>>2]|=(255&t.charCodeAt(i))<<24-i%4*8;return new f.init(r,e)}},d=c.Utf8={stringify:function(t){try{return decodeURIComponent(escape(h.stringify(t)))}catch(t){throw new Error("Malformed UTF-8 data")}},parse:function(t){return h.parse(unescape(encodeURIComponent(t)))}},u=o.BufferedBlockAlgorithm=s.extend({reset:function(){this._data=new f.init,this._nDataBytes=0},_append:function(t){"string"==typeof t&&(t=d.parse(t)),this._data.concat(t),this._nDataBytes+=t.sigBytes},_process:function(t){var e,r=this._data,i=r.words,n=r.sigBytes,o=this.blockSize,s=n/(4*o),c=(s=t?l.ceil(s):l.max((0|s)-this._minBufferSize,0))*o,a=l.min(4*c,n);if(c){for(var h=0;h<c;h+=o)this._doProcessBlock(i,h);e=i.splice(0,c),r.sigBytes-=a}return new f.init(e,a)},clone:function(){var t=s.clone.call(this);return t._data=this._data.clone(),t},_minBufferSize:0}),p=(o.Hasher=u.extend({cfg:s.extend(),init:function(t){this.cfg=this.cfg.extend(t),this.reset()},reset:function(){u.reset.call(this),this._doReset()},update:function(t){return this._append(t),this._process(),this},finalize:function(t){return t&&this._append(t),this._doFinalize()},blockSize:16,_createHelper:function(r){return function(t,e){return new r.init(e).finalize(t)}},_createHmacHelper:function(r){return function(t,e){return new p.HMAC.init(r,e).finalize(t)}}}),e.algo={});return e}(Math);function mt(t,e,r){return t^e^r}function xt(t,e,r){return t&e|~t&r}function Ht(t,e,r){return(t|~e)^r}function zt(t,e,r){return t&r|e&~r}function At(t,e,r){return t^(e|~r)}function Ct(t,e){return t<<e|t>>>32-e}function Dt(t,e,r,i){var n,o=this._iv;o?(n=o.slice(0),this._iv=void 0):n=this._prevBlock,i.encryptBlock(n,0);for(var s=0;s<r;s++)t[e+s]^=n[s]}function Et(t){if(255==(t>>24&255)){var e=t>>16&255,r=t>>8&255,i=255&t;255===e?(e=0,255===r?(r=0,255===i?i=0:++i):++r):++e,t=0,t+=e<<16,t+=r<<8,t+=i}else t+=1<<24;return t}function Rt(){for(var t=this._X,e=this._C,r=0;r<8;r++)ft[r]=e[r];e[0]=e[0]+1295307597+this._b|0,e[1]=e[1]+3545052371+(e[0]>>>0<ft[0]>>>0?1:0)|0,e[2]=e[2]+886263092+(e[1]>>>0<ft[1]>>>0?1:0)|0,e[3]=e[3]+1295307597+(e[2]>>>0<ft[2]>>>0?1:0)|0,e[4]=e[4]+3545052371+(e[3]>>>0<ft[3]>>>0?1:0)|0,e[5]=e[5]+886263092+(e[4]>>>0<ft[4]>>>0?1:0)|0,e[6]=e[6]+1295307597+(e[5]>>>0<ft[5]>>>0?1:0)|0,e[7]=e[7]+3545052371+(e[6]>>>0<ft[6Line truncated

app/src/main/assets/index.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
     <title>Weather Home</title>
+    <script src="configSource.js"></script>
     <script src="database/MainDataBase.js"></script>
     <link rel="stylesheet" href="ui-files/ui.css">
     <link rel="stylesheet" href="ui-files/font-usage.css">
@@ -352,7 +353,7 @@
 
 
 
-            <div class="currentConditions" style="margin-top: 5px;" id="sortableContainer" data-id="3">
+            <div class="currentConditions" style="margin-top: 2px;" id="sortableContainer" data-id="3">
 
 
                 <div class="currentConditionItem sunRISESET ripple_btn_low" data-id="1"
@@ -849,11 +850,11 @@
 
 
         <div class="retry_btn_error">
-            <md-filled-button onclick="window.location.reload(); sendThemeToAndroid('overcast')" style="--md-filled-button-label-text-size: 16px;">
+            <md-filled-button onclick="window.location.reload(); sendThemeToAndroid('overcast')">
                 <md-icon icon-outlined slot="icon">refresh</md-icon>
                 Try again
             </md-filled-button>
-            <md-outlined-button onclick="Android.importFile();" style="--md-outlined-button-label-text-size: 16px;">
+            <md-outlined-button onclick="Android.importFile();">
                 <md-icon icon-outlined slot="icon">download</md-icon>
                 Import backup
             </md-outlined-button>

app/src/main/assets/langs/languages.json

@@ -506,7 +506,11 @@
     "activity_suggestions_daytip_aqi_2": "🚶‍♂️ Consider a nature walk or picnic—today's conditions are great for some time outdoors.",
     "activity_suggestions_daytip_aqi_3": "🏠 It might be a good day to stay indoors and enjoy a warm beverage. Consider a cozy activity like reading.",
     "activity_suggestions_daytip_aqi_4": "📺 Plan indoor activities, especially if you’re sensitive to air quality or cold weather.",
-    "temperature": "Temperature"
-
-
-}
+    "temperature": "Temperature",
+    "show_summary_toggle_sub": "Show a brief summary of the weather",
+    "insights": "Insights",
+    "app_units": "App units",
+    "temperature_wind_pressure_visibility_precipitation_time_aqi": "Temperature, wind, pressure, visibility, precipitation, time, AQI",
+    "activity_suggestions_daytip_humidity_3": "🧴 The air is dry. Moisturize your skin and drink plenty of water to stay hydrated.",
+    "activity_suggestions_daytip_humidity_4": "💧 Low humidity may cause dry skin or irritation. Keep a water bottle handy and avoid overexposure."
+}

app/src/main/assets/modules/GenerateClothingReco.js

@@ -393,72 +393,35 @@ GenerateRecommendation()
 // tabs
 
 
-document.addEventListener("DOMContentLoaded", function () {
-    const tabsContainer = document.getElementById("change_type_tabs");
-    const sections = document.querySelectorAll(".clothin_activity");
-    let isUserScrolling = true;
 
-    const updateActiveTabOnScroll = (sectionIndex) => {
-        if (isUserScrolling) {
-            tabsContainer.activeTabIndex = sectionIndex;
-        }
-    };
+document.getElementById('change_type_tabs').addEventListener('change', () => {
+    if (event.target.activeTabIndex === 0) {
+        document.getElementById('morning').hidden = false;
+        document.getElementById('evening').hidden = true;
+        document.getElementById('night').hidden = true;
+        document.getElementById('day_tip').hidden = true;
+        document.getElementById('air_quality_details').hidden = true;
 
+    } else if (event.target.activeTabIndex === 1){
+        document.getElementById('morning').hidden = true;
+        document.getElementById('evening').hidden = false;
+        document.getElementById('night').hidden = true;
+        document.getElementById('day_tip').hidden = true;
+        document.getElementById('air_quality_details').hidden = true;
 
-    const observer = new IntersectionObserver(
-        (entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    const sectionIndex = Array.from(sections).indexOf(entry.target);
-                    updateActiveTabOnScroll(sectionIndex);
-                }
-            });
-        },
-        {
-            root: null,
-            threshold: 0.5,
-        }
-    );
+    } else if (event.target.activeTabIndex === 2){
+        document.getElementById('morning').hidden = true;
+        document.getElementById('evening').hidden = true;
+        document.getElementById('night').hidden = false;
+        document.getElementById('day_tip').hidden = true;
+        document.getElementById('air_quality_details').hidden = true;
 
-    // Observe each section
-    sections.forEach((section) => {
-        observer.observe(section);
-    });
+    } else if (event.target.activeTabIndex === 3){
+        document.getElementById('morning').hidden = true;
+        document.getElementById('evening').hidden = true;
+        document.getElementById('night').hidden = true;
+        document.getElementById('day_tip').hidden = false;
+        document.getElementById('air_quality_details').hidden = false;
 
-    // Listen for tab clicks
-    tabsContainer.addEventListener("click", (e) => {
-        if (e.target.tagName === "MD-SECONDARY-TAB") {
-            isUserScrolling = false;
-
-
-            setTimeout(() => {
-                isUserScrolling = true;
-            }, 500);
-        }
-    });
-});
-
-
-
-document.addEventListener("DOMContentLoaded", function () {
-    const tabsContainer = document.getElementById("change_type_tabs");
-    const tabs = tabsContainer.querySelectorAll("md-secondary-tab");
-
-    tabs.forEach((tab) => {
-        tab.addEventListener("click", (e) => {
-            const targetId = tab.getAttribute("data-target");
-            const targetSection = document.getElementById(targetId);
-
-            if (targetSection) {
-                // Programmatically scroll to the section
-                targetSection.scrollIntoView({
-                    behavior: "smooth", // Smooth scrolling
-                    block: "start", // Align section to the top
-                });
-
-                // Update activeTabIndex based on the clicked tab
-                tabsContainer.activeTabIndex = Array.from(tabs).indexOf(tab);
-            }
-        });
-    });
-});
+    }
+  });

app/src/main/assets/modules/settingsModule.js

@@ -74,121 +74,6 @@ function sendThemeToAndroid(theme) {
   AndroidInterface.updateStatusBarColor(theme);
 }
 
-const selectTempUnit = document.getElementById("selectTempUnit");
-
-selectTempUnit.addEventListener("input", () => {
-  localStorage.setItem("SelectedTempUnit", selectTempUnit.value);
-});
-
-if (!localStorage.getItem("SelectedTempUnit")) {
-  document.querySelector(`[value="celsius"]`).selected = true;
-}
-
-const getSelectedTempUnit = localStorage.getItem("SelectedTempUnit");
-
-if (getSelectedTempUnit) {
-  document.querySelector(`[value="${getSelectedTempUnit}"]`).selected = true;
-}
-
-const selectWindUnit = document.getElementById("selectWindUnit");
-
-selectWindUnit.addEventListener("input", () => {
-  localStorage.setItem("SelectedWindUnit", selectWindUnit.value);
-});
-
-if (!localStorage.getItem("SelectedWindUnit")) {
-  document.querySelector(`[value="kilometer"]`).selected = true;
-}
-
-const getSelectedWindUnit = localStorage.getItem("SelectedWindUnit");
-
-if (getSelectedWindUnit) {
-  document.querySelector(`[value="${getSelectedWindUnit}"]`).selected = true;
-}
-
-const selectVisibilityUnit = document.getElementById("selectVisibilityUnit");
-
-selectVisibilityUnit.addEventListener("input", () => {
-  localStorage.setItem("selectedVisibilityUnit", selectVisibilityUnit.value);
-});
-
-if (!localStorage.getItem("selectedVisibilityUnit")) {
-  document.querySelector(`[value="km"]`).selected = true;
-}
-
-const getSelectedVisibilityUnit = localStorage.getItem(
-  "selectedVisibilityUnit"
-);
-
-if (getSelectedVisibilityUnit) {
-  document.querySelector(
-    `[value="${getSelectedVisibilityUnit}"]`
-  ).selected = true;
-}
-
-const selectPrecipitationUnit = document.getElementById(
-  "selectPrecipitationUnit"
-);
-
-selectPrecipitationUnit.addEventListener("input", () => {
-  localStorage.setItem(
-    "selectedPrecipitationUnit",
-    selectPrecipitationUnit.value
-  );
-});
-
-if (!localStorage.getItem("selectedPrecipitationUnit")) {
-  document.querySelector(`[value="mm"]`).selected = true;
-}
-
-const getSelectedPrecipitationUnit = localStorage.getItem(
-  "selectedPrecipitationUnit"
-);
-
-if (localStorage.getItem("selectedPrecipitationUnit")) {
-  document.querySelector(
-    `[value="${getSelectedPrecipitationUnit}"]`
-  ).selected = true;
-}
-
-// -----------------------
-
-const selectPressureUnit = document.getElementById("selectPressureUnit");
-
-selectPressureUnit.addEventListener("input", () => {
-  localStorage.setItem("selectedPressureUnit", selectPressureUnit.value);
-});
-
-if (!localStorage.getItem("selectedPressureUnit")) {
-  document.querySelector(`[value="hPa"]`).selected = true;
-}
-
-const getSelectedPressureUnit = localStorage.getItem("selectedPressureUnit");
-
-if (localStorage.getItem("selectedPressureUnit")) {
-  document.querySelector(
-    `[value="${getSelectedPressureUnit}"]`
-  ).selected = true;
-}
-
-// time format
-
-const selectTimeformat = document.getElementById("selectTimeformat");
-
-selectTimeformat.addEventListener("input", () => {
-  localStorage.setItem("selectedTimeMode", selectTimeformat.value);
-});
-
-if (!localStorage.getItem("selectedTimeMode")) {
-  document.querySelector(`[value="12 hour"]`).selected = true;
-}
-
-const getSelectedTimeFormat = localStorage.getItem("selectedTimeMode");
-
-if (localStorage.getItem("selectedTimeMode")) {
-  document.querySelector(`[value="${getSelectedTimeFormat}"]`).selected = true;
-}
-
 // background animations
 
 const useAnimationBackgroundSwitch = document.getElementById(
@@ -877,25 +762,6 @@ document
   });
 
 
-    // aqi type
-
-  const selectAQItype = document.getElementById("selectAQItype");
-
-  selectAQItype.addEventListener("input", () => {
-    localStorage.setItem("selectedAQItype", selectAQItype.value);
-  });
-
-  if (!localStorage.getItem("selectedAQItype")) {
-    document.querySelector(`[value="us_aqi"]`).selected = true;
-  }
-
-  const getSelectedAQItype = localStorage.getItem("selectedAQItype");
-
-  if (localStorage.getItem("selectedAQItype")) {
-    document.querySelector(`[value="${getSelectedAQItype}"]`).selected = true;
-  }
-
-
 // auto update data setting
 
 const autoUpdateOldWeatherSwitch = document.getElementById(

app/src/main/assets/pages/AboutPage.html

@@ -149,7 +149,7 @@
          <md-icon icon-outlined>info</md-icon>
          <div style="position: relative; width: 100%;">
           <p data-translate="version">Version</p>
-          <span>1.17.0 (W)</span>
+          <span>1.17.1 (W)</span>
           <md-icon-button style="position: absolute; right: 5px;" id="checkUpdatesBtn"><md-icon icon-outlined>refresh</md-icon></md-icon-button>
          </div>
         </div>
@@ -364,7 +364,7 @@ async function CreateMaterialYouTheme(hex) {
 
 
         document.getElementById('checkUpdatesBtn').addEventListener('click', async function () {
-            const currentVersion = 'v1.17.0';
+            const currentVersion = 'v1.17.1';
             const githubRepo = 'PranshulGG/WeatherMaster';
             const releasesUrl = `https://api.github.com/repos/${githubRepo}/releases/latest`;
 

app/src/main/assets/pages/AppUnits.html

@@ -0,0 +1,967 @@
+<!DOCTYPE html>
+<html lang="en" Theme="clothing" data-theme="dark">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
+    <title>Locations</title>
+    <script src="../database/MainDataBase.js"></script>
+    <link rel="stylesheet" href="../ui-files/font-usage.css">
+    <link rel="stylesheet" href="../ui-files/variables.css">
+    <link rel="stylesheet" href="../components/components.css">
+    <link rel="stylesheet" href="../components/modal-ver.css">
+    <link rel="stylesheet" href="../ripple-files/ripple.css">
+    <link rel="stylesheet" href="../components/segment-btns.css">
+    <script src="../langs/langs.js"></script>
+
+
+    <style>
+                * {
+            -webkit-tap-highlight-color: transparent;
+            user-select: none;
+            touch-action: manipulation;
+            -webkit-user-drag: none;
+            outline: none;
+        }
+
+        body {
+            background-color: var(--Surface);
+            padding: 0;
+            margin: 0;
+            overflow: hidden;
+            font-family: var(--outfit);
+            animation: opacity 0.3s ease-out;
+
+        }
+
+        @keyframes opacity {
+            0% {
+                opacity: 0;
+            }
+
+            100% {
+                opacity: 1;
+            }
+        }
+
+        [hidden] {
+            display: none !important;
+        }
+
+        *::selection {
+            background-color: var(--Inverse-Primary);
+            color: white;
+        }
+
+         md-list-item{
+            background-color: var(--Surface-Container-Lowest);
+            margin-bottom: 6px;
+            border-radius: 8px;
+        }
+
+
+       md-list-item:nth-child(1){
+            border-radius: 18px 18px 10px 10px;
+        }
+
+         md-list-item:last-child{
+            border-radius: 10px 10px 18px 18px ;
+        }
+
+        md-list{
+            padding: 8px;
+        }
+
+        .radios_units_dialog label{
+            display: flex;
+            font-family: var(--google-normal);
+            display: flex; align-items: center; gap: 13px; font-size: 17.5px; padding: 24px; padding-top: 14px; padding-bottom: 14px;
+        }
+
+        .radios_units_dialog {
+            padding-left: 0; padding-right: 0; padding-top: 15px;
+            padding-bottom: 0;
+        }
+
+        [slot="actions"]{
+            padding-top: 5px;
+        }
+    </style>
+
+<body style="background-color: var(--Surface); --md-list-item-pressed-state-layer-opacity: 0.07;">
+
+<div class="activity-large open">
+    <div class="header-activity-large" id="head-1">
+        <button class="ripple-icon-btn regular" ontouchstart="playEffect(this)" ontouchend="playEffect2(this)"
+                title="Go back" onclick="sendThemeToAndroid('GoBack')">
+            <span class="ripple-effect-icon"></span>
+            <span icon-outlined>arrow_back</span>
+        </button>
+        <p class="label-hidden-large" style="white-space: nowrap;" data-translate="app_units">App units</p>
+    </div>
+    <div class="activity-large-content" id="headUser-1">
+        <p class="label-large-main" data-translate="app_units">App units</p>
+        <div class="content-parent-large" style="padding-bottom: 32px;">
+
+            <md-list>
+                <md-list-item type="button" onclick="changeUnit('Temperature')">
+                    <md-icon icon-filled slot="start">device_thermostat</md-icon>
+                    <div slot="headline" data-translate="temperature_unit">Temperature unit</div>
+                    <div slot="supporting-text" id="data_selected_temp_unit_text" style="color: var(--Secondary); font-family: var(--google-mid); font-size: 14px;">°C</div>
+                </md-list-item>
+
+                <md-list-item type="button" onclick="changeUnit('Wind')">
+                    <md-icon icon-filled slot="start">air</md-icon>
+                    <div slot="headline" data-translate="wind_unit">Wind Unit</div>
+                    <div slot="supporting-text" id="data_selected_wind_unit_text" style="color: var(--Secondary); font-family: var(--google-mid); font-size: 14px;">Km/h</div>
+                </md-list-item>
+
+                <md-list-item type="button" onclick="changeUnit('Visibility')">
+                    <md-icon icon-filled slot="start">visibility</md-icon>
+                    <div slot="headline" data-translate="visibility_unit">Visibility Unit</div>
+                    <div slot="supporting-text" id="data_selected_visibility_unit_text" style="color: var(--Secondary); font-family: var(--google-mid); font-size: 14px;">km</div>
+                </md-list-item>
+
+                <md-list-item type="button" onclick="changeUnit('Precipitation')">
+                    <md-icon icon-filled slot="start">rainy_light</md-icon>
+                    <div slot="headline" data-translate="precipitation_unit">Precipitation Unit</div>
+                    <div slot="supporting-text" id="data_selected_precipitation_unit_text" style="color: var(--Secondary); font-family: var(--google-mid); font-size: 14px;">mm</div>
+                </md-list-item>
+
+                <md-list-item type="button" onclick="changeUnit('Pressure')">
+                    <md-icon icon-filled slot="start">av_timer</md-icon>
+                    <div slot="headline" data-translate="pressure_unit">Pressure Unit</div>
+                    <div slot="supporting-text" id="data_selected_pressure_unit_text" style="color: var(--Secondary); font-family: var(--google-mid); font-size: 14px;">hPa</div>
+                </md-list-item>
+
+                <md-list-item type="button" onclick="changeUnit('Time')">
+                    <md-icon icon-filled slot="start">schedule</md-icon>
+                    <div slot="headline" data-translate="time_format">Time format</div>
+                    <div slot="supporting-text" id="data_selected_time_unit_text" style="color: var(--Secondary); font-family: var(--google-mid); font-size: 14px;">12 hr</div>
+                </md-list-item>
+
+                <md-list-item type="button" onclick="changeUnit('AQI')">
+                    <md-icon icon-filled slot="start">airwave</md-icon>
+                    <div slot="headline" data-translate="aqi_type">AQI type</div>
+                    <div slot="supporting-text" id="data_selected_aqi_unit_text" style="color: var(--Secondary); font-family: var(--google-mid); font-size: 14px;">United States</div>
+                </md-list-item>
+
+            </md-list>
+
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+
+            <!-- temp dialog -->
+
+            <md-dialog id="temp_unit_selection_dialog">
+                <div slot="headline" data-translate="temperature_unit">Temperature Unit</div>
+
+                <div slot="content" class="radios_units_dialog">
+                    <label class="ripple_btn_low">
+                        <md-radio name="temperature_unit_group" value="celsius"></md-radio>
+                        <span class="unit_group_text_celsius">°C</span>
+                    </label>
+                    <label class="ripple_btn_low">
+                        <md-radio name="temperature_unit_group" value="fahrenheit"></md-radio>
+                        <span class="unit_group_text_fahrenheit">°F</span>
+                    </label>
+                </div>
+                <div slot="actions">
+                    <md-text-button onclick="window.history.back();" data-translate="cancel">Cancel</md-text-button>
+                </div>
+            </md-dialog>
+
+            <!-- wind dialog -->
+
+            <md-dialog id="wind_unit_selection_dialog">
+                <div slot="headline" data-translate="wind_unit">Wind Unit</div>
+
+                <div slot="content" class="radios_units_dialog">
+                    <label class="ripple_btn_low">
+                        <md-radio name="wind_unit_group" value="kilometer"></md-radio>
+                        <span class="unit_group_text_kilometer">Km/h</span>
+                    </label>
+                    <label class="ripple_btn_low">
+                        <md-radio name="wind_unit_group" value="mile"></md-radio>
+                        <span class="unit_group_text_mile">Mph</span>
+                    </label>
+                    <label class="ripple_btn_low">
+                        <md-radio name="wind_unit_group" value="M/s"></md-radio>
+                        <span class="unit_group_text_Ms">M/s</span>
+                    </label>
+                    <label class="ripple_btn_low">
+                        <md-radio name="wind_unit_group" value="Beaufort"></md-radio>
+                        <span class="unit_group_text_Beaufort">Beaufort</span>
+                    </label>
+                </div>
+                <div slot="actions">
+                    <md-text-button onclick="window.history.back();" data-translate="cancel">Cancel</md-text-button>
+                </div>
+            </md-dialog>
+
+            <!-- visibility dialog -->
+
+            <md-dialog id="visibility_unit_selection_dialog">
+                <div slot="headline" data-translate="visibility_unit">Visibility Unit</div>
+
+                <div slot="content" class="radios_units_dialog">
+                    <label class="ripple_btn_low">
+                        <md-radio name="visibility_unit_group" value="km"></md-radio>
+                        <span class="unit_group_text_km">km</span>
+                    </label>
+                    <label class="ripple_btn_low">
+                        <md-radio name="visibility_unit_group" value="mileV"></md-radio>
+                        <span class="unit_group_text_mileV">mile</span>
+                    </label>
+                </div>
+                <div slot="actions">
+                    <md-text-button onclick="window.history.back();" data-translate="cancel">Cancel</md-text-button>
+                </div>
+            </md-dialog>
+
+            <!-- precipitation dialog -->
+
+            <md-dialog id="precipitation_unit_selection_dialog">
+                <div slot="headline" data-translate="precipitation_unit">Precipitation Unit</div>
+
+                <div slot="content" class="radios_units_dialog">
+                    <label class="ripple_btn_low">
+                        <md-radio name="precipitation_unit_group" value="mm"></md-radio>
+                        <span class="unit_group_text_mm">mm</span>
+                    </label>
+                    <label class="ripple_btn_low">
+                        <md-radio name="precipitation_unit_group" value="cm"></md-radio>
+                        <span class="unit_group_text_cm">cm</span>
+                    </label>
+                    <label class="ripple_btn_low">
+                        <md-radio name="precipitation_unit_group" value="in"></md-radio>
+                        <span class="unit_group_text_in">in</span>
+                    </label>
+                </div>
+                <div slot="actions">
+                    <md-text-button onclick="window.history.back();" data-translate="cancel">Cancel</md-text-button>
+                </div>
+            </md-dialog>
+
+            <!-- pressure dialog -->
+
+            <md-dialog id="pressure_unit_selection_dialog">
+                <div slot="headline" data-translate="pressure_unit">Pressure Unit</div>
+
+                <div slot="content" class="radios_units_dialog">
+                    <label class="ripple_btn_low">
+                        <md-radio name="pressure_unit_group" value="hPa"></md-radio>
+                        <span class="unit_group_text_hPa">hPa</span>
+                    </label>
+                    <label class="ripple_btn_low">
+                        <md-radio name="pressure_unit_group" value="inHg"></md-radio>
+                        <span class="unit_group_text_inHg">inHg</span>
+                    </label>
+                    <label class="ripple_btn_low">
+                        <md-radio name="pressure_unit_group" value="mmHg"></md-radio>
+                        <span class="unit_group_text_mmHg">mmHg</span>
+                    </label>
+                </div>
+                <div slot="actions">
+                    <md-text-button onclick="window.history.back();" data-translate="cancel">Cancel</md-text-button>
+                </div>
+            </md-dialog>
+
+            <!-- time dialog -->
+
+            <md-dialog id="time_unit_selection_dialog">
+                <div slot="headline" data-translate="time_format">Time format</div>
+
+                <div slot="content" class="radios_units_dialog">
+                    <label class="ripple_btn_low">
+                        <md-radio name="time_unit_group" value="12 hour"></md-radio>
+                        <span>12 hr</span>
+                    </label>
+                    <label class="ripple_btn_low">
+                        <md-radio name="time_unit_group" value="24 hour"></md-radio>
+                        <span>24 hr</span>
+                    </label>
+                </div>
+                <div slot="actions">
+                    <md-text-button onclick="window.history.back();" data-translate="cancel">Cancel</md-text-button>
+                </div>
+            </md-dialog>
+
+            <!-- aqi dialog -->
+
+            <md-dialog id="aqi_unit_selection_dialog">
+                <div slot="headline" data-translate="aqi_type">AQI type</div>
+
+                <div slot="content" class="radios_units_dialog">
+                    <label class="ripple_btn_low">
+                        <md-radio name="aqi_unit_group" value="us_aqi"></md-radio>
+                        <span data-translate="united_states_aqi">United States AQI</span>
+                    </label>
+                    <label class="ripple_btn_low">
+                        <md-radio name="aqi_unit_group" value="eu_aqi"></md-radio>
+                        <span data-translate="european_aqi">European AQI</span>
+                    </label>
+                </div>
+                <div slot="actions">
+                    <md-text-button onclick="window.history.back();" data-translate="cancel">Cancel</md-text-button>
+                </div>
+            </md-dialog>
+
+        </div>
+    </div>
+</div>
+
+<script>
+
+
+function hexToRgb(hex) {
+    const bigint = parseInt(hex.slice(1), 16);
+    return {
+        r: (bigint >> 16) & 255,
+        g: (bigint >> 8) & 255,
+        b: bigint & 255
+    };
+}
+
+function rgbToHsl({ r, g, b }) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h, s, l = (max + min) / 2;
+
+    if (max === min) {
+        h = s = 0; // Achromatic
+    } else {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+            case g: h = (b - r) / d + 2; break;
+            case b: h = (r - g) / d + 4; break;
+        }
+        h /= 6;
+    }
+
+    return { h: h * 360, s: s * 100, l: l * 100 };
+}
+
+async function CreateMaterialYouTheme(hex) {
+    const colors = {
+        orange_material: "#FFA500",
+        red_material: "#FF0000",
+        pink_material: "#FFC0CB",
+        purple_material: "#800080",
+        blue_material: "#0000FF",
+        yellow_material: "#FFFF00",
+        green_material: "#008000"
+    };
+
+    const targetHsl = rgbToHsl(hexToRgb(hex));
+    let closestColor = null;
+    let smallestHueDifference = Infinity;
+
+    for (const [color, colorHex] of Object.entries(colors)) {
+        const colorHsl = rgbToHsl(hexToRgb(colorHex));
+        const hueDifference = Math.abs(targetHsl.h - colorHsl.h);
+
+        if (hueDifference < smallestHueDifference) {
+            smallestHueDifference = hueDifference;
+            closestColor = color;
+        }
+    }
+
+ if(localStorage.getItem("useDynamicColors") && localStorage.getItem("useDynamicColors") === "false"){
+        if (await customStorage.getItem("customTheme")) {
+      document.documentElement.setAttribute(
+        "Theme",
+        await customStorage.getItem("customTheme")
+      );
+            sendThemeToAndroid(
+        `${document.documentElement.getAttribute("Theme")}_ScrollFalse`
+      );
+    }
+  } else{
+  document.documentElement.setAttribute('Theme', closestColor);
+  sendThemeToAndroid(`${closestColor}_ScrollFalse`);
+  }
+}
+
+        const user1 = document.getElementById('headUser-1')
+
+        function changeColorOnScroll1() {
+            var container = document.getElementById('headUser-1');
+            var scrollY = container.scrollTop;
+
+            if (scrollY >= 50) {
+                document.getElementById('head-1').style.backgroundColor = 'var(--Surface-Container)';
+                document.getElementById('head-1').style.transition = '';
+
+                document.getElementById('headUser-1').style.scrollSnapType = 'unset';
+                container.removeEventListener('scroll', changeColorOnScroll1);
+      sendThemeToAndroid(`${document.documentElement.getAttribute('Theme')}_Scrolled`);
+
+
+            } else {
+
+            }
+        }
+
+        if (user1) {
+            document.getElementById('headUser-1').addEventListener('scroll', changeColorOnScroll1);
+        }
+
+
+
+        function changeColorOnScroll1A() {
+            var container = document.getElementById('headUser-1');
+            var scrollY = container.scrollTop;
+
+            if (scrollY <= 1) {
+                document.getElementById('head-1').style.backgroundColor = '';
+                document.getElementById('head-1').style.transition = 'background-color 0.2s ease-in';
+
+                      sendThemeToAndroid(`${document.documentElement.getAttribute('Theme')}_ScrollFalse`);
+
+                container.addEventListener('scroll', changeColorOnScroll1);
+                if (scrollY <= 20); {
+                    document.getElementById('headUser-1').style.scrollSnapType = '';
+
+                }
+
+            } else {
+
+            }
+        }
+
+        if (user1) {
+            document.getElementById('headUser-1').addEventListener('scroll', changeColorOnScroll1A);
+        }
+
+        function sendThemeToAndroid(theme) {
+
+            AndroidInterface.updateStatusBarColor(theme);
+        };
+
+        // open dialogs
+
+        const temp_unit_selection_dialog = document.getElementById('temp_unit_selection_dialog');
+        const wind_unit_selection_dialog = document.getElementById('wind_unit_selection_dialog');
+        const visibility_unit_selection_dialog = document.getElementById('visibility_unit_selection_dialog');
+        const precipitation_unit_selection_dialog = document.getElementById('precipitation_unit_selection_dialog');
+        const pressure_unit_selection_dialog = document.getElementById('pressure_unit_selection_dialog');
+        const time_unit_selection_dialog = document.getElementById('time_unit_selection_dialog');
+        const aqi_unit_selection_dialog = document.getElementById('aqi_unit_selection_dialog');
+
+        const data_selected_temp_unit_text = document.getElementById('data_selected_temp_unit_text');
+        const data_selected_wind_unit_text = document.getElementById('data_selected_wind_unit_text');
+        const data_selected_visibility_unit_text = document.getElementById('data_selected_visibility_unit_text');
+        const data_selected_precipitation_unit_text = document.getElementById('data_selected_precipitation_unit_text');
+        const data_selected_pressure_unit_text = document.getElementById('data_selected_pressure_unit_text');
+        const data_selected_time_unit_text = document.getElementById('data_selected_time_unit_text');
+        const data_selected_aqi_unit_text = document.getElementById('data_selected_aqi_unit_text');
+
+
+        window.addEventListener("popstate", function (event) {
+        if (temp_unit_selection_dialog.open) {
+            temp_unit_selection_dialog.close();
+        } else if(wind_unit_selection_dialog.open){
+            wind_unit_selection_dialog.close();
+        } else if(visibility_unit_selection_dialog.open){
+            visibility_unit_selection_dialog.close();
+        } else if(precipitation_unit_selection_dialog.open){
+            precipitation_unit_selection_dialog.close();
+        } else if(pressure_unit_selection_dialog.open){
+            pressure_unit_selection_dialog.close();
+        } else if(time_unit_selection_dialog.open){
+            time_unit_selection_dialog.close();
+        } else if(aqi_unit_selection_dialog.open){
+            aqi_unit_selection_dialog.close();
+        }
+    });
+
+
+    temp_unit_selection_dialog.addEventListener('cancel', () =>{
+        temp_unit_selection_dialog.addEventListener('closed', () =>{
+            window.history.back();
+        })
+    });
+    wind_unit_selection_dialog.addEventListener('cancel', () =>{
+        wind_unit_selection_dialog.addEventListener('closed', () =>{
+            window.history.back();
+        })
+    });
+    visibility_unit_selection_dialog.addEventListener('cancel', () =>{
+        visibility_unit_selection_dialog.addEventListener('closed', () =>{
+            window.history.back();
+        })
+    });
+    precipitation_unit_selection_dialog.addEventListener('cancel', () =>{
+        precipitation_unit_selection_dialog.addEventListener('closed', () =>{
+            window.history.back();
+        })
+    });
+    pressure_unit_selection_dialog.addEventListener('cancel', () =>{
+        pressure_unit_selection_dialog.addEventListener('closed', () =>{
+            window.history.back();
+        })
+    });
+    time_unit_selection_dialog.addEventListener('cancel', () =>{
+        time_unit_selection_dialog.addEventListener('closed', () =>{
+            window.history.back();
+        })
+    });
+    aqi_unit_selection_dialog.addEventListener('cancel', () =>{
+        aqi_unit_selection_dialog.addEventListener('closed', () =>{
+            window.history.back();
+        })
+    });
+
+    const SelectedTempUnit = localStorage.getItem('SelectedTempUnit');
+    const SelectedWindUnit = localStorage.getItem('SelectedWindUnit');
+    const selectedVisibilityUnit = localStorage.getItem('selectedVisibilityUnit');
+    const selectedPrecipitationUnit = localStorage.getItem('selectedPrecipitationUnit');
+    const selectedPressureUnit = localStorage.getItem('selectedPressureUnit');
+    const selectedTimeMode = localStorage.getItem('selectedTimeMode');
+    const selectedAQItype = localStorage.getItem('selectedAQItype');
+
+    if(SelectedTempUnit){
+        document.querySelector(`[value="${SelectedTempUnit}"]`).checked = true;
+
+    } else{
+        document.querySelector(`[value="celsius"]`).checked = true;
+
+
+    }
+
+    if(SelectedWindUnit){
+        document.querySelector(`[value="${SelectedWindUnit}"]`).checked = true;
+    } else{
+        document.querySelector(`[value="kilometer"]`).checked = true;
+    }
+
+    if(selectedVisibilityUnit){
+        document.querySelector(`[value="${selectedVisibilityUnit}"]`).checked = true;
+    } else{
+        document.querySelector(`[value="km"]`).checked = true;
+    }
+
+    if(selectedPrecipitationUnit){
+        document.querySelector(`[value="${selectedPrecipitationUnit}"]`).checked = true;
+    } else{
+        document.querySelector(`[value="mm"]`).checked = true;
+    }
+
+    if(selectedPressureUnit){
+        document.querySelector(`[value="${selectedPressureUnit}"]`).checked = true;
+    } else{
+        document.querySelector(`[value="hPa"]`).checked = true;
+    }
+
+    if(selectedTimeMode){
+        document.querySelector(`[value="${selectedTimeMode}"]`).checked = true;
+    } else{
+        document.querySelector(`[value="12 hour"]`).checked = true;
+    }
+
+    if(selectedAQItype){
+        document.querySelector(`[value="${selectedAQItype}"]`).checked = true;
+    } else{
+        document.querySelector(`[value="us_aqi"]`).checked = true;
+    }
+
+    if(SelectedTempUnit === 'fahrenheit'){
+        data_selected_temp_unit_text.innerHTML = '°F';
+    } else{
+        data_selected_temp_unit_text.innerHTML = '°C';
+    }
+
+    if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+            if(SelectedTempUnit === 'Beaufort'){
+        data_selected_wind_unit_text.innerHTML = '蒲福风级'
+        } else if(SelectedTempUnit === 'mile'){
+            data_selected_wind_unit_text.innerHTML = '英里/时';
+        } else if(SelectedTempUnit === 'M/s'){
+            data_selected_wind_unit_text.innerHTML = '米/秒';
+        }else{
+            data_selected_wind_unit_text.innerHTML = '公里/时'
+        }
+        } else{
+        if(SelectedTempUnit === 'Beaufort'){
+        data_selected_wind_unit_text.innerHTML = 'Beaufort'
+        } else if(SelectedTempUnit === 'mile'){
+            data_selected_wind_unit_text.innerHTML = 'Mph';
+        } else if(SelectedTempUnit === 'M/s'){
+            data_selected_wind_unit_text.innerHTML = 'M/s';
+        }else{
+            data_selected_wind_unit_text.innerHTML = 'Km/h'
+        }
+        }
+
+
+        if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+            if(SelectedTempUnit === 'mileV'){
+            data_selected_visibility_unit_text.innerHTML = '英里'
+        } else{
+            data_selected_visibility_unit_text.innerHTML = '公里';
+        }
+        } else{
+            if(SelectedTempUnit === 'mileV'){
+            data_selected_visibility_unit_text.innerHTML = 'Mile'
+        } else{
+            data_selected_visibility_unit_text.innerHTML = 'Km';
+        }
+        }
+
+        if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+            if(SelectedTempUnit === 'cm'){
+            data_selected_precipitation_unit_text.innerHTML = '厘米'
+        } else if(SelectedTempUnit === 'in'){
+            data_selected_precipitation_unit_text.innerHTML = '英寸';
+        }else{
+            data_selected_precipitation_unit_text.innerHTML = '毫米'
+        }
+        } else{
+            if(SelectedTempUnit === 'cm'){
+            data_selected_precipitation_unit_text.innerHTML = 'cm'
+        } else if(SelectedTempUnit === 'in'){
+            data_selected_precipitation_unit_text.innerHTML = 'in';
+        }else{
+            data_selected_precipitation_unit_text.innerHTML = 'mm'
+        }
+        }
+
+        if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+            if(SelectedTempUnit === 'inHg'){
+            data_selected_pressure_unit_text.innerHTML = '英寸汞柱'
+        } else if(SelectedTempUnit === 'mmHg'){
+            data_selected_pressure_unit_text.innerHTML = '毫米汞柱';
+        }else{
+            data_selected_pressure_unit_text.innerHTML = '百帕'
+        }
+        } else{
+            if(SelectedTempUnit === 'inHg'){
+            data_selected_pressure_unit_text.innerHTML = 'inHg'
+        } else if(SelectedTempUnit === 'mmHg'){
+            data_selected_pressure_unit_text.innerHTML = 'mmHg';
+        }else{
+            data_selected_pressure_unit_text.innerHTML = 'hPa'
+        }
+        }
+
+        if(SelectedTempUnit === '24 hour'){
+            data_selected_time_unit_text.innerHTML = '24 hour'
+        } else{
+            data_selected_time_unit_text.innerHTML = '12 hour';
+        }
+
+        if(SelectedTempUnit === 'eu_aqi'){
+            data_selected_aqi_unit_text.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'european_aqi')
+        } else{
+            data_selected_aqi_unit_text.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'united_states_aqi')
+        }
+
+    function changeUnit(dialog_data){
+            window.history.pushState({ UnitDialogOpen: true }, "");
+            if(dialog_data === 'Temperature'){
+                temp_unit_selection_dialog.show();
+
+            } else if(dialog_data === 'Wind'){
+                wind_unit_selection_dialog.show();
+
+            } else if(dialog_data === 'Visibility'){
+                visibility_unit_selection_dialog.show();
+
+            } else if(dialog_data === 'Precipitation'){
+                precipitation_unit_selection_dialog.show();
+
+            } else if(dialog_data === 'Pressure'){
+                pressure_unit_selection_dialog.show();
+
+            } else if(dialog_data === 'Time'){
+                time_unit_selection_dialog.show();
+
+            } else if(dialog_data === 'AQI'){
+                aqi_unit_selection_dialog.show();
+
+            }
+          if (document.getElementById("headUser-1").scrollTop >= 50) {
+            sendThemeToAndroid(
+              `${document.documentElement.getAttribute("Theme")}_DialogScrolled`
+            );
+          } else {
+            sendThemeToAndroid(
+              `${document.documentElement.getAttribute("Theme")}_DialogNotScrolled`
+            );
+          }
+        }
+
+            temp_unit_selection_dialog.addEventListener('close', () =>{
+            if (document.getElementById("headUser-1").scrollTop >= 50) {
+            sendThemeToAndroid(
+                `${document.documentElement.getAttribute("Theme")}_Scrolled`
+            );
+            } else {
+            sendThemeToAndroid(
+                `${document.documentElement.getAttribute("Theme")}_ScrollFalse`
+            );
+            }
+        })
+            wind_unit_selection_dialog.addEventListener('close', () =>{
+                if (document.getElementById("headUser-1").scrollTop >= 50) {
+            sendThemeToAndroid(
+                `${document.documentElement.getAttribute("Theme")}_Scrolled`
+            );
+            } else {
+            sendThemeToAndroid(
+                `${document.documentElement.getAttribute("Theme")}_ScrollFalse`
+            );
+            }
+            })
+            visibility_unit_selection_dialog.addEventListener('close', () =>{
+                if (document.getElementById("headUser-1").scrollTop >= 50) {
+            sendThemeToAndroid(
+                `${document.documentElement.getAttribute("Theme")}_Scrolled`
+            );
+            } else {
+            sendThemeToAndroid(
+                `${document.documentElement.getAttribute("Theme")}_ScrollFalse`
+            );
+            }
+            })
+            precipitation_unit_selection_dialog.addEventListener('close', () =>{
+                if (document.getElementById("headUser-1").scrollTop >= 50) {
+            sendThemeToAndroid(
+                `${document.documentElement.getAttribute("Theme")}_Scrolled`
+            );
+            } else {
+            sendThemeToAndroid(
+                `${document.documentElement.getAttribute("Theme")}_ScrollFalse`
+            );
+            }
+            })
+            pressure_unit_selection_dialog.addEventListener('close', () =>{
+                if (document.getElementById("headUser-1").scrollTop >= 50) {
+            sendThemeToAndroid(
+                `${document.documentElement.getAttribute("Theme")}_Scrolled`
+            );
+            } else {
+            sendThemeToAndroid(
+                `${document.documentElement.getAttribute("Theme")}_ScrollFalse`
+            );
+            }
+            })
+            time_unit_selection_dialog.addEventListener('close', () =>{
+                if (document.getElementById("headUser-1").scrollTop >= 50) {
+            sendThemeToAndroid(
+                `${document.documentElement.getAttribute("Theme")}_Scrolled`
+            );
+            } else {
+            sendThemeToAndroid(
+                `${document.documentElement.getAttribute("Theme")}_ScrollFalse`
+            );
+            }
+            })
+            aqi_unit_selection_dialog.addEventListener('close', () =>{
+                if (document.getElementById("headUser-1").scrollTop >= 50) {
+            sendThemeToAndroid(
+                `${document.documentElement.getAttribute("Theme")}_Scrolled`
+            );
+            } else {
+            sendThemeToAndroid(
+                `${document.documentElement.getAttribute("Theme")}_ScrollFalse`
+            );
+            }
+            })
+
+        const temperature_unit_group = document.querySelectorAll('[name="temperature_unit_group"]');
+        const wind_unit_group = document.querySelectorAll('[name="wind_unit_group"]');
+        const visibility_unit_group = document.querySelectorAll('[name="visibility_unit_group"]');
+        const precipitation_unit_group = document.querySelectorAll('[name="precipitation_unit_group"]');
+        const pressure_unit_group = document.querySelectorAll('[name="pressure_unit_group"]');
+        const time_unit_group = document.querySelectorAll('[name="time_unit_group"]');
+        const aqi_unit_group = document.querySelectorAll('[name="aqi_unit_group"]');
+
+        temperature_unit_group.forEach((temperature_unit_radio) =>{
+            temperature_unit_radio.addEventListener('input', () =>{
+                localStorage.setItem('SelectedTempUnit', temperature_unit_radio.value)
+                window.history.back();
+
+                if(temperature_unit_radio.value === 'fahrenheit'){
+                    data_selected_temp_unit_text.innerHTML = '°F';
+                } else{
+                    data_selected_temp_unit_text.innerHTML = '°C';
+                }
+            })
+        });
+
+        wind_unit_group.forEach((wind_unit_radio) =>{
+            wind_unit_radio.addEventListener('input', () =>{
+                localStorage.setItem('SelectedWindUnit', wind_unit_radio.value)
+                window.history.back();
+
+                if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                    if(wind_unit_radio.value === 'Beaufort'){
+                data_selected_wind_unit_text.innerHTML = '蒲福风级'
+                } else if(wind_unit_radio.value === 'mile'){
+                    data_selected_wind_unit_text.innerHTML = '英里/时';
+                } else if(wind_unit_radio.value === 'M/s'){
+                    data_selected_wind_unit_text.innerHTML = '米/秒';
+                }else{
+                    data_selected_wind_unit_text.innerHTML = '公里/时'
+                }
+                } else{
+                if(wind_unit_radio.value === 'Beaufort'){
+                data_selected_wind_unit_text.innerHTML = 'Beaufort'
+                } else if(wind_unit_radio.value === 'mile'){
+                    data_selected_wind_unit_text.innerHTML = 'Mph';
+                } else if(wind_unit_radio.value === 'M/s'){
+                    data_selected_wind_unit_text.innerHTML = 'M/s';
+                }else{
+                    data_selected_wind_unit_text.innerHTML = 'Km/h'
+                }
+                }
+
+
+
+
+            })
+        });
+
+        visibility_unit_group.forEach((visibility_unit_radio) =>{
+            visibility_unit_radio.addEventListener('input', () =>{
+                localStorage.setItem('selectedVisibilityUnit', visibility_unit_radio.value)
+                window.history.back();
+
+                if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                    if(visibility_unit_radio.value === 'mileV'){
+                    data_selected_visibility_unit_text.innerHTML = '英里'
+                } else{
+                    data_selected_visibility_unit_text.innerHTML = '公里';
+                }
+                } else{
+                    if(visibility_unit_radio.value === 'mileV'){
+                    data_selected_visibility_unit_text.innerHTML = 'Mile'
+                } else{
+                    data_selected_visibility_unit_text.innerHTML = 'Km';
+                }
+                }
+
+            })
+        });
+
+        precipitation_unit_group.forEach((precipitation_unit_radio) =>{
+            precipitation_unit_radio.addEventListener('input', () =>{
+                localStorage.setItem('selectedPrecipitationUnit', precipitation_unit_radio.value)
+                window.history.back();
+
+                if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                    if(precipitation_unit_radio.value === 'cm'){
+                    data_selected_precipitation_unit_text.innerHTML = '厘米'
+                } else if(precipitation_unit_radio.value === 'in'){
+                    data_selected_precipitation_unit_text.innerHTML = '英寸';
+                }else{
+                    data_selected_precipitation_unit_text.innerHTML = '毫米'
+                }
+                } else{
+                    if(precipitation_unit_radio.value === 'cm'){
+                    data_selected_precipitation_unit_text.innerHTML = 'cm'
+                } else if(precipitation_unit_radio.value === 'in'){
+                    data_selected_precipitation_unit_text.innerHTML = 'in';
+                }else{
+                    data_selected_precipitation_unit_text.innerHTML = 'mm'
+                }
+                }
+
+            })
+        });
+
+        pressure_unit_group.forEach((pressure_unit_radio) =>{
+            pressure_unit_radio.addEventListener('input', () =>{
+                localStorage.setItem('selectedPressureUnit', pressure_unit_radio.value)
+                window.history.back();
+
+                if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                    if(pressure_unit_radio.value === 'inHg'){
+                    data_selected_pressure_unit_text.innerHTML = '英寸汞柱'
+                } else if(pressure_unit_radio.value === 'mmHg'){
+                    data_selected_pressure_unit_text.innerHTML = '毫米汞柱';
+                }else{
+                    data_selected_pressure_unit_text.innerHTML = '百帕'
+                }
+                } else{
+                    if(pressure_unit_radio.value === 'inHg'){
+                    data_selected_pressure_unit_text.innerHTML = 'inHg'
+                } else if(pressure_unit_radio.value === 'mmHg'){
+                    data_selected_pressure_unit_text.innerHTML = 'mmHg';
+                }else{
+                    data_selected_pressure_unit_text.innerHTML = 'hPa'
+                }
+                }
+
+            })
+        });
+
+        time_unit_group.forEach((time_unit_radio) =>{
+            time_unit_radio.addEventListener('input', () =>{
+                localStorage.setItem('selectedTimeMode', time_unit_radio.value)
+                window.history.back();
+
+                if(time_unit_radio.value === '24 hour'){
+                    data_selected_time_unit_text.innerHTML = '24 hour'
+                } else{
+                    data_selected_time_unit_text.innerHTML = '12 hour';
+                }
+            })
+        });
+
+        aqi_unit_group.forEach((aqi_unit_radio) =>{
+            aqi_unit_radio.addEventListener('input', () =>{
+                localStorage.setItem('selectedAQItype', aqi_unit_radio.value)
+                window.history.back();
+
+                if(aqi_unit_radio.value === 'eu_aqi'){
+                    data_selected_aqi_unit_text.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'european_aqi')
+                } else{
+                    data_selected_aqi_unit_text.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'united_states_aqi')
+                }
+            })
+        });
+
+        if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+        document.querySelector('.unit_group_text_kilometer').textContent = '公里/时'
+        document.querySelector('.unit_group_text_mile').textContent = '英里/时'
+        document.querySelector('.unit_group_text_Ms').textContent = '米/秒'
+        document.querySelector('.unit_group_text_Beaufort').textContent = '蒲福风级'
+        document.querySelector('.unit_group_text_km').textContent = '公里'
+        document.querySelector('.unit_group_text_mileV').textContent = '英里'
+        document.querySelector('.unit_group_text_mm').textContent = '毫米'
+        document.querySelector('.unit_group_text_cm').textContent = '厘米'
+        document.querySelector('.unit_group_text_in').textContent = '英寸'
+        document.querySelector('.unit_group_text_hPa').textContent = '百帕'
+        document.querySelector('.unit_group_text_inHg').textContent = '英寸汞柱'
+        document.querySelector('.unit_group_text_mmHg').textContent = '毫米汞柱'
+
+      }
+
+        </script>
+
+<script src="../components-script.js/components.js"></script>
+<script src="../ripple-files/icon-ripple.js"></script>
+<script src="../modules/scroll.js"></script>
+<script src="../modules/ripple_acc.js"></script>
+<script src="../app/navigate.js"></script>
+<script src="bundle.js"></script>
+<script type="module" src="../index.js"></script>
+</body>
+
+</html>

app/src/main/assets/pages/ClothingRecommendation.html

@@ -95,11 +95,6 @@
             position: fixed;
             left: 0;
             width: 100%;
-            scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-    scroll-snap-align: start;
-  scroll-snap-stop: always;
-  display: flex;
         }
 
         .wrap_data img{
@@ -158,7 +153,8 @@
         .clothin_activity{
             width: 100%;
             flex-shrink: 0;
-            scroll-snap-align: start;
+           animation: jump 0.5s cubic-bezier(0,1,0,1);
+
         }
 
 
@@ -204,16 +200,16 @@
 
     </div>
 
-    <div id="evening" class="clothin_activity" >
+    <div id="evening" class="clothin_activity" hidden>
 
     </div>
 
-    <div id="night" class="clothin_activity" >
+    <div id="night" class="clothin_activity" hidden>
 
     </div>
 
 
-    <div id="day_tip" class="clothin_activity" ></div>
+    <div id="day_tip" class="clothin_activity" hidden></div>
 
     <div id="air_quality_details"  class="clothin_activity" hidden style="margin-bottom: 60px;"></div>
 

app/src/main/assets/pages/conditions_pages/airQuality_forecast.html

@@ -31,11 +31,11 @@
             justify-content: space-between;
             background-color: var(--Surface-Container);
             margin: 10px;
-            border-radius: 20px;
+            border-radius: 20px 20px 0 0;
             padding: 20px;
             padding-left: 15px;
             padding-right: 15px;
-
+            margin-bottom: 0;
         }
 
         .svg_mat_icon_aqi svg{
@@ -58,6 +58,7 @@
         .aqi_data_info{
             color: var(--On-Surface-Variant);
             font-family: var(--google-normal);
+            width: 55%;
 
         }
 
@@ -67,6 +68,7 @@
             justify-content: space-between;
             align-items: flex-start;
             gap: 3px;
+                margin-top: 5px;
         }
 
         #aqi_value_point{
@@ -97,7 +99,49 @@
                 opacity: 1;
             }
         }
+        .air_quality_bar {
+        width: 100%;
+        height: 8px;
+        background: linear-gradient(to right,
+            #00e400,  /* Good (Green) */
+            #ffff00,  /* Moderate (Yellow) */
+            #ff7e00,  /* Unhealthy for Sensitive Groups (Orange) */
+            #ff0000,  /* Unhealthy (Red) */
+            #8f3f97,  /* Very Unhealthy (Purple) */
+            #7e0023   /* Hazardous (Dark Purple) */
+        );
+        border-radius: 50px;
+        display: flex;
+        margin-bottom: 0;
+        position: relative;
 
+
+        }
+        air_quality_bar_progress{
+        position: absolute;
+        left: 0;
+        width: 5%;
+        z-index: 1;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        top: 0;
+
+        }
+
+        air_quality_bar_progress::before{
+        content: '';
+        width: 13px;
+        height: 13px;
+        position: absolute;
+        right: 0;
+        background-color: transparent;
+        border-radius: 50px;
+        top: 50%;
+        transform: translateY(-50%);
+        border: 2px solid white;
+        background-color: var(--percentageColor);
+        }
     </style>
 </head>
 
@@ -120,7 +164,11 @@
 
         <div class="aqi_data_info">
             <p id="aqi_name">Good</p>
+            <div class="air_quality_bar">
+                <air_quality_bar_progress>
 
+                </air_quality_bar_progress>
+            </div>
             <div class="aqi_full">
                 <span id="us_aqi_value">US AQI: </span>
                 <span id="eu_aqi_value">EU AQI:</span>
@@ -142,9 +190,9 @@
 
     <div class="eq_us_Switcher" style="padding-bottom: 20px;">
 
-        <md-tabs id="change_aqi_type_tabs">
-            <md-primary-tab>United States</md-primary-tab>
-            <md-primary-tab>European</md-primary-tab>
+        <md-tabs id="change_aqi_type_tabs" style="--md-primary-tab-container-color: var(--Surface-Container); --md-divider-color: transparent; margin-left: 10px; margin-right: 10px; border-radius: 0px 0 20px 20px;">
+            <md-primary-tab style="font-family: var(--google-mid);">United States</md-primary-tab>
+            <md-primary-tab style="font-family: var(--google-mid);">European</md-primary-tab>
 
         </md-tabs>
 
@@ -277,33 +325,57 @@ AndroidInterface.updateStatusBarColor(theme);
         const aqi = data.current.us_aqi;
 
         let aqiCategory;
+        let percentage = 0;
+        let percentageColor = ''
 
         if (aqi <= 50) {
             aqiCategory = 1;
+            percentage = Math.min(5 + ((aqi / 50) * 16), 10);
+            percentageColor = '#00e400';
         } else if (aqi <= 100) {
             aqiCategory = 2;
+            percentage = Math.min(20 + (((aqi - 50) / 50) * 16), 42);
+            percentageColor = '#ffff00';
         } else if (aqi <= 150) {
             aqiCategory = 3;
+            percentage = Math.min(42 + (((aqi - 100) / 50) * 16), 50);
+            percentageColor = '#ff0000';
         } else if (aqi <= 200) {
             aqiCategory = 4;
+            percentage = Math.min(58 + (((aqi - 150) / 50) * 16), 74);
+            percentageColor = '#ff0000';
         } else {
             aqiCategory = 5;
+            percentage = Math.min(74 + (((aqi - 200) / 100) * 16), 95);
+            percentageColor = '#8f3f97';
         }
 
         const aqiEU = data.current.european_aqi || 'No data';
 
         let aqiCategoryEU;
+        let percentageEu = 0;
+        let percentageColorEu = ''
 
         if (aqiEU <= 25) {
             aqiCategoryEU = 1;
+            percentageEu = Math.min(5 + ((aqiEU / 25) * 16), 10);
+            percentageColorEu = '#00e400'
         } else if (aqiEU <= 50) {
             aqiCategoryEU = 2; // Fair
+            percentageEu = Math.min(20 + (((aqiEU - 25) / 25) * 16), 42);
+            percentageColorEu = '#ffff00'
         } else if (aqiEU <= 75) {
             aqiCategoryEU = 3; // Moderate
+            percentageEu = Math.min(40 + (((aqiEU - 50) / 50) * 16), 50);
+            percentageColorEu = '#ff7e00'
         } else if (aqiEU <= 100) {
             aqiCategoryEU = 4; // Poor
+            percentageEu = Math.min(58 + (((aqiEU - 75) / 50) * 16), 74);
+            percentageColorEu = '#ff0000'
         } else {
             aqiCategoryEU = 5; // Very Poor
+            percentageEu = Math.min(74 + (((aqiEU - 100) / 100) * 16), 95);
+            percentageColorEu = '#8f3f97'
         }
 
 
@@ -321,10 +393,13 @@ AndroidInterface.updateStatusBarColor(theme);
         if(localStorage.getItem('selectedAQItype') === 'eu_aqi'){
             document.getElementById('aqi_value_point').innerHTML = aqiCategoryEU;
             document.getElementById("aqi-level-color").style.fill = backgroundColor[aqiCategoryEU];
-
+            percentageEu = Math.min(95, Math.max(5, percentageEu.toFixed(2)));
+            document.querySelector('air_quality_bar_progress').style = `--percentageColor: ${percentageColorEu}; width: ${percentageEu}%;`
         } else{
             document.getElementById('aqi_value_point').innerHTML = aqiCategory;
              document.getElementById("aqi-level-color").style.fill = backgroundColor[aqiCategory];
+            percentage = Math.min(95, Math.max(5, percentage.toFixed(2)));
+            document.querySelector('air_quality_bar_progress').style = `--percentageColor: ${percentageColor}; width: ${percentage}%;`
         }
 
 
@@ -368,8 +443,11 @@ document.addEventListener("DOMContentLoaded", async function () {
 
         if(document.querySelector('.condition_info_content').scrollTop > 50){
             document.getElementById('hidden_anim_p').style.height = '22px'
+            document.querySelector('.top_conditions_for_header').classList.add('scroll');
+
         } else{
             document.getElementById('hidden_anim_p').style.height = '0'
+            document.querySelector('.top_conditions_for_header').classList.remove('scroll');
 
         }
 

app/src/main/assets/pages/conditions_pages/condition_pageUI.css

@@ -35,7 +35,7 @@ p{
 
 .top_conditions_for_header{
     padding: 10px;
-    height: calc(65px - 10px);
+    height: calc(65px - 20px);
     display: flex;
     align-items: center;
 }

app/src/main/assets/pages/conditions_pages/humidity_forecast.html

@@ -228,8 +228,11 @@ AndroidInterface.updateStatusBarColor(theme);
 
         if(document.querySelector('.condition_info_content').scrollTop > 50){
             document.getElementById('hidden_anim_p').style.height = '22px'
+            document.querySelector('.top_conditions_for_header').classList.add('scroll');
+
         } else{
             document.getElementById('hidden_anim_p').style.height = '0'
+            document.querySelector('.top_conditions_for_header').classList.remove('scroll');
 
         }
 

app/src/main/assets/pages/conditions_pages/moon_forecast.html

@@ -333,8 +333,11 @@ function renderMoonData(data) {
 
         if(document.querySelector('.condition_info_content').scrollTop > 50){
             document.getElementById('hidden_anim_p').style.height = '22px'
+            document.querySelector('.top_conditions_for_header').classList.add('scroll');
+
         } else{
             document.getElementById('hidden_anim_p').style.height = '0'
+            document.querySelector('.top_conditions_for_header').classList.remove('scroll');
 
         }
 

app/src/main/assets/pages/conditions_pages/pressure_forecast.html

@@ -184,13 +184,25 @@ async function CreateMaterialYouTheme(hex) {
 
                 if (SelectedPressureUnit === 'inHg') {
                     pressureMain = (data * 0.02953).toFixed(2).replace('.', local);
-                    pressureMainUnit = 'inHg';
+                    if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                        pressureMainUnit = '英寸汞柱';
+                    } else{
+                        pressureMainUnit = 'inHg';
+                    }
                 } else if (SelectedPressureUnit === 'mmHg') {
                     pressureMain = (data * 0.750062).toFixed(2).replace('.', local);
+                    if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                        pressureMainUnit = '毫米汞柱';
+                    } else{
                     pressureMainUnit = 'mmHg';
+                    }
                 } else {
                     pressureMain = Math.round(data);
+                    if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                        pressureMainUnit = '百帕';
+                    } else{
                     pressureMainUnit = 'hPa';
+                    }
                 }
 
                 const pressureBarValue = Math.round(data);
@@ -231,8 +243,11 @@ AndroidInterface.updateStatusBarColor(theme);
 
         if(document.querySelector('.condition_info_content').scrollTop > 50){
             document.getElementById('hidden_anim_p').style.height = '22px'
+            document.querySelector('.top_conditions_for_header').classList.add('scroll');
+
         } else{
             document.getElementById('hidden_anim_p').style.height = '0'
+            document.querySelector('.top_conditions_for_header').classList.remove('scroll');
 
         }
 

app/src/main/assets/pages/conditions_pages/sunset_rise_forecast.html

@@ -211,8 +211,11 @@ AndroidInterface.updateStatusBarColor(theme);
 
         if(document.querySelector('.condition_info_content').scrollTop > 30){
             document.getElementById('hidden_anim_p').style.height = '22px'
+            document.querySelector('.top_conditions_for_header').classList.add('scroll');
+
         } else{
             document.getElementById('hidden_anim_p').style.height = '0'
+            document.querySelector('.top_conditions_for_header').classList.remove('scroll');
 
         }
 

app/src/main/assets/pages/conditions_pages/uvIndex_forecast.html

@@ -424,8 +424,10 @@ async function CreateMaterialYouTheme(hex) {
 
         if(document.querySelector('.condition_info_content').scrollTop > 50){
             document.getElementById('hidden_anim_p').style.height = '22px'
+            document.querySelector('.top_conditions_for_header').classList.add('scroll');
         } else{
             document.getElementById('hidden_anim_p').style.height = '0'
+            document.querySelector('.top_conditions_for_header').classList.remove('scroll');
 
         }
 

app/src/main/assets/pages/conditions_pages/visibility_forecast.html

@@ -146,10 +146,18 @@ async function CreateMaterialYouTheme(hex) {
 
             if (SelectedVisibiltyUnit === 'mileV') {
                 visibility = Math.round(metersToMiles(data.visibility[0]));
-                unit = 'mi';
+                if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                    unit = '英里';
+                } else{
+                    unit = 'mi';
+                }
             } else {
                 visibility = Math.round(metersToKilometers(data.visibility[0]));
+                if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                    unit = '公里';
+                } else{
                 unit = 'km';
+                }
             }
 
             document.getElementById('visibility_value').innerHTML = visibility
@@ -175,8 +183,11 @@ AndroidInterface.updateStatusBarColor(theme);
 
         if(document.querySelector('.condition_info_content').scrollTop > 50){
             document.getElementById('hidden_anim_p').style.height = '22px'
+            document.querySelector('.top_conditions_for_header').classList.add('scroll');
+
         } else{
             document.getElementById('hidden_anim_p').style.height = '0'
+            document.querySelector('.top_conditions_for_header').classList.remove('scroll');
 
         }
 

app/src/main/assets/pages/conditions_pages/wind_forecast.html

@@ -293,14 +293,30 @@ const filteredData = data.time
                 let WindSpeed;
 
                 if (SelectedWindUnit === 'mile') {
+                  if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                    WindSpeed = Math.round(data.wind_speed_10m_max[0] / 1.60934) + ' 英里/时';
+                } else{
                     WindSpeed = Math.round(data.wind_speed_10m_max[0] / 1.60934) + ' mph';
+                    }
                 } else if (SelectedWindUnit === 'M/s') {
+                  if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                    WindSpeed = (data.wind_speed_10m_max[0] / 3.6).toFixed(1).replace('.', local) + ' 米/秒';
+                } else{
                     WindSpeed = (data.wind_speed_10m_max[0] / 3.6).toFixed(1).replace('.', local) + ' m/s';
-                                          } else if (localStorage.getItem("SelectedWindUnit") === "Beaufort") {
+                    }
+                } else if (localStorage.getItem("SelectedWindUnit") === "Beaufort") {
+                  if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                    WindSpeed = getBeaufort(data.wind_speed_10m_max[0]) + ' 蒲福风级';
+                } else{
                     WindSpeed = getBeaufort(data.wind_speed_10m_max[0]) + " Bft";
+                }
                 } else {
+                if(localStorage.getItem('AppLanguage') === 'Chinese (Simplified)'){
+                    WindSpeed = Math.round(data.wind_speed_10m_max[0]) + ' 公里/时';
+                } else{
                     WindSpeed = Math.round(data.wind_speed_10m_max[0]) + ' km/h';
                 }
+                }
 
                 document.getElementById('WindHighMain').innerHTML = WindSpeed
 
@@ -322,8 +338,11 @@ AndroidInterface.updateStatusBarColor(theme);
 
         if(document.querySelector('.condition_info_content').scrollTop > 50){
             document.getElementById('hidden_anim_p').style.height = '22px'
+            document.querySelector('.top_conditions_for_header').classList.add('scroll');
+
         } else{
             document.getElementById('hidden_anim_p').style.height = '0'
+            document.querySelector('.top_conditions_for_header').classList.remove('scroll');
 
         }
 

app/src/main/assets/pages/settings.html

@@ -234,6 +234,12 @@
 
         </md-list-item>
 
+        <md-list-item type="button" onclick="sendThemeToAndroid('AppUnitsActivity')">
+          <md-icon icon-filled slot="start">thermostat</md-icon>
+          <div slot="headline" data-translate="app_units">App units</div>
+          <div slot="supporting-text" data-translate="temperature_wind_pressure_visibility_precipitation_time_aqi">Temperature, wind, pressure, visibility, precipitation, time, AQI</div>
+          <md-icon slot="end" icon-outlined>chevron_right</md-icon>
+        </md-list-item>
 
         <md-list-item>
           <md-icon icon-filled slot="start">animation</md-icon>
@@ -329,114 +335,6 @@
           </md-outlined-select>
         </md-list-item>
 
-
-
-
-        <md-list-item margin>
-          <md-icon icon-filled slot="start">airwave</md-icon>
-          <div slot="headline" data-translate="aqi_type">AQI type</div>
-          <md-outlined-select id="selectAQItype" slot="end" style="min-width: max-content; --md-outlined-field-bottom-space: 10px;--md-outlined-field-top-space: 10px;">
-            <md-select-option value="us_aqi" menu-type>
-              <div slot="headline">United States</div>
-            </md-select-option>
-            <md-select-option value="eu_aqi" menu-type>
-              <div slot="headline">European</div>
-            </md-select-option>
-          </md-outlined-select>
-        </md-list-item>
-
-        <md-list-item margin>
-          <md-icon icon-filled slot="start">device_thermostat</md-icon>
-          <div slot="headline" data-translate="temperature_unit">Temperature Unit</div>
-          <md-outlined-select id="selectTempUnit" slot="end" style="min-width: max-content; --md-outlined-field-bottom-space: 10px;--md-outlined-field-top-space: 10px;">
-            <md-select-option value="fahrenheit" menu-type>
-              <div slot="headline">°F</div>
-            </md-select-option>
-            <md-select-option value="celsius" menu-type>
-              <div slot="headline">°C</div>
-            </md-select-option>
-          </md-outlined-select>
-        </md-list-item>
-
-
-        <md-list-item>
-          <md-icon icon-filled slot="start">air</md-icon>
-          <div slot="headline" data-translate="wind_unit">Wind Unit</div>
-          <md-outlined-select id="selectWindUnit" slot="end" style="min-width: max-content; --md-outlined-field-bottom-space: 10px;--md-outlined-field-top-space: 10px;">
-            <md-select-option value="kilometer" menu-type>
-              <div slot="headline">Km/h</div>
-            </md-select-option>
-            <md-select-option value="mile" menu-type >
-              <div slot="headline">Mph</div>
-            </md-select-option>
-            <md-select-option value="M/s" menu-type>
-              <div slot="headline">M/s</div>
-            </md-select-option>
-            <md-select-option value="Beaufort" menu-type>
-              <div slot="headline">Beaufort</div>
-            </md-select-option>
-          </md-outlined-select>
-        </md-list-item>
-
-        <md-list-item>
-          <md-icon icon-filled slot="start">visibility</md-icon>
-          <div slot="headline" data-translate="visibility_unit">Visibility Unit</div>
-          <md-outlined-select id="selectVisibilityUnit" slot="end" style="min-width: max-content; --md-outlined-field-bottom-space: 10px;--md-outlined-field-top-space: 10px;">
-            <md-select-option value="km" menu-type>
-              <div slot="headline">km</div>
-            </md-select-option>
-            <md-select-option value="mileV" menu-type >
-              <div slot="headline">mile</div>
-            </md-select-option>
-          </md-outlined-select>
-        </md-list-item>
-
-        <md-list-item>
-          <md-icon icon-filled slot="start">rainy_light</md-icon>
-          <div slot="headline" data-translate="precipitation_unit">Precipitation Unit</div>
-          <md-outlined-select id="selectPrecipitationUnit" slot="end" style="min-width: max-content; --md-outlined-field-bottom-space: 10px;--md-outlined-field-top-space: 10px;">
-            <md-select-option value="mm" menu-type>
-              <div slot="headline">mm</div>
-            </md-select-option>
-            <md-select-option value="cm" menu-type>
-              <div slot="headline">cm</div>
-            </md-select-option>
-            <md-select-option value="in" menu-type >
-              <div slot="headline">in</div>
-            </md-select-option>
-          </md-outlined-select>
-        </md-list-item>
-
-
-        <md-list-item>
-          <md-icon icon-filled slot="start">av_timer</md-icon>
-          <div slot="headline" data-translate="pressure_unit">Pressure Unit</div>
-          <md-outlined-select id="selectPressureUnit" slot="end" style="min-width: max-content; --md-outlined-field-bottom-space: 10px;--md-outlined-field-top-space: 10px;">
-            <md-select-option value="hPa" menu-type>
-              <div slot="headline">hPa</div>
-            </md-select-option>
-            <md-select-option value="inHg" menu-type >
-              <div slot="headline">inHg</div>
-            </md-select-option>
-            <md-select-option value="mmHg" menu-type >
-              <div slot="headline">mmHg</div>
-            </md-select-option>
-          </md-outlined-select>
-        </md-list-item>
-
-        <md-list-item>
-          <md-icon icon-filled slot="start">schedule</md-icon>
-          <div slot="headline" data-translate="time_format">Time format</div>
-          <md-outlined-select id="selectTimeformat" slot="end" style="min-width: max-content; --md-outlined-field-bottom-space: 10px;--md-outlined-field-top-space: 10px;">
-            <md-select-option value="12 hour" menu-type>
-              <div slot="headline">12 hr</div>
-            </md-select-option>
-            <md-select-option value="24 hour" menu-type >
-              <div slot="headline">24 hr</div>
-            </md-select-option>
-          </md-outlined-select>
-        </md-list-item>
-
       </md-list>
 
       <p class="title" style="margin-top: 5px;" data-translate="additional">Additional</p>
@@ -450,7 +348,7 @@
 
         <md-list-item  onclick="sendThemeToAndroid('OpenAboutPage')" type="button">
           <md-icon icon-filled slot="start">info</md-icon>
-          <div slot="headline">About WeatherMaster</div>
+          <div slot="headline"><span data-translate="about">About</span> WeatherMaster</div>
           <div slot="supporting-text" data-translate="learn_about_app">Learn about the app</div>
           <md-icon icon-outlined slot="end">chevron_right</md-icon>
         </md-list-item>
@@ -632,7 +530,7 @@
       <md-dialog id="chooseSwipeThresholdDialog" style="min-width: 85%;">
                 <span slot="headline">
                     <span style="flex: 1;" data-translate="swipe_threshold">Swipe Threshold</span>
-                    <div slot="supporting-text" id="ThresholdValueText" style="font-size: 15px; right: 20px; color: var(--On-Surface-Variant); width: 30px; height: 30px; background-color: var(--Primary-Container); display: flex; align-items: center; justify-content: center; border-radius: 50px; padding: 2px; color: var(--On-Primary-Container);">100</div>
+                    <div slot="supporting-text" id="ThresholdValueText" style="font-size: 15px; right: 20px; color: var(--On-Surface-Variant); width: 35px; height: 30px; background-color: var(--Primary-Container); display: flex; align-items: center; justify-content: center; border-radius: 50px; padding: 2px; color: var(--On-Primary-Container); font-family: var(--google-mid);">100</div>
                   </span>
 
         <div slot="content" style="padding-left: 0; padding-right: 0;">

app/src/main/assets/ui-files/ui.css

@@ -343,6 +343,10 @@ touch_search{
 .high-mini .mini p {
   font-size: 16px;
   color: var(--On-Surface);
+    max-width: 75px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .high-mini .mini span {
@@ -2620,10 +2624,32 @@ max-width: 150px;
 
 }
 
+@media screen and (min-width: 400px){
+  .currentConditions{
+    padding-top: 13px;
+    padding-bottom: 14px;
+    row-gap: 30px;
+  }
+
+  .currentConditionItem{
+    transform: scale(1.1);
+  }
+}
+
 @media screen and (min-width: 600px){
   .currentConditions{
     grid-template-columns: repeat(3, 1fr);
   }
+
+    .currentConditions{
+      padding-top: 0;
+      padding-bottom: 5px;
+      gap: 10px;
+    }
+
+    .currentConditionItem{
+      transform: scale(1);
+    }
 }
 
 /* ------------------------- */
@@ -3049,15 +3075,15 @@ swipecooldown{
 }
 
 .sortHolder{
-  gap: 5px;
-  padding-top: 5px;
-  padding-bottom: 5px;
+  gap: 8.5px;
+  padding-top: 8.5px;
+  padding-bottom: 8.5px;
 }
 
 [round-ui="true"] .sortHolder{
-  gap: 8px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+  gap: 8.5px;
+  padding-top: 8.5px;
+  padding-bottom: 8.5px;
 }
 
 .behind_search_animation_wrap .behind_search_animation{

app/src/main/assets/ui-files/variables.css

@@ -108,13 +108,24 @@ body{
     --md-filled-tonal-button-pressed-state-layer-opacity: 0.25;
     --md-elevated-button-pressed-state-layer-opacity: 0.25;
 
-    --md-text-button-label-text-size: 18px;
-    --md-filled-button-label-text-size: 18px;
-    --md-outlined-button-label-text-size: 18px;
-    --md-filled-tonal-button-label-text-size: 18px;
-    --md-elevated-button-label-text-size: 18px;
+    --md-text-button-label-text-size: 1rem;;
+    --md-filled-button-label-text-size: 1rem;;
+    --md-outlined-button-label-text-size: 1rem;;
+    --md-filled-tonal-button-label-text-size: 1rem;;
+    --md-elevated-button-label-text-size: 1rem;
 
 
+    --md-text-button-label-text-font: var(--google-mid);
+    --md-filled-button-label-text-font: var(--google-mid);
+    --md-outlined-button-label-text-font: var(--google-mid);
+    --md-filled-tonal-button-label-text-font: var(--google-mid);
+    --md-elevated-button-label-text-font: var(--google-mid);
+
+    --md-filled-button-icon-size: 21px;
+    --md-text-button-icon-size: 21px;
+    --md-outlined-button-icon-size: 21px;
+    --md-filled-tonal-button-icon-size: 21px;
+    --md-elevated-button-icon-size: 21px;
 }
 
 [margin] {
@@ -302,7 +313,7 @@ body{
     --Surface: #0e1d2a;
     --Surface-Bright: #38393e;
     --Surface-Container-Lowest:#0d0e12 ;
-    --Surface-Container-Low: #012438;
+    --Surface-Container-Low: #042030;
     --Surface-Container: #112535;
     --Surface-Container-High: #292a2e;
     --Surface-Container-Highest: #343439;

app/src/main/java/com/example/weathermaster/AppUnitsActivity.java

@@ -0,0 +1,399 @@
+package com.example.weathermaster;
+
+
+import android.animation.ArgbEvaluator;
+import android.animation.ObjectAnimator;
+import android.annotation.SuppressLint;
+import android.content.Intent;
+import android.graphics.Color;
+import android.net.Uri;
+import android.os.Build;
+import android.os.Bundle;
+import android.os.Handler;
+import android.view.ContextThemeWrapper;
+import android.view.View;
+import android.view.WindowManager;
+import android.webkit.JavascriptInterface;
+import android.webkit.WebSettings;
+import android.webkit.WebView;
+import android.webkit.WebViewClient;
+import android.widget.ProgressBar;
+import android.widget.Toast;
+
+
+import androidx.annotation.RequiresApi;
+import androidx.appcompat.app.AppCompatActivity;
+
+public class AppUnitsActivity extends AppCompatActivity {
+
+    private WebView webview;
+    private boolean isFirstLoad = true;
+
+    public void onBackPressed() {
+        if (webview.canGoBack()) {
+            webview.goBack();
+        } else {
+            super.onBackPressed();
+        }
+    }
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+
+
+
+
+        setContentView(R.layout.activity_main);
+
+
+
+        // Webview stuff
+        webview = findViewById(R.id.webView);
+        WebSettings webSettings = webview.getSettings();
+        webSettings.setJavaScriptEnabled(true);
+        webSettings.setDomStorageEnabled(true);
+        webSettings.setAllowFileAccessFromFileURLs(true);
+        webSettings.setAllowUniversalAccessFromFileURLs(true);
+        webSettings.setAllowContentAccess(true);
+        webview.setVerticalScrollBarEnabled(true);
+        webview.setHorizontalScrollBarEnabled(false);
+        webview.setOverScrollMode(WebView.OVER_SCROLL_NEVER);
+        webview.setWebViewClient(new WebViewClientDemo());
+        AndroidInterface androidInterface = new AndroidInterface(this);
+        webview.addJavascriptInterface(androidInterface, "AndroidInterface");
+        webview.setBackgroundColor(getResources().getColor(R.color.yellowBg));
+        setTheme(R.style.blue_caret);
+        webSettings.setTextZoom(100);
+        webSettings.setAllowFileAccess(true);
+        webview.loadUrl("file:///android_asset/pages/AppUnits.html");
+        webview.setWebViewClient(new WebViewClient() {
+            @Override
+            public void onPageFinished(WebView view, String url) {
+                super.onPageFinished(view, url);
+
+
+                if (isFirstLoad) {
+                    isFirstLoad = false;
+
+                    int primaryColor = new ContextThemeWrapper(AppUnitsActivity.this, R.style.Base_Theme_WeatherMaster)
+                            .getTheme()
+                            .obtainStyledAttributes(new int[]{com.google.android.material.R.attr.colorPrimary})
+                            .getColor(0, 0);
+
+                    String hexColor = String.format("#%06X", (0xFFFFFF & primaryColor));
+
+                    String jsCodePrimaryColor = "CreateMaterialYouTheme('" + hexColor + "');";
+
+                    webview.evaluateJavascript(jsCodePrimaryColor, null);
+                }
+            }
+        });
+    }
+
+
+
+
+    public class AndroidInterface {
+        private AppUnitsActivity aActivity;
+
+        AndroidInterface(AppUnitsActivity activity) {
+            aActivity = activity;
+        }
+
+        @JavascriptInterface
+        public void updateStatusBarColor(final String color) {
+            aActivity.runOnUiThread(new Runnable() {
+                @SuppressLint("ResourceType")
+                @RequiresApi(api = Build.VERSION_CODES.O)
+                @Override
+                public void run() {
+                    int statusBarColor;
+                    int navigationBarColor;
+                    int systemUiVisibilityFlags = View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR | View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
+
+
+                    if(color.equals("Scrolled")){
+                        statusBarColor = 0xFF1d2024;
+                        navigationBarColor = 0xFF111318;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("ScrollFalse")) {
+                        statusBarColor = 0xFF111318;
+                        navigationBarColor = 0xFF111318;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("DialogNotScrolled")) {
+                        statusBarColor = 0xFF07080a;
+                        navigationBarColor = 0xFF07080a;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("DialogScrolled")) {
+                        statusBarColor = 0xFF0c0d0e;
+                        navigationBarColor = 0xFF07080a;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if(color.equals("orange_material_Scrolled")){
+                        statusBarColor = 0xFF251e17;
+                        navigationBarColor = 0xFF18120c;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("orange_material_ScrollFalse")) {
+                        statusBarColor = 0xFF18120c;
+                        navigationBarColor = 0xFF18120c;
+                        systemUiVisibilityFlags = 0;
+                        setTheme(R.style.orange_material_caret);
+
+                    } else if(color.equals("red_material_Scrolled")){
+                        statusBarColor = 0xFF271d1b;
+                        navigationBarColor = 0xFF1a110f;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("red_material_ScrollFalse")) {
+                        statusBarColor = 0xFF1a110f;
+                        navigationBarColor = 0xFF1a110f;
+                        systemUiVisibilityFlags = 0;
+                        setTheme(R.style.red_material_caret);
+
+                    } else if(color.equals("pink_material_Scrolled")){
+                        statusBarColor = 0xFF261d1f;
+                        navigationBarColor = 0xFF191113;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("pink_material_ScrollFalse")) {
+                        statusBarColor = 0xFF191113;
+                        navigationBarColor = 0xFF191113;
+                        systemUiVisibilityFlags = 0;
+                        setTheme(R.style.pink_material_caret);
+
+                    } else if(color.equals("purple_material_Scrolled")){
+                        statusBarColor = 0xFF241e22;
+                        navigationBarColor = 0xFF171216;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("purple_material_ScrollFalse")) {
+                        statusBarColor = 0xFF171216;
+                        navigationBarColor = 0xFF171216;
+                        systemUiVisibilityFlags = 0;
+                        setTheme(R.style.purple_material_caret);
+
+                    } else if(color.equals("blue_material_Scrolled")){
+                        statusBarColor = 0xFF1d2024;
+                        navigationBarColor = 0xFF111318;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("blue_material_ScrollFalse")) {
+                        statusBarColor = 0xFF111318;
+                        navigationBarColor = 0xFF111318;
+                        systemUiVisibilityFlags = 0;
+                        setTheme(R.style.blue_material_caret);
+
+                    } else if(color.equals("yellow_material_Scrolled")){
+                        statusBarColor = 0xFF222017;
+                        navigationBarColor = 0xFF15130b;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("yellow_material_ScrollFalse")) {
+                        statusBarColor = 0xFF15130b;
+                        navigationBarColor = 0xFF15130b;
+                        systemUiVisibilityFlags = 0;
+                        setTheme(R.style.yellow_material_caret);
+
+                    } else if(color.equals("green_material_Scrolled")){
+                        statusBarColor = 0xFF1e201a;
+                        navigationBarColor = 0xFF12140e;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("green_material_ScrollFalse")) {
+                        statusBarColor = 0xFF12140e;
+                        navigationBarColor = 0xFF12140e;
+                        systemUiVisibilityFlags = 0;
+                        setTheme(R.style.green_material_caret);
+
+                    } else if (color.equals("orange_material_DialogNotScrolled")){
+                        statusBarColor = 0xFF0a0705;
+                        navigationBarColor = 0xFF0a0705;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("orange_material_DialogScrolled")) {
+                        statusBarColor = 0xFF0f0c09;
+                        navigationBarColor = 0xFF0a0705;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if(color.equals("red_material_DialogNotScrolled")){
+                        statusBarColor = 0xFF0b0706;
+                        navigationBarColor = 0xFF0b0706;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("red_material_DialogScrolled")) {
+                        statusBarColor = 0xFF100c0b;
+                        navigationBarColor = 0xFF0b0706;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if(color.equals("pink_material_DialogNotScrolled")){
+                        statusBarColor = 0xFF090708;
+                        navigationBarColor = 0xFF090708;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("pink_material_DialogScrolled")) {
+                        statusBarColor = 0xFF0e0d0b;
+                        navigationBarColor = 0xFF090708;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if(color.equals("purple_material_DialogNotScrolled")){
+                        statusBarColor = 0xFF090709;
+                        navigationBarColor = 0xFF090709;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("purple_material_DialogScrolled")) {
+                        statusBarColor = 0xFF0e0c0e;
+                        navigationBarColor = 0xFF090709;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if(color.equals("blue_material_DialogNotScrolled")){
+                        statusBarColor = 0xFF07080a;
+                        navigationBarColor = 0xFF07080a;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("blue_material_DialogScrolled")) {
+                        statusBarColor = 0xFF0c0d0e;
+                        navigationBarColor = 0xFF07080a;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if(color.equals("yellow_material_DialogNotScrolled")){
+                        statusBarColor = 0xFF080804;
+                        navigationBarColor = 0xFF080804;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("yellow_material_DialogScrolled")) {
+                        statusBarColor = 0xFF0e0d09;
+                        navigationBarColor = 0xFF080804;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if(color.equals("green_material_DialogNotScrolled")){
+                        statusBarColor = 0xFF070806;
+                        navigationBarColor = 0xFF070806;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("green_material_DialogScrolled")) {
+                        statusBarColor = 0xFF0c0d0a;
+                        navigationBarColor = 0xFF070806;
+                        systemUiVisibilityFlags = 0;
+
+
+                    } else if (color.equals("GoBack")){
+                        back();
+                        return;
+                    } else if (color.equals("OpenTermsConditions")){
+
+                        return;
+                    } else if (color.equals("OpenPrivacyPolicy")){
+
+                        return;
+                    } else if (color.equals("OpenLicenses")){
+
+                        return;
+
+                    } else if (color.equals("bluesetDef")) {
+
+                        return;
+                    } else if (color.equals("keepiton")) {
+                        getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
+                        return;
+                    } else if (color.equals("keepitoff")) {
+                        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
+                        return;
+                    } else if (color.equals("itsOn")) {
+                        Toast.makeText(aActivity, "Your device will stay awake", Toast.LENGTH_SHORT).show();
+                        return;
+                    } else if (color.equals("ItsOff")) {
+                        Toast.makeText(aActivity, "Your device will go to sleep at the default time", Toast.LENGTH_SHORT).show();
+                        return;
+
+
+                    } else {
+                        Toast.makeText(aActivity, "not found", Toast.LENGTH_SHORT).show();
+                        return;
+                    }
+
+
+                    int currentStatusBarColor = aActivity.getWindow().getStatusBarColor();
+                    int currentNavigationBarColor = aActivity.getWindow().getNavigationBarColor();
+
+                    ObjectAnimator statusBarAnimator = ObjectAnimator.ofObject(
+                            aActivity.getWindow(),
+                            "statusBarColor",
+                            new ArgbEvaluator(),
+                            currentStatusBarColor,
+                            statusBarColor
+                    );
+
+                    statusBarAnimator.setDuration(200);
+                    statusBarAnimator.start();
+
+                    ObjectAnimator navBarAnimator = ObjectAnimator.ofObject(
+                            aActivity.getWindow(),
+                            "navigationBarColor",
+                            new ArgbEvaluator(),
+                            currentNavigationBarColor,
+                            navigationBarColor
+                    );
+
+                    navBarAnimator.setDuration(200);
+                    navBarAnimator.start();
+
+                    aActivity.getWindow().setNavigationBarColor(navigationBarColor);
+
+                    View decorView = aActivity.getWindow().getDecorView();
+                    decorView.setSystemUiVisibility(systemUiVisibilityFlags);
+
+
+                }
+            });
+        }
+
+
+
+    }
+
+    public void back() {
+        onBackPressed();
+    }
+
+
+
+    private static class WebViewClientDemo extends WebViewClient {
+
+        @Override
+        public boolean shouldOverrideUrlLoading(WebView view, String url) {
+            if (shouldOpenInBrowser(url)) {
+                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
+                view.getContext().startActivity(intent);
+                return true;
+
+            } else {
+                view.loadUrl(url);
+                return true;
+
+
+            }
+
+
+        }
+
+        private boolean shouldOpenInBrowser(String url) {
+            return url.startsWith("https://fonts.google.com/specimen/Outfit?query=outfit") ||
+                    url.startsWith("https://openweathermap.org/") ||
+                    url.startsWith("https://fonts.google.com/specimen/Poppins?query=poppins") ||
+                    url.startsWith("https://github.com/material-components/material-web") ||
+                    url.startsWith("https://app-privacy-policy-generator.nisrulz.com/") ||
+                    url.startsWith("https://github.com/PranshulGG/WeatherMaster") ||
+                    url.startsWith("mailto:pranshul.devmain@gmail.com")||
+                    url.startsWith("https://github.com/PranshulGG/WeatherMaster/releases");
+
+
+        }
+
+
+    }
+}

app/src/main/java/com/example/weathermaster/SettingsActivity.java

@@ -564,6 +564,9 @@ public class SettingsActivity extends AppCompatActivity {
                     } else if (color.equals("EditAppLayoutPage")){
                         EditAppLayoutPage();
                         return;
+                    } else if (color.equals("AppUnitsActivity")){
+                        AppUnitsActivity();
+                        return;
                     } else if (color.equals("bluesetDef")) {
                         return;
                     } else if (color.equals("keepiton")) {
@@ -647,6 +650,10 @@ public class SettingsActivity extends AppCompatActivity {
             Intent intent = new Intent(sActivity, ArrangeItems.class);
             sActivity.startActivity(intent);
         }
+        public void AppUnitsActivity() {
+            Intent intent = new Intent(sActivity, AppUnitsActivity.class);
+            sActivity.startActivity(intent);
+        }
 
 
     }

app/src/main/res/layout/widget_weather_round.xml

@@ -1,7 +1,7 @@
 <RelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
+    android:layout_width="140dp"
+    android:layout_height="140dp"
     android:id="@+id/widget_layout_round"
     android:padding="8dp"
     android:background="@drawable/widget_round_background_round">

app/src/main/res/xml/widget_info_round.xml

@@ -2,10 +2,10 @@
 <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:initialLayout="@layout/widget_weather_round"
-    android:minWidth="140dp"
-    android:minHeight="100dp"
-    android:minResizeWidth="140dp"
-    android:minResizeHeight="100dp"
+    android:minWidth="100dp"
+    android:minHeight="50dp"
+    android:minResizeWidth="100dp"
+    android:minResizeHeight="50dp"
     android:resizeMode="horizontal|vertical"
     android:targetCellWidth="0"
     android:targetCellHeight="0"