Skip to content

Commit

Permalink
download page, wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrSn0wy
MrSn0wy committed Jul 17, 2024
1 parent b9f6df1 commit 7f8c88c
Show file tree
Hide file tree
Showing 5 changed files with 373 additions and 1 deletion.
0 .github/workflows/compatibility.yml → .github/workflows/updater.yml
View file
File renamed without changes.
12 changes: 11 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,17 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

### [v0.3.1] (unreleased)
### [v1.0.0]

#### Added
- Added artifact downloading to the rust updater script


#### Changed
- Fixed the amount of skeletonCards in the comp page from 20 to 10.
- Modified workflow files for the new Downloads page

### [v0.3.1]
- Put the tmdb hex into the config, instead of a secret variable
- Added CSP to the `_errorPages` and some other small fixes

Expand Down
46 changes: 46 additions & 0 deletions public_html/download/app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
let databaseJsonData; // :3
let totalPages; // is this needed? like genuinely?
let currentPage = 1; // starts from 1, NOT 0
let tagFilter = [];
let justUpdated;
let issuesPerPage = 10;
let issuesCount;
// let Timer;
const codeRegex = /[a-zA-Z]{4}[0-9]{5}/;

document.addEventListener('DOMContentLoaded', async function () {

// required.js
adjustScreenSize(610); // might not change the top image for on mobile
await init();
adjustScreenSize(610); // ensure change of top image
headerShadow();

window.addEventListener('resize', () => {
adjustScreenSize(610);
});
window.addEventListener("scroll", headerShadow);

document.querySelectorAll(".downloadListItem").forEach((item) => {
item.addEventListener('click', function() {

if (item === document.querySelector(".downloadList").children.item(0)) {
document.querySelector(".downloadContentList").style.transform = `translateX(-200%)`;


} else if (item === document.querySelector(".downloadList").children.item(1)) {
document.querySelector(".downloadContentList").style.transform = `translateX(-100%)`


} else if (item === document.querySelector(".downloadList").children.item(2)) {
document.querySelector(".downloadContentList").style.transform = `translateX(0%)`


} else {
console.error("Uh oh, it seems the html is modified!")
}
document.querySelector(".downloadListSelected").classList.remove("downloadListSelected");
item.classList.add("downloadListSelected");
})
})
});
84 changes: 84 additions & 0 deletions public_html/download/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline' https://rsms.me/; font-src 'self' https://rsms.me/; img-src 'self' data:;">
<title>Obliteration - Compatibility List</title>
<meta name="description"
content="Obliteration is an experimental open-source PS4 emulator written in Rust for Windows, MacOS, and Linux.">
<meta name="keywords"
content="Obliteration, playstation, ps4, playstation 4, emulator, windows, macOS, linux, open-source, rust, C++, obliteration github, obliteration discord, obliteration wiki">
<meta name="robots" content="index,follow">
<meta name="author" content="Obliteration">
<meta name="copyright" content="Obliteration">
<meta name="theme-color" content="#680600">
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Obliteration - Compatibility List"/>
<meta name="twitter:description" content="Here you can view all the tested games and apps on Obliteration."/>
<meta name="twitter:image:src" content="/_images/Obliteration.png"/>
<meta property="og:title" content="Obliteration - An experimental open-source PS4 emulator">
<meta property="og:description" content="Here you can view all the tested games and apps on Obliteration.">
<meta property="og:image" content="/_images/Obliteration.png">
<meta property="og:url" content="https://obliteration.net">
<link rel="icon" href="/_images/Obliteration-smoll.png" type="image/png">
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="/required.css">
<link rel="stylesheet" href="styles.css">
<meta name="darkreader-lock"> <!-- for disabling dark mode with dark reader -->
<script defer src="/required.js"></script>
<script defer src="app.js"></script>
</head>
<body>
<header class="header" id="header"></header>
<div id="menu"></div>

