aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2023-08-21 03:06:41 +0200
committer0neGal <mail@0negal.com>2023-08-21 03:06:41 +0200
commit6d108f5e94ecac6b724e128bae3af3d9f3c446e8 (patch)
treed3d9f21e3822cb4259ee34b30cd5ee356ef43c53
parentf9c64963ac1e2dc3d5b5db7ab6ecfb5b6385bfa9 (diff)
downloadViper-6d108f5e94ecac6b724e128bae3af3d9f3c446e8.tar.gz
Viper-6d108f5e94ecac6b724e128bae3af3d9f3c446e8.zip
added a basic but proper website for Viper
More changes may come down the line, but this is more or less complete, I think?? You never know..
Diffstat
-rw-r--r--docs/images/backgrounds/1.jpgbin0 -> 133337 bytes
-rw-r--r--docs/images/backgrounds/2.jpgbin0 -> 103397 bytes
-rw-r--r--docs/images/backgrounds/3.jpgbin0 -> 488690 bytes
-rw-r--r--docs/images/backgrounds/4.jpgbin0 -> 459565 bytes
-rw-r--r--docs/images/backgrounds/5.jpgbin0 -> 475530 bytes
-rw-r--r--docs/images/backgrounds/6.jpgbin0 -> 737087 bytes
-rw-r--r--docs/images/backgrounds/7.jpgbin0 -> 361259 bytes
-rw-r--r--docs/images/linux.pngbin0 -> 2291 bytes
-rw-r--r--docs/images/preview.pngbin0 -> 266728 bytes
-rw-r--r--docs/images/viper.pngbin0 -> 59028 bytes
-rw-r--r--docs/images/windows.pngbin0 -> 753 bytes
-rw-r--r--docs/index.html41
-rw-r--r--docs/main.css162
-rw-r--r--docs/main.js115
-rw-r--r--docs/redirect.js46
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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()
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-21 15:22:19 +0000