weather.html 9.6 KB
Newer Older
Zach's avatar
Zach committed
1
<body>
2

Zach's avatar
tab bar    
Zach committed
3
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
Zach's avatar
Zach committed
4
5
6
7
8
9
10
11
12
13
14
        <header class="mdl-layout__header">
            <div class="mdl-layout__header-row">
                <!-- Title -->
                <span class="mdl-layout-title">Weather</span>
            </div>
            <!-- Tabs -->
            <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
                <a href="#fairfax" class="mdl-layout__tab is-active">Fairfax</a>
                <a href="#arlington" class="mdl-layout__tab">Arlington</a>
                <a href="#scitech" class="mdl-layout__tab">SciTech</a>
                <a href="#korea" class="mdl-layout__tab">Mason Korea</a>
15
                <a href="#saudi" class="mdl-layout__tab">Ras-Al-Khaimah</a>
Zach's avatar
Zach committed
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
            </div>
        </header>
        <main class="mdl-layout__content">
            <div class="bg">
                <section class="mdl-layout__tab-panel is-active" id="fairfax">
                    <div class="page-content">{{> weather}}</div>
                </section>
                <section class="mdl-layout__tab-panel" id="arlington">
                    <div class="page-content">{{> weather}}</div>
                </section>
                <section class="mdl-layout__tab-panel" id="scitech">
                    <div class="page-content">{{> weather}}</div>
                </section>
                <section class="mdl-layout__tab-panel" id="korea">
                    <div class="page-content">{{> weather}}</div>
                </section>
                <section class="mdl-layout__tab-panel" id="saudi">
                    <div class="page-content">{{> weather}}</div>
                </section>
            </div>
            {{> footer}}
        </main>
38
    </div>
Zach's avatar
Zach committed
39
</body>
40

Zach's avatar
Zach committed
41
<template name="weather">
Zach's avatar
Zach committed
42
43
44
45
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--6-col">
            <div class="weather-card mdl-card mdl-shadow--4dp">
                <div class="mdl-card__title">
Zach's avatar
tab bar    
Zach committed
46
                    <h1 class="mdl-card__title-text">Current Conditions<br /></h1>
Zach's avatar
Zach committed
47
48
49
50
51
52
53
                </div>
                <div class="mdl-card__supporting-text">
                    <h4>Partly Cloudy</h4>
                    <div class="temp-size">
                        <i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i>
                    </div>
                    <br /> Feels like 72<i class="wi wi-fahrenheit"></i>
Zach's avatar
Zach committed
54
                    <br /><i class="wi wi-wind wi-towards-nne"></i> 5mph NNE
Zach's avatar
Zach committed
55
56
57
                </div>
            </div>
        </div>
Zach's avatar
Zach committed
58
        <div class="hourly-table mdl-cell mdl-cell--6-col mdl-shadow--4dp table-full-width">
Zach's avatar
Zach committed
59
60
61
            <table class="mdl-data-table mdl-js-data-table">
                <thead>
                    <tr>
Zach's avatar
Zach committed
62
                        <th class="mdl-data-table__cell--non-numeric table-full-width">Hourly Forcast</th>
Zach's avatar
Zach committed
63
64
65
66
                        <th class="mdl-data-table__cell--non-numeric">Condition</th>
                        <th class="mdl-data-table__cell--non-numeric"><i class="wi wi-fahrenheit"></i></th>
                        <th class="mdl-data-table__cell--non-numeric">Precipitation</th>
                        <th class="mdl-data-table__cell--non-numeric">Wind</th>
Zach's avatar
Zach committed
67
68
69
70
71
72
73
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="mdl-data-table__cell--non-numeric">4 PM</td>
                        <td class="mdl-data-table__cell--non-numeric"><i class="wi wi-day-cloudy wi-fw"></i> Partly Cloudy</td>
                        <td>74<i class="wi wi-fahrenheit"></i></td>
Zach's avatar
Zach committed
74
75
                        <td>0%</td>
                        <td>3mph</td>
Zach's avatar
Zach committed
76
77
78
79
80
                    </tr>
                    <tr>
                        <td class="mdl-data-table__cell--non-numeric">5 PM</td>
                        <td class="mdl-data-table__cell--non-numeric"><i class="wi wi-day-sunny wi-fw"></i>Sunny</td>
                        <td>72<i class="wi wi-fahrenheit"></i></td>
Zach's avatar
Zach committed
81
82
                        <td>0%</td>
                        <td>4mph</td>
Zach's avatar
Zach committed
83
84
85
86
87
                    </tr>
                    <tr>
                        <td class="mdl-data-table__cell--non-numeric">6 PM</td>
                        <td class="mdl-data-table__cell--non-numeric"><i class="wi wi-night-clear wi-fw"></i>Clear</td>
                        <td>70<i class="wi wi-fahrenheit"></i></td>
Zach's avatar
Zach committed
88
89
                        <td>0%</td>
                        <td>6mph</td>