<main class="main">
<div class="background">
<div class="backgroundPlane1"></div>
<div class="backgroundPlane2"></div>
</div>

<div class="content">
<div class="warning">
<div class="warningHeader">
<svg class="warningHeaderIcon" xmlns="http://www.w3.org/2000/svg" height="18px" fill="#fa574f" viewBox="0 -960 960 960"><path d="m480-213.33q22.667 0 38-15.333 15.333-15.333 15.333-38 0-22.667-15.333-38-15.333-15.333-38-15.333t-38 15.333q-15.333 15.333-15.333 38 0 22.667 15.333 38 15.333 15.333 38 15.333zm-53.333-213.33h106.67v-320h-106.67zm-146.67 426.67-280-280v-400l280-280h400l280 280v400l-280 280zm45.333-106.67h309.33l218.67-218.67v-309.33l-218.67-218.67h-309.33l-218.67 218.67v309.33z" stroke-width="1.3333"/></svg>
<span class="warningHeaderText">Warning!</span>
</div>
<span class="warningContent">This is very experimental software, expect things to break!</span>
</div>
<div class="download">
<ul class="downloadList">
<li class="downloadListItem downloadListSelected">
<svg class="downloadListItemIcon" xmlns="http://www.w3.org/2000/svg" height="22px" fill="white" viewBox="0 0 256 256"><path d="M0,2.84217094e-14 L121.32899,2.84217094e-14 L121.32899,121.32899 L0,121.32899 L0,2.84217094e-14 Z M134.67101,2.84217094e-14 L256,2.84217094e-14 L256,121.32899 L134.67101,121.32899 L134.67101,2.84217094e-14 Z M0,134.67101 L121.32899,134.67101 L121.32899,256 L0,256 L0,134.67101 Z M134.67101,134.67101 L256,134.67101 L256,256 L134.67101,256 L134.67101,134.67101 Z"/></svg>
<span class="downloadListItemText">Windows</span>
</li>
<li class="downloadListItem">
<svg class="downloadListItemIcon" xmlns="http://www.w3.org/2000/svg" height="22px" fill="white" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="m208 123c1 .5 1.8 1.7 3 1.7 1.1 0 2.8-.4 2.9-1.5.2-1.4-1.9-2.3-3.2-2.9-1.7-.7-3.9-1-5.5-.1-.4.2-.8.7-.6 1.1.3 1.3 2.3 1.1 3.4 1.7zm-21.9 1.7c1.2 0 2-1.2 3-1.7 1.1-.6 3.1-.4 3.5-1.6.2-.4-.2-.9-.6-1.1-1.6-.9-3.8-.6-5.5.1-1.3.6-3.4 1.5-3.2 2.9.1 1 1.8 1.5 2.8 1.4zm221 279c-3.6-4-5.3-11.6-7.2-19.7-1.8-8.1-3.9-16.8-10.5-22.4-1.3-1.1-2.6-2.1-4-2.9-1.3-.8-2.7-1.5-4.1-2 9.2-27.3 5.6-54.5-3.7-79.1-11.4-30.1-31.3-56.4-46.5-74.4-17.1-21.5-33.7-41.9-33.4-72 .5-45.9 5.1-131-75.8-131-102-.2-76.8 103-77.9 135-1.7 23.4-6.4 41.8-22.5 64.7-18.9 22.5-45.5 58.8-58.1 96.7-6 17.9-8.8 36.1-6.2 53.3-6.5 5.8-11.4 14.7-16.6 20.2-4.2 4.3-10.3 5.9-17 8.3s-14 6-18.5 14.5c-2.1 3.9-2.8 8.1-2.8 12.4 0 3.9.6 7.9 1.2 11.8 1.2 8.1 2.5 15.7.8 20.8-5.2 14.4-5.9 24.4-2.2 31.7 3.8 7.3 11.4 10.5 20.1 12.3 17.3 3.6 40.8 2.7 59.3 12.5 19.8 10.4 39.9 14.1 55.9 10.4 11.6-2.6 21.1-9.6 25.9-20.2 12.5-.1 26.3-5.4 48.3-6.6 14.9-1.2 33.6 5.3 55.1 4.1.6 2.3 1.4 4.6 2.5 6.7v.1c8.3 16.7 23.8 24.3 40.3 23 16.6-1.3 34.1-11 48.3-27.9 13.6-16.4 36-23.2 50.9-32.2 7.4-4.5 13.4-10.1 13.9-18.3.4-8.2-4.4-17.3-15.5-29.7zm-196-316c9.8-22.2 34.2-21.8 44-.4 6.5 14.2 3.6 30.9-4.3 40.4-1.6-.8-5.9-2.6-12.6-4.9 1.1-1.2 3.1-2.7 3.9-4.6 4.8-11.8-.2-27-9.1-27.3-7.3-.5-13.9 10.8-11.8 23-4.1-2-9.4-3.5-13-4.4-1-6.9-.3-14.6 2.9-21.8zm-40.7-11.5c10.1 0 20.8 14.2 19.1 33.5-3.5 1-7.1 2.5-10.2 4.6 1.2-8.9-3.3-20.1-9.6-19.6-8.4.7-9.8 21.2-1.8 28.1 1 .8 1.9-.2-5.9 5.5-15.6-14.6-10.5-52.1 8.4-52.1zm-13.6 60.7c6.2-4.6 13.6-10 14.1-10.5 4.7-4.4 13.5-14.2 27.9-14.2 7.1 0 15.6 2.3 25.9 8.9 6.3 4.1 11.3 4.4 22.6 9.3 8.4 3.5 13.7 9.7 10.5 18.2-2.6 7.1-11 14.4-22.7 18.1-11.1 3.6-19.8 16-38.2 14.9-3.9-.2-7-1-9.6-2.1-8-3.5-12.2-10.4-20-15-8.6-4.8-13.2-10.4-14.7-15.3-1.4-4.9 0-9 4.2-12.3zm3.3 334c-2.7 35.1-43.9 34.4-75.3 18-29.9-15.8-68.6-6.5-76.5-21.9-2.4-4.7-2.4-12.7 2.6-26.4v-.2c2.4-7.6.6-16-.6-23.9-1.2-7.8-1.8-15 .9-20 3.5-6.7 8.5-9.1 14.8-11.3 10.3-3.7 11.8-3.4 19.6-9.9 5.5-5.7 9.5-12.9 14.3-18 5.1-5.5 10-8.1 17.7-6.9 8.1 1.2 15.1 6.8 21.9 16l19.6 35.6c9.5 19.9 43.1 48.4 41 68.9zm-1.4-25.9c-4.1-6.6-9.6-13.6-14.4-19.6 7.1 0 14.2-2.2 16.7-8.9 2.3-6.2 0-14.9-7.4-24.9-13.5-18.2-38.3-32.5-38.3-32.5-13.5-8.4-21.1-18.7-24.6-29.9-3.5-11.2-3-23.3-.3-35.2 5.2-22.9 18.6-45.2 27.2-59.2 2.3-1.7.8 3.2-8.7 20.8-8.5 16.1-24.4 53.3-2.6 82.4.6-20.7 5.5-41.8 13.8-61.5 12-27.4 37.3-74.9 39.3-113 1.1.8 4.6 3.2 6.2 4.1 4.6 2.7 8.1 6.7 12.6 10.3 12.4 10 28.5 9.2 42.4 1.2 6.2-3.5 11.2-7.5 15.9-9 9.9-3.1 17.8-8.6 22.3-15 7.7 30.4 25.7 74.3 37.2 95.7 6.1 11.4 18.3 35.5 23.6 64.6 3.3-.1 7 .4 10.9 1.4 13.8-35.7-11.7-74.2-23.3-84.9-4.7-4.6-4.9-6.6-2.6-6.5 12.6 11.2 29.2 33.7 35.2 59 2.8 11.6 3.3 23.7.4 35.7 16.4 6.8 35.9 17.9 30.7 34.8-2.2-.1-3.2 0-4.2 0 3.2-10.1-3.9-17.6-22.8-26.1-19.6-8.6-36-8.6-38.3 12.5-12.1 4.2-18.3 14.7-21.4 27.3-2.8 11.2-3.6 24.7-4.4 39.9-.5 7.7-3.6 18-6.8 29-32.1 22.9-76.7 32.9-114 7.2zm257-11.5c-.9 16.8-41.2 19.9-63.2 46.5-13.2 15.7-29.4 24.4-43.6 25.5-14.2 1.1-26.5-4.8-33.7-19.3-4.7-11.1-2.4-23.1 1.1-36.3 3.7-14.2 9.2-28.8 9.9-40.6.8-15.2 1.7-28.5 4.2-38.7 2.6-10.3 6.6-17.2 13.7-21.1.3-.2.7-.3 1-.5.8 13.2 7.3 26.6 18.8 29.5 12.6 3.3 30.7-7.5 38.4-16.3 9-.3 15.7-.9 22.6 5.1 9.9 8.5 7.1 30.3 17.1 41.6 10.6 11.6 14 19.5 13.7 24.6zm-255-284c2 1.9 4.7 4.5 8 7.1 6.6 5.2 15.8 10.6 27.3 10.6 11.6 0 22.5-5.9 31.8-10.8 4.9-2.6 10.9-7 14.8-10.4 3.9-3.4 5.9-6.3 3.1-6.6-2.8-.3-2.6 2.6-6 5.1-4.4 3.2-9.7 7.4-13.9 9.8-7.4 4.2-19.5 10.2-29.9 10.2s-18.7-4.8-24.9-9.7c-3.1-2.5-5.7-5-7.7-6.9-1.5-1.4-1.9-4.6-4.3-4.9-1.4-.1-1.8 3.7 1.7 6.5z"/></svg>
<span class="downloadListItemText">Linux</span>
</li>
<li class="downloadListItem">
<svg class="downloadListItemIcon" xmlns="http://www.w3.org/2000/svg" height="22px" fill="white" viewBox="0 0 256 315"><path d="M213.803394,167.030943 C214.2452,214.609646 255.542482,230.442639 256,230.644727 C255.650812,231.761357 249.401383,253.208293 234.24263,275.361446 C221.138555,294.513969 207.538253,313.596333 186.113759,313.991545 C165.062051,314.379442 158.292752,301.507828 134.22469,301.507828 C110.163898,301.507828 102.642899,313.596301 82.7151126,314.379442 C62.0350407,315.16201 46.2873831,293.668525 33.0744079,274.586162 C6.07529317,235.552544 -14.5576169,164.286328 13.147166,116.18047 C26.9103111,92.2909053 51.5060917,77.1630356 78.2026125,76.7751096 C98.5099145,76.3877456 117.677594,90.4371851 130.091705,90.4371851 C142.497945,90.4371851 165.790755,73.5415029 190.277627,76.0228474 C200.528668,76.4495055 229.303509,80.1636878 247.780625,107.209389 C246.291825,108.132333 213.44635,127.253405 213.803394,167.030988 M174.239142,50.1987033 C185.218331,36.9088319 192.607958,18.4081019 190.591988,0 C174.766312,0.636050225 155.629514,10.5457909 144.278109,23.8283506 C134.10507,35.5906758 125.195775,54.4170275 127.599657,72.4607932 C145.239231,73.8255433 163.259413,63.4970262 174.239142,50.1987249"/></svg>
<span class="downloadListItemText">MacOS</span>
</li>
</ul>


