<!-- Happy new Year! -->
<div id="container">
	<div id="barcontainer">
		<div id="title">Progress.</div>
		<div id="yp">Year Progress: <span id="ypp"></span></div>
		<div id="ygraph">
			<div id="ybar"></div>
		</div>
		<div id="mp">Month Progress: <span id="mpp"></span></div>
		<div id="mgraph">
			<div id="mbar"></div>
		</div>
		<div id="dp">Day Progress: <span id="dpp"></span></div>
		<div id="dgraph">
			<div id="dbar"></div>
		</div>
		<div id="hp">Hour Progress: <span id="hpp"></span></div>
		<div id="hgraph">
			<div id="hbar"></div>
		</div>
		<div id="mip">Minute Progress: <span id="mipp"></span></div>
		<div id="migraph">
			<div id="mibar"></div>
		</div>
	</div>

	<div id="abt">
		<div id="dm">🌘</div>
		<div id="txt">🎉 Happy 2020! 🎉<br>Made on the 31st of<br>Dezember 2019.<br><br>Previous years:<br><a href="https://codepen.io/nitnelav/pen/yGzxNv" target="_blank">2018</a><br><a href="https://codepen.io/nitnelav/pen/vpmQQq" target="_blank">2017</a></div>
	</div>
	
	<div id="settings">⚙</div>
</div>

/*Happy 2020! 🎉*/

:root {
	--bright: #fff;
	--dark: #000;
}

#container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-family: "IBM Plex Mono", monospace;
	font-size: 2vh;
	color: var(--dark);
	overflow: hidden;
	background: var(--bright);
}

#settings {
	position: absolute;
	top: 1vh;
	right: 30vh;
	font-size: 3vh;
	color: var(--bright);
	cursor: pointer;
	transition: right 0.2s;
}

#abt {
	position: absolute;
	top: -40vh;
	left: calc(100vw - 40vh);
	height: 60vh;
	width: 60vh;
	border-radius: 100%;
	background: var(--dark);
	transition: all 0.5s cubic-bezier(0.87, -0.2, 0.19, 1.2);
}

#txt {
	position: absolute;
	top: 42vh;
	left: 12vh;
	height: 22vh;
	width: 25vh;
	font-size: 1.5vh;
	text-align: center;
	color: var(--bright);
	background: none;
}

#dm {
	position: absolute;
	top: 42vh;
	right: -1vh;
	width: 25vh;
	font-size: 2.2vh;
	cursor: pointer;
}

#barcontainer {
	position: absolute;
	top: 18vh;
	left: 0;
	right: 0;
	height: 75vh;
	overflow: hidden;
}

#title {
	font-size: 7vh;
	margin-left: 10vw;
	margin-bottom: 7vh;
	font-weight: 700;
}

#yp,
#mp,
#dp,
#hp,
#mip {
	margin-left: 10vw;
	margin-bottom: 1vh;
}

#ygraph,
#mgraph,
#dgraph,
#hgraph,
#migraph {
	height: 3vh;
	width: 80vw;
	border: 1px solid var(--dark);
	overflow: hidden;
	margin-bottom: 5vh;
	margin-left: 10vw;
}

#ybar,
#mbar,
#dbar,
#hbar,
#mibar {
	height: 3vh;
	width: 0vw;
	background: var(--dark);
	transition: width 0.5s;
}

a,
a:link,
a:visited {
	color: var(--bright);
}

@media (prefers-color-scheme: dark) {
	:root {
		--dark: #fff;
		--bright: #000;
	}
}

//Happy 2020! 🎉

///////////////////////////
//Defaults and Vars
let def_with = 80;
let exp = true;
let dm;
let set_btn = document.getElementById("settings");
let dm_btn = document.getElementById("dm");
let root = document.documentElement;