Zach's avatar
Zach committed
90
91
92
93
94
                    </tr>
                    <tr>
                        <td class="mdl-data-table__cell--non-numeric">7 PM</td>
                        <td class="mdl-data-table__cell--non-numeric"><i class="wi wi-night-cloudy wi-fw"></i>Partly Cloudy</td>
                        <td>69<i class="wi wi-fahrenheit"></i></td>
Zach's avatar
Zach committed
95
96
                        <td>0%</td>
                        <td>11mph</td>
Zach's avatar
Zach committed
97
                    </tr>
98
99
100
101
102
103
104
105
106
107
108
109
110
111
                    <tr>
                        <td class="mdl-data-table__cell--non-numeric">8 PM</td>
                        <td class="mdl-data-table__cell--non-numeric"><i class="wi wi-night-cloudy wi-fw"></i>Partly Cloudy</td>
                        <td>69<i class="wi wi-fahrenheit"></i></td>
                        <td>0%</td>
                        <td>10mph</td>
                    </tr>
                    <tr>
                        <td class="mdl-data-table__cell--non-numeric">9 PM</td>
                        <td class="mdl-data-table__cell--non-numeric"><i class="wi wi-night-cloudy wi-fw"></i>Partly Cloudy</td>
                        <td>68<i class="wi wi-fahrenheit"></i></td>
                        <td>0%</td>
                        <td>7mph</td>
                    </tr>
Zach's avatar
Zach committed
112
113
114
115
116
117
118
119
120
121
122
123
124
125
                </tbody>
            </table>
        </div>
        <div class="mdl-cell mdl-cell--4-col">
            <div class="out-of-focus-card mdl-card mdl-shadow--4dp">
                <div class="mdl-card__title">
                    <h1 class="mdl-card__title-text">Tomorrow<br /></h1>
                </div>
                <div class="mdl-card__supporting-text">
                    <h5>Partly Cloudy</h5>
                    <div class="oof-size">
                        <i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i> / 48<i class="wi wi-fahrenheit"></i>
                    </div>
                </div>
Zach's avatar
Zach committed
126
            </div>
Zach's avatar
Zach committed
127
128
129
130
131
132
133
134
135
136
137
138
        </div>
        <div class="mdl-cell mdl-cell--4-col">
            <div class="out-of-focus-card mdl-card mdl-shadow--4dp">
                <div class="mdl-card__title">
                    <h1 class="mdl-card__title-text">Saturday<br /></h1>
                </div>
                <div class="mdl-card__supporting-text">
                    <h5>Partly Cloudy</h5>
                    <div class="oof-size">
                        <i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i> / 48<i class="wi wi-fahrenheit"></i>
                    </div>
                </div>
Zach's avatar
Zach committed
139
            </div>
Zach's avatar
Zach committed
140
141
142
143
144
145
146
147
148
149
150
151
152
153
        </div>
        <div class="mdl-cell mdl-cell--4-col">
            <div class="out-of-focus-card mdl-card mdl-shadow--4dp">
                <div class="mdl-card__title">
                    <h1 class="mdl-card__title-text">Sunday<br /></h1>
                </div>
                <div class="mdl-card__supporting-text">
                    <h5>Partly Cloudy</h5>
                    <div class="oof-size">
                        <i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i> / 48<i class="wi wi-fahrenheit"></i>
                    </div>
                </div>
            </div>
        </div>
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
        <div class="mdl-cell mdl-cell--4-col">
            <div class="out-of-focus-card mdl-card mdl-shadow--4dp">
                <div class="mdl-card__title">
                    <h1 class="mdl-card__title-text">Monday<br /></h1>
                </div>
                <div class="mdl-card__supporting-text">
                    <h5>Partly Cloudy</h5>
                    <div class="oof-size">
                        <i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i> / 48<i class="wi wi-fahrenheit"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="mdl-cell mdl-cell--4-col">
            <div class="out-of-focus-card mdl-card mdl-shadow--4dp">
                <div class="mdl-card__title">
                    <h1 class="mdl-card__title-text">Tuesday<br /></h1>
                </div>
                <div class="mdl-card__supporting-text">
                    <h5>Partly Cloudy</h5>
                    <div class="oof-size">
                        <i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i> / 48<i class="wi wi-fahrenheit"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="mdl-cell mdl-cell--4-col">
            <div class="out-of-focus-card mdl-card mdl-shadow--4dp">
                <div class="mdl-card__title">
                    <h1 class="mdl-card__title-text">Wednesday<br /></h1>
                </div>
                <div class="mdl-card__supporting-text">
                    <h5>Partly Cloudy</h5>
                    <div class="oof-size">
                        <i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i> / 48<i class="wi wi-fahrenheit"></i>
                    </div>
                </div>
            </div>
        </div>
193
194
195
    </div>
</template>

Zach's avatar
Zach committed
196
197
198
199
200
201
202
203
204
205
<template name="footer">
    <footer class="mdl-mini-footer">
        <div class="mdl-mini-footer__left-section">
            <div class="mdl-logo">SRCT Weather</div>
        </div>
        <div class="mdl-mini-footer__right-section">
            A project of <a href="http://srct.gmu.edu/">Mason SRCT</a>
        </div>
    </footer>
</template>