<div class="downloadContentList" style="overflow: hidden ">
<div class="downloadContentListItem">
Silly
</div>
<div class="downloadContentListItem">
Silly2
</div>
<div class="downloadContentListItem">
Silly3
</div>
</div>
</div>
</div>
</main>
</body>
</html>
232 changes: 232 additions & 0 deletions public_html/download/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,232 @@
body {
background-color: var(--background);
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
overflow-y: scroll;
overflow-x: hidden;
}

.main {
background-color: var(--background-themed);
width: 100%;
height: auto;
min-height: 100vh;
overflow-x: hidden;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
position: relative;
z-index: 2;
}

.content {
/*background-color: var(--accent1);*/
width: 1000px;
height: 500px;
margin: 6.9rem 0 1.7rem 0;
z-index: 2;
}

.warning {
border-color: #f85149;
border-radius: 4px;
border-width: 2px;
border-style: solid;
width: 100%;
height: 70px;
/*background-color: var(--accent1);*/
background: rgba(248, 81, 73, 0.1);
margin-bottom: 10px;
padding-left: 10px;
}

.warningHeader {
display: flex;
padding-top: 5px;
align-items: center;
}

.warningHeaderIcon {
/*width: 18px;*/
/*height: 18px;*/
/*fill: #fa574f;*/
}

