mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-25 08:05:38 +00:00
Add features page
- lots of stuff
This commit is contained in:
Adam Iannazzone
parent
b69426becc
commit
e992c3743c
|
|
@ -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;
|
||||||
|
|
@ -69,3 +55,20 @@ footer {
|
||||||
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
269
features.html
|
|
@ -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>
|
||||||
|
|
@ -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
20
scripts/features.js
Normal 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'
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue