83 lines
4.2 KiB
HTML
83 lines
4.2 KiB
HTML
<div class="fill-height p-3" [style.backgroundColor]="day ? '#88aaff' : '#000e31'" style="overflow-y: scroll">
|
|
<!-- Current Weather -->
|
|
<div class="d-flex flex-column align-items-center">
|
|
<div>
|
|
<h3 class="mb-0 text-center">London, ON</h3>
|
|
<h3>{{weatherService.weather[0].phrase}}</h3>
|
|
</div>
|
|
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center">
|
|
<div class="p-3 text-center">
|
|
<i [class]="'mt-4 wi wi-fw ' + weatherService.icon" style="font-size: 6rem"></i>
|
|
</div>
|
|
<div class="d-flex">
|
|
<div class="d-flex flex-column mr-3">
|
|
<div>
|
|
<h1 class="mb-0">{{weatherService.weather[0].current | round: 1}} °C</h1>
|
|
</div>
|
|
<div>
|
|
Feels Like: {{weatherService.weather[0].feelsLike | round}} °C
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-column">
|
|
<div>
|
|
<mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_upward</mat-icon>
|
|
{{weatherService.weather[0].high | round}} °C
|
|
</div>
|
|
<div>
|
|
<mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_downward</mat-icon>
|
|
{{weatherService.weather[0].low | round}} °C
|
|
</div>
|
|
<div>
|
|
<i class="wi wi-fw wi-umbrella"></i> {{weatherService.weather[0].pop * 100 | round}}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Forecast -->
|
|
<mat-card class="m-3 mx-auto" style="max-width: 450px">
|
|
<div class="d-flex justify-content-center">
|
|
<div *ngFor="let day of weatherService.weather" class="d-flex flex-column align-items-center flex-grow-1" style="max-width: 75px;">
|
|
{{day.date.toString().slice(0, 4).toUpperCase()}}
|
|
<i [class]="'my-2 wi wi-fw ' + day.icon" style="font-size: 2rem"></i>
|
|
<div class="text-center">{{day.high | round}} °C</div>
|
|
<div class="text-center text-muted">{{day.low | round}} °C</div>
|
|
</div>
|
|
</div>
|
|
</mat-card>
|
|
<!-- Sunlight -->
|
|
<mat-card class="m-3 mx-auto" style="max-width: 450px">
|
|
<h5>Sunlight</h5>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="d-flex align-items-center flex-grow-1">
|
|
<i class="wi wi-sunrise mr-1"></i> {{weatherService.weather[0].sunrise | date: 'shortTime'}}
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-center flex-grow-1">
|
|
<i class="wi wi-fw wi-cloud mr-1"></i> {{weatherService.weather[0].cloudCover * 100 | round}}%
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-end flex-grow-1">
|
|
<i class="wi wi-sunset mr-1"></i> {{weatherService.weather[0].sunset | date: 'shortTime'}}
|
|
</div>
|
|
</div>
|
|
<canvas id="myCanvas" class="mt-3" style="width: 100%" height="150"></canvas>
|
|
</mat-card>
|
|
<!-- Wind -->
|
|
<mat-card class="m-3 mx-auto" style="max-width: 450px">
|
|
<h5>Wind</h5>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="d-flex align-items-center flex-grow-1">
|
|
<i class="wi wi-fw wi-windy"></i> {{weatherService.weather[0].wind.speed | round}} km/h
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-center flex-grow-1">
|
|
{{weatherService.weather[0].wind.direction}}°
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-end flex-grow-1">
|
|
<i class="wi wi-fw wi-strong-wind"></i> {{weatherService.weather[0].wind.gusts | round}} km/h
|
|
</div>
|
|
</div>
|
|
<div class="p-3 text-center">
|
|
<i class="wi wi-wind wi-fw wi-towards-0" [style.transform]="'rotate(' + weatherService.weather[0].wind.direction + 'deg)'" style="color: #5d8cff; font-size: 14rem; height: 14rem; width: 14rem"></i>
|
|
</div>
|
|
</mat-card>
|
|
</div>
|