Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-24 23:55:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add features page

Browse source 
- lots of stuff
This commit is contained in:
Adam Iannazzone 2024-04-23 12:16:44 -04:00
parent b69426becc
commit e992c3743c
5 changed files with 203 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View file

Binary file not shown.

31
css/style.css
View file

@ -23,20 +23,6 @@ footer {
font-family: "Source Sans 3", sans-serif; font-family: "Source Sans 3", sans-serif;
} }
/* #flathub-button {
background: url('https://flathub.org/api/badge?locale=en');
background-size: cover;
} */
/* .btn-dark {
background-color: #111;
}
.btn:hover, button {
background-color: #222;
border: 1px white solid;
} */
.jumbotron, .card-header { .jumbotron, .card-header {
color: white; color: white;
border: 1px white solid; border: 1px white solid;
@ -68,4 +54,21 @@ footer {
z-index: 1; z-index: 1;
top: 0; top: 0;
left: 0; left: 0;
}
.row.feature-list-item {
padding: 0.5rem;
background: #333;
}
.row.feature-list-item#active-feature-item {
background: transparent;
}
.feature-detail-container {
display: none;
}
.feature-detail-container#active-feature-detail {
display: inherit;
} }

269
features.html
View file

@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>RetroDECK Features</title> <title>RetroDECK</title>
<meta name="twitter:description" <meta name="twitter:description"
content="RetroDECK is a polished and beginner-friendly environment for playing your retro games on Steam Deck, available with just one click from the Discover app."> content="RetroDECK is a polished and beginner-friendly environment for playing your retro games on Steam Deck, available with just one click from the Discover app.">
<meta property="og:image" content="assets/img/RetroDeck%20Wallpaper.png"> <meta property="og:image" content="assets/img/RetroDeck%20Wallpaper.png">
@ -32,7 +32,7 @@
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-dark sticky-top" data-bs-theme="dark"> <nav class="navbar navbar-expand-lg bg-dark sticky-top" data-bs-theme="dark">
<div class="container"> <div class=" container">
<a class="navbar-brand" href="index.html"> <a class="navbar-brand" href="index.html">
<img src="assets/icons/squircle-icon.svg" height="40"> <img src="assets/icons/squircle-icon.svg" height="40">
</a> </a>
@ -102,135 +102,189 @@
<!-- End Navbar --> <!-- End Navbar -->
<!-- Main Content --> <!-- Main Content -->
<main class="container mt-4 mb-4" id="features"> <main class="container mt-4 mb-4">
<!-- Lead Jumbotron --> <!-- Lead Jumbotron -->
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin"> <div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin">
<div class="container-fluid py-5"> <div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Why RetroDECK?</h1>
<!-- <div class="row">
<img class="img-fluid p-4" src="assets/logos/logo_unstacked.svg">
</div> -->
<div class="row align-items-center">
<div class="col-md-8">
<h1 class="display-md-5 fw-bold">It's dangerous to go alone! Take these.</h1>
<p class="fs-md-4">
With more features than you can count, RetroDECK has you covered.
We're adding more with every release, so be sure to check out the Wiki for the latest
updates.
</p>
</div>
<div class="col-md-4 text-center">
<a class="btn btn-dark btn-lg align-center" type="button" target="_blank"
rel="noopener noreferrer" href="https://retrodeck.readthedocs.io/en/latest/">
<i class="bi bi-mortarboard pe-2"></i>Full Documentation
</a>
</div>
</div>
</div> </div>
</div> </div>
<!-- End Jumbotron --> <!-- End Jumbotron -->
<!-- Card Row --> <!-- Feature Section -->
<div class="row pb-4 gy-4"> <div class="p-2 mb-4 rounded-3 jumbotron my-gradient gradient-spin">
<div class="col-sm d-flex align-items-stretch"> <div class="container-fluid">
<div class="card px-0"> <!-- Theme based on https://github.com/anthonycaccese/art-book-next-es-de-->
<div class="card-header">
<h3><i class="bi bi-play-circle"></i> Pick Up & Play</h3>
</div>
<div class="card-body">
No configuration is needed to start. You provide the games and we provide the play.
</div>
</div>
</div>
<div class="col-sm d-flex align-items-stretch">
<div class="card px-0">
<div class="card-header">
<h3><i class="bi bi-lightning-charge"></i> Quick Resume</h3>
</div>
<div class="card-body">
Quit your game and pick it up exactly where you left off.
</div>
</div>
</div>
<div class="col-sm d-flex align-items-stretch">
<div class="card px-0">
<div class="card-header">
<h3><i class="bi bi-rewind-circle"></i> Pick Up & Play</h3>
</div>
<div class="card-body">
Go back in time and retry without having to restart your game or skip over that long conversation.
</div>
</div>
</div>
</div>
<!-- End Card Row -->
<!-- Card Row --> <div class="row">
<div class="row pb-4 gy-4"> <!-- Left Column -->
<div class="col-sm d-flex align-items-stretch"> <div class="col-4 rounded-3" id="left-feature-column">
<div class="card px-0">
<div class="card-header">
<h3><i class="bi bi-tools"></i> The Configurator</h3>
</div>
<div class="card-body">
A super powerful multi-tool interface that allows you to have quick access to the advanced functions and tweak them to your desire.
</div>
</div>
</div>
<div class="col-sm d-flex align-items-stretch">
<div class="card px-0">
<div class="card-header">
<h3><i class="bi bi-box-seam"></i> Flatpak</h3>
</div>
<div class="card-body">
Everything is contained within one application and not over your entire filesystem. Only one place to look and one place to backup!
</div>
</div>
</div>
<div class="col-sm d-flex align-items-stretch">
<div class="card px-0">
<div class="card-header">
<h3><i class="bi bi-steam"></i> Keep your existing OS</h3>
</div>
<div class="card-body">
With RetroDECK there is no need to replace your existing Linux / SteamOS to get a all-in-one retro gaming solution. Install it on what you already have.
</div>
</div>
</div>
</div>
<!-- End Card Row -->
<!-- Card Row --> <!-- Logo Header -->
<div class="row pb-4 gy-4"> <div class="row p-3" id="feature-logo-container">
<div class="col-sm d-flex align-items-stretch"> <div class="col">
<div class="card px-0"> <img class="img-fluid" src="/assets/logos/logo_stacked_esde.png">
<div class="card-header"> </div>
<h3><i class="bi bi-dpad"></i> Custom Hotkeys</h3> </div>
<!-- Feature List -->
<div class="h5" id="feature-list">
<div class="row feature-list-item" id="active-feature-item">
<div class="col">
Pick Up and Play
</div>
</div>
<div class="row feature-list-item" id="">
<div class="col">
Quick Resume
</div>
</div>
<div class="row feature-list-item" id="">
<div class="col">
Rewind & Fast Forward
</div>
</div>
<div class="row feature-list-item" id="">
<div class="col">
Configurator
</div>
</div>
</div>
</div> </div>
<div class="card-body"> <!-- End Left Column -->
Features a in-depth global hotkey system with radial menus in addition to button combos via Steam Input.
</div> <!-- Right Column -->
</div> <div class="col-8" id="feature-detail-column">
</div> <div class="feature-detail-container" id="active-feature-detail">
<div class="col-sm d-flex align-items-stretch"> <!-- Image/Video Container -->
<div class="card px-0"> <div class="row" id="feature-media-container">
<div class="card-header"> <div class="col">
<h3><i class="bi bi-file-earmark-binary"></i> Cheats Enabled</h3> <img class="img-fluid rounded-3" src="assets/screens_old/screen01.jpeg">
</div> </div>
<div class="card-body"> </div>
Can't surpass THAT point? Don't want to farm? Enable cheats and play smoothly.
</div> <!-- Feature Detail Container -->
</div> <div class="row rounded-3 py-2 m-1" id="feature-details-container">
</div> <div class="col">
<div class="col-sm d-flex align-items-stretch"> <h4>Don't waste time on setup</h4>
<div class="card px-0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
<div class="card-header"> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
<h3><i class="bi bi-database-down"></i> Metadata Import</h3> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
</div> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
<div class="card-body"> pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
From the ES-DE frontend you can pull information to your library to create a beautiful user experience from various sources, that fits your style. deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="feature-detail-container" id="">
<!-- Image/Video Container -->
<div class="row" id="feature-media-container">
<div class="col">
<img class="img-fluid rounded-3" src="assets/screens_old/screen02.jpeg">
</div>
</div>
<!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1" id="feature-details-container">
<div class="col">
<h4>Don't waste time on setup #2</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="feature-detail-container" id="">
<!-- Image/Video Container -->
<div class="row" id="feature-media-container">
<div class="col">
<img class="img-fluid rounded-3" src="assets/screens_old/screen03.jpeg">
</div>
</div>
<!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1" id="feature-details-container">
<div class="col">
<h4>Don't waste time on setup #3</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="feature-detail-container" id="">
<!-- Image/Video Container -->
<div class="row" id="feature-media-container">
<div class="col">
<img class="img-fluid rounded-3" src="assets/screens_old/screen04.jpeg">
</div>
</div>
<!-- Feature Detail Container -->
<div class="row rounded-3 py-2 m-1" id="feature-details-container">
<div class="col">
<h4>Don't waste time on setup #4</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div> </div>
<!-- End Right Column -->
</div> </div>
</div> </div>
</div> </div>
<!-- End Card Row --> <!-- End Feature Section -->
</main> </main>
<!-- End Main Content --> <!-- End Main Content -->
<!-- Footer --> <!-- Footer -->
<footer class="container-fluid p-2"> <footer class="container-fluid pt-2 pb-2">
<div class="row justify-content-betweetn"> <div class="row justify-content-betweetn small">
<div class="col-md"> <div class="col float-start align-content-end">
Created by <a target="_blank" rel="noopener noreferrer" href="https://github.com/jiannazzone">Adam Created by <a target="_blank" rel="noopener noreferrer" href="https://github.com/jiannazzone">Adam
Iannazzone</a> and the RetroDECK team. Iannazzone</a> and the RetroDECK team.
</div> </div>
<div class="col-md"> <div class="col align-content-end">
<div class="form-check form-switch float-end"> <div class="form-check form-switch float-end">
<input class="form-check-input" id="reduce-motion-switch" type="checkbox" role="switch" id="reduceMotionSwitch" onchange="reduceMotion()"> <input class="form-check-input" id="reduce-motion-switch" type="checkbox" role="switch"
id="reduceMotionSwitch" onchange="reduceMotion()">
<label class="form-check-label" for="reduceMotionSwitch">Reduce motion</label> <label class="form-check-label" for="reduceMotionSwitch">Reduce motion</label>
</div> </div>
</div> </div>
@ -242,6 +296,7 @@
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="scripts/gradient.js"></script> <script src="scripts/gradient.js"></script>
<script src="scripts/features.js"></script>
</body> </body>
</html> </html>

