Merge pull request #43 from PseudoDopamine:Release-3.9.0

Release v3.9.0

index.html

@@ -61,6 +61,42 @@ <h1>TPDC</h1>
 		<!-- Header -->
 		<header class="flex">
 			<h1>Where Dopamine fails, friends will thrive.</h1>
+			<hr>
+			<div class="feature">
+				<p>
+					<strong>The Final Three Productions - The Rogue Summit 7</strong>
+					<br />
+					A 3-day charity fundraising event for <a href="https://www.ProjectHOPE.org/" target="_blank" rel="noopener noreferrer">Project HOPE</a>.
+				</p>
+				<table class="timer">
+					<thead>
+						<tr>
+							<th>Days</th>
+							<th>Hours</th>
+							<th>Minutes</th>
+							<th>Seconds</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>0</td>
+							<td>0</td>
+							<td>0</td>
+							<td>0</td>
+						</tr>
+					</tbody>
+				</table>
+				<nav aria-label="Feature call-to-action menu">
+					<ul>
+						<li>
+							<a class="button" href="https://Tiltify.com/@ayaan-ahmed/the-rogue-summit-7" target="_blank" rel="noopener noreferrer">Donate!</a>
+						</li>
+						<li>
+							<a class="stream button" href="https://www.Twitch.tv/AsuraFGC" target="_blank" rel="noopener noreferrer">Follow Asura!</a>
+						</li>
+					</ul>
+				</nav>
+			</div>
 		</header>
 
 		<!-- Main content -->
@@ -371,6 +407,7 @@ <h2>Join us on Discord!</h2>
 
 		<!-- Scripts -->
 		<script src="./res/js/app.js"></script>
+		<script src="./res/js/countdown.js"></script>
 		<!-- END OF CONTENT -->
 	</body>
 </html>

res/css/style.css

@@ -190,6 +190,15 @@ nav[aria-label*="menu"] li:first-child {
 nav[aria-label*="menu"] li:last-child {
 	margin-right: 0;
 }
+.timer {
+	border-radius: .5rem;
+	margin: .5rem auto;
+	padding: .5rem;
+}
+
+.timer th+th, .timer td+td {
+	padding-left: 1.5rem;
+}
 
 .card {
 	background-color: var(--night-black);
@@ -254,7 +263,7 @@ nav.bar li:not(.logo)>a:hover {
 
 /* Header */
 header {
-	background: center / cover no-repeat url("../assets/img/logos/Banner\ \(No\ text\).png");
+	background: center / cover no-repeat url("../assets/img/backgrounds/RS7\ promo.gif");
 	flex-direction: column;
 	height: 100vh;
 	justify-content: center !important;
@@ -284,6 +293,10 @@ header hr {
 	width: 85%;
 }
 
+header .timer {
+	background-color: var(--raisin-black);
+}
+
 /* Main content */
 section {
 	padding: 75px 0 2.5rem;
@@ -336,6 +349,12 @@ footer.flex{
 	}
 }
 
+@media only screen and (max-height: 545px) {
+	header h1, header hr {
+		display: none;
+	}
+}
+
 /* Helper classes =========================================================== */
 /* Hide visually and from screen readers */
 .hidden, [hidden] {

res/js/countdown.js

@@ -0,0 +1,26 @@
+// DOM Elements
+const timerSegments = document.querySelector(".timer").querySelectorAll("td"), streamButton = document.querySelector("header .stream.button");
+
+// State management
+const featureTime = new Date("2024-08-29T17:00:00.000+01:00").getTime();
+
+const updateTimer = setInterval(() => {
+	const timer = featureTime - new Date().getTime();
+
+	if (timer < 0) {
+		for (const segment of timerSegments) segment.innerText = 0;
+		streamButton.style.backgroundColor = "#9609F1";
+		streamButton.innerText = "Watch NOW!";
+
+		clearInterval(updateTimer);
+
+		return;
+	}
+
+	const secs = Math.floor(timer / 1000), mins = Math.floor(secs / 60), hours = Math.floor(mins / 60), days = Math.floor(hours / 24);
+
+	timerSegments[0].innerText = days;
+	timerSegments[1].innerText = hours % 24;
+	timerSegments[2].innerText = mins % 60;
+	timerSegments[3].innerText = secs % 60;
+}, 1000);