2024-04-18 16:22:51 +00:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >
2024-04-23 16:16:44 +00:00
< title > RetroDECK< / title >
2024-04-18 16:22:51 +00:00
< 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.">
< meta property = "og:image" content = "assets/img/RetroDeck%20Wallpaper.png" >
< meta name = "twitter:title" content = "RetroDECK" >
< meta name = "twitter:card" content = "summary" >
< meta property = "og:type" content = "website" >
< meta name = "twitter:image" content = "" >
< meta name = "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.">
< link rel = "apple-touch-icon" type = "image/png" sizes = "180x180" href = "assets/img/icon_circle_2_180x180.png" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "assets/icons/icon_circle_16x16.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "assets/icons/icon_circle_1_32x32.png" >
< link rel = "icon" type = "image/png" sizes = "180x180" href = "assets/icons/icon_circle_2_180x180.png" >
< link rel = "icon" type = "image/png" sizes = "192x192" href = "assets/icons/icon_circle_3_192x192.png" >
< link rel = "icon" type = "image/png" sizes = "512x512" href = "assets/icons/icon_circle_4_512x512.png" >
< link rel = "stylesheet" href = "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" >
< link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" >
< link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel = "stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
< link rel = "stylesheet" href = "css/style.css" >
< / head >
< body >
<!-- Navbar -->
< nav class = "navbar navbar-expand-lg bg-dark sticky-top" data-bs-theme = "dark" >
2024-04-23 16:16:44 +00:00
< div class = " container" >
2024-04-18 16:22:51 +00:00
< a class = "navbar-brand" href = "index.html" >
2024-04-19 02:18:13 +00:00
< img src = "assets/icons/squircle-icon.svg" height = "40" >
2024-04-18 16:22:51 +00:00
< / a >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse" id = "navbarNavDropdown" >
< ul class = "navbar-nav" >
< li class = "nav-item" >
< a class = "nav-link active" href = "features.html" > Features< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" target = "_blank" rel = "noopener noreferrer"
href="https://retrodeck.readthedocs.io/en/latest/">Wiki< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" target = "_blank" rel = "noopener noreferrer"
href="https://retrodeck.readthedocs.io/en/latest/blog/">Blog< / a >
< / li >
< li class = "nav-item dropdown" >
< a class = "nav-link dropdown-toggle" href = "#" role = "button" data-bs-toggle = "dropdown"
aria-expanded="false">
Social
< / a >
< ul class = "dropdown-menu" >
< li > < a class = "dropdown-item" target = "_blank" rel = "noopener noreferrer"
href="https://discord.gg/WDc5C9YWMx">Discord< / a > < / li >
< li > < a class = "dropdown-item" target = "_blank" rel = "noopener noreferrer"
href="https://matrix.to/#/#retrodeck:matrix.org">Matrix< / a > < / li >
< li > < a class = "dropdown-item" target = "_blank" rel = "noopener noreferrer"
href="https://www.reddit.com/r/RetroDeck/">Reddit< / a > < / li >
< li > < a class = "dropdown-item" target = "_blank" rel = "noopener noreferrer"
href="https://lemmy.zip/c/retrodeck">Lemmy< / a > < / li >
< / ul >
< / li >
< li class = "nav-item dropdown" >
< a class = "nav-link dropdown-toggle" href = "#" role = "button" data-bs-toggle = "dropdown"
aria-expanded="false">
Source Code
< / a >
< ul class = "dropdown-menu" >
< li >
< a class = "dropdown-item" href = "https://github.com/XargonWan/RetroDECK/tree/main"
target="_blank" rel="noopener noreferrer">
Github
< / a >
< / li >
< li >
< a class = "dropdown-item" href = "https://github.com/XargonWan/RetroDECK-cooker/"
target="_blank" rel="noopener noreferrer">
Cooker
< / a >
< / li >
< li >
< a class = "dropdown-item" href = "https://repo.retrodeck.net/Xargon/RetroDECK"
target="_blank" rel="noopener noreferrer">
Gitea
< / a >
< / li >
< / ul >
< / li >
< / ul >
< / div >
< / div >
< / nav >
<!-- End Navbar -->
<!-- Main Content -->
2024-04-23 16:16:44 +00:00
< main class = "container mt-4 mb-4" >
2024-04-18 16:22:51 +00:00
<!-- Lead Jumbotron -->
2024-04-24 13:53:04 +00:00
< div class = "p-md-2 mb-md-4 mb-2 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin" >
< div class = "container-fluid py-md-5 py-3" >
2024-04-23 16:16:44 +00:00
< 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 >
2024-04-18 17:12:11 +00:00
< / div >
2024-04-23 16:16:44 +00:00
< 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 >
2024-04-18 17:12:11 +00:00
< / div >
< / div >
< / div >
< / div >
2024-04-23 16:16:44 +00:00
<!-- End Jumbotron -->
<!-- Feature Section -->
2024-04-24 13:53:04 +00:00
< div class = "p-md-2 p-1 rounded-3 jumbotron" id = "feature-jumbotron" >
2024-04-23 16:16:44 +00:00
< div class = "container-fluid" >
<!-- Theme based on https://github.com/anthonycaccese/art - book - next - es - de -->
< div class = "row" >
2024-04-24 14:52:30 +00:00
2024-04-23 16:16:44 +00:00
<!-- Left Column -->
2024-04-24 13:53:04 +00:00
< div class = "col-md-4" id = "left-feature-column" >
2024-04-23 16:16:44 +00:00
<!-- Logo Header -->
2024-04-24 16:45:08 +00:00
< div class = "row p-3 rounded-3 d-none d-md-block" id = "feature-logo-container" >
2024-04-23 16:16:44 +00:00
< div class = "col" >
2024-04-23 16:18:38 +00:00
< img class = "img-fluid" src = "assets/logos/logo_stacked_esde.png" >
2024-04-23 16:16:44 +00:00
< / div >
< / div >
<!-- Feature List -->
2024-05-07 14:00:14 +00:00
< div class = "h5 row d-flex flex-md-column align-items-center overflow-x-scroll text-end flex-nowrap text-nowrap" id = "feature-list" >
<!-- Feature 1 -->
2024-04-24 14:52:30 +00:00
< div class = "col feature-list-item gradient-spin my-gradient rounded-3 m-0"
2024-04-23 22:36:24 +00:00
id="active-feature-item">
2024-04-24 14:52:30 +00:00
Pick Up and Play
2024-04-23 16:16:44 +00:00
< / div >
2024-05-07 14:00:14 +00:00
<!-- Feature 2 -->
2024-04-24 14:52:30 +00:00
< div class = "col feature-list-item gradient-spin my-gradient rounded-3 m-0" id = "" >
2024-05-07 14:00:14 +00:00
Rich Metadata & Cover Art
2024-04-23 16:16:44 +00:00
< / div >
2024-05-07 14:00:14 +00:00
<!-- Feature 3 -->
2024-04-24 14:52:30 +00:00
< div class = "col feature-list-item gradient-spin my-gradient rounded-3 m-0" id = "" >
2024-05-07 14:00:14 +00:00
Custom Radial Menu
2024-04-23 16:16:44 +00:00
< / div >
2024-05-07 14:00:14 +00:00
<!-- Feature 4 -->
2024-04-24 14:52:30 +00:00
< div class = "col feature-list-item gradient-spin my-gradient rounded-3 m-0" id = "" >
2024-05-07 14:00:14 +00:00
External Controller Support
< / div >
<!-- Feature 5 -->
< div class = "col feature-list-item gradient-spin my-gradient rounded-3 m-0" id = "" >
BYO Emulator w/Ponzu
< / div >
<!-- Feature 6 -->
< div class = "col feature-list-item gradient-spin my-gradient rounded-3 m-0" id = "" >
RetroAchievement Support
2024-04-23 16:16:44 +00:00
< / div >
< / div >
2024-04-18 17:12:11 +00:00
< / div >
2024-04-23 16:16:44 +00:00
<!-- End Left Column -->
<!-- Right Column -->
2024-05-07 14:00:14 +00:00
< div class = "col-md-8 p-0 p-sm-2 ps-sm-3" id = "feature-detail-column" >
< div class = "my-gradient gradient-spin rounded-3 h-100 pt-0 pt-sm-auto" >
<!-- Feature 1 -->
2024-04-23 22:52:54 +00:00
< div class = "feature-detail-container rounded-3 p-3" id = "active-feature-detail" >
2024-04-23 22:36:24 +00:00
<!-- Image/Video Container -->
< div class = "row" id = "feature-media-container" >
< div class = "col" >
2024-04-26 16:54:33 +00:00
< img class = "img-fluid rounded-3" src = "assets/screens/small/screen01.png" >
2024-04-23 22:36:24 +00:00
< / div >
2024-04-23 16:16:44 +00:00
< / div >
2024-04-23 22:36:24 +00:00
<!-- Feature Detail Container -->
2024-04-24 13:53:04 +00:00
< div class = "row py-2 rounded-3 feature-text-container" >
2024-04-23 22:36:24 +00:00
< div class = "col" >
< h4 > Don't waste time on setup< / h4 >
2024-05-07 14:00:14 +00:00
Once installed, you can start playing with RetroDECK immediately.
No setup wizards or configuration needed (although you can get into the weeds if you want).
2024-04-23 22:36:24 +00:00
< / div >
2024-04-23 16:16:44 +00:00
< / div >
< / div >
2024-05-07 14:00:14 +00:00
<!-- Feature 2 -->
2024-04-23 22:36:24 +00:00
< div class = "feature-detail-container rounded-3 p-3" id = "" >
<!-- Image/Video Container -->
< div class = "row" id = "feature-media-container" >
< div class = "col" >
2024-04-26 16:54:33 +00:00
< img class = "img-fluid rounded-3" src = "assets/screens/small/screen02.png" >
2024-04-23 22:36:24 +00:00
< / div >
2024-04-23 16:16:44 +00:00
< / div >
2024-04-23 22:36:24 +00:00
<!-- Feature Detail Container -->
2024-04-24 13:53:04 +00:00
< div class = "row py-2 rounded-3 feature-text-container" >
2024-04-23 22:36:24 +00:00
< div class = "col" >
2024-05-07 14:00:14 +00:00
< h4 > Browse your games in style< / h4 >
Because RetroDECK is built on top of EmulationStation-DE, your game library will be matched
by ScreenScraper and TheGamesDB. Metadata like cover art, release dates, and summaries will
be automatically downloaded.
2024-04-23 22:36:24 +00:00
< / div >
2024-04-23 16:16:44 +00:00
< / div >
< / div >
2024-05-07 14:00:14 +00:00
<!-- Feature 3 -->
2024-04-23 22:36:24 +00:00
< div class = "feature-detail-container rounded-3 p-3" id = "" >
<!-- Image/Video Container -->
< div class = "row" id = "feature-media-container" >
< div class = "col" >
2024-04-26 16:54:33 +00:00
< img class = "img-fluid rounded-3" src = "assets/screens/small/screen03.png" >
2024-04-23 22:36:24 +00:00
< / div >
2024-04-23 16:16:44 +00:00
< / div >
2024-05-07 14:00:14 +00:00
<!-- Feature Detail Container -->
< div class = "row py-2 rounded-3 feature-text-container" >
< div class = "col" >
< h4 > Access emulator settings without breaking your flow< / h4 >
The custom RetroDECK controller profile makes use of the left touch pad on your Steam Deck.
Just touch it, and a radial menu will appear. Menus are tailored to your current emulator and
include features such as save/load state, upscaling, and more.
< / div >
< / div >
< / div >
<!-- Feature 4 -->
< div class = "feature-detail-container rounded-3 p-3" id = "" >
<!-- Image/Video Container -->
< div class = "row" id = "feature-media-container" >
< div class = "col" >
< img class = "img-fluid rounded-3" src = "assets/screens/small/screen04.png" >
< / div >
< / div >
<!-- Feature Detail Container -->
< div class = "row py-2 rounded-3 feature-text-container" >
< div class = "col" >
< h4 > Use your official and unofficial controllers< / h4 >
Use your first-party Xbox, PlayStation, and Nintendo controllers, as well as
many 3rd party controllers. Guitar Hero controllers? ✅< br >
LEGO Dimensions ToyPad? ✅< br >
More supported controllers and how to implement them can be found in the
< a target = "_blank" rel = "noopener noreferrer"
href="https://retrodeck.readthedocs.io/en/latest/">Wiki< / a >
< / div >
< / div >
< / div >
<!-- Feature 5 -->
< div class = "feature-detail-container rounded-3 p-3" id = "" >
<!-- Image/Video Container -->
< div class = "row" id = "feature-media-container" >
< div class = "col" >
< img class = "img-fluid rounded-3" src = "assets/screens/small/screen04.png" >
< / div >
< / div >
2024-04-23 22:36:24 +00:00
<!-- Feature Detail Container -->
2024-04-24 13:53:04 +00:00
< div class = "row py-2 rounded-3 feature-text-container" >
2024-04-23 22:36:24 +00:00
< div class = "col" >
2024-04-24 13:53:04 +00:00
< h4 > Don't waste time on setup< / h4 >
2024-04-23 22:36:24 +00:00
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 >
2024-04-23 16:16:44 +00:00
< / div >
< / div >
2024-05-07 14:00:14 +00:00
<!-- Feature 6 -->
2024-04-23 22:36:24 +00:00
< div class = "feature-detail-container rounded-3 p-3" id = "" >
<!-- Image/Video Container -->
< div class = "row" id = "feature-media-container" >
< div class = "col" >
2024-04-26 16:54:33 +00:00
< img class = "img-fluid rounded-3" src = "assets/screens/small/screen04.png" >
2024-04-23 22:36:24 +00:00
< / div >
2024-04-23 16:16:44 +00:00
< / div >
2024-04-23 22:36:24 +00:00
<!-- Feature Detail Container -->
2024-04-24 13:53:04 +00:00
< div class = "row py-2 rounded-3 feature-text-container" >
2024-04-23 22:36:24 +00:00
< div class = "col" >
2024-04-24 13:53:04 +00:00
< h4 > Don't waste time on setup< / h4 >
2024-04-23 22:36:24 +00:00
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 >
2024-04-23 16:16:44 +00:00
< / div >
< / div >
< / div >
2024-04-23 22:34:02 +00:00
2024-04-18 17:12:11 +00:00
< / div >
2024-04-23 16:16:44 +00:00
<!-- End Right Column -->
2024-04-18 17:12:11 +00:00
< / div >
< / div >
< / div >
2024-04-23 16:16:44 +00:00
<!-- End Feature Section -->
2024-04-18 17:12:11 +00:00
2024-04-18 16:22:51 +00:00
< / main >
<!-- End Main Content -->
<!-- Footer -->
2024-04-23 16:16:44 +00:00
< footer class = "container-fluid pt-2 pb-2" >
< div class = "row justify-content-betweetn small" >
< div class = "col float-start align-content-end" >
2024-04-18 16:22:51 +00:00
Created by < a target = "_blank" rel = "noopener noreferrer" href = "https://github.com/jiannazzone" > Adam
Iannazzone< / a > and the RetroDECK team.
< / div >
2024-04-23 16:16:44 +00:00
< div class = "col align-content-end" >
2024-04-18 18:39:22 +00:00
< div class = "form-check form-switch float-end" >
2024-04-23 16:16:44 +00:00
< input class = "form-check-input" id = "reduce-motion-switch" type = "checkbox" role = "switch"
id="reduceMotionSwitch" onchange="reduceMotion()">
2024-04-18 18:39:22 +00:00
< label class = "form-check-label" for = "reduceMotionSwitch" > Reduce motion< / label >
< / div >
< / div >
2024-04-18 16:22:51 +00:00
< / div >
< / footer >
<!-- End Footer -->
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous">< / script >
< script src = "scripts/gradient.js" > < / script >
2024-04-23 16:16:44 +00:00
< script src = "scripts/features.js" > < / script >
2024-04-18 16:22:51 +00:00
< / body >
< / html >
