-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
82 lines (79 loc) · 3.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en" ng-app="root">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<title>Magic Mirror</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/weather-icons/0.0.1/css/weather-icons.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Quicksand" type="text/css" media="screen" />
</head>
<body ng-controller="MagicMirror">
<div class="module top-center middle refresh" ng-show="refreshing">
<div class="larger lightest"><i class="ion-ios7-reloading"></i></div>
<div class="lightest" ng-bind="refreshMessage"></div>
</div>
<div ng-class="{show:show_app}" class="wrapper ng-cloak">
<div class="module larger top-left">
<i class="ion-ios7-clock-outline"></i> {{time | date: 'h:mm' }}<sup>{{time | date: 'a' }}</sup>
</div>
<div class="module larger top-right">
<i class="ion-ios7-calendar-outline"></i> {{time | date: 'MMM d' }}
</div>
<div class="module bottom-right">
<div class="today padding-bottom margin-bottom border-bottom">
<div class="lightest" ng-bind="options.location"></div>
<div class="temp-today larger">
<i class="{{weatherService.getIcon(today.weather[0].description)}}"></i>
<span class="temp-hi">{{today.temp.max | number: 0}}˚</span>
<span class="temp-low lighter smaller">{{today.temp.min | number: 0}}˚</span>
</div>
</div>
<table class="padding">
<tbody ng-repeat="day in forecast">
<tr>
<td align="right">{{ day.dt * 1000 | date: 'EEE'}}</td>
<td><i class="{{weatherService.getIcon(day.weather[0].description)}}"></i></td>
<td class="temp-hi">{{day.temp.max | number: 0}}˚</td>
<td class="temp-low lighter">{{day.temp.min | number: 0}}˚</td>
</tr>
</tbody>
</table>
</div>
<div class="module bottom-left">
<div class="border-bottom padding-bottom margin-bottom lightest"><i class="ion-ios7-bell-outline"></i> {{calendarData.summary}}</div>
<table class="smaller">
<tbody>
<tr ng-repeat-start="event in calendarData.items">
<td class="event truncate">{{event.summary}}</td>
</tr>
<tr ng-repeat-end>
<td class="date lighter padding-bottom smaller">
<span ng-if="event.start.dateTime">
{{ event.start.dateTime | date: 'EEE MMM d @ h:mm a' }}
</span>
<span ng-if="event.start.date">
{{ event.start.date | date: 'EEE MMM d' }}
</span>
</td>
</tr>
<tr ng-hide="calendarData.items.length">
<td class="event smaller"><i class="ion-ios7-close-outline"></i> No Upcoming Events</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services/config.js"></script>
<script src="js/services/weather.js"></script>
<script src="js/services/calendar.js"></script>
<script src="js/services/display.js"></script>
</body>
</html>