-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (89 loc) · 2.89 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<style>
body {
overflow-y: hidden;
}
.title {
font-size: 50px;
text-align: center;
height: 5vh;
}
#img_wrapper {
height: 75vh;
overflow: hidden;
will-change: transform;
}
.countdown {
font-size: 80px;
height: 20vh;
}
</style>
<h1 class="title">Chrome Calender by Animations Team</h1>
<div id="img_wrapper">
</div>
<div class="countdown">
<div id="date" style="display: inline-block; width: 55vw;"></div>
<div id="timer" style="font-size: 120px; display: inline-block; width: 35vw; text-align: center;"></div>
</div>
<script>
// Initialization
const DAY_TO_MS = 1000 * 3600 * 24;
const FIRST_DAY_2020 = new Date("Jan 1, 2020");
const LAST_DAY_2020 = new Date("Dec 31, 2020");
const SCOPE = LAST_DAY_2020 - FIRST_DAY_2020;
let events = [];
events.push({date: new Date("February 28, 2020 23:59:59"), name: "M82 feature freeze"});
events.push({date: new Date("March 12, 2020 23:59:59"), name: "M82 branch cut"});
events.push({date: new Date("April 10, 2020 23:59:59"), name: "M83 feature freeze"});
events.push({date: new Date("April 23, 2020 23:59:59"), name: "M83 branch cut"});
events.push({date: new Date("May 22, 2020 23:59:59"), name: "M84 feature freeze"});
events.push({date: new Date("June 4, 2020 23:59:59"), name: "M84 branch cut"});
events.push({date: new Date("July 17, 2020 23:59:59"), name: "M85 feature freeze"});
events.push({date: new Date("July 30, 2020 23:59:59"), name: "M85 branch cut"});
let event_index;
for (let i = 0; i < events.length; ++i) {
if (new Date() < events[i].date) {
event_index = i;
break;
}
}
let nIntervId;
// Load calendar
let img = new Image();
let wrapper = document.getElementById('img_wrapper');
wrapper.appendChild(img);
img.onload = function() {
UpdateCalendar();
}
img.src = "full-calendar.jpg";
img.style.height = "100%";
img.style.verticalAlign = "middle";
nIntervId = setInterval(UpdateCalendar, DAY_TO_MS);
function UpdateCalendar() {
let remaining_days =
Math.floor((events[event_index].date - new Date()) / DAY_TO_MS);
if (remaining_days < 0) {
event_index++;
if (event_index == events.length) {
clearInterval(nIntervId);
return;
}
remaining_days =
Math.floor((events[event_index].date - new Date()) / DAY_TO_MS);
}
date.innerHTML = "Up next: " + events[event_index].name;
const color = remaining_days > 7 ? "green" :
remaining_days > 3 ? "orange" : "red";
timer.innerHTML = remaining_days == 0 ? "<font color='red'>TODAY</font>" :
remaining_days == 1 ? "<font color='red'>TOMORROW</font>" :
"in <font color=" + color + ">" + remaining_days + "</font> days";
ResetOffset();
}
function ResetOffset() {
const TODAY = new Date();
const PAST = TODAY - FIRST_DAY_2020;
let progress = PAST / SCOPE * img.naturalWidth;
img.style.transform =
"matrix(3.4, 0, 0, 3.4, " + progress + window.innerWidth + ", 0)";
}
</script>