31 lines
1.4 KiB
HTML
31 lines
1.4 KiB
HTML
<div>
|
|
<div class="d-flex flex-column flex-md-row justify-content-center align-items-center flex-grow-1">
|
|
<i [class]="'wi wi-fw ' + weatherService.icon" style="font-size: 6rem"></i>
|
|
<div class="ml-0 ml-md-3">
|
|
<h1 class="my-4 my-md-0 font-weight-bold text-center text-md-left">{{weatherService.temp}} °C</h1>
|
|
<h3 class="m-0">{{weatherService.weather}}</h3>
|
|
</div>
|
|
</div>
|
|
<div class="my-4 d-flex mx-auto" style="max-width: 450px">
|
|
<div class="text-center flex-grow-1">
|
|
<i class="wi wi-fw wi-umbrella"></i> {{weatherService.pop}} mm
|
|
</div>
|
|
<div class="text-center flex-grow-1">
|
|
<i class="wi wi-fw wi-cloud"></i> {{weatherService.cloudCover}} %
|
|
</div>
|
|
<div class="text-center flex-grow-1">
|
|
<i class="wi wi-fw wi-strong-wind"></i> {{weatherService.wind[1]}} KM/H
|
|
</div>
|
|
</div>
|
|
<mat-divider></mat-divider>
|
|
<div class="my-4 d-flex justify-content-center">
|
|
<div *ngFor="let w of weatherService.forecast" class="d-flex flex-column align-items-center flex-grow-1" style="max-width: 75px;">
|
|
{{w.day}}
|
|
<i [class]="'my-2 wi wi-fw ' + w.icon" style="font-size: 2rem"></i>
|
|
<div class="text-center">{{w.max}} °C</div>
|
|
<div class="text-center text-muted">{{w.min}} °C</div>
|
|
</div>
|
|
</div>
|
|
<mat-divider></mat-divider>
|
|
</div>
|