mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 07:41:51 +08:00
75 lines
2.6 KiB
HTML
75 lines
2.6 KiB
HTML
<html ng-app="ionic.weather">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Weather</title>
|
|
|
|
<!-- Sets initial viewport load and disables zooming -->
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
<link rel="stylesheet" href="/dist/css/ionic.css">
|
|
|
|
<link rel="stylesheet" href="weather.css">
|
|
|
|
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
|
|
<script src="/vendor/angular/angular-touch.js"></script>
|
|
<script src="/vendor/angular/angular-animate.js"></script>
|
|
<script src="/vendor/angular/angular-resource.js"></script>
|
|
<script src="/dist/js/ionic.js"></script>
|
|
<script src="/dist/js/ionic-angular.js"></script>
|
|
|
|
<script src="services.js"></script>
|
|
<script src="directives.js"></script>
|
|
<script src="app.js"></script>
|
|
</head>
|
|
<body ng-controller="WeatherCtrl">
|
|
<div id="bg-image" ng-style="getActiveBackgroundImage()"></div>
|
|
|
|
<header id="header" class="bar bar-header bar-clear">
|
|
<h1 class="title">
|
|
<span class="city">{{current.display_location.city}}</span><br>
|
|
<current-time localtz="current.local_tz_short"></current-time>
|
|
</h1>
|
|
</header>
|
|
<div id="scroller" class="scroll padding" style="margin-top:44px">
|
|
<small-weather>
|
|
<h5>{{current.weather}}</h5>
|
|
<h5>H: {{forecast.forecastday[0].high.fahrenheit}} L: {{forecast.forecastday[0].low.fahrenheit}}</h5>
|
|
<h1 class="current-temp">{{current.temp_f | int}}°</h1>
|
|
</small-weather>
|
|
<weather-box title="Forecast" style="height: 400px">
|
|
</weather-box>
|
|
<weather-box title="Details" style="height: 400px">
|
|
</weather-box>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
var s = document.getElementById('scroller');
|
|
var bgImage = document.getElementById('bg-image');
|
|
var header = document.getElementById('header');
|
|
|
|
var scroll = new ionic.views.Scroll({
|
|
el: s,
|
|
decelerationRate: 0.87,
|
|
inertialEventInterval: 100
|
|
});
|
|
|
|
var height = window.innerHeight;
|
|
s.addEventListener('momentumScrolled', function(e) {
|
|
setTimeout(function() {
|
|
var bgAmount = e.detail.scrollTop;
|
|
//bgImage.style.webkitTransform = 'translate3d(0, ' + -(bgAmount / 20) + 'px, 0)';
|
|
|
|
//var blurAmount = Math.min(3, e.detail.scrollTop / 200);
|
|
|
|
var brightness = 1;
|
|
if(e.detail.scrollTop > 200) {
|
|
var diff = Math.min(600, e.detail.scrollTop - 200);
|
|
var per = 1 - (diff / 600);
|
|
brightness = Math.max(0.7, per);
|
|
}
|
|
//bgImage.style.webkitFilter = 'brightness(' + brightness + ')';
|
|
});
|
|
});
|
|
</script>
|
|
</html>
|