Design - SchwapTobi/WeatherNet GitHub Wiki

Design

Icons

Je nach Wetterlage erscheinen die dazupassenden Icons.

Sonne: <ion-icon name="sunny"></ion-icon>

Sonne mit Wolken: <ion-icon name="partly-sunny"></ion-icon>

Wolken: <ion-icon name="cloudy"></ion-icon>

Regen: <ion-icon name="rainy"></ion-icon>

Gewitter: <ion-icon name="flash"></ion-icon>

Schnee: <ion-icon name="snow"></ion-icon>

klare Nacht: <ion-icon name="moon"></ion-icon>

bewölkte Nacht: <ion-icon name="cloudy-night"></ion-icon>

Farben

Um die Icons attraktiv zu gestalten haben bekommen sie, abhängig von der jeweiligen Wetterlage, eine Farbe zugewiesen.

Sonne: #FFF59D

Sonne mit Wolken: #E0E0E0

Wolken: #78909C

Regen: #4FC3F7

Gewitter: #616161

Schnee: #E1F5FE

klare Nacht: #01579B

bewölkte Nacht: #263238


Die Temperaturanzeige wird je nach Grad Celsius eingefärbt.

Bei über 30°C: #8b0000
zwischen 30°C und 27.5°C: #e40000
zwischen 27.5°C und 25°C: #ff4500
zwischen 25°C und 22.5°C: #ff6f00
zwischen 22.5°C und 20°C: #ffa500
zwischen 20°C und 17.5°C: #ffcd00
zwischen 17.5°C und 15°C: #ffff00
zwischen 15°C und 12.5°C: #cdff00
zwischen 12.5°C und 10°C: #a8cb66
zwischen 10°C und 5°C: #ddeebe
zwischen 5°C und 0°C: #d1e0f1
zwischen 0°C und -5°C: #99c4f5
zwischen -5°C und -10°C: #99a7f5
zwischen -10°C und -15°C: #455acd
zwischen -15°C und -20°C: #a05ede
zwischen -20°C und -25°C: #8322de
zwischen -25°C und -30°C: #36115a
alles unter -30°C: #1d0a30

Videos

Um den Hintergrund beim Home-Bildschirm interessant zu gestalten, haben wir Videos zur jeweiligen Wetterlage verwendet. Diese laufen in einer Endlosschleife.

Sonne:
Name: "Long Mountain Shot", Author: Harry, Licence: Royalty-Free, Link: https://www.videvo.net/video/long-mountain-shot/2235/
Name: "Bokeh Light Rays", Author: Videvo, Licence: Creative Commons 3.0 Attribution, Link: https://www.videvo.net/video/bokeh-light-rays/214/

Sonne mit Wolken:
Name: "Blue Sky and Clouds", Author: Videvo, Licence: Royalty-Free, Link: https://www.videvo.net/video/blue-sky-and-clouds-timelapse/2299/

Wolken:
Name: "Epic Cloud Time Lapse", Author: Beachfront, Licence: Creative Commons 3.0 Unported (CC BY 3.0), Link: https://www.videvo.net/video/epic-cloud-time-lapse/3079/

Regen:
Name: "Macro Raindrops 2", Author: Videvo, Licence: Royalty-Free, Link: https://www.videvo.net/video/macro-raindrops-2/3654/

Gewitter:
Name: "Lightning Strike", Author: Elsa Luebing, Licence: Royalty-Free, Link: https://www.videvo.net/video/lightning-strike/5350/
Name: "Lightning On a Grey Sky", Author: Elsa Luebing, Licence: Royalty-Free, Link: https://www.videvo.net/video/lightning-on-a-grey-sky/5351/

Schnee:
Name: "White Swirling Particles", Author: Videvo, Licence: Royalty-Free, Link: https://www.videvo.net/video/white-swirling-particles-on-a-blue-background/5718/

klare Nacht:
Name: "Milky Way 1", Author: Videvo, Licence: Royalty-Free, Link: https://www.videvo.net/video/milky-way-1/1317/

bewölkte Nacht:
Name: "Moon in Cloudy Night Sky", Author: Eggert Gunnarsson, Licence: Royalty-Free, Link: https://www.videvo.net/video/moon-in-cloudy-night-sky/2898/

⚠️ **GitHub.com Fallback** ⚠️