65 lines
3.1 KiB
HTML
65 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<title>WeatherXi</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<!--Angular-->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
|
|
<!--END Angular-->
|
|
<script>
|
|
var lat = 43.2099824;
|
|
var lon = -79.9958742;
|
|
//This needs to be dynamic somehow
|
|
</script>
|
|
</head>
|
|
<body ng-app="mainPage" ng-controller="body">
|
|
<div class="container">
|
|
<div class="weather-side">
|
|
<div class="weather-gradient"></div>
|
|
<div class="date-container">
|
|
<h2 class="date-dayname">Today</h2><span class="date-day">DATE</span><span class="location">Ancaster</span>
|
|
</div>
|
|
<div class="weather-container"><i class="weather-icon" data-feather="sun"></i>
|
|
<h1 class="weather-temp">{{weather.current.temp}}°C</h1>
|
|
<h3 class="weather-desc">{{weather.current.weather[0].main}}</h3>
|
|
</div>
|
|
</div>
|
|
<div class="info-side">
|
|
<div class="today-info-container">
|
|
<div class="today-info">
|
|
<div class="precipitation"> <span class="title">PRECIPITATION</span><span class="value">{{weather.minutely[0].precipitation}} %</span>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="humidity"> <span class="title">HUMIDITY</span><span class="value">{{weather.current.humidity}} %</span>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="wind"> <span class="title">WIND</span><span class="value">{{weather.current.wind_speed}} km/h</span>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="wind"> <span class="title">DIRECTION</span><span class="value">{{weather.current.wind_deg}} °</span>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="week-container">
|
|
<ul class="week-list">
|
|
<li></i><span class="day-name">+1h</span><span class="day-temp">{{weather.hourly[0].temp}}°C</span></li>
|
|
<li></i><span class="day-name">+2h</span><span class="day-temp">{{weather.hourly[1].temp}}°C</span></li>
|
|
<li></i><span class="day-name">+4h</span><span class="day-temp">{{weather.hourly[3].temp}}°C</span></li>
|
|
<li></i><span class="day-name">+8h</span><span class="day-temp">{{weather.hourly[7].temp}}°C</span></li>
|
|
<div class="clear"></div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var app = angular.module('mainPage', []);
|
|
app.controller('body', function($scope, $http) {
|
|
//Some sort of async function so location is got before the script called
|
|
$http.get("https://api.openweathermap.org/data/2.5/onecall?lat=" + lat + "&lon=" + lon + "&units=metric&appid=5292f0a17ecbe4b523fe0609ed2c556f").then(function (response) {
|
|
$scope.weather = response.data;
|
|
});
|
|
});
|
|
</script>
|
|
</body> |