added language files | removed notifications file

app/build.gradle

@@ -10,8 +10,8 @@ android {
         applicationId "com.example.weathermaster"
         minSdk 22
         targetSdk 33
-        versionCode 52
-        versionName "1.6.1 (W)"
+        versionCode 53
+        versionName "1.6.2 (W)"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }
 

app/release/output-metadata.json

@@ -1,20 +0,0 @@
-{
-  "version": 3,
-  "artifactType": {
-    "type": "APK",
-    "kind": "Directory"
-  },
-  "applicationId": "com.example.weathermaster",
-  "variantName": "release",
-  "elements": [
-    {
-      "type": "SINGLE",
-      "filters": [],
-      "attributes": [],
-      "versionCode": 2,
-      "versionName": "1.3.5 (W)",
-      "outputFile": "app-release.apk"
-    }
-  ],
-  "elementType": "File"
-}

app/src/main/AndroidManifest.xml

@@ -72,6 +72,12 @@
             android:exported="true"
             android:theme="@style/ScreenLiveRadar"
             />
+        <activity
+            android:name=".LanguagePage"
+            android:screenOrientation="portrait"
+            android:exported="true"
+            android:theme="@style/ScreensAll"
+            />
             <activity
                 android:name=".MainActivity"
                 android:theme="@style/app_theme"

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

@@ -1,26 +1,27 @@
 const apiKeysDaily = [
-KEYS
+MAIN_KEYS
 
 ];
 
 
 const apiKeysAlerts = [
-KEYS
+MAIN_KEYS
+];
 
 const apiKeysCityName = [
-KEYS
+MAIN_KEYS
 
 ];
 
 const apiKeysGeo = [
-KEYS
+MAIN_KEYS
 ];
 
 const apiKeysVisual = [
-KEYS
+MAIN_KEYS
   ];
 
 
   const astronomyApiKeys = [
-KEYS
+MAIN_KEYS
   ];

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

