index.html

<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="#" />
	<link rel="stylesheet" href="./style.css" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/metropolis.min.css" />
</head>

<body>
	<div id="statusContainer">Connecting...</div>
	<div id="mainContainer">
		<div id="timerBar"></div>
	</div>
	<div id="hugeTittiesContainer">
		<div id="adLabel">
			Ad
		</div>
		<div id="timerLabel">
			<span id="adsRemainingContainer"></span> • <span id="timerContainer"></span>
		</div>
	</div>
	<div id="midRollContainer">
		<div id="midRollStartingInLabel">Ads starting in...</div>
		<div id="midRollCountdownContainer"></div>
	</div>
</body>

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src="./script.js"></script>