From 6d108f5e94ecac6b724e128bae3af3d9f3c446e8 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Mon, 21 Aug 2023 03:06:41 +0200 Subject: 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.. --- docs/images/backgrounds/1.jpg | Bin 0 -> 133337 bytes docs/images/backgrounds/2.jpg | Bin 0 -> 103397 bytes docs/images/backgrounds/3.jpg | Bin 0 -> 488690 bytes docs/images/backgrounds/4.jpg | Bin 0 -> 459565 bytes docs/images/backgrounds/5.jpg | Bin 0 -> 475530 bytes docs/images/backgrounds/6.jpg | Bin 0 -> 737087 bytes docs/images/backgrounds/7.jpg | Bin 0 -> 361259 bytes docs/images/linux.png | Bin 0 -> 2291 bytes docs/images/preview.png | Bin 0 -> 266728 bytes docs/images/viper.png | Bin 0 -> 59028 bytes docs/images/windows.png | Bin 0 -> 753 bytes docs/index.html | 41 +++++++++++ docs/main.css | 162 ++++++++++++++++++++++++++++++++++++++++++ docs/main.js | 115 +++++++++++++++++++----------- docs/redirect.js | 46 ++++++++++++ 15 files changed, 324 insertions(+), 40 deletions(-) create mode 100644 docs/images/backgrounds/1.jpg create mode 100644 docs/images/backgrounds/2.jpg create mode 100644 docs/images/backgrounds/3.jpg create mode 100644 docs/images/backgrounds/4.jpg create mode 100644 docs/images/backgrounds/5.jpg create mode 100644 docs/images/backgrounds/6.jpg create mode 100644 docs/images/backgrounds/7.jpg create mode 100644 docs/images/linux.png create mode 100644 docs/images/preview.png create mode 100644 docs/images/viper.png create mode 100644 docs/images/windows.png create mode 100644 docs/main.css create mode 100644 docs/redirect.js (limited to 'docs') diff --git a/docs/images/backgrounds/1.jpg b/docs/images/backgrounds/1.jpg new file mode 100644 index 0000000..8b1d5ad Binary files /dev/null and b/docs/images/backgrounds/1.jpg differ diff --git a/docs/images/backgrounds/2.jpg b/docs/images/backgrounds/2.jpg new file mode 100644 index 0000000..01e7e55 Binary files /dev/null and b/docs/images/backgrounds/2.jpg differ diff --git a/docs/images/backgrounds/3.jpg b/docs/images/backgrounds/3.jpg new file mode 100644 index 0000000..d7551fe Binary files /dev/null and b/docs/images/backgrounds/3.jpg differ diff --git a/docs/images/backgrounds/4.jpg b/docs/images/backgrounds/4.jpg new file mode 100644 index 0000000..f793d7a Binary files /dev/null and b/docs/images/backgrounds/4.jpg differ diff --git a/docs/images/backgrounds/5.jpg b/docs/images/backgrounds/5.jpg new file mode 100644 index 0000000..d8b5fd4 Binary files /dev/null and b/docs/images/backgrounds/5.jpg differ diff --git a/docs/images/backgrounds/6.jpg b/docs/images/backgrounds/6.jpg new file mode 100644 index 0000000..257042a Binary files /dev/null and b/docs/images/backgrounds/6.jpg differ diff --git a/docs/images/backgrounds/7.jpg b/docs/images/backgrounds/7.jpg new file mode 100644 index 0000000..ff1eb13 Binary files /dev/null and b/docs/images/backgrounds/7.jpg differ diff --git a/docs/images/linux.png b/docs/images/linux.png new file mode 100644 index 0000000..9f7efce Binary files /dev/null and b/docs/images/linux.png differ diff --git a/docs/images/preview.png b/docs/images/preview.png new file mode 100644 index 0000000..50dba2c Binary files /dev/null and b/docs/images/preview.png differ diff --git a/docs/images/viper.png b/docs/images/viper.png new file mode 100644 index 0000000..69b1cce Binary files /dev/null and b/docs/images/viper.png differ diff --git a/docs/images/windows.png b/docs/images/windows.png new file mode 100644 index 0000000..9b8335a Binary files /dev/null and b/docs/images/windows.png 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 @@ + Viper + + + + + + + + + + + + + +
+
+
+
+
+
+ +
+
+
+
+ Viper's logo +

Viper

+
+ + Click for more download options +
+
+
+ A screenshot of Viper
+
+ + + 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() -- cgit v1.2.3