countdown/index.html at main · DeadlySprinklez/countdown · GitHub

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
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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
	<style>
		body {
			background-color: #000000;
			font-family: 'Roboto Mono', monospace;
		}
		#countdown {
			font-size: 10vw;
			color: rgb(0,0,0);
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		#hint, #minihint, #guess {
			text-align: center;
			color: rgb(85,85,85);
			position: fixed;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100vw;
		}
		#hint {
			font-size: 1.25vw;
			top: 80%;
		}
		#minihint {
			font-size: 10pt;
			top: calc(100vh - 10pt);
		}
		#guess {
			top: 90%;
			width: initial;
			cursor: pointer;
			color: rgb(85,85,85);
		}
		#guess:hover {
			text-shadow: 0px 0px 1px rgba(0,255,0,0.5);
		}
	</style>
</head>
<body>
	<span id="countdown">0:00:00.000</span>
	<span style="color: rgb(85,85,85)">Change time here: <input type="text" id="time" style="width: 200px"></span>
	<span id="hint">(if you're reading this, you should enable javascript. or wait another second.)</span>
	<span id="guess">If you'd like to see all the images used in the ARG, click here.</span>
	<span id="minihint"></span>
	<script>
		function countdown() {
			countTo = Date.parse(date);
			current = Date.now();
			offset = countTo - current;
			timeTo = new Date(offset);
			targetRed = 0;
			targetGreen = 255;
			targetBlue = 0;
			if (Math.floor(timeTo/60/60/1000) == 0 && Math.floor(timeTo/60/1000%60) <= 10) {
				targetRed = 255;
				targetGreen = 255;
				targetBlue = 0;
			}
			if (Math.floor(timeTo/1000) < 0) {
				targetRed = 255;
				targetGreen = 0;
				targetBlue = 0;
			}
			red = red + (targetRed - red)/30;
			green = green + (targetGreen - green)/30;
			blue = blue + (targetBlue - blue)/30;
			if (targetRed - 1 < red && red < targetRed + 1) {
				red = targetRed;
			}
			if (targetGreen - 1 < green && green < targetGreen + 1) {
				green = targetGreen;
			}
			if (targetBlue - 1 < blue && blue < targetBlue + 1) {
				blue = targetBlue;
			}
			element.style.color = "rgb(" + red + "," + green + "," + blue + ")";
			element.innerHTML = (timeTo < 0 ? "-" : "")
				+ (Math.floor(Math.abs(timeTo)/60/60/1000) >= 24 ? Math.floor(Math.abs(timeTo)/60/60/1000/24) + ":" : "")
				+ (Math.floor(Math.abs(timeTo)/60/60/1000%24) < 10 ? "0" : "") + Math.floor(Math.abs(timeTo)/60/60/1000%24) // hours
				+ ":" + (Math.floor(Math.abs(timeTo)/60/1000%60) < 10 ? "0" : "") + Math.floor(Math.abs(timeTo)/60/1000%60) // minutes
				+ ":" + (Math.floor(Math.abs(timeTo)/1000%60) < 10 ? "0" : "") + Math.floor(Math.abs(timeTo)/1000%60) // seconds
				+ (Math.floor(Math.abs(timeTo)/60/60/1000) > 0 // milliseconds if there's less than one hour left
					? ""
					: "." + (Math.floor(Math.abs(timeTo)%1000) < 100
						? "0" + (Math.floor(Math.abs(timeTo)%1000) < 10
							? "0" + Math.floor(Math.abs(timeTo)%1000)
							: Math.floor(Math.abs(timeTo)%1000))
						: Math.floor(Math.abs(timeTo)%1000)
					)
				);
				document.title = element.innerHTML;
			requestAnimationFrame(countdown);
		}

		red = 0;
		green = 0;
		blue = 0;
		targetRed = 0;
		targetGreen = 255;
		targetBlue = 0;
		grayed = false;
		tip = `dedicated to the RDL ARG team, who finished this in two hours.<br>
				the default time is when you guys finished in Mountain Standard Time. feel free to change it.<br>
				for best results, make sure your system time is accurate.`;
		const element = document.getElementById("countdown");
		const time = document.getElementById("time");
		date = "October 13, 2020 09:55:00 MST";
		time.value = date;


		document.addEventListener("DOMContentLoaded", function() {
			document.getElementById("hint").innerHTML = "(" + tip + ")";
		})

		document.getElementById("guess").addEventListener("click", function() {
			window.open("https://github.com/deadlysprinklez/countdown");
		});


		time.addEventListener("keydown", e => (e.key == "Enter" ? date = time.value : null));

		countdown();
	</script>
</body>