5
index.html
View file

@ -130,6 +130,9 @@
</p> </p>
</div> </div>
<div class="col-md-4 text-center"> <div class="col-md-4 text-center">
<!-- <div class="m-1 bg-dark p-2 rounded-3" style="--bs-bg-opacity: .8;">
<img class="img-fluid" src="assets/logos/rd-esde-logo.svg">
</div> -->
<a type="button" class="btn btn-dark align-center" target="_blank" rel="noopener noreferrer" <a type="button" class="btn btn-dark align-center" target="_blank" rel="noopener noreferrer"
href="https://flathub.org/apps/details/net.retrodeck.retrodeck"> href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
<img class="pe-2" src="assets/logos/flathub.svg" width="32" height="32">Download on Flathub <img class="pe-2" src="assets/logos/flathub.svg" width="32" height="32">Download on Flathub
@ -209,7 +212,7 @@
<a class="btn btn-dark btn-lg align-center" type="button" target="_blank" <a class="btn btn-dark btn-lg align-center" type="button" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
href="https://retrodeck.readthedocs.io/en/latest/wiki_about/donations-licenses/"> href="https://retrodeck.readthedocs.io/en/latest/wiki_about/donations-licenses/">
<i class="bi bi-balloon-heart"></i> Learn More <i class="bi bi-balloon-heart pe-2"></i>Learn More
</a> </a>
</div> </div>
</div> </div>

20
scripts/features.js Normal file
View file

@ -0,0 +1,20 @@
featureTitles = document.getElementsByClassName('feature-list-item');
featureDetails = document.getElementsByClassName('feature-detail-container');
let currentFeature = 0;
for (let i = 0; i < featureTitles.length; i++) {
featureTitles[i].addEventListener('click', function () {
updateActiveFeature(i);
}, false)
}
function updateActiveFeature(i) {
currentFeature = i;
for (let j = 0; j < featureTitles.length; j++) {
featureTitles[j].removeAttribute('id');
featureDetails[j].removeAttribute('id');
}
featureTitles[i].id = 'active-feature-item';
featureDetails[i].id = 'active-feature-detail'
}