1.4.2 updated

.idea/.gitignore

@@ -1,3 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml

.idea/misc.xml

@@ -3,7 +3,4 @@
   <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="jbr-17" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/build/classes" />
   </component>
-  <component name="ProjectType">
-    <option name="id" value="Android" />
-  </component>
 </project>

.idea/shelf/Uncommitted_changes_before_Update_at_13-07-2024_12_43_pm_[Changes]/shelved.patch

@@ -0,0 +1,29 @@
+Index: README.md
+IDEA additional info:
+Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
+<+> # WeatherMaster \r\n \r\n<img src=\"https://github.com/PranshulGG/WeatherMaster/blob/master/app/src/main/assets/weather-icons/02d.svg?short_path=21e6bd2\" alt=\"\" width=\"150px\">\r\n\r\nWeatherMaster is developed with pure HTML, CSS, JavaScript, and Java. Designed to mimic the look and feel of a native Android app.\r\n\r\n\r\n# \uD83D\uDC41️ Preview\r\n\r\n<div > \r\n<img alt=\"App image\" src=\"screenshots/1.png\" width=\"30%\" style=\"border-radius: 10px;\">\r\n<img alt=\"App image\" src=\"screenshots/2.png\" width=\"30%\">\r\n<img alt=\"App image\" src=\"screenshots/3.png\" width=\"30%\">\r\n<img alt=\"App image\" src=\"screenshots/4.png\" width=\"30%\">\r\n<img alt=\"App image\" src=\"screenshots/5.png\" width=\"30%\">\r\n  \r\n</div>\r\n\r\n<br>\r\n\r\n\r\n# \uD83D\uDCF2 Download\r\n\r\n<p align=\"left\">\r\n    <a href=\"https://github.com/PranshulGG/WeatherMaster/releases\"><img alt=\"GitHub\" src=\"https://github.com/PranshulGG/CalcMaster-A-Calculator-App/blob/master/previewed/badge_github.png\" height=\"120\"/></a>\r\n</p>\r\n\r\n\r\n# ✨ Features:\r\n\r\n - <strong>Native Android Experience: </stronge>Enjoy a user interface and interaction that closely resemble a native Android Weather app.\r\n   \r\n - <strong>Material Design: </stronge>The app is built using Material Web Components, ensuring a clean, consistent, and visually appealing design.\r\n\r\n - <strong>Customization Options: </stronge>Enjoy a ton of customization options. Adjust themes, Units.\r\n   \r\n - <strong>Responsive Design: </stronge>WeatherMaster is fully responsive for all mobile devices.\r\n   \r\n - <strong>User-Friendly Interface: </stronge>The app's interface is designed to be straightforward and user-friendly.\r\n\r\n\r\n# \uD83D\uDEE0️ Built With:\r\n\r\n - <strong>HTML & CSS: </stronge> For the basic structure and styling of the app.\r\n   \r\n - <strong>JavaScript: </stronge>To handle the app's logic and interactivity.\r\n\r\n - <strong>Weather data: </stronge> Using <a href=\"https://openweathermap.org/\">OpenWeatherMap</a> to fetch weather and <a href=\"https://ipgeolocation.io/\">ipgeolocation.io</a> for Moonset and Moonrise timings\r\n\r\n - <strong>Java: </stronge>Mainly used for JavaScript interface and permissions, allowing the app to run on Android devices.\r\n   \r\n - <strong>Material Web Components: </stronge>Utilized to create a consistent and attractive Material Design look and feel.\r\n\r\n - <strong>Weather icons</strong>: <a href=\"https://gitlab.com/bignutty/google-weather-icons\">Google weather icons\r\n\r\n # \uD83D\uDCDD Todos:\r\n \r\n - ⬛ Make it lightweight\r\n - ⬛ Notification alerts\r\n - ⬛ A feature that allows you to add multiple locations\r\n - ⬛ More detailed weather\r\n - ✅ Change app colors according to the weather\r\n   \r\n<br>\r\n<br>\r\n\r\n> [!NOTE]\r\n> The app is designed to run on Android devices and does not support web browsers. Attempting to open the app in a browser will not work.\r\n\r\n<br>\r\n\r\n\r\n# Contact\r\nFor any questions or feedback, feel free to open an issue on GitHub or contact pranshul.devmain@gmail.com\r\n\r\n<br>\r\n\r\n# License\r\nThis project is licensed under the MIT License. See the `LICENSE` file for details.\r\n\r\n\r\n\r\n\r\n\r\n
+Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
+<+>UTF-8
+===================================================================
+diff --git a/README.md b/README.md
+--- a/README.md	(revision dbb4fc4d3912cc1ed4676def82edb8120a7814a4)
++++ b/README.md	(date 1720854695916)
+@@ -8,11 +8,13 @@
+ # 👁️ Preview
+ 
+ <div > 
+-<img alt="App image" src="screenshots/1.png" width="30%" style="border-radius: 10px;">
+-<img alt="App image" src="screenshots/2.png" width="30%">
+-<img alt="App image" src="screenshots/3.png" width="30%">
+-<img alt="App image" src="screenshots/4.png" width="30%">
+-<img alt="App image" src="screenshots/5.png" width="30%">
++<img alt="App image" src="screenshots/img_1.jpeg" width="30%" style="border-radius: 10px;">
++<img alt="App image" src="screenshots/Img_2.jpeg" width="30%">
++<img alt="App image" src="screenshots/img_3.jpeg" width="30%">
++<img alt="App image" src="screenshots/img_4.jpeg" width="30%">
++<img alt="App image" src="screenshots/img_5.jpeg" width="30%">
++<img alt="App image" src="screenshots/img_6.jpeg" width="30%">
++
+   
+ </div>
+ 

.idea/shelf/Uncommitted_changes_before_Update_at_13-07-2024_12_43_pm__Changes_.xml

@@ -0,0 +1,59 @@
+<changelist name="Uncommitted_changes_before_Update_at_13-07-2024_12_43_pm_[Changes]" date="1720854808110" recycled="false" toDelete="true">
+  <option name="PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Update_at_13-07-2024_12_43_pm_[Changes]/shelved.patch" />
+  <option name="DESCRIPTION" value="Uncommitted changes before Update at 13-07-2024 12:43 pm [Changes]" />
+  <binary>
+    <option name="BEFORE_PATH" value="screenshots/3.png" />
+    <option name="AFTER_PATH" />
+    <option name="SHELVED_PATH" />
+  </binary>
+  <binary>
+    <option name="BEFORE_PATH" />
+    <option name="AFTER_PATH" value="screenshots/img_1.jpeg" />
+    <option name="SHELVED_PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Update_at_13-07-2024_12_43_pm_[Changes]/img_1.jpeg" />
+  </binary>
+  <binary>
+    <option name="BEFORE_PATH" value="screenshots/4.png" />
+    <option name="AFTER_PATH" />
+    <option name="SHELVED_PATH" />
+  </binary>
+  <binary>
+    <option name="BEFORE_PATH" />
+    <option name="AFTER_PATH" value="screenshots/img_4.jpeg" />
+    <option name="SHELVED_PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Update_at_13-07-2024_12_43_pm_[Changes]/img_4.jpeg" />
+  </binary>
+  <binary>
+    <option name="BEFORE_PATH" value="screenshots/5.png" />
+    <option name="AFTER_PATH" />
+    <option name="SHELVED_PATH" />
+  </binary>
+  <binary>
+    <option name="BEFORE_PATH" value="screenshots/1.png" />
+    <option name="AFTER_PATH" />
+    <option name="SHELVED_PATH" />
+  </binary>
+  <binary>
+    <option name="BEFORE_PATH" />
+    <option name="AFTER_PATH" value="screenshots/img_3.jpeg" />
+    <option name="SHELVED_PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Update_at_13-07-2024_12_43_pm_[Changes]/img_3.jpeg" />
+  </binary>
+  <binary>
+    <option name="BEFORE_PATH" />
+    <option name="AFTER_PATH" value="screenshots/img_6.jpeg" />
+    <option name="SHELVED_PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Update_at_13-07-2024_12_43_pm_[Changes]/img_6.jpeg" />
+  </binary>
+  <binary>
+    <option name="BEFORE_PATH" />
+    <option name="AFTER_PATH" value="screenshots/img_5.jpeg" />
+    <option name="SHELVED_PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Update_at_13-07-2024_12_43_pm_[Changes]/img_5.jpeg" />
+  </binary>
+  <binary>
+    <option name="BEFORE_PATH" value="screenshots/2.png" />
+    <option name="AFTER_PATH" />
+    <option name="SHELVED_PATH" />
+  </binary>
+  <binary>
+    <option name="BEFORE_PATH" />
+    <option name="AFTER_PATH" value="screenshots/Img_2.jpeg" />
+    <option name="SHELVED_PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Update_at_13-07-2024_12_43_pm_[Changes]/Img_2.jpeg" />
+  </binary>
+</changelist>

README.md

@@ -1,4 +1,4 @@
- # WeatherMaster 
+ # 🌦️ WeatherMaster 
  
 <img src="https://github.com/PranshulGG/WeatherMaster/blob/master/app/src/main/assets/weather-icons/02d.svg?short_path=21e6bd2" alt="" width="150px">
 
@@ -7,17 +7,13 @@ WeatherMaster is developed with pure HTML, CSS, JavaScript, and Java. Designed t
 
 # 👁️ Preview
 
-<div > 
-<img alt="App image" src="screenshots/img_6.jpeg" width="30%" style="border-radius: 10px;">
-<img alt="App image" src="screenshots/img_sunMoon.jpeg" width="30%">
-<img alt="App image" src="screenshots/img_4.jpeg" width="30%">
-<img alt="App image" src="screenshots/img_3.jpeg" width="30%">
-<img alt="App image" src="screenshots/img_search.jpeg" width="30%">
-<img alt="App image" src="screenshots/img_1.jpeg" width="30%">
-<img alt="App image" src="screenshots/img_map.jpeg" width="30%">
+| Current & 48hrs |                                                                                                     Hourly prec & 8-days forecast|                                                                                           Radar & moon/sun|  Current Conditions| 
+| :---: |                                                                                                    :---: |                                                                                                     :---: |             :---: | 
+| <img src="preview/current.png" style="width: 250px;"> |  <img src="preview/rain_8_days.png" style="width: 250px;"> |   <img    src="preview/map_sun_moon.png" style="width: 250px;"> |   <img src="preview/details.png" style="width: 250px;"> | 
 
-  
-</div>
+| Air and UV index |                                                                                       Government alerts|                                                                                               Moon phases |   Settings| 
+| :---: |                                                                                                    :---: |                                                                                                    :---: |          :---: | 
+| <img src="preview/air_uv.png" style="width: 250px;"> |  <img src="preview/gov_alert.png" style="width: 250px;"> | <img src="preview/moonphases.png" style="width: 250px;"> |  <img src="preview/settings.png" style="width: 250px;"> |
 
 <br>
 
@@ -28,18 +24,45 @@ WeatherMaster is developed with pure HTML, CSS, JavaScript, and Java. Designed t
     <a href="https://github.com/PranshulGG/WeatherMaster/releases"><img alt="GitHub" src="https://github.com/PranshulGG/CalcMaster-A-Calculator-App/blob/master/previewed/badge_github.png" height="120"/></a>
 </p>
 
-
 # ✨ Features:
 
- - <strong>Native Android Experience: </stronge>Enjoy a user interface and interaction that closely resemble a native Android Weather app.
-   
- - <strong>Material Design: </stronge>The app is built using Material Web Components, ensuring a clean, consistent, and visually appealing design.
+- 🌤️ **Current Weather:** Get real-time updates on weather conditions in your area.
+- 📢 **Government Weather Alerts:** Receive official alerts and warnings to stay safe.
+- ⏳ **48-Hour Forecast:** Plan your short-term activities with accurate forecasts for the next two days.
+- 📅 **8-Day Forecast:** View detailed weather predictions for the upcoming week.
+- 🌙 **Moon Phases:** Track the phases of the moon and plan accordingly.
+- 🌑 **Moonrise & Moonset:** Know the exact times for moonrise and moonset each day.
+- 🌅 **Sunrise & Sunset:** Stay informed about sunrise and sunset times to optimize your day.
+- 📏 **Day Length:** Check how long the daylight lasts each day.
+- 📝 **Day Description:** Get a brief summary of the day’s weather conditions.
+- 🌧️ **Rain Bar:** See a visual representation of expected rainfall.
+- 👁️ **Visibility:** Monitor how far you can see clearly based on weather conditions.
+- 💧 **Humidity:** Check the current humidity levels to stay comfortable.
+- 🧭 **Pressure:** Track atmospheric pressure to understand weather changes.
+- 🌬️ **Wind Direction & Speed:** Stay aware of wind patterns and strength.
+- ❄️ **Snow Amount:** Know the expected snowfall for winter planning.
+- ☁️ **Cloudiness:** See how much of the sky is covered by clouds.
+- 🌡️ **Min-Max Temperature:** View the range of temperatures for the day.
+- 🌬️ **Feels Like Temperature:** Understand how the temperature feels based on wind and humidity.
+- 🌧️ **Precipitation Type & Area Coverage:** Get details on what kind of precipitation is expected and its coverage area.
+- 🌞 **UV Index:** Stay protected from harmful UV rays with UV index updates.
+- 🌿 **Air Quality:** Monitor air quality to stay informed about pollution levels.
+- 🗺️ **Live Map:** Access a real-time map to track weather conditions in different areas.
+- 📍 **Location Picker:** Easily select and view weather information for different locations.
+- ⭐ **Save Favorite Locations:** Save your preferred locations for quick access to their weather updates.
+- 👗 **Clothing Recommendations:** Get suggestions on what to wear based on the current weather conditions.
 
- - <strong>Customization Options: </stronge>Enjoy a ton of customization options. Adjust themes, Units.
+# ⚙️ Other:
+
+ - 📱<strong>Native Android Experience: </stronge>Enjoy a user interface and interaction that closely resemble a native Android Weather app.
    
- - <strong>Responsive Design: </stronge>WeatherMaster is fully responsive for all mobile devices.
+ - 🎨<strong>Material Design: </stronge>The app is built using Material Web Components, ensuring a clean, consistent, and visually appealing design.
+
+ - ⚙️<strong>Customization Options: </stronge>Enjoy a ton of customization options. Adjust themes, Units.
    
- - <strong>User-Friendly Interface: </stronge>The app's interface is designed to be straightforward and user-friendly.
+ - 📐<strong>Responsive Design: </stronge>WeatherMaster is fully responsive for all mobile devices.
+   
+ - 🧩<strong>User-Friendly Interface: </stronge>The app's interface is designed to be straightforward and user-friendly.
 
 
 # 🛠️ Built With:
@@ -48,7 +71,7 @@ WeatherMaster is developed with pure HTML, CSS, JavaScript, and Java. Designed t
    
  - <strong>JavaScript: </stronge>To handle the app's logic and interactivity.
 
- - <strong>Weather data: </stronge> Using <a href="https://openweathermap.org/">OpenWeatherMap</a> to fetch weather and <a href="https://ipgeolocation.io/">ipgeolocation.io</a> for Moonset and Moonrise timings
+ - <strong>Weather data: </stronge> Using <a href="https://openweathermap.org/">OpenWeatherMap</a> to fetch weather, <a href="https://ipgeolocation.io/">ipgeolocation.io</a> for Moonset and Moonrise data, <a href="https://www.visualcrossing.com/">visualcrossing.com</a> for moon phases and <a href="https://opencagedata.com/api">api.opencagedata.com</a> for Geocoding 
 
  - <strong>Java: </stronge>Mainly used for JavaScript interface and permissions, allowing the app to run on Android devices.
    
@@ -58,10 +81,11 @@ WeatherMaster is developed with pure HTML, CSS, JavaScript, and Java. Designed t
 
  # 📝 Todos:
  
- - ⬛ Make it lightweight
+ - ✅ Make it lightweight
  - ⬛ Notification alerts
- - ⬛ A feature that allows you to add multiple locations
- - ⬛ More detailed weather
+ - ✅ Allows you to add multiple locations
+ - ⬛ Customization (under construction)
+ - ✅ More detailed weather 
  - ✅ Live weather map
  - ✅ Pick locations using map
  - ✅ Change app colors according to the weather

app/build.gradle

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

app/release/output-metadata.json

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

app/src/main/AndroidManifest.xml

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

app/src/main/assets/app/country-list.js

@@ -0,0 +1,252 @@
+const countryNames = {
+    "BD": "Bangladesh",
+    "BE": "Belgium",
+    "BF": "Burkina Faso",
+    "BG": "Bulgaria",
+    "BA": "Bosnia and Herzegovina",
+    "BB": "Barbados",
+    "WF": "Wallis and Futuna",
+    "BL": "Saint Barthelemy",
+    "BM": "Bermuda",
+    "BN": "Brunei",
+    "BO": "Bolivia",
+    "BH": "Bahrain",
+    "BI": "Burundi",
+    "BJ": "Benin",
+    "BT": "Bhutan",
+    "JM": "Jamaica",
+    "BV": "Bouvet Island",
+    "BW": "Botswana",
+    "WS": "Samoa",
+    "BQ": "Bonaire, Saint Eustatius and Saba ",
+    "BR": "Brazil",
+    "BS": "Bahamas",
+    "JE": "Jersey",
+    "BY": "Belarus",
+    "BZ": "Belize",
+    "RU": "Russia",
+    "RW": "Rwanda",
+    "RS": "Serbia",
+    "TL": "East Timor",
+    "RE": "Reunion",
+    "TM": "Turkmenistan",
+    "TJ": "Tajikistan",
+    "RO": "Romania",
+    "TK": "Tokelau",
+    "GW": "Guinea-Bissau",
+    "GU": "Guam",
+    "GT": "Guatemala",
+    "GS": "South Georgia and the South Sandwich Islands",
+    "GR": "Greece",
+    "GQ": "Equatorial Guinea",
+    "GP": "Guadeloupe",
+    "JP": "Japan",
+    "GY": "Guyana",
+    "GG": "Guernsey",
+    "GF": "French Guiana",
+    "GE": "Georgia",
+    "GD": "Grenada",
+    "GB": "United Kingdom",
+    "GA": "Gabon",
+    "SV": "El Salvador",
+    "GN": "Guinea",
+    "GM": "Gambia",
+    "GL": "Greenland",
+    "GI": "Gibraltar",
+    "GH": "Ghana",
+    "OM": "Oman",
+    "TN": "Tunisia",
+    "JO": "Jordan",
+    "HR": "Croatia",
+    "HT": "Haiti",
+    "HU": "Hungary",
+    "HK": "Hong Kong",
+    "HN": "Honduras",
+    "HM": "Heard Island and McDonald Islands",
+    "VE": "Venezuela",
+    "PR": "Puerto Rico",
+    "PS": "Palestinian Territory",
+    "PW": "Palau",
+    "PT": "Portugal",
+    "SJ": "Svalbard and Jan Mayen",
+    "PY": "Paraguay",
+    "IQ": "Iraq",
+    "PA": "Panama",
+    "PF": "French Polynesia",
+    "PG": "Papua New Guinea",
+    "PE": "Peru",
+    "PK": "Pakistan",
+    "PH": "Philippines",
+    "PN": "Pitcairn",
+    "PL": "Poland",
+    "PM": "Saint Pierre and Miquelon",
+    "ZM": "Zambia",
+    "EH": "Western Sahara",
+    "EE": "Estonia",
+    "EG": "Egypt",
+    "ZA": "South Africa",
+    "EC": "Ecuador",
+    "IT": "Italy",
+    "VN": "Vietnam",
+    "SB": "Solomon Islands",
+    "ET": "Ethiopia",
+    "SO": "Somalia",
+    "ZW": "Zimbabwe",
+    "SA": "Saudi Arabia",
+    "ES": "Spain",
+    "ER": "Eritrea",
+    "ME": "Montenegro",
+    "MD": "Moldova",
+    "MG": "Madagascar",
+    "MF": "Saint Martin",
+    "MA": "Morocco",
+    "MC": "Monaco",
+    "UZ": "Uzbekistan",
+    "MM": "Myanmar",
+    "ML": "Mali",
+    "MO": "Macao",
+    "MN": "Mongolia",
+    "MH": "Marshall Islands",
+    "MK": "Macedonia",
+    "MU": "Mauritius",
+    "MT": "Malta",
+    "MW": "Malawi",
+    "MV": "Maldives",
+    "MQ": "Martinique",
+    "MP": "Northern Mariana Islands",
+    "MS": "Montserrat",
+    "MR": "Mauritania",
+    "IM": "Isle of Man",
+    "UG": "Uganda",
+    "TZ": "Tanzania",
+    "MY": "Malaysia",
+    "MX": "Mexico",
+    "IL": "Israel",
+    "FR": "France",
+    "IO": "British Indian Ocean Territory",
+    "SH": "Saint Helena",
+    "FI": "Finland",
+    "FJ": "Fiji",
+    "FK": "Falkland Islands",
+    "FM": "Micronesia",
+    "FO": "Faroe Islands",
+    "NI": "Nicaragua",
+    "NL": "Netherlands",
+    "NO": "Norway",
+    "NA": "Namibia",
+    "VU": "Vanuatu",
+    "NC": "New Caledonia",
+    "NE": "Niger",
+    "NF": "Norfolk Island",
+    "NG": "Nigeria",
+    "NZ": "New Zealand",
+    "NP": "Nepal",
+    "NR": "Nauru",
+    "NU": "Niue",
+    "CK": "Cook Islands",
+    "XK": "Kosovo",
+    "CI": "Ivory Coast",
+    "CH": "Switzerland",
+    "CO": "Colombia",
+    "CN": "China",
+    "CM": "Cameroon",
+    "CL": "Chile",
+    "CC": "Cocos Islands",
+    "CA": "Canada",
+    "CG": "Republic of the Congo",
+    "CF": "Central African Republic",
+    "CD": "Democratic Republic of the Congo",
+    "CZ": "Czech Republic",
+    "CY": "Cyprus",
+    "CX": "Christmas Island",
+    "CR": "Costa Rica",
+    "CW": "Curacao",
+    "CV": "Cape Verde",
+    "CU": "Cuba",
+    "SZ": "Swaziland",
+    "SY": "Syria",
+    "SX": "Sint Maarten",
+    "KG": "Kyrgyzstan",
+    "KE": "Kenya",
+    "SS": "South Sudan",
+    "SR": "Suriname",
+    "KI": "Kiribati",
+    "KH": "Cambodia",
+    "KN": "Saint Kitts and Nevis",
+    "KM": "Comoros",
+    "ST": "Sao Tome and Principe",
+    "SK": "Slovakia",
+    "KR": "South Korea",
+    "SI": "Slovenia",
+    "KP": "North Korea",
+    "KW": "Kuwait",
+    "SN": "Senegal",
+    "SM": "San Marino",
+    "SL": "Sierra Leone",
+    "SC": "Seychelles",
+    "KZ": "Kazakhstan",
+    "KY": "Cayman Islands",
+    "SG": "Singapore",
+    "SE": "Sweden",
+    "SD": "Sudan",
+    "DO": "Dominican Republic",
+    "DM": "Dominica",
+    "DJ": "Djibouti",
+    "DK": "Denmark",
+    "VG": "British Virgin Islands",
+    "DE": "Germany",
+    "YE": "Yemen",
+    "DZ": "Algeria",
+    "US": "United States",
+    "UY": "Uruguay",
+    "YT": "Mayotte",
+    "UM": "United States Minor Outlying Islands",
+    "LB": "Lebanon",
+    "LC": "Saint Lucia",
+    "LA": "Laos",
+    "TV": "Tuvalu",
+    "TW": "Taiwan",
+    "TT": "Trinidad and Tobago",
+    "TR": "Turkey",
+    "LK": "Sri Lanka",
+    "LI": "Liechtenstein",
+    "LV": "Latvia",
+    "TO": "Tonga",
+    "LT": "Lithuania",
+    "LU": "Luxembourg",
+    "LR": "Liberia",
+    "LS": "Lesotho",
+    "TH": "Thailand",
+    "TF": "French Southern Territories",
+    "TG": "Togo",
+    "TD": "Chad",
+    "TC": "Turks and Caicos Islands",
+    "LY": "Libya",
+    "VA": "Vatican",
+    "VC": "Saint Vincent and the Grenadines",
+    "AE": "United Arab Emirates",
+    "AD": "Andorra",
+    "AG": "Antigua and Barbuda",
+    "AF": "Afghanistan",
+    "AI": "Anguilla",
+    "VI": "U.S. Virgin Islands",
+    "IS": "Iceland",
+    "IR": "Iran",
+    "AM": "Armenia",
+    "AL": "Albania",
+    "AO": "Angola",
+    "AQ": "Antarctica",
+    "AS": "American Samoa",
+    "AR": "Argentina",
+    "AU": "Australia",
+    "AT": "Austria",
+    "AW": "Aruba",
+    "IN": "India",
+    "AX": "Aland Islands",
+    "AZ": "Azerbaijan",
+    "IE": "Ireland",
+    "ID": "Indonesia",
+    "UA": "Ukraine",
+    "QA": "Qatar",
+    "MZ": "Mozambique"
+}

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/components/components.css

