generated from nmct-create3/daylight-startfiles
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·74 lines (72 loc) · 5.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!doctype html>
<html lang="en" class="is-day">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Daylight</title>
<meta name="description" content="An app about the time of the day the sun is up.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="msapplication-TileColor" content="#cce7ff">
<meta name="theme-color" content="#cce7ff">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#0f3557">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/screen.css">
<script src="/script/app.js"></script>
</head>
<body>
<main class="c-app">
<h1 class="c-logo u-muted">
<svg class="c-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<path d="M17,11c0,3.3-2.7,6-6,6s-6-2.7-6-6s2.7-6,6-6S17,7.7,17,11z M11.5,0h-1v3h1V0z M3.6,2.9L2.9,3.6L5,5.7L5.7,5L3.6,2.9zM0,10.5l0,1h3v-1H0z M2.9,18.4l0.7,0.7L5.7,17L5,16.3L2.9,18.4z M10.5,22h1v-3h-1V22z M18.4,19.1l0.7-0.7L17,16.3L16.3,17L18.4,19.1z M22,11.5v-1h-3v1H22z M19.1,3.6l-0.7-0.7L16.3,5L17,5.7L19.1,3.6z"/>
</svg>
Daylight
</h1>
<div class="c-content">
<div class="c-horizon">
<div class="c-horizon__sky-wrapper">
<div class="c-horizon__sky">
<!-- <span class="c-horizon__sun js-sun" data-time="08:00" style="bottom: 0%; left: 0%;">
<svg class="c-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<path d="M17,11c0,3.3-2.7,6-6,6s-6-2.7-6-6s2.7-6,6-6S17,7.7,17,11z M11.5,0h-1v3h1V0z M3.6,2.9L2.9,3.6L5,5.7L5.7,5L3.6,2.9zM0,10.5l0,1h3v-1H0z M2.9,18.4l0.7,0.7L5.7,17L5,16.3L2.9,18.4z M10.5,22h1v-3h-1V22z M18.4,19.1l0.7-0.7L17,16.3L16.3,17L18.4,19.1z M22,11.5v-1h-3v1H22z M19.1,3.6l-0.7-0.7L16.3,5L17,5.7L19.1,3.6z"/>
</svg>
</span> -->
<span class="c-horizon__sun js-sun" data-time="10:30" style="bottom: 80%; left: 20%;">
<svg class="c-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<path d="M17,11c0,3.3-2.7,6-6,6s-6-2.7-6-6s2.7-6,6-6S17,7.7,17,11z M11.5,0h-1v3h1V0z M3.6,2.9L2.9,3.6L5,5.7L5.7,5L3.6,2.9zM0,10.5l0,1h3v-1H0z M2.9,18.4l0.7,0.7L5.7,17L5,16.3L2.9,18.4z M10.5,22h1v-3h-1V22z M18.4,19.1l0.7-0.7L17,16.3L16.3,17L18.4,19.1z M22,11.5v-1h-3v1H22z M19.1,3.6l-0.7-0.7L16.3,5L17,5.7L19.1,3.6z"/>
</svg>
</span>
<!-- <span class="c-horizon__sun js-sun" data-time="12:00" style="bottom: 100%; left: 50%;">
<svg class="c-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<path d="M17,11c0,3.3-2.7,6-6,6s-6-2.7-6-6s2.7-6,6-6S17,7.7,17,11z M11.5,0h-1v3h1V0z M3.6,2.9L2.9,3.6L5,5.7L5.7,5L3.6,2.9zM0,10.5l0,1h3v-1H0z M2.9,18.4l0.7,0.7L5.7,17L5,16.3L2.9,18.4z M10.5,22h1v-3h-1V22z M18.4,19.1l0.7-0.7L17,16.3L16.3,17L18.4,19.1z M22,11.5v-1h-3v1H22z M19.1,3.6l-0.7-0.7L16.3,5L17,5.7L19.1,3.6z"/>
</svg>
</span> -->
<!-- <span class="c-horizon__sun js-sun" data-time="19:01" style="bottom: 5%; left: 100%;">
<svg class="c-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<path d="M17,11c0,3.3-2.7,6-6,6s-6-2.7-6-6s2.7-6,6-6S17,7.7,17,11z M11.5,0h-1v3h1V0z M3.6,2.9L2.9,3.6L5,5.7L5.7,5L3.6,2.9zM0,10.5l0,1h3v-1H0z M2.9,18.4l0.7,0.7L5.7,17L5,16.3L2.9,18.4z M10.5,22h1v-3h-1V22z M18.4,19.1l0.7-0.7L17,16.3L16.3,17L18.4,19.1z M22,11.5v-1h-3v1H22z M19.1,3.6l-0.7-0.7L16.3,5L17,5.7L19.1,3.6z"/>
</svg>
</span> -->
</div>
</div>
<div class="c-horizon__line">
<time class="c-horizon__time js-sunrise">
07:59
</time>
<time class="c-horizon__time js-sunset">
19:07
</time>
</div>
</div>
<p class="c-app__summary">
<span class="js-time-left">4 minutes</span><span class="u-muted"> sunlight left today. Make the most of it!</span>
</p>
<p class="c-app__location js-location u-muted">
Kortrijk, Belgium
</p>
</div>
</main>
</body>
</html>