diff --git a/README.md b/README.md index 43eeb05..b7b596d 100644 --- a/README.md +++ b/README.md @@ -17,9 +17,10 @@ - [Customization](#customization) - [Links and Icons](#links-and-icons) - [Colors](#colors) - - [Wather Widget](#weather-widget) - - [Greetings](#greetings) - [Image Background](#image-background) + - [Greetings](#greetings) + - [Wather Info](#weather-info) + - [Weather Icons](#image-background) #### Features: - **Dark/Light** mode, you can toggle them and It'll be saved in local store @@ -79,11 +80,15 @@ In the CSS code you can always change the variables for both themes (Dark and Li
Dark mode
-#### Weather Widget +#### Image Background -For setting up the Weather widget you're going to need an API Key in: `https://openweathermap.org/`. Once you have your Key you'll need to set yourlatitude and longitude, you can use: `https://www.latlong.net/` to get them. Once you have the data, you'll need to set them in the `weather.js` in the **js** folder. The code is +You can set your own background image with the variable `--imgbg` and set the route to the image you want It's disable by default. If you uncomment the variable, it has by default this image: -> If you don't like the idea of having your API Key public, you can make the repo into a private one. You can still use the Github Pages service. +

+ +

+ +It has a black filter by default in `--imgcol`, and it'ts value is: `rgba(255, 255, 255, 0.7)` and `rgba(0, 0, 0, 0.7)` for the dark theme. You can change them and the opacity for a better experience with your image. #### Greetings You can put your name and change the greetings. @@ -98,12 +103,54 @@ var evenTxt = 'Good evening '; It'll change in order of the hour. -#### Image Background +#### Weather Info -You can set your own background image with the variable `--imgbg` and set the route to the image you want It's disable by default. If you uncomment the variable, it has by default this image: +For setting up the Weather widget you're going to need an API Key in: `https://openweathermap.org/`. Once you have your Key you'll need to set yourlatitude and longitude, you can use: `https://www.latlong.net/` to get them. Once you have the data, you'll need to set them in the `weather.js` in the **js** folder. The code is + +> If you don't like to have your API Key public, you can make the repo into a private one. You can still use the Github Pages service. + +#### Weather Icons + +The icons by themselves have now 4 different color schemes: + +- **Dark** For White theme only users that want a minimalist look +- **White** For Dark theme only users that want a minimalist look +- **Nord** Using the Nord Color Scheme and easy-to-eyes colors +- **Odp** (Default one) Using the One Dark Pro color scheme

- +

-It has a black filter by default in `--imgcol`, and it'ts value is: `rgba(255, 255, 255, 0.7)` and `rgba(0, 0, 0, 0.7)` for the dark theme. You can change them and the opacity for a better experience with your image. +You set this theme changing this two lines of code in the `index.html` and `weather.js` files + +- If you want the Dark icon theme, change the `Odp` to `Dark` +- If you want the White icon theme, change the `Odp` to `White` +- If you want the Nord icon theme, change the `Odp` to `Nord` + +For example if I'd like to use the `Dark` icon theme: + +```html +
+ +
+ +
+ +
+``` + +```js +function displayWeather() { + iconElement.innerHTML = ``; + tempElement.innerHTML = `${weather.temperature.value}°${tempUnit}`; + descElement.innerHTML = weather.description; +} + +//Change it to: +function displayWeather() { + iconElement.innerHTML = ``; + tempElement.innerHTML = `${weather.temperature.value}°${tempUnit}`; + descElement.innerHTML = weather.description; +} +``` \ No newline at end of file diff --git a/icons/02d.png b/icons/02d.png deleted file mode 100644 index d03d2f0..0000000 Binary files a/icons/02d.png and /dev/null differ diff --git a/icons/02n.png b/icons/02n.png deleted file mode 100644 index 88bc1e7..0000000 Binary files a/icons/02n.png and /dev/null differ diff --git a/icons/03d.png b/icons/03d.png deleted file mode 100644 index d03d2f0..0000000 Binary files a/icons/03d.png and /dev/null differ diff --git a/icons/03n.png b/icons/03n.png deleted file mode 100644 index 88bc1e7..0000000 Binary files a/icons/03n.png and /dev/null differ diff --git a/icons/Dark/01d.png b/icons/Dark/01d.png new file mode 100644 index 0000000..735f479 Binary files /dev/null and b/icons/Dark/01d.png differ diff --git a/icons/Dark/01n.png b/icons/Dark/01n.png new file mode 100644 index 0000000..bc6825e Binary files /dev/null and b/icons/Dark/01n.png differ diff --git a/icons/Dark/02d.png b/icons/Dark/02d.png new file mode 100644 index 0000000..d332884 Binary files /dev/null and b/icons/Dark/02d.png differ diff --git a/icons/Dark/02n.png b/icons/Dark/02n.png new file mode 100644 index 0000000..0947e13 Binary files /dev/null and b/icons/Dark/02n.png differ diff --git a/icons/Dark/03d.png b/icons/Dark/03d.png new file mode 100644 index 0000000..d332884 Binary files /dev/null and b/icons/Dark/03d.png differ diff --git a/icons/Dark/03n.png b/icons/Dark/03n.png new file mode 100644 index 0000000..0947e13 Binary files /dev/null and b/icons/Dark/03n.png differ diff --git a/icons/Dark/04d.png b/icons/Dark/04d.png new file mode 100644 index 0000000..a5d1e26 Binary files /dev/null and b/icons/Dark/04d.png differ diff --git a/icons/Dark/04n.png b/icons/Dark/04n.png new file mode 100644 index 0000000..a5d1e26 Binary files /dev/null and b/icons/Dark/04n.png differ diff --git a/icons/Dark/09d.png b/icons/Dark/09d.png new file mode 100644 index 0000000..0a742da Binary files /dev/null and b/icons/Dark/09d.png differ diff --git a/icons/Dark/09n.png b/icons/Dark/09n.png new file mode 100644 index 0000000..0a742da Binary files /dev/null and b/icons/Dark/09n.png differ diff --git a/icons/Dark/10d.png b/icons/Dark/10d.png new file mode 100644 index 0000000..0a742da Binary files /dev/null and b/icons/Dark/10d.png differ diff --git a/icons/Dark/10n.png b/icons/Dark/10n.png new file mode 100644 index 0000000..0a742da Binary files /dev/null and b/icons/Dark/10n.png differ diff --git a/icons/Dark/11d.png b/icons/Dark/11d.png new file mode 100644 index 0000000..c4ed7f4 Binary files /dev/null and b/icons/Dark/11d.png differ diff --git a/icons/Dark/11n.png b/icons/Dark/11n.png new file mode 100644 index 0000000..c4ed7f4 Binary files /dev/null and b/icons/Dark/11n.png differ diff --git a/icons/Dark/13d.png b/icons/Dark/13d.png new file mode 100644 index 0000000..a11c1d2 Binary files /dev/null and b/icons/Dark/13d.png differ diff --git a/icons/Dark/13n.png b/icons/Dark/13n.png new file mode 100644 index 0000000..a11c1d2 Binary files /dev/null and b/icons/Dark/13n.png differ diff --git a/icons/Dark/50d.png b/icons/Dark/50d.png new file mode 100644 index 0000000..b3cfad2 Binary files /dev/null and b/icons/Dark/50d.png differ diff --git a/icons/Dark/50n.png b/icons/Dark/50n.png new file mode 100644 index 0000000..b3cfad2 Binary files /dev/null and b/icons/Dark/50n.png differ diff --git a/icons/Dark/unknown.png b/icons/Dark/unknown.png new file mode 100644 index 0000000..c6e2a84 Binary files /dev/null and b/icons/Dark/unknown.png differ diff --git a/icons/01d.png b/icons/Nord/01d.png similarity index 100% rename from icons/01d.png rename to icons/Nord/01d.png diff --git a/icons/01n.png b/icons/Nord/01n.png similarity index 100% rename from icons/01n.png rename to icons/Nord/01n.png diff --git a/icons/Nord/02d.png b/icons/Nord/02d.png new file mode 100644 index 0000000..ea5d257 Binary files /dev/null and b/icons/Nord/02d.png differ diff --git a/icons/Nord/02n.png b/icons/Nord/02n.png new file mode 100644 index 0000000..e1c8a5c Binary files /dev/null and b/icons/Nord/02n.png differ diff --git a/icons/Nord/03d.png b/icons/Nord/03d.png new file mode 100644 index 0000000..ea5d257 Binary files /dev/null and b/icons/Nord/03d.png differ diff --git a/icons/Nord/03n.png b/icons/Nord/03n.png new file mode 100644 index 0000000..e1c8a5c Binary files /dev/null and b/icons/Nord/03n.png differ diff --git a/icons/04d.png b/icons/Nord/04d.png similarity index 100% rename from icons/04d.png rename to icons/Nord/04d.png diff --git a/icons/04n.png b/icons/Nord/04n.png similarity index 100% rename from icons/04n.png rename to icons/Nord/04n.png diff --git a/icons/09d.png b/icons/Nord/09d.png similarity index 100% rename from icons/09d.png rename to icons/Nord/09d.png diff --git a/icons/09n.png b/icons/Nord/09n.png similarity index 100% rename from icons/09n.png rename to icons/Nord/09n.png diff --git a/icons/10d.png b/icons/Nord/10d.png similarity index 100% rename from icons/10d.png rename to icons/Nord/10d.png diff --git a/icons/10n.png b/icons/Nord/10n.png similarity index 100% rename from icons/10n.png rename to icons/Nord/10n.png diff --git a/icons/11d.png b/icons/Nord/11d.png similarity index 100% rename from icons/11d.png rename to icons/Nord/11d.png diff --git a/icons/11n.png b/icons/Nord/11n.png similarity index 100% rename from icons/11n.png rename to icons/Nord/11n.png diff --git a/icons/13d.png b/icons/Nord/13d.png similarity index 100% rename from icons/13d.png rename to icons/Nord/13d.png diff --git a/icons/13n.png b/icons/Nord/13n.png similarity index 100% rename from icons/13n.png rename to icons/Nord/13n.png diff --git a/icons/50d.png b/icons/Nord/50d.png similarity index 100% rename from icons/50d.png rename to icons/Nord/50d.png diff --git a/icons/50n.png b/icons/Nord/50n.png similarity index 100% rename from icons/50n.png rename to icons/Nord/50n.png diff --git a/icons/unknown.png b/icons/Nord/unknown.png similarity index 100% rename from icons/unknown.png rename to icons/Nord/unknown.png diff --git a/icons/Odp/01d.png b/icons/Odp/01d.png new file mode 100644 index 0000000..c340afb Binary files /dev/null and b/icons/Odp/01d.png differ diff --git a/icons/Odp/01n.png b/icons/Odp/01n.png new file mode 100644 index 0000000..5995f2e Binary files /dev/null and b/icons/Odp/01n.png differ diff --git a/icons/Odp/02d.png b/icons/Odp/02d.png new file mode 100644 index 0000000..320ebc6 Binary files /dev/null and b/icons/Odp/02d.png differ diff --git a/icons/Odp/02n.png b/icons/Odp/02n.png new file mode 100644 index 0000000..dfc7a8b Binary files /dev/null and b/icons/Odp/02n.png differ diff --git a/icons/Odp/03d.png b/icons/Odp/03d.png new file mode 100644 index 0000000..320ebc6 Binary files /dev/null and b/icons/Odp/03d.png differ diff --git a/icons/Odp/03n.png b/icons/Odp/03n.png new file mode 100644 index 0000000..dfc7a8b Binary files /dev/null and b/icons/Odp/03n.png differ diff --git a/icons/Odp/04d.png b/icons/Odp/04d.png new file mode 100644 index 0000000..736ed70 Binary files /dev/null and b/icons/Odp/04d.png differ diff --git a/icons/Odp/04n.png b/icons/Odp/04n.png new file mode 100644 index 0000000..736ed70 Binary files /dev/null and b/icons/Odp/04n.png differ diff --git a/icons/Odp/09d.png b/icons/Odp/09d.png new file mode 100644 index 0000000..2003289 Binary files /dev/null and b/icons/Odp/09d.png differ diff --git a/icons/Odp/09n.png b/icons/Odp/09n.png new file mode 100644 index 0000000..2003289 Binary files /dev/null and b/icons/Odp/09n.png differ diff --git a/icons/Odp/10d.png b/icons/Odp/10d.png new file mode 100644 index 0000000..2003289 Binary files /dev/null and b/icons/Odp/10d.png differ diff --git a/icons/Odp/10n.png b/icons/Odp/10n.png new file mode 100644 index 0000000..2003289 Binary files /dev/null and b/icons/Odp/10n.png differ diff --git a/icons/Odp/11d.png b/icons/Odp/11d.png new file mode 100644 index 0000000..d5b6bd7 Binary files /dev/null and b/icons/Odp/11d.png differ diff --git a/icons/Odp/11n.png b/icons/Odp/11n.png new file mode 100644 index 0000000..d5b6bd7 Binary files /dev/null and b/icons/Odp/11n.png differ diff --git a/icons/Odp/13d.png b/icons/Odp/13d.png new file mode 100644 index 0000000..eefd88d Binary files /dev/null and b/icons/Odp/13d.png differ diff --git a/icons/Odp/13n.png b/icons/Odp/13n.png new file mode 100644 index 0000000..eefd88d Binary files /dev/null and b/icons/Odp/13n.png differ diff --git a/icons/Odp/50d.png b/icons/Odp/50d.png new file mode 100644 index 0000000..d5bbb72 Binary files /dev/null and b/icons/Odp/50d.png differ diff --git a/icons/Odp/50n.png b/icons/Odp/50n.png new file mode 100644 index 0000000..d5bbb72 Binary files /dev/null and b/icons/Odp/50n.png differ diff --git a/icons/Odp/unknown.png b/icons/Odp/unknown.png new file mode 100644 index 0000000..211f936 Binary files /dev/null and b/icons/Odp/unknown.png differ diff --git a/icons/White/01d.png b/icons/White/01d.png new file mode 100644 index 0000000..0fde274 Binary files /dev/null and b/icons/White/01d.png differ diff --git a/icons/White/01n.png b/icons/White/01n.png new file mode 100644 index 0000000..27da0a0 Binary files /dev/null and b/icons/White/01n.png differ diff --git a/icons/White/02d.png b/icons/White/02d.png new file mode 100644 index 0000000..5ff6aa4 Binary files /dev/null and b/icons/White/02d.png differ diff --git a/icons/White/02n.png b/icons/White/02n.png new file mode 100644 index 0000000..924054d Binary files /dev/null and b/icons/White/02n.png differ diff --git a/icons/White/03d.png b/icons/White/03d.png new file mode 100644 index 0000000..5ff6aa4 Binary files /dev/null and b/icons/White/03d.png differ diff --git a/icons/White/03n.png b/icons/White/03n.png new file mode 100644 index 0000000..924054d Binary files /dev/null and b/icons/White/03n.png differ diff --git a/icons/White/04d.png b/icons/White/04d.png new file mode 100644 index 0000000..7fe4294 Binary files /dev/null and b/icons/White/04d.png differ diff --git a/icons/White/04n.png b/icons/White/04n.png new file mode 100644 index 0000000..7fe4294 Binary files /dev/null and b/icons/White/04n.png differ diff --git a/icons/White/09d.png b/icons/White/09d.png new file mode 100644 index 0000000..6cb7e0c Binary files /dev/null and b/icons/White/09d.png differ diff --git a/icons/White/09n.png b/icons/White/09n.png new file mode 100644 index 0000000..6cb7e0c Binary files /dev/null and b/icons/White/09n.png differ diff --git a/icons/White/10d.png b/icons/White/10d.png new file mode 100644 index 0000000..6cb7e0c Binary files /dev/null and b/icons/White/10d.png differ diff --git a/icons/White/10n.png b/icons/White/10n.png new file mode 100644 index 0000000..6cb7e0c Binary files /dev/null and b/icons/White/10n.png differ diff --git a/icons/White/11d.png b/icons/White/11d.png new file mode 100644 index 0000000..750a497 Binary files /dev/null and b/icons/White/11d.png differ diff --git a/icons/White/11n.png b/icons/White/11n.png new file mode 100644 index 0000000..750a497 Binary files /dev/null and b/icons/White/11n.png differ diff --git a/icons/White/13d.png b/icons/White/13d.png new file mode 100644 index 0000000..e4c9e5c Binary files /dev/null and b/icons/White/13d.png differ diff --git a/icons/White/13n.png b/icons/White/13n.png new file mode 100644 index 0000000..e4c9e5c Binary files /dev/null and b/icons/White/13n.png differ diff --git a/icons/White/50d.png b/icons/White/50d.png new file mode 100644 index 0000000..86943b9 Binary files /dev/null and b/icons/White/50d.png differ diff --git a/icons/White/50n.png b/icons/White/50n.png new file mode 100644 index 0000000..86943b9 Binary files /dev/null and b/icons/White/50n.png differ diff --git a/icons/White/unknown.png b/icons/White/unknown.png new file mode 100644 index 0000000..8126c0a Binary files /dev/null and b/icons/White/unknown.png differ diff --git a/index.html b/index.html index 448d44e..831ba4c 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@
- +

- °c

diff --git a/js/weather.js b/js/weather.js index eb51ea6..5e9d82b 100644 --- a/js/weather.js +++ b/js/weather.js @@ -51,7 +51,7 @@ function getWeather(latitude, longitude) { // Display Weather info function displayWeather() { - iconElement.innerHTML = ``; + iconElement.innerHTML = ``; tempElement.innerHTML = `${weather.temperature.value}°${tempUnit}`; descElement.innerHTML = weather.description; }