15 files changed, 324 insertions, 40 deletions
diff --git a/docs/images/backgrounds/1.jpg b/docs/images/backgrounds/1.jpg
new file mode 100644
index 0000000..8b1d5ad
--- /dev/null
+++ b/docs/images/backgrounds/1.jpg
diff --git a/docs/images/backgrounds/2.jpg b/docs/images/backgrounds/2.jpg
new file mode 100644
index 0000000..01e7e55
--- /dev/null
+++ b/docs/images/backgrounds/2.jpg
diff --git a/docs/images/backgrounds/3.jpg b/docs/images/backgrounds/3.jpg
new file mode 100644
index 0000000..d7551fe
--- /dev/null
+++ b/docs/images/backgrounds/3.jpg
diff --git a/docs/images/backgrounds/4.jpg b/docs/images/backgrounds/4.jpg
new file mode 100644
index 0000000..f793d7a
--- /dev/null
+++ b/docs/images/backgrounds/4.jpg
diff --git a/docs/images/backgrounds/5.jpg b/docs/images/backgrounds/5.jpg
new file mode 100644
index 0000000..d8b5fd4
--- /dev/null
+++ b/docs/images/backgrounds/5.jpg
diff --git a/docs/images/backgrounds/6.jpg b/docs/images/backgrounds/6.jpg
new file mode 100644
index 0000000..257042a
--- /dev/null
+++ b/docs/images/backgrounds/6.jpg
diff --git a/docs/images/backgrounds/7.jpg b/docs/images/backgrounds/7.jpg
new file mode 100644
index 0000000..ff1eb13
--- /dev/null
+++ b/docs/images/backgrounds/7.jpg
diff --git a/docs/images/linux.png b/docs/images/linux.png
new file mode 100644
index 0000000..9f7efce
--- /dev/null
+++ b/docs/images/linux.png
diff --git a/docs/images/preview.png b/docs/images/preview.png
new file mode 100644
index 0000000..50dba2c
--- /dev/null
+++ b/docs/images/preview.png
diff --git a/docs/images/viper.png b/docs/images/viper.png
new file mode 100644
index 0000000..69b1cce
--- /dev/null
+++ b/docs/images/viper.png
diff --git a/docs/images/windows.png b/docs/images/windows.png
new file mode 100644
index 0000000..9b8335a
--- /dev/null
+++ b/docs/images/windows.png
diff --git a/docs/index.html b/docs/index.html
index a817e49..9616f46 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,8 +1,49 @@
+<!DOCTYPE html>
 <html>
 	<head>
 		<title>Viper</title>
+		<meta content="Viper" property="og:title">
+		<meta content="images/viper.png" property="og:image">
+		<meta content="Launcher+Updater for TF|2 Northstar" property="og:description">
+
+		<link rel="shortcut icon" href="images/viper.png" type="image/png">
+		<meta content="#C7777F" data-react-helmet="true" name="theme-color">
+
+		<link rel="stylesheet" href="main.css">
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+
+		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,viewport-fit=cover">
 	</head>
 	<body>
+		<div class="background">
+			<div class="images">
+				<div class="image active-noanim"></div>
+			</div>
+			<div class="color"></div>
+		</div>
+
+		<div class="main">
+			<div class="box">
+				<div class="info">
+					<div class="image">
+						<img alt="Viper's logo" src="images/viper.png">
+						<h1>Viper</h1>
+					</div>
+					<button>
+						<img src="images/windows.png">
+						Download!
+					</button>
+					<a href="?release-page">Click for more download options</a>
+				</div>
+			</div>
+			<div class="box">
+				<img title="A screenshot of Viper" alt="A screenshot of Viper" src="images/preview.png" class="preview"></div>
+			</div>
+		</div>
+
 		<script src="main.js"></script>
+		<script src="redirect.js"></script>
 	</body>
 </html>