@@ -509,7 +509,7 @@ circle-loader #spinner {
 
 .full-activity-header.transparent{
   background-color: transparent;
-  z-index: 1; transition: background-color 0.15s ease-in;
+  z-index: 1; transition: background-color 0.17s ease-in;
 
 }
 

app/src/main/assets/icons/404.svg

@@ -1,91 +0,0 @@
-<svg width="240" height="215" viewBox="0 0 240 215" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M229.597 107.354C229.597 166.644 181.533 214.708 122.244 214.708C62.9536 214.708 14.8896 166.644 14.8896 107.354C14.8896 48.064 62.9536 0 122.244 0C181.533 0 229.597 48.064 229.597 107.354C229.597 166.644 229.597 107.354 229.597 107.354Z" fill="url(#paint0_linear_9_632)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M74.4663 114.24H70.9023V119.731C70.9023 122.187 70.228 124.017 68.8795 125.318C67.5309 126.618 65.7489 127.244 63.5816 127.244C61.4143 127.244 59.6323 126.618 58.2837 125.318C56.9352 124.017 56.2609 122.187 56.2609 119.731V114.24H32.9503C30.9757 114.24 29.3863 113.662 28.2304 112.458C27.0745 111.254 26.4966 109.761 26.4966 107.979C26.4966 106.197 27.1227 104.367 28.3268 102.585L56.9834 61.6471C57.754 60.5394 58.7172 59.7206 59.8731 59.1908C61.029 58.661 62.2331 58.3721 63.5334 58.3721C65.5081 58.3721 67.2419 59.0463 68.735 60.3467C70.228 61.6471 70.9504 63.4773 70.9504 65.7891V102.778H74.5145C79.138 102.826 81.498 104.704 81.498 108.461C81.498 112.314 79.138 114.24 74.4663 114.24ZM56.3091 81.6827L41.6196 102.826H56.3091V81.6827Z" fill="url(#paint1_linear_9_632)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M205.42 114.24H201.856V119.731C201.856 122.187 201.181 124.017 199.833 125.318C198.484 126.618 196.702 127.244 194.535 127.244C192.368 127.244 190.586 126.618 189.237 125.318C187.889 124.017 187.214 122.187 187.214 119.731V114.24H163.856C161.881 114.24 160.292 113.662 159.136 112.458C157.98 111.254 157.402 109.761 157.402 107.979C157.402 106.197 158.028 104.367 159.232 102.585L187.889 61.6471C188.659 60.5394 189.622 59.7206 190.778 59.1908C191.934 58.661 193.138 58.3721 194.439 58.3721C196.413 58.3721 198.147 59.0463 199.64 60.3467C201.133 61.6471 201.856 63.4773 201.856 65.7891V102.778H205.42C210.091 102.826 212.451 104.704 212.451 108.461C212.451 112.314 210.091 114.24 205.42 114.24ZM187.263 81.6827L172.573 102.826H187.263V81.6827Z" fill="url(#paint2_linear_9_632)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M148.732 90.6901C148.732 107.129 135.406 120.454 118.968 120.454C102.53 120.454 89.2036 107.129 89.2036 90.6901C89.2036 74.2517 102.53 60.9258 118.968 60.9258C135.406 60.9258 148.732 74.2517 148.732 90.6901C148.732 107.129 148.732 90.6901 148.732 90.6901Z" fill="url(#paint3_linear_9_632)"/>
-<path d="M102.738 106.872C101.293 105.427 101.293 103.067 102.738 101.622L129.902 74.4587C131.346 73.0138 133.706 73.0138 135.151 74.4587C136.596 75.9035 136.596 78.2635 135.151 79.7083L108.036 106.92C107.313 107.643 106.35 107.98 105.387 107.98C104.424 107.98 103.509 107.594 102.738 106.872Z" fill="#7BBE7A"/>
-<path d="M36.4664 133.264C37.4778 124.98 42.6312 120.935 42.872 120.742L44.4132 122.765L43.6426 121.754L44.4132 122.765C44.365 122.813 39.8377 126.425 38.9708 133.602C38.0557 141.404 41.5716 150.362 49.4702 160.235L47.4956 161.873C39.1635 151.422 35.455 141.789 36.4664 133.264Z" fill="#BEC9DB"/>
-<path d="M44.6055 123.296L46.243 122.285C47.0618 121.755 47.2544 120.648 46.6765 119.877L46.4838 119.636C45.9059 118.914 44.7982 118.817 44.1239 119.443L42.679 120.744C41.9084 121.322 41.9084 122.526 42.679 123.152C43.2088 123.634 44.0276 123.682 44.6055 123.296Z" fill="#102C56"/>
-<path d="M65.2671 162.837C75.8628 155.95 82.0276 148.533 83.6169 140.779C85.0618 133.651 81.9313 128.883 81.8831 128.835L84.0022 127.39C84.1467 127.63 87.8071 133.121 86.1214 141.26C84.3875 149.737 77.8375 157.684 66.6638 165.004L65.2671 162.837Z" fill="#BEC9DB"/>
-<path d="M81.5941 129.267L80.3419 127.774C79.7157 127.004 79.9084 125.896 80.7272 125.318L81.0161 125.125C81.7867 124.595 82.8945 124.884 83.3279 125.703L84.2912 127.389C84.7728 128.256 84.3875 129.364 83.4724 129.749C82.7981 130.038 82.0275 129.845 81.5941 129.267Z" fill="#102C56"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M138.086 132.809C143.004 134.371 145.725 139.624 144.163 144.542C142.601 149.46 137.347 152.181 132.429 150.619C127.511 149.057 124.79 143.804 126.352 138.886C127.914 133.968 133.168 131.247 138.086 132.809C143.004 134.371 138.086 132.809 138.086 132.809Z" fill="url(#paint4_linear_9_632)"/>
-<path d="M92.6232 158.213L74.7068 183.595C72.1542 187.207 67.4824 188.604 63.3405 186.966C59.3911 185.425 56.983 181.524 57.3202 177.334L57.6091 173.288C59.4393 173.24 61.2695 172.758 62.8588 171.795C63.1478 171.602 63.4368 171.458 63.7257 171.265C66.0857 169.58 67.6269 167.075 68.0604 164.234C68.2049 163.27 67.5306 162.355 66.5673 162.163C65.6041 162.018 64.689 162.692 64.4963 163.656C64.2074 165.582 63.1478 167.22 61.6066 168.376C60.0654 169.483 58.1389 169.965 56.2124 169.628C52.2631 169.002 49.6142 165.293 50.2403 161.344C50.3848 160.381 49.7105 159.466 48.7472 159.273C47.784 159.128 46.8689 159.803 46.6763 160.766C45.8093 166.112 49.0362 171.121 53.9969 172.758L53.6598 177.093C53.2264 182.872 56.5496 188.17 61.9437 190.338C65.8449 191.879 70.0832 191.445 73.5027 189.423C75.0921 188.507 76.4888 187.207 77.5965 185.666L95.5129 160.284C103.363 149.207 116.126 142.994 129.708 143.765C130.72 143.813 131.538 143.042 131.587 142.079C131.683 141.116 130.96 140.249 129.949 140.201C115.163 139.382 101.196 146.125 92.6232 158.213Z" fill="#102C56"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M141.508 141.729C141.515 145.187 138.717 147.996 135.259 148.002C131.801 148.008 128.992 145.21 128.986 141.752C128.98 138.294 131.778 135.486 135.236 135.48C138.694 135.473 141.502 138.271 141.508 141.729C141.515 145.187 141.508 141.729 141.508 141.729Z" fill="#FFD18C"/>
-<path d="M240 142.319C240 142.319 227.044 155.708 217.171 160.621C207.298 165.533 200.603 165.726 200.603 165.726L168.671 156.286C168.671 156.238 191.452 151.759 209.513 135.528L240 142.319Z" fill="url(#paint5_linear_9_632)"/>
-<path d="M239.952 142.271C239.952 142.271 226.322 154.697 215.919 158.887C205.516 163.125 198.532 162.836 198.532 162.836L165.156 151.374C165.156 151.422 189.044 148.484 208.068 133.554L239.952 142.271Z" fill="url(#paint6_linear_9_632)"/>
-<path d="M152.826 39.5416L167.42 45.321C170.695 46.6214 172.284 50.3299 170.984 53.605C169.683 56.88 165.975 58.4694 162.7 57.169L148.107 51.3895C144.831 50.0409 143.242 46.3324 144.543 43.1056C145.843 39.8305 149.551 38.2412 152.826 39.5416Z" fill="url(#paint7_linear_9_632)"/>
-<path d="M167.372 45.2726L157.787 41.4678C161.062 42.7682 162.652 46.4767 161.351 49.7517C160.051 53.0267 156.342 54.6161 153.067 53.3157L162.652 57.1205C165.927 58.4209 169.635 56.8316 170.936 53.5565C172.236 50.2815 170.647 46.573 167.372 45.2726Z" fill="url(#paint8_linear_9_632)"/>
-<path d="M15.2743 122.766L26.448 139.912C28.9524 143.765 27.8929 148.919 24.0399 151.423C20.1869 153.927 15.0335 152.868 12.5291 149.015L1.3554 131.821C-1.14905 128.016 -0.0894749 122.863 3.76351 120.358C7.6165 117.854 12.7699 118.913 15.2743 122.766Z" fill="url(#paint9_linear_9_632)"/>
-<path d="M26.4481 139.864L19.1274 128.643C21.6319 132.496 20.5723 137.649 16.7193 140.153C12.8663 142.658 7.71294 141.598 5.2085 137.745L12.5292 148.967C15.0336 152.82 20.187 153.88 24.04 151.375C27.893 148.871 28.9525 143.717 26.4481 139.864Z" fill="url(#paint10_linear_9_632)"/>
-<path opacity="0.2" d="M87.0847 24.7556L85.5917 23.3108L91.6601 17.146L92.4789 17.9647C92.8642 18.3019 93.4421 18.3019 93.7793 17.9647C94.1164 17.5794 94.1164 17.0015 93.7793 16.6643L88.4814 11.4628C88.0961 11.1257 87.5182 11.1257 87.181 11.4628C86.8439 11.8481 86.8439 12.4261 87.181 12.7632L87.9998 13.582L81.9313 19.7467L80.4383 18.3019L80.1975 18.0611C79.8122 17.7239 79.2342 17.7239 78.8971 18.0611C78.56 18.4464 78.56 19.0243 78.8971 19.3614L79.1379 19.6023L61.1733 37.904C60.6917 38.3856 60.5954 39.108 60.8844 39.686L62.3292 42.4794L50.7221 54.3273C50.4813 54.5681 50.4813 54.9053 50.7221 55.1461C50.9629 55.3869 51.3482 55.3869 51.5409 55.1461L63.148 43.3463L65.9896 44.6949C66.6157 44.9838 67.3381 44.8393 67.7716 44.4059L85.7362 26.056L85.977 26.2968C86.3623 26.634 86.9402 26.634 87.2773 26.2968C87.7108 25.9115 87.7108 25.3336 87.3255 24.9964L87.0847 24.7556Z" fill="url(#paint11_linear_9_632)"/>
-<path opacity="0.2" d="M139.726 18.4462C139.1 17.483 138.859 16.2789 139.004 15.123L139.148 14.0153H139.293C139.678 14.0634 140.063 13.8226 140.111 13.3892L140.545 10.5476C140.593 10.1623 140.352 9.77699 139.919 9.72883L127.397 7.89866C127.011 7.85049 126.626 8.09131 126.578 8.52477L126.144 11.3663C126.096 11.7516 126.337 12.1369 126.77 12.1851H126.915L126.77 13.2928C126.578 14.4487 126 15.5083 125.133 16.2307L123.399 17.7238C122.869 18.1572 122.532 18.7833 122.436 19.5058L119.931 36.4589C119.739 37.6148 120.558 38.7226 121.762 38.9152L136.499 41.0825C137.655 41.2752 138.763 40.4564 138.956 39.2524L141.46 22.2992C141.508 21.6731 141.364 20.9507 140.978 20.3727L139.726 18.4462Z" fill="url(#paint12_linear_9_632)"/>
-<path opacity="0.2" d="M112.419 186.292C112.178 186.34 111.937 186.148 111.889 185.859L111.214 179.116C111.166 178.875 110.974 178.683 110.685 178.683L104.568 179.309C104.327 179.357 104.135 179.55 104.135 179.839L104.809 186.581C104.857 186.822 104.664 187.063 104.375 187.111L97.6327 187.785C97.3919 187.833 97.1992 188.026 97.1992 188.315L97.8253 194.432C97.8735 194.673 98.0661 194.865 98.3551 194.865L105.098 194.191C105.339 194.143 105.579 194.335 105.628 194.624L106.302 201.367C106.35 201.608 106.543 201.801 106.832 201.801L112.948 201.174C113.189 201.126 113.382 200.934 113.382 200.645L112.707 193.902C112.659 193.661 112.852 193.42 113.141 193.372L119.884 192.698C120.124 192.65 120.317 192.457 120.317 192.168L119.691 186.051C119.643 185.762 119.402 185.57 119.161 185.618L112.419 186.292Z" fill="url(#paint13_linear_9_632)"/>
-<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M153.867 169.22C155.796 170.399 156.404 172.919 155.226 174.848C154.047 176.777 151.527 177.386 149.598 176.207C147.668 175.028 147.06 172.508 148.239 170.579C149.418 168.65 151.937 168.041 153.867 169.22C155.796 170.399 153.867 169.22 153.867 169.22Z" fill="url(#paint14_linear_9_632)"/>
-<path opacity="0.2" d="M172.38 182.823L178.641 176.659C179.845 175.455 181.82 175.503 182.976 176.707C184.18 177.911 184.132 179.886 182.928 181.041L176.667 187.206C175.511 188.362 173.536 188.362 172.332 187.158C171.128 185.954 171.176 183.979 172.38 182.823Z" fill="url(#paint15_linear_9_632)"/>
-<defs>
-<linearGradient id="paint0_linear_9_632" x1="-16.0917" y1="0" x2="-16.0917" y2="276.67" gradientUnits="userSpaceOnUse">
-<stop stop-color="#74B973"/>
-<stop offset="1" stop-color="#F3FBF2"/>
-</linearGradient>
-<linearGradient id="paint1_linear_9_632" x1="26.4966" y1="58.3721" x2="26.4966" y2="127.244" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8CCC8B"/>
-<stop offset="1" stop-color="#74B973"/>
-</linearGradient>
-<linearGradient id="paint2_linear_9_632" x1="157.402" y1="58.3721" x2="157.402" y2="127.244" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8CCC8B"/>
-<stop offset="1" stop-color="#74B973"/>
-</linearGradient>
-<linearGradient id="paint3_linear_9_632" x1="83.5553" y1="58.1006" x2="77.9049" y2="128.926" gradientUnits="userSpaceOnUse">
-<stop stop-color="#B4EAB3"/>
-<stop offset="1" stop-color="#8CCC8B"/>
-</linearGradient>
-<linearGradient id="paint4_linear_9_632" x1="123.524" y1="147.791" x2="141.334" y2="153.447" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFA620"/>
-<stop offset="1" stop-color="#F39200"/>
-</linearGradient>
-<linearGradient id="paint5_linear_9_632" x1="176.67" y1="135.55" x2="173.458" y2="169.152" gradientUnits="userSpaceOnUse">
-<stop stop-color="#CBF1CA"/>
-<stop offset="1" stop-color="#ADE1AC"/>
-</linearGradient>
-<linearGradient id="paint6_linear_9_632" x1="173.543" y1="133.575" x2="170.658" y2="166.206" gradientUnits="userSpaceOnUse">
-<stop stop-color="#D9F8D9"/>
-<stop offset="1" stop-color="#C6F1C5"/>
-</linearGradient>
-<linearGradient id="paint7_linear_9_632" x1="144.089" y1="39.0879" x2="144.089" y2="57.6226" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8CCC8B"/>
-<stop offset="1" stop-color="#74B973"/>
-</linearGradient>
-<linearGradient id="paint8_linear_9_632" x1="153.067" y1="41.4678" x2="153.067" y2="57.5742" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFA620"/>
-<stop offset="1" stop-color="#F39200"/>
-</linearGradient>
-<linearGradient id="paint9_linear_9_632" x1="0" y1="119.003" x2="0" y2="152.778" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8CCC8B"/>
-<stop offset="1" stop-color="#74B973"/>
-</linearGradient>
-<linearGradient id="paint10_linear_9_632" x1="5.2085" y1="128.643" x2="5.2085" y2="152.731" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFA620"/>
-<stop offset="1" stop-color="#F39200"/>
-</linearGradient>
-<linearGradient id="paint11_linear_9_632" x1="59.7035" y1="3.78182" x2="34.1503" y2="73.128" gradientUnits="userSpaceOnUse">
-<stop stop-color="#85C284"/>
-<stop offset="1" stop-color="#85C284" stop-opacity="0.5"/>
-</linearGradient>
-<linearGradient id="paint12_linear_9_632" x1="130.843" y1="-1.2411" x2="104.636" y2="20.055" gradientUnits="userSpaceOnUse">
-<stop stop-color="#85C284"/>
-<stop offset="1" stop-color="#85C284" stop-opacity="0.5"/>
-</linearGradient>
-<linearGradient id="paint13_linear_9_632" x1="76.8493" y1="178.683" x2="76.8493" y2="242.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#85C284"/>
-<stop offset="1" stop-color="#85C284" stop-opacity="0.01"/>
-</linearGradient>
-<linearGradient id="paint14_linear_9_632" x1="145.379" y1="175.26" x2="154.741" y2="180.981" gradientUnits="userSpaceOnUse">
-<stop stop-color="#85C284"/>
-<stop offset="1" stop-color="#85C284" stop-opacity="0.01"/>
-</linearGradient>
-<linearGradient id="paint15_linear_9_632" x1="169.344" y1="175.779" x2="169.344" y2="192.246" gradientUnits="userSpaceOnUse">
-<stop stop-color="#85C284"/>
-<stop offset="1" stop-color="#85C284" stop-opacity="0.01"/>
-</linearGradient>
-</defs>
-</svg>

app/src/main/assets/icons/error-cat.json

@@ -0,0 +1 @@
+{"v":"5.4.4","fr":60,"ip":0,"op":241,"w":640,"h":640,"nm":"Sin-señal","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"thunderr Outlines 3","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.4],"y":[0]},"t":174,"s":[100],"e":[0]},{"t":181}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[72.257,51.454,0],"ix":2},"a":{"a":0,"k":[26.871,0.25,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":153,"s":[0,0,100],"e":[100,120,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":158,"s":[100,120,100],"e":[87.5,87.5,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":162,"s":[87.5,87.5,100],"e":[100,120,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":166,"s":[100,120,100],"e":[87.5,87.5,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":170,"s":[87.5,87.5,100],"e":[100,120,100]},{"t":174}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[11,-13.5],[-1.471,-13.5],[-11,13.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.6,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[25.991,20.75],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[16,-10],[3.529,-10],[6,-17],[-12,-17],[-16,-2.422],[-6,-2.526],[-6,17]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.925,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[20.991,17.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-4.63,-17],[-13.37,-2.422],[1.37,-2.526],[1.37,17],[10.9,-10],[13.37,-17]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[13.62,17.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":153,"op":549,"st":128,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"thunderr Outlines","parent":3,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.4],"y":[0]},"t":64,"s":[100],"e":[0]},{"t":71}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[52.757,51.454,0],"ix":2},"a":{"a":0,"k":[26.871,0.25,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":43,"s":[0,0,100],"e":[100,120,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":48,"s":[100,120,100],"e":[87.5,87.5,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":52,"s":[87.5,87.5,100],"e":[100,120,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":56,"s":[100,120,100],"e":[87.5,87.5,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":60,"s":[87.5,87.5,100],"e":[100,120,100]},{"t":64}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[11,-13.5],[-1.471,-13.5],[-11,13.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.6,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"Line truncated

app/src/main/assets/icons/very_hot.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><path fill="#ABABAB" fill-rule="evenodd" d="M35.577 4a6.5 6.5 0 0 0-6.5 6.5v19.358A9.971 9.971 0 0 0 26 37.076c0 5.523 4.477 10 10 10s10-4.477 10-10a9.97 9.97 0 0 0-3.077-7.215V10.5a6.5 6.5 0 0 0-6.5-6.5h-.846Z" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M36.001 6.513a3.75 3.75 0 0 0-3.75 3.75V31.27a6.923 6.923 0 1 0 7.5 0V10.262a3.75 3.75 0 0 0-3.75-3.75Z" clip-rule="evenodd"/><rect width="7.5" height="7.5" x="32.251" y="34.003" fill="#EA4335" rx="3.75"/><rect width="2.667" height="24" x="34.667" y="12" fill="#EA4335" rx="1.333"/><path fill="url(#a)" fill-rule="evenodd" d="M24.903 44.17a7.92 7.92 0 0 1-8.983-.996 7.918 7.918 0 0 0-4.67-1.934 7.918 7.918 0 0 1-7.363-7.363 7.919 7.919 0 0 0-1.935-4.67 7.918 7.918 0 0 1 0-10.413 7.919 7.919 0 0 0 1.935-4.67 7.918 7.918 0 0 1 7.363-7.363 7.919 7.919 0 0 0 4.67-1.934 7.918 7.918 0 0 1 10.413 0c.212.184.432.357.66.517a9.186 9.186 0 0 0-.779 3.718V27.62c-2.214 3.414-3.088 5.893-3.088 10.031 0 2.395.599 4.628 1.777 6.519Z" clip-rule="evenodd"/><defs><radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="rotate(130.956 15.583 12.847) scale(35.0892 47.2165)" gradientUnits="userSpaceOnUse"><stop offset=".064" stop-color="#FFD323"/><stop offset=".62" stop-color="#EA6A16"/><stop offset="1" stop-color="#EA4335"/></radialGradient></defs></svg>

app/src/main/assets/index.html

@@ -12,29 +12,30 @@
     <link rel="stylesheet" href="components/modal-ver.css">
     <link rel="stylesheet" href="ripple-files/ripple.css">
     <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>
 </head>
 
 <body>
 <div class="header-top" id="main-Header-Top">
+    <div class="header_hold">
     <div class="main-city" id="main-city">
-        <span icon-filled></span>
+        <button class="ripple-icon-btn regular" onclick="seeSelectedLocation()" ontouchstart="playEffect(this)"
+                style="z-index: 1;" ontouchend="playEffect2(this)">
+            <span class="ripple-effect-icon"></span>
+            <span icon-outlined style="opacity: 0.8;">location_on</span>
+        </button>
         <h2 id="city-name" style="margin-right: 3px;">
             <md-circular-progress indeterminate style="--md-circular-progress-size: 30px;"></md-circular-progress>
         </h2>
     </div>
     <div class="header_actions">
-        <button class="ripple-icon-btn focus regular" id="city-open" ontouchstart="playEffect(this)" disabled
-                ontouchend="playEffect2(this)">
-            <span class="ripple-effect-icon"></span>
-            <span icon-outlined>search</span>
-        </button>
-        <button class="ripple-icon-btn focus regular" onclick="refreshWeather()" ontouchstart="playEffect(this)" id="usage-popover-anchor"
+        <button class="ripple-icon-btn focus regular" onclick="refreshWeather()" ontouchstart="playEffect(this)" id="usage-popover-anchor" style="z-index: 1;"
                 ontouchend="playEffect2(this)">
             <span class="ripple-effect-icon"></span>
             <span icon-outlined>refresh</span>
         </button>
-        <button class="ripple-icon-btn focus regular" onclick="sendThemeToAndroid('OpenSettings')" ontouchstart="playEffect(this)"
+        <button class="ripple-icon-btn focus regular" onclick="sendThemeToAndroid('OpenSettings')" ontouchstart="playEffect(this)" style="z-index: 1;"
                 ontouchend="playEffect2(this)">
             <span class="ripple-effect-icon"></span>
             <span icon-outlined>Settings</span>
@@ -42,6 +43,21 @@
 
 
     </div>
+
+        <touch_search  id="city-open">
+        </touch_search>
+</div>
+
+    <selectLocationText hidden>
+        <button class="ripple-icon-btn regular" onclick="seeSelectedLocationClose()" ontouchstart="playEffect(this)"
+                style="z-index: 1;" ontouchend="playEffect2(this)">
+            <span class="ripple-effect-icon"></span>
+            <span icon-outlined>close</span>
+        </button>
+        <p id="SelectedLocationText"></p>
+    </selectLocationText>
+    <selectLocationTextOverlay hidden></selectLocationTextOverlay>
+
 </div>
 </div>
 <!-- current -->
@@ -49,21 +65,38 @@
     <div class="weather">
         <div class="main-weat" id="main-weather">
 
-            <div class="img-div">
-                <img id="weather-icon" src="weather-icons/11d.svg" alt="Weather Icon">
-            </div>
 
             <div class="current">
 
-                <div class="temp-main">
-                    <p id="temp">39 <span>°C</span></p>
+
+
+
+                <div class="left_current_weather">
+                    <now>Now</now>
+                    <div class="temp_img">
+                        <p id="temp"></p>
+                        <img id="weather-icon" src="weather-icons/11d.svg" alt="Weather Icon">
+                    </div>
+
+                    <div class="high_low_temp">
+                        <p><i icon-outlined>arrow_upward</i><span id="high_temp">34°</span></p>
+                        <p><i icon-outlined>arrow_downward</i><span id="low_temp">23°</span></p>
+                    </div>
                 </div>
 
-                <div class="disc-main">
-                    <p id="description">Scattered clouds </p>
+                <div class="disc_main">
+                    <p id="description"></p>
+                    <span id="feels_like_now">Feels like 30°</span>
                 </div>
 
 
+
+
+            </div>
+
+            <div class="dew_per">
+                <i icon-outlined>dew_point</i>
+                <p id="dew_percentage">10%</p>
             </div>
 
         </div>
@@ -72,11 +105,13 @@
             <img src="" id="froggie_imgs" alt="">
         </div>
 
-        <div class="excessiveHeat" style="margin-bottom: 0;" hidden>
+
+
+        <div class="excessiveHeat ripple_btn_low" style="margin-bottom: 5px; margin-top: 5px !important;" onclick="sendThemeToAndroid('OpenAlertsPage')" hidden>
             <div class="icon-container-excessiveHeat">
-                <md-icon icon-filled>emergency_heat_2</md-icon>
+                <md-icon icon-outlined>info</md-icon>
             </div>
-            <p id="excessiveHeatText">Excessive heat <span><text>Will feel like</text><span id="willFeelLike"> 45C</span></span></p>
+            <p id="excessiveHeatText">Excessive heat<text></text></p>
 
         </div>
 
@@ -88,20 +123,27 @@
 <!--        </div>-->
 
 
+
+        <div class="weatherComments weatherCommentsDiv">
+            <p id="weatherComments">-------</p>
+        </div>
+
+
         <div class="high-all">
             <div class="high-mini">
 
-                <div class="mini wind ripple_btn_low">
+                <div class="mini wind ripple_btn_low" onclick="ShowSnack('Wind speed', 2000, 3, 'none', ' ', 'no-up')">
                     <span icon-outlined>wind_power</span>
                     <p id="wind-speed"></p>
                 </div>
 
-                <div class="mini humidity ripple_btn_low">
-                    <span icon-filled class="direction" style="transition: transform 2s ease-out; transform: rotate(-180deg); color: var(--Secondary);">assistant_navigation</span>
-                    <p id="directionWind"></p>
+                <div class="mini snowAmount ripple_btn_low" onclick="ShowSnack('Snow amount', 2000, 3, 'none', ' ', 'no-up')">
+                    <span icon-outlined>ac_unit</span>
+                    <p id="SnowAmount"></p>
                 </div>
 
-                <div class="mini clouds ripple_btn_low">
+
+                <div class="mini clouds ripple_btn_low" onclick="ShowSnack('Cloudiness', 2000, 3, 'none', ' ', 'no-up')">
                     <span icon-outlined>cloud</span>
                     <p id="clouds"></p>
                 </div>
@@ -128,13 +170,22 @@
             <rainMeter>
                 <div class="h1">
                     <p>Hourly precipitation</p>
+                    <div class="ripple_btn_low" style="display: flex; align-items: center;" onclick="ShowSnack('Type of precipitation expected', 2000, 3, 'none', ' ', 'no-up')"><md-icon icon-outlined style="font-size: 18px;">info</md-icon><span id="precipitation_type" style="text-transform: capitalize;">Type: ---</span></div>
                 </div>
-                <div class="todaysAmount">
-                    <p>Current amount</p>
-                    <span id="AmountRainMM">1.5 mm</span>
+
+                <div class="wrap_cover_rain_meter" style="display: flex; align-items: center; justify-content: space-between;">
+                    <div class="todaysAmount">
+                        <p>Today's amount</p>
+                        <span id="AmountRainMM">1.5 mm</span>
+                    </div>
+
+                    <div class="todaysAmount" style="padding-left: 0; padding-right: 20px;">
+                        <p>Area coverage</p>
+                        <span id="RainHours">1.5 mm</span>
+                    </div>
+
                 </div>
 
-                <noRain hidden>No rain expected for now</noRain>
 
                 <rainMeterBar>
 
@@ -144,8 +195,8 @@
 
             <div class="all-5d">
                 <div class="h2">
-                    <p class="forecast_Text">Next 5 Days</p>
-                    <p class="icon_top">Forecast</p>
+                    <p class="forecast_Text">Forecast</p>
+                    <p class="icon_top">8-Days</p>
                 </div>
                 <div class="forecast-5day" id="forecast-5day">
 
@@ -196,12 +247,17 @@
                         <sun></sun>
                     </suntrackprogress>
                 </suntrack>
-                <br>
+
+                <div class="dayLengthWrap" style="display: flex; align-items: center; padding-left: 20px; gap: 5px; margin-top: 10px;">
+                    <span style="color: var(--On-Surface-Variant);">Day length: </span>
+                    <p id="DayLengthText" style="color: var(--On-Surface);"></p>
+                </div>
             </div>
 
-            <div class="setRiseDivWrap" style="border-radius: 5px 5px 10px 10px; margin-top: 5px;">
+            <div class="setRiseDivWrap" style="border-radius: 5px 5px 10px 10px; margin-top: 5px;" onclick="sendThemeToAndroid('OpenMoonPhasesPage')">
                 <div class="h1">
                     <p>Moon phase</p>
+                    <p class="" style="display: flex; align-items: center;">More <i icon-outlined style="font-size: 20px;">chevron_right</i></p>
                 </div>
 
                 <div class="moonSideWrap">
@@ -214,6 +270,9 @@
                         <div class="moonrise-Set">
                             <p>Moonrise: <span id="moonriseText"></span></p>
                             <p>Moonset: <span id="moonsetText"></span></p>
+                            <p>Illumination: <span id="MoonIllumination"></span></p>
+                            <p>Next phase: <span id="moonPhaseNext"></span></p>
+                            <p>Next phase in: <span id="moonPhaseDaysLeft"></span></p>
                         </div>
 
                     </div>
@@ -263,10 +322,48 @@
                 </div>
 
 
+                <div class="currentConditionItem">
+
+                    <div class="currentCondtionLabel">
+                        <span>Pressure</span>
+                    </div>
+
+                    <currentConditonIcon class="prssure_area">
+                        <md-circular-progress value="0.1" class="pressure_progress_main"></md-circular-progress>
+                        <md-circular-progress value="0.8" class="pressure_progress_bg"></md-circular-progress>
+                    </currentConditonIcon>
+                    <div class="text_press_lowHigh">
+                        <span>Low</span>
+                        <span>High</span>
+                    </div>
+
+
+                    <p id="pressure_text_main"></p>
+                </div>
+
+
+                <div class="currentConditionItem">
+
+                    <div class="currentCondtionLabel">
+                        <span>Wind direction</span>
+                    </div>
+
+                    <currentConditonIcon>
+                        <img src="icons/wind_direction.png" alt="" class="direction" width="70px" style="transition: transform 2s ease-out;">
+                    </currentConditonIcon>
+
+
+
+                    <p id="directionWind" style="padding-bottom: 0;"></p>
+                    <div class="windtypeName" style="display: flex; align-items: center; justify-content: flex-start; padding-left: 15px; color: var(--On-Surface-Variant); font-size: 13px;">
+                        <span id="windtype"></span>
+                    </div>
+                </div>
+
             </div>
 
 
-            <div class="all_air_quality" style="border-radius: 10px 10px 5px 5px; margin-bottom: 5px;">
+            <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>
                 </div>
@@ -285,6 +382,50 @@
                     </div>
                 </div>
 
+
+
+                <div class="air_quality_key_details">
+
+                    <div class="air_quality_key_item">
+                        <span>PM2.5</span>
+                        <air_key_color id="pm25_air_color" style="--key_air_color: red;"></air_key_color>
+                        <p id="pm25_air"></p>
+                    </div>
+
+                    <div class="air_quality_key_item">
+                        <span>NO</span>
+                        <air_key_color id="NO_air_color"></air_key_color>
+                        <p id="NO_air"></p>
+                    </div>
+
+                    <div class="air_quality_key_item">
+                        <span>NO2</span>
+                        <air_key_color id="NO2_air_color"></air_key_color>
+                        <p id="NO2_air"></p>
+                    </div>
+
+                    <div class="air_quality_key_item">
+                        <span>SO2</span>
+                        <air_key_color id="SO2_air_color"></air_key_color>
+                        <p id="SO2_air"></p>
+                    </div>
+
+                    <div class="air_quality_key_item">
+                        <span>O3</span>
+                        <air_key_color id="O3_air_color"></air_key_color>
+                        <p id="O3_air"></p>
+                    </div>
+
+
+                    <div class="air_quality_key_item">
+                        <span>PM10</span>
+                        <air_key_color id="pm10_air_color"></air_key_color>
+                        <p id="pm10_air"></p>
+                    </div>
+
+                </div>
+
+
             </div>
 
             <div class="all_air_quality" style="border-radius: 5px 5px 10px 10px; margin-top: 0px;">
@@ -344,6 +485,12 @@
             <span class="ripple-effect-icon"></span>
             <span icon-outlined>close</span>
         </button>
+
+        <button class="ripple-icon-btn focus regular" id="openMapPicker" ontouchstart="playEffect(this)"
+                ontouchend="playEffect2(this)">
+            <span class="ripple-effect-icon"></span>
+            <span icon-outlined>map</span>
+        </button>
     </div>
     <div class="modal-content" id="modal-content">
         <div class="city-list" id="city-list">
@@ -352,7 +499,7 @@
 
         <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>
-            <div class="currentLocations" id="currentLocations">
+            <div class="currentLocations ripple_btn_low" id="currentLocations" onclick="getCurrentLocationWeather(); window.history.back()">
                 <div class="currentSearchImg">
                     <img src="" id="currentSearchImg" alt=""> </div>
                 <currentLocationNames>
@@ -362,12 +509,17 @@
             </div>
         </div>
 
-        <div class="full_Wrap_map">
-            <p class="title" style="display: flex; align-items: center; gap: 10px;"><md-icon icon-outlined>map</md-icon>Pick from the map</p>
-            <div class="map_wrap">
-                <div id="map"></div></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>
+
+            <savedLocationsHolder>
+
+
+
+            </savedLocationsHolder>
 
         </div>
+
     </div>
 </div>
 <!-- loader -->
@@ -376,7 +528,7 @@
     <md-linear-progress indeterminate style="width: 100%;"></md-linear-progress>
 </div>
 
-<div class="fab-holder">
+<div class="fab-holder" hidden>
     <md-fab variant="primary" onclick="getCurrentLocationWeather()">
         <md-icon icon-outlined slot="icon">my_location</md-icon>
     </md-fab>
@@ -386,8 +538,9 @@
 <div id="toast-container" class="toast-container"></div>
 
 <div class="no_internet_error" hidden>
-    <div class="img_wrap404">
-        <img src="icons/404.svg" alt="">
+    <div class="img_wrap404" >
+        <!-- <img src="icons/404.svg" alt=""> -->
+        <div id="error_img_cat" style="height: 330px;"></div>
     </div>
 
     <div class="text_content_error">
@@ -441,7 +594,7 @@
                 <md-filter-chip label="Clouds" onclick="Open_RefreshLiveMap('clouds');toggleMapTypeChips(this);" name="MapType"></md-filter-chip>
                 <md-filter-chip label="Snow" onclick="Open_RefreshLiveMap('snow'); toggleMapTypeChips(this);" name="MapType"></md-filter-chip>
                 <md-filter-chip label="Wind" onclick="Open_RefreshLiveMap('wind_new');toggleMapTypeChips(this);" name="MapType"></md-filter-chip>
-                <md-filter-chip label="Temperature" onclick="Open_RefreshLiveMap('temp_new');toggleMapTypeChips(this);" name="MapType" selected></md-filter-chip>
+                <md-filter-chip label="Temperature" onclick="Open_RefreshLiveMap('temp_new');toggleMapTypeChips(this);" name="MapType" style="pointer-events: none;" selected></md-filter-chip>
             </md-chip-set>
         </div>
     </div>
@@ -449,6 +602,28 @@
 
 </div>
 
+
+<div class="map_picker" hidden>
+    <div class="topLocationPickerActions">
+        <button class="ripple-icon-btn focus regular" onclick="window.history.back()"
+                ontouchstart="playEffect(this)" ontouchend="playEffect2(this)">
+            <span class="ripple-effect-icon"></span>
+            <span icon-outlined>arrow_back</span>
+        </button>
+        <p>Pick a location</p>
+    </div>
+
+
+    <div class="map_pick_holder">
+        <div class="map_wrap">
+            <div id="map"></div>
+        </div>
+
+    </div>
+
+</div>
+
+
 <script>
 
 
@@ -502,20 +677,24 @@ document.getElementById('clearCityInput').addEventListener('click', () =>{
 
 
 
+
 function checkNoInternet(){
         if(navigator.onLine){
             document.querySelector('.no_internet_error').hidden = true;
+            document.getElementById('error_img_cat').innerHTML = ''
 
         } else{
-            document.querySelector('.no_internet_error').hidden = false;
+            ShowError()
         }
     }
-
     checkNoInternet()
 
 
-
-
+    document.getElementById('currentLocations').addEventListener('click', ()=>{
+        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;
+    });
     </script>
 
 
@@ -529,6 +708,9 @@ function checkNoInternet(){
 <script src="modules/scroll.js"></script>
 <script src="modules/ripple_acc.js"></script>
 <script src="app/navigate.js"></script>
+<script src="app/country-list.js"></script>
+
+
 </body>
 
 </html>

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

@@ -0,0 +1,9 @@
+!function(t,e){"function"==typeof define&&define.amd?define(e):"object"==typeof module&&module.exports?module.exports=e():t.bodymovin=e()}(window,function(){function ProjectInterface(){return{}}function roundValues(t){bm_rnd=t?Math.round:function(t){return t}}function roundTo2Decimals(t){return Math.round(1e4*t)/1e4}function roundTo3Decimals(t){return Math.round(100*t)/100}function styleDiv(t){t.style.position="absolute",t.style.top=0,t.style.left=0,t.style.display="block",t.style.transformOrigin=t.style.webkitTransformOrigin="0 0",t.style.backfaceVisibility=t.style.webkitBackfaceVisibility="visible",t.style.transformStyle=t.style.webkitTransformStyle=t.style.mozTransformStyle="preserve-3d"}function styleUnselectableDiv(t){t.style.userSelect="none",t.style.MozUserSelect="none",t.style.webkitUserSelect="none",t.style.oUserSelect="none"}function BMEnterFrameEvent(t,e,r,s){this.type=t,this.currentTime=e,this.totalTime=r,this.direction=0>s?-1:1}function BMCompleteEvent(t,e){this.type=t,this.direction=0>e?-1:1}function BMCompleteLoopEvent(t,e,r,s){this.type=t,this.currentLoop=e,this.totalLoops=r,this.direction=0>s?-1:1}function BMSegmentStartEvent(t,e,r){this.type=t,this.firstFrame=e,this.totalFrames=r}function BMDestroyEvent(t,e){this.type=t,this.target=e}function _addEventListener(t,e){this._cbs[t]||(this._cbs[t]=[]),this._cbs[t].push(e)}function _removeEventListener(t,e){if(e){if(this._cbs[t]){for(var r=0,s=this._cbs[t].length;s>r;)this._cbs[t][r]===e&&(this._cbs[t].splice(r,1),r-=1,s-=1),r+=1;this._cbs[t].length||(this._cbs[t]=null)}}else this._cbs[t]=null}function _triggerEvent(t,e){if(this._cbs[t])for(var r=this._cbs[t].length,s=0;r>s;s++)this._cbs[t][s](e)}function randomString(t,e){void 0===e&&(e="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890");var r,s="";for(r=t;r>0;--r)s+=e[Math.round(Math.random()*(e.length-1))];return s}function HSVtoRGB(t,e,r){var s,i,a,n,o,h,l,p;switch(1===arguments.length&&(e=t.s,r=t.v,t=t.h),n=Math.floor(6*t),o=6*t-n,h=r*(1-e),l=r*(1-o*e),p=r*(1-(1-o)*e),n%6){case 0:s=r,i=p,a=h;break;case 1:s=l,i=r,a=h;break;case 2:s=h,i=r,a=p;break;case 3:s=h,i=l,a=r;break;case 4:s=p,i=h,a=r;break;case 5:s=r,i=h,a=l}return[s,i,a]}function RGBtoHSV(t,e,r){1===arguments.length&&(e=t.g,r=t.b,t=t.r);var s,i=Math.max(t,e,r),a=Math.min(t,e,r),n=i-a,o=0===i?0:n/i,h=i/255;switch(i){case a:s=0;break;case t:s=e-r+n*(r>e?6:0),s/=6*n;break;case e:s=r-t+2*n,s/=6*n;break;case r:s=t-e+4*n,s/=6*n}return[s,o,h]}function addSaturationToRGB(t,e){var r=RGBtoHSV(255*t[0],255*t[1],255*t[2]);return r[1]+=e,r[1]>1?r[1]=1:r[1]<=0&&(r[1]=0),HSVtoRGB(r[0],r[1],r[2])}function addBrightnessToRGB(t,e){var r=RGBtoHSV(255*t[0],255*t[1],255*t[2]);return r[2]+=e,r[2]>1?r[2]=1:r[2]<0&&(r[2]=0),HSVtoRGB(r[0],r[1],r[2])}function addHueToRGB(t,e){var r=RGBtoHSV(255*t[0],255*t[1],255*t[2]);return r[0]+=e/360,r[0]>1?r[0]-=1:r[0]<0&&(r[0]+=1),HSVtoRGB(r[0],r[1],r[2])}function componentToHex(t){var e=t.toString(16);return 1==e.length?"0"+e:e}function fillToRgba(t,e){if(!cachedColors[t]){var r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);cachedColors[t]=parseInt(r[1],16)+","+parseInt(r[2],16)+","+parseInt(r[3],16)}return"rgba("+cachedColors[t]+","+e+")"}function RenderedFrame(t,e){this.tr=t,this.o=e}function LetterProps(t,e,r,s,i,a){this.o=t,this.sw=e,this.sc=r,this.fc=s,this.m=i,this.props=a}function iterateDynamicProperties(t){var e,r=this.dynamicProperties;for(e=0;r>e;e+=1)this.dynamicProperties[e].getValue(t)}function reversePath(t){var e,r,s=[],i=[],a=[],n={},o=0;t.c&&(s[0]=t.o[0],i[0]=t.i[0],a[0]=t.v[0],o=1),r=t.i.length;var h=r-1;for(e=o;r>e;e+=1)s.push(t.o[h]),i.push(t.i[h]),a.push(t.v[h]),h-=1;return n.i=s,n.o=i,n.v=a,n}function Matrix(){}function matrixManagerFunction(){var t=new Matrix,e=function(e,r,s,i,a){return t.reset().translate(i,a).rotate(e).scale(r,s).toCSS()},r=function(t){return e(t.tr.r[2],t.tr.s[0],t.tr.s[1],t.tr.p[0],t.tr.p[1])};return{getMatrix:r}}function createElement(t,e,r){if(!e){var s=Object.create(t.prototype,r),i={};return s&&"[object Function]"===i.toString.call(s.init)&&s.init(),s}e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.prototype._parent=t.prototype}function extendPrototype(t,e){for(var r in t.prototype)t.prototype.hasOwnProperty(r)&&(e.prototype[r]=t.prototype[r])}function bezFunction(){function t(t,e,r,s,i,a){var n=t*s+e*i+r*a-i*s-a*t-r*e;return n>-1e-4&&1e-4>n}function e(e,r,s,i,a,n,o,h,l){return t(e,r,i,a,o,h)&&t(e,s,i,n,o,l)}function r(t){this.segmentLength=0,this.points=new Array(t)}function s(t,e){this.partialLength=t,this.point=e}function i(t,e){var r=e.segments,s=r.length,i=bm_floor((s-1)*t),a=t*e.addedLength,n=0;if(a==r[i].l)return r[i].p;for(var o=r[i].l>a?-1:1,h=!0;h;)r[i].l<=a&&r[i+1].l>a?(n=(a-r[i].l)/(r[i+1].l-r[i].l),h=!1):i+=o,(0>i||i>=s-1)&&(h=!1);return r[i].p+(r[i+1].p-r[i].p)*n}function a(){this.pt1=new Array(2),this.pt2=new Array(2),this.pt3=new Array(2),this.pt4=new Array(2)}function n(t,e,r,s,n,o,h){var l=new a;n=0>n?0:n>1?1:n;vaLine truncated
+this.props[4]=0,this.props[5]=1,this.props[6]=0,this.props[7]=0,this.props[8]=0,this.props[9]=0,this.props[10]=1,this.props[11]=0,this.props[12]=0,this.props[13]=0,this.props[14]=0,this.props[15]=1,this}function e(t){if(0===t)return this;var e=Math.cos(t),r=Math.sin(t);return this._t(e,-r,0,0,r,e,0,0,0,0,1,0,0,0,0,1)}function r(t){if(0===t)return this;var e=Math.cos(t),r=Math.sin(t);return this._t(1,0,0,0,0,e,-r,0,0,r,e,0,0,0,0,1)}function s(t){if(0===t)return this;var e=Math.cos(t),r=Math.sin(t);return this._t(e,0,r,0,0,1,0,0,-r,0,e,0,0,0,0,1)}function i(t){if(0===t)return this;var e=Math.cos(t),r=Math.sin(t);return this._t(e,-r,0,0,r,e,0,0,0,0,1,0,0,0,0,1)}function a(t,e){return this._t(1,e,t,1,0,0)}function n(t,e){return this.shear(Math.tan(t),Math.tan(e))}function o(t,e){var r=Math.cos(e),s=Math.sin(e);return this._t(r,s,0,0,-s,r,0,0,0,0,1,0,0,0,0,1)._t(1,0,0,0,Math.tan(t),1,0,0,0,0,1,0,0,0,0,1)._t(r,-s,0,0,s,r,0,0,0,0,1,0,0,0,0,1)}function h(t,e,r){return r=isNaN(r)?1:r,1==t&&1==e&&1==r?this:this._t(t,0,0,0,0,e,0,0,0,0,r,0,0,0,0,1)}function l(t,e,r,s,i,a,n,o,h,l,p,m,f,c,d,u){return this.props[0]=t,this.props[1]=e,this.props[2]=r,this.props[3]=s,this.props[4]=i,this.props[5]=a,this.props[6]=n,this.props[7]=o,this.props[8]=h,this.props[9]=l,this.props[10]=p,this.props[11]=m,this.props[12]=f,this.props[13]=c,this.props[14]=d,this.props[15]=u,this}function p(t,e,r){return r=r||0,0!==t||0!==e||0!==r?this._t(1,0,0,0,0,1,0,0,0,0,1,0,t,e,r,1):this}function m(t,e,r,s,i,a,n,o,h,l,p,m,f,c,d,u){if(1===t&&0===e&&0===r&&0===s&&0===i&&1===a&&0===n&&0===o&&0===h&&0===l&&1===p&&0===m)return(0!==f||0!==c||0!==d)&&(this.props[12]=this.props[12]*t+this.props[13]*i+this.props[14]*h+this.props[15]*f,this.props[13]=this.props[12]*e+this.props[13]*a+this.props[14]*l+this.props[15]*c,this.props[14]=this.props[12]*r+this.props[13]*n+this.props[14]*p+this.props[15]*d,this.props[15]=this.props[12]*s+this.props[13]*o+this.props[14]*m+this.props[15]*u),this;var y=this.props[0],g=this.props[1],v=this.props[2],b=this.props[3],E=this.props[4],P=this.props[5],x=this.props[6],S=this.props[7],C=this.props[8],k=this.props[9],M=this.props[10],A=this.props[11],D=this.props[12],T=this.props[13],w=this.props[14],F=this.props[15];return this.props[0]=y*t+g*i+v*h+b*f,this.props[1]=y*e+g*a+v*l+b*c,this.props[2]=y*r+g*n+v*p+b*d,this.props[3]=y*s+g*o+v*m+b*u,this.props[4]=E*t+P*i+x*h+S*f,this.props[5]=E*e+P*a+x*l+S*c,this.props[6]=E*r+P*n+x*p+S*d,this.props[7]=E*s+P*o+x*m+S*u,this.props[8]=C*t+k*i+M*h+A*f,this.props[9]=C*e+k*a+M*l+A*c,this.props[10]=C*r+k*n+M*p+A*d,this.props[11]=C*s+k*o+M*m+A*u,this.props[12]=D*t+T*i+w*h+F*f,this.props[13]=D*e+T*a+w*l+F*c,this.props[14]=D*r+T*n+w*p+F*d,this.props[15]=D*s+T*o+w*m+F*u,this}function f(t){var e;for(e=0;16>e;e+=1)t.props[e]=this.props[e]}function c(t){var e;for(e=0;16>e;e+=1)this.props[e]=t[e]}function d(t,e,r){return{x:t*this.props[0]+e*this.props[4]+r*this.props[8]+this.props[12],y:t*this.props[1]+e*this.props[5]+r*this.props[9]+this.props[13],z:t*this.props[2]+e*this.props[6]+r*this.props[10]+this.props[14]}}function u(t,e,r){return t*this.props[0]+e*this.props[4]+r*this.props[8]+this.props[12]}function y(t,e,r){return t*this.props[1]+e*this.props[5]+r*this.props[9]+this.props[13]}function g(t,e,r){return t*this.props[2]+e*this.props[6]+r*this.props[10]+this.props[14]}function v(t){var e,r=this.props[0]*this.props[5]-this.props[1]*this.props[4],s=this.props[5]/r,i=-this.props[1]/r,a=-this.props[4]/r,n=this.props[0]/r,o=(this.props[4]*this.props[13]-this.props[5]*this.props[12])/r,h=-(this.props[0]*this.props[13]-this.props[1]*this.props[12])/r,l=t.length,p=[];for(e=0;l>e;e+=1)p[e]=[t[e][0]*s+t[e][1]*a+o,t[e][0]*i+t[e][1]*n+h,0];return p}function b(t,e,r,s){if(s&&2===s){var i=point_pool.newPoint();return i[0]=t*this.props[0]+e*this.props[4]+r*this.props[8]+this.props[12],i[1]=t*this.props[1]+e*this.props[5]+r*this.props[9]+this.props[13],i}return[t*this.props[0]+e*this.props[4]+r*this.props[8]+this.props[12],t*this.props[1]+e*this.props[5]+r*this.props[9]+this.props[13],t*this.props[2]+e*this.props[6]+r*this.props[10]+this.props[14]]}function E(t,e){return bm_rnd(t*this.props[0]+e*this.props[4]+this.props[12])+","+bm_rnd(t*this.props[1]+e*this.props[5]+this.props[13])}function P(){return[this.props[0],this.props[1],this.props[2],this.props[3],this.props[4],this.props[5],this.props[6],this.props[7],this.props[8],this.props[9],this.props[10],this.props[11],this.props[12],this.props[13],this.props[14],this.props[15]]}function x(){return isSafari?"matrix3d("+roundTo2Decimals(this.props[0])+","+roundTo2Decimals(this.props[1])+","+roundTo2Decimals(this.props[2])+","+roundTo2Decimals(this.props[3])+","+roundTo2Decimals(this.props[4])+","+roundTo2Decimals(this.props[5])+","+roundTo2Decimals(this.props[6])+","+roundTo2Decimals(this.props[7])+","+roundTo2Decimals(this.props[8])+","+roundTo2Decimals(this.props[9])+","+roundTo2Decimals(this.props[10])+","+roundTo2Decimals(this.props[11])+","+roundTo2Decimals(tLine truncated
+this.v.o[0][0]=t-r*s,this.v.o[0][1]=e-i,this.v.o[1][0]=t-r,this.v.o[1][1]=e+i*s,this.v.o[2][0]=t+r*s,this.v.o[2][1]=e+i,this.v.o[3][0]=t+r,this.v.o[3][1]=e-i*s)}function e(t){var e,r=this.dynamicProperties.length;if(this.elem.globalData.frameId!==this.frameId){for(this.mdf=!1,this.frameId=this.elem.globalData.frameId,e=0;r>e;e+=1)this.dynamicProperties[e].getValue(t),this.dynamicProperties[e].mdf&&(this.mdf=!0);this.mdf&&this.convertEllToPath()}}var s=roundCorner;return function(s,i){this.v=shape_pool.newShape(),this.v.setPathData(!0,4),this.localShapeCollection=shapeCollection_pool.newShapeCollection(),this.paths=this.localShapeCollection,this.localShapeCollection.addShape(this.v),this.d=i.d,this.dynamicProperties=[],this.elem=s,this.comp=s.comp,this.frameId=-1,this.mdf=!1,this.getValue=e,this.convertEllToPath=t,this.reset=r,this.p=PropertyFactory.getProp(s,i.p,1,0,this.dynamicProperties),this.s=PropertyFactory.getProp(s,i.s,1,0,this.dynamicProperties),this.dynamicProperties.length?this.k=!0:this.convertEllToPath()}}(),h=function(){function t(){var t,e=Math.floor(this.pt.v),r=2*Math.PI/e,s=this.or.v,i=this.os.v,a=2*Math.PI*s/(4*e),n=-Math.PI/2,o=3===this.data.d?-1:1;for(n+=this.r.v,this.v._length=0,t=0;e>t;t+=1){var h=s*Math.cos(n),l=s*Math.sin(n),p=0===h&&0===l?0:l/Math.sqrt(h*h+l*l),m=0===h&&0===l?0:-h/Math.sqrt(h*h+l*l);h+=+this.p.v[0],l+=+this.p.v[1],this.v.setTripleAt(h,l,h-p*a*i*o,l-m*a*i*o,h+p*a*i*o,l+m*a*i*o,t,!0),n+=r*o}this.paths.length=0,this.paths[0]=this.v}function e(){var t,e,r,s,i=2*Math.floor(this.pt.v),a=2*Math.PI/i,n=!0,o=this.or.v,h=this.ir.v,l=this.os.v,p=this.is.v,m=2*Math.PI*o/(2*i),f=2*Math.PI*h/(2*i),c=-Math.PI/2;c+=this.r.v;var d=3===this.data.d?-1:1;for(this.v._length=0,t=0;i>t;t+=1){e=n?o:h,r=n?l:p,s=n?m:f;var u=e*Math.cos(c),y=e*Math.sin(c),g=0===u&&0===y?0:y/Math.sqrt(u*u+y*y),v=0===u&&0===y?0:-u/Math.sqrt(u*u+y*y);u+=+this.p.v[0],y+=+this.p.v[1],this.v.setTripleAt(u,y,u-g*s*r*d,y-v*s*r*d,u+g*s*r*d,y+v*s*r*d,t,!0),n=!n,c+=a*d}}function s(){if(this.elem.globalData.frameId!==this.frameId){this.mdf=!1,this.frameId=this.elem.globalData.frameId;var t,e=this.dynamicProperties.length;for(t=0;e>t;t+=1)this.dynamicProperties[t].getValue(),this.dynamicProperties[t].mdf&&(this.mdf=!0);this.mdf&&this.convertToPath()}}return function(i,a){this.v=shape_pool.newShape(),this.v.setPathData(!0,0),this.elem=i,this.comp=i.comp,this.data=a,this.frameId=-1,this.d=a.d,this.dynamicProperties=[],this.mdf=!1,this.getValue=s,this.reset=r,1===a.sy?(this.ir=PropertyFactory.getProp(i,a.ir,0,0,this.dynamicProperties),this.is=PropertyFactory.getProp(i,a.is,0,.01,this.dynamicProperties),this.convertToPath=e):this.convertToPath=t,this.pt=PropertyFactory.getProp(i,a.pt,0,0,this.dynamicProperties),this.p=PropertyFactory.getProp(i,a.p,1,0,this.dynamicProperties),this.r=PropertyFactory.getProp(i,a.r,0,degToRads,this.dynamicProperties),this.or=PropertyFactory.getProp(i,a.or,0,0,this.dynamicProperties),this.os=PropertyFactory.getProp(i,a.os,0,.01,this.dynamicProperties),this.localShapeCollection=shapeCollection_pool.newShapeCollection(),this.localShapeCollection.addShape(this.v),this.paths=this.localShapeCollection,this.dynamicProperties.length?this.k=!0:this.convertToPath()}}(),l=function(){function t(t){if(this.elem.globalData.frameId!==this.frameId){this.mdf=!1,this.frameId=this.elem.globalData.frameId;var e,r=this.dynamicProperties.length;for(e=0;r>e;e+=1)this.dynamicProperties[e].getValue(t),this.dynamicProperties[e].mdf&&(this.mdf=!0);this.mdf&&this.convertRectToPath()}}function e(){var t=this.p.v[0],e=this.p.v[1],r=this.s.v[0]/2,s=this.s.v[1]/2,i=bm_min(r,s,this.r.v),a=i*(1-roundCorner);this.v._length=0,2===this.d||1===this.d?(this.v.setTripleAt(t+r,e-s+i,t+r,e-s+i,t+r,e-s+a,0,!0),this.v.setTripleAt(t+r,e+s-i,t+r,e+s-a,t+r,e+s-i,1,!0),0!==i?(this.v.setTripleAt(t+r-i,e+s,t+r-i,e+s,t+r-a,e+s,2,!0),this.v.setTripleAt(t-r+i,e+s,t-r+a,e+s,t-r+i,e+s,3,!0),this.v.setTripleAt(t-r,e+s-i,t-r,e+s-i,t-r,e+s-a,4,!0),this.v.setTripleAt(t-r,e-s+i,t-r,e-s+a,t-r,e-s+i,5,!0),this.v.setTripleAt(t-r+i,e-s,t-r+i,e-s,t-r+a,e-s,6,!0),this.v.setTripleAt(t+r-i,e-s,t+r-a,e-s,t+r-i,e-s,7,!0)):(this.v.setTripleAt(t-r,e+s,t-r+a,e+s,t-r,e+s,2),this.v.setTripleAt(t-r,e-s,t-r,e-s+a,t-r,e-s,3))):(this.v.setTripleAt(t+r,e-s+i,t+r,e-s+a,t+r,e-s+i,0,!0),0!==i?(this.v.setTripleAt(t+r-i,e-s,t+r-i,e-s,t+r-a,e-s,1,!0),this.v.setTripleAt(t-r+i,e-s,t-r+a,e-s,t-r+i,e-s,2,!0),this.v.setTripleAt(t-r,e-s+i,t-r,e-s+i,t-r,e-s+a,3,!0),this.v.setTripleAt(t-r,e+s-i,t-r,e+s-a,t-r,e+s-i,4,!0),this.v.setTripleAt(t-r+i,e+s,t-r+i,e+s,t-r+a,e+s,5,!0),this.v.setTripleAt(t+r-i,e+s,t+r-a,e+s,t+r-i,e+s,6,!0),this.v.setTripleAt(t+r,e+s-i,t+r,e+s-i,t+r,e+s-a,7,!0)):(this.v.setTripleAt(t-r,e-s,t-r+a,e-s,t-r,e-s,1,!0),this.v.setTripleAt(t-r,e+s,t-r,e+s-a,t-r,e+s,2,!0),this.v.setTripleAt(t+r,e+s,t+r-a,e+s,t+r,e+s,3,!0)))}return function(s,i){this.v=shape_pool.newShape(),this.v.c=!0,this.localShapeCollection=shapeCollection_pool.newShapeCollection(),this.localShapeCollectionLine truncated
+w:this.data.textData.width,h:this.data.textData.height}:{w:this.data.width,h:this.data.height}},BaseElement.prototype.hide=function(){},BaseElement.prototype.mHelper=new Matrix,createElement(BaseElement,SVGBaseElement),SVGBaseElement.prototype.createElements=function(){this.layerElement=document.createElementNS(svgNS,"g"),this.transformedElement=this.layerElement,this.data.hasMask&&(this.maskedElement=this.layerElement);var t=null;if(this.data.td){if(3==this.data.td||1==this.data.td){var e=document.createElementNS(svgNS,"mask");if(e.setAttribute("id",this.layerId),e.setAttribute("mask-type",3==this.data.td?"luminance":"alpha"),e.appendChild(this.layerElement),t=e,this.globalData.defs.appendChild(e),!featureSupport.maskType&&1==this.data.td){e.setAttribute("mask-type","luminance");var r=randomString(10),s=filtersFactory.createFilter(r);this.globalData.defs.appendChild(s),s.appendChild(filtersFactory.createAlphaToLuminanceFilter());var i=document.createElementNS(svgNS,"g");i.appendChild(this.layerElement),t=i,e.appendChild(i),i.setAttribute("filter","url(#"+r+")")}}else if(2==this.data.td){var a=document.createElementNS(svgNS,"mask");a.setAttribute("id",this.layerId),a.setAttribute("mask-type","alpha");var n=document.createElementNS(svgNS,"g");a.appendChild(n);var r=randomString(10),s=filtersFactory.createFilter(r),o=document.createElementNS(svgNS,"feColorMatrix");o.setAttribute("type","matrix"),o.setAttribute("color-interpolation-filters","sRGB"),o.setAttribute("values","1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 -1 1"),s.appendChild(o),this.globalData.defs.appendChild(s);var h=document.createElementNS(svgNS,"rect");if(h.setAttribute("width",this.comp.data.w),h.setAttribute("height",this.comp.data.h),h.setAttribute("x","0"),h.setAttribute("y","0"),h.setAttribute("fill","#ffffff"),h.setAttribute("opacity","0"),n.setAttribute("filter","url(#"+r+")"),n.appendChild(h),n.appendChild(this.layerElement),t=n,!featureSupport.maskType){a.setAttribute("mask-type","luminance"),s.appendChild(filtersFactory.createAlphaToLuminanceFilter());var i=document.createElementNS(svgNS,"g");n.appendChild(h),i.appendChild(this.layerElement),t=i,n.appendChild(i)}this.globalData.defs.appendChild(a)}}else(this.data.hasMask||this.data.tt)&&this.data.tt?(this.matteElement=document.createElementNS(svgNS,"g"),this.matteElement.appendChild(this.layerElement),t=this.matteElement,this.baseElement=this.matteElement):this.baseElement=this.layerElement;if(!this.data.ln&&!this.data.cl||4!==this.data.ty&&0!==this.data.ty||(this.data.ln&&this.layerElement.setAttribute("id",this.data.ln),this.data.cl&&this.layerElement.setAttribute("class",this.data.cl)),0===this.data.ty){var l=document.createElementNS(svgNS,"clipPath"),p=document.createElementNS(svgNS,"path");p.setAttribute("d","M0,0 L"+this.data.w+",0 L"+this.data.w+","+this.data.h+" L0,"+this.data.h+"z");var m="cp_"+randomString(8);if(l.setAttribute("id",m),l.appendChild(p),this.globalData.defs.appendChild(l),this.checkMasks()){var f=document.createElementNS(svgNS,"g");f.setAttribute("clip-path","url(#"+m+")"),f.appendChild(this.layerElement),this.transformedElement=f,t?t.appendChild(this.transformedElement):this.baseElement=this.transformedElement}else this.layerElement.setAttribute("clip-path","url(#"+m+")")}0!==this.data.bm&&this.setBlendMode(),this.layerElement!==this.parentContainer&&(this.placeholder=null),this.data.ef&&(this.effectsManager=new SVGEffects(this)),this.checkParenting()},SVGBaseElement.prototype.setBlendMode=BaseElement.prototype.setBlendMode,SVGBaseElement.prototype.renderFrame=function(t){if(3===this.data.ty||this.data.hd||!this.isVisible)return!1;this.lastNum=this.currentFrameNum,this.finalTransform.opMdf=this.firstFrame||this.finalTransform.op.mdf,this.finalTransform.matMdf=this.firstFrame||this.finalTransform.mProp.mdf,this.finalTransform.opacity=this.finalTransform.op.v;var e,r=this.finalTransform.mat;if(this.hierarchy){var s=0,i=this.hierarchy.length;if(!this.finalTransform.matMdf)for(;i>s;){if(this.hierarchy[s].finalTransform.mProp.mdf){this.finalTransform.matMdf=!0;break}s+=1}if(this.finalTransform.matMdf)for(e=this.finalTransform.mProp.v.props,r.cloneFromProps(e),s=0;i>s;s+=1)e=this.hierarchy[s].finalTransform.mProp.v.props,r.transform(e[0],e[1],e[2],e[3],e[4],e[5],e[6],e[7],e[8],e[9],e[10],e[11],e[12],e[13],e[14],e[15])}else this.isVisible&&(r=this.finalTransform.mProp.v);return this.finalTransform.matMdf&&this.layerElement&&this.transformedElement.setAttribute("transform",r.to2dCSS()),this.finalTransform.opMdf&&this.layerElement&&this.transformedElement.setAttribute("opacity",this.finalTransform.op.v),this.data.hasMask&&this.maskManager.renderFrame(r),this.effectsManager&&this.effectsManager.renderFrame(this.firstFrame),this.isVisible},SVGBaseElement.prototype.destroy=function(){this.layerElement=null,this.parentContainer=null,this.matteElement&&(this.matteElement=null),this.maskManager&&this.maskManager.destroy()},SVGBaseElement.prototype.getBaseElement=function(){returnLine truncated
+
+var g=this.setGradientOpacity(t[n],e[n],l);g&&u.setAttribute("mask","url(#"+g+")"),e[n].elem=u,r.appendChild(u)}2===t[n].r&&u.setAttribute("fill-rule","evenodd"),t[n].ln&&u.setAttribute("id",t[n].ln),t[n].cl&&u.setAttribute("class",t[n].cl),l.pElem=u,this.stylesList.push(l),e[n].style=l,c.push(l)}else if("gr"==t[n].ty){e[n]={it:[]};var v=document.createElementNS(svgNS,"g");r.appendChild(v),e[n].gr=v,this.searchShapes(t[n].it,e[n].it,v,s,i+1,m)}else if("tr"==t[n].ty)e[n]={transform:{op:PropertyFactory.getProp(this,t[n].o,0,.01,s),mProps:PropertyFactory.getProp(this,t[n],2,null,s)},elements:[]},p=e[n].transform,m.push(p);else if("sh"==t[n].ty||"rc"==t[n].ty||"el"==t[n].ty||"sr"==t[n].ty){e[n]={elements:[],caches:[],styles:[],transformers:m,lStr:""};var b=4;for("rc"==t[n].ty?b=5:"el"==t[n].ty?b=6:"sr"==t[n].ty&&(b=7),e[n].sh=ShapePropertyFactory.getShapeProp(this,t[n],b,s),e[n].lvl=i,this.shapes.push(e[n].sh),this.addShapeToModifiers(e[n]),h=this.stylesList.length,o=0;h>o;o+=1)this.stylesList[o].closed||e[n].elements.push({ty:this.stylesList[o].type,st:this.stylesList[o]})}else if("tm"==t[n].ty||"rd"==t[n].ty||"ms"==t[n].ty||"rp"==t[n].ty){var E=ShapeModifiers.getModifier(t[n].ty);E.init(this,t[n],s),this.shapeModifiers.push(E),d.push(E),e[n]=E}for(f=c.length,n=0;f>n;n+=1)c[n].closed=!0;for(f=d.length,n=0;f>n;n+=1)d[n].closed=!0},IShapeElement.prototype.addShapeToModifiers=function(t){var e,r=this.shapeModifiers.length;for(e=0;r>e;e+=1)this.shapeModifiers[e].addShape(t)},IShapeElement.prototype.renderModifiers=function(){if(this.shapeModifiers.length){var t,e=this.shapes.length;for(t=0;e>t;t+=1)this.shapes[t].reset();for(e=this.shapeModifiers.length,t=e-1;t>=0;t-=1)this.shapeModifiers[t].processShapes(this.firstFrame)}},IShapeElement.prototype.renderFrame=function(t){var e=this._parent.renderFrame.call(this,t);return e===!1?void this.hide():(this.globalToLocal([0,0,0]),this.hidden&&(this.layerElement.style.display="block",this.hidden=!1),this.renderModifiers(),void this.renderShape(null,null,!0,null))},IShapeElement.prototype.hide=function(){if(!this.hidden){this.layerElement.style.display="none";var t,e=this.stylesList.length;for(t=e-1;t>=0;t-=1)"0"!==this.stylesList[t].ld&&(this.stylesList[t].ld="0",this.stylesList[t].pElem.style.display="none",this.stylesList[t].pElem.parentNode&&(this.stylesList[t].parent=this.stylesList[t].pElem.parentNode));this.hidden=!0}},IShapeElement.prototype.renderShape=function(t,e,r,s){var i,a;if(!t)for(t=this.shapesData,a=this.stylesList.length,i=0;a>i;i+=1)this.stylesList[i].d="",this.stylesList[i].mdf=!1;e||(e=this.viewData),a=t.length-1;var n;for(i=a;i>=0;i-=1)n=t[i].ty,"tr"==n?((this.firstFrame||e[i].transform.op.mdf&&s)&&s.setAttribute("opacity",e[i].transform.op.v),(this.firstFrame||e[i].transform.mProps.mdf&&s)&&s.setAttribute("transform",e[i].transform.mProps.v.to2dCSS())):"sh"==n||"el"==n||"rc"==n||"sr"==n?this.renderPath(t[i],e[i]):"fl"==n?this.renderFill(t[i],e[i]):"gf"==n?this.renderGradient(t[i],e[i]):"gs"==n?(this.renderGradient(t[i],e[i]),this.renderStroke(t[i],e[i])):"st"==n?this.renderStroke(t[i],e[i]):"gr"==n&&this.renderShape(t[i].it,e[i].it,!1,e[i].gr);if(r){for(a=this.stylesList.length,i=0;a>i;i+=1)"0"===this.stylesList[i].ld&&(this.stylesList[i].ld="1",this.stylesList[i].pElem.style.display="block"),(this.stylesList[i].mdf||this.firstFrame)&&(this.stylesList[i].pElem.setAttribute("d",this.stylesList[i].d),this.stylesList[i].msElem&&this.stylesList[i].msElem.setAttribute("d",this.stylesList[i].d));this.firstFrame&&(this.firstFrame=!1)}},IShapeElement.prototype.renderPath=function(t,e){var r,s,i,a,n,o,h,l,p=e.elements.length,m=e.lvl;for(l=0;p>l;l+=1){o=e.sh.mdf||this.firstFrame,n="M0 0";var f=e.sh.paths;if(a=f._length,e.elements[l].st.lvl<m){for(var c,d=this.mHelper.reset(),u=m-e.elements[l].st.lvl,y=e.transformers.length-1;u>0;)o=e.transformers[y].mProps.mdf||o,c=e.transformers[y].mProps.v.props,d.transform(c[0],c[1],c[2],c[3],c[4],c[5],c[6],c[7],c[8],c[9],c[10],c[11],c[12],c[13],c[14],c[15]),u--,y--;if(o){for(i=0;a>i;i+=1)if(h=f.shapes[i],h&&h._length){for(r=h._length,s=1;r>s;s+=1)1==s&&(n+=" M"+d.applyToPointStringified(h.v[0][0],h.v[0][1])),n+=" C"+d.applyToPointStringified(h.o[s-1][0],h.o[s-1][1])+" "+d.applyToPointStringified(h.i[s][0],h.i[s][1])+" "+d.applyToPointStringified(h.v[s][0],h.v[s][1]);1==r&&(n+=" M"+d.applyToPointStringified(h.v[0][0],h.v[0][1])),h.c&&(n+=" C"+d.applyToPointStringified(h.o[s-1][0],h.o[s-1][1])+" "+d.applyToPointStringified(h.i[0][0],h.i[0][1])+" "+d.applyToPointStringified(h.v[0][0],h.v[0][1]),n+="z")}e.caches[l]=n}else n=e.caches[l]}else if(o){for(i=0;a>i;i+=1)if(h=f.shapes[i],h&&h._length){for(r=h._length,s=1;r>s;s+=1)1==s&&(n+=" M"+h.v[0].join(",")),n+=" C"+h.o[s-1].join(",")+" "+h.i[s].join(",")+" "+h.v[s].join(",");1==r&&(n+=" M"+h.v[0].join(",")),h.c&&r&&(n+=" C"+h.o[s-1].join(",")+" "+h.i[0].join(",")+" "+h.v[0].join(","),n+="z")}e.caches[l]=n}else n=e.caches[l];e.elements[l].st.d+=n,e.elements[l].st.mdf=o||e.elementLine truncated
+this.canvasContext.save(),this.canvasContext.clearRect(this.transformCanvas.tx,this.transformCanvas.ty,this.transformCanvas.w*this.transformCanvas.sx,this.transformCanvas.h*this.transformCanvas.sy)):this.save(),this.ctxTransform(this.transformCanvas.props),this.canvasContext.beginPath(),this.canvasContext.rect(0,0,this.transformCanvas.w,this.transformCanvas.h),this.canvasContext.closePath(),this.canvasContext.clip();var e,r=this.layers.length;for(this.completeLayers||this.checkLayers(t),e=0;r>e;e++)(this.completeLayers||this.elements[e])&&this.elements[e].prepareFrame(t-this.layers[e].st);for(e=r-1;e>=0;e-=1)(this.completeLayers||this.elements[e])&&this.elements[e].renderFrame();this.renderConfig.clearCanvas!==!0?this.restore():this.canvasContext.restore()}},CanvasRenderer.prototype.buildItem=function(t){var e=this.elements;if(!e[t]&&99!=this.layers[t].ty){var r=this.createItem(this.layers[t],this,this.globalData);e[t]=r,r.initExpressions(),0===this.layers[t].ty&&r.resize(this.globalData.transformCanvas)}},CanvasRenderer.prototype.checkPendingElements=function(){for(;this.pendingElements.length;){var t=this.pendingElements.pop();t.checkParenting()}},CanvasRenderer.prototype.hide=function(){this.animationItem.container.style.display="none"},CanvasRenderer.prototype.show=function(){this.animationItem.container.style.display="block"},CanvasRenderer.prototype.searchExtraCompositions=function(t){{var e,r=t.length;document.createElementNS(svgNS,"g")}for(e=0;r>e;e+=1)if(t[e].xt){var s=this.createComp(t[e],this.globalData.comp,this.globalData);s.initExpressions(),this.globalData.projectInterface.registerComposition(s)}},extendPrototype(BaseRenderer,HybridRenderer),HybridRenderer.prototype.buildItem=SVGRenderer.prototype.buildItem,HybridRenderer.prototype.checkPendingElements=function(){for(;this.pendingElements.length;){var t=this.pendingElements.pop();t.checkParenting()}},HybridRenderer.prototype.appendElementInPos=function(t,e){var r=t.getBaseElement();if(r){var s=this.layers[e];if(s.ddd&&this.supports3d)this.addTo3dContainer(r,e);else{for(var i,a=0;e>a;)this.elements[a]&&this.elements[a]!==!0&&this.elements[a].getBaseElement&&(i=this.elements[a].getBaseElement()),a+=1;i?s.ddd&&this.supports3d||this.layerElement.insertBefore(r,i):s.ddd&&this.supports3d||this.layerElement.appendChild(r)}}},HybridRenderer.prototype.createBase=function(t){return new SVGBaseElement(t,this.layerElement,this.globalData,this)},HybridRenderer.prototype.createShape=function(t){return this.supports3d?new HShapeElement(t,this.layerElement,this.globalData,this):new IShapeElement(t,this.layerElement,this.globalData,this)},HybridRenderer.prototype.createText=function(t){return this.supports3d?new HTextElement(t,this.layerElement,this.globalData,this):new SVGTextElement(t,this.layerElement,this.globalData,this)},HybridRenderer.prototype.createCamera=function(t){return this.camera=new HCameraElement(t,this.layerElement,this.globalData,this),this.camera},HybridRenderer.prototype.createImage=function(t){return this.supports3d?new HImageElement(t,this.layerElement,this.globalData,this):new IImageElement(t,this.layerElement,this.globalData,this)},HybridRenderer.prototype.createComp=function(t){return this.supports3d?new HCompElement(t,this.layerElement,this.globalData,this):new ICompElement(t,this.layerElement,this.globalData,this)},HybridRenderer.prototype.createSolid=function(t){return this.supports3d?new HSolidElement(t,this.layerElement,this.globalData,this):new ISolidElement(t,this.layerElement,this.globalData,this)},HybridRenderer.prototype.getThreeDContainer=function(t){var e=document.createElement("div");styleDiv(e),e.style.width=this.globalData.compSize.w+"px",e.style.height=this.globalData.compSize.h+"px",e.style.transformOrigin=e.style.mozTransformOrigin=e.style.webkitTransformOrigin="50% 50%";var r=document.createElement("div");styleDiv(r),r.style.transform=r.style.webkitTransform="matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)",e.appendChild(r),this.resizerElem.appendChild(e);var s={container:r,perspectiveElem:e,startPos:t,endPos:t};return this.threeDElements.push(s),s},HybridRenderer.prototype.build3dContainers=function(){var t,e,r=this.layers.length;for(t=0;r>t;t+=1)this.layers[t].ddd?(e||(e=this.getThreeDContainer(t)),e.endPos=Math.max(e.endPos,t)):e=null},HybridRenderer.prototype.addTo3dContainer=function(t,e){for(var r=0,s=this.threeDElements.length;s>r;){if(e<=this.threeDElements[r].endPos){for(var i,a=this.threeDElements[r].startPos;e>a;)this.elements[a]&&this.elements[a].getBaseElement&&(i=this.elements[a].getBaseElement()),a+=1;i?this.threeDElements[r].container.insertBefore(t,i):this.threeDElements[r].container.appendChild(t);break}r+=1}},HybridRenderer.prototype.configAnimation=function(t){var e=document.createElement("div"),r=this.animationItem.wrapper;e.style.width=t.w+"px",e.style.height=t.h+"px",this.resizerElem=e,styleDiv(e),e.style.transformStyle=e.style.webkitTransformStyle=e.style.mozTransformStyle="flat",r.appendChild(e)Line truncated
+this.data.hasMask){var e=document.createElementNS(svgNS,"svg");styleDiv(e),e.setAttribute("width",this.data.w),e.setAttribute("height",this.data.h);var r=document.createElementNS(svgNS,"g");e.appendChild(r),t.appendChild(e),this.maskedElement=r,this.baseElement=t,this.layerElement=r,this.transformedElement=t}else this.layerElement=t,this.baseElement=this.layerElement,this.transformedElement=t;this.checkParenting()},HCompElement.prototype.hide=ICompElement.prototype.hide,HCompElement.prototype.prepareFrame=ICompElement.prototype.prepareFrame,HCompElement.prototype.setElements=ICompElement.prototype.setElements,HCompElement.prototype.getElements=ICompElement.prototype.getElements,HCompElement.prototype.destroy=ICompElement.prototype.destroy,HCompElement.prototype.renderFrame=function(t){var e,r=this._parent.renderFrame.call(this,t),s=this.layers.length;if(r===!1)return void this.hide();for(this.hidden=!1,e=0;s>e;e+=1)(this.completeLayers||this.elements[e])&&this.elements[e].renderFrame();this.firstFrame&&(this.firstFrame=!1)},HCompElement.prototype.checkLayers=BaseRenderer.prototype.checkLayers,HCompElement.prototype.buildItem=HybridRenderer.prototype.buildItem,HCompElement.prototype.checkPendingElements=HybridRenderer.prototype.checkPendingElements,HCompElement.prototype.addPendingElement=HybridRenderer.prototype.addPendingElement,HCompElement.prototype.buildAllItems=BaseRenderer.prototype.buildAllItems,HCompElement.prototype.createItem=HybridRenderer.prototype.createItem,HCompElement.prototype.buildElementParenting=HybridRenderer.prototype.buildElementParenting,HCompElement.prototype.createImage=HybridRenderer.prototype.createImage,HCompElement.prototype.createComp=HybridRenderer.prototype.createComp,HCompElement.prototype.createSolid=HybridRenderer.prototype.createSolid,HCompElement.prototype.createShape=HybridRenderer.prototype.createShape,HCompElement.prototype.createText=HybridRenderer.prototype.createText,HCompElement.prototype.createBase=HybridRenderer.prototype.createBase,HCompElement.prototype.appendElementInPos=HybridRenderer.prototype.appendElementInPos,createElement(HBaseElement,HShapeElement);var parent=HShapeElement.prototype._parent;extendPrototype(IShapeElement,HShapeElement),HShapeElement.prototype._parent=parent,HShapeElement.prototype.createElements=function(){var t=document.createElement("div");styleDiv(t);var e=document.createElementNS(svgNS,"svg");styleDiv(e);var r=this.comp.data?this.comp.data:this.globalData.compSize;if(e.setAttribute("width",r.w),e.setAttribute("height",r.h),this.data.hasMask){var s=document.createElementNS(svgNS,"g");t.appendChild(e),e.appendChild(s),this.maskedElement=s,this.layerElement=s,this.shapesContainer=s}else t.appendChild(e),this.layerElement=e,this.shapesContainer=document.createElementNS(svgNS,"g"),this.layerElement.appendChild(this.shapesContainer);this.data.hd||(this.baseElement=t),this.innerElem=t,this.data.ln&&this.innerElem.setAttribute("id",this.data.ln),this.searchShapes(this.shapesData,this.viewData,this.layerElement,this.dynamicProperties,0),this.buildExpressionInterface(),this.layerElement=t,this.transformedElement=t,this.shapeCont=e,0!==this.data.bm&&this.setBlendMode(),this.checkParenting()},HShapeElement.prototype.renderFrame=function(t){var e=this._parent.renderFrame.call(this,t);if(e===!1)return void this.hide();if(this.hidden&&(this.layerElement.style.display="block",this.hidden=!1),this.renderModifiers(),this.addedTransforms.mdf=this.finalTransform.matMdf,this.addedTransforms.mats.length=1,this.addedTransforms.mats[0]=this.finalTransform.mat,this.renderShape(null,null,!0,null),this.isVisible&&(this.elemMdf||this.firstFrame)){var r=this.shapeCont.getBBox(),s=!1;this.currentBBox.w!==r.width&&(this.currentBBox.w=r.width,this.shapeCont.setAttribute("width",r.width),s=!0),this.currentBBox.h!==r.height&&(this.currentBBox.h=r.height,this.shapeCont.setAttribute("height",r.height),s=!0),(s||this.currentBBox.x!==r.x||this.currentBBox.y!==r.y)&&(this.currentBBox.w=r.width,this.currentBBox.h=r.height,this.currentBBox.x=r.x,this.currentBBox.y=r.y,this.shapeCont.setAttribute("viewBox",this.currentBBox.x+" "+this.currentBBox.y+" "+this.currentBBox.w+" "+this.currentBBox.h),this.shapeCont.style.transform=this.shapeCont.style.webkitTransform="translate("+this.currentBBox.x+"px,"+this.currentBBox.y+"px)")}},createElement(HBaseElement,HTextElement),HTextElement.prototype.init=ITextElement.prototype.init,HTextElement.prototype.getMeasures=ITextElement.prototype.getMeasures,HTextElement.prototype.createPathShape=ITextElement.prototype.createPathShape,HTextElement.prototype.prepareFrame=ITextElement.prototype.prepareFrame,HTextElement.prototype.createElements=function(){this.isMasked=this.checkMasks();var t=document.createElement("div");if(styleDiv(t),this.layerElement=t,this.transformedElement=t,this.isMasked){this.renderType="svg";var e=document.createElementNS(svgNS,"svg");styleDiv(e),this.cont=e,this.compW=this.comp.data.w,this.compH=this.comp.data.h,e.sLine truncated
+Object.defineProperty(s,"_name",{get:function(){return t.nm}}),s.numProperties=t.np,s.propertyIndex=t.ix,s.nm=t.nm,s.mn=t.mn,s}}(),g=function(){return function(t,e,r){function s(t){return"Color"===t||"color"===t?s.color:"Opacity"===t||"opacity"===t?s.opacity:void 0}return Object.defineProperty(s,"color",{get:function(){return ExpressionValue(e.c,1/e.c.mult,"color")}}),Object.defineProperty(s,"opacity",{get:function(){return ExpressionValue(e.o,100)}}),Object.defineProperty(s,"_name",{value:t.nm}),Object.defineProperty(s,"mn",{value:t.mn}),e.c.setGroupProperty(r),e.o.setGroupProperty(r),s}}(),v=function(){return function(t,e,r){function s(t){return 1===t?c:r(t-1)}function i(t){return 1===t?l:s(t-1)}function a(r){Object.defineProperty(l,t.d[r].nm,{get:function(){return ExpressionValue(e.d.dataProps[r].p)}})}function n(t){return"Color"===t||"color"===t?n.color:"Opacity"===t||"opacity"===t?n.opacity:"Stroke Width"===t||"stroke width"===t?n.strokeWidth:void 0}var o,h=t.d?t.d.length:0,l={};for(o=0;h>o;o+=1)a(o),e.d.dataProps[o].p.setGroupProperty(i);return Object.defineProperty(n,"color",{get:function(){return ExpressionValue(e.c,1/e.c.mult,"color")}}),Object.defineProperty(n,"opacity",{get:function(){return ExpressionValue(e.o,100)}}),Object.defineProperty(n,"strokeWidth",{get:function(){return ExpressionValue(e.w)}}),Object.defineProperty(n,"dash",{get:function(){return l}}),Object.defineProperty(n,"_name",{value:t.nm}),Object.defineProperty(n,"mn",{value:t.mn}),e.c.setGroupProperty(s),e.o.setGroupProperty(s),e.w.setGroupProperty(s),n}}(),b=function(){return function(t,e,r){function s(t){return 1==t?i:r(--t)}function i(e){return e===t.e.ix||"End"===e||"end"===e?i.end:e===t.s.ix?i.start:e===t.o.ix?i.offset:void 0}return i.propertyIndex=t.ix,e.s.setGroupProperty(s),e.e.setGroupProperty(s),e.o.setGroupProperty(s),i.propertyIndex=t.ix,Object.defineProperty(i,"start",{get:function(){return ExpressionValue(e.s,1/e.s.mult)}}),Object.defineProperty(i,"end",{get:function(){return ExpressionValue(e.e,1/e.e.mult)}}),Object.defineProperty(i,"offset",{get:function(){return ExpressionValue(e.o)}}),Object.defineProperty(i,"_name",{get:function(){return t.nm}}),i.mn=t.mn,i}}(),E=function(){return function(t,e,r){function s(t){return 1==t?i:r(--t)}function i(e){return t.a.ix===e?i.anchorPoint:t.o.ix===e?i.opacity:t.p.ix===e?i.position:t.r.ix===e?i.rotation:t.s.ix===e?i.scale:t.sk&&t.sk.ix===e?i.skew:t.sa&&t.sa.ix===e?i.skewAxis:"Opacity"===e?i.opacity:"Position"===e?i.position:"Anchor Point"===e?i.anchorPoint:"Scale"===e?i.scale:"Rotation"===e||"ADBE Vector Rotation"===e?i.rotation:"Skew"===e?i.skew:"Skew Axis"===e?i.skewAxis:void 0}e.transform.mProps.o.setGroupProperty(s),e.transform.mProps.p.setGroupProperty(s),e.transform.mProps.a.setGroupProperty(s),e.transform.mProps.s.setGroupProperty(s),e.transform.mProps.r.setGroupProperty(s),e.transform.mProps.sk&&(e.transform.mProps.sk.setGroupProperty(s),e.transform.mProps.sa.setGroupProperty(s)),e.transform.op.setGroupProperty(s),Object.defineProperty(i,"opacity",{get:function(){return ExpressionValue(e.transform.mProps.o,1/e.transform.mProps.o.mult)}}),Object.defineProperty(i,"position",{get:function(){return ExpressionValue(e.transform.mProps.p)}}),Object.defineProperty(i,"anchorPoint",{get:function(){return ExpressionValue(e.transform.mProps.a)}});return Object.defineProperty(i,"scale",{get:function(){return ExpressionValue(e.transform.mProps.s,1/e.transform.mProps.s.mult)}}),Object.defineProperty(i,"rotation",{get:function(){return ExpressionValue(e.transform.mProps.r,1/e.transform.mProps.r.mult)}}),Object.defineProperty(i,"skew",{get:function(){return ExpressionValue(e.transform.mProps.sk)}}),Object.defineProperty(i,"skewAxis",{get:function(){return ExpressionValue(e.transform.mProps.sa)}}),Object.defineProperty(i,"_name",{get:function(){return t.nm}}),i.ty="tr",i.mn=t.mn,i}}(),P=function(){return function(t,e,r){function s(t){return 1==t?i:r(--t)}function i(e){return t.p.ix===e?i.position:t.s.ix===e?i.size:void 0}i.propertyIndex=t.ix;var a="tm"===e.sh.ty?e.sh.prop:e.sh;return a.s.setGroupProperty(s),a.p.setGroupProperty(s),Object.defineProperty(i,"size",{get:function(){return ExpressionValue(a.s)}}),Object.defineProperty(i,"position",{get:function(){return ExpressionValue(a.p)}}),Object.defineProperty(i,"_name",{get:function(){return t.nm}}),i.mn=t.mn,i}}(),x=function(){return function(t,e,r){function s(t){return 1==t?i:r(--t)}function i(e){return t.p.ix===e?i.position:t.r.ix===e?i.rotation:t.pt.ix===e?i.points:t.or.ix===e||"ADBE Vector Star Outer Radius"===e?i.outerRadius:t.os.ix===e?i.outerRoundness:!t.ir||t.ir.ix!==e&&"ADBE Vector Star Inner Radius"!==e?t.is&&t.is.ix===e?i.innerRoundness:void 0:i.innerRadius}var a="tm"===e.sh.ty?e.sh.prop:e.sh;return i.propertyIndex=t.ix,a.or.setGroupProperty(s),a.os.setGroupProperty(s),a.pt.setGroupProperty(s),a.p.setGroupProperty(s),a.r.setGroupProperty(s),t.ir&&(a.ir.setGroupProperty(s),a.is.setGroupProperty(s)),Object.defineProperty(i,Line truncated

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

@@ -17,6 +17,14 @@ weatherWrap.addEventListener('scroll', function() {
             mainWeat.style.transform = `scale(${newOpacity})`;
             mainWeat.style.opacity = newOpacity;
                         document.querySelector('.froggie').style.opacity = newOpacity;
+
+                                              if(scrollPosition > 100){
+                                                    document.querySelector('.header-top').classList.add('use');
+
+                                                } else{
+                                                    document.querySelector('.header-top').classList.remove('use');
+
+                                                }
             ticking = false;
         });
         ticking = true;

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

@@ -10,7 +10,39 @@
     <link rel="stylesheet" href="../components/components.css">
     <link rel="stylesheet" href="../ripple-files/ripple.css">
     <link rel="stylesheet" href="../components/md-buttons.css">
+    <style>
+        .toast_version{
+            position: fixed;
+            border-radius: 10px;
+            font-size: 18px;
+            font-family: var(--outfit);
+            bottom: 15px;
+            left: 50%;
+            color: var(--On-Secondary-Container);
+            background-color: var(--Secondary-Container);
+            width: max-content;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transform: translateX(-50%);
+            padding: 10px;
+            animation: opacity 0.3s ease-out;
+            transition: opacity 0.2s ease-in;
+        }
 
+        @keyframes opacity {
+            0%{
+                opacity: 0;
+            }
+            100%{
+                opacity: 1;
+            }
+        }
+
+        .toast_version p{
+            margin: 0;
+        }
+    </style>
 </head>
 
 <body style="--md-list-item-label-text-size: 1.15rem; --md-list-item-pressed-state-layer-opacity: 0.15; --md-ref-typeface-plain: var(--google-normal); background-color: var(--Surface);">
@@ -46,9 +78,10 @@
                 </md-list-item>
 
 
-                <md-list-item type="button" onclick="window.location.href='https://github.com/PranshulGG/WeatherMaster/releases'">
+                <md-list-item type="button" id="checkUpdatesBtn">
                     <md-icon slot="start" icon-filled>system_update</md-icon>
                     <div slot="headline">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')">
@@ -61,14 +94,16 @@
                 <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.2.1 (W)</div>
+                    <div slot="supporting-text">1.4.2 (W)</div>
                 </md-list-item>
 
             </md-list>
 
 
 
+            <div class="toast_version" hidden>
 
+                <p id="updateMessage"></p></div>
 
         </div>
     </div>
@@ -139,6 +174,59 @@ function sendThemeToAndroid(theme) {
 
 AndroidInterface.updateStatusBarColor(theme);
 };
+
+
+
+document.getElementById('checkUpdatesBtn').addEventListener('click', async function() {
+    const currentVersion = 'v1.4.2';
+    const githubRepo = 'PranshulGG/WeatherMaster';
+    const releasesUrl = `https://api.github.com/repos/${githubRepo}/releases/latest`;
+
+    try {
+        const response = await fetch(releasesUrl);
+        if (!response.ok) throw new Error('Network response was not ok.');
+
+        const data = await response.json();
+        const latestVersion = data.tag_name;
+
+document.getElementById('version_check_loader').hidden = false;
+document.getElementById('checkUpdatesBtn').style.pointerEvents = 'none';
+
+        setTimeout(()=>{
+    if (latestVersion !== currentVersion) {
+        document.getElementById('updateMessage').innerText = 'New version available!';
+    document.getElementById('version_check_loader').hidden = true;
+    document.getElementById('checkUpdatesBtn').style.pointerEvents = '';
+    document.querySelector('.toast_version').hidden = false;
+
+    setTimeout(()=>{
+    window.location.href = 'https://github.com/PranshulGG/WeatherMaster/releases';
+}, 2500);
+
+
+        } else {
+            document.getElementById('updateMessage').innerText = 'You are using the latest version!';
+document.getElementById('version_check_loader').hidden = true;
+document.getElementById('checkUpdatesBtn').style.pointerEvents = '';
+            document.querySelector('.toast_version').hidden = false;
+        }
+
+}, 2000);
+
+
+setTimeout(()=>{
+    document.querySelector('.toast_version').style.opacity = '0';
+}, 3800);
+
+setTimeout(()=>{
+    document.querySelector('.toast_version').hidden = true;
+    document.querySelector('.toast_version').style.opacity = '';
+}, 4000);
+}catch (error) {
+        document.getElementById('updateMessage').innerText = 'Error checking for updates.';
+        console.error('Error:', error);
+    }
+});
     </script>
 
 

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

@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
+    <title>MoonPhases</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="moonphaseUi.css">
+
+</head>
+
+<body>
+
+    <div class="moon_activity">
+
+        <div class="moon_activity_header">
+            <button class="ripple-icon-btn regular" ontouchstart="playEffect(this)" ontouchend="playEffect2(this)"
+                onclick="sendThemeToAndroid('GoBack')" style="--ripple-unbounded: white">
+                <span class="ripple-effect-icon"></span>
+                <span icon-outlined style="font-size: 24px !important; color: white;">arrow_back</span>
+            </button>
+
+            <p style="color: white;">Moon phases</p>
+        </div>
+
+
+        <div class="moon_Phase_content">
+
+            <div class="moon_phase_current_data">
+
+                <div class="moon_phase_img_text_current">
+                    <img src="../moon_phases/moon_full.svg" alt="" id="current_phase_img">
+                    <p id="currentMoonPhase_name"></p>
+                </div>
+
+
+                <div class="moon_phase_current_text_data">
+
+                    <div class="moon_phase_current_text_data_item">
+                        <span>Illumination:</span>
+                        <p id="IlluminationText"></p>
+                    </div>
+
+                    <div class="moon_phase_current_text_data_item">
+                        <span>Moonrise:</span>
+                        <p id="MoonriseText"></p>
+                    </div>
+
+                    <div class="moon_phase_current_text_data_item">
+                        <span>Moonset:</span>
+                        <p id="MoonsetText"></p>
+                    </div>
+
+                    <div class="moon_phase_current_text_data_item">
+                        <span>Next phase:</span>
+                        <p id="NextphaseText"></p>
+                    </div>
+
+                    <div class="moon_phase_current_text_data_item">
+                        <span>Next phase in:</span>
+                        <p id="NextphaseinText"></p>
+                    </div>
+
+                </div>
+
+            </div>
+
+
+            <moonPhasetitle>
+                Moon phase forecast
+            </moonPhasetitle>
+
+            <div class="moonPhase_forecast" id="moonPhase_forecast">
+
+            </div>
+
+
+
+            <div class="moonphase_loader">
+                <md-circular-progress indeterminate style="margin-bottom: 100px;"></md-circular-progress>
+            </div>
+
+        </div>
+
+    </div>
+
+
+
+
+
+<script>
+
+
+                function sendThemeToAndroid(theme) {
+
+                    AndroidInterface.updateStatusBarColor(theme);
+                };
+
+const latDif = localStorage.getItem('currentLat');
+const longDif = localStorage.getItem('currentLong');
+
+fetch(`https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/${latDif},${longDif}?unitGroup=metric&include=days&key=4KMES28T2K3PXBCXTNYZCZFW8&contentType=json`)
+        .then(response => response.json())
+        .then(data => {
+
+
+       
+
+            const moon_phase_img = document.getElementById('current_phase_img');
+            const moonPhaseText = document.getElementById('currentMoonPhase_name');
+            const moonPhase = data.days[0].moonphase;
+            const moonPhase_forecast = document.getElementById('moonPhase_forecast')
+
+            let phaseName = '';
+            let phaseImg = '';
+            let daysLeft = 0;
+            let nextPhaseName = '';
+
+        let phasePercentage = 0;
+
+
+
+        if (moonPhase === 0) {
+            phaseName = 'New Moon';
+            phaseImg = 'moon_phases/moon_new.svg';
+            daysLeft = Math.round((0.25 - moonPhase) * 29.53);
+            nextPhaseName = 'Waxing Crescent';
+            phasePercentage = 0;
+
+        } else if (moonPhase > 0 && moonPhase < 0.25) {
+            phaseName = 'Waxing Crescent';
+            phaseImg = 'moon_phases/moon_waxing_crescent.svg';
+            daysLeft = Math.round((0.25 - moonPhase) * 29.53);
+            nextPhaseName = 'First Quarter';
+            phasePercentage = Math.round((moonPhase / 0.25) * 100);
+
+        } else if (moonPhase === 0.25) {
+            phaseName = 'First Quarter';
+            phaseImg = 'moon_phases/moon_first_quarter.svg';
+            daysLeft = Math.round((0.5 - moonPhase) * 29.53);
+            nextPhaseName = 'Waxing Gibbous';
+            phasePercentage = 100;
+
+        } else if (moonPhase > 0.25 && moonPhase < 0.5) {
+            phaseName = 'Waxing Gibbous';
+            phaseImg = 'moon_phases/moon_waxing_gibbous.svg';
+            daysLeft = Math.round((0.5 - moonPhase) * 29.53);
+            nextPhaseName = 'Full Moon';
+            phasePercentage = Math.round(((moonPhase - 0.25) / 0.25) * 100);
+
+
+        } else if (moonPhase === 0.5) {
+            phaseName = 'Full Moon';
+            phaseImg = 'moon_phases/moon_full.svg';
+            daysLeft = Math.round((0.75 - moonPhase) * 29.53);
+            nextPhaseName = 'Waning Gibbous';
+            phasePercentage = 100;
+
+        } else if (moonPhase > 0.5 && moonPhase < 0.75) {
+            phaseName = 'Waning Gibbous';
+            phaseImg = 'moon_phases/moon_waning_gibbous.svg';
+            daysLeft = Math.round((0.75 - moonPhase) * 29.53);
+            nextPhaseName = 'Last Quarter';
+            phasePercentage = Math.round(((moonPhase - 0.5) / 0.25) * 100);
+
+
+        } else if (moonPhase === 0.75) {
+            phaseName = 'Last Quarter';
+            phaseImg = 'moon_phases/moon_last_quarter.svg';
+            daysLeft = Math.round((1 - moonPhase) * 29.53);
+            nextPhaseName = 'Waning Crescent';
+            phasePercentage = 100;
+
+        } else if (moonPhase > 0.75 && moonPhase < 1) {
+            phaseName = 'Waning Crescent';
+            phaseImg = 'moon_phases/moon_waning_crescent.svg';
+            daysLeft = Math.round((1 - moonPhase) * 29.53);
+            nextPhaseName = 'New Moon';
+            phasePercentage = Math.round(((moonPhase - 0.75) / 0.25) * 100);
+
+
+        }
+            moon_phase_img.src = phaseImg
+            moonPhaseText.textContent = phaseName
+            document.getElementById('IlluminationText').innerHTML = phasePercentage + '%';
+            document.getElementById('NextphaseText').innerHTML = nextPhaseName;
+
+            if (daysLeft > 1) {
+                document.getElementById('NextphaseinText').innerHTML = `${daysLeft} days`;
+            } else {
+                document.getElementById('NextphaseinText').innerHTML = `${daysLeft} day`;
+            }
+
+            const formatDate = (dateStr) => {
+            const options = { day: 'numeric', month: 'long' };
+            const date = new Date(dateStr);
+            return date.toLocaleDateString('en-US', options);
+        };
+
+
+        const startDate = data.days[1].datetime;
+        const endDate = data.days[data.days.length - 1].datetime;
+
+
+        document.querySelector('moonPhasetitle').innerHTML = `Moon phases from ${formatDate(startDate)} to ${formatDate(endDate)}`
+
+            moonPhase_forecast.innerHTML = '';
+
+            for (let i = 1; i < data.days.length; i++) {
+            const day = data.days[i];
+            const phase = day.moonphase;
+            const phasePercentage = Math.round(phase * 100);
+            let phaseForecastName = '';
+            let phaseForecastImg = '';
+
+            if (phase === 0) {
+                phaseForecastName = 'New Moon';
+                phaseForecastImg = '../moon_phases/moon_new.svg';
+            } else if (phase > 0 && phase < 0.25) {
+                phaseForecastName = 'Waxing Crescent';
+                phaseForecastImg = '../moon_phases/moon_waxing_crescent.svg';
+            } else if (phase === 0.25) {
+                phaseForecastName = 'First Quarter';
+                phaseForecastImg = '../moon_phases/moon_first_quarter.svg';
+            } else if (phase > 0.25 && phase < 0.5) {
+                phaseForecastName = 'Waxing Gibbous';
+                phaseForecastImg = '../moon_phases/moon_waxing_gibbous.svg';
+            } else if (phase === 0.5) {
+                phaseForecastName = 'Full Moon';
+                phaseForecastImg = '../moon_phases/moon_full.svg';
+            } else if (phase > 0.5 && phase < 0.75) {
+                phaseForecastName = 'Waning Gibbous';
+                phaseForecastImg = '../moon_phases/moon_waning_gibbous.svg';
+            } else if (phase === 0.75) {
+                phaseForecastName = 'Last Quarter';
+                phaseForecastImg = '../moon_phases/moon_last_quarter.svg';
+            } else if (phase > 0.75 && phase < 1) {
+                phaseForecastName = 'Waning Crescent';
+                phaseForecastImg = '../moon_phases/moon_waning_crescent.svg';
+            }
+
+           
+            const forecastItem = document.createElement('div');
+            const forecastDate = document.createElement('span');
+            const forecastImg = document.createElement('img');
+            const forecastName = document.createElement('p');
+
+            forecastImg.src = phaseForecastImg;
+            forecastName.textContent = phaseForecastName ;
+            forecastDate.textContent = formatDate(day.datetime);
+            forecastItem.appendChild(forecastDate);
+
+            forecastItem.appendChild(forecastImg);
+            forecastItem.appendChild(forecastName);
+            moonPhase_forecast.appendChild(forecastItem);
+        }
+
+        });
+
+
+
+
+
+
+
+        // set/rise
+
+
+        fetch(`https://api.ipgeolocation.io/astronomy?apiKey=63a7210d2b104646a1099d5ba223d221&lat=${latDif}8&long=${longDif}`)
+        .then(response => response.json())
+        .then(data => {
+            const moonRise = data.moonrise;
+            const moonSet = data.moonset;
+
+            const moonRiseAmPm = convertToAmPm(moonRise);
+            const moonSetAmPm = convertToAmPm(moonSet);
+
+
+            document.getElementById('MoonriseText').innerHTML =  moonRiseAmPm;
+            document.getElementById('MoonsetText').innerHTML = moonSetAmPm;
+
+        })
+        .catch(error => console.error(error));
+
+
+        
+function convertToAmPm(time) {
+    let [hour, minute] = time.split(':');
+    hour = parseInt(hour);
+    const ampm = hour >= 12 ? 'PM' : 'AM';
+    hour = hour % 12;
+    hour = hour ? hour : 12;
+    return `${hour}:${minute} ${ampm}`;
+}
+
+
+setTimeout(()=>{
+    document.querySelector('.moonphase_loader').style.opacity = '0';
+}, 3000);
+
+setTimeout(()=>{
+    document.querySelector('.moonphase_loader').hidden = true;;
+}, 3200);
+</script>
+
+
+
+ 
+
+    <script src="../components-script.js/components.js"></script>
+    <script src="../ripple-files/icon-ripple.js"></script>
+    <script src="../modules/ripple_acc.js"></script>
+    <script src="../bundle.js"></script>
+    <script type="module" src="../index.js"></script>
+</body>
+
+</html>

app/src/main/assets/pages/aboutPages/licenses.html

@@ -160,7 +160,7 @@ AndroidInterface.updateStatusBarColor(theme);
 <script src="../../modules/call-themes.js"></script>
 <script src="../../bundle.js"></script>
 <script type="module" src="../../index.js"></script>
-<script src="../../modules/ripple.js"></script>
+<script src="../../modules/ripple_acc.js"></script>
 <script src="../../app/ripple.js"></script>
 <script src="../../app/apply.js"></script>
 </body>

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

@@ -0,0 +1,354 @@
+<!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>Alert 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">
+
+    <style>
+        [hidden] {
+            display: none !important;
+        }
+
+        *::selection{
+  background-color: var(--Inverse-Primary);
+            color: white;
+        }
+
+        ul{
+            padding: 0;
+            margin: 0;
+            user-select: text !important;
+
+        }
+
+        ul li{
+            list-style-type: none;
+            margin-bottom: 10px;
+            user-select: text !important;
+            overflow: hidden;
+             word-wrap: break-word;
+        }
+
+        #alert_info_div{
+            padding: 10px;
+            padding-bottom: 60px;
+        }
+
+
+        #alert_info_div alertHolder .location{
+            display: flex;
+            align-items: center;
+            font-family: var(--outfit-mid);
+            color: var(--On-Surface-Variant);
+            font-size: 18px;
+            font-weight: 500;
+            border-bottom: 1px solid var(--Outline-Variant);
+            padding: 10px;
+        }
+
+        #alert_info_div alertHolder {
+            background-color: var(--Surface-Container-Low);
+            display: block;
+            border-radius: 10px;
+        }
+
+        .alert_event{
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            gap: 10px;
+            padding-left: 5px;
+        }
+
+        .alert_event md-icon{
+            color: Orange;
+            font-size: 20px;
+            border-right: 1px solid var(--Outline);
+            padding-right: 10px;
+        }
+
+        .alert_event p{
+            font-size: 19px;
+            font-family: var(--outfit);
+            color: var(--On-Surface);
+
+        }
+
+        .other_info_desc_time{
+            padding-left: 50px;
+            padding-top: 10px;
+            font-family: var(--outfit);
+
+        }
+
+
+        .other_info_desc_time .start_end{
+            color: var(--On-Surface);
+            font-size: 18px;
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+            margin-bottom: 20px;
+            gap: 10px;
+        }
+
+        .other_info_desc_time .start_end span{
+            color: var(--Primary);
+            font-family: var(--outfit-mid);
+        }
+
+        .other_info_desc_time .start_end p{
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .description{
+            font-family: var(--outfit);
+            font-size: 16px;
+            padding: 10px;
+            color: var(--On-Surface);
+            padding-left: 0;
+            padding-right: 15px;
+            user-select: text !important;
+        }
+
+
+        #senderName{
+            position: fixed;
+            color: rgba(255, 255, 255, 0.486);
+            font-size: 15px;
+            bottom: 0;
+            padding-bottom: 5px;
+            width: calc(100% - 20px);
+            background-color: var(--Surface);
+            z-index: 1;
+            text-align: right;
+            padding-right: 20px;
+        }
+
+
+        .alert_loader{
+              --md-circular-progress-size: 55px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: fixed;
+            z-index: 1;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background-color: var(--Surface);
+            height: calc(100% - 65px);
+        }
+
+
+        alertHolder:first-child{
+            margin-top: 0 !important;
+        }
+
+        alertHolder{
+            margin-top: 10px;
+        }
+    </style>
+</head>
+
+<body style="background-color: var(--Surface);">
+
+<div class="full-activity open">
+    <div class="full-activity-header transparent round" id="head-2">
+        <button class="ripple-icon-btn close" ontouchstart="playEffect(this)" ontouchend="playEffect2(this)"
+                onclick="sendThemeToAndroid('GoBack')">
+            <span class="ripple-effect-icon"></span>
+            <span icon-outlined style="font-size: 24px !important;">arrow_back</span>
+        </button>
+
+        <p>Weather alert</p>
+    </div>
+    <div class="full-activity-content" id="Content">
+
+
+        <div id="alert_info_div">
+
+
+        </div>
+
+
+        <p id="senderName"></p>
+
+
+
+        <div class="alert_loader">
+            <md-circular-progress indeterminate style="margin-bottom: 100px;"></md-circular-progress>
+        </div>
+        <script>
+
+
+                function sendThemeToAndroid(theme) {
+
+                    AndroidInterface.updateStatusBarColor(theme);
+                };
+
+                const latDif = localStorage.getItem('currentLat');
+const longDif = localStorage.getItem('currentLong');
+const latAlerts = latDif;
+const lonAlerts = longDif;
+const apiKeyAlerts = '20a36f8e1152244bbbd9ac296d3640f2';
+
+fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${latAlerts}&lon=${lonAlerts}&exclude=current,minutely,hourly,daily&appid=${apiKeyAlerts}`)
+    .then(response => response.json())
+    .then(data => {
+        const alertInfoDiv = document.getElementById('alert_info_div');
+        const apiKeyCityName = '7147cfac7299479da122684c73d9b80a';
+        const urlcityName = `https://api.opencagedata.com/geocode/v1/json?q=${latAlerts}+${lonAlerts}&key=${apiKeyCityName}`;
+
+        if (data.alerts && data.alerts.length > 0) {
+            fetch(urlcityName)
+                .then(response => response.json())
+                .then(locationData => {
+                    if (locationData.results.length > 0) {
+                        const components = locationData.results[0].components;
+                        const city = components.city || components.town || components.village;
+                        const stateMain = components.state;
+                        const countryName = components.country;
+
+                        const locationText = `${city ? city + ', ' : ''}${stateMain ? stateMain + ', ' : ''}${countryName ? countryName : ''}`;
+
+                        let isFirstAlert = true;
+
+                        data.alerts.filter(alert => alert.description).forEach(alert => {
+                            const alertInfoDivCreate = document.createElement('alertHolder');
+                            alertInfoDivCreate.classList.add('alertHolder');
+                            const alertEventDesc = alert.description;
+                            const alertEventPage = alert.event;
+                            const startEventTime = alert.start;
+                            const endEventTime = alert.end;
+                            const senderName = alert.sender_name;
+
+                            const formatDate = (timestamp) => {
+                                const date = new Date(timestamp * 1000);
+                                return date.toLocaleString();
+                            };
+
+                            const alertDetails = alertEventDesc.split('\n').map(line => `<li>${line.trim()}</li>`).join('');
+
+                            alertInfoDivCreate.innerHTML = `
+                                ${isFirstAlert ? `
+                                    <div class="location">
+                                        <p id="alert_location">${locationText}</p>
+                                    </div>
+                                ` : ''}
+
+                                <div class="alert_event">
+                                    <md-icon icon-filled>warning</md-icon>
+                                    <p id="EventText">${alertEventPage}</p>
+                                </div>
+
+                                <div class="other_info_desc_time">
+                                    <div class="start_end">
+                                        <p><span>Start:</span> ${formatDate(startEventTime)}</p>
+                                        <p><span>End:</span> ${formatDate(endEventTime)}</p>
+                                    </div>
+
+                                    <div class="description">
+                                        <ul>${alertDetails}</ul>
+                                    </div>
+                                </div>
+                            `;
+
+                            alertInfoDiv.appendChild(alertInfoDivCreate);
+                            isFirstAlert = false;
+                        });
+
+                        document.getElementById('senderName').innerHTML = 'Sender: ' + (data.alerts[0].sender_name || 'N/A');
+
+                    } else {
+                        console.log('No location results found');
+                    }
+                })
+                .catch(error => console.error('Error fetching location data:', error));
+
+        } else {
+            console.log('No alerts');
+        }
+    })
+    .catch(error => console.error('Error:', error));
+
+
+
+
+                const user2 = document.getElementById('Content')
+
+                function changeColorOnScroll2() {
+                    var container = document.getElementById('Content');
+                    var scrollY = container.scrollTop;
+
+                    if (scrollY >= 10) {
+                        document.getElementById('head-2').style.backgroundColor = 'var(--Surface-Container)';
+                        document.getElementById('head-2').style.transition = '';
+
+
+                        container.removeEventListener('scroll', changeColorOnScroll2);
+                        sendThemeToAndroid('Scrolled')
+                    } else {
+
+                    }
+                }
+
+
+                if (user2) {
+                    document.getElementById('Content').addEventListener('scroll', changeColorOnScroll2);
+                } else {
+
+                }
+
+
+                function changeColorOnScroll2A() {
+                    var container = document.getElementById('Content');
+                    var scrollY = container.scrollTop;
+
+                    if (scrollY <= 0) {
+                        document.getElementById('head-2').style.backgroundColor = '';
+                        document.getElementById('head-2').style.transition = 'background-color 0.2s ease-in';
+
+                        sendThemeToAndroid('ScrollFalse')
+                        container.addEventListener('scroll', changeColorOnScroll2);
+                        if (scrollY <= 20); {
+
+
+                        }
+
+                    } else {
+
+                    }
+                }
+
+                if (user2) {
+                    document.getElementById('Content').addEventListener('scroll', changeColorOnScroll2A);
+                }
+
+
+                setTimeout(() => {
+                    document.querySelector('.alert_loader').hidden = true;
+                }, 2000);
+            </script>
+
+        <script src="../components-script.js/components.js"></script>
+        <script src="../ripple-files/icon-ripple.js"></script>
+        <script src="../modules/scroll.js"></script>
+        <script src="../modules/ripple_acc.js"></script>
+        <script src="../app/navigate.js"></script>
+        <script src="../bundle.js"></script>
+        <script type="module" src="../index.js"></script>
+</body>
+
+</html>

app/src/main/assets/pages/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/pages/moonphaseUi.css

@@ -0,0 +1,202 @@
+* {
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+    touch-action: manipulation;
+    -webkit-user-drag: none;
+    outline: none;
+}
+
+p {
+    margin: 0;
+}
+
+
+body,
+html {
+    background: linear-gradient(0deg, #4e2bad, #2b226f);
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100vh;
+}
+
+.moon_activity {
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    position: fixed;
+    background: linear-gradient(0deg, #4e2bad, #2b226f);
+}
+
+.moon_activity_header {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    height: 45px;
+    padding-left: 4px;
+    background-color: transparent;
+    overflow: hidden;
+}
+
+.moon_activity_header p {
+    margin: 0;
+    font-family: 'outfit';
+    margin-left: 8px;
+    font-size: 23px;
+
+}
+
+.moon_phase_current_data{
+    display: flex;
+    flex-direction: column;
+}
+
+.moon_phase_img_text_current img{
+    height: 190px;
+    position: absolute;
+    top: -20px;
+}
+
+.moon_phase_img_text_current{
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    gap: 0px;
+    position: relative;
+    padding-bottom: 10px;
+    height: 166px;
+}
+
+.moon_phase_img_text_current p{
+    font-family: var(--outfit-mid);
+    font-size: 25px;
+    position: absolute;
+    bottom: 0;
+}
+
+.moon_phase_current_text_data{
+    background-color: rgba(0, 0, 0, 0.308);
+    margin: 10px;
+    padding: 20px;
+    border-radius: 10px;
+    margin-top: 20px;
+}
+
+.moon_phase_current_text_data .moon_phase_current_text_data_item{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    font-family: var(--outfit);
+    
+}
+
+.moon_phase_current_text_data .moon_phase_current_text_data_item:last-child{
+    margin-bottom: 0;
+}
+
+.moon_phase_current_text_data .moon_phase_current_text_data_item span{
+    color: white;
+    opacity: 0.8;
+    font-size: 18px;
+}
+
+.moon_phase_current_text_data .moon_phase_current_text_data_item p{
+    font-family: var(--outfit-mid);
+}
+
+.moon_Phase_content{
+    height: calc(100% - 65px);
+    overflow: auto;
+}
+
+.moon_Phase_content::before {
+    position: fixed;
+    bottom: 0;
+    content: '';
+    width: 100%;
+    background: linear-gradient(0deg, #2b226f 10%, rgba(255, 0, 0, 0));
+    height: 30px;
+    z-index: 1;
+}
+
+
+
+moonPhasetitle{
+    padding-left: 12px;
+    font-family: var(--google-mid);
+    margin-top: 15px;
+    font-size: 16px;
+    opacity: 0.7;
+    display: block;
+    color: #ffffff;
+
+
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.moonPhase_forecast div img{
+height:80px;
+}
+
+.moonPhase_forecast {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    padding: 10px;
+    gap: 10px;
+    padding-bottom: 32px;
+}
+
+.moonPhase_forecast div{
+    background-color: rgba(0, 0, 0, 0.2);
+    display: flex;
+    padding: 10px;
+    flex-direction: column;
+    border-radius: 10px;
+    padding-bottom: 15px;
+    padding-top: 12px;
+    align-items: center;
+}
+
+.moonPhase_forecast div p{
+    font-size: 15px;
+    font-family: var(--outfit-mid);
+    
+    text-align: center;
+}
+
+.moonPhase_forecast div span{
+    font-size: 15px;
+    font-family: var(--outfit);
+    opacity: 0.7;
+    display: block;
+    width: 100%;
+    text-align: left;
+}   
+
+
+
+
+.moonphase_loader{
+    --md-circular-progress-size: 55px;
+    --md-sys-color-primary: rgb(191, 173, 255);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: #2b226f;
+  height: 100%;
+  transition: opacity 0.3s ease-out;
+}
+
+
+[hidden]{
+    display: none !important;
+}

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

@@ -114,7 +114,7 @@
             </md-list>
 
 
-            <p style="margin-top: 160px;"></p>
+            <p style="margin-top: 110px;"></p>
 
 
 

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

@@ -29,6 +29,13 @@
 
 }
 
+@font-face {
+  font-family: 'Outfit-mid';
+  src: url('../fonts/Outfit-Medium.ttf') format('truetype');
+
+}
+
+
 @font-face {
   font-family: 'Google-medium';
   src: url('../fonts/ProductSans-Medium.ttf') format('truetype');

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

@@ -34,14 +34,95 @@ body {
 .header-top {
   padding: 10px;
   height: 45px;
-  padding-left: 4px;
   background-color: var(--Surface);
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  padding-left: 12px;
+  padding-right: 12px;
 
 }
 
+.header-top::before {
+  position: fixed;
+  top: 65px;
+  content: '';
+  width: 100%;
+  background: linear-gradient(180deg, var(--Surface) 10%, rgba(255, 0, 0, 0));
+  height: 30px;
+  opacity: 0;
+  z-index: 1;
+  left: 0;
+  transition: opacity 1s ease-out;
+}
+
+.header-top.use::before{
+  opacity: 1;
+}
+
+.header-top .header_hold{
+  background-color: var(--Surface-Container);
+  display: flex;
+  width: 100%;
+  height: 56px;
+  border-radius: 50px;
+  padding-left: 10px;
+  padding-right: 10px;
+  position: relative;
+  overflow: hidden;
+   transition: all 0.2s ease-out;
+
+}
+
+selectLocationText{
+  top: 0;
+  background-color: var(--Secondary-Container);
+  left: 0;
+  width: calc(100% - 46px);
+  position: fixed;
+  min-height: 56px;
+  margin: 12px;
+  margin-top: 5px;
+  z-index: 2;
+  border-radius: 10px;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding-left: 10px;
+  font-size: 18px;
+  color: var(--On-Surface);
+  padding-right: 12px;
+  animation: 0.2s selectLocationText ease-out;
+}
+
+selectLocationTextOverlay{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+@keyframes selectLocationText{
+  0%{
+    opacity: 0;
+    transform: scale(0.9);
+  } 100%{
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+
+touch_search{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+
 #city-name {
   font-size: 18px;
   font-weight: normal;
@@ -51,18 +132,16 @@ body {
   width: calc(100% - 20px);
   white-space: nowrap;
   color: var(--On-Surface);
+  opacity: 0.8;
+
 }
 
-#main-city span {
-  font-size: 24px;
-  color: var(--Secondary);
-}
+
 
 .main-city {
   display: flex;
   align-items: center;
   width: 100%;
-  gap: 5px;
   overflow: hidden;
 }
 
@@ -78,82 +157,111 @@ body {
   background: linear-gradient(0deg, var(--Secondary-Container) 10%, var(--Surface));
 
   position: relative;
-  height: 180px;
+  height: 150px;
   /* border-radius: 0 0 10px 10px; */
   overflow: hidden;
   transition: opacity 0.2s;
 
 }
 
+.current{
+  display: flex;
+  align-self: center;
+  justify-content: space-between;
+  padding-left: 15px;
+  padding-top: 10px;
+  padding-right: 15px;
+}
 
+.current .left_current_weather now{
+  font-family: var(--google-mid);
+  color: var(--Secondary);
+  opacity: 0.95;
+  font-size: 17px;
+}
 
-.current p {
+.left_current_weather .temp_img{
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.current .left_current_weather .high_low_temp{
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding-top: 5px;
+}
+
+.current .left_current_weather .high_low_temp p{
+  margin: 0;
+  display: flex;
+  font-size: 15px;
+  color: var(--On-Surface-Variant);
+  align-items: center;
+}
+
+.current .left_current_weather .high_low_temp i{
+  font-size: 20px;
+}
+
+.left_current_weather .temp_img p{
+  color: var(--Primary);
+  font-size: 60px;
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  font-weight: 500;
+}
+
+.left_current_weather .temp_img img{
+  height: 55px;
+}
+
+.disc_main p{
+  margin: 0;
+  color: var(--On-Surface);
+  font-size: 17px;
+  display: flex;
+  text-align: right;
+  text-transform: capitalize;
+  font-family: var(--outfit-mid);
+  font-weight: 500;
+}
+
+.main-weat .dew_per{
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  display: flex;
+  align-items: center;
+  color: var(--Secondary);
+  font-family: var(--google-mid);
+  font-size: 16px;
+  gap: 4px;
+}
+
+.main-weat .dew_per p{
   margin: 0;
 }
 
+.main-weat .dew_per i{
+  font-size: 20px;
+}
 
-.img-div {
-  position: absolute;
-  right: 25px;
+.disc_main{
+  width: calc(100% - 190px);
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 90px;
-  height: 90px;
-  top: 30px;
-  border-radius: 100px;
+  align-items: flex-end;
+  flex-direction: column;
+  gap: 5px;
 }
 
-.img-div img {
-  width: 90px;
-
+.disc_main span{
+  color: var(--On-Surface-Variant);
+  font-family: var(--outfit);
+  font-size: 15px;
 }
 
-.temp-main {
-  color: var(--Primary);
-  position: absolute;
-  top: 10px;
-  left: 15px;
-  font-size: 65px;
-  width: max-content;
-  font-family: var(--google-mid);
-
-}
-
-#temp span {
-  font-size: 30px;
-  position: absolute;
-  top: 3px;
-  font-family: var(--google-mid);
-
-}
-
-#temp {
-  position: relative;
-
-}
-
-.current {
-  position: relative;
-  width: max-content;
-  height: 100%;
-}
-
-.disc-main {
-  position: absolute;
-  bottom: 20px;
-  left: 15px;
-  color: var(--On-Surface);
-  font-size: 25px;
-  width: calc(100vw - 170px);
-
-}
-
-
-.disc-main p {
-  width: 100%;
-  text-transform: capitalize;
-}
 
 .weather_wrap {
   overflow: auto;
@@ -175,6 +283,7 @@ body {
   background: linear-gradient(0deg, var(--Surface) 10%, rgba(255, 0, 0, 0));
   height: 30px;
   z-index: 1;
+  left: 0;
 }
 
 
@@ -182,28 +291,24 @@ body {
 .high-all {
   background-color: var(--Surface);
   margin: 10px;
-
-  padding-left: 10px;
-  padding-right: 10px;
-  border-radius: 10px 10px 5px 5px;
-
+  border-radius: 0 0 5px 5px;
   margin-bottom: 5px;
+  margin-top: 0;
+  overflow: hidden;
 }
 
 .high-mini {
   display: flex;
   align-items: center;
-  width: calc(100% - 20px);
   justify-content: space-between;
-  padding-left: 10px;
-  padding-right: 10px;
 }
 
 .high-mini .mini {
   display: flex;
   align-items: center;
   gap: 5px;
-  border-radius: 10px;
+  width: 100%;
+  justify-content: center;
 }
 
 .high-mini .mini p {
@@ -234,7 +339,7 @@ body {
 .forecast {
   display: flex;
   overflow: auto;
-  gap: 10px;
+  gap: 5px;
   margin: 10px;
 }
 
@@ -251,19 +356,20 @@ body {
 .forecast #forecast24 {
   transition: all 0.3s cubic-bezier(1, 0, 0, 1);
   flex-shrink: 0;
-  /* background-color: var(--Surface-Container-Low); */
-  background-color: rgba(0, 0, 0, 0.247);
-  border-radius: 10px;
-  padding-left: 13px;
-  padding-right: 13px;
+  border-radius: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  padding-bottom: 15px;
+  padding-bottom: 16px;
+  gap: 10px;
+  padding-top: 16px;
   margin-bottom: 5px;
-  min-width: calc(60px + 2px);
   position: relative;
+  width: 45px;
+  background: linear-gradient(0deg,var(--Surface), rgba(0, 0, 0, 0.247) 10% , var(--Surface));
 }
 
 
@@ -326,22 +432,21 @@ body {
 }
 
 .temp-24 {
-  margin: 20px 0;
   color: var(--On-Surface);
-  margin-bottom: 0;
   font-family: var(--google-mid);
+  margin: 0;
 }
 
 .icon-24 {
-  width: 35px;
+  width: 30px;
   margin-top: 5px;
 }
 
 .time-24 {
-  margin-bottom: 5px;
   color: var(--On-Surface-Variant);
-  border-bottom: 1px solid var(--Outline-Variant);
-
+  font-family: var(--outfit-mid);
+  font-size: 14px;
+  margin: 0;
 }
 
 .toast-container {
@@ -396,16 +501,16 @@ body {
   background-color: rgba(0, 0, 0, 0.247);
 
   padding: 10px;
-  border-radius: 10px;
+  border-radius: 5px;
 
 }
 
 .forecast-5day div:first-child {
-  border-radius: 20px 20px 0 0;
+  border-radius: 10px 10px 5px 5px;
 }
 
 .forecast-5day div:last-child {
-  border-radius: 0 0 20px 20px;
+  border-radius: 5px 5px 10px 10px;
 
 }
 
@@ -417,19 +522,43 @@ body {
 
 .disc-5d {
   position: absolute;
-  right: 80px;
-  font-size: 18px;
-  color: var(--Secondary);
+  right: 70px;
+  font-size: 16px;
+  color: var(--On-Surface);
+  top: 13px;
+  font-family: var(--outfit-mid);
+  margin: 0;
+  opacity: 0.9;
 }
 
+.disc-5d span{
+  color: var(--On-Surface-Variant);
+  opacity: 0.8;
+}
+
+.forecast-5day .forecast-item-forecast .daily_rain{
+  position: absolute;
+  right: 70px;
+  color: #97cbff;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  top: calc(13px + 25px);
+  display: flex;
+  align-items: center;
+}
+
+
 .d5-disc-text {
   margin: 0;
   text-transform: capitalize;
   font-size: 16px;
-  font-family: var(--google-normal);
-  display: flex !important;
-  align-items: flex-end !important;
-  flex-direction: column;
+  font-family: var(--outfit);
+  direction: ltr;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: calc(100% - 130px);
+  white-space: nowrap;
   gap: 3px;
   color: var(--On-Surface);
   padding: 3px !important;
@@ -498,7 +627,6 @@ body {
   height: calc(45px - 1px);
   padding-left: 5px;
   background-color: var(--Surface);
-  gap: 10px;
   position: relative;
 }
 
@@ -509,6 +637,7 @@ body {
   caret-color: var(--caret);
   font-family: var(--google-normal);
   color: var(--On-Surface);
+  padding-left: 10px;
 }
 
 .main-options input::selection {
@@ -740,7 +869,10 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-top:30px;
+ position: absolute;
+   top: -40px;
+     width: 100%;
+
 }
 
 .no_internet_error .text_content_error{
@@ -749,6 +881,7 @@ body {
   justify-content: center;
   align-items: center;
   text-align: center;
+  margin-top: 220px;
 }
 .no_internet_error .text_content_error p{
   font-size: 30px;
@@ -766,7 +899,7 @@ body {
   align-items: center;
   width: calc(100% - 40px);
   position: absolute;
-  bottom: 50px;
+  bottom: 30px;
   justify-content: center;
   padding: 20px;
 }
@@ -783,7 +916,7 @@ body {
 
 }
 
-.city-list .suggest {
+.city-list .suggestion-item {
   font-size: 18px;
   color: var(--On-Surface);
   position: relative;
@@ -803,7 +936,7 @@ suggest-space{
   margin-top: 10px;
 }
 
-.city-list .suggest::before {
+.city-list .suggestion-item::before {
   content: 'pin_drop';
   font-family: 'Material symbols';
   font-weight: normal !important;
@@ -821,12 +954,27 @@ suggest-space{
   flex-shrink: 0;
 }
 
+
+.city-list .suggestion-item span {
+  width: 30px;
+  height: 30px;
+  margin-left: 5px;
+  background-size: cover;
+  background-position: center;
+  flex-shrink: 0;
+  display: flex;
+  border-radius: 50px;
+  position: absolute;
+  left: 10px;
+}
+
+
 #updated-div {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 10px;
-  margin-bottom: 50px;
+  margin-bottom: 30px;
 
   color: var(--On-Surface-Variant);
   border-radius: 50px;
@@ -880,9 +1028,10 @@ background: linear-gradient(0deg, rgba(255, 0, 0, 0), var(--Secondary-Container)
   align-items: center;
   background-color: var(--Surface);
   margin: 10px;
-  border-radius: 5px 5px 10px 10px;
+  border-radius: 5px;
   padding: 10px;
   margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 .cloths div{
@@ -908,7 +1057,7 @@ background: linear-gradient(0deg, rgba(255, 0, 0, 0), var(--Secondary-Container)
   align-items: center;
   gap: 10px;
   padding: 10px;
-  margin-top: 5px;
+  margin-top: 0px;
 }
 
 .currentSearchImg{
@@ -923,7 +1072,7 @@ background: linear-gradient(0deg, rgba(255, 0, 0, 0), var(--Secondary-Container)
 }
 
 .currentSearchImg img{
-  width: 30px;
+  width: 25px;
 }
 
 currentLocationNames{
@@ -943,6 +1092,7 @@ currentLocationNames p{
 currentLocationNames span{
   font-size: 16px;
   color: var(--On-Surface-Variant);
+    text-transform: capitalize;
 }
 
 .fab-holder{
@@ -962,7 +1112,7 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
   margin: 10px;
   display: flex;
   align-items: center;
-  border-radius: 10px;
+  border-radius: 10px 10px 5px 5px;
   padding: 10px;
   gap: 15px;
   font-size: 16px;
@@ -1007,13 +1157,14 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  font-size: 16px;
   gap: 3px;
 }
 
 .excessiveHeat p text{
   font-size: 15px;
   font-family: var(--google-normal);
-  opacity: 0.9;
+  opacity: 0.8;
 }
 .excessiveHeat p span{
   font-size: 15px;
@@ -1132,14 +1283,14 @@ sun{
   --md-circular-progress-active-indicator-width: 13;
   stroke-linecap: round;
   z-index: 1;
-  --md-sys-color-primary: #5fb1f8;
+  --md-sys-color-primary: #a7d278;
 }
 
 .currentConditions currentConditonIcon .md-circle02{
   --md-circular-progress-size: 100px;
   --md-circular-progress-active-indicator-width: 13;
   stroke-linecap: round;
-  --md-sys-color-primary: #cee4ff;
+  --md-sys-color-primary: #c4eed0;
   position: absolute;
 }
 
@@ -1236,17 +1387,20 @@ rainMeterBar rainmeterbaritem{
   flex-direction: column;
   justify-content: center;
   gap: 5px;
+    transition: all 0.3s cubic-bezier(1, 0, 0, 1);
 
 }
 
 rainMeterBar rainmeterbaritem rainperbar{
    /* max-height: 55px;
   min-height: 5px;    */
-  height: 60px;
-  width: 35px;
+  height: 65px;
+  width: 20px;
   /* border: 1px solid #7cacf8; */
+  background-color: var(--Surface-Container);
+  overflow: hidden;
   display: block;
-  border-radius: 5px;
+  border-radius: 50px;
   position: relative;
 
 }
@@ -1255,16 +1409,14 @@ rainMeterBar rainmeterbaritem rainperbar rainperbarProgress{
   position: absolute;
   width: 100%;
   height: 5%;
-  min-height: 10%;
   background: #4c8df6;
-  border: 1px solid #4c8df6;
-  border-radius: 5px;
   bottom: 0;
   left: 0;
 }
 
 
 
+
 rainMeterBar rainmeterbaritem span{
   color: var(--On-Surface-Variant);
   font-size: 14px;
@@ -1273,6 +1425,8 @@ rainMeterBar rainmeterbaritem span{
 rainMeterBar rainmeterbaritem p{
   margin: 0;
   color: var(--On-Surface);
+    font-family: var(--outfit-mid);
+
 }
 
 rainMeterBar{
@@ -1283,23 +1437,31 @@ rainMeterBar{
   padding-left: 15px;
   padding-right: 15px;
   gap: 25px;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+rainMeterBar::-webkit-scrollbar {
+  height: 2px;
+}
+
+rainMeterBar::-webkit-scrollbar-thumb {
+  background-color: var(--Primary);
+
 }
 
 #map {
-  height: 250px;
-  border-radius: 10px;
+    height: calc(100% - 0px);
+
   position: relative;
 }
 
 .map_wrap{
-  background-color: var(--Secondary-Container);
-  padding: 5px;
-  border-radius: 10px;
-  margin: 10px;
+height: 100%;
 }
 
 .LiveMapWrap #livemapPreview img{
-  border-radius: 10px;
+  border-radius: 5px 5px 10px 10px;
   width: 100%;
   height: 100px;
   z-index: -1;
@@ -1313,24 +1475,23 @@ rainMeterBar{
   margin: 10px;
   padding: 10px;
   background-color: var(--Surface);
-  border-radius: 10px;
+  border-radius: 5px 5px 10px 10px;
   position: relative;
+  margin-top: 0;
 }
 
 .LiveMapWrap::before{
-  width: 100%;
-  height: 100%;
+  width: calc(100% - 20px);
+  height: calc(100% - 20px);
   position: absolute;
   border-radius: inherit;
   content: 'Live map';
   background-color: rgba(0, 0, 0, 0.5);
-  top: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 30px;
   color: rgb(255, 255, 255);
-  left: 0;
 }
 
 .liveMapScreen{
@@ -1434,4 +1595,268 @@ rainMeterBar{
 
 .moonSideWrap .leftWrapMoon .moonrise-Set span{
   color: var(--On-Surface);
+}
+
+/* pressure */
+
+.prssure_area .pressure_progress_bg{
+  --md-circular-progress-size: 100px;
+  --md-circular-progress-active-indicator-width: 13;
+  stroke-linecap: round;
+  --md-sys-color-primary: #cee4ff;
+  position: absolute;
+}
+
+.prssure_area .pressure_progress_main{
+  --md-circular-progress-size: 100px;
+  --md-circular-progress-active-indicator-width: 13;
+  stroke-linecap: round;
+  z-index: 1;
+  --md-sys-color-primary: #5fb1f8;
+}
+
+.prssure_area{
+  transform: rotate(215deg);
+}
+
+.text_press_lowHigh{
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding-left: 20px;
+  padding-right: 20px;
+  font-size: 14px;
+  color: var(--On-Surface);
+  opacity: 0.7;
+}
+
+
+.weatherComments{
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 10px;
+  margin-top: 5px;
+  gap: 10px;
+  border-radius: 10px 10px 0 0;
+  margin-bottom: 0;
+}
+
+.weatherComments.alertOpened{
+  border-radius: 5px 5px 0 0;
+}
+
+.weatherComments::before{
+  background-color: var(--Surface);
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: '';
+  z-index: -1;
+}
+
+.weatherComments .icon-container-weatherComments{
+  background-color: var(--Secondary);
+  color: var(--On-Secondary);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 10px;
+  font-size: 24px;
+}
+
+.weatherComments p{
+  margin: 0;
+  color: var(--On-Surface);
+  font-family: var(--outfit);
+  font-size: 15px;
+    line-height: 1.5;
+
+}
+
+
+.map_picker{
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99900;
+  width: 100%;
+  background-color: var(--Surface);
+  height: 100%;
+  overflow: hidden;
+  animation: map_picker 0.3s cubic-bezier(1,0,0,1);
+  transition: all 0.3s cubic-bezier(1,0,0,1);
+}
+
+@keyframes map_picker {
+  0%{
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  100%{
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.map_picker .topLocationPickerActions{
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  height: calc(45px - 1px);
+  border-bottom: 1px solid var(--Outline);
+  gap: 10px;
+  background-color: var(--Surface);
+}
+
+.map_picker .topLocationPickerActions p{
+  margin: 0;
+  color: var(--On-Surface);
+  font-size: 20px;
+}
+
+.map_picker .map_pick_holder{
+  height: calc(100% - 65px);
+  width: 100%;
+  overflow: hidden;
+}
+
+
+.map_pick_holder::before {
+  position: fixed;
+  bottom: 0;
+  content: '';
+  width: 100%;
+  background: linear-gradient(0deg, var(--Surface) 10%, rgba(255, 0, 0, 0));
+  height: 30px;
+  z-index: 99999999;
+  left: 0;
+}
+
+savedLocationsHolder{
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+  padding: 10px;
+  flex-direction: column;
+
+}
+
+savedLocationsHolder savedLocationItem{
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+  position: relative;
+
+}
+
+savedLocationsHolder savedLocationItem savedlocationimg{
+  width: 40px;
+  height: 40px;
+  background-color: var(--Secondary-Container);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+  flex-shrink: 0;
+}
+
+savedLocationsHolder savedLocationItem savedlocationimg img{
+  width: 25px;
+}
+
+savedLocationsHolder savedLocationItem div p{
+  margin: 0;
+  font-size: 18px;
+  color: var(--On-Surface);
+}
+
+
+savedLocationsHolder savedLocationItem div span{
+  margin: 0;
+  font-size: 18px;
+  color: var(--On-Surface);
+  font-size: 16px;
+  color: var(--On-Surface-Variant);
+  text-transform: capitalize;
+}
+
+
+
+savedLocationsHolder savedLocationItem div{
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  flex-direction: column;
+  gap: 5px;
+}
+
+flex{
+  flex: 1;
+}
+
+savedLocationsHolder md-icon-button{
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+savelocationtouch{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+
+savelocationtouch md-ripple{
+  --md-ripple-pressed-opacity: 0.1;
+}
+
+.air_quality_key_details{
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 15px;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  padding-top: 15px;
+  margin: 10px;
+}
+
+.air_quality_key_details .air_quality_key_item air_key_color{
+  height: 4px;
+  border-radius: 50px;
+  max-width: 50%;
+  display: block;
+  width: 20px;
+}
+
+.air_quality_key_details .air_quality_key_item{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 5px;
+}
+
+.air_quality_key_details .air_quality_key_item span{
+  color: white;
+  font-size: 14px;
+  font-family: var(--google-mid);
+}
+
+.air_quality_key_details .air_quality_key_item p{
+  margin: 0;
+  font-family: var(--outfit-mid);
+  color: var(--On-Surface);
 }

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

@@ -5,6 +5,7 @@
     --google-mid: 'Google-medium';
     --poppins: 'Poppins';
     --outfit: 'Outfit';
+     --outfit-mid: 'Outfit-mid';
     --Modal-Backdrop: rgb(0, 0, 0, 0.6);
 
 }
@@ -159,7 +160,7 @@
     --Surface-Bright: #38393e;
     --Surface-Container-Lowest:#0d0e12 ;
     --Surface-Container-Low: #012438;
-    --Surface-Container: #112535;
+    --Surface-Container: #152d41;
     --Surface-Container-High: #292a2e;
     --Surface-Container-Highest: #343439;
     --Inverse-Surface: #e3e2e8;
@@ -201,7 +202,7 @@
     --Surface-Bright: #383942;
     --Surface-Container-Lowest:#0c0e16 ;
     --Surface-Container-Low: #001742;
-    --Surface-Container: #0c1e41;
+    --Surface-Container: #132344;
     --Surface-Container-High: #282932;
     --Surface-Container-Highest: #33343d;
     --Inverse-Surface: #e2e1ed;
@@ -743,7 +744,7 @@
     --Surface-Bright: #38393e;
     --Surface-Container-Lowest:#0d0e12 ;
     --Surface-Container-Low: #012438;
-    --Surface-Container: #112535;
+    --Surface-Container: #2a3641;
     --Surface-Container-High: #292a2e;
     --Surface-Container-Highest: #343439;
     --Inverse-Surface: #e3e2e8;
@@ -786,7 +787,7 @@
     --Surface-Bright: #38393e;
     --Surface-Container-Lowest:#0d0e12 ;
     --Surface-Container-Low: #012438;
-    --Surface-Container: #112535;
+    --Surface-Container: #2a3641;
     --Surface-Container-High: #292a2e;
     --Surface-Container-Highest: #343439;
     --Inverse-Surface: #e3e2e8;
@@ -929,6 +930,7 @@
     --Shadow: #000000;
 
     --caret: #aac7ff;
+    --Top-bar: 64, 70, 89;
 
 
 }

app/src/main/java/com/example/weathermaster/AlertPage.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 AlertPage 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/alertPage.html");
+
+    }
+
+
+
+
+    public class AndroidInterface {
+        private AlertPage aActivity;
+
+        AndroidInterface(AlertPage 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/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,15 @@ public class MainActivity extends AppCompatActivity {
                     } else if (color.equals("OpenSettings")){
                         openSettingsActivity();
                         return;
-
+                    } else if (color.equals("Open8Forecast")){
+                        openForecastPage();
+                        return;
+                    } else if (color.equals("OpenAlertsPage")){
+                        OpenAlertsPage();
+                        return;
+                    } else if (color.equals("OpenMoonPhasesPage")){
+                        OpenMoonPhasesPage();
+                        return;
                     } else if (color.equals("GoBack")){
                         back();
                         return;
@@ -417,6 +425,20 @@ public class MainActivity extends AppCompatActivity {
                     mActivity.startActivity(intent);
         }
 
+        public void openForecastPage(){
+            Intent intent = new Intent(mActivity, ForecastPage.class);
+            mActivity.startActivity(intent);
+        }
+
+        public void OpenAlertsPage(){
+            Intent intent = new Intent(mActivity, AlertPage.class);
+            mActivity.startActivity(intent);
+        }
+
+        public void OpenMoonPhasesPage(){
+            Intent intent = new Intent(mActivity, MoonPhases.class);
+            mActivity.startActivity(intent);
+        }
     }
 
     public void back() {

app/src/main/java/com/example/weathermaster/MoonPhases.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 MoonPhases 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.MoonPhase));
+        setTheme(R.style.blue_caret);
+        webview.loadUrl("file:///android_asset/pages/MoonPhases.html");
+
+    }
+
+
+
+
+    public class AndroidInterface {
+        private MoonPhases aActivity;
+
+        AndroidInterface(MoonPhases 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/res/values/colors.xml

@@ -25,5 +25,6 @@
 
 
     <color name="mainBG">#121317</color>
+    <color name="MoonPhase">#2b226f</color>
     <color name="diffDefault">#0e1d2a</color>
 </resources>

app/src/main/res/values/themes.xml

@@ -23,6 +23,13 @@
 
     </style>
 
+    <style name="ScreenMoonPhase" parent="Theme.AppCompat.NoActionBar">
+        <item name="android:navigationBarColor">@color/MoonPhase</item>
+        <item name="android:statusBarColor">@color/MoonPhase</item>
+        <item name="colorAccent">#afc6ff</item>
+
+
+    </style>
 
     <style name="blue_caret" parent="Theme.AppCompat.NoActionBar">
         <item name="colorAccent">#aac7ff</item>

release/output-metadata.json

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