1.3.4 updated

app/build.gradle

@@ -11,7 +11,7 @@ android {
         minSdk 22
         targetSdk 33
         versionCode 2
-        versionName "1.3.3 (W)"
+        versionName "1.3.4 (W)"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }
 

app/release/output-metadata.json

@@ -12,7 +12,7 @@
       "filters": [],
       "attributes": [],
       "versionCode": 2,
-      "versionName": "1.3.2 (W)",
+      "versionName": "1.3.3 (W)",
       "outputFile": "app-release.apk"
     }
   ],

app/src/main/AndroidManifest.xml

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

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

@@ -963,6 +963,8 @@ function getCurrentLocationWeather() {
                         document.getElementById('city-name').innerHTML = '<md-circular-progress indeterminate style="--md-circular-progress-size: 30px;"></md-circular-progress>'
                         document.getElementById('forecast').scrollLeft = 0;
                         document.getElementById('weather_wrap').scrollTop = 0;
+                                    setCurrentLocation(latitude, longitude)
+
         }, handleGeolocationError);
     } else {
         console.error('Geolocation is not supported by this browser.');
@@ -1599,7 +1601,7 @@ function displayDailyForecast(dailyForecast) {
             <p class="time-5d">${date}</p>
             </div>
 
-
+<md-ripple style="--md-ripple-pressed-opacity: 0.1;"></md-ripple>
             `
 
 
@@ -1614,11 +1616,17 @@ function displayDailyForecast(dailyForecast) {
         <div class="d5-disc-text">${description}
         <p class="time-5d">${date}</p>
         </div>
+        <md-ripple style="--md-ripple-pressed-opacity: 0.1;"></md-ripple>
 `
     ;
         }
 
 
+        forecastItem.addEventListener('click', () => {
+                        setTimeout(()=>{
+                            sendThemeToAndroid('Open8Forecast')
+                        }, 250);
+        });
 
 
         forecastContainer.appendChild(forecastItem);
@@ -1981,13 +1989,6 @@ const moon_phase_img = document.getElementById('moon_phase_img');
 
 
 
-                if(data.days[0].precipprob > 5){
-                    document.getElementById('rain_percentage').innerHTML = Math.round(data.days[0].precipprob) + '%';
-                    document.querySelector('.rain_per').hidden = false;
-                } else{
-                    document.querySelector('.rain_per').hidden = true;
-
-                }
 
                             document.getElementById('RainHours').innerHTML = Math.round(data.days[0].precipcover) + '%';
 
@@ -2002,13 +2003,18 @@ const moon_phase_img = document.getElementById('moon_phase_img');
                                 const today_max_temp_celsius = data.days[0].tempmax;
                                 const today_min_temp_celsius = data.days[0].tempmin;
 
+            const dewPointTodayC = Math.round(data.days[0].dew);
+            const dewPointTodayF = Math.round(dewPointTodayC * 9 / 5 + 32);
 
                                 if(SelectedTempUnit === 'fahrenheit'){
                                     document.getElementById('high_temp').innerHTML = celsiusToFahrenheit(today_max_temp_celsius) + '°';
                                     document.getElementById('low_temp').innerHTML = celsiusToFahrenheit(today_min_temp_celsius) + '°';
+                                     document.getElementById('dew_percentage').innerHTML  = dewPointTodayF + '°';
                                 } else{
                                     document.getElementById('high_temp').innerHTML = Math.round(today_max_temp_celsius) + '°';
                                     document.getElementById('low_temp').innerHTML = Math.round(today_min_temp_celsius) + '°';
+                                     document.getElementById('dew_percentage').innerHTML  = dewPointTodayC + '°';
+
                                 }
 
                                 hideLoader()

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

@@ -0,0 +1,444 @@
+const SelectedTempUnit = localStorage.getItem('SelectedTempUnit');
+const SelectedWindUnit = localStorage.getItem('SelectedWindUnit');
+
+
+
+const apiOne = 'dd1571a8ad3fd44555e8a5d66db01929';
+
+function getDailyForecast(latitude, longitude) {
+
+
+        const apiUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&appid=${apiOne}&units=metric`;
+    
+        fetch(apiUrl)
+            .then(response => response.json())
+            .then(data => {
+                const dailyForecast = data.daily;
+                displayDailyForecast(dailyForecast);
+            })
+            .catch(error => console.error('Error fetching daily forecast:', error));
+
+}
+
+function displayDailyForecast(dailyForecast) {
+    const forecastContainer = document.getElementById('foreCastList');
+    forecastContainer.innerHTML = '';
+
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    dailyForecast.forEach((forecast, index) => {
+
+        if (index === 0) return; // Skip the current day
+
+        const timestamp = new Date(forecast.dt * 1000);
+        if (timestamp.getDate() === today.getDate()) return;
+
+        const date = timestamp.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+
+
+        const description = forecast.weather[0].description;
+        let iconCode = forecast.weather[0].icon;
+        const tempMax = Math.round(forecast.temp.max);
+        const tempMIN = Math.round(forecast.temp.min);
+
+        const tempMaxF = Math.round(tempMax * 9 / 5 + 32);
+
+        const rainPercentage = Math.round(forecast.pop * 100)|| '0';
+        const tempMINF = Math.round(tempMIN * 9 / 5 + 32);
+        const rainMM = forecast.rain || '0.0';
+        const pressure = forecast.pressure
+        const humidity = forecast.humidity
+        const cloudCover = forecast.clouds
+        const dewPoint = Math.round(forecast.dew_point)
+        const dewPointF = Math.round(dewPoint * 9 / 5 + 32);
+        const windspeedKmh = Math.round(forecast.wind_speed);
+        const windSpeedMph = Math.round(forecast.wind_speed * 2.23694);
+
+                const uvIndex = Math.round(forecast.uvi)
+
+                let UVindexText;
+
+                if (uvIndex >= 0 && uvIndex <= 1) {
+                    UVindexText = 'Minimal';
+                } else if (uvIndex > 1 && uvIndex <= 2) {
+                    UVindexText = 'Low';
+
+                } else if (uvIndex > 2 && uvIndex <= 3) {
+                    UVindexText = 'Low';
+
+                } else if (uvIndex > 3 && uvIndex <= 4) {
+                    UVindexText = 'Moderate';
+
+                } else if (uvIndex > 4 && uvIndex <= 5) {
+                    UVindexText = 'Moderate';
+
+                } else if (uvIndex > 5 && uvIndex <= 6) {
+                    UVindexText = 'Moderate';
+
+                } else if (uvIndex > 6 && uvIndex <= 7) {
+                    UVindexText = 'High';
+
+                } else if (uvIndex > 7 && uvIndex <= 8) {
+                    UVindexText = 'High';
+
+                } else if (uvIndex > 8 && uvIndex <= 9) {
+                    UVindexText = 'Very high';
+
+                } else if (uvIndex > 9 && uvIndex <= 10) {
+                    UVindexText = 'Very high';
+
+                } else if (uvIndex > 10 && uvIndex <= 11) {
+                    UVindexText = 'Very high';
+
+                } else if (uvIndex > 11 && uvIndex <= 12) {
+                    UVindexText = 'Extreme';
+
+                } else if (uvIndex > 12 && uvIndex <= 13) {
+                    UVindexText = 'Extreme';
+
+                } else if (uvIndex > 13) {
+                    UVindexText = 'Extreme';
+                }
+
+        iconCode = iconCode.replace('n', 'd');
+
+        const forecastItem = document.createElement('div');
+        forecastItem.classList.add('forecast-list-item');
+
+        let colorStyle;
+
+        if(iconCode === '01d'){
+            colorStyle = '--weather-color: #375aa3;';
+        } else if(iconCode === '02d' ){
+            colorStyle = '--weather-color: #5b606b;';
+        } else if(iconCode === '03d' || iconCode === '04d'){
+            colorStyle = '--weather-color: #555b69;';
+        } else if(iconCode === '09d' || iconCode === '10d'){
+            colorStyle = '--weather-color: #33415e;';
+        } else if(iconCode === '11d'){
+            colorStyle = '--weather-color: #383147;'
+        } else if(iconCode === '13d'){
+            colorStyle === '--weather-color: #41465f;'
+        } else if(iconCode === '50d'){
+            colorStyle === '--weather-color: #352603;'
+        }
+
+
+        // create forecast-details
+
+        forecastItem.style = colorStyle
+
+
+       if(SelectedTempUnit === 'fahrenheit' && SelectedWindUnit === 'kilometer'){
+
+               forecastItem.innerHTML = `
+               <div class="daily_date_time">
+                   <div>
+                   <p>${date}</p>
+                   <span>${description}</span></div>
+
+                   <div>
+                   <img src="../weather-icons/${iconCode}.svg">
+                   </div>
+               </div>
+
+               <div class="temp_min_max">
+                   <p>${tempMaxF}° <span>/ ${tempMINF}°</span></p>
+               </div>
+
+               <div class="daily_details">
+
+                   <div class="details_daily_items">
+
+                               <div class="daily_detail_item">
+                                   <span>Precipitation chances</span>
+                                     <i><img src="https://i.ibb.co/BLHjSpt/rain-per.png"></i>
+                                   <p>${rainPercentage}%</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Precipitation amount</span>
+                                    <i><img src="https://i.ibb.co/YTzNd3G/rain-amount.png"></i>
+                                   <p>${rainMM} mm</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Wind speed</span>
+                                     <i><img src="https://i.ibb.co/59Rv1BW/wind-speed.png"></i>
+                                   <p>${windspeedKmh} km/h</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Pressure</span>
+                                     <i><img src="https://i.ibb.co/C5Mpzz1/pressure.png"></i>
+                                   <p>${pressure} hPa</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Cloud cover</span>
+                                     <i><img src="https://i.ibb.co/Vw0BXpc/cloud-cover.png"></i>
+                                   <p>${cloudCover}%</p>
+                               </div>
+
+
+                               <div class="daily_detail_item">
+                                   <span>Humidity</span>
+                                     <i><img src="https://i.ibb.co/84G9S6Z/humidity.png"></i>
+                                   <p>${humidity}%</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Dew point</span>
+                                     <i><img src="https://i.ibb.co/KrMZncB/dew-point.png"></i>
+                                   <p>${dewPointF}°</p>
+                               </div>
+
+                                 <div class="daily_detail_item">
+                                   <span>UV index</span>
+                                     <i><img src="https://i.ibb.co/X2MtYGT/uv-index.png"></i>
+                                   <p>${uvIndex} <text style="color: var(--On-Surface-Variant);font-size: 13px;">${UVindexText}</text></p>
+                               </div>
+
+                       </div>
+
+               </div>
+
+               `
+               } else if(SelectedWindUnit === 'mile' && SelectedTempUnit === 'celsius'){
+                   forecastItem.innerHTML = `
+                   <div class="daily_date_time">
+                       <div>
+                       <p>${date}</p>
+                       <span>${description}</span></div>
+
+                       <div>
+                       <img src="../weather-icons/${iconCode}.svg">
+                       </div>
+                   </div>
+
+                   <div class="temp_min_max">
+                       <p>${tempMax}° <span>/ ${tempMIN}°</span></p>
+                   </div>
+
+                   <div class="daily_details">
+
+                       <div class="details_daily_items">
+
+                               <div class="daily_detail_item">
+                                   <span>Precipitation chances</span>
+                                     <i><img src="https://i.ibb.co/BLHjSpt/rain-per.png"></i>
+                                   <p>${rainPercentage}%</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Precipitation amount</span>
+                                    <i><img src="https://i.ibb.co/YTzNd3G/rain-amount.png"></i>
+                                   <p>${rainMM} mm</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Wind speed</span>
+                                     <i><img src="https://i.ibb.co/59Rv1BW/wind-speed.png"></i>
+                                   <p>${windSpeedMph} mph</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Pressure</span>
+                                     <i><img src="https://i.ibb.co/C5Mpzz1/pressure.png"></i>
+                                   <p>${pressure} hPa</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Cloud cover</span>
+                                     <i><img src="https://i.ibb.co/Vw0BXpc/cloud-cover.png"></i>
+                                   <p>${cloudCover}%</p>
+                               </div>
+
+
+                               <div class="daily_detail_item">
+                                   <span>Humidity</span>
+                                     <i><img src="https://i.ibb.co/84G9S6Z/humidity.png"></i>
+                                   <p>${humidity}%</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Dew point</span>
+                                     <i><img src="https://i.ibb.co/KrMZncB/dew-point.png"></i>
+                                   <p>${dewPoint}°</p>
+                               </div>
+
+                                 <div class="daily_detail_item">
+                                   <span>UV index</span>
+                                     <i><img src="https://i.ibb.co/X2MtYGT/uv-index.png"></i>
+                                   <p>${uvIndex} <text style="color: var(--On-Surface-Variant);font-size: 13px;">${UVindexText}</text></p>
+                               </div>
+
+                           </div>
+
+                   </div>
+
+                   `
+               } else if(SelectedWindUnit === 'mile' && SelectedTempUnit === 'fahrenheit'){
+                   forecastItem.innerHTML = `
+                   <div class="daily_date_time">
+                       <div>
+                       <p>${date}</p>
+                       <span>${description}</span></div>
+
+                       <div>
+                       <img src="../weather-icons/${iconCode}.svg">
+                       </div>
+                   </div>
+
+                   <div class="temp_min_max">
+                       <p>${tempMaxF}° <span>/ ${tempMINF}°</span></p>
+                   </div>
+
+                   <div class="daily_details">
+
+                       <div class="details_daily_items">
+
+                               <div class="daily_detail_item">
+                                   <span>Precipitation chances</span>
+                                     <i><img src="https://i.ibb.co/BLHjSpt/rain-per.png"></i>
+                                   <p>${rainPercentage}%</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Precipitation amount</span>
+                                    <i><img src="https://i.ibb.co/YTzNd3G/rain-amount.png"></i>
+                                   <p>${rainMM} mm</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Wind speed</span>
+                                     <i><img src="https://i.ibb.co/59Rv1BW/wind-speed.png"></i>
+                                   <p>${windSpeedMph} mph</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Pressure</span>
+                                     <i><img src="https://i.ibb.co/C5Mpzz1/pressure.png"></i>
+                                   <p>${pressure} hPa</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Cloud cover</span>
+                                     <i><img src="https://i.ibb.co/Vw0BXpc/cloud-cover.png"></i>
+                                   <p>${cloudCover}%</p>
+                               </div>
+
+
+                               <div class="daily_detail_item">
+                                   <span>Humidity</span>
+                                     <i><img src="https://i.ibb.co/84G9S6Z/humidity.png"></i>
+                                   <p>${humidity}%</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Dew point</span>
+                                     <i><img src="https://i.ibb.co/KrMZncB/dew-point.png"></i>
+                                   <p>${dewPointF}°</p>
+                               </div>
+
+                                 <div class="daily_detail_item">
+                                   <span>UV index</span>
+                                     <i><img src="https://i.ibb.co/X2MtYGT/uv-index.png"></i>
+                                   <p>${uvIndex} <text style="color: var(--On-Surface-Variant);font-size: 13px;">${UVindexText}</text></p>
+                               </div>
+
+                           </div>
+
+                   </div>
+
+                   `
+               } else{
+                   forecastItem.innerHTML = `
+                   <div class="daily_date_time">
+                       <div>
+                       <p>${date}</p>
+                       <span>${description}</span></div>
+
+                       <div>
+                       <img src="../weather-icons/${iconCode}.svg">
+                       </div>
+                   </div>
+
+                   <div class="temp_min_max">
+                       <p>${tempMax}° <span>/ ${tempMIN}°</span></p>
+                   </div>
+
+                   <div class="daily_details">
+
+                       <div class="details_daily_items">
+
+                               <div class="daily_detail_item">
+                                   <span>Precipitation chances</span>
+                                     <i><img src="https://i.ibb.co/BLHjSpt/rain-per.png"></i>
+                                   <p>${rainPercentage}%</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Precipitation amount</span>
+                                    <i><img src="https://i.ibb.co/YTzNd3G/rain-amount.png"></i>
+                                   <p>${rainMM} mm</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Wind speed</span>
+                                     <i><img src="https://i.ibb.co/59Rv1BW/wind-speed.png"></i>
+                                   <p>${windspeedKmh} km/h</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Pressure</span>
+                                     <i><img src="https://i.ibb.co/C5Mpzz1/pressure.png"></i>
+                                   <p>${pressure} hPa</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Cloud cover</span>
+                                     <i><img src="https://i.ibb.co/Vw0BXpc/cloud-cover.png"></i>
+                                   <p>${cloudCover}%</p>
+                               </div>
+
+
+                               <div class="daily_detail_item">
+                                   <span>Humidity</span>
+                                     <i><img src="https://i.ibb.co/84G9S6Z/humidity.png"></i>
+                                   <p>${humidity}%</p>
+                               </div>
+
+                               <div class="daily_detail_item">
+                                   <span>Dew point</span>
+                                     <i><img src="https://i.ibb.co/KrMZncB/dew-point.png"></i>
+                                   <p>${dewPoint}°</p>
+                               </div>
+
+                                 <div class="daily_detail_item">
+                                   <span>UV index</span>
+                                     <i><img src="https://i.ibb.co/X2MtYGT/uv-index.png"></i>
+                                   <p>${uvIndex} <text style="color: var(--On-Surface-Variant);font-size: 13px;">${UVindexText}</text></p>
+                               </div>
+
+                           </div>
+
+                   </div>
+
+                   `
+               }
+
+        forecastContainer.appendChild(forecastItem);
+    });
+}
+
+
+
+const latDif = localStorage.getItem('currentLat');
+const longDif = localStorage.getItem('currentLong');
+
+
+setTimeout(()=>{
+    getDailyForecast(latDif, longDif)
+}, 1500);

app/src/main/assets/index.html

@@ -94,9 +94,9 @@
 
             </div>
 
-            <div class="rain_per" style="display: none;">
-                <i icon-outlined>rainy</i>
-                <p id="rain_percentage">10%</p>
+            <div class="dew_per">
+                <i icon-outlined>dew_point</i>
+                <p id="dew_percentage">10%</p>
             </div>
 
         </div>

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

@@ -61,7 +61,7 @@
                 <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.3.3 (W)</div>
+                    <div slot="supporting-text">1.3.4 (W)</div>
                 </md-list-item>
 
             </md-list>

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

@@ -0,0 +1,119 @@
+<!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>Forecast page</title>
+    <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">
+    <link rel="stylesheet" href="forecastPageUi.css">
+</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;">Next 7-Days</p>
+        </div>
+        <div class="activity-large-content" id="headUser-1">
+            <p class="label-large-main">Next 7-Days</p>
+            <div class="content-parent-large" style="padding-bottom: 32px;">
+
+                <div id="foreCastList">
+
+                    <div class="loader_holder">
+                    <md-circular-progress indeterminate></md-circular-progress></div>
+
+                </div>
+
+              
+
+            </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);
+        };
+
+
+
+
+    </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 src="../app/renderForecastPage.js"></script>
+    <script type="module" src="../index.js"></script>
+</body>
+
+</html>

app/src/main/assets/pages/forecastPageUi.css

@@ -0,0 +1,158 @@
+* {
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+    touch-action: manipulation;
+    -webkit-user-drag: none;
+    outline: none;
+}
+
+p{
+    margin: 0;
+}
+
+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;
+    }
+}
+
+
+.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;
+}
+
+
+
+.loader_holder{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 130px;
+    --md-circular-progress-size: 55px;
+}
+
+
+#foreCastList .forecast-list-item{
+    animation: forecast-list-item 0.3s ease-in;
+    padding: 15px;
+    /* background-color: var(--Surface-Container-Low); */
+    background: linear-gradient(0deg, var(--Surface-Container-Low) 40%, var(--weather-color));
+    border-radius: 5px;
+    margin-bottom: 5px;
+    
+}
+
+#foreCastList .forecast-list-item:first-child{
+    border-radius:10px 10px 5px 5px;
+}
+
+#foreCastList .forecast-list-item:last-child{
+    border-radius:5px 5px 10px 10px ;
+}
+
+#foreCastList{
+    padding: 10px;
+}
+
+@keyframes forecast-list-item{
+    0%{
+        opacity: 0;
+    }
+    100%{
+        opacity: 1;
+    }
+}
+
+
+#foreCastList .forecast-list-item .daily_date_time div p{
+    font-size: 30px;
+    color: White;
+    padding-bottom: 3px;
+}
+
+#foreCastList .forecast-list-item .daily_date_time div span{
+    font-size: 20px;
+    text-transform: capitalize;
+}
+
+#foreCastList .forecast-list-item .daily_date_time{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+#foreCastList .forecast-list-item .daily_date_time div img{
+    width: 60px;
+    height: 60px;
+}
+
+#foreCastList .forecast-list-item .temp_min_max{
+    font-size: 34px;
+    font-family: Arial, Helvetica, sans-serif;
+    margin-top: 20px;
+    color: var(--On-Surface);
+    margin-bottom: 20px;
+}
+
+#foreCastList .forecast-list-item .temp_min_max p span{
+    opacity: 0.8;
+}
+
+#foreCastList .forecast-list-item .daily_details .details_daily_items{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 5px;
+}
+
+#foreCastList .forecast-list-item .daily_details .details_daily_items .daily_detail_item{
+    background-color: rgba(0, 0, 0, 0.308);
+    padding: 10px;
+    border-radius: 10px;
+}
+
+#foreCastList .forecast-list-item .daily_details .details_daily_items .daily_detail_item span{
+    color: var(--On-Surface-Variant);
+    font-size: 15px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid var(--Outline-Variant);
+    display: block;
+    padding-bottom: 4px;
+}
+
+#foreCastList .forecast-list-item .daily_details .details_daily_items .daily_detail_item p{
+    color: White;
+    font-size: 18px;
+}
+
+#foreCastList .forecast-list-item .daily_details .details_daily_items .daily_detail_item i{
+    display: flex;
+    align-items: center;
+    padding-bottom: 10px;
+    justify-content: center;
+    color: var(--Secondary);
+    font-size: 30px;
+    height: 40px;
+}
+
+#foreCastList .forecast-list-item .daily_details .details_daily_items .daily_detail_item i img{
+    width: 35px;
+}

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

@@ -229,7 +229,7 @@ touch_search{
   font-weight: 500;
 }
 
-.main-weat .rain_per{
+.main-weat .dew_per{
   position: absolute;
   right: 10px;
   bottom: 10px;
@@ -241,11 +241,11 @@ touch_search{
   gap: 4px;
 }
 
-.main-weat .rain_per p{
+.main-weat .dew_per p{
   margin: 0;
 }
 
-.main-weat .rain_per i{
+.main-weat .dew_per i{
   font-size: 20px;
 }
 

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

@@ -930,6 +930,7 @@
     --Shadow: #000000;
 
     --caret: #aac7ff;
+    --Top-bar: 64, 70, 89;
 
 
 }

app/src/main/java/com/example/weathermaster/ForecastPage.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 ForecastPage 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));
+
+        webview.loadUrl("file:///android_asset/pages/forecastPage.html");
+
+    }
+
+
+
+
+    public class AndroidInterface {
+        private ForecastPage aActivity;
+
+        AndroidInterface(ForecastPage 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://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/MainActivity.java

@@ -349,7 +349,9 @@ public class MainActivity extends AppCompatActivity {
                     } else if (color.equals("OpenSettings")){
                         openSettingsActivity();
                         return;
-
+                    } else if (color.equals("Open8Forecast")){
+                        openForecastPage();
+                        return;
                     } else if (color.equals("GoBack")){
                         back();
                         return;
@@ -417,6 +419,11 @@ public class MainActivity extends AppCompatActivity {
                     mActivity.startActivity(intent);
         }
 
+        public void openForecastPage(){
+            Intent intent = new Intent(mActivity, ForecastPage.class);
+            mActivity.startActivity(intent);
+        }
+
     }
 
     public void back() {