forked from Evgeny-/Firefox-OS-Weather
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (112 loc) · 4.4 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html lang="en-US" ng-app="App">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/fontello.css"/>
<link rel="stylesheet" href="webfont/climacons-font.css" />
<link rel="stylesheet" href="css/action_menu.css" />
<link rel="stylesheet" href="css/main.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
</head>
<body ng-controller="MainController" ng-class="{'opened-options': openedOptions}" ontouchstart="" ng-cloak>
<div id="header">
<a ng-click="toggleOptions()">
<i class="icon-menu"></i>
</a>
<a ng-click="update()">
<i class="icon-cw"></i>
</a>
</div>
<div id="options" ng-controller="OptionsController" ng-show="openedOptions" ng-cloak>
<form role="dialog" data-type="action" ng-show="chooseCity">
<header>Choose city</header>
<menu>
<button ng-repeat="city in chooseCities" ng-click="chooseCityFunc(city)">
{{city.areaName[0].value}} ({{city.country[0].value}})
</button>
<button ng-click="chooseCity=0">Cancel</button>
</menu>
</form>
<div id="cities-wrap">
<div class="title">Your cities</div>
<div ng-show="!cities.length">
You haven't added any cities yet.
</div>
<div ng-repeat="city in cities" class="city" ng-click="openCity(city.name)">
<span class="name">{{ city.name }}</span>
<span class="remove" ng-click="removeCity(city.name)">
<i class="icon-cancel"></i>
</span>
</div>
</div>
<div id="add-city-wrap">
<div class="title">Add new city</div>
<div class="msg" ng-show="loading">Loading...</div>
<div class="msg" ng-show="error" ng-bind="error"></div>
<div class="type-city">
<input class="inp" type="text" placeholder="Type city name" ng-model="cityName">
<button ng-click="loadCity()" class="btn">Go</button>
<div class="clear"></div>
</div>
<div>
<button class="btn" ng-click="useGeoLocation()">Use geolocation</button>
</div>
</div>
<div id="default-wrap">
<div class="title">Open on start</div>
<select ng-options="v for v in startOptions"
ng-model="options.start"
ng-change="saveOptions()"></select>
</div>
<div id="config-wrap" ng-cloak>
<div class="title">Options</div>
<select ng-model="options.temp" ng-change="saveOptions()">
<option value="C">C°</option>
<option value="F">F°</option>
</select>
</div>
<div id="by">
by <a href="https://github.com/Evgeny-" target="_blank">Evgeny Nikiforov <i class="icon-github"></i></a>
</div>
</div>
<div id="weather" ng-controller="WeatherController" ng-show="!openedOptions">
<div class="progress" ng-show="!now && !days && loading"></div>
<div class="loading" ng-show="!now && !days && !loading && !hideChooseText">
Choose city in <i class="icon-menu"></i>Options to start!
</div>
<div class="header" ng-show="now">
<div class="city-name" ng-bind="city"></div>
<div class="border"></div>
<table class="weather-head">
<tr>
<td class="info">
<div><i class="climacon umbrella"></i> {{now.desc}}</div>
<div><i class="climacon wind"></i> {{now.windspeed}} km/h</div>
<div><i class="climacon compass"></i> {{now.winddir}}</div>
</td>
<td class="icon"><i class="climacon" ng-class="now.icon"></i></td>
<td class="temp">{{ now.temp }}°</td>
</tr>
</table>
<div class="border"></div>
</div>
<table class="weather-table">
<tr ng-repeat="day in days" ng-click="showDay(day)">
<td class="icon"><i class="climacon" ng-class="day.icon"></i></td>
<td class="day">
<div class="day-name" ng-bind="day.day"></div>
<div class="day-weather" ng-bind="day.weather"></div>
</td>
<td class="temp">
<div class="temp">{{ day.max }}° / {{ day.min }}°</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-resource.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/service.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</body>
</html>