WeatherTablet/index.html at master · khinds10/WeatherTablet · GitHub

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
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
 <html class="no-js" lang="en" ng-app='MainApp' ng-cloak>
    <!--<![endif]-->
    <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <title>Weather Tablet (Wall Based Tablet for Current Weather)</title>
       <meta name="description" content="">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
       <link rel="icon" href="/img/favicon.ico" type="image/x-icon" />
       <link rel="stylesheet" href="/css/bootstrap.min.css">
       <link rel="stylesheet" href="/css/font-awesome.min.css">
       <link rel="stylesheet" href="/css/main.min.css">
       <script type="text/javascript" src="/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
       <script type="text/javascript" src="/js/vendor/skycons.js"></script>
       <script type="text/javascript" src="/js/app.min.js"></script>
       <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
       <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
       <![endif]-->
    </head>
    <body style="overflow:hidden;">
       <div id='main-page-container' ng-controller="homePageController">
       <div class="container">
       <div id="page-container" class="row" ng-show='!isWeatherLoading'>
       <div id="current-conditions">
       <div class="col-sm-6">
          <h4 id="sunset-container">Dark @ {{currentWeather.daily.data[0].sunsetTime * 1000 | date:'h:mm a'}}</h4>
          <canvas id="currentlyWeatherIcon" width="240" height="240"></canvas>
          <div class="col-sm-7">
             <h1 style="color:{{tempColors['apparentTemperature']}};">{{currentWeather.currently.apparentTemperature | number:0}}&deg;</h1>
          </div>
          <div class="col-sm-5 extreme-temp-current" style="color:{{tempColors['dailyExtreme']}}">
             [{{currentWeather.dailyExtremeType[0]}}: {{currentWeather.dailyExtreme[0] | number:0}}&deg;]
          </div><br/>
          <h3 class="minute-summary">{{currentWeather.minutely.summary}}</h3>
       </div>
       <div id="forecast-list" class="col-sm-6">
          <div style="padding:10px;">
             <div>
                <div class="forecast-item-day">{{currentWeather.daily.data[1].time * 1000 | date:'EEEE'}}</div>
                <canvas id="forecastWeatherIcon1" width="80" height="80"></canvas>
                <strong style="color:{{tempColors['data-1-max']}};"> {{currentWeather.daily.data[1].apparentTemperatureMax | number:0}} &deg;</strong>
                <span class="medium-text">
                    <span style="font-size: 18px;">Low:</span> <span style="color:{{tempColors['data-1-min']}};">{{currentWeather.daily.data[1].apparentTemperatureMin | number:0}} &deg;</span>
                </span>
                <div class="daily-summary">{{currentWeather.daily.data[1].summary}}</div>
                <div class='summary'>{{currentWeather.daily.data[1].summary}}</div>
                <div class="forecast-item-day">{{currentWeather.daily.data[2].time * 1000 | date:'EEEE'}}</div>
                <canvas id="forecastWeatherIcon2" width="80" height="80"></canvas>
                <strong  style="color:{{tempColors['data-2-max']}};">{{currentWeather.daily.data[2].apparentTemperatureMax | number:0}} &deg;</strong>
                <span class="medium-text">
                    <span style="font-size: 18px;">Low:</span>  <span style="color:{{tempColors['data-2-min']}};">{{currentWeather.daily.data[2].apparentTemperatureMin | number:0}} &deg;</span>
                </span>
                <div class="daily-summary">{{currentWeather.daily.data[2].summary}}</div>
                <div class='summary'>{{currentWeather.daily.data[2].summary}}</div>
                <div class="forecast-item-day">{{currentWeather.daily.data[3].time * 1000 | date:'EEEE'}}</div>
                <canvas id="forecastWeatherIcon3" width="80" height="80"></canvas>
                <strong style="color:{{tempColors['data-3-max']}};">{{currentWeather.daily.data[3].apparentTemperatureMax | number:0}} &deg;</strong>
                <span class="medium-text">
                    <span style="font-size: 18px;">Low:</span>  <span style="color:{{tempColors['data-3-min']}};">{{currentWeather.daily.data[3].apparentTemperatureMin | number:0}} &deg;</span>
                </span>
                <div class="daily-summary">{{currentWeather.daily.data[3].summary}}</div>
             </div>
          </div>
          <br/>
       </div>
       <div id="hourly-precipitation" class="row">
          <div class="col-sm-1 hourly-time-container" ng-repeat="hourly in hourlyWeather">
             <div class="hourly-time" style="background-color: {{hourly.color}};">{{hourly.time*1000 | date:'h a'}}</div>
          </div>
        </div>
         <div id="hourly-summary-container" class="row">
            <h4 id="hourly-summary">{{currentWeather.hourly.summary}}</h4>
         </div>
          <!-- /container -->
       </div>
     <div id="loading-container" class="row" ng-show='isWeatherLoading'>
        <div class="col-md-12">
           <h1>Loading...</h1>
        </div>
     </div>
    </body>
 </html>