@@ -655,7 +655,7 @@ function checkNoInternet(){
 
     document.addEventListener('DOMContentLoaded', async function() {
 
-        const currentVersion = 'v1.6.1';
+        const currentVersion = 'v1.6.2';
             const githubRepo = 'PranshulGG/WeatherMaster';
             const releasesUrl = `https://api.github.com/repos/${githubRepo}/releases/latest`;
 

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

@@ -5,7 +5,7 @@ function getCountryName(code) {
 
 
 async function DecodeWeather(lat, lon) {
-  const apiKey = 'KEYS';
+  const apiKey = 'MAIN_KEYS';
   const url = `https://api.timezonedb.com/v2.1/get-time-zone?key=${apiKey}&format=json&by=position&lat=${lat}&lng=${lon}`;
 
   try {
@@ -112,7 +112,7 @@ showLoader();
                       document.getElementById('currentLocationName').textContent = `${stateMain}, ${countryNameText}`;
 
 
-          
+
               } else if (!stateMain) {
                 document.getElementById('city-name').innerHTML = `${city}, ${countryNameText}`;
                 document.getElementById('SelectedLocationText').innerHTML = `${city}, ${countryNameText}`;

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

@@ -18,15 +18,15 @@ function HourlyWeather(data) {
         console.error("Hourly forecast data is missing or undefined");
         return;
     }
-    const sunriseTime = new Date(data.daily.sunrise[0]);
-    const sunsetTime = new Date(data.daily.sunset[0]);
+    const sunriseTimes = data.daily.sunrise.map(time => new Date(time).getTime());
+    const sunsetTimes = data.daily.sunset.map(time => new Date(time).getTime());
 
 
 
     data.hourly.time.forEach((time, index) => {
 
-        const forecastTime = new Date(time);
-        let hours = forecastTime.getHours();
+        const forecastTime = new Date(time).getTime();
+        let hours = new Date(time).getHours();
         const period = hours >= 12 ? "PM" : "AM";
         hours = hours % 12 || 12;
 
@@ -45,12 +45,18 @@ function HourlyWeather(data) {
 
         const PrecProb = data.hourly.precipitation_probability[index]
 
+        let dayIndex = -1;
+        for (let i = 0; i < sunriseTimes.length; i++) {
+            if (forecastTime >= sunriseTimes[i] && forecastTime < (sunriseTimes[i + 1] || Infinity)) {
+                dayIndex = i;
+                break;
+            }
+        }
         let icon;
-
-        if (forecastTime >= sunriseTime && forecastTime <= sunsetTime) {
-            icon = GetWeatherIconDay(HourWeatherCode);
+        if (dayIndex !== -1 && forecastTime >= sunriseTimes[dayIndex] && forecastTime < sunsetTimes[dayIndex]) {
+            icon = GetWeatherIconDay(HourWeatherCode);  // Day icon
         } else {
-            icon = GetWeatherIconNight(HourWeatherCode);
+            icon = GetWeatherIconNight(HourWeatherCode);  // Night icon
         }
 
         const maxRain = 2;
@@ -132,7 +138,8 @@ function HourlyWeather(data) {
             `
 
             forecastItem.addEventListener('click', ()=>{
-                ShowSnack(`<span style="text-transform: capitalize;">${GetWeatherLabel(HourWeatherCode, 1)}</span>`, 2000, 3, 'none', ' ', 'no-up')
+             ShowSnack(`<span style="text-transform: capitalize;">${getWeatherLabelInLang(HourWeatherCode, 1,  localStorage.getItem('AppLanguageCode'))}</span>`, 2000, 3, 'none', ' ', 'no-up')
+
 
             });
 
@@ -159,24 +166,24 @@ function DailyWeather(dailyForecast) {
 
 
     const warmingComments = [
-        "Warming expected over the next few days.",
-        "Temperatures will rise soon, get ready for some heat!",
-        "Looks like it's going to get warmer this week.",
-        "Prepare for warmer weather ahead."
+        getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'Warming expected over the next few days.'),
+        getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'Temperatures will rise soon, get ready for some heat!'),
+        getTranslationByLang(localStorage.getItem('AppLanguageCode'), "Looks like it's going to get warmer this week."),
+        getTranslationByLang(localStorage.getItem('AppLanguageCode'), "Prepare for warmer weather ahead."),
     ];
 
     const coolingComments = [
-        "Cooling expected over the next few days.",
-        "Temperatures are dropping soon, stay warm!",
-        "It's going to get cooler in the coming days.",
-        "Expect a chilly breeze over the next days."
+        getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'Cooling expected over the next few days.'),
+        getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'Temperatures are dropping soon, stay warm!'),
+        getTranslationByLang(localStorage.getItem('AppLanguageCode'), "It's going to get cooler in the coming days."),
+        getTranslationByLang(localStorage.getItem('AppLanguageCode'), "Expect a chilly breeze over the next days."),
     ];
 
     const stableComments = [
-        "Stable temperatures expected in the next few days.",
-        "No big temperature changes ahead, steady weather.",
-        "Temperatures are holding steady for now.",
-        "Expect stable weather without much change."
+        getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'Stable temperatures expected in the next few days.'),
+        getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'No big temperature changes ahead, steady weather.'),
+        getTranslationByLang(localStorage.getItem('AppLanguageCode'), "Temperatures are holding steady for now."),
+        getTranslationByLang(localStorage.getItem('AppLanguageCode'), "Expect stable weather without much change."),
     ];
 
     function getRandomComment(commentsArray) {
@@ -219,7 +226,10 @@ function DailyWeather(dailyForecast) {
         const dateObj = new Date(time);
 
         const isToday = time === today;
-        const weekday = isToday ? 'Today' : dateObj.toLocaleDateString('en-US', { weekday: 'short' });
+        const weekday = isToday ? 'today' : dateObj.toLocaleDateString('en-US', { weekday: 'short' }).toLowerCase();
+
+        const weekdayLang = getTranslationByLang(localStorage.getItem('AppLanguageCode'), weekday);
+
 
 
         const rainPercentage = dailyForecast.precipitation_probability_max[index];
@@ -273,7 +283,7 @@ function DailyWeather(dailyForecast) {
         <img id="icon-5d" src="${GetWeatherIcon(DailyWeatherCode, 1)}" alt="Weather Icon">
         <span class="daily_rain">${rainPercentage}%</span>
         <div class="d5-disc-text">
-        <p class="time-5d">${weekday}</p>
+        <p class="time-5d">${weekdayLang}</p>
         </div>
       <md-ripple style="--md-ripple-pressed-opacity: 0.1;"></md-ripple>
         `
@@ -282,7 +292,7 @@ function DailyWeather(dailyForecast) {
         const daylightMinutes = Math.floor((daylightDurationInSeconds % 3600) / 60);
 
 
-        document.getElementById('weatherComments').innerHTML = `<md-icon icon-outlined style="font-size: 18px;">hourglass_top</md-icon> ${daylightHours} hrs ${daylightMinutes} mins day length <space></space> <md-icon icon-outlined id="arrow_up_toggle">keyboard_arrow_down</md-icon>`
+        document.getElementById('weatherComments').innerHTML = `<md-icon icon-outlined style="font-size: 18px;">hourglass_top</md-icon> ${daylightHours} hrs ${daylightMinutes} mins ${getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'day_length')} <space></space> <md-icon icon-outlined id="arrow_up_toggle">keyboard_arrow_down</md-icon>`
 
 
 
@@ -378,10 +388,10 @@ function CurrentWeather(data, sunrise, sunset) {
 
 
     document.getElementById('temp').innerHTML = CurrentTemperature + '°';
-    document.getElementById('feels_like_now').innerHTML = 'Feels like ' + FeelsLikeTemp + '°';
+    document.getElementById('feels_like_now').innerHTML = `${getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'feels_like')} ` + FeelsLikeTemp + '°';
     document.getElementById('weather-icon').src = GetWeatherIcon(CurrentWeatherCode, isDay);
     document.getElementById('weather-icon').alt = CurrentWeatherCode
-    document.getElementById('description').innerHTML = GetWeatherLabel(CurrentWeatherCode, isDay)
+    document.getElementById('description').innerHTML = getWeatherLabelInLang(CurrentWeatherCode, isDay,  localStorage.getItem('AppLanguageCode'));
     document.getElementById('wind-speed').innerHTML = CurrentWindSpeed
     document.getElementById('WindGust').innerHTML = CurrentWindGust
     document.getElementById('clouds').innerHTML = CurrentCloudCover + '%'
@@ -389,7 +399,7 @@ function CurrentWeather(data, sunrise, sunset) {
     document.documentElement.setAttribute('iconcodetheme', GetWeatherTheme(CurrentWeatherCode, isDay))
         sendThemeToAndroid(GetWeatherTheme(CurrentWeatherCode, 1))
 
-        document.getElementById('temPDiscCurrentLocation').innerHTML = `${CurrentTemperature}° • <span>${GetWeatherLabel(CurrentWeatherCode, isDay)}</span>`
+        document.getElementById('temPDiscCurrentLocation').innerHTML = `${CurrentTemperature}° • <span>${getWeatherLabelInLang(CurrentWeatherCode, isDay,  localStorage.getItem('AppLanguageCode'))}</span>`
 
         document.getElementById('currentSearchImg').src = `${GetWeatherIcon(CurrentWeatherCode, isDay)}`;
 
@@ -418,33 +428,34 @@ function CurrentWeather(data, sunrise, sunset) {
     const windspeedType = document.getElementById('windtype');
 
     if (data.wind_speed_10m < 1) {
-        windspeedType.innerHTML = "Calm";
+        windspeedType.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'calm');
     } else if (data.wind_speed_10m < 5) {
-        windspeedType.innerHTML = "Light air";
+        windspeedType.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'light_air');
     } else if (data.wind_speed_10m < 11) {
-        windspeedType.innerHTML = "Light breeze";
+        windspeedType.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'light_breeze');
     } else if (data.wind_speed_10m < 19) {
-        windspeedType.innerHTML = "Gentle breeze";
+        windspeedType.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'gentle_breeze');
     } else if (data.wind_speed_10m < 28) {
-        windspeedType.innerHTML = "Moderate breeze";
+        windspeedType.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'moderate_breeze');
     } else if (data.wind_speed_10m < 38) {
-        windspeedType.innerHTML = "Fresh breeze";
+        windspeedType.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'fresh_breeze');
     } else if (data.wind_speed_10m < 49) {
-        windspeedType.innerHTML = "Strong breeze";
+        windspeedType.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'strong_breeze');
     } else if (data.wind_speed_10m < 61) {
-        windspeedType.innerHTML = "High wind";
+        windspeedType.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'high_wind');
     } else if (data.wind_speed_10m < 74) {
-        windspeedType.innerHTML = "Gale";
+        windspeedType.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'gale');
     } else if (data.wind_speed_10m < 88) {
-        windspeedType.innerHTML = "Strong gale";
+        windspeedType.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'strong_gale');
     } else if (data.wind_speed_10m < 102) {
-        windspeedType.innerHTML = "Storm";
+        windspeedType.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'storm');
     } else if (data.wind_speed_10m < 117) {
-        windspeedType.innerHTML = "Violent storm";
+        windspeedType.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'violent_storm');
     } else {
-        windspeedType.innerHTML = "Hurricane";
+        windspeedType.innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'hurricane');
     }
 
+
     if (data.pressure_msl < '980') {
         document.getElementById('pressure_icon_svg').innerHTML = WidgetsPressure.LowPressure
     } else if (data.pressure_msl > '980' && data.pressure_msl <= '1005') {
@@ -546,7 +557,7 @@ setTimeout(()=>{
     if (minutesAgo > 1) {
         document.getElementById('last_updated').innerHTML = `Updated ${minutesAgo} mins ago`;
     } else if (minutesAgo < 1) {
-        document.getElementById('last_updated').innerHTML = `Updated, just now`;
+        document.getElementById('last_updated').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'updated_just_now');;
     } else {
         document.getElementById('last_updated').innerHTML = `Updated ${minutesAgo} min ago`;
     }
@@ -625,9 +636,9 @@ const percentageOfDaylight = Math.round(calculateDaylightPercentage(sunrise, sun
 
 
 
-    const recommendation = getClothingRecommendation(temperatureCLoths);
+    const recommendation = getClothingRecommendation(temperatureCLoths)
 
-    document.getElementById('cloth_recommended').textContent = recommendation
+    document.getElementById('cloth_recommended').textContent = getTranslationByLang(localStorage.getItem('AppLanguageCode'), recommendation)
 
 }
 
@@ -680,8 +691,16 @@ function AirQuaility(data) {
 
 
 
-    document.getElementById('aqi-level').textContent = aqiText[aqiCategory].level;
-    document.getElementById('detail_air').textContent = aqiText[aqiCategory].message;
+    const aqiData = aqiText[aqiCategory];
+
+    const langCode = localStorage.getItem('AppLanguageCode');
+
+    const levelTranslation = getTranslationByLang(langCode, aqiData.level);
+    const messageTranslation = getTranslationByLang(langCode, aqiData.message);
+
+    document.getElementById('aqi-level').textContent = levelTranslation;
+    document.getElementById('detail_air').textContent = messageTranslation;
+
 
     const backgroundImage = {
         1: 'air-pop-imgs/good.png',
@@ -789,75 +808,75 @@ function UvIndex(latitude, longitude) {
 
 
             if (uvIndex >= 0 && uvIndex <= 1) {
-                document.getElementById('uv-index').innerHTML = 'Minimal risk';
+                document.getElementById('uv-index').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'minimal_risk');
                 document.getElementById('uv-index').style = 'background-color: #43b710';
                 document.getElementById('uv_img').src = 'uv-images/uv-0.png';
-                document.getElementById('detail_uv').innerHTML = Uv_0
+                document.getElementById('detail_uv').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'uv_index_satisfactory')
             } else if (uvIndex > 1 && uvIndex <= 2) {
-                document.getElementById('uv-index').innerHTML = 'Low risk';
+                document.getElementById('uv-index').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'low_risk');
                 document.getElementById('uv-index').style = 'background-color: #43b710';
                 document.getElementById('uv_img').src = 'uv-images/uv-1.png';
-                document.getElementById('detail_uv').innerHTML = Uv_1
+                document.getElementById('detail_uv').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'conditions_low_risk')
             } else if (uvIndex > 2 && uvIndex <= 3) {
-                document.getElementById('uv-index').innerHTML = 'Low risk';
+                document.getElementById('uv-index').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'low_risk');
                 document.getElementById('uv-index').style = 'background-color: #43b710';
                 document.getElementById('uv_img').src = 'uv-images/uv-2.png';
-                document.getElementById('detail_uv').innerHTML = Uv_2
+                document.getElementById('detail_uv').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'low_exposure_level')
             } else if (uvIndex > 3 && uvIndex <= 4) {
-                document.getElementById('uv-index').innerHTML = 'Moderate risk';
+                document.getElementById('uv-index').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'moderate_risk');
                 document.getElementById('uv-index').style = 'background-color: #eaaf10';
                 document.getElementById('uv_img').src = 'uv-images/uv-3.png';
-                document.getElementById('detail_uv').innerHTML = Uv_3
+                document.getElementById('detail_uv').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'moderate_risk_sun_exposure')
             } else if (uvIndex > 4 && uvIndex <= 5) {
-                document.getElementById('uv-index').innerHTML = 'Moderate risk';
+                document.getElementById('uv-index').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'moderate_risk');
                 document.getElementById('uv-index').style = 'background-color: #eaaf10';
                 document.getElementById('uv_img').src = 'uv-images/uv-4.png';