///////////////////////////
//Main Interval
setInterval(() => {
	//Set start of year
	let d = new Date();
	d.setMonth(0);
	d.setDate(1);
	d.setHours(0);
	d.setMinutes(0);
	d.setSeconds(0);

	//calculate seconds since start of Year
	let now = new Date();
	let elapsedY = now - d;
	//calculate percentage for year
	let spy = secondsPerYear(now.getFullYear());
	let yperc = elapsedY / 1000 / spy;
	yperc = Math.round(yperc * 10000000) / 100000;
	ypp.innerHTML = yperc + "%";
	ybar.style.width = def_with * yperc / 100 + "vw";

	//calculate percentage for month
	let startOfMonth = new Date();
	startOfMonth.setDate(1);
	startOfMonth.setHours(0);
	startOfMonth.setMinutes(0);
	startOfMonth.setSeconds(0);
	startOfMonth.setMilliseconds(0);
	let elapsedM = now - startOfMonth;
	let spm = secondsPerMonth(now.getFullYear(), now.getMonth() + 1);
	let mperc = elapsedM / 1000 / spm;
	mperc = Math.round(mperc * 1000000) / 10000;
	mpp.innerHTML = mperc + "%";
	mbar.style.width = def_with * mperc / 100 + "vw";

	//calculate percentage for day
	let startOfDay = new Date();
	startOfDay.setHours(0);
	startOfDay.setMinutes(0);
	startOfDay.setSeconds(0);
	startOfDay.setMilliseconds(0);
	let elapsedD = now - startOfDay;
	let dperc = elapsedD / 1000 / 86400;
	dperc = Math.round(dperc * 100000) / 1000;
	dpp.innerHTML = dperc + "%";
	dbar.style.width = def_with * dperc / 100 + "vw";

	//calculate percentage for hour
	let startOfHour = new Date();
	startOfHour.setMinutes(0);
	startOfHour.setSeconds(0);
	startOfHour.setMilliseconds(0);
	let elapsedH = now - startOfHour;
	let hperc = elapsedH / 1000 / 3600;
	hperc = Math.round(hperc * 10000) / 100;
	hpp.innerHTML = hperc + "%";
	hbar.style.width = def_with * hperc / 100 + "vw";

	//calculate percentage for minute
	let startOfMinute = new Date();
	startOfMinute.setSeconds(0);
	startOfMinute.setMilliseconds(0);
	let elapsedMi = now - startOfMinute;
	let miperc = elapsedMi / 1000 / 60;
	miperc = Math.round(miperc * 1000) / 10;
	mipp.innerHTML = miperc + "%";
	mibar.style.width = def_with * miperc / 100 + "vw";
}, 1000);

///////////////////////////
//Settings
set_btn.addEventListener("click", e => {
	if (exp) {
		set_btn.style.right = "1vh";
		set_btn.style.color = "var(--dark)";
		abt.style.left = "120vw";
		abt.style.top = "-100vh";
		exp = false;
	} else {
		set_btn.style.right = "30vh";
		set_btn.style.color = "var(--bright)";
		abt.style.left = "calc(100vw - 40vh)";
		abt.style.top = "-40vh";
		exp = true;
	}
});

///////////////////////////
//Darkmode
if (
	window.matchMedia &&
	window.matchMedia("(prefers-color-scheme: dark)").matches
) {
	root.style.setProperty("--bright", "#000");
	root.style.setProperty("--dark", "#fff");
	dm_btn.innerHTML = "🌖";
	dm = false;
} else {
	root.style.setProperty("--bright", "#fff");
	root.style.setProperty("--dark", "#000");
	dm_btn.innerHTML = "🌘";
	dm = true;
}

dm_btn.addEventListener("click", e => {
	if (dm) {
		root.style.setProperty("--bright", "#000");
		root.style.setProperty("--dark", "#fff");
		dm_btn.innerHTML = "🌖";
		dm = false;
	} else {
		root.style.setProperty("--bright", "#fff");
		root.style.setProperty("--dark", "#000");
		dm_btn.innerHTML = "🌘";
		dm = true;
	}
});

///////////////////////////
//Helper Functions
function secondsPerYear(year) {
	if (leapYear(year)) {
		return 31622400;
	} else {
		return 31536000;
	}
}

function leapYear(year) {
	return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
}

function secondsPerMonth(y, m) {
	let spm = new Date(y, m, 0).getDate() * 24 * 3600;
	return spm;
}