77 lines
3.8 KiB
HTML
77 lines
3.8 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-->
|
|
</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">{{readableloc}}</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}}{{loading}}</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<br>{{weather.hourly[0].weather[0].main}}</span></li>
|
|
<li></i><span class="day-name">+2h</span><span class="day-temp">{{weather.hourly[1].temp}}°C<br>{{weather.hourly[1].weather[0].main}}</span></li>
|
|
<li></i><span class="day-name">+4h</span><span class="day-temp">{{weather.hourly[3].temp}}°C<br>{{weather.hourly[3].weather[0].main}}</span></li>
|
|
<li></i><span class="day-name">+8h</span><span class="day-temp">{{weather.hourly[7].temp}}°C<br>{{weather.hourly[7].weather[0].main}}</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
|
|
$scope.weather = 0
|
|
$scope.loading = 'Loading...'
|
|
// $scope.weather.current.temp = 1;
|
|
navigator.geolocation.getCurrentPosition((position) => {
|
|
$scope.loaddata(position.coords.latitude, position.coords.longitude)
|
|
});
|
|
$http.get("http://ipinfo.io").then(function (response) { // Easier way to grab location name via IP
|
|
$scope.readableloc = response.data.city + ', ' + response.data.region;
|
|
|
|
})
|
|
$scope.loaddata = function(lat, lon) {
|
|
$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;
|
|
$scope.loading = ''
|
|
$scope.lat = lat;
|
|
$scope.lon = lon;
|
|
})
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
</body> |