-                document.getElementById('detail_uv').innerHTML = Uv_4
+                document.getElementById('detail_uv').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'moderate_risk_sun_exposure')
             } else if (uvIndex > 5 && uvIndex <= 6) {
-                document.getElementById('uv-index').innerHTML = 'Moderate risk';
+                document.getElementById('uv-index').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'moderate_risk');
                 document.getElementById('uv-index').style = 'background-color: #eaaf10';
                 document.getElementById('uv_img').src = 'uv-images/uv-5.png';
-                document.getElementById('detail_uv').innerHTML = Uv_5
+                document.getElementById('detail_uv').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'moderate_risk_sun_exposure')
             } else if (uvIndex > 6 && uvIndex <= 7) {
-                document.getElementById('uv-index').innerHTML = 'High risk';
+                document.getElementById('uv-index').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'high_risk');
                 document.getElementById('uv-index').style = 'background-color: #eb8a11';
                 document.getElementById('uv_img').src = 'uv-images/uv-6.png';
-                document.getElementById('detail_uv').innerHTML = Uv_6
+                document.getElementById('detail_uv').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'high_risk_sun_exposure')
             } else if (uvIndex > 7 && uvIndex <= 8) {
-                document.getElementById('uv-index').innerHTML = 'High risk';
+                document.getElementById('uv-index').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'high_risk');
                 document.getElementById('uv-index').style = 'background-color: #eb8a11';
                 document.getElementById('uv_img').src = 'uv-images/uv-7.png';
-                document.getElementById('detail_uv').innerHTML = Uv_7
+                document.getElementById('detail_uv').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'high_risk_sun_exposure')
             } else if (uvIndex > 8 && uvIndex <= 9) {
-                document.getElementById('uv-index').innerHTML = 'Very high risk';
+                document.getElementById('uv-index').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'very_high_risk');
                 document.getElementById('uv-index').style = 'background-color: #e83f0f';
                 document.getElementById('uv_img').src = 'uv-images/uv-8.png';
-                document.getElementById('detail_uv').innerHTML = Uv_8
+                document.getElementById('detail_uv').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'very_high_risk_sun_exposure')
             } else if (uvIndex > 9 && uvIndex <= 10) {
-                document.getElementById('uv-index').innerHTML = 'Very high risk';
+                document.getElementById('uv-index').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'very_high_risk');
                 document.getElementById('uv-index').style = 'background-color: #e83f0f';
                 document.getElementById('uv_img').src = 'uv-images/uv-9.png';
-                document.getElementById('detail_uv').innerHTML = Uv_9
+                document.getElementById('detail_uv').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'very_high_risk_sun_exposure')
             } else if (uvIndex > 10 && uvIndex <= 11) {
-                document.getElementById('uv-index').innerHTML = 'Very high risk';
+                document.getElementById('uv-index').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'very_high_risk');
                 document.getElementById('uv-index').style = 'background-color: #e83f0f';
                 document.getElementById('uv_img').src = 'uv-images/uv-10.png';
-                document.getElementById('detail_uv').innerHTML = Uv_10
+                document.getElementById('detail_uv').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'very_high_risk_sun_exposure')
             } else if (uvIndex > 11 && uvIndex <= 12) {
-                document.getElementById('uv-index').innerHTML = 'Extreme risk';
+                document.getElementById('uv-index').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'extreme_risk');
                 document.getElementById('uv-index').style = 'background-color: #8e3acf';
                 document.getElementById('uv_img').src = 'uv-images/uv-11.png';
-                document.getElementById('detail_uv').innerHTML = Uv_11
+                document.getElementById('detail_uv').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'extreme_risk_sun_exposure')
             } else if (uvIndex > 12 && uvIndex <= 13) {
-                document.getElementById('uv-index').innerHTML = 'Extreme risk';
+                document.getElementById('uv-index').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'extreme_risk');
                 document.getElementById('uv-index').style = 'background-color: #ec0c8b';
                 document.getElementById('uv_img').src = 'uv-images/uv-12.png';
-                document.getElementById('detail_uv').innerHTML = Uv_12
+                document.getElementById('detail_uv').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'extreme_risk_sun_exposure')
             } else if (uvIndex > 13) {
-                document.getElementById('uv-index').innerHTML = 'Extreme risk';
+                document.getElementById('uv-index').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'extreme_risk');
                 document.getElementById('uv-index').style = 'background-color: #550ef9';
                 document.getElementById('uv_img').src = 'uv-images/uv-13.png';
-                document.getElementById('detail_uv').innerHTML = Uv_13
+                document.getElementById('detail_uv').innerHTML = getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'extreme_risk_sun_exposure')
             }
 
 