diff --git a/docs/main.css b/docs/main.css
new file mode 100644
index 0000000..8065bfb
--- /dev/null
+++ b/docs/main.css
@@ -0,0 +1,162 @@
+/* base properties */
+body, button {
+	margin: 0;
+	color: white;
+	user-select: none;
+	background: black;
+	font-family: "Roboto", sans-serif;
+}
+
+/* positioning, sizing and everything for background elements */
+.background, .background .color, .background .image {
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: -1;
+	position: fixed;
+	background-size: cover;
+	background-position: center;
+}
+
+/* tinted background color */
+.background .color {
+	background-color: rgb(0, 0, 0, 0.7);
+}
+
+/* background image elements */
+.background .image {
+	opacity: 0.0;
+	transform: scale(1.0);
+	background-position-x: 50%;
+	transition: 0.8s opacity ease-in-out,
+		5.0s transform ease-out,
+		5.0s background-position-x ease-out;
+	background-image: url("images/backgrounds/1.jpg");
+}
+
+/* appear but dont animate */
+.background .image.active-noanim {
+	opacity: 1.0;
+}
+
+/* show and animate the image */
+.background .image.active {
+	opacity: 1.0;
+	transform: scale(1.05);
+	background-position-x: 25%;
+}
+
+/* main container for everything */
+
+.main {
+	width: 80vw;
+	height: 100vh;
+	display: flex;
+	margin: 0 auto;
+	max-width: 800px;
+	position: relative;
+	align-items: center;
+}
+
+/* actual containers with content */
+
+.box {
+	width: 100%;
+	height: 80%;
+	display: flex;
+	max-height: 400px;
+	border-radius: 15px;
+	align-items: center;
+	justify-content: center;
+}
+
+/* preview image */
+
+.box .preview {
+	width: 100%;
+	cursor: default;
+	border-radius: 15px;
+	transition: 0.3s ease-in-out;
+	transition-property: box-shadow, transform;
+	box-shadow: 0px 8px 5px rgba(0, 0, 0, 0.1);
+}
+
+.box .preview:hover {
+	transform: scale(1.05);
+	box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.4);
+}
+
+/* hide preview image devices with less than 900px in width */
+@media (max-width: 900px) {
+	.box:nth-child(2) {
+		display: none;
+	}
+}
+
+/* main div with text and content */
+.info {
+	text-align: center;
+}
+
+/* Viper logo+text */
+.info .image {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: min(3vw, 30px);
+}
+
+/* Viper logo sizing */
+.info .image img {
+	width: 30%;
+	max-width: 400px;
+}
+
+/* more download options link */
+
+.info a {
+	opacity: 0.8;
+	color: #C7777F;
+	text-decoration: none;
+	transition: filter 0.2s ease-in;
+}
+
+.info a:hover {
+	filter: brightness(80%);
+}
+
+/* big download button */
+
+button {
+	border: none;
+	color: white;
+	display: flex;
+	margin: 15px auto;
+	font-size: 24px;
+	font-weight: bold;
+	padding: 20px 40px;
+	align-items: center;
+	border-radius: 10px;
+	justify-content: center;
+	transition: 0.2s ease-in-out;
+	background: linear-gradient(45deg, #81A1C1, #7380ED);
+	filter: drop-shadow(0px 8px 5px rgba(0, 0, 0, 0.1));
+}
+
+button:hover {
+	transform: scale(1.05);
+	filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.3)) brightness(110%);
+}
+
+button:active {
+	opacity: 0.7;transform: scale(0.98);
+	filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.4));
+}
+
+/* platform icon in button */
+button img {
+	width: 28px;
+	margin-right: 15px;
+}
+
diff --git a/docs/main.js b/docs/main.js
index a0223da..3f1e6ec 100644
--- a/docs/main.js
+++ b/docs/main.js
@@ -1,44 +1,79 @@
-let repo = "viper";
-let author = "0neGal";
-let api = "https://api.github.com/repos";
-
-async function init() {
-	let release = await (await fetch(`${api}/${author}/${repo}/releases/latest`)).json();
-	let assets = release.assets;
-
-	let get = (asset) => {
-		for (let i in assets) {
-			if (assets[i].name.match(asset)) {
-				return assets[i].browser_download_url;
-			}
-		}
+// change platform icon in "Download!" button if on Linux
+if (navigator.userAgent.match("Linux")) {
+	document.querySelector("button img").src = "images/linux.png";
+}
+
+// functionality of "Download!" button
+document.querySelector("button").addEventListener("click", () => {
+	// if on Linux, navigate to .AppImage file
+	if (navigator.userAgent.match("Linux")) {
+		return location.replace("?appimage");
 	}
 
-	let url;
-	let search = location.search.replace(/^\?/, "");
-	switch(search) {
-		case "win-setup":
-			url = get(/Viper-Setup-.*\.exe$/);
-			break;
-		case "win-portable":
-			url = get(/Viper-.*\.exe$/);
-			break;
-		case "appimage":
-			url = get(/Viper-.*\.AppImage$/);
-			break;
-		case "linux":
-			url = get(/viper-.*.tar\.gz$/);
-			break;
-		case "rpm":
-			url = get(/viper-.*\.x86_64\.rpm$/);
-			break;
-		case "deb":
-			url = get(/viper_.*_amd64\.deb$/);
-			break;
-		default:
-			url = release.html_url;
-			break;
+	// if not on Linux, navigate to .exe setup file
+	location.replace("?win-setup");
+})
+
+// how many wallpapers are in images/backgrounds/
+let backgrounds = 7; 
+
+// initializes the elements for the backgrounds
+function init_backgrounds() {
+	// run through `backgrounds`
+	for (let i = 2; i < backgrounds + 1; i++) {
+		// create background element
+		let background = document.createElement("div");
+
+		// add relevant classes
+		background.classList.add("image");
+
+		// set `background-image` CSS property
+		background.style.backgroundImage =
+			`url("images/backgrounds/${i}.jpg")`;
+
+		// add image to DOM
+		document.querySelector(".background .images").appendChild(
+			background
+		)
 	}
+}; init_backgrounds()
+
+// changes the current image to a random image, if the image picked is
+// the same as the one currently being shown, then we re-run this
+// function, aka duplicates do not happen!
+function change_background() {
+	// get the ID for the new image
+	let new_image = Math.floor(Math.random() * (backgrounds - 2) + 1);
+	// get list of image elements
+	let images = document.querySelector(".background .images").children;
+
+	// if the new images is the current images, cancel and re-run
+	if (images[new_image] ==
+		document.querySelector(".background .images .active")) {
+
+		return change_background();
+	}
+
+	// run through the images
+	for (let i = 0; i < images.length; i++) {
+		// if we're at the new active image, make it active
+		if (i == new_image) {
+			images[i].classList.add("active");
+			continue;
+		}
+
+		// remove any possible `.active` class from this image
+		images[i].classList.remove("active");
+	}
+}
+
+// makes the initial (Viper) background/image animate on page load
+document.addEventListener("DOMContentLoaded", () => {
+	let image = document.querySelector(".image.active-noanim");
+
+	image.classList.add("active");
+	image.classList.remove("active-noanim");
+})
 
-	location.replace(url);
-}; init()
+// change wallpaper every 5 seconds
+setInterval(change_background, 5000);
diff --git a/docs/redirect.js b/docs/redirect.js
new file mode 100644
index 0000000..f88479f
--- /dev/null
+++ b/docs/redirect.js
@@ -0,0 +1,46 @@
+let repo = "viper";
+let author = "0neGal";
+let api = "https://api.github.com/repos";
+
+async function init() {
+	let release = await (await fetch(`${api}/${author}/${repo}/releases/latest`)).json();
+	let assets = release.assets;
+
+	let get = (asset) => {
+		for (let i in assets) {
+			if (assets[i].name.match(asset)) {
+				return assets[i].browser_download_url;
+			}
+		}
+	}
+
+	let url;
+	let search = location.search.replace(/^\?/, "");
+	switch(search) {
+		case "win-setup":
+			url = get(/Viper-Setup-.*\.exe$/);
+			break;
+		case "win-portable":
+			url = get(/Viper-.*\.exe$/);
+			break;
+		case "appimage":
+			url = get(/Viper-.*\.AppImage$/);
+			break;
+		case "linux":
+			url = get(/viper-.*.tar\.gz$/);
+			break;
+		case "rpm":
+			url = get(/viper-.*\.x86_64\.rpm$/);
+			break;
+		case "deb":
+			url = get(/viper_.*_amd64\.deb$/);
+			break;
+		case "release-page":
+			url = release.html_url;
+			break;
+		default:
+			return;
+	}
+
+	location.replace(url);
+}; init()