# 🌦️ WeatherMaster 

<img src="https://github.com/PranshulGG/WeatherMaster/blob/master/preview/partly_cloudy_day.svg" alt="" width="150px">

WeatherMaster is developed with pure HTML, CSS, JavaScript, and Java. Designed to mimic the look and feel of a native Android app.

`(Last updated on 10-08-2024 at 9:34 AM UTC)`

![app_thumbnail](preview/thumbnail.png)

<br>
<br>

# 👁️ Screenshots

> [!NOTE]
> **Screenshots may differ from the current version.**

<table style="width: 100%; border-collapse: collapse;">
  <tr>
    <th style="text-align: center; padding: 10px;">Current & 24hrs</th>
    <th style="text-align: center; padding: 10px;">Hourly Precipitation & 8-Day Forecast</th>
    <th style="text-align: center; padding: 10px;">Radar & Moon/Sun</th>
  </tr>
  <tr>
    <td style="text-align: center;"><img src="preview/current.jpeg" style="width: 100%; max-width: 250px;"></td>
    <td style="text-align: center;"><img src="preview/rain_8_days.jpeg" style="width: 100%; max-width: 250px;"></td>
    <td style="text-align: center;"><img src="preview/map_sun_moon.png" style="width: 100%; max-width: 250px;"></td>
  </tr>
  <tr>
    <th style="text-align: center; padding: 10px;">Current Conditions</th>
    <th style="text-align: center; padding: 10px;">Air and UV Index</th>
    <th style="text-align: center; padding: 10px;">Government Alerts</th>
  </tr>
  <tr>
    <td style="text-align: center;"><img src="preview/details.png" style="width: 100%; max-width: 250px;"></td>
    <td style="text-align: center;"><img src="preview/air_uv.jpeg" style="width: 100%; max-width: 250px;"></td>
    <td style="text-align: center;"><img src="preview/gov_alert.png" style="width: 100%; max-width: 250px;"></td>
  </tr>
  <tr>
    <th style="text-align: center; padding: 10px;">Moon Phases</th>
    <th style="text-align: center; padding: 10px;">Settings</th>
    <th style="text-align: center; padding: 10px;">Forecast Page</th>
  </tr>
  <tr>
    <td style="text-align: center;"><img src="preview/moonphases.png" style="width: 100%; max-width: 250px;"></td>
    <td style="text-align: center;"><img src="preview/settings.jpeg" style="width: 100%; max-width: 250px;"></td>
    <td style="text-align: center;"><img src="preview/forecast_page.jpeg" style="width: 100%; max-width: 250px;"></td>
  </tr>
</table>



<br>

# 🌐 Help translate the app on POEditor 
<a href="https://poeditor.com/join/project/DxrGXdoUGF"><img alt="GitHub" src="preview/figma_btn.svg" height="80"/></a>

# 📲 Download

<table style="width: 100%; border-collapse: collapse;">
  <tr>
   <td style="text-align: center;"> <a href="https://github.com/PranshulGG/WeatherMaster/releases"><img alt="GitHub" src="https://censorship.no/img/github-badge.png" height="120"/></a></td>
    <td style="text-align: center;"> <a href="https://apt.izzysoft.de/fdroid/index/apk/com.example.weathermaster"><img alt="GitHub" src="preview/download_Btn.png" height="120"/></a></td>
  </tr>
</table>

# ✨ Features:

- 🌤️ **Current Weather:** Get real-time updates on weather conditions in your area.
- 📢 **Government Weather Alerts:** Receive official alerts and warnings to stay safe.
- ⏳ **24-Hour Forecast:** Plan your short-term activities with accurate forecasts for the next two days.
- 📅 **14-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.


# 🌞 Weather providers:
- [**open-meteo**](https://open-meteo.com)
- [**WeatherApi**](https://www.weatherapi.com/)
- [**OpenWeatherMap**](https://openweathermap.org/api)

# ⚙️ Other:

 - 📱<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.

 - ⚙️<strong>Customization Options: </stronge>Enjoy a ton of customization options. Adjust themes, Units.

 - 📐<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:

 - <strong>HTML & CSS: </stronge> For the basic structure and styling of the app.

 - <strong>JavaScript: </stronge>To handle the app's logic and interactivity.

 - <strong>Java: </stronge>Mainly used for JavaScript interface and permissions, allowing the app to run on Android devices.

 - <strong>Material Web Components: </stronge>Utilized to create a consistent and attractive Material Design look and feel.

 - <strong>Weather icons</strong>: <a href="https://gitlab.com/bignutty/google-weather-icons">Google weather icons

 # 📝 Todos:

 - ✅ Adding cache to reduce api requests
 - ✅ Translations
 - ⬛ Widgets / Notifications (under construction)
 - ✅ Make it lightweight
 - ✅ Allows you to add multiple locations
 - ✅ Customization 
 - ✅ More detailed weather 
 - ✅ Live weather map
 - ✅ Pick locations using map
 - ✅ Change app colors according to the weather
 -  Any user suggestions :)
<br>
<br>

> [!NOTE]
> 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.
<br>

# Contact
For any questions or feedback, feel free to open an issue on GitHub or contact pranshul.devmain@gmail.com

<br>

# License
This project is licensed under the GPL-3.0 license. See the `LICENSE` file for details.