@@ -867,7 +886,7 @@ function UvIndex(latitude, longitude) {
 
 
 function MoreDetails(latSum, lonSum) {
-    fetch(`https://api.weatherapi.com/v1/forecast.json?key=KEYS&q=${latSum},${lonSum}`)
+    fetch(`https://api.weatherapi.com/v1/forecast.json?key=MAIN_KEYS&q=${latSum},${lonSum}`)
         .then(response => response.json())
         .then(data => {
 
@@ -978,7 +997,7 @@ function MoreDetails(latSum, lonSum) {
 }
 
 function astronomyData(latSum, lonSum) {
-    fetch(`https://api.weatherapi.com/v1/astronomy.json?key=KEYS&q=${latSum},${lonSum}`)
+    fetch(`https://api.weatherapi.com/v1/astronomy.json?key=MAIN_KEYS&q=${latSum},${lonSum}`)
         .then(response => response.json())
         .then(data => {
 
@@ -1043,7 +1062,7 @@ fetch(apiUrlAlerts)
       if (data.alerts) {
           console.log(data.alerts);
           const alertEvent = data.alerts[0].event;
-          document.getElementById('excessiveHeatText').innerHTML = 'Weather alerts' + '<text>Tap to see more...</text>';
+
           document.querySelector('.weatherCommentsDiv').classList.add('alertOpened');
           document.querySelector('.excessiveHeat').hidden = false;
       localStorage.setItem('AlertCache', JSON.stringify(data.alerts));
@@ -1070,4 +1089,10 @@ fetch(apiUrlAlerts)
 
 function clickForecastItem(index){
     localStorage.setItem('ClickedForecastItem', index)
-}
+}
+
+        const AppLanguageCodeValue = localStorage.getItem('AppLanguageCode');
+        if (AppLanguageCodeValue) {
+            applyTranslations(AppLanguageCodeValue);
+
+        }

app/src/main/assets/index.html

@@ -14,6 +14,8 @@
     <link rel="stylesheet" href="map/leaflet.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css" />
     <script src="modules/lottie.js"></script>
+    <script src="langs/langs.js"></script>
+
 </head>
 
 <body>
@@ -72,7 +74,7 @@
 
 
                 <div class="left_current_weather">
-                    <now>Now</now>
+                    <now data-translate="now">Now</now>
                     <div class="temp_img">
                         <p id="temp"></p>
                         <img id="weather-icon" src="weather-icons/not_available.svg" alt="Weather Icon">
@@ -111,7 +113,7 @@
             <div class="icon-container-excessiveHeat">
                 <md-icon icon-outlined>info</md-icon>
             </div>
-            <p id="excessiveHeatText">Excessive heat<text></text></p>
+            <p id="excessiveHeatText">Weather alerts<text data-translate="tap_to_see_more">Tap to see more...</text></p>
 
         </div>
 
@@ -139,18 +141,18 @@
         <div class="high-all">
             <div class="high-mini">
 
-                <div class="mini wind ripple_btn_low" onclick="ShowSnack('Wind speed', 2000, 3, 'none', ' ', 'no-up')">
+                <div class="mini wind ripple_btn_low" onclick="ShowSnack(`${getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'wind_speed')}`, 2000, 3, 'none', ' ', 'no-up')">
                     <span icon-outlined>air</span>
                     <p id="wind-speed"></p>
                 </div>
 
-                <div class="mini snowAmount ripple_btn_low" onclick="ShowSnack('Wind gust', 2000, 3, 'none', ' ', 'no-up')">
+                <div class="mini snowAmount ripple_btn_low" onclick="ShowSnack(`${getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'wind_gust')}`, 2000, 3, 'none', ' ', 'no-up')">
                     <span icon-outlined>wind_power</span>
                     <p id="WindGust"></p>
                 </div>
 
 
-                <div class="mini clouds ripple_btn_low" onclick="ShowSnack('Cloudiness', 2000, 3, 'none', ' ', 'no-up')">
+                <div class="mini clouds ripple_btn_low" onclick="ShowSnack(`${getTranslationByLang(localStorage.getItem('AppLanguageCode'), 'cloudiness')}`, 2000, 3, 'none', ' ', 'no-up')">
                     <span icon-outlined>cloud</span>
                     <p id="clouds"></p>
                 </div>
@@ -166,14 +168,14 @@
                     <div class="icon_container_cloths" >
                         <md-icon icon-filled>wb_twilight</md-icon>
                     </div>
-                    <p id="dont_miss_sunrsie_text" class="insights_p">Don't miss the sunrise! It will happen in 40 minutes or less.</p>
+                    <p id="dont_miss_sunrsie_text" class="insights_p" data-translate="dont_miss_sunrise">Don't miss the sunrise! It will happen in 40 minutes or less.</p>
                 </div>
 
                 <div class="cloths " id="sunset_insight" hidden>
                     <div class="icon_container_cloths" >
                         <md-icon icon-filled>wb_twilight</md-icon>
                     </div>
-                    <p id="dont_miss_sunset_text" class="insights_p">Don't miss the sunset! It will happen in 40 minutes or less.</p>
+                    <p id="dont_miss_sunset_text" class="insights_p" data-translate="dont_miss_sunset">Don't miss the sunset! It will happen in 40 minutes or less.</p>
                 </div>
 
                 <div class="cloths insights_item">
@@ -203,7 +205,7 @@
 
             <div class="all-24">
                 <div class="h1">
-                    <p class="today_Text">Next 24-hr</p>
+                    <p class="today_Text"><span data-translate="next">Next</span> 24-hr</p>
                     <p class="date_Text_top" id="date_text_top">Mar, 19</p>
                 </div>
                 <div class="forecast" id="forecast">
@@ -216,17 +218,17 @@
 
             <rainMeter>
                 <div class="h1">
-                    <p>Hourly precipitation</p>
+                    <p data-translate="hourly_precipitation">Hourly precipitation</p>
                 </div>
 
                 <div class="wrap_cover_rain_meter" style="display: flex; align-items: center; justify-content: space-between;">
                     <div class="todaysAmount">
-                        <p>Today's amount</p>
+                        <p data-translate="todays_amount">Today's amount</p>
                         <span id="AmountRainMM">1.5 mm</span>
                     </div>
 
                     <div class="todaysAmount" style="padding-left: 0; padding-right: 20px;">
-                        <p>Precipitation hours</p>
+                        <p data-translate="precipitation_hours">Precipitation hours</p>
                         <span id="RainHours">1.5 mm</span>
                     </div>
 
@@ -242,9 +244,9 @@
 
             <div class="all-5d">
                 <div class="h2">
-                    <p>14-day Forecast</p>
-                    <p class="" style="display: flex; align-items: center;">More <i icon-outlined
-                                                                                    style="font-size: 20px;">chevron_right</i></p>
+                    <p>14-<span data-translate="day">day</span> <span data-translate="forecast">forecast</span></p>
+                    <p class="" style="display: flex; align-items: center;"><span data-translate="more">More</span> <i icon-outlined
+                                                                                                                       style="font-size: 20px;">chevron_right</i></p>
                 </div>
                 <div class="forecast-5day" id="forecast-5day">
 
@@ -253,7 +255,8 @@
             </div>
 
             <div class="LiveMapWrap ripple_btn_low" onclick="sendThemeToAndroid('OpenRadar')">
-                <div class="radar_label"><md-icon icon-outlined>radar</md-icon>Live radar</div>
+                <div class="radar_label"><md-icon icon-outlined>radar</md-icon> <span
+                        data-translate="live_radar">Live radar</span></div>
                 <div id="livemapPreview">
                     <img src="icons/prevmap.png" alt="">
                 </div>
@@ -267,7 +270,7 @@
 
 
                 <div class="currentConditionItem sunRISESET">
-                    <div class="currentConditionItemTitle"><i icon-filled>wb_twilight</i>Sun</div>
+                    <div class="currentConditionItemTitle"><i icon-filled>wb_twilight</i><span data-translate="sun">Sun</span></div>
 
                     <div class="current_condition_icon">
                         <svg height="110.0dip" width="176.0dip" viewBox="0 0 176.0 110.0"
@@ -333,7 +336,8 @@
 
 
                 <div class="currentConditionItem humidity">
-                    <div class="currentConditionItemTitle"><i icon-filled>humidity_high</i>Humidity</div>
+                    <div class="currentConditionItemTitle"><i icon-filled>humidity_high</i><span
+                            data-translate="humidity">Humidity</span></div>
 
                     <div class="current_condition_icon" id="humidity_icon_svg">
                         <svg viewBox="0 0 364.0 364.0" xmlns="http://www.w3.org/2000/svg">
@@ -350,7 +354,7 @@
 
                     <div class="currentConditionItemDewpointValue">
                         <p id="dew_percentage">-</p>
-                        <span>Dew point</span>
+                        <span data-translate="dew_point">Dew point</span>
                     </div>
 
                 </div>
@@ -372,7 +376,8 @@
                     </div>
 
                     <div class="currentConditionItemPressureValue">
-                        <div style="padding-top: 10px;"><i icon-filled>compress</i>Pressure</div>
+                        <div style="padding-top: 10px;"><i icon-filled>compress</i><span
+                                data-translate="pressure">Pressure</span></div>
                         <p id="pressure_text_main">29.96</p>
                         <span id="pressureMainUnit">inHG</span>
                     </div>
@@ -381,7 +386,8 @@
                 </div>
 
                 <div class="currentConditionItem visibility">
-                    <div class="currentConditionItemTitle visibility"><i icon-filled>visibility</i>Visibility</div>
+                    <div class="currentConditionItemTitle visibility"><i icon-filled>visibility</i><span
+                            data-translate="visibility">Visibility</span></div>
 
                     <div class="current_condition_icon">
                         <svg height="180.0dip" width="180.0dip" viewBox="0 0 180.0 180.0"
@@ -421,7 +427,7 @@
                     </div>
 
                     <div class="currentConditionItemWindDircValue">
-                        <div><i icon-filled>explore</i>Direction</div>
+                        <div><i icon-filled>explore</i><span data-translate="direction">Direction</span></div>
                         <p id="directionWind">--</p>
                         <span id="windtype">---</span>
                     </div>
@@ -440,7 +446,7 @@
 
             <div class="all_air_quality" style="border-radius: 10px 10px 5px 5px; margin-bottom: 5px; overflow: hidden;">
                 <div class="sun_text">
-                    <p>Air Quality</p>
+                    <p data-translate="air_quality">Air Quality</p>
                     <div class="air_text">
                         <p id="aqi-level">Error</p>
                     </div>
@@ -505,7 +511,7 @@
 
             <div class="all_air_quality" style="border-radius: 5px 5px 10px 10px; margin-top: 0px;">
                 <div class="sun_text">
-                    <p>UV Index</p>
+                    <p data-translate="uv_index">UV Index</p>
                     <div class="air_text">
                         <p id="uv-index"></p>
                     </div>
@@ -532,8 +538,8 @@
 
 
             <div class="new_ver_download" hidden>
-                <p>New App Version is available!</p>
-                <md-text-button onclick="sendThemeToAndroid('OpenAboutPage')">Update</md-text-button>
+                <p data-translate="new_app_version_available">New App Version is available!</p>
+                <md-text-button onclick="sendThemeToAndroid('OpenAboutPage')" data-translate="update">Update</md-text-button>
             </div>
 
         </div>
@@ -576,7 +582,7 @@
         </div>
 
         <div class="currentLocationdiv" style="margin-top: 20px; ">
-            <p class="title" style="display: flex; align-items: center; gap: 10px;"><md-icon icon-outlined>location_on</md-icon>Current Location</p>
+            <p class="title" style="display: flex; align-items: center; gap: 10px;"><md-icon icon-outlined>location_on</md-icon><span data-translate="current_location">Current location</span></p>
             <div class="currentLocations ripple_btn_low" id="currentLocations" onclick="getCurrentLocationWeather(); window.history.back()">
                 <div class="currentSearchImg">
                     <img src="icons/error.png" id="currentSearchImg" alt=""> </div>
@@ -588,7 +594,7 @@
         </div>
 
         <div class="savedLocations" hidden>
-            <p class="title" style="display: flex; align-items: center; gap: 10px;"><md-icon icon-outlined>star</md-icon>Saved locations</p>
+            <p class="title" style="display: flex; align-items: center; gap: 10px;"><md-icon icon-outlined>star</md-icon><span data-translate="saved_locations">Saved locations</span></p>
 
             <savedLocationsHolder>
 
@@ -650,7 +656,7 @@
             <span class="ripple-effect-icon"></span>
             <span icon-outlined>arrow_back</span>
         </button>
-        <p>Pick a location</p>
+        <p data-translate="pick_a_location">Pick a location</p>
     </div>
 
 
@@ -666,6 +672,21 @@
 
 <script>
 
+    function handleStorageChangeLang(event) {
+    if (event.key === 'AppLanguageCode'){
+
+            setTimeout(()=>{
+                const AppLanguageCodeValue = localStorage.getItem('AppLanguageCode');
+    if(AppLanguageCodeValue){
+        applyTranslations(AppLanguageCodeValue);
+
+    }
+            }, 200);
+
+    }
+}
+
+window.addEventListener('storage', handleStorageChangeLang);
 
         document.addEventListener("DOMContentLoaded", function () {
             const cityInput = document.getElementById("city-input");
@@ -728,6 +749,8 @@ document.getElementById('clearCityInput').addEventListener('click', () =>{
 
 
 
+
+
     </script>
 
 
@@ -737,7 +760,6 @@ document.getElementById('clearCityInput').addEventListener('click', () =>{
 <script src="components-script.js/components.js"></script>
 <script src="ripple-files/icon-ripple.js"></script>
 <script src="map/leaflet.js"></script>
-<script src="app/app.js"></script>
 <script src="modules/scroll.js"></script>
 <script src="modules/ripple_acc.js"></script>
 <script src="app/navigate.js"></script>
@@ -748,6 +770,7 @@ document.getElementById('clearCityInput').addEventListener('click', () =>{
 <script src="app/renderWeather.js"></script>
 <script src="modules/units.js"></script>
 <script src="modules/sun-tracker.js"></script>
+<script src="app/app.js"></script>
 
 </body>
 

app/src/main/assets/modules/pixel-components.js

@@ -70,28 +70,24 @@ const Uv_13 = 'Extreme risk of harm from unprotected sun exposure, full protecti
 
 const aqiText = {
     1: {
-        level: "Good",
-        message: "Air quality is considered satisfactory, and air pollution poses little or no risk.",
+        level: "good",
+        message: "air_quality_satisfactory",
     },
     2: {
-        level: "Fair",
-        message: "Air quality is acceptable; however, for some pollutants there may be a moderate health concern for a very small number of people who are unusually sensitive to air pollution.",
-
+        level: "fair",
+        message: "air_quality_acceptable",
     },
     3: {
-        level: "Moderate",
-        message: "Member of sensitive groups may experience health effects. The general public is not likely to be affected.",
-
+        level: "moderate",
+        message: "sensitive_groups_health_effects",
     },
     4: {
-        level: "Poor",
-        message: "Everyone may begin to experience health effects; member of sensitive groups may experience more serious health effects.",
-
+        level: "poor",
+        message: "health_effects_public",
     },
     5: {
-        level: "Very Poor",
-        message: "Health warnings of emergency conditions. The entire population is more likely to be affected.",
+        level: "very_poor",
+        message: "emergency_conditions",
     }
-}
-
+};
 

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

@@ -207,126 +207,126 @@ function GetWeatherLabel(iconCode, isDay) {
 
     if (isDay === 1) {
         if (iconCode === 0) {
-            return 'Clear sky'
+            return 'clear_sky'
 
         } else if (iconCode === 1) {
-            return 'Mostly clear'
+            return 'mostly_clear'
 
         } else if (iconCode === 2) {
-            return 'Partly cloudy'
+            return 'partly_cloudy'
 
         } else if (iconCode === 3) {
-            return 'Overcast'
+            return 'overcast'
 
         } else if (iconCode === 45 || iconCode === 48) {
-            return 'Fog'
+            return 'fog'
 
         } else if (iconCode === 51 || iconCode === 53 || iconCode === 55) {
-            return 'Drizzle'
+            return 'drizzle'
 
         } else if (iconCode === 56 || iconCode === 57) {
-            return 'Freezing Drizzle'
+            return 'freezing_drizzle'
 
         } else if (iconCode === 61 || iconCode === 63) {
-            return 'Moderate rain'
+            return 'moderate_rain'
 
         } else if (iconCode === 65) {
-            return 'Heavy intensity rain'
+            return 'heavy_intensity_rain'
 
         } else if (iconCode === 66 || iconCode === 67) {
-            return 'Freezing Rain'
+            return 'freezing_rain'
 
         } else if (iconCode === 71) {
-            return 'Slight snow'
+            return 'slight_snow'
 
         } else if (iconCode === 73) {
-            return 'Moderate snow'
+            return 'moderate_snow'
 
         } else if (iconCode === 75) {
-            return 'Heavy intensity snow'
+            return 'heavy_intensity_snow'
 
         } else if (iconCode === 77) {
-            return 'Snow grains'
+            return 'snow_grains'
 
         } else if (iconCode === 80 || iconCode === 81) {
-            return 'Rain showers'
+            return 'rain_showers'
 
         } else if (iconCode === 82) {
-            return 'Heavy rain showers'
+            return 'heavy_rain_showers'
 
         } else if (iconCode === 85) {
-            return 'Slight snow showers'
+            return 'slight_snow_showers'
 
         } else if (iconCode === 86) {
-            return 'Heavy snow showers'
+            return 'heavy_snow_showers'
 
         } else if (iconCode === 95) {
-            return 'Thunderstorm'
+            return 'thunderstorm'
 
         } else if (iconCode === 96 || iconCode === 99) {
-            return 'Strong thunderstorm'
+            return 'strong_thunderstorm'
 
         }
     } else {
         if (iconCode === 0) {
-            return 'Clear sky'
+            return 'clear_sky'
 
         } else if (iconCode === 1) {
-            return 'Mostly clear'
+            return 'mostly_clear'
 
         } else if (iconCode === 2) {
-            return 'Partly cloudy'
+            return 'partly_cloudy'
 
         } else if (iconCode === 3) {
-            return 'Overcast'
+            return 'overcast'
 
         } else if (iconCode === 45 || iconCode === 48) {
-            return 'Fog'
+            return 'fog'
 
         } else if (iconCode === 51 || iconCode === 53 || iconCode === 55) {
-            return 'Drizzle'
+            return 'drizzle'
 
         } else if (iconCode === 56 || iconCode === 57) {
-            return 'Freezing Drizzle'
+            return 'freezing_drizzle'
 
         } else if (iconCode === 61 || iconCode === 63) {
-            return 'Moderate rain'
+            return 'moderate_rain'
 
         } else if (iconCode === 65) {
-            return 'Heavy intensity rain'
+            return 'heavy_intensity_rain'
 
         } else if (iconCode === 66 || iconCode === 67) {
-            return 'Freezing Rain'
+            return 'freezing_rain'
 
         } else if (iconCode === 71) {
-            return 'Slight snow'
+            return 'slight_snow'
 
         } else if (iconCode === 73) {
-            return 'Moderate snow'
+            return 'moderate_snow'
 
         } else if (iconCode === 75) {
-            return 'Heavy intensity snow'
+            return 'heavy_intensity_snow'
 
         } else if (iconCode === 77) {
-            return 'Snow grains'
+            return 'snow_grains'
 
         } else if (iconCode === 80 || iconCode === 81) {
-            return 'Rain showers'
+            return 'rain_showers'
 
         } else if (iconCode === 82) {
-            return 'Heavy rain showers'
+            return 'heavy_rain_showers'
 
         } else if (iconCode === 85) {
-            return 'Slight snow showers'
+            return 'slight_snow_showers'
 
         } else if (iconCode === 86) {
-            return 'Heavy snow showers'
+            return 'heavy_snow_showers'
 
         } else if (iconCode === 95) {
-            return 'Thunderstorm'
+            return 'thunderstorm'
 
         } else if (iconCode === 96 || iconCode === 99) {
-            return 'Strong thunderstorm'
+            return 'strong_thunderstorm'
 
         }
     }
@@ -334,7 +334,15 @@ function GetWeatherLabel(iconCode, isDay) {
 
 
 
-    return WeatherLabel
+    return ''
+}
+
+function getWeatherLabelInLang(iconCode, isDay, langCode) {
+    const translationKey = GetWeatherLabel(iconCode, isDay);
+
+    const translatedLabel = getTranslationByLang(langCode, translationKey);
+
+    return translatedLabel || 'Unknown weather';
 }
 
 

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

@@ -4,6 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
  <title>about Page</title>
+ <script src="../langs/langs.js"></script>
  <link rel="stylesheet" href="../ui-files/ui.css">
  <link rel="stylesheet" href="../ui-files/font-usage.css">
  <link rel="stylesheet" href="../ui-files/variables.css">
@@ -54,47 +55,47 @@
    <span class="ripple-effect-icon"></span>
    <span icon-outlined>arrow_back</span>
   </button>
-  <p class="label-hidden-large">About WeatherMaster</p>
+  <p class="label-hidden-large" data-translate="about_weathermaster">About WeatherMaster</p>
  </div>
  <div class="activity-large-content" id="headUser-6">
-  <p class="label-large-main">About WeatherMaster</p>
+  <p class="label-large-main" data-translate="about_weathermaster">About WeatherMaster</p>
   <div class="content-parent-large">
 
    <md-list>
 
     <md-list-item type="button" onclick="sendThemeToAndroid('OpenTermsConditions')">
      <md-icon slot="start" icon-filled>privacy_tip</md-icon>
-     <div slot="headline">Terms and Conditions</div>
+     <div slot="headline" data-translate="terms_conditions">Terms and Conditions</div>
     </md-list-item>
 
     <md-list-item type="button" onclick="sendThemeToAndroid('OpenPrivacyPolicy')">
      <md-icon slot="start" icon-filled>policy</md-icon>
-     <div slot="headline">Privacy Policy</div>
+     <div slot="headline" data-translate="privacy_policy">Privacy Policy</div>
     </md-list-item>
 
     <md-list-item type="button" onclick="window.location.href='https://github.com/PranshulGG/WeatherMaster'">
      <md-icon slot="start" icon-filled>code</md-icon>
-     <div slot="headline">View source code</div>
+     <div slot="headline" data-translate="view_source_code">View source code</div>
     </md-list-item>
 
 
     <md-list-item type="button" id="checkUpdatesBtn">
      <md-icon slot="start" icon-filled>system_update</md-icon>
-     <div slot="headline">Latest version</div>
+     <div slot="headline" data-translate="latest_version">Latest version</div>
      <md-circular-progress indeterminate slot="end" style="--md-circular-progress-size: 32px;" hidden id="version_check_loader"></md-circular-progress>
     </md-list-item>
 
     <md-list-item type="button" onclick="sendThemeToAndroid('OpenLicenses')">
      <md-icon slot="start" icon-filled>copyright</md-icon>
-     <div slot="headline">Third party licenses</div>
+     <div slot="headline" data-translate="third_party_licenses">Third party licenses</div>
 
     </md-list-item>
 
 
     <md-list-item id="show_time_toast">
      <md-icon slot="start" icon-filled>info</md-icon>
-     <div slot="headline" style="margin-bottom: 2px;">Version</div>
-     <div slot="supporting-text">1.6.1 (W)</div>
+     <div slot="headline" style="margin-bottom: 2px;" data-translate="app_version">App version</div>
+     <div slot="supporting-text">1.6.2 (W)</div>
     </md-list-item>
 
    </md-list>
@@ -116,6 +117,11 @@
 <script>
 
 
+const AppLanguageCodeValue = localStorage.getItem('AppLanguageCode');
+        if (AppLanguageCodeValue) {
+            applyTranslations(AppLanguageCodeValue);
+
+        }
 
 
 const user6 = document.getElementById('headUser-6')
@@ -178,7 +184,7 @@ AndroidInterface.updateStatusBarColor(theme);
 
 
 document.getElementById('checkUpdatesBtn').addEventListener('click', async function() {
-    const currentVersion = 'v1.6.1';
+    const currentVersion = 'v1.6.2';
     const githubRepo = 'PranshulGG/WeatherMaster';
     const releasesUrl = `https://api.github.com/repos/${githubRepo}/releases/latest`;
 

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

@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html lang="en" Theme="default" data-theme="dark">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
+    <title>Select language</title>
+    <link rel="stylesheet" href="../ui-files/ui.css">
+    <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">
+    <style>
+        .activity-large-content::before {
+            position: fixed;
+            bottom: 0;
+            content: '';
+            width: 100%;
+            background: linear-gradient(0deg, var(--Surface) 10%, rgba(255, 0, 0, 0));
+            height: 30px;
+            z-index: 1;
+        }
+
+
+        .language_item {
+            padding: 15px;
+            padding-left: 20px;
+            display: flex;
+            align-items: center;
+            gap: 25px;
+            font-family: var(--outfit);
+            font-size: 18px;
+            position: relative;
+            --md-ripple-pressed-opacity: 0.1;
+        }
+
+                .language_item[disabled]{
+            opacity: 0.4;
+            pointer-events: none;
+        }
+
+    </style>
+</head>
+
+<body style="background-color: var(--Surface);">
+
+    <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="language">Language</p>
+        </div>
+        <div class="activity-large-content" id="headUser-1">
+            <p class="label-large-main" data-translate="language">Language</p>
+            <div class="content-parent-large" style="padding-bottom: 32px;">
+
+                <md-list style="padding: 10px;">
+                    <md-list-item style="background-color: var(--Secondary-Container); border-radius: 15px;"
+                        type="button" href="https://poeditor.com/join/project/DxrGXdoUGF">
+                        <md-icon icon-outlined slot="start">translate</md-icon>
+                        <div slot="headline" style="color: var(--On-Secondary-Container);" data-translate="translate_this_app">Translate this app</div>
+                        <div slot="supporting-text" data-translate="join_POEditor_project_to_help">Join POEditor project to help</div>
+                    </md-list-item>
+                </md-list>
+
+                <md-list>
+
+                    <label class="language_item">
+                        <md-radio checked name="app_language_radios" value="English" lang="en"></md-radio>
+                        English
+                        <md-ripple></md-ripple>
+                    </label>
+
+                    <label class="language_item">
+                        <md-radio name="app_language_radios" value="Español" lang="es"></md-radio>
+                        Español
+                        <md-ripple></md-ripple>
+                    </label>
+
+                    <label class="language_item" disabled>
+                        <md-radio name="app_language_radios" value="Français" lang="fr"></md-radio>
+                        Français
+                        <md-ripple></md-ripple>
+                    </label>
+
+                    <label class="language_item">
+                        <md-radio name="app_language_radios" value="Deutsch" lang="de"></md-radio>
+                        Deutsch
+                        <md-ripple></md-ripple>
+                    </label>
+
+                    <label class="language_item">
+                        <md-radio name="app_language_radios" value="Italiano" lang="it"></md-radio>
+                        Italiano
+                        <md-ripple></md-ripple>
+                    </label>
+
+                    <label class="language_item" disabled>
+                        <md-radio name="app_language_radios" value="Português" lang="pt"></md-radio>
+                        Português
+                        <md-ripple></md-ripple>
+                    </label>
+
+                    <label class="language_item">
+                        <md-radio name="app_language_radios" value="Pусский" lang="ru"></md-radio>
+                        Pусский
+                        <md-ripple></md-ripple>
+                    </label>
+
+                    <label class="language_item" disabled>
+                        <md-radio name="app_language_radios" value="Magyar" lang="hu"></md-radio>
+                        Magyar
+                        <md-ripple></md-ripple>
+                    </label>
+
+                    <label class="language_item" disabled>
+                        <md-radio name="app_language_radios" value="Polski" lang="pl"></md-radio>
+                        Polski
+                        <md-ripple></md-ripple>
+                    </label>
+
+                    <label class="language_item" disabled>
+                        <md-radio name="app_language_radios" value="Ελληνικά" lang="el"></md-radio>
+                        Ελληνικά
+                        <md-ripple></md-ripple>
+                    </label>
+
+                    <label class="language_item">
+                        <md-radio name="app_language_radios" value="Română" lang="ro"></md-radio>
+                        Română
+                        <md-ripple></md-ripple>
+                    </label>
+
+                    <label class="language_item">
+                        <md-radio name="app_language_radios" value="Slovenčina" lang="sk"></md-radio>
+                        Slovenčina
+                        <md-ripple></md-ripple>
+                    </label>
+
+
+
+                    <label class="language_item" disabled>
+                        <md-radio name="app_language_radios" value="简体中文" lang="zh-Hans"></md-radio>
+                        简体中文
+                        <md-ripple></md-ripple>
+                    </label>
+
+                    <label class="language_item" disabled>
+                        <md-radio name="app_language_radios" value="日本語" lang="ja"></md-radio>
+                        日本語
+                        <md-ripple></md-ripple>
+                    </label>
+
+
+                </md-list>
+
+                <br>
+                <br>
+                <br>
+                <br>
+                <br>
+                <br>
+                <br>
+                <br>
+                <br>
+            </div>
+        </div>
+    </div>
+
+
+
+    <script>
+        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('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('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);
+        };
+
+
+
+        document.querySelectorAll('md-radio[name="app_language_radios"]').forEach((radio) => {
+            radio.addEventListener('change', (event) => {
+                if (event.target.checked) {
+                    localStorage.setItem('AppLanguage', event.target.value);
+                    localStorage.setItem('AppLanguageCode', event.target.lang);
+                    applyTranslations(event.target.lang);
+                }
+            });
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            const AppLanguageValue = localStorage.getItem('AppLanguage');
+            const AppLanguageCodeValue = localStorage.getItem('AppLanguageCode');
+            if (AppLanguageValue) {
+                const radio = document.querySelector(`md-radio[value="${AppLanguageValue}"]`);
+                if (radio) {
+                    radio.checked = true;
+                    applyTranslations(AppLanguageCodeValue);
+                }
+            }
+        });
+
+
+    </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>
+    <script src="../langs/langs.js"></script>
+</body>
+
+</html>

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

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
     <title>Forecast page</title>
+    <script src="../langs/langs.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">
@@ -27,7 +28,7 @@
             <span icon-outlined style="font-size: 24px !important;">arrow_back</span>
         </button>
 
-        <p>14-day forecast</p>
+        <p>14-<span data-translate="day">day</span> <span data-translate="forecast">forecast</span></p>
     </div>
     <div class="full-activity-content" id="Content">
 
@@ -52,6 +53,12 @@
 
 
 <script>
+
+const AppLanguageCodeValue = localStorage.getItem('AppLanguageCode');
+        if (AppLanguageCodeValue) {
+            applyTranslations(AppLanguageCodeValue);
+
+        }
          const user2 = document.getElementById('Content')
 
 function changeColorOnScroll2() {

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

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Live rader</title>
+    <script src="../langs/langs.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">
@@ -202,7 +203,7 @@
             <span icon-outlined style="font-size: 24px !important; color: white;">arrow_back</span>
         </button>
 
-        <p>Live Radar</p>
+        <p data-translate="live_radar">Live Radar</p>
         <flex></flex>
     </div>
 
@@ -263,6 +264,12 @@
 
 <script>
 
+const AppLanguageCodeValue = localStorage.getItem('AppLanguageCode');
+        if (AppLanguageCodeValue) {
+            applyTranslations(AppLanguageCodeValue);
+
+        }
+
        var map;
 
         function loadMapRainView() {

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

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
     <title>Settings</title>
+    <script src="../langs/langs.js"></script>
     <link rel="stylesheet" href="../ui-files/ui.css">
     <link rel="stylesheet" href="../ui-files/font-usage.css">
     <link rel="stylesheet" href="../ui-files/variables.css">
@@ -42,28 +43,34 @@
             <span class="ripple-effect-icon"></span>
             <span icon-outlined>arrow_back</span>
         </button>
-        <p class="label-hidden-large" style="white-space: nowrap;">Settings</p>
+        <p class="label-hidden-large" style="white-space: nowrap;" data-translate="settings">Settings</p>
     </div>
     <div class="activity-large-content" id="headUser-1">
-        <p class="label-large-main">Settings</p>
+        <p class="label-large-main" data-translate="settings">Settings</p>
         <div class="content-parent-large" style="padding-bottom: 32px;">
 
-            <p class="title" style="margin-top: 5px;">Weather</p>
+            <p class="title" style="margin-top: 5px;" data-translate="weather">Weather</p>
 
 
 
             <md-list>
-                <md-list-item>
+                <md-list-item disabled>
                     <md-icon icon-filled slot="start">notifications</md-icon>
-                    <div slot="headline">Notification bar</div>
-                    <div slot="supporting-text">Show weather information in the notifications bar</div>
+                    <div slot="headline" data-translate="notification_bar">Notification bar</div>
+                    <div slot="supporting-text" data-translate="show_weather_information_in_the_notification_bar">Show weather information in the notifications bar</div>
                     <md-switch slot="end" id="toggle_noti"></md-switch>
                 </md-list-item>
 
+                <md-list-item disabled>
+                    <md-icon icon-filled slot="start">thermostat</md-icon>
+                    <div slot="headline" data-translate="main_temp">Main temperature</div>
+                    <div slot="supporting-text">Open-Meteo</div>
+                </md-list-item>
+
                 <md-list-item margin type="button" id="usage-popover-anchor">
                     <md-icon icon-filled slot="start">home_pin</md-icon>
-                    <div slot="headline">Home location</div>
-                    <div slot="supporting-text">You need to save locations to show in the menu</div>
+                    <div slot="headline" data-translate="home_location">Home location</div>
+                    <div slot="supporting-text" data-translate="save_locations_menu">You need to save locations to show in the menu</div>
                     <div slot="supporting-text" id="homeLocationSelectedText" style="color: var(--Primary); font-family: var(--outfit-mid);">Your device location</div>
 
                     <md-icon slot="end" icon-outlined>chevron_right</md-icon>
@@ -81,7 +88,7 @@
 
                 <md-list-item margin>
                     <md-icon icon-filled slot="start">device_thermostat</md-icon>
-                    <div slot="headline">Temperature Unit</div>
+                    <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>
@@ -95,7 +102,7 @@
 
                 <md-list-item>
                     <md-icon icon-filled slot="start">airwave</md-icon>
-                    <div slot="headline">Wind Unit</div>
+                    <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>
@@ -108,7 +115,7 @@
 
                 <md-list-item>
                     <md-icon icon-filled slot="start">visibility</md-icon>
-                    <div slot="headline">Visibility Unit</div>
+                    <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>
@@ -121,7 +128,7 @@
 
                 <md-list-item>
                     <md-icon icon-filled slot="start">rainy_light</md-icon>
-                    <div slot="headline">Precipitation Unit</div>
+                    <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>
@@ -135,7 +142,7 @@
 
                 <md-list-item>
                     <md-icon icon-filled slot="start">av_timer</md-icon>
-                    <div slot="headline">Pressure Unit</div>
+                    <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>
@@ -151,26 +158,26 @@
 
             </md-list>
 
-            <p class="title" style="margin-top: 5px;">Additional</p>
+            <p class="title" style="margin-top: 5px;" data-translate="additional">Additional</p>
             <md-list>
 
-                <md-list-item margin disabled>
-                    <div slot="headline">App language</div>
-                    <div slot="supporting-text">English (Translation soon)</div>
-                    <md-icon icon-filled slot="end">open_in_new</md-icon>
+                <md-list-item margin type="button" onclick="sendThemeToAndroid('OpenLanguagesPage')">
+                    <md-icon slot="start" icon-filled>language</md-icon>
+                    <div slot="headline" data-translate="app_language">App language</div>
+                    <div slot="supporting-text" id="selectedAppLang_text">English</div>
                 </md-list-item>
 
                 <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="supporting-text">Learn about the app</div>
+                    <div slot="headline" data-translate="about_weathermaster">About WeatherMaster</div>
+                    <div slot="supporting-text" data-translate="learn_about_the_app">Learn about the app</div>
                     <md-icon icon-outlined slot="end">chevron_right</md-icon>
                 </md-list-item>
 
 
                 <md-list-item  href="https://ko-fi.com/pranshulgg" type="button">
                     <md-icon icon-filled slot="start">favorite</md-icon>
-                    <div slot="headline">Support</div>
+                    <div slot="headline" data-translate="support">Support</div>
                     <div slot="supporting-text">On Ko-Fi</div>
                     <md-icon icon-outlined slot="end">open_in_new</md-icon>
                 </md-list-item>
@@ -178,7 +185,7 @@
             </md-list>
 
 
-            <p class="title" style="margin-top: 5px;">Data provided by</p>
+            <p class="title" style="margin-top: 5px;" data-translate="data_provided_by">Data provided by</p>
             <md-list>
                 <md-list-item margin href="https://openweathermap.org/">
                     <div slot="headline">OpenWeatherMap</div>
@@ -196,7 +203,7 @@
 
 
 
-            <p class="title" style="margin-top: 5px;">Map</p>
+            <p class="title" style="margin-top: 5px;" data-translate="map">Map</p>
             <md-list>
                 <md-list-item margin href="https://leafletjs.com/">
                     <div slot="headline">Leaflet</div>
@@ -233,6 +240,28 @@
 <script>
 
 
+    const AppLanguageCodeValue = localStorage.getItem('AppLanguageCode');
+    if(AppLanguageCodeValue){
+        applyTranslations(AppLanguageCodeValue);
+
+    }
+
+
+    function handleStorageChangeLang(event) {
+    if (event.key === 'AppLanguageCode'){
+
+            setTimeout(()=>{
+                const AppLanguageCodeValue = localStorage.getItem('AppLanguageCode');
+    if(AppLanguageCodeValue){
+        applyTranslations(AppLanguageCodeValue);
+
+    }
+            }, 200);
+
+    }
+}
+
+window.addEventListener('storage', handleStorageChangeLang);
 
 const user1 = document.getElementById('headUser-1')
 
@@ -470,7 +499,13 @@ if(!localStorage.getItem('DefaultLocation')){
 
 }
 
+    const AppLanguageText = localStorage.getItem('AppLanguage');
+    if(AppLanguageText){
+        document.getElementById("selectedAppLang_text").innerHTML = AppLanguageText;
+    } else{
+        document.getElementById("selectedAppLang_text").innerHTML = 'English';
 
+    }
     </script>
 
 <script src="../components-script.js/components.js"></script>

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

@@ -273,6 +273,7 @@ touch_search{
   color: var(--On-Surface-Variant);
   font-family: var(--outfit);
   font-size: 15px;
+  text-align: right;
 }
 
 

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

@@ -0,0 +1,212 @@
+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.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 LanguagePage extends AppCompatActivity {
+
+    private WebView webview;
+
+    public void onBackPressed() {
+        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.mainBG));
+        setTheme(R.style.blue_caret);
+        webview.loadUrl("file:///android_asset/pages/LanguagesPage.html");
+
+    }
+
+
+
+
+    public class AndroidInterface {
+        private LanguagePage aActivity;
+
+        AndroidInterface(LanguagePage 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 = 0xFF1e2024;
+                        navigationBarColor = 0xFF121317;
+                        systemUiVisibilityFlags = 0;
+
+                    } else if (color.equals("ScrollFalse")) {
+                        statusBarColor = 0xFF121317;
+                        navigationBarColor = 0xFF121317;
+                        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://poeditor.com/join/project/DxrGXdoUGF") ||
+                    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

@@ -99,7 +99,9 @@ public class SettingsActivity extends AppCompatActivity {
                     } else if (color.equals("OpenAboutPage")){
                         openAboutPage();
                         return;
-
+                    } else if (color.equals("OpenLanguagesPage")){
+                        openLanguagesPage();
+                        return;
                     } else if (color.equals("bluesetDef")) {
 
                         return;
@@ -163,7 +165,10 @@ public class SettingsActivity extends AppCompatActivity {
             Intent intent = new Intent(sActivity, AboutPage.class);
             sActivity.startActivity(intent);
         }
-
+        public void openLanguagesPage() {
+            Intent intent = new Intent(sActivity, LanguagePage.class);
+            sActivity.startActivity(intent);
+        }
 
     }
 

release/output-metadata.json

@@ -11,8 +11,8 @@
       "type": "SINGLE",
       "filters": [],
       "attributes": [],
-      "versionCode": 52,
-      "versionName": "1.6.1 (W)",
+      "versionCode": 53,
+      "versionName": "1.6.2 (W)",
       "outputFile": "app-release.apk"
     }
   ],