99 |
100 |
101 |
102 |
103 |
104 |
Switches
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 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
172 |
173 |
174 |
175 |
176 |
183 |
190 |
197 |
198 |
199 |
200 |
201 |
212 |
213 |
214 |
215 |
216 |
217 |
--------------------------------------------------------------------------------
/css/flatWeatherPlugin.css:
--------------------------------------------------------------------------------
1 | /*************************************************************************************************/
2 | /* Global - Base */
3 | /*************************************************************************************************/
4 | @font-face {
5 | font-family: 'weathericons';
6 | src: url('../fonts/weathericons-regular-webfont.eot');
7 | src: url('../fonts/weathericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/weathericons-regular-webfont.woff') format('woff'), url('../fonts/weathericons-regular-webfont.ttf') format('truetype'), url('../fonts/weathericons-regular-webfont.svg#weathericons-regular-webfontRg') format('svg');
8 | font-weight: normal;
9 | font-style: normal;
10 | }
11 |
12 | .wi:before, .wi:after {
13 | display: inline-block;
14 | font-family: 'weathericons';
15 | font-style: normal;
16 | font-weight: normal;
17 | line-height: 1;
18 | -webkit-font-smoothing: antialiased;
19 | -moz-osx-font-smoothing: grayscale;
20 | }
21 |
22 |
23 | .flatWeatherPlugin {
24 | font-size: inherit;
25 | width: 100%;
26 | }
27 |
28 | .flatWeatherPlugin h2{
29 | color: #b2c831;
30 | }
31 |
32 | .flatWeatherPlugin p, .flatWeatherPlugin h3, .flatWeatherPlugin ul, .flatWeatherPlugin li {
33 | padding: 0;
34 | margin: 0;
35 | color: inherit;
36 | }
37 |
38 | #flatWeatherLoading.loading {
39 | font-size: 90px;
40 | text-align: center;
41 | padding: 10px;
42 | overflow: hidden;
43 | -webkit-animation:spin 2s linear infinite;
44 | -moz-animation:spin 2s linear infinite;
45 | animation:spin 2s linear infinite;
46 | opacity: 0.2;
47 | }
48 | @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
49 | @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
50 | @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
51 |
52 | .flatWeatherPlugin h2 {
53 | margin: 0 0 5px 0;
54 | }
55 |
56 | .flatWeatherPlugin .wiToday {
57 | width: 100%;
58 | overflow: hidden;
59 | }
60 |
61 | .flatWeatherPlugin .wiToday > .wiIconGroup {
62 | float: right;
63 | width: 50%;
64 | text-align: center;
65 | }
66 |
67 | .flatWeatherPlugin .wiToday > .wiIconGroup p {
68 | width: 100%;
69 | color: inherit;
70 | line-height: 1em;
71 | padding: 6px 0 0 0;
72 | }
73 |
74 |
75 | .flatWeatherPlugin .wiToday .wiIconGroup div.wi {
76 | font-size: 400%;
77 | line-height: 1.45em;
78 | width: 100%;
79 | }
80 |
81 | .flatWeatherPlugin .wiToday .wiIconGroup div.wi:before {
82 | vertical-align: text-bottom;
83 | }
84 |
85 | .flatWeatherPlugin .clearfix:after {
86 | content: " ";
87 | display: table;
88 | clear: both;
89 | }
90 |
91 | .flatWeatherPlugin div.wiToday > p.wiTemperature {
92 | font-size: 400%;
93 | line-height: 1.45em;
94 | float: left;
95 | width: 50%;
96 | text-align: center;
97 | color: inherit;
98 | }
99 |
100 | .flatWeatherPlugin sup {
101 | opacity: 0.7;
102 | font-size: 65%;
103 | vertical-align: baseline;
104 | top: -0.5em;
105 | position: relative;
106 | }
107 |
108 | .flatWeatherPlugin .wiDetail {
109 | overflow: hidden;
110 | width: 100%;
111 | padding-bottom: 5px;
112 | color:#eeeeee;
113 | }
114 |
115 | .flatWeatherPlugin.today .wiDetail {
116 | padding-top: 10px;
117 | }
118 |
119 | .flatWeatherPlugin .wiDetail p.wiDay {
120 | font-weight: bold;
121 | margin: 5px 0 2px 0;
122 | text-align: left;
123 | color: inherit;
124 | }
125 |
126 | .flatWeatherPlugin.partial .wiToday p.wiDay {
127 | text-align: center;
128 | font-weight: bold;
129 | padding: 0 0 10px 0;
130 | clear: both;
131 | width: 100%;
132 | color: inherit;
133 | }
134 |
135 |
136 | .flatWeatherPlugin .wiDetail ul {
137 | width: 33%;
138 | float: left;
139 | list-style: none;
140 | font-size: 90%;
141 | }
142 |
143 | .flatWeatherPlugin .wiDetail ul + ul {
144 | width: 27%;
145 | }
146 |
147 | .flatWeatherPlugin .wiDetail ul + ul + ul {
148 | width: 40%;
149 | }
150 |
151 | .flatWeatherPlugin .wiDetail ul li:before {
152 | width:30px;
153 |
154 | }
155 |
156 | .flatWeatherPlugin ul.wiForecasts{
157 | width: 100%;
158 | overflow: hidden;
159 | }
160 |
161 | .flatWeatherPlugin ul.wiForecasts li > span {
162 | width: 25%;
163 | display: inline-block;
164 | }
165 |
166 | .flatWeatherPlugin ul.wiForecasts li {
167 | float: left;
168 | width: 100%;
169 | overflow: hidden;
170 | display: inline;
171 | }
172 |
173 | .flatWeatherPlugin ul.wiForecasts ul.wiForecast {
174 | font-weight: normal;
175 | list-style: none;
176 | float: right;
177 | width: 75%;
178 | }
179 |
180 | .flatWeatherPlugin.forecast ul.wiForecasts ul.wiForecast li {
181 | text-align: center;
182 | }
183 |
184 | .flatWeatherPlugin ul.wiForecasts ul.wiForecast li {
185 | width: 33%;
186 | float: left;
187 | text-align: center;
188 | }
189 |
190 | .flatWeatherPlugin ul.wiForecasts ul.wiForecast li.wi:before {
191 | vertical-align: bottom;
192 | }
193 |
194 | .flatWeatherPlugin ul.wiForecasts li.wiDay {
195 | font-weight: bold;
196 | border-color: inherit;
197 | border-top: 1px solid RGBA(255,255,255,0.2);
198 | padding: 5px 0;
199 | }
200 |
201 | .flatWeatherPlugin.forecast ul.wiForecasts li.wiDay {
202 | border-bottom: 1px solid RGBA(255,255,255,0.2);
203 | border-top: none;
204 | }
205 |
206 | .flatWeatherPlugin ul.wiForecasts li.wiDay:last-child {
207 | border-bottom: none;
208 | }
209 |
210 |
211 | /*************************************************************************************************/
212 | /* Font mappings */
213 | /*************************************************************************************************/
214 |
215 | /***************************
216 | General
217 | ****************************/
218 | .wi.sunrise:before {
219 | content: "\f051";
220 | }
221 |
222 | .wi.sunset:before {
223 | content: "\f052";
224 | }
225 |
226 | .wi.wind:before {
227 | content: "\f050";
228 | }
229 |
230 | .wi.humidity:before {
231 | content: "\f04e";
232 | }
233 |
234 | .wi.pressure:before {
235 | content: "\f040";
236 | }
237 |
238 | .wi.cloudiness:before {
239 | content: "\f041";
240 | }
241 |
242 | .wi.temperature.metric:after {
243 | content: "\f03c";
244 | }
245 |
246 | .wi.temperature.imperial:after {
247 | content: "\f045";
248 | }
249 |
250 | .wi.loading:after {
251 | content: "\f04c";
252 | }
253 |
254 | /***************************
255 | Thunderstorm
256 | ****************************/
257 |
258 | /* thunderstorm with light rain */
259 | .wi.wi200:before {
260 | content: "\f01d";
261 | }
262 |
263 | /* thunderstorm with rain */
264 | .wi.wi201:before {
265 | content: "\f01d";
266 | }
267 |
268 | /* thunderstorm with heavy rain */
269 | .wi.wi202:before {
270 | content: "\f01e";
271 | }
272 |
273 | /* light thunderstorm */
274 | .wi.wi210:before {
275 | content: "\f010";
276 | }
277 |
278 | /* thunderstorm */
279 | .wi.wi211:before {
280 | content: "\f01e";
281 | }
282 |
283 | /* heavy thunderstorm */
284 | .wi.wi212:before {
285 | content: "\f01e";
286 | }
287 |
288 | /* ragged thunderstorm */
289 | .wi.wi221:before {
290 | content: "\f016";
291 | }
292 |
293 | /* thunderstorm with light drizzle */
294 | .wi.wi230:before {
295 | content: "\f01d";
296 | }
297 |
298 | /* thunderstorm with drizzle */
299 | .wi.wi231:before {
300 | content: "\f01d";
301 | }
302 |
303 | /* thunderstorm with heavy drizzle */
304 | .wi.wi232:before {
305 | content: "\f01d";
306 | }
307 |
308 | /***************************
309 | Drizzle
310 | ****************************/
311 |
312 | /* light intensity drizzle */
313 | .wi.wi300:before {
314 | content: "\f01c";
315 | }
316 |
317 | /* drizzle */
318 | .wi.wi301:before {
319 | content: "\f01c";
320 | }
321 |
322 | /* heavy intensity drizzle */
323 | .wi.wi302:before {
324 | content: "\f01c";
325 | }
326 |
327 | /* light intensity drizzle rain */
328 | .wi.wi310:before {
329 | content: "\f01c";
330 | }
331 |
332 | /* drizzle rain */
333 | .wi.wi311:before {
334 | content: "\f017";
335 | }
336 |
337 | /* heavy intensity drizzle rain */
338 | .wi.wi312:before {
339 | content: "\f017";
340 | }
341 |
342 | /* shower rain and drizzle */
343 | .wi.wi313:before {
344 | content: "\f01a";
345 | }
346 |
347 | /* heavy shower rain and drizzle */
348 | .wi.wi314:before {
349 | content: "\f01a";
350 | }
351 |
352 | /* shower drizzle */
353 | .wi.wi321:before {
354 | content: "\f01a";
355 | }
356 |
357 | /***************************
358 | Rain
359 | ****************************/
360 |
361 | /* light rain */
362 | .wi.wi500:before {
363 | content: "\f01a";
364 | }
365 |
366 | /* moderate rain */
367 | .wi.wi501:before {
368 | content: "\f017";
369 | }
370 |
371 | /* heavy intensity rain */
372 | .wi.wi502:before {
373 | content: "\f019";
374 | }
375 |
376 | /* very heavy rain */
377 | .wi.wi503:before {
378 | content: "\f019";
379 | }
380 |
381 | /* extreme rain */
382 | .wi.wi504:before {
383 | content: "\f018";
384 | }
385 |
386 | /* freezing rain */
387 | .wi.wi511:before {
388 | content: "\f015";
389 | }
390 |
391 | /* light intensity shower rain */
392 | .wi.wi520:before {
393 | content: "\f01a";
394 | }
395 |
396 | /* shower rain */
397 | .wi.wi521:before {
398 | content: "\f01a";
399 | }
400 |
401 | /* heavy intensity shower rain */
402 | .wi.wi522:before {
403 | content: "\f01a";
404 | }
405 |
406 | /* ragged shower rain */
407 | .wi.wi531:before {
408 | content: "\f01a";
409 | }
410 |
411 | /***************************
412 | Snow
413 | ****************************/
414 |
415 | /* light snow */
416 | .wi.wi600:before {
417 | content: "\f01b";
418 | }
419 |
420 | /* snow */
421 | .wi.wi601:before {
422 | content: "\f01b";
423 | }
424 |
425 | /* heavy snow */
426 | .wi.wi602:before {
427 | content: "\f01b";
428 | }
429 |
430 | /* sleet */
431 | .wi.wi611:before {
432 | content: "\f015";
433 | }
434 |
435 | /* shower sleet */
436 | .wi.wi612:before {
437 | content: "\f015";
438 | }
439 |
440 | /* light rain and snow */
441 | .wi.wi615:before {
442 | content: "\f017";
443 | }
444 |
445 | /* rain and snow */
446 | .wi.wi616:before {
447 | content: "\f017";
448 | }
449 |
450 | /* light shower snow */
451 | .wi.wi620:before {
452 | content: "\f017";
453 | }
454 |
455 | /* shower snow */
456 | .wi.wi621:before {
457 | content: "\f017";
458 | }
459 |
460 | /* heavy shower snow */
461 | .wi.wi622:before {
462 | content: "\f017";
463 | }
464 |
465 | /***************************
466 | Atmosphere
467 | ****************************/
468 |
469 | /* mist */
470 | .wi.wi701:before {
471 | content: "\f014";
472 | }
473 |
474 | /* smoke */
475 | .wi.wi711:before {
476 | content: "\f062";
477 | }
478 |
479 | /* haze */
480 | .wi.wi721:before {
481 | content: "\f014";
482 | }
483 |
484 | /* sand, dust whirls */
485 | .wi.wi731:before {
486 | content: "\f063";
487 | }
488 |
489 | /* fog */
490 | .wi.wi741:before {
491 | content: "\f014";
492 | }
493 |
494 | /* sand */
495 | .wi.wi751:before {
496 | content: "\f063";
497 | }
498 |
499 | /* dust */
500 | .wi.wi761:before {
501 | content: "\f063";
502 | }
503 |
504 | /* volcanic ash */
505 | .wi.wi762:before {
506 | content: "\f063";
507 | }
508 |
509 | /* squalls */
510 | .wi.wi771:before {
511 | content: "\f050";
512 | }
513 |
514 | /* tornado */
515 | .wi.wi781:before {
516 | content: "\f056";
517 | }
518 |
519 | /***************************
520 | Clouds
521 | ****************************/
522 |
523 | /* clear sky */
524 | .wi.wi800:before {
525 | content: "\f00d";
526 | }
527 |
528 | /* few clouds */
529 | .wi.wi801:before {
530 | content: "\f002";
531 | }
532 |
533 | /* scattered clouds */
534 | .wi.wi802:before {
535 | content: "\f002";
536 | }
537 |
538 | /* broken clouds */
539 | .wi.wi803:before {
540 | content: "\f002";
541 | }
542 |
543 | /* overcast clouds */
544 | .wi.wi804:before {
545 | content: "\f00c";
546 | }
547 |
548 | /***************************
549 | Extreme
550 | ****************************/
551 |
552 | /* tornado */
553 | .wi.wi900:before {
554 | content: "\f056";
555 | }
556 |
557 | /* tropical storm */
558 | .wi.wi901:before {
559 | content: "\f073";
560 | }
561 |
562 | /* hurricane */
563 | .wi.wi902:before {
564 | content: "\f073";
565 | }
566 |
567 | /* cold */
568 | .wi.wi903:before {
569 | content: "\f076";
570 | }
571 |
572 | /* hot */
573 | .wi.wi904:before {
574 | content: "\f072";
575 | }
576 |
577 | /* windy */
578 | .wi.wi905:before {
579 | content: "\f050";
580 | }
581 |
582 | /* hail */
583 | .wi.wi906:before {
584 | content: "\f015";
585 | }
586 |
587 | /***************************
588 | Additional
589 | ****************************/
590 |
591 | /* calm */
592 | .wi.wi951:before {
593 | content: "\f00d";
594 | }
595 |
596 | /* light breeze */
597 | .wi.wi952:before {
598 | content: "\f021";
599 | }
600 |
601 | /* gentle breeze */
602 | .wi.wi953:before {
603 | content: "\f021";
604 | }
605 |
606 | /* moderate breeze */
607 | .wi.wi954:before {
608 | content: "\f021";
609 | }
610 |
611 | /* fresh breeze */
612 | .wi.wi955:before {
613 | content: "\f021";
614 | }
615 |
616 | /* strong breeze */
617 | .wi.wi956:before {
618 | content: "\f050";
619 | }
620 |
621 | /* high wind, near gale */
622 | .wi.wi957:before {
623 | content: "\f050";
624 | }
625 |
626 | /* gale */
627 | .wi.wi958:before {
628 | content: "\f050";
629 | }
630 |
631 | /* severe gale */
632 | .wi.wi959:before {
633 | content: "\f073";
634 | }
635 |
636 | /* storm */
637 | .wi.wi960:before {
638 | content: "\f073";
639 | }
640 |
641 | /* violent storm */
642 | .wi.wi961:before {
643 | content: "\f073";
644 | }
645 |
646 | /* hurricane */
647 | .wi.wi962:before {
648 | content: "\f073";
649 | }
--------------------------------------------------------------------------------
/css/lightbox.css:
--------------------------------------------------------------------------------
1 | /* Preload images */
2 | body:after {
3 | content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
4 | display: none;
5 | }
6 |
7 | .lightboxOverlay {
8 | position: absolute;
9 | top: 0;
10 | left: 0;
11 | z-index: 9999;
12 | background-color: black;
13 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
14 | opacity: 0.8;
15 | display: none;
16 | }
17 |
18 | .lightbox {
19 | position: absolute;
20 | left: 0;
21 | width: 100%;
22 | z-index: 10000;
23 | text-align: center;
24 | line-height: 0;
25 | font-weight: normal;
26 | }
27 |
28 | .lightbox .lb-image {
29 | display: block;
30 | height: auto;
31 | max-width: inherit;
32 | -webkit-border-radius: 3px;
33 | -moz-border-radius: 3px;
34 | -ms-border-radius: 3px;
35 | -o-border-radius: 3px;
36 | border-radius: 3px;
37 | }
38 |
39 | .lightbox a img {
40 | border: none;
41 | }
42 |
43 | .lb-outerContainer {
44 | position: relative;
45 | background-color: white;
46 | *zoom: 1;
47 | width: 250px;
48 | height: 250px;
49 | margin: 0 auto;
50 | -webkit-border-radius: 4px;
51 | -moz-border-radius: 4px;
52 | -ms-border-radius: 4px;
53 | -o-border-radius: 4px;
54 | border-radius: 4px;
55 | }
56 |
57 | .lb-outerContainer:after {
58 | content: "";
59 | display: table;
60 | clear: both;
61 | }
62 |
63 | .lb-container {
64 | padding: 4px;
65 | }
66 |
67 | .lb-loader {
68 | position: absolute;
69 | top: 43%;
70 | left: 0;
71 | height: 25%;
72 | width: 100%;
73 | text-align: center;
74 | line-height: 0;
75 | }
76 |
77 | .lb-cancel {
78 | display: block;
79 | width: 32px;
80 | height: 32px;
81 | margin: 0 auto;
82 | background: url(../images/loading.gif) no-repeat;
83 | }
84 |
85 | .lb-nav {
86 | position: absolute;
87 | top: 0;
88 | left: 0;
89 | height: 100%;
90 | width: 100%;
91 | z-index: 10;
92 | }
93 |
94 | .lb-container > .nav {
95 | left: 0;
96 | }
97 |
98 | .lb-nav a {
99 | outline: none;
100 | background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
101 | }
102 |
103 | .lb-prev, .lb-next {
104 | height: 100%;
105 | cursor: pointer;
106 | display: block;
107 | }
108 |
109 | .lb-nav a.lb-prev {
110 | width: 34%;
111 | left: 0;
112 | float: left;
113 | background: url(../images/prev.png) left 48% no-repeat;
114 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
115 | opacity: 0;
116 | -webkit-transition: opacity 0.6s;
117 | -moz-transition: opacity 0.6s;
118 | -o-transition: opacity 0.6s;
119 | transition: opacity 0.6s;
120 | }
121 |
122 | .lb-nav a.lb-prev:hover {
123 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
124 | opacity: 1;
125 | }
126 |
127 | .lb-nav a.lb-next {
128 | width: 64%;
129 | right: 0;
130 | float: right;
131 | background: url(../images/next.png) right 48% no-repeat;
132 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
133 | opacity: 0;
134 | -webkit-transition: opacity 0.6s;
135 | -moz-transition: opacity 0.6s;
136 | -o-transition: opacity 0.6s;
137 | transition: opacity 0.6s;
138 | }
139 |
140 | .lb-nav a.lb-next:hover {
141 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
142 | opacity: 1;
143 | }
144 |
145 | .lb-dataContainer {
146 | margin: 0 auto;
147 | padding-top: 5px;
148 | *zoom: 1;
149 | width: 100%;
150 | -moz-border-radius-bottomleft: 4px;
151 | -webkit-border-bottom-left-radius: 4px;
152 | border-bottom-left-radius: 4px;
153 | -moz-border-radius-bottomright: 4px;
154 | -webkit-border-bottom-right-radius: 4px;
155 | border-bottom-right-radius: 4px;
156 | }
157 |
158 | .lb-dataContainer:after {
159 | content: "";
160 | display: table;
161 | clear: both;
162 | }
163 |
164 | .lb-data {
165 | padding: 0 4px;
166 | color: #ccc;
167 | }
168 |
169 | .lb-data .lb-details {
170 | width: 85%;
171 | float: left;
172 | text-align: left;
173 | line-height: 1.1em;
174 | }
175 |
176 | .lb-data .lb-caption {
177 | font-size: 13px;
178 | font-weight: bold;
179 | line-height: 1em;
180 | }
181 |
182 | .lb-data .lb-number {
183 | display: block;
184 | clear: left;
185 | padding-bottom: 1em;
186 | font-size: 12px;
187 | color: #999999;
188 | }
189 |
190 | .lb-data .lb-close {
191 | display: block;
192 | float: right;
193 | width: 30px;
194 | height: 30px;
195 | background: url(../images/close.png) top right no-repeat;
196 | text-align: right;
197 | outline: none;
198 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
199 | opacity: 0.7;
200 | -webkit-transition: opacity 0.2s;
201 | -moz-transition: opacity 0.2s;
202 | -o-transition: opacity 0.2s;
203 | transition: opacity 0.2s;
204 | }
205 |
206 | .lb-data .lb-close:hover {
207 | cursor: pointer;
208 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
209 | opacity: 1;
210 | }
211 |
--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
1 |
2 | @media (max-width : 750px) {
3 | /* Styles */
4 | .secondrowfix{
5 | margin-top:0px;
6 | }
7 | .largemobilefix{
8 | width: 100%;
9 | }
10 | .largegraphmobilefix{
11 | width: 100%;
12 | }
13 | .largegraphmobilefix2{
14 | width: 100%;
15 | }
16 | }
17 |
18 |
19 | @media (min-width : 750px) {
20 | /* Styles */
21 | .secondrowfix{
22 | margin-top:-334px;
23 | }
24 | .largemobilefix{
25 | width: 75%;
26 | float: right;
27 | }
28 | .largegraphmobilefix{
29 | width:77%;
30 | float:right;
31 | margin-top: -431px;
32 | margin-right: -13px;
33 | }
34 | .largegraphmobilefix2{
35 | width:77%;
36 | float:right;
37 | margin-top: -222px;
38 | margin-right: -13px;
39 | }
40 | }
41 |
42 |
43 | body {
44 | background:#1f1f1f;
45 | font-family: 'Open Sans', sans-serif;
46 | }
47 |
48 | h1 {
49 | font-family: 'Raleway', sans-serif;}
50 |
51 | h3,h4 , h5 {
52 | font-family: 'Open Sans', sans-serif;
53 | font-weight:lighter;
54 | }
55 |
56 | h2{
57 | font-size:22px;
58 | }
59 |
60 | h3 {
61 | font-size:46px;
62 | color:#b2c831
63 | }
64 |
65 | h5 {
66 | color:#b2c831;
67 | margin-left:5px;
68 | }
69 |
70 | /***********NEWS***********/
71 | .rssHeader{
72 | font-family: 'Open Sans', sans-serif;
73 | font-weight: bold;
74 | font-size: 30px;
75 | line-height: 26px;
76 | letter-spacing: 0px;
77 | padding-top:10px;
78 | padding-bottom:14px;
79 | padding-left:5px;
80 | margin-top:2px;
81 | text-align:center;
82 | }
83 | .rssMedia{
84 | display:none;
85 | }
86 |
87 | .rssRow div{
88 | float:right;
89 | color: #9e9e9e;
90 | font-size: 10px;
91 | padding-right: 10px;
92 | margin-top: -25px;
93 | }
94 | .rssRow {
95 | padding: 10px;
96 | }
97 |
98 | /***********BLOCKS & WRAPS***********/
99 |
100 | /*--- Dash Unit / Used in Dashboard page ---*/
101 | .dash-unit {
102 | margin-bottom: 30px;
103 | padding-bottom:10px;
104 | border: 1px solid #383737;
105 | background-color: #3d3d3d;
106 | color:white;
107 | height:290px;
108 | }
109 |
110 | .dash-unit:hover {
111 | background-color: #4f4f4f;
112 | -moz-box-shadow: 3px 3px 2px 0px #151515;
113 | -webkit-box-shadow: 3px 3px 2px 0px #151515;
114 | box-shadow: 3px 3px 2px 0px #151515;
115 |
116 | }
117 |
118 | .dash-unit dtitle {
119 | font-size:11px;
120 | text-transform:uppercase;
121 | color:#ffffff;
122 | margin:8px;
123 | padding:0px;
124 | height:inherit
125 | }
126 |
127 | .dash-unit hr {
128 | border: 0;
129 | border-top: 1px solid #151515;
130 | border-top-style: dashed;
131 | margin-top:3px;
132 | }
133 |
134 | .dash-unit h1 {
135 | font-family: 'Raleway', sans-serif;
136 | font-weight:300;
137 | font-size: 20px;
138 | line-height: 2px;
139 | letter-spacing: 0px;
140 | color: #ffffff;
141 | padding-top:10px;
142 | padding-left:5px;
143 | margin-top:2px;
144 | text-align:center;
145 | }
146 |
147 | .dash-unit h2 {
148 | font-family: 'Open Sans', sans-serif;
149 | font-weight: bold;
150 | font-size: 30px;
151 | line-height: 26px;
152 | letter-spacing: 0px;
153 | padding-top:10px;
154 | padding-left:5px;
155 | margin-top:2px;
156 | text-align:center;
157 | }
158 |
159 |
160 | .dash-unit h3 {
161 | font-weight:300;
162 | font-size: 15px;
163 | line-height: 2px;
164 | letter-spacing: 0px;
165 | color: #b2c831;
166 | padding-top:10px;
167 | padding-left:5px;
168 | margin-top:2px;
169 | text-align:center;
170 | }
171 |
172 |
173 | .dash-unit p {
174 | font-size: 14px;
175 | font-weight: 200;
176 | line-height: 16px;
177 | color: inherit;
178 | margin: 0 0 10px;
179 | padding:5px;
180 | }
181 |
182 | .dash-unit h4 {
183 | padding-left:5px;
184 | margin-top:2px;
185 | font-size: 13px;
186 | font-weight:lighter;
187 | line-height: 1;
188 | letter-spacing: 0px;
189 | color: #fff;
190 | }
191 |
192 | .dash-unit bold{
193 | font-family: 'Open Sans', sans-serif;
194 | font-size:26px;
195 | font-weight:bold;
196 | color:#fff;
197 | vertical-align:middle;
198 | }
199 |
200 |
201 | /**********Half-Unit / Used in index.html**********/
202 | .half-unit {
203 | margin-bottom: 30px;
204 | padding-bottom: 4px;
205 | border: 1px solid #383737;
206 | background-color: #3d3d3d;
207 | color:white;
208 | height:130px;
209 | }
210 |
211 | .half-unit:hover {
212 | background-color: #4f4f4f;
213 | -moz-box-shadow: 3px 3px 2px 0px #151515;
214 | -webkit-box-shadow: 3px 3px 2px 0px #151515;
215 | box-shadow: 3px 3px 2px 0px #151515;
216 |
217 | }
218 |
219 | .half-unit dtitle {
220 | font-size:10px;
221 | text-transform:uppercase;
222 | color:#ffffff;
223 | margin:8px;
224 | padding:0px;
225 | height:inherit
226 | }
227 |
228 | .half-unit hr {
229 | border: 0;
230 | border-top: 1px solid #151515;
231 | border-top-style: dashed;
232 | margin-top:3px;
233 | }
234 |
235 | .half-unit h1 {
236 | font-family: 'Raleway', sans-serif;
237 | font-weight:300;
238 | font-size: 20px;
239 | line-height: 1;
240 | letter-spacing: 0px;
241 | color: #ffffff;
242 | padding-top:10px;
243 | padding-left:5px;
244 | margin-top:2px;
245 | text-align:center;
246 | }
247 |
248 | .half-unit h4 {
249 | padding-left:5px;
250 | margin-top:2px;
251 | font-size: 13px;
252 | font-weight:lighter;
253 | line-height: 1;
254 | letter-spacing: 0px;
255 | color: #fff;
256 | }
257 |
258 |
259 | .half-unit bold{
260 | font-family: 'Open Sans', sans-serif;
261 | font-size:26px;
262 | font-weight:bold;
263 | color:#fff;
264 | vertical-align:middle;
265 | }
266 |
267 | /**********Styling Elements**********/
268 | .cont {
269 | text-align:center;
270 | margin-top:30px;
271 | }
272 |
273 | .cont ok {
274 | color:#b2c831;
275 | }
276 |
277 | .cont bad {
278 | color:#fa1d2d;
279 | }
280 |
281 | .cont2 {
282 | text-align:center;
283 | margin-top:-15px;
284 | font-size:12px;
285 | line-height:7px;
286 | }
287 |
288 | .cont2 bold{
289 | font-size:10px;
290 | font-weight:bold;
291 | color:#b2c831
292 | }
293 |
294 | .text p {
295 | font-family: 'Open Sans', sans-serif;
296 | margin-left:8px;
297 | font-size:14px;
298 | line-height:18px;
299 | }
300 |
301 | .text grey {
302 | font-size:11px;
303 | color:silver
304 | }
305 |
306 |
307 | /***********Bootstrap Default Modifications***********/
308 |
309 | .thumbnail {
310 | border:0px;
311 | text-align:center;
312 | -webkit-box-shadow: 0px;
313 | -moz-box-shadow: 0px;
314 | box-shadow: 0px;
315 | background: none;
316 | text-align: center;
317 |
318 | }
319 |
320 | .modal-header {
321 |
322 | background-color: #4f4f4f;
323 | color:#fff;
324 | }
325 |
326 |
327 | input[type=submit] {
328 | font-family: 'Open Sans', sans-serif;
329 | font-size: 15px;
330 | background: #b2c831;
331 | color: #fff;
332 | border: none;
333 | padding: 8px 28px 10px 26px;
334 | *-webkit-border-radius: 4px;
335 | -moz-border-radius: 4px;
336 | border-radius: 4px;
337 |
338 | }
339 | input[type=text], textarea {
340 | background: #cdcbcc;
341 | font-size: 13px;
342 | display: block;
343 | width: 100%;
344 | border: none;
345 | box-shadow: none;
346 | height: 30px;
347 | line-height: 18px;
348 | padding: 0;
349 | text-indent: 18px;
350 | margin: 0 0 18px;
351 | }
352 | textarea {
353 | line-height: 18px;
354 | padding: 18px;
355 | width: 100%;
356 | text-indent: 0;
357 | }
358 | .textarea-container { margin: 0 18px; }
359 | .textarea-container textarea { margin-left: -18px; }
360 | #contact textarea { width: 100%; height: 45px; }
361 |
362 |
363 | .progress-bar {
364 | background-color: #b2c831;
365 | }
366 |
367 |
368 |
369 |
370 | /***********LineIcons Styles***********/
371 |
372 |
373 | .info-user {
374 | text-align:center;
375 | font-size: 24px;
376 | color: #b2c831;
377 | }
378 |
379 | .fs1 {
380 | padding:5px 5px 5px 5px;
381 | position:relative;
382 | }
383 |
384 | .fs1:hover {
385 | position:relative;
386 | color: #fff;
387 | cursor:pointer
388 | }
389 |
390 | .fs2 {
391 | padding:5px 5px 5px 5px;
392 | position:relative;
393 | font-size:35px;
394 | vertical-align: text-bottom
395 | }
396 |
397 | /**********Clock Configuration**********/
398 |
399 | digiclock {
400 | font-size: 30px;
401 | color: #fff;
402 | text-align: center;
403 | line-height: 60px;
404 | margin-left: auto
405 | }
406 |
407 | .clockcenter {
408 | text-align:center;
409 | }
410 |
411 |
412 | /**********Mail Style Configuration**********/
413 |
414 | .framemail {
415 | cursor: default;
416 | }
417 | .framemail .window {
418 | font-size: 0;
419 | margin-top: -1px;
420 | overflow: hidden;
421 | margin-left: -18px;
422 | }
423 | .framemail .window .mail li {
424 | background-color:#3d3d3d;
425 | background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
426 | background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
427 | background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
428 | background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
429 | background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
430 | border-top: 1px solid #888;
431 | position: relative;
432 | margin-left:-18px;
433 | }
434 | .framemail .window .mail li:first-child {
435 | border-top: none;
436 | }
437 | .framemail .window .mail li:hover {
438 | background-color: #5d5b5b;
439 | }
440 | .framemail .window .mail li:after,
441 | .framemail .window .mail li:before {
442 | border-left: 8px solid transparent;
443 | border-top: 8px solid #df6;
444 | content: '';
445 | height: 0;
446 | position: absolute;
447 | right: 0;
448 | top: 0;
449 | width: 0;
450 | }
451 | .framemail .window .mail li:before {
452 | border-top-color: #bbb;
453 | border-width: 9px;
454 | }
455 | .framemail .window .mail li:nth-child(1):after,
456 | .framemail .window .mail li:nth-child(1):before {
457 | border: none;
458 | }
459 | .framemail .window .mail li:nth-child(2):after {
460 | border-top-color: #fa1d2d;
461 | }
462 | .framemail .window .mail li i {
463 | display: inline-block;
464 | height: 48px;
465 | width: 6px;
466 | }
467 | .framemail .window .mail li .read {
468 | background-color: #ddd;
469 | }
470 | .framemail .window .mail li .unread {
471 | background: #b2c831;
472 | }
473 | .framemail .window .mail li img {
474 | background: #819da2;
475 | border-radius: 2px;
476 | height: 36px;
477 | left: 12px;
478 | position: absolute;
479 | top: 6px;
480 | width: 36px;
481 | }
482 | .framemail .window .mail li p {
483 | font: 13px/24px sans-serif;
484 | left: 56px;
485 | position: absolute;
486 | top: 3px;
487 | }
488 | .framemail .window .mail li .sender {
489 | color: #e9e8e8;
490 | font-weight: bold;
491 | text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
492 | }
493 | .framemail .window .mail li .message {
494 | color: #999;
495 | overflow: hidden;
496 | text-overflow: ellipsis;
497 | top: 21px;
498 | white-space: nowrap;
499 | }
500 | .framemail .window .mail li .message strong {
501 | color: #999;
502 | }
503 | .framemail .window .mail li .actions {
504 | height: 16px;
505 | position: absolute;
506 | right: 19px;
507 | text-align: right;
508 | top: 0;
509 | width: 96px;
510 | }
511 | .framemail .window .mail li .actions img {
512 | background: none;
513 | display: inline-block;
514 | height: 16px;
515 | margin-left: 6px;
516 | opacity: .1;
517 | position: relative;
518 | width: 16px;
519 | }
520 | .framemail .window .mail li:hover .actions img {
521 | opacity: .25;
522 | }
523 | .framemail .window .mail li .actions img:hover {
524 | opacity: .75;
525 | }
526 |
527 |
528 | /**********DONUT CHARTS STYLES**********/
529 | #load {
530 | width: 11.313em;
531 | height: 11.313em;
532 | -moz-border-radius: 5px;
533 | border-radius: 5px;
534 | margin-bottom: 1.063em;
535 | background-position: center center;
536 | margin:auto;
537 | }
538 |
539 | #space {
540 | width: 11.313em;
541 | height: 11.313em;
542 | -moz-border-radius: 5px;
543 | border-radius: 5px;
544 | margin-bottom: 1.063em;
545 | background-position: center center;
546 | margin:auto;
547 | }
548 |
549 |
550 | /**********LINE AND BARS**********/
551 |
552 | .section-graph {
553 | position: relative;
554 | height: 130px;
555 | color: #fff;
556 | background-image: linear-gradient(color-stops(#b2c831, #b2c831 50%, #b2c831 50%));
557 | margin-bottom:20px;
558 | }
559 | .section-graph .graph-info {
560 | z-index: 99;
561 | position: absolute;
562 | font-weight: bold;
563 | margin-top: 12px;
564 | margin-left: 21px;
565 | width: 100px;
566 | }
567 | .section-graph .graph-info .graph-arrow {
568 | width: 0;
569 | height: 0;
570 | margin-top: 18px;
571 | border-left: 4px solid transparent;
572 | border-right: 4px solid transparent;
573 | border-bottom: 4px solid white;
574 | float: left;
575 | }
576 | .section-graph .graph-info .graph-info-big {
577 | font-size: 24px;
578 | float: left;
579 | margin-left: 3px;
580 | }
581 | .section-graph .graph-info .graph-info-small {
582 | margin-left: 3px;
583 | font-size: 12px;
584 | font-weight: normal;
585 | color: rgba(255, 255, 255, 0.5);
586 | clear: left;
587 | margin-left: 8px;
588 | }
589 | /*
590 | * Info Section
591 | */
592 | .info-aapl {
593 | text-align: center;
594 |
595 | }
596 | .info-aapl ul {
597 | margin-left:30%;
598 |
599 | }
600 | .info-aapl li {
601 | margin: 0;
602 | display: block;
603 | width: 9px;
604 | height: 40px;
605 | margin-right: 6px;
606 | background-color: #f5f0ec;
607 | float:left;
608 | position: relative;
609 | }
610 | .info-aapl li span {
611 | display: block;
612 | width: 9px;
613 | height: 40px;
614 | position: absolute;
615 | bottom: 0;
616 | }
617 | .info-aapl li span.orange {
618 | background-color: #fa1d2d;
619 | }
620 | .info-aapl li span.green {
621 | background-color: #b2c831;
622 | }
623 |
624 | /**********TWITTER WIDGET **********/
625 | #jstwitter ul li{
626 | color:#bdbdbd;
627 | padding:.5em .75em;
628 | }
629 |
630 | #jstwitter ul{
631 | margin-left:0;
632 | list-style:none
633 | }
634 |
635 | #jstwitter:first-child{
636 | border-top:0
637 | }
638 |
639 | ul#jstwitter li a{
640 | font-size:10px;
641 | font-style:italic;
642 | color:#666;
643 | text-decoration:none
644 | }
645 |
646 | /********** CUSTOMIZED BUTTON **********/
647 | .btnnew {
648 | display: inline-block;
649 | *border-left: 0 none #707070;
650 | border-right: 0 none #707070;
651 | border-top: 0 none #707070;
652 | border-bottom: 0 none #707070;
653 | display: inline;
654 | padding: 4px 12px;
655 | margin-bottom: 0;
656 | *margin-left: .3em;
657 | font-size: 14px;
658 | line-height: 20px;
659 | color: #b2c831;
660 | text-align: center;
661 | vertical-align: middle;
662 | cursor: pointer;
663 | background-color: #5a5a5a;
664 | *background-color: #5a5a5a;
665 | background-repeat: repeat-x;
666 | *-webkit-border-radius: 4px;
667 | -moz-border-radius: 4px;
668 | border-radius: 4px;
669 | zoom: 1;
670 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
671 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
672 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
673 | background-image: linear-gradient(to bottom, #707070, #707070);*
674 | }
675 |
676 | /********** SWITCH BUTTON **********/
677 | .switch {
678 | position: relative;
679 | margin: 20px auto;
680 | height: 26px;
681 | width: 120px;
682 | background: rgba(0, 0, 0, 0.25);
683 | border-radius: 3px;
684 | -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
685 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
686 | }
687 |
688 | .switch-label {
689 | position: relative;
690 | z-index: 2;
691 | float: left;
692 | width: 58px;
693 | line-height: 26px;
694 | font-size: 11px;
695 | color: rgba(255, 255, 255, 0.35);
696 | text-align: center;
697 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
698 | cursor: pointer;
699 | }
700 | .switch-label:active {
701 | font-weight: bold;
702 | }
703 |
704 | .switch-label-off {
705 | padding-left: 2px;
706 | }
707 |
708 | .switch-label-on {
709 | padding-right: 2px;
710 | }
711 |
712 | /*
713 | * Note: using adjacent or general sibling selectors combined with
714 | * pseudo classes doesn't work in Safari 5.0 and Chrome 12.
715 | * See this article for more info and a potential fix:
716 | * http://css-tricks.com/webkit-sibling-bug/
717 | */
718 | .switch-input {
719 | display: none;
720 | }
721 | .switch-input:checked + .switch-label {
722 | font-weight: bold;
723 | color: rgba(0, 0, 0, 0.65);
724 | text-shadow: 0 1px rgba(255, 255, 255, 0.25);
725 | -webkit-transition: 0.15s ease-out;
726 | -moz-transition: 0.15s ease-out;
727 | -o-transition: 0.15s ease-out;
728 | transition: 0.15s ease-out;
729 | }
730 | .switch-input:checked + .switch-label-on ~ .switch-selection {
731 | left: 60px;
732 | /* Note: left: 50% doesn't transition in WebKit */
733 | }
734 |
735 | .switch-selection {
736 | display: block;
737 | position: absolute;
738 | z-index: 1;
739 | top: 2px;
740 | left: 2px;
741 | width: 58px;
742 | height: 22px;
743 | background: #b2c831;
744 | border-radius: 3px;
745 | background-image: -webkit-linear-gradient(top, #b6c753, #b2c831);
746 | background-image: -moz-linear-gradient(top, #b6c753, #b2c831);
747 | background-image: -o-linear-gradient(top, #b6c753, #b2c831);
748 | background-image: linear-gradient(to bottom, #b6c753, #b2c831);
749 | -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
750 | box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
751 | -webkit-transition: left 0.15s ease-out;
752 | -moz-transition: left 0.15s ease-out;
753 | -o-transition: left 0.15s ease-out;
754 | transition: left 0.15s ease-out;
755 | }
756 | .switch-blue .switch-selection {
757 | background: #3aa2d0;
758 | background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0);
759 | background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0);
760 | background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0);
761 | background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0);
762 | }
763 | .switch-yellow .switch-selection {
764 | background: #fa1d2d;
765 | background-image: -webkit-linear-gradient(top, #f93e4b, #fa1d2d);
766 | background-image: -moz-linear-gradient(top, #f93e4b, #fa1d2d);
767 | background-image: -o-linear-gradient(top, #f93e4b, #fa1d2d);
768 | background-image: linear-gradient(to bottom, #f93e4b, #fa1d2d);
769 | }
770 |
771 |
772 | /**********Gauge Chart**********/
773 | #canvas {
774 | display: block;
775 | width: 150px;
776 | margin: 30px auto;
777 | }
778 |
779 | /**********Accordion Styling**********/
780 |
781 | .accordion-group {
782 | border: 1px solid #222;
783 | }
784 | .accordion-heading {
785 | background-color: #5a5a5a;
786 | *background-color: #5a5a5a;
787 | background-repeat: repeat-x;
788 | *-webkit-border-radius: 4px;
789 | -moz-border-radius: 4px;
790 | border-radius: 4px;
791 | zoom: 1;
792 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
793 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
794 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
795 | background-image: linear-gradient(to bottom, #707070, #707070);*
796 | }
797 |
798 | /**********Link Styling**********/
799 | a {
800 | color: #b2c831;
801 | text-decoration: none;
802 | }
803 |
804 | a:hover {
805 | color: #dff948;
806 | text-decoration: none;
807 | }
808 |
809 |
810 |
811 | /**********FooterWrap Section**********/
812 | #footerwrap {
813 | width: 100%;
814 | background:#262626;
815 |
816 | padding-top:25px;
817 | padding-bottom: 40px;
818 | border-top-style: solid;
819 | border-top-width:8px;
820 | border-top-color:#1d1d1d;
821 | text-align:center
822 |
823 | }
824 |
825 | #footerwrap p {
826 | color:white;
827 | font-size:12px;
828 | }
829 |
830 |
831 | /***********FULLCALENDAR STYLE***********/
832 |
833 | #external-events {
834 | padding: 0 10px;
835 | border: 1px solid #8b8b8a;
836 | background-color: #8b8b8a;
837 | -webkit-border-radius: 4px;
838 | -moz-border-radius: 4px;
839 | border-radius: 4px;
840 | text-align: left;
841 | }
842 |
843 | #external-events h4 {
844 | font-size: 16px;
845 | margin-top: 0;
846 | padding-top: 1em;
847 | }
848 |
849 | .external-event { /* try to mimick the look of a real event */
850 | margin: 10px 0;
851 | padding: 2px 4px;
852 | background: #b2c831;
853 | color: #fff;
854 | font-size: .85em;
855 | cursor: pointer;
856 | }
857 |
858 | #external-events p {
859 | margin: 1.5em 0;
860 | font-size: 11px;
861 | color: #b2c831;
862 | }
863 |
864 | #external-events p input {
865 | margin: 0;
866 | vertical-align: middle;
867 | }
868 |
869 | #calendar {
870 | width:100%;
871 | }
872 |
873 |
874 | /**********Media Styles**********/
875 |
876 | @media (max-width: 360px){
877 | /*Calendar Adsjustments*/
878 | .fc-header {margin-top:15px;}
879 | .fc-header-title h2{font-size:10px; }
880 | .fc-header-right {display:none}
881 |
882 | /* portrait tablet */
883 | @media (min-width: 767px) and (max-width: 768px) {
884 | .info-aapl ul {
885 | margin-left:10px;
886 | float:left;
887 | }
888 |
889 | #load {
890 | margin-left:5px;
891 | margin-right:10px;
892 | }
893 |
894 | #space {
895 | margin-left:5px;
896 | margin-right:10px;
897 | }
898 |
899 | }
900 |
901 | /* Landscape iphone 5 and samsung galaxy */
902 | @media (min-width: 560px) and (max-width: 685px) {
903 | .info-aapl ul {
904 | margin-left:40%;
905 | }
906 |
907 | }
--------------------------------------------------------------------------------
/css/mainRounded.css:
--------------------------------------------------------------------------------
1 |
2 | @media (max-width : 750px) {
3 | /* Styles */
4 | .secondrowfix{
5 | margin-top:0px;
6 | }
7 | .largemobilefix{
8 | width: 100%;
9 | }
10 | .largegraphmobilefix{
11 | width: 100%;
12 | }
13 | .largegraphmobilefix2{
14 | width: 100%;
15 | }
16 | }
17 |
18 |
19 | @media (min-width : 750px) {
20 | /* Styles */
21 | .secondrowfix{
22 | margin-top:-334px;
23 | }
24 | .largemobilefix{
25 | width: 75%;
26 | float: right;
27 | }
28 | .largegraphmobilefix{
29 | width:77%;
30 | float:right;
31 | margin-top: -431px;
32 | margin-right: -13px;
33 | }
34 | .largegraphmobilefix2{
35 | width:77%;
36 | float:right;
37 | margin-top: -222px;
38 | margin-right: -13px;
39 | }
40 | }
41 |
42 | body {
43 | background:#1f1f1f;
44 | font-family: 'Open Sans', sans-serif;
45 | }
46 |
47 | h1 {
48 | font-family: 'Raleway', sans-serif;}
49 |
50 | h3,h4 , h5 {
51 | font-family: 'Open Sans', sans-serif;
52 | font-weight:lighter;
53 | }
54 |
55 | h2{
56 | font-size:22px;
57 | }
58 |
59 | h3 {
60 | font-size:46px;
61 | color:#b2c831
62 | }
63 |
64 | h5 {
65 | color:#b2c831;
66 | margin-left:5px;
67 | }
68 |
69 |
70 | /***********NEWS***********/
71 | .rssHeader{
72 | font-family: 'Open Sans', sans-serif;
73 | font-weight: bold;
74 | font-size: 30px;
75 | line-height: 26px;
76 | letter-spacing: 0px;
77 | padding-top:10px;
78 | padding-bottom:14px;
79 | padding-left:5px;
80 | margin-top:2px;
81 | text-align:center;
82 | }
83 | .rssMedia{
84 | display:none;
85 | }
86 |
87 | .rssRow div{
88 | float:right;
89 | color: #9e9e9e;
90 | font-size: 10px;
91 | padding-right: 10px;
92 | margin-top: -25px;
93 | }
94 | .rssRow {
95 | padding: 10px;
96 | }
97 |
98 | /***********BLOCKS & WRAPS***********/
99 |
100 | /*--- Dash Unit / Used in Dashboard page ---*/
101 | .dash-unit {
102 | margin-bottom: 30px;
103 | padding-bottom:10px;
104 | border: 1px solid #383737;
105 | border-radius:10px;
106 | background-color: #3d3d3d;
107 | color:white;
108 | height:290px;
109 | }
110 |
111 | .dash-unit:hover {
112 | background-color: #4f4f4f;
113 | -moz-box-shadow: 3px 3px 2px 0px #151515;
114 | -webkit-box-shadow: 3px 3px 2px 0px #151515;
115 | box-shadow: 3px 3px 2px 0px #151515;
116 |
117 | }
118 |
119 | .dash-unit dtitle {
120 | font-size:11px;
121 | text-transform:uppercase;
122 | color:#ffffff;
123 | margin:8px;
124 | padding:0px;
125 | height:inherit
126 | }
127 |
128 | .dash-unit hr {
129 | border: 0;
130 | border-top: 1px solid #151515;
131 | border-top-style: dashed;
132 | margin-top:3px;
133 | }
134 |
135 | .dash-unit h1 {
136 | font-family: 'Raleway', sans-serif;
137 | font-weight:300;
138 | font-size: 20px;
139 | line-height: 2px;
140 | letter-spacing: 0px;
141 | color: #ffffff;
142 | padding-top:10px;
143 | padding-left:5px;
144 | margin-top:2px;
145 | text-align:center;
146 | }
147 |
148 | .dash-unit h2 {
149 | font-family: 'Open Sans', sans-serif;
150 | font-weight: bold;
151 | font-size: 30px;
152 | line-height: 26px;
153 | letter-spacing: 0px;
154 | color: #ffffff;
155 | padding-top:10px;
156 | padding-left:5px;
157 | margin-top:2px;
158 | text-align:center;
159 | }
160 |
161 |
162 | .dash-unit h3 {
163 | font-weight:300;
164 | font-size: 15px;
165 | line-height: 2px;
166 | letter-spacing: 0px;
167 | color: #b2c831;
168 | padding-top:10px;
169 | padding-left:5px;
170 | margin-top:2px;
171 | text-align:center;
172 | }
173 |
174 |
175 | .dash-unit p {
176 | font-size: 14px;
177 | font-weight: 200;
178 | line-height: 16px;
179 | color: inherit;
180 | margin: 0 0 10px;
181 | padding:5px;
182 | }
183 |
184 | .dash-unit h4 {
185 | padding-left:5px;
186 | margin-top:2px;
187 | font-size: 13px;
188 | font-weight:lighter;
189 | line-height: 1;
190 | letter-spacing: 0px;
191 | color: #fff;
192 | }
193 |
194 | .dash-unit bold{
195 | font-family: 'Open Sans', sans-serif;
196 | font-size:26px;
197 | font-weight:bold;
198 | color:#fff;
199 | vertical-align:middle;
200 | }
201 |
202 |
203 | /**********Half-Unit / Used in index.html**********/
204 | .half-unit {
205 | margin-bottom: 30px;
206 | padding-bottom: 4px;
207 | border-radius:10px;
208 | border: 1px solid #383737;
209 | background-color: #3d3d3d;
210 | color:white;
211 | height:130px;
212 | }
213 |
214 | .half-unit:hover {
215 | background-color: #4f4f4f;
216 | -moz-box-shadow: 3px 3px 2px 0px #151515;
217 | -webkit-box-shadow: 3px 3px 2px 0px #151515;
218 | box-shadow: 3px 3px 2px 0px #151515;
219 |
220 | }
221 |
222 | .half-unit dtitle {
223 | font-size:10px;
224 | text-transform:uppercase;
225 | color:#ffffff;
226 | margin:8px;
227 | padding:0px;
228 | height:inherit
229 | }
230 |
231 | .half-unit hr {
232 | border: 0;
233 | border-top: 1px solid #151515;
234 | border-top-style: dashed;
235 | margin-top:3px;
236 | }
237 |
238 | .half-unit h1 {
239 | font-family: 'Raleway', sans-serif;
240 | font-weight:300;
241 | font-size: 20px;
242 | line-height: 1;
243 | letter-spacing: 0px;
244 | color: #ffffff;
245 | padding-top:10px;
246 | padding-left:5px;
247 | margin-top:2px;
248 | text-align:center;
249 | }
250 |
251 | .half-unit h4 {
252 | padding-left:5px;
253 | margin-top:2px;
254 | font-size: 13px;
255 | font-weight:lighter;
256 | line-height: 1;
257 | letter-spacing: 0px;
258 | color: #fff;
259 | }
260 |
261 |
262 | .half-unit bold{
263 | font-family: 'Open Sans', sans-serif;
264 | font-size:26px;
265 | font-weight:bold;
266 | color:#fff;
267 | vertical-align:middle;
268 | }
269 |
270 | /**********Styling Elements**********/
271 | .cont {
272 | text-align:center;
273 | margin-top:30px;
274 | }
275 |
276 | .cont ok {
277 | color:#b2c831;
278 | }
279 |
280 | .cont bad {
281 | color:#fa1d2d;
282 | }
283 |
284 | .cont2 {
285 | text-align:center;
286 | margin-top:-15px;
287 | font-size:12px;
288 | line-height:7px;
289 | }
290 |
291 | .cont2 bold{
292 | font-size:10px;
293 | font-weight:bold;
294 | color:#b2c831
295 | }
296 |
297 | .text p {
298 | font-family: 'Open Sans', sans-serif;
299 | margin-left:8px;
300 | font-size:14px;
301 | line-height:18px;
302 | }
303 |
304 | .text grey {
305 | font-size:11px;
306 | color:silver
307 | }
308 |
309 |
310 | /***********Bootstrap Default Modifications***********/
311 |
312 | .thumbnail {
313 | border:0px;
314 | text-align:center;
315 | -webkit-box-shadow: 0px;
316 | -moz-box-shadow: 0px;
317 | box-shadow: 0px;
318 | background: none;
319 | text-align: center;
320 |
321 | }
322 |
323 | .modal-header {
324 |
325 | background-color: #4f4f4f;
326 | color:#fff;
327 | }
328 |
329 |
330 | input[type=submit] {
331 | font-family: 'Open Sans', sans-serif;
332 | font-size: 15px;
333 | background: #b2c831;
334 | color: #fff;
335 | border: none;
336 | padding: 8px 28px 10px 26px;
337 | *-webkit-border-radius: 4px;
338 | -moz-border-radius: 4px;
339 | border-radius: 4px;
340 |
341 | }
342 | input[type=text], textarea {
343 | background: #cdcbcc;
344 | font-size: 13px;
345 | display: block;
346 | width: 100%;
347 | border: none;
348 | box-shadow: none;
349 | height: 30px;
350 | line-height: 18px;
351 | padding: 0;
352 | text-indent: 18px;
353 | margin: 0 0 18px;
354 | }
355 | textarea {
356 | line-height: 18px;
357 | padding: 18px;
358 | width: 100%;
359 | text-indent: 0;
360 | }
361 | .textarea-container { margin: 0 18px; }
362 | .textarea-container textarea { margin-left: -18px; }
363 | #contact textarea { width: 100%; height: 45px; }
364 |
365 |
366 | .progress-bar {
367 | background-color: #b2c831;
368 | }
369 |
370 |
371 |
372 |
373 | /***********LineIcons Styles***********/
374 |
375 |
376 | .info-user {
377 | text-align:center;
378 | font-size: 24px;
379 | color: #b2c831;
380 | }
381 |
382 | .fs1 {
383 | padding:5px 5px 5px 5px;
384 | position:relative;
385 | }
386 |
387 | .fs1:hover {
388 | position:relative;
389 | color: #fff;
390 | cursor:pointer
391 | }
392 |
393 | .fs2 {
394 | padding:5px 5px 5px 5px;
395 | position:relative;
396 | font-size:35px;
397 | vertical-align: text-bottom
398 | }
399 |
400 | /**********Clock Configuration**********/
401 |
402 | digiclock {
403 | font-size: 30px;
404 | color: #fff;
405 | text-align: center;
406 | line-height: 60px;
407 | margin-left: auto
408 | }
409 |
410 | .clockcenter {
411 | text-align:center;
412 | }
413 |
414 |
415 | /**********Mail Style Configuration**********/
416 |
417 | .framemail {
418 | cursor: default;
419 | }
420 | .framemail .window {
421 | font-size: 0;
422 | margin-top: -1px;
423 | overflow: hidden;
424 | margin-left: -18px;
425 | }
426 | .framemail .window .mail li {
427 | background-color:#3d3d3d;
428 | background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
429 | background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
430 | background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
431 | background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
432 | background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
433 | border-top: 1px solid #888;
434 | position: relative;
435 | margin-left:-18px;
436 | }
437 | .framemail .window .mail li:first-child {
438 | border-top: none;
439 | }
440 | .framemail .window .mail li:hover {
441 | background-color: #5d5b5b;
442 | }
443 | .framemail .window .mail li:after,
444 | .framemail .window .mail li:before {
445 | border-left: 8px solid transparent;
446 | border-top: 8px solid #df6;
447 | content: '';
448 | height: 0;
449 | position: absolute;
450 | right: 0;
451 | top: 0;
452 | width: 0;
453 | }
454 | .framemail .window .mail li:before {
455 | border-top-color: #bbb;
456 | border-width: 9px;
457 | }
458 | .framemail .window .mail li:nth-child(1):after,
459 | .framemail .window .mail li:nth-child(1):before {
460 | border: none;
461 | }
462 | .framemail .window .mail li:nth-child(2):after {
463 | border-top-color: #fa1d2d;
464 | }
465 | .framemail .window .mail li i {
466 | display: inline-block;
467 | height: 48px;
468 | width: 6px;
469 | }
470 | .framemail .window .mail li .read {
471 | background-color: #ddd;
472 | }
473 | .framemail .window .mail li .unread {
474 | background: #b2c831;
475 | }
476 | .framemail .window .mail li img {
477 | background: #819da2;
478 | border-radius: 2px;
479 | height: 36px;
480 | left: 12px;
481 | position: absolute;
482 | top: 6px;
483 | width: 36px;
484 | }
485 | .framemail .window .mail li p {
486 | font: 13px/24px sans-serif;
487 | left: 56px;
488 | position: absolute;
489 | top: 3px;
490 | }
491 | .framemail .window .mail li .sender {
492 | color: #e9e8e8;
493 | font-weight: bold;
494 | text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
495 | }
496 | .framemail .window .mail li .message {
497 | color: #999;
498 | overflow: hidden;
499 | text-overflow: ellipsis;
500 | top: 21px;
501 | white-space: nowrap;
502 | }
503 | .framemail .window .mail li .message strong {
504 | color: #999;
505 | }
506 | .framemail .window .mail li .actions {
507 | height: 16px;
508 | position: absolute;
509 | right: 19px;
510 | text-align: right;
511 | top: 0;
512 | width: 96px;
513 | }
514 | .framemail .window .mail li .actions img {
515 | background: none;
516 | display: inline-block;
517 | height: 16px;
518 | margin-left: 6px;
519 | opacity: .1;
520 | position: relative;
521 | width: 16px;
522 | }
523 | .framemail .window .mail li:hover .actions img {
524 | opacity: .25;
525 | }
526 | .framemail .window .mail li .actions img:hover {
527 | opacity: .75;
528 | }
529 |
530 |
531 | /**********DONUT CHARTS STYLES**********/
532 | #load {
533 | width: 11.313em;
534 | height: 11.313em;
535 | -moz-border-radius: 5px;
536 | border-radius: 5px;
537 | margin-bottom: 1.063em;
538 | background-position: center center;
539 | margin:auto;
540 | }
541 |
542 | #space {
543 | width: 11.313em;
544 | height: 11.313em;
545 | -moz-border-radius: 5px;
546 | border-radius: 5px;
547 | margin-bottom: 1.063em;
548 | background-position: center center;
549 | margin:auto;
550 | }
551 |
552 |
553 | /**********LINE AND BARS**********/
554 |
555 | .section-graph {
556 | position: relative;
557 | height: 130px;
558 | color: #fff;
559 | background-image: linear-gradient(color-stops(#b2c831, #b2c831 50%, #b2c831 50%));
560 | margin-bottom:20px;
561 | }
562 | .section-graph .graph-info {
563 | z-index: 99;
564 | position: absolute;
565 | font-weight: bold;
566 | margin-top: 12px;
567 | margin-left: 21px;
568 | width: 100px;
569 | }
570 | .section-graph .graph-info .graph-arrow {
571 | width: 0;
572 | height: 0;
573 | margin-top: 18px;
574 | border-left: 4px solid transparent;
575 | border-right: 4px solid transparent;
576 | border-bottom: 4px solid white;
577 | float: left;
578 | }
579 | .section-graph .graph-info .graph-info-big {
580 | font-size: 24px;
581 | float: left;
582 | margin-left: 3px;
583 | }
584 | .section-graph .graph-info .graph-info-small {
585 | margin-left: 3px;
586 | font-size: 12px;
587 | font-weight: normal;
588 | color: rgba(255, 255, 255, 0.5);
589 | clear: left;
590 | margin-left: 8px;
591 | }
592 | /*
593 | * Info Section
594 | */
595 | .info-aapl {
596 | text-align: center;
597 |
598 | }
599 | .info-aapl ul {
600 | margin-left:30%;
601 |
602 | }
603 | .info-aapl li {
604 | margin: 0;
605 | display: block;
606 | width: 9px;
607 | height: 40px;
608 | margin-right: 6px;
609 | background-color: #f5f0ec;
610 | float:left;
611 | position: relative;
612 | }
613 | .info-aapl li span {
614 | display: block;
615 | width: 9px;
616 | height: 40px;
617 | position: absolute;
618 | bottom: 0;
619 | }
620 | .info-aapl li span.orange {
621 | background-color: #fa1d2d;
622 | }
623 | .info-aapl li span.green {
624 | background-color: #b2c831;
625 | }
626 |
627 | /**********TWITTER WIDGET **********/
628 | #jstwitter ul li{
629 | color:#bdbdbd;
630 | padding:.5em .75em;
631 | }
632 |
633 | #jstwitter ul{
634 | margin-left:0;
635 | list-style:none
636 | }
637 |
638 | #jstwitter:first-child{
639 | border-top:0
640 | }
641 |
642 | ul#jstwitter li a{
643 | font-size:10px;
644 | font-style:italic;
645 | color:#666;
646 | text-decoration:none
647 | }
648 |
649 | /********** CUSTOMIZED BUTTON **********/
650 | .btnnew {
651 | display: inline-block;
652 | *border-left: 0 none #707070;
653 | border-right: 0 none #707070;
654 | border-top: 0 none #707070;
655 | border-bottom: 0 none #707070;
656 | display: inline;
657 | padding: 4px 12px;
658 | margin-bottom: 0;
659 | *margin-left: .3em;
660 | font-size: 14px;
661 | line-height: 20px;
662 | color: #b2c831;
663 | text-align: center;
664 | vertical-align: middle;
665 | cursor: pointer;
666 | background-color: #5a5a5a;
667 | *background-color: #5a5a5a;
668 | background-repeat: repeat-x;
669 | *-webkit-border-radius: 4px;
670 | -moz-border-radius: 4px;
671 | border-radius: 4px;
672 | zoom: 1;
673 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
674 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
675 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
676 | background-image: linear-gradient(to bottom, #707070, #707070);*
677 | }
678 |
679 | /********** SWITCH BUTTON **********/
680 | .switch {
681 | position: relative;
682 | margin: 20px auto;
683 | height: 26px;
684 | width: 120px;
685 | background: rgba(0, 0, 0, 0.25);
686 | border-radius: 3px;
687 | -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
688 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
689 | }
690 |
691 | .switch-label {
692 | position: relative;
693 | z-index: 2;
694 | float: left;
695 | width: 58px;
696 | line-height: 26px;
697 | font-size: 11px;
698 | color: rgba(255, 255, 255, 0.35);
699 | text-align: center;
700 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
701 | cursor: pointer;
702 | }
703 | .switch-label:active {
704 | font-weight: bold;
705 | }
706 |
707 | .switch-label-off {
708 | padding-left: 2px;
709 | }
710 |
711 | .switch-label-on {
712 | padding-right: 2px;
713 | }
714 |
715 | /*
716 | * Note: using adjacent or general sibling selectors combined with
717 | * pseudo classes doesn't work in Safari 5.0 and Chrome 12.
718 | * See this article for more info and a potential fix:
719 | * http://css-tricks.com/webkit-sibling-bug/
720 | */
721 | .switch-input {
722 | display: none;
723 | }
724 | .switch-input:checked + .switch-label {
725 | font-weight: bold;
726 | color: rgba(0, 0, 0, 0.65);
727 | text-shadow: 0 1px rgba(255, 255, 255, 0.25);
728 | -webkit-transition: 0.15s ease-out;
729 | -moz-transition: 0.15s ease-out;
730 | -o-transition: 0.15s ease-out;
731 | transition: 0.15s ease-out;
732 | }
733 | .switch-input:checked + .switch-label-on ~ .switch-selection {
734 | left: 60px;
735 | /* Note: left: 50% doesn't transition in WebKit */
736 | }
737 |
738 | .switch-selection {
739 | display: block;
740 | position: absolute;
741 | z-index: 1;
742 | top: 2px;
743 | left: 2px;
744 | width: 58px;
745 | height: 22px;
746 | background: #b2c831;
747 | border-radius: 3px;
748 | background-image: -webkit-linear-gradient(top, #b6c753, #b2c831);
749 | background-image: -moz-linear-gradient(top, #b6c753, #b2c831);
750 | background-image: -o-linear-gradient(top, #b6c753, #b2c831);
751 | background-image: linear-gradient(to bottom, #b6c753, #b2c831);
752 | -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
753 | box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
754 | -webkit-transition: left 0.15s ease-out;
755 | -moz-transition: left 0.15s ease-out;
756 | -o-transition: left 0.15s ease-out;
757 | transition: left 0.15s ease-out;
758 | }
759 | .switch-blue .switch-selection {
760 | background: #3aa2d0;
761 | background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0);
762 | background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0);
763 | background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0);
764 | background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0);
765 | }
766 | .switch-yellow .switch-selection {
767 | background: #fa1d2d;
768 | background-image: -webkit-linear-gradient(top, #f93e4b, #fa1d2d);
769 | background-image: -moz-linear-gradient(top, #f93e4b, #fa1d2d);
770 | background-image: -o-linear-gradient(top, #f93e4b, #fa1d2d);
771 | background-image: linear-gradient(to bottom, #f93e4b, #fa1d2d);
772 | }
773 |
774 |
775 | /**********Gauge Chart**********/
776 | #canvas {
777 | display: block;
778 | width: 150px;
779 | margin: 30px auto;
780 | }
781 |
782 | /**********Accordion Styling**********/
783 |
784 | .accordion-group {
785 | border: 1px solid #222;
786 | }
787 | .accordion-heading {
788 | background-color: #5a5a5a;
789 | *background-color: #5a5a5a;
790 | background-repeat: repeat-x;
791 | *-webkit-border-radius: 4px;
792 | -moz-border-radius: 4px;
793 | border-radius: 4px;
794 | zoom: 1;
795 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
796 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
797 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
798 | background-image: linear-gradient(to bottom, #707070, #707070);*
799 | }
800 |
801 | /**********Link Styling**********/
802 | a {
803 | color: #b2c831;
804 | text-decoration: none;
805 | }
806 |
807 | a:hover {
808 | color: #dff948;
809 | text-decoration: none;
810 | }
811 |
812 |
813 |
814 | /**********FooterWrap Section**********/
815 | #footerwrap {
816 | width: 100%;
817 | background:#262626;
818 |
819 | padding-top:25px;
820 | padding-bottom: 40px;
821 | border-top-style: solid;
822 | border-top-width:8px;
823 | border-top-color:#1d1d1d;
824 | text-align:center
825 |
826 | }
827 |
828 | #footerwrap p {
829 | color:white;
830 | font-size:12px;
831 | }
832 |
833 |
834 | /***********FULLCALENDAR STYLE***********/
835 |
836 | #external-events {
837 | padding: 0 10px;
838 | border: 1px solid #8b8b8a;
839 | background-color: #8b8b8a;
840 | -webkit-border-radius: 4px;
841 | -moz-border-radius: 4px;
842 | border-radius: 4px;
843 | text-align: left;
844 | }
845 |
846 | #external-events h4 {
847 | font-size: 16px;
848 | margin-top: 0;
849 | padding-top: 1em;
850 | }
851 |
852 | .external-event { /* try to mimick the look of a real event */
853 | margin: 10px 0;
854 | padding: 2px 4px;
855 | background: #b2c831;
856 | color: #fff;
857 | font-size: .85em;
858 | cursor: pointer;
859 | }
860 |
861 | #external-events p {
862 | margin: 1.5em 0;
863 | font-size: 11px;
864 | color: #b2c831;
865 | }
866 |
867 | #external-events p input {
868 | margin: 0;
869 | vertical-align: middle;
870 | }
871 |
872 | #calendar {
873 | width:100%;
874 | }
875 |
876 |
877 | /**********Media Styles**********/
878 |
879 | @media (max-width: 360px){
880 | /*Calendar Adsjustments*/
881 | .fc-header {margin-top:15px;}
882 | .fc-header-title h2{font-size:10px; }
883 | .fc-header-right {display:none}
884 |
885 | /* portrait tablet */
886 | @media (min-width: 767px) and (max-width: 768px) {
887 | .info-aapl ul {
888 | margin-left:10px;
889 | float:left;
890 | }
891 |
892 | #load {
893 | margin-left:5px;
894 | margin-right:10px;
895 | }
896 |
897 | #space {
898 | margin-left:5px;
899 | margin-right:10px;
900 | }
901 |
902 | }
903 |
904 | /* Landscape iphone 5 and samsung galaxy */
905 | @media (min-width: 560px) and (max-width: 685px) {
906 | .info-aapl ul {
907 | margin-left:40%;
908 | }
909 |
910 | }
--------------------------------------------------------------------------------
/css/slider.css:
--------------------------------------------------------------------------------
1 | .flat-slider.ui-corner-all,
2 | .flat-slider .ui-corner-all {
3 | border-radius: 0;
4 | }
5 |
6 | .flat-slider.ui-slider {
7 | border: 0;
8 | background: #706d6c;
9 | border-radius: 7px;
10 | position:relative;
11 | margin-left: 20px;
12 | margin-right: 20px;
13 | }
14 |
15 | .flat-slider.ui-slider-horizontal {
16 | height: 6px;
17 | }
18 |
19 | .flat-slider.ui-slider-vertical {
20 | height: 15em;
21 | width: 6px;
22 | }
23 |
24 | .flat-slider .ui-slider-handle {
25 | width: 20px;
26 | height: 20px;
27 | background: #38b11f;
28 | border-radius: 50%;
29 | border: none;
30 | cursor: pointer;
31 | position:absolute
32 | }
33 |
34 | .flat-slider.ui-slider-horizontal .ui-slider-handle {
35 | top: 50%;
36 | margin-top: -10px;
37 | }
38 |
39 | .flat-slider.ui-slider-vertical .ui-slider-handle {
40 | left: 50%;
41 | margin-left: -10px;
42 | }
43 |
44 | .flat-slider .ui-slider-handle:hover {
45 | opacity: .8;
46 | }
47 |
48 | .flat-slider .ui-slider-range {
49 | border: 0;
50 | border-radius: 7;
51 | background: #f99;
52 | }
53 |
54 | .flat-slider.ui-slider-horizontal .ui-slider-range {
55 | top: 0;
56 | height: 6px;
57 | }
58 |
59 | .flat-slider.ui-slider-vertical .ui-slider-range {
60 | left: 0;
61 | width: 6px;
62 | }
--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | body {
4 | font-family: 'Lato', arial, sans-serif;
5 | color: #434343;
6 | background: #dae3e7;
7 | font-size: 16px;
8 | -webkit-font-smoothing: antialiased;
9 | -moz-osx-font-smoothing: grayscale;
10 |
11 | overflow: auto;
12 | -webkit-overflow-scrolling:touch;
13 | }
14 |
15 | h1,
16 | h2,
17 | h3,
18 | h4,
19 | h5,
20 | h6 {
21 | font-family: 'Montserrat', sans-serif;
22 | font-weight: 700;
23 | color: #778492;
24 | }
25 |
26 | text {
27 | display:none;
28 | }
29 |
30 | a {
31 | color: #3aaa64;
32 | -webkit-transition: all 0.4s ease-in-out;
33 | -moz-transition: all 0.4s ease-in-out;
34 | -ms-transition: all 0.4s ease-in-out;
35 | -o-transition: all 0.4s ease-in-out;
36 | }
37 |
38 | a:hover {
39 | text-decoration: underline;
40 | color: #5f6b77;
41 | color: #2d844e;
42 | }
43 |
44 | .btn,
45 | a.btn {
46 | -webkit-transition: all 0.4s ease-in-out;
47 | -moz-transition: all 0.4s ease-in-out;
48 | -ms-transition: all 0.4s ease-in-out;
49 | -o-transition: all 0.4s ease-in-out;
50 | font-family: 'Montserrat', arial, sans-serif;
51 | padding: 8px 16px;
52 | font-weight: bold;
53 | }
54 |
55 | .btn .fa,
56 | a.btn .fa {
57 | margin-right: 5px;
58 | }
59 |
60 | .btn:focus,
61 | a.btn:focus {
62 | color: #fff;
63 | }
64 |
65 | a.btn-cta-primary,
66 | .btn-cta-primary {
67 | background: #54ba4e;
68 | border: 1px solid #54ba4e;
69 | color: #fff;
70 | font-weight: 600;
71 | text-transform: uppercase;
72 | }
73 |
74 | a.btn-cta-primary:hover,
75 | .btn-cta-primary:hover {
76 | background: #49ac43;
77 | border: 1px solid #49ac43;
78 | color: #fff;
79 | }
80 |
81 | a.btn-cta-secondary,
82 | .btn-cta-secondary {
83 | background: #479fc8;
84 | border: 1px solid #479fc8;
85 | color: #fff;
86 | font-weight: 600;
87 | text-transform: uppercase;
88 | }
89 |
90 |
91 | a.btn-cta-secondary:hover,
92 | .btn-cta-secondary:hover {
93 | background: #3893bd;
94 | border: 1px solid #3893bd;
95 | color: #fff;
96 | }
97 |
98 | .text-highlight {
99 | color: #32383e;
100 | }
101 |
102 | .label-theme {
103 | background: #3aaa64;
104 | font-size: 12px;
105 | }
106 |
107 | a.dotted-link {
108 | border-bottom: 1px dotted #778492;
109 | color: #778492;
110 | }
111 |
112 | a.dotted-link:hover {
113 | text-decoration: none;
114 | color: #49515a;
115 | }
116 |
117 | iframe {
118 |
119 | .header {
120 | padding: 0;
121 | }
122 |
123 | }
124 |
125 |
126 | .iframe-wrapper {
127 | overflow: auto;
128 | -webkit-overflow-scrolling:touch;
129 | }
130 |
131 |
132 | /* ======= Header ======= */
133 | .header {
134 | padding: 30px 0;
135 | background: #f5f5f5;
136 | border-top: 10px solid #778492;
137 | }
138 |
139 | .header .btn {
140 | margin-top: 60px;
141 | font-weight: bold;
142 | }
143 |
144 | .header .profile-image {
145 | margin-right: 30px;
146 | }
147 |
148 | .header .profile-content .name {
149 | color: #49515a;
150 | font-size: 38px;
151 | margin-bottom: 5px;
152 | margin-top: 30px;
153 | }
154 |
155 | .header .profile-content .desc {
156 | color: #778492;
157 | font-family: "Lato", arial, sans-serif;
158 | font-weight: 400;
159 | font-size: 24px;
160 | margin-top: 0;
161 | margin-bottom: 15px;
162 | }
163 |
164 | .header .profile-content .social a {
165 | background: #b0b7bf;
166 | width: 36px;
167 | height: 36px;
168 | display: inline-block;
169 | -webkit-border-radius: 50%;
170 | -moz-border-radius: 50%;
171 | -ms-border-radius: 50%;
172 | -o-border-radius: 50%;
173 | border-radius: 50%;
174 | -moz-background-clip: padding;
175 | -webkit-background-clip: padding-box;
176 | background-clip: padding-box;
177 | color: #fff;
178 | text-align: center;
179 | }
180 |
181 | .header .profile-content .social a:hover {
182 | background: #778492;
183 | }
184 |
185 | .header .profile-content .social a .fa {
186 | font-size: 20px;
187 | padding-top: 8px;
188 | }
189 |
190 | /* ======= Sections======= */
191 | .sections-wrapper {
192 | padding-top: 60px;
193 | padding-bottom: 60px;
194 | }
195 |
196 | .section {
197 | margin-bottom: 30px;
198 | }
199 |
200 | .section .section-inner {
201 | background: #fff;
202 | padding: 30px;
203 | }
204 |
205 | .section .heading {
206 | margin-top: 0;
207 | margin-bottom: 30px;
208 | color: #545e69;
209 | font-size: 24px;
210 | }
211 |
212 | .section .content .more-link .fa {
213 | margin-right: 5px;
214 | font-size: 14px;
215 | }
216 |
217 | /* About Section */
218 | /* Latest Section */
219 | .latest .item {
220 | margin-bottom: 30px;
221 | }
222 |
223 | .latest .item .title {
224 | font-size: 18px;
225 | margin-top: 0;
226 | }
227 |
228 | .latest .item .title .label {
229 | margin-left: 5px;
230 | font-size: 12px;
231 | }
232 |
233 | .latest .item .title a {
234 | color: #778492;
235 | }
236 |
237 | .latest .item .title a:hover {
238 | color: #5f6b77;
239 | }
240 |
241 | .latest .item .project-image:hover {
242 | -webkit-opacity: 0.8;
243 | -moz-opacity: 0.8;
244 | opacity: 0.8;
245 | }
246 |
247 | .latest .divider {
248 | margin-bottom: 60px;
249 | }
250 |
251 | .latest .featured {
252 | margin-bottom: 60px;
253 | }
254 |
255 | .latest .featured .title {
256 | margin-bottom: 5px;
257 | font-size: 20px;
258 | }
259 |
260 | .latest .featured .summary {
261 | margin-bottom: 30px;
262 | color: #778492;
263 | }
264 |
265 | .latest .featured img {
266 | margin-bottom: 30px;
267 | }
268 |
269 | .latest .featured .desc {
270 | margin-bottom: 30px;
271 | }
272 |
273 | .latest .featured-image {
274 | position: relative;
275 | }
276 |
277 | .latest .featured-image .text {
278 | background: #3aaa64;
279 | color: #fff;
280 | }
281 |
282 | .latest .featured-image .ribbon {
283 | position: absolute;
284 | top: -4px;
285 | right: -4px;
286 | width: 110px;
287 | height: 110px;
288 | overflow: hidden;
289 | }
290 |
291 | .latest .featured-image .ribbon .text {
292 | font-family: 'Montserrat', sans-serif;
293 | position: relative;
294 | left: -8px;
295 | top: 18px;
296 | width: 158px;
297 | padding: 10px 10px;
298 | font-size: 15px;
299 | font-weight: bold;
300 | text-align: center;
301 | text-transform: uppercase;
302 | color: #fff;
303 | background-color: #479fc8;
304 | -webkit-transform: rotate(45deg) translate3d(0, 0, 0);
305 | -moz-transform: rotate(45deg) translate3d(0, 0, 0);
306 | -ms-transform: rotate(45deg) translate3d(0, 0, 0);
307 | -o-transform: rotate(45deg) translate3d(0, 0, 0);
308 | }
309 |
310 | .latest .featured-image .ribbon .text:before,
311 | .latest .featured-image .ribbon .text:after {
312 | content: '';
313 | position: absolute;
314 | bottom: -5px;
315 | border-top: 5px solid #276582;
316 | border-left: 5px solid transparent;
317 | border-right: 5px solid transparent;
318 | }
319 |
320 | .latest .featured-image .ribbon .text:before {
321 | left: 0;
322 | }
323 |
324 | .latest .featured-image .ribbon .text:after {
325 | right: 0;
326 | }
327 |
328 | /* Projects Section */
329 | .projects .item {
330 | margin-bottom: 30px;
331 | }
332 |
333 | .projects .item .title {
334 | font-size: 16px;
335 | margin-top: 0;
336 | margin-bottom: 5px;
337 | line-height: 1.5;
338 | }
339 |
340 | .projects .item .title a {
341 | color: #778492;
342 | }
343 |
344 | .projects .item .title a:hover {
345 | color: #5f6b77;
346 | }
347 |
348 | /* Work Section */
349 | .experience .item {
350 | margin-bottom: 30px;
351 | }
352 |
353 | .experience .item .title {
354 | font-size: 16px;
355 | margin-top: 0;
356 | margin-bottom: 5px;
357 | line-height: 1.5;
358 | }
359 |
360 | .experience .item .title .place {
361 | color: #999999;
362 | font-weight: normal;
363 | }
364 |
365 | .experience .item .title .place a {
366 | color: #999999;
367 | }
368 |
369 | .experience .item .title .place a:hover {
370 | color: #666666;
371 | }
372 |
373 | .experience .item .title .year {
374 | color: #999999;
375 | font-weight: normal;
376 | }
377 |
378 | /* Git section */
379 | .ghfeed {
380 | height: 600px;
381 | }
382 |
383 | .ghfeed,
384 | .ghfeed *,
385 | .ghfeed *:before,
386 | .ghfeed *:after {
387 | -webkit-box-sizing: content-box;
388 | -moz-box-sizing: content-box;
389 | box-sizing: content-box;
390 | }
391 |
392 | /* Info Section */
393 | .info .fa {
394 | margin-right: 15px;
395 | color: #ccd1d6;
396 | }
397 |
398 | .info .fa.fa-envelope-o {
399 | font-size: 14px;
400 | }
401 |
402 | .info ul {
403 | margin-bottom: 0;
404 | }
405 |
406 | .info li {
407 | margin-bottom: 15px;
408 | }
409 |
410 | .info li:last-child {
411 | margin-bottom: 0;
412 | }
413 |
414 | /* Skills Section */
415 | .skills .intro {
416 | margin-bottom: 30px;
417 | }
418 |
419 | .skills .skillset .item {
420 | margin-bottom: 30px;
421 | }
422 |
423 | .skills .skillset .level-title {
424 | font-size: 16px;
425 | position: relative;
426 | margin-top: 0;
427 | margin-bottom: 10;
428 | }
429 |
430 | .skills .skillset .level-title .level-label {
431 | color: #ccd1d6;
432 | font-size: 14px;
433 | font-weight: 400;
434 | font-family: "Lato", arial, sans-serif;
435 | position: absolute;
436 | right: 0;
437 | top: 0;
438 | }
439 |
440 | .skills .skillset .level-bar {
441 | height: 15px;
442 | background: #e8e8e8;
443 | }
444 |
445 | .skills .skillset .level-bar-inner {
446 | height: 15px;
447 | background: #66cb8c;
448 | }
449 |
450 | /* Testimonials section */
451 | .testimonials .item {
452 | margin-bottom: 30px;
453 | }
454 |
455 | .testimonials .item:last-child {
456 | margin-bottom: 0;
457 | }
458 |
459 | .testimonials .item .quote {
460 | color: #666666;
461 | font-size: 16px;
462 | border-left-color: #9fdeb7;
463 | margin-bottom: 15px;
464 | }
465 |
466 | .testimonials .item .quote .fa {
467 | color: #79d19a;
468 | margin-right: 15px;
469 | }
470 |
471 | .testimonials .item .source {
472 | font-size: 14px;
473 | padding-left: 30px;
474 | font-weight: 500;
475 | }
476 |
477 | .testimonials .item .source .name {
478 | color: #939ea9;
479 | font-weight: 600;
480 | }
481 |
482 | .testimonials .item .source .title {
483 | color: #999999;
484 | }
485 |
486 | /* Education section */
487 | .education .item {
488 | margin-bottom: 30px;
489 | }
490 |
491 | .education .item:last-child {
492 | margin-bottom: 0;
493 | }
494 |
495 | .education .item .title {
496 | font-size: 16px;
497 | margin-top: 0;
498 | }
499 |
500 | .education .item .university {
501 | font-family: "Lato", arial, sans-serif;
502 | font-size: 13px;
503 | color: #999999;
504 | font-weight: 600;
505 | padding-left: 25px;
506 | }
507 |
508 | .education .item .university .year {
509 | color: #b0b7bf;
510 | font-weight: 500;
511 | }
512 |
513 | /* Language Section */
514 | .languages .item {
515 | margin-bottom: 15px;
516 | }
517 |
518 | .languages .item .title {
519 | color: #778492;
520 | }
521 |
522 | .languages .item .level {
523 | color: #999999;
524 | }
525 |
526 | .languages .item:last-child {
527 | margin-bottom: 0;
528 | }
529 |
530 | .languages .item .fa {
531 | color: #79d19a;
532 | }
533 |
534 | /* Blog Section */
535 | .blog .item {
536 | margin-bottom: 30px;
537 | }
538 |
539 | .blog .item .title {
540 | font-size: 18px;
541 | line-height: 1.3;
542 | }
543 |
544 | .blog .item .title a {
545 | color: #778492;
546 | }
547 |
548 | .blog .item .title a:hover {
549 | color: #5f6b77;
550 | }
551 |
552 | .blog .item:last-child {
553 | margin-bottom: 0;
554 | }
555 |
556 | /* List section */
557 | .list ul li {
558 | margin-bottom: 10px;
559 | }
560 |
561 | .list ul li .fa {
562 | margin-right: 5px;
563 | }
564 |
565 | .list ul li a {
566 | color: #778492;
567 | }
568 |
569 | .list ul li a:hover {
570 | color: #49515a;
571 | }
572 |
573 | /* Credits */
574 | .credits ul li {
575 | margin-bottom: 10px;
576 | }
577 |
578 | .credits ul li .fa {
579 | margin-right: 5px;
580 | }
581 |
582 | .credits ul li a {
583 | color: #778492;
584 | }
585 |
586 | .credits ul li a:hover {
587 | color: #49515a;
588 | }
589 |
590 | .credits .btn {
591 | margin-bottom: 15px;
592 | }
593 |
594 | /* ======= Footer ======= */
595 | .footer {
596 | background: #32383e;
597 | color: #fff;
598 | padding: 10px 0;
599 | }
600 |
601 | .footer .copyright {
602 | line-height: 1.6;
603 | color: #a1aab4;
604 | font-size: 14px;
605 | }
606 |
607 | .footer a {
608 | color: #fff;
609 | }
610 |
611 | .footer .fa-heart {
612 | color: #fb866a;
613 | }
614 |
615 | /* Extra small devices (phones, less than 768px) */
616 | @media (max-width: 767px) {
617 | .header {
618 | text-align: center;
619 | }
620 |
621 | .header .profile-image {
622 | float: none !important;
623 | margin: 0 auto;
624 | }
625 |
626 | .header .profile-content {
627 | float: none !important;
628 | text-align: center;
629 | }
630 |
631 | .header .btn {
632 | margin-top: 30px;
633 | float: none !important;
634 | }
635 |
636 | .project-image {
637 | margin-bottom: 15px;
638 | }
639 |
640 | }
641 |
642 |
643 | /* Outer */
644 | .popup {
645 | width:100%;
646 | height:100%;
647 | display:none;
648 | position:fixed;
649 | top:0px;
650 | left:0px;
651 | background:rgba(0,0,0,0.75);
652 | }
653 |
654 | /* Inner */
655 | .popup-inner {
656 | max-width:700px;
657 | width:90%;
658 | padding:40px;
659 | position:absolute;
660 | top:50%;
661 | left:50%;
662 | -webkit-transform:translate(-50%, -50%);
663 | transform:translate(-50%, -50%);
664 | box-shadow:0px 2px 6px rgba(0,0,0,1);
665 | border-radius:3px;
666 | background:#fff;
667 | }
668 |
669 | /* Close Button */
670 | .popup-close {
671 | width:30px;
672 | height:30px;
673 | padding-top:4px;
674 | display:inline-block;
675 | position:absolute;
676 | top:0px;
677 | right:0px;
678 | transition:ease 0.25s all;
679 | -webkit-transform:translate(50%, -50%);
680 | transform:translate(50%, -50%);
681 | border-radius:1000px;
682 | background:rgba(0,0,0,0.8);
683 | font-family:Arial, Sans-Serif;
684 | font-size:20px;
685 | text-align:center;
686 | line-height:100%;
687 | color:#fff;
688 | }
689 |
690 | .popup-close:hover {
691 | -webkit-transform:translate(50%, -50%) rotate(180deg);
692 | transform:translate(50%, -50%) rotate(180deg);
693 | background:rgba(0,0,0,1);
694 | text-decoration:none;
695 | }
696 |
697 | /* Small devices (tablets, 768px and up) */
698 | /* Medium devices (desktops, 992px and up) */
699 | /* Large devices (large desktops, 1200px and up) */
700 | /* Ex-Large devices (large desktops, 1200px and up) */
701 | @media (min-width: 1400px) {
702 | .container {
703 | width: 1360px;
704 | }
705 |
706 | }
707 |
708 |
--------------------------------------------------------------------------------
/fonts/WeatherIcons-Regular.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galadril/FlatZ-Frontpage/eed39bf4ef449798b2b785c52b2d22667fc57570/fonts/WeatherIcons-Regular.otf
--------------------------------------------------------------------------------
/fonts/weathericons-regular-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galadril/FlatZ-Frontpage/eed39bf4ef449798b2b785c52b2d22667fc57570/fonts/weathericons-regular-webfont.eot
--------------------------------------------------------------------------------
/fonts/weathericons-regular-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galadril/FlatZ-Frontpage/eed39bf4ef449798b2b785c52b2d22667fc57570/fonts/weathericons-regular-webfont.ttf
--------------------------------------------------------------------------------
/fonts/weathericons-regular-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galadril/FlatZ-Frontpage/eed39bf4ef449798b2b785c52b2d22667fc57570/fonts/weathericons-regular-webfont.woff
--------------------------------------------------------------------------------
/frontpage.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
FlatZ Frontpage
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
30 |
31 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
50 |
51 |
52 | - Home
53 |
58 |
63 |
68 |
73 |
78 |
83 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
Switches
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 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
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 |
Local Time
181 |
182 |
183 | 12:45:25
184 |
185 |
186 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 | --
224 |
225 |
Today: -- Total: --
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
300 |
301 |
302 |
303 |
--------------------------------------------------------------------------------
/graph.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
FlatZ Frontpage
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
29 |
30 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
50 |
51 |
52 | - Home
53 |
58 |
63 |
68 |
73 |
78 |
83 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
Switches
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 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
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 |
197 |
198 |
199 |
200 |
--------------------------------------------------------------------------------
/images/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galadril/FlatZ-Frontpage/eed39bf4ef449798b2b785c52b2d22667fc57570/images/close.png
--------------------------------------------------------------------------------
/images/down.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galadril/FlatZ-Frontpage/eed39bf4ef449798b2b785c52b2d22667fc57570/images/down.png
--------------------------------------------------------------------------------
/images/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galadril/FlatZ-Frontpage/eed39bf4ef449798b2b785c52b2d22667fc57570/images/loading.gif
--------------------------------------------------------------------------------
/images/next.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galadril/FlatZ-Frontpage/eed39bf4ef449798b2b785c52b2d22667fc57570/images/next.png
--------------------------------------------------------------------------------
/images/prev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galadril/FlatZ-Frontpage/eed39bf4ef449798b2b785c52b2d22667fc57570/images/prev.png
--------------------------------------------------------------------------------
/images/up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galadril/FlatZ-Frontpage/eed39bf4ef449798b2b785c52b2d22667fc57570/images/up.png
--------------------------------------------------------------------------------
/js/clock.js:
--------------------------------------------------------------------------------
1 | // Interactiveness now
2 | (function() {
3 | var clock = document.querySelector('digiclock');
4 | var pad = function(x) {
5 | return x < 10 ? '0' + x : x;
6 | };
7 |
8 | var ticktock = function() {
9 | var d = new Date();
10 |
11 | var h = pad(d.getHours());
12 | var m = pad(d.getMinutes());
13 | var s = pad(d.getSeconds());
14 |
15 | var current_time = [h, m, s].join(':');
16 |
17 | clock.innerHTML = current_time;
18 |
19 | };
20 |
21 | ticktock();
22 | // Calling ticktock() every 1 second
23 | setInterval(ticktock, 1000);
24 | }());
--------------------------------------------------------------------------------
/js/colors.js:
--------------------------------------------------------------------------------
1 | var cptRED = 0;
2 |
3 | var cptGREEN = 1;
4 |
5 | var cptBLUE = 2;
6 |
7 |
8 | function XYPoint(x,y)
9 | {
10 | if(this instanceof XYPoint)
11 | {
12 | this.x = x;
13 | this.y = y;
14 | }
15 | else
16 | {
17 | return new XYPoint(x,y);
18 | }
19 | }
20 |
21 | /**
22 | * Get Color points according to light model
23 | * @param model string Ex: LLC010
24 | * @returns {Array}
25 | */
26 | function colorPointsForModel(model)
27 | {
28 |
29 | var colorPoints = [];
30 |
31 | if(model === 'LCT001')
32 | {
33 | colorPoints.push(XYPoint(0.675, 0.322));
34 | colorPoints.push(XYPoint(0.4091, 0.518));
35 | colorPoints.push(XYPoint(0.167, 0.04));
36 | }
37 | else if(model === 'LLC006' || model === 'LLC007')
38 | {
39 | colorPoints.push(XYPoint(0.704, 0.296));
40 | colorPoints.push(XYPoint(0.2151, 0.7106));
41 | colorPoints.push(XYPoint(0.138, 0.08));
42 | }
43 | else
44 | {
45 | // Default construct triangle wich contains all values
46 | colorPoints.push(XYPoint(1.0, 0.0));
47 | colorPoints.push(XYPoint(0.0, 1.0));
48 | colorPoints.push(XYPoint(0.0, 0.0));
49 | }
50 | return colorPoints;
51 | }
52 |
53 |
54 | /**
55 | * Method to see if the given XY value is within the reach of the lamps.
56 | *
57 | * @param p the point containing the X,Y value
58 | * @param colorPoints color points array containing RGB XYPoints
59 | * @return true if within reach, false otherwise.
60 | */
61 |
62 | function checkPointInLampsReach(p, colorPoints)
63 | {
64 | var red = colorPoints[0];
65 | var green = colorPoints[1];
66 | var blue = colorPoints[2];
67 |
68 | var v1 = XYPoint(green.x - red.x, green.y - red.y);
69 | var v2 = XYPoint(blue.x - red.x, blue.y - red.y);
70 |
71 | var q = XYPoint(p.x - red.x, p.y - red.y);
72 |
73 | var s = crossProduct(q, v2) / crossProduct(v1, v2);
74 | var t = crossProduct(v1, q) / crossProduct(v1, v2);
75 |
76 | return ( (s >= 0.0) && (t >= 0.0) && (s + t <= 1.0) );
77 | }
78 |
79 | /**
80 | * Is Not a number?
81 | * Note: NaN is the only JavaScript value that is treated as unequal to itself
82 | * @param val
83 | * @returns {boolean}
84 | */
85 | function isNaN(val)
86 | {
87 | return val !== val;
88 | }
89 |
90 | /**
91 | * Calculates crossProduct of two 2D vectors / points.
92 | *
93 | * @param p1 first point used as vector
94 | * @param p2 second point used as vector
95 | * @return crossProduct of vectors
96 | */
97 | function crossProduct(p1, p2)
98 | {
99 | return (p1.x * p2.y - p1.y * p2.x);
100 | }
101 |
102 | /**
103 | * Converts RGB to XY and Brightness
104 | * @param r integer 0-255
105 | * @param g integer 0-255
106 | * @param b integer 0-255
107 | * @param model string
108 | */
109 |
110 | function RGBtoXY(red, green, blue, model)
111 | {
112 |
113 | if(red > 1 || green > 1 || blue > 1)
114 | {
115 | red /= 255;
116 | green /= 255;
117 | blue /= 255;
118 | }
119 |
120 | red = (red > 0.04045) ? Math.pow((red + 0.055) / (1.0 + 0.055), 2.4) : (red / 12.92);
121 | green = (green > 0.04045) ? Math.pow((green + 0.055) / (1.0 + 0.055), 2.4) : (green / 12.92);
122 | blue = (blue > 0.04045) ? Math.pow((blue + 0.055) / (1.0 + 0.055), 2.4) : (blue / 12.92);
123 |
124 | var X = red * 0.649926 + green * 0.103455 + blue * 0.197109;
125 | var Y = red * 0.234327 + green * 0.743075 + blue * 0.022598;
126 | var Z = red * 0.0000000 + green * 0.053077 + blue * 1.035763;
127 |
128 | var cx = X / (X + Y + Z);
129 | var cy = Y / (X + Y + Z);
130 |
131 | if (isNaN(cx)) {
132 | cx = 0.0;
133 | }
134 |
135 | if (isNaN(cy)) {
136 | cy = 0.0;
137 | }
138 |
139 | //Check if the given XY value is within the colourreach of our lamps.
140 | var xyPoint = XYPoint(cx, cy);
141 |
142 | var colorPoints = colorPointsForModel(model);
143 |
144 | var inReachOfLamps = checkPointInLampsReach(xyPoint, colorPoints);
145 |
146 | if (!inReachOfLamps)
147 | {
148 | //It seems the colour is out of reach
149 | //let's find the closest colour we can produce with our lamp and send this XY value out.
150 |
151 | //Find the closest point on each line in the triangle.
152 |
153 | var pAB =getClosestPointToPoints( colorPoints[cptRED], colorPoints[cptGREEN], xyPoint);
154 |
155 | var pAC =getClosestPointToPoints( colorPoints[cptBLUE], colorPoints[cptRED], xyPoint);
156 |
157 | var pBC =getClosestPointToPoints( colorPoints[cptGREEN], colorPoints[cptBLUE], xyPoint);
158 |
159 | //Get the distances per point and see which point is closer to our Point.
160 | var dAB = getDistanceBetweenTwoPoints(xyPoint, pAB);
161 | var dAC = getDistanceBetweenTwoPoints(xyPoint, pAC);
162 | var dBC = getDistanceBetweenTwoPoints(xyPoint, pBC);
163 |
164 | var lowest = dAB;
165 |
166 | var closestPoint = pAB;
167 |
168 | if (dAC < lowest) {
169 | lowest = dAC;
170 | closestPoint = pAC;
171 | }
172 | if (dBC < lowest) {
173 | lowest = dBC;
174 | closestPoint = pBC;
175 | }
176 |
177 | //Change the xy value to a value which is within the reach of the lamp.
178 | cx = closestPoint.x;
179 | cy = closestPoint.y;
180 | }
181 |
182 | return {
183 | x: cx,
184 | y: cy,
185 | bri: Y
186 | };
187 | }
188 |
189 | /**
190 | * Find the closest point on a line.
191 | * This point will be within reach of the lamp.
192 | *
193 | * @param A the point where the line starts
194 | * @param B the point where the line ends
195 | * @param P the point which is close to a line.
196 | * @return the point which is on the line.
197 | */
198 | function getClosestPointToPoints(A,B,P)
199 | {
200 | var AP = XYPoint(P.x - A.x, P.y - A.y);
201 |
202 | var AB = XYPoint(B.x - A.x, B.y - A.y);
203 |
204 | var ab2 = AB.x*AB.x + AB.y*AB.y;
205 |
206 | var ap_ab = AP.x*AB.x + AP.y*AB.y;
207 |
208 | var t = ap_ab / ab2;
209 |
210 | if (t < 0.0) {
211 | t = 0.0;
212 | }
213 | else if (t > 1.0) {
214 | t = 1.0;
215 | }
216 |
217 | return XYPoint(A.x + AB.x * t, A.y + AB.y * t);
218 | }
219 |
220 | /**
221 | * Find the distance between two points.
222 | *
223 | * @param one
224 | * @param two
225 | * @return the distance between point one and two
226 | */
227 | // + (float)getDistanceBetweenTwoPoints:(CGPoint)one point2:(CGPoint)two {
228 | function getDistanceBetweenTwoPoints(one, two)
229 | {
230 | var dx = one.x - two.x; // horizontal difference
231 | var dy = one.y - two.y; // vertical difference
232 | return Math.sqrt(dx * dx + dy * dy);
233 | }
234 |
235 |
236 | function XYtoRGB(x, y, brightness, model)
237 | {
238 | var xy = XYPoint(x,y);
239 |
240 | var colorPoints = colorPointsForModel(model);
241 |
242 | var inReachOfLamps = checkPointInLampsReach(xy, colorPoints);
243 |
244 | console.log('inReachOfLamps',inReachOfLamps);
245 | if (!inReachOfLamps) {
246 | //It seems the colour is out of reach
247 | //let's find the closest colour we can produce with our lamp and send this XY value out.
248 |
249 | //Find the closest point on each line in the triangle.
250 | var pAB = getClosestPointToPoints( colorPoints[cptRED], colorPoints[cptGREEN], xy);
251 | var pAC = getClosestPointToPoints( colorPoints[cptBLUE], colorPoints[cptRED], xy);
252 | var pBC = getClosestPointToPoints( colorPoints[cptGREEN], colorPoints[cptBLUE], xy);
253 |
254 | //Get the distances per point and see which point is closer to our Point.
255 | var dAB = getDistanceBetweenTwoPoints(xy, pAB);
256 | var dAC = getDistanceBetweenTwoPoints(xy, pAC);
257 | var dBC = getDistanceBetweenTwoPoints(xy, pBC);
258 |
259 | var lowest = dAB;
260 | var closestPoint = pAB;
261 |
262 | if (dAC < lowest) {
263 | lowest = dAC;
264 | closestPoint = pAC;
265 | }
266 | if (dBC < lowest) {
267 | lowest = dBC;
268 | closestPoint = pBC;
269 | }
270 |
271 | //Change the xy value to a value which is within the reach of the lamp.
272 | xy.x = closestPoint.x;
273 | xy.y = closestPoint.y;
274 | }
275 |
276 | var x = xy.x;
277 | var y = xy.y;
278 | var z = 1.0 - x - y;
279 |
280 | var Y = brightness;
281 | var X = (Y / y) * x;
282 | var Z = (Y / y) * z;
283 |
284 | var r = X * 3.2410 - Y * 1.5374 - Z * 0.4986;
285 | var g = -X * 0.9692 + Y * 1.8760 + Z * 0.0416;
286 | var b = X * 0.0556 - Y * 0.2040 + Z * 1.0570;
287 |
288 | r = r <= 0.0031308 ? 12.92 * r : (1.0 + 0.055) * Math.pow(r, (1.0 / 2.4)) - 0.055;
289 | g = g <= 0.0031308 ? 12.92 * g : (1.0 + 0.055) * Math.pow(g, (1.0 / 2.4)) - 0.055;
290 | b = b <= 0.0031308 ? 12.92 * b : (1.0 + 0.055) * Math.pow(b, (1.0 / 2.4)) - 0.055;
291 |
292 | if(r < 0)
293 | {
294 | r = 0;
295 | }
296 | if(g < 0)
297 | {
298 | g = 0;
299 | }
300 | if(b < 0)
301 | {
302 | b = 0;
303 | }
304 |
305 | if(r > 1 || g > 1 || b > 1)
306 | {
307 | var max = Math.max(r,g,b);
308 | r /= max;
309 | g /= max;
310 | b /= max;
311 | }
312 |
313 | r *= 255;
314 | g *= 255;
315 | b *= 255;
316 |
317 | r = Math.round(r);
318 | g = Math.round(g);
319 | b = Math.round(b);
320 |
321 | return {
322 | r: r,
323 | g: g,
324 | b: b
325 | };
326 |
327 | }
328 |
329 |
330 | function rgb2hsv (r,g,b) {
331 | var computedH = 0;
332 | var computedS = 0;
333 | var computedV = 0;
334 |
335 | //remove spaces from input RGB values, convert to int
336 | var r = parseInt( (''+r).replace(/\s/g,''),10 );
337 | var g = parseInt( (''+g).replace(/\s/g,''),10 );
338 | var b = parseInt( (''+b).replace(/\s/g,''),10 );
339 |
340 | if ( r==null || g==null || b==null ||
341 | isNaN(r) || isNaN(g)|| isNaN(b) ) {
342 | alert ('Please enter numeric RGB values!');
343 | return;
344 | }
345 | if (r<0 || g<0 || b<0 || r>255 || g>255 || b>255) {
346 | alert ('RGB values must be in the range 0 to 255.');
347 | return;
348 | }
349 | r=r/255; g=g/255; b=b/255;
350 | var minRGB = Math.min(r,Math.min(g,b));
351 | var maxRGB = Math.max(r,Math.max(g,b));
352 |
353 | // Black-gray-white
354 | if (minRGB==maxRGB) {
355 | computedV = minRGB;
356 | return [0,0,computedV];
357 | }
358 |
359 | // Colors other than black-gray-white:
360 | var d = (r==minRGB) ? g-b : ((b==minRGB) ? r-g : b-r);
361 | var h = (r==minRGB) ? 3 : ((b==minRGB) ? 1 : 5);
362 | computedH = 60*(h - d/(maxRGB - minRGB));
363 | computedS = (maxRGB - minRGB)/maxRGB;
364 | computedV = maxRGB;
365 | return [computedH,computedS,computedV];
366 | }
367 |
--------------------------------------------------------------------------------
/js/jquery.flatWeatherPlugin.min.js:
--------------------------------------------------------------------------------
1 | //flatWeatherJqueryPlugin min
2 | //2014-10-21
3 | (function(e,t,n,r){function u(t,n){this.element=t;this.settings=e.extend({},s,n);if(!this.settings.units||this.settings.units=="auto"){this.settings.units=["united states","usa","united states of america","us"].indexOf(this.settings.country.toLowerCase())==-1?"metric":"imperial"}this.settings.forecast=Math.min(this.settings.forecast,5);this._name=i;this.once=false;this.init()}function a(e,t){var n={};if(t.api=="openweathermap"){if(e[0].name!=""){n.location=e[0].name+", "+e[0].sys.country;n.city=e[0].name}else if(e[1].city.name!=""){n.location=e[1].city.name+", "+e[1].city.country;n.city=e[1].city.name}else{n.location=t.location+", "+t.country;n.city=t.location}n.today={};n.today.temp={};n.today.temp.now=Math.round(e[0].main.temp);n.today.temp.min=Math.round(e[0].main.temp_min);n.today.temp.max=Math.round(e[0].main.temp_max);n.today.desc=e[0].weather[0].description.capitalize();n.today.code=e[0].weather[0].id;n.today.wind=e[0].wind;n.today.humidity=e[0].main.humidity;n.today.pressure=e[0].main.pressure;n.today.sunrise=l(e[0].sys.sunrise);n.today.sunset=l(e[0].sys.sunset);n.today.day=f(new Date);n.forecast=[];for(var r=0;r
=12?"PM":"AM";t=t%12;t=t?t:12;n=n<10?"0"+n:n;var i=t+":"+n+" "+r;return i}function c(e,t,n){var r=t;if(r>=0&&r<=11.25||r>348.75&&r<=360){r="N"}else if(r>11.25&&r<=33.75){r="NNE"}else if(r>33.75&&r<=56.25){r="NE"}else if(r>56.25&&r<=78.75){r="ENE"}else if(r>78.75&&r<=101.25){r="E"}else if(r>101.25&&r<=123.75){r="ESE"}else if(r>123.75&&r<=146.25){r="SE"}else if(r>146.25&&r<=168.75){r="SSE"}else if(r>168.75&&r<=191.25){r="S"}else if(r>191.25&&r<=213.75){r="SSW"}else if(r>213.75&&r<=236.25){r="SW"}else if(r>236.25&&r<=258.75){r="WSW"}else if(r>258.75&&r<=281.25){r="W"}else if(r>281.25&&r<=303.75){r="WNW"}else if(r>303.75&&r<=326.25){r="NW"}else if(r>326.25&&r<=348.75){r="NNW"}var i=n=="metric"?"km/h":"mph";return r+" "+e+" "+i}var i="flatWeatherPlugin";var s={location:"Waterloo, ON",country:"Canada",displayCityNameOnly:false,api:"openweathermap",forecast:5,apikey:"",view:"full",render:true,loadingAnimation:true};var o={openweathermap:["http://api.openweathermap.org/data/2.5/weather","http://api.openweathermap.org/data/2.5/forecast/daily"],yahoo:["https://query.yahooapis.com/v1/public/yql"]};e.extend(u.prototype,{init:function(){if(this.settings.render){if(this.settings.loadingAnimation&&!this.once){this.loading=e("",{id:"flatWeatherLoading","class":"wi loading"});this.loading.appendTo(this.element)}this.fetchWeather().then(this.render,this.error)}this.once=true},fetchWeather:function(){var t=this;var n=new e.Deferred;var r=[];var i=this.settings.location+" "+this.settings.country;if(this.settings.api=="openweathermap"){var s={};s.q=i;s.units=this.settings.units;if(this.settings.apikey)s.appid=this.settings.apikey;r.push(s);s.cnt=this.settings.forecast+1;r.push(s)}else if(this.settings.api=="yahoo"){var u=this.settings.units=="metric"?"c":"f";var s={};s.q="select * from weather.forecast where woeid in (select woeid from geo.places(1) where text='"+i+"') AND u='"+u+"'";s.env="store://datatables.org/alltableswithkeys";s.format="json";r.push(s)}var f=[];for(var l=0;l1){r=r.map(function(e){return e[0]})}else{r=r[0]}if(t.settings.api=="openweathermap"&&!(r[0].cod=="200"&&r[1].cod=="200")){console.log("Error interacting with the openweathermap api see error object below for details:");console.log(r);n.reject(r,t)}else if(t.settings.api=="yahoo"&&(r.query.count==0||r.query.results.channel.description=="Yahoo! Weather Error")){console.log("Error interacting with the yahoo api see error object below for details:");console.log(r);n.reject(r,t)}else{var i=a(r,t.settings);t._weather=i;e.data(t.element,"weather",i);n.resolve(i,t)}}).fail(function(e){console.log("fail");n.reject(e,t)});return n},error:function(t,n){if(!n){n=this}if(n.settings.loadingAnimation&&n.settings.render){n.loading.remove()}if(n.settings.api=="openweathermap"){if(t[0].cod!="200"){t=t[0].cod+" "+t[0].message+". See console log for details."}else{t=t[1]+" See console log for details."}}else if(n.settings.api=="yahoo"){if(t.query.results){t="Error: "+t.query.results.channel.item.title+". See console log for details."}else{t="Error: no results. See console log for details."}}var r=e("",{"class":"flatWeatherPlugin "+n.settings.view});e("").text("Error").appendTo(r);e("").text(t).appendTo(r);e(n.element).html(r);return e(n.element)},render:function(t,n){if(!n){n=this;t=this._weather}var r=n.settings.units=="metric"?"°C":"°F";if(n.settings.loadingAnimation&&n.settings.render){n.loading.remove()}var i=e("",{"class":"flatWeatherPlugin "+n.settings.view});if(n.settings.displayCityNameOnly){e("").text(t.city).appendTo(i)}else{e("").text(t.location).appendTo(i)}if(n.settings.view!="forecast"){var s=e("",{"class":"wiToday"});var o=e("",{"class":"wiIconGroup"});e("",{"class":"wi "+"wi"+t.today.code}).appendTo(o);e("",{"class":"wiText"}).text(t.today.desc).appendTo(o);o.appendTo(s);e("",{"class":"wiTemperature"}).html(t.today.temp.now+""+r+"").appendTo(s);s.appendTo(i)}if(n.settings.view!="simple"){var u=e("",{"class":"wiDetail"});if(n.settings.view=="partial"){e("",{"class":"wiDay"}).text(t.today.day).appendTo(s)}if(n.settings.view!="partial"){if(n.settings.view!="today"){e("",{"class":"wiDay"}).text(t.today.day).appendTo(u)}var a=e("",{"class":"astronomy"}).appendTo(u);e("",{"class":"wi sunrise"}).text(t.today.sunrise).appendTo(a);e("",{"class":"wi sunset"}).text(t.today.sunset).appendTo(a);var f=e("",{"class":"temp"}).appendTo(u);e("").html("Max : "+t.today.temp.max+""+r+"").appendTo(f);e("").html("Min : "+t.today.temp.min+""+r+"").appendTo(f);var l=e("",{"class":"atmosphere"}).appendTo(u);e("",{"class":"wi humidity"}).text(t.today.humidity).appendTo(l);e("",{"class":"wi pressure"}).text(t.today.pressure).appendTo(l);e("",{"class":"wi wind"}).text(c(t.today.wind.speed,t.today.wind.deg,n.settings.units)).appendTo(l);u.appendTo(s)}if(n.settings.view!="today"||n.settings.view=="forecast"){var h=e("",{"class":"wiForecasts"});var p=n.settings.view=="forecast"?0:1;for(var d=p;d",{"class":"wiDay"}).html(""+t.forecast[d].day+"").appendTo(h);var m=e("",{"class":"wiForecast"}).appendTo(v);e("",{"class":"wi "+"wi"+t.forecast[d].code}).appendTo(m);e("",{"class":"wiMax"}).html(t.forecast[d].temp.max+""+r+"").appendTo(m);e("",{"class":"wiMin"}).html(t.forecast[d].temp.min+""+r+"").appendTo(m)}h.appendTo(i)}}e(n.element).html(i);return e(n.element)}});e.fn[i]=function(t,n){if(e.isFunction(u.prototype[t])){return this.data("plugin_"+i)[t](n)}return this.each(function(){if(!e.data(this,"plugin_"+i)){var n=new u(this,t);return e.data(this,"plugin_"+i,n)}})};String.prototype.capitalize=function(){return this.charAt(0).toUpperCase()+this.slice(1)};})(jQuery,window,document)
--------------------------------------------------------------------------------
/js/jquery.stayInWebApp.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * jQuery stayInWebApp Plugin
3 | * version: 0.4 (2012-06-19)
4 | */
5 | (function($){$.extend({stayInWebApp:function(b){"standalone"in window.navigator&&window.navigator.standalone&&(b||(b="a"),$("body").delegate(b,"click",function(b){if($(this).attr("target")==void 0||$(this).attr("target")==""||$(this).attr("target")=="_self"){var c=$(this).attr("href");if(!c.match(/^http(s?)/g))b.preventDefault(),self.location=c}}))}})})(jQuery);
--------------------------------------------------------------------------------
/js/jquery.vticker.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Tadas Juozapaitis ( kasp3rito@gmail.com )
3 | *
4 | * Modifed by Zazar:
5 | * 24.06.2011 - Corrected pausing issue with multiple instances
6 | *
7 | */
8 |
9 | (function($){
10 |
11 | $.fn.vTicker = function(options) {
12 | var defaults = {
13 | speed: 700,
14 | pause: 4000,
15 | showItems: 3,
16 | animation: '',
17 | mousePause: true,
18 | isPaused: false
19 | };
20 |
21 | var options = $.extend(defaults, options);
22 |
23 | moveUp = function(obj2, height, paused){
24 | if(paused) return;
25 |
26 | var obj = obj2.children('ul');
27 |
28 | first = obj.children('li:first').clone(true);
29 |
30 | obj.animate({top: '-=' + height + 'px'}, options.speed, function() {
31 | $(this).children('li:first').remove();
32 | $(this).css('top', '0px');
33 | });
34 |
35 | if(options.animation == 'fade') {
36 | obj.children('li:first').fadeOut(options.speed);
37 | obj.children('li:last').hide().fadeIn(options.speed);
38 | }
39 |
40 | first.appendTo(obj);
41 | };
42 |
43 | return this.each(function() {
44 | var obj = $(this);
45 | var maxHeight = 0;
46 | var itempause = options.isPaused;
47 |
48 | obj.css({overflow: 'hidden', position: 'relative'})
49 | .children('ul').css({position: 'absolute', margin: 0, padding: 0})
50 | .children('li').css({margin: 0, padding: 0});
51 |
52 | obj.children('ul').children('li').each(function(){
53 |
54 | if($(this).height() > maxHeight) {
55 | maxHeight = $(this).height();
56 | }
57 | });
58 |
59 | obj.children('ul').children('li').each(function() {
60 | $(this).height(maxHeight);
61 | });
62 |
63 | obj.height(maxHeight * options.showItems);
64 |
65 | var interval = setInterval(function(){ moveUp(obj, maxHeight, itempause); }, options.pause);
66 |
67 | if (options.mousePause)
68 | {
69 | obj.bind("mouseenter",function() {
70 | itempause = true;
71 | }).bind("mouseleave",function() {
72 | itempause = false;
73 | });
74 | }
75 | });
76 | };
77 | })(jQuery);
--------------------------------------------------------------------------------
/js/jquery.zrssfeed.min.js:
--------------------------------------------------------------------------------
1 | (function(l){l.fn.rssfeed=function(b,h,w){h=l.extend({limit:10,offset:1,header:!0,titletag:"h4",date:!0,dateformat:"datetime",content:!0,snippet:!0,media:!0,showerror:!0,errormsg:"",key:null,ssl:!1,linktarget:"_self",linkredirect:"",linkcontent:!1,sort:"",sortasc:!0,historical:!1},h);return this.each(function(z,q){var u=l(q),f="";h.ssl&&(f="s");u.hasClass("rssFeed")||u.addClass("rssFeed");if(null==b)return!1;0
64 |
65 |
73 |
74 |
75 | - Home
76 |
81 |
86 |
91 |
96 |
101 |
106 |
111 |
112 |
113 |
114 |
115 |
117 |
118 |
119 |
120 |
121 |
122 |
Switches
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
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 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
318 |
319 |
320 |
--------------------------------------------------------------------------------
/logs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
FlatZ Frontpage
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
68 |
69 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
88 |
89 |
90 | - Home
91 |
96 |
101 |
106 |
111 |
116 |
121 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
Switches
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
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 |
Logs
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
210 |
211 |
212 |
--------------------------------------------------------------------------------
/news.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
FlatZ Frontpage
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
70 |
71 |
72 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
91 |
92 |
93 | - Home
94 |
99 |
104 |
109 |
114 |
119 |
124 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
Switches
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
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 |
News
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
213 |
214 |
215 |
--------------------------------------------------------------------------------
/screenshots/FlatZ_device.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galadril/FlatZ-Frontpage/eed39bf4ef449798b2b785c52b2d22667fc57570/screenshots/FlatZ_device.png
--------------------------------------------------------------------------------
/screenshots/FlatZ_graph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galadril/FlatZ-Frontpage/eed39bf4ef449798b2b785c52b2d22667fc57570/screenshots/FlatZ_graph.png
--------------------------------------------------------------------------------
/screenshots/FlatZ_lichts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galadril/FlatZ-Frontpage/eed39bf4ef449798b2b785c52b2d22667fc57570/screenshots/FlatZ_lichts.png
--------------------------------------------------------------------------------
/screenshots/FlatZ_logs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galadril/FlatZ-Frontpage/eed39bf4ef449798b2b785c52b2d22667fc57570/screenshots/FlatZ_logs.png
--------------------------------------------------------------------------------
/settings/settings.js:
--------------------------------------------------------------------------------
1 | // Settings
2 | $.domoticzurl = "http://192.168.1.88:8080";//domoticz url (can be with username:password@ip:port)
3 | $.degreesUnit = " C";
4 | $.percentUnit = " %";
5 | $.theme = "main.css"; //possible values: 'main.css', 'mainPurple.css', 'mainLight.css'
6 | $.rss = "http://www.nu.nl/rss/Algemeen"; //rss feed, like: http://feeds.bbci.co.uk/news/rss.xml?edition=int
7 |
8 | $.enableSwitchPopup = true; //false or true
9 |
10 | //Weather settings
11 | $.location = "Krommenie, NH"; //city and region *required
12 | $.country = "Netherlands"; //country *required
13 | $.units = "metric"; //"metric" or "imperial" default: "auto"
14 |
15 |
16 | //Traffic settings
17 | $.Address = 'Krommenie, NL';
18 | $.ZoomLevel = 10;
19 |
20 |
21 | //Menu settings
22 | $.Graph = true; //false or true
23 | $.News = false; //false or true
24 | $.Log = true; //false or true
25 | $.Lights = true; //false or true
26 | $.Weather = true; //false or true
27 | $.Camera = false; //false or true
28 | $.Traffic = true; //false or true
29 |
30 |
31 | // Dashboard screen User settings >>>
32 | // format: idx, value (from json), replace label, description, chart label, chart color
33 | $.PageDashboardArray = [
34 | //switches
35 | ['163', 'Data', 'cell1', 'Lampen Uit', 'onbutton'],//onbutton = only push on
36 | ['161', 'Data', 'cell2', 'Theme Logan', 'onbutton'],//button is normal on/off button
37 | ['159', 'Data', 'cell3', 'Theme X-Men', 'onbutton'],
38 | ['162', 'Data', 'cell4', 'Theme Aurora', 'onbutton'],
39 | ['160', 'Data', 'cell5', 'Theme TitanFall', 'onbutton'],
40 | ['158', 'Data', 'cell6', 'Theme SunSet', 'onbutton'],
41 |
42 | // example for scenes & groups
43 | //['1', 'Status', 'cell111', 'Group Example', 'group'],
44 | //['1', 'Status', 'cell111', 'Scene Example', 'scene'],
45 |
46 |
47 | //other devices
48 | ['68', 'Humidity', 'cell7', 'Vocht Badkamer', 'badkamer', '#b2c831'],
49 | ['68', 'LastUpdate', 'cell70', 'Vocht Badkamer'],
50 |
51 | ['14', 'Temp', 'cell8', 'Temperatuur Woonkamer', 'woonkamer', '#2980B9'],
52 | ['14', 'LastUpdate', 'cell80', 'Temperatuur Woonkamer'],
53 |
54 | ['58', 'Usage', 'cell9', 'Zonnepanelen (Watt)'],
55 | ['58', 'Data', 'cell29', 'Zonnepanelen'],
56 | ['58', 'CounterToday', 'cell39', 'Zonnepanelen'],
57 | ['58', 'LastUpdate', 'cell19', 'Zonnepanelen'],
58 |
59 | ['47', 'Temp', 'cell10', 'Temperatuur Buiten', 'buiten', '#C0382B'],
60 | ['47', 'LastUpdate', 'cell100', 'Temperatuur Buiten'],
61 |
62 | ['53', 'Data', 'cell11', 'SabNZB Status'],
63 | ['57', 'Data', 'cell12', 'Plex Status'],
64 | ['41', 'Status', 'cell13', 'Ventilatie', 'arrow'],
65 | ];
66 |
67 |
68 | // Switches Sidebar User settings >>>
69 | // format: idx, value (from json), replace label, description, chart label, chart color
70 | $.PageSwitchArray = [
71 | //switches (left sidebar)
72 | ['163', 'Data', 'cell1', 'Lampen Uit', 'onbutton'],//onbutton = only push on
73 | ['161', 'Data', 'cell2', 'Theme Logan', 'onbutton'],//button is normal on/off button
74 | ['159', 'Data', 'cell3', 'Theme X-Men', 'onbutton'],
75 | ['162', 'Data', 'cell4', 'Theme Aurora', 'onbutton'],
76 | ['160', 'Data', 'cell5', 'Theme TitanFall', 'onbutton'],
77 | ['158', 'Data', 'cell6', 'Theme SunSet', 'onbutton'],
78 |
79 | // example for scenes & groups
80 | //['1', 'Status', 'cell111', 'Group Example', 'group'],
81 | //['1', 'Status', 'cell111', 'Scene Example', 'scene'],
82 | ];
83 |
84 |
85 | // Graph screen User settings >>> (max 3 on screen)
86 | //format: idx, value (from json), replace label, description, chart label, chart color
87 | $.GraphTemperatureArray = [
88 | //graph screen (3 fields)
89 | ['58', 'counter&method=1', 'day', 'cell7', 'Zonnepanelen (Watt)', 'graph100', '#b2c831', 'v'],
90 | ['68', 'temp', 'day', 'cell8', 'Vocht Badkamer', 'graph200', '#C0382B', 'hu'],
91 | ['14', 'temp', 'day', 'cell10', 'Temperatuur Woonkamer', 'graph300', '#2980B9', 'te'],
92 | ];
93 |
94 |
95 | // Light screen User settings >>>
96 | $.LightArray = [
97 | //format: idx, 'Hue' (color lamp) or 'Dimmer' (for normal dimmer), replace label, description, maxdimlevel
98 | ['113', 'Hue', 'cell7', 'Tafel 1'],
99 | ['110', 'Hue', 'cell8', 'Tafel 2'],
100 | ['107', 'Hue', 'cell10', 'Tafel 3'],
101 | ['109', 'Hue', 'cell11', 'Tafel 4'],
102 | ['111', 'Hue', 'cell12', 'Spot 1 (TV)'],
103 | ['112', 'Hue', 'cell13', 'Spot 1 (Bank)'],
104 | ];
105 |
106 |
107 | // Camera screen User settings >>>
108 | $.CameraArray = [
109 | //format: html replace label, camera Image URL, description
110 | ['cell7', 'http://images.opentopia.com/cams/9694/big.jpg', 'Buiten 1'],
111 | ['cell8', 'http://images.opentopia.com/cams/10359/big.jpg', 'Buiten 2'],
112 | ['cell10', 'http://images.opentopia.com/cams/8034/big.jpg', 'Buiten 3'],
113 | ['cell11', 'http://images.opentopia.com/cams/15104/big.jpg', 'Buiten 4'],
114 | ['cell12', 'http://images.opentopia.com/cams/16584/big.jpg', 'Gang'],
115 | ['cell13', 'http://images.opentopia.com/cams/16577/big.jpg', 'Extra'],
116 | ];
117 |
--------------------------------------------------------------------------------
/traffic.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
FlatZ Frontpage
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
33 |
34 |
35 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
55 |
56 |
57 | - Home
58 |
63 |
68 |
73 |
78 |
83 |
88 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
Switches
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 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
Traffic
154 |
155 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
194 |
195 |
196 |
197 |
--------------------------------------------------------------------------------
/weather.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
FlatZ Frontpage
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
32 |
33 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
52 |
53 |
54 | - Home
55 |
60 |
65 |
70 |
75 |
80 |
85 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
Switches
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 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
Weather:
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
180 |
181 |
182 |
--------------------------------------------------------------------------------
