forked from z-------------/New-New-Tab-Page
-
Notifications
You must be signed in to change notification settings - Fork 0
/
weather.html
94 lines (92 loc) · 2.94 KB
/
weather.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
<head>
<title>Weather</title>
<meta name="description" content="A minimal weather app. Data from Weather Underground. Icons by Roy Soetantio.">
<script src="weather.js"></script>
<style>
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v6/toadOcfmlt9b38dHJxOBGC-IiwWNzQT_LXAtr-Ee9Pw.woff) format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v6/ODelI1aHBYDBqgeIAH2zlNHq-FFgoDNV3GTKpHwuvtI.woff) format('woff');
}
* {
font-family:"Source Sans Pro",Roboto,sans-serif;
color:#fff;
text-align:center;
}
body {
margin:0;
height:100%;
width:100%;
}
#weather {
position:absolute;
top:50%;
left:50%;
width:490px;
height:245px;
margin:-122.5px 0 0 -245px;
z-index:3;
cursor:pointer;
}
#temp {
font-size:120px;
position:absolute;
top:50%;
margin:-83px 0 0 0;
right:0;
width:245px;
}
#icon {
position:absolute;
left:0;
top:0;
background-size:80% 80%;
background-repeat:no-repeat;
background-position:center;
width:245px;
height:245px;
}
::selection {
background:rgba(0,0,0,.3);
color:#fff;
}
#dark {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:2;
background:rgba(0,0,0,.70);
display:none;
}
#hk_warning {
position:absolute;
left:0;
bottom:0;
margin:20px;
height:50px;
width:50px;
display:none;
}
</style>
</head>
<body>
<div id="dark"></div>
<div id="weather">
<div id="icon"></div>
<div id="temp"></div>
</div>
<img id="hk_warning">
<script src="hk-warnings.js"></script>
</body>
</html>