.warningHeaderText {
font-weight: bold;
font-size: 1.2rem;
color: #fa574f;
padding-left: 6px;
}

.warningContent {
display: flex;
padding-top: 8px;
font-weight: bold;
}

.download {
background-color: var(--accent1);
width: 100%;
height: 100%;
border-radius: 4px;
}

.downloadList {
height: 50px;
width: 100%;
/*background-color: var(--accent2);*/
border-radius: 4px 4px 0 0;
box-shadow: rgba(0, 0, 0, 0.03) 0.06rem 0.06rem 0.1rem;
display: flex;
flex-direction: row;
justify-content: center;
list-style: none;
}

.downloadList .downloadListSelected {
background-color: var(--accent2D);
}
.downloadList .downloadListSelected:hover {
background-color: var(--accent2DH);
}

.downloadListItem {
flex-grow: 1;
border-radius: 4px 4px 0 0;
background-color: var(--accent2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.downloadListItem:hover {
background-color: var(--accent2H);
}


.downloadListItemIcon {
/*height: 22px;*/
/*fill: white;*/
}

.downloadListItemText {
padding-left: 6px;
font-size: 1rem;
font-weight: 500;
height: 22px;
display: flex;
flex-wrap: wrap;
align-content: center;
}


.downloadContentList {
display: flex;
overflow: hidden;
transition: all ease-in 0.8s;
position: relative;
width: 100%;
}

.downloadContentListItem {
position: static;
width: 1000px;
padding-right: 1000px;
}







.background {
position: fixed;
top: 0;
transform: rotate(80deg);
margin-top: 10%;
right: 0;
}


.backgroundPlane1, .backgroundPlane2 {
position: fixed;
transition: margin 0.5s ease;
width: 160rem;
height: 140rem;
margin-left: 22rem;
margin-top: -16rem;
transform-origin: 50% 48%;
border-radius: 43%;
top: 3%;
left: 10%;
}

.backgroundPlane1 {
animation: rotate1 21000ms infinite linear;
background: var(--main1);
}

.backgroundPlane2 {
animation: rotate2 21000ms infinite linear;
background: var(--main2);
}

@keyframes rotate1 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@keyframes rotate2 {
from {
transform: rotate(30deg);
}
to {
transform: rotate(390deg);
}
}








@media screen and (max-width: 1150px) {
.mainBackground1, .mainBackground2 {
margin-left: 32rem;
}
}

/* top menu switch */
@media screen and (max-width: 780px) {
.content {
margin-left: 1rem;
}
}


@media screen and (max-width: 600px) {
.mainBackground1, .mainBackground2 {
margin-left: 50rem;
}
}

/* most phones... i think? (hope) */
@media (min-height: 520px) and (max-width: 460px) {
.mainBackground {
margin-top: 0;
}
}

0 comments on commit 7f8c88c

Please sign in to comment.