2024-04-18 13:19:40 +00:00
<!doctype html>
2024-04-17 02:11:19 +00:00
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >
< title > RetroDECK< / title >
2024-04-18 13:19:40 +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.">
2024-04-17 02:11:19 +00:00
< 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 = "" >
2024-04-18 13:19:40 +00:00
< 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.">
2024-04-17 02:11:19 +00:00
< link rel = "apple-touch-icon" type = "image/png" sizes = "180x180" href = "assets/img/icon_circle_2_180x180.png" >
2024-04-18 14:08:06 +00:00
< 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" >
2024-04-18 13:19:40 +00:00
2024-04-17 02:11:19 +00:00
< 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" >
2024-04-18 13:19:40 +00:00
< 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" >
2024-04-17 02:11:19 +00:00
< / head >
< body >
2024-04-18 16:22:51 +00:00
<!-- Navbar -->
2024-04-18 13:19:40 +00:00
< nav class = "navbar navbar-expand-lg bg-dark sticky-top" data-bs-theme = "dark" >
2024-04-19 02:16:38 +00:00
< div class = " container" >
2024-04-18 13:19:40 +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 13:19:40 +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" >
2024-06-13 13:50:24 +00:00
< a class = "nav-link" href = "#feature-section" > Features< / a >
2024-04-18 13:19:40 +00:00
< / 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 >
2024-04-18 16:22:51 +00:00
< li >
< a class = "dropdown-item" href = "https://github.com/XargonWan/RetroDECK-cooker/"
target="_blank" rel="noopener noreferrer">
Cooker
< / a >
< / li >
2024-04-18 13:19:40 +00:00
< li >
< a class = "dropdown-item" href = "https://repo.retrodeck.net/Xargon/RetroDECK"
target="_blank" rel="noopener noreferrer">
Gitea
< / a >
< / li >
< / ul >
< / li >
2024-04-17 02:11:19 +00:00
< / ul >
< / div >
< / div >
2024-04-18 13:19:40 +00:00
< / nav >
2024-04-18 16:22:51 +00:00
<!-- End Navbar -->
2024-04-18 13:19:40 +00:00
2024-04-18 16:22:51 +00:00
<!-- Main Content -->
< main class = "container mt-4 mb-4" >
2024-04-18 14:08:06 +00:00
2024-04-19 11:38:06 +00:00
<!-- <div class="row">
2024-04-19 12:06:02 +00:00
< div class = "col" id = "big-logo" >
2024-04-19 17:08:43 +00:00
< img class = "img-fluid p-4" src = "assets/logos/logo_unstacked.svg" >
2024-04-19 02:51:05 +00:00
< / div >
2024-04-19 11:38:06 +00:00
< / div > -->
2024-04-19 02:51:05 +00:00
2024-04-18 16:22:51 +00:00
<!-- Lead Jumbotron -->
< div class = "p-2 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin" >
< div class = "container-fluid py-5" >
2024-04-19 11:38:06 +00:00
2024-04-19 12:06:02 +00:00
<!-- <div class="row">
2024-04-19 11:38:06 +00:00
< img class = "img-fluid p-4" src = "assets/logos/logo_unstacked.svg" >
2024-04-19 12:06:02 +00:00
< / div > -->
2024-04-19 11:38:06 +00:00
< div class = "row align-items-center" >
< div class = "col-md-8" >
2024-04-19 15:01:06 +00:00
< h1 class = "display-md-5 fw-bold" > Your all-in-one emulation package for the Steam Deck< / h1 >
< p class = "fs-md-4" >
2024-04-19 11:38:06 +00:00
Powered by < a target = "_blank" rel = "noopener noreferrer" href = "https://es-de.org/" > ES-DE< / a > ,
RetroDECK combines all of the best open-source emulators into a single application.
2024-04-19 12:06:02 +00:00
Pair that with a best-in-class Steam Deck controller configuration, and you'll be in retro
gaming
2024-04-19 11:38:06 +00:00
paradise.< / a >
< / p >
< / div >
2024-04-23 11:23:22 +00:00
< div class = "col-md-4 text-center" >
2024-04-23 16:16:44 +00:00
<!-- <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 > -->
2024-04-23 11:23:22 +00:00
< a type = "button" class = "btn btn-dark align-center" target = "_blank" rel = "noopener noreferrer"
2024-04-19 22:16:28 +00:00
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
2024-04-19 11:38:06 +00:00
< / a >
< / div >
< / div >
2024-04-17 02:11:19 +00:00
< / div >
2024-04-18 16:22:51 +00:00
< / div >
<!-- End Jumbotron -->
2024-04-18 13:19:40 +00:00
2024-04-18 16:22:51 +00:00
<!-- Screenshot Carousel -->
2024-04-19 02:51:05 +00:00
< div class = "row" >
2024-04-19 12:06:02 +00:00
< div class = "col" >
2024-04-19 15:01:06 +00:00
< div id = "screenshotCarousel" class = "carousel carousel-fade slide mb-4 position-relative"
data-bs-ride="carousel">
2024-04-19 12:06:02 +00:00
< div class = "carousel-inner" id = "deck-carousel" >
2024-04-19 02:51:05 +00:00
< div class = "carousel-item active" >
2024-04-26 16:54:33 +00:00
< img src = "assets/screens/small/screen01.png" class = "d-block w-100 rounded-3"
2024-04-19 02:51:05 +00:00
alt="The RetroDECK logo displayed on a Steam Deck">
< / div >
< div class = "carousel-item" >
2024-04-26 16:54:33 +00:00
< img src = "assets/screens/small/screen02.png" class = "d-block w-100 rounded-3"
2024-04-19 02:51:05 +00:00
alt="The RetroDECK icon visible in a Steam Library">
< / div >
< div class = "carousel-item" >
2024-04-26 16:54:33 +00:00
< img src = "assets/screens/small/screen03.png" class = "d-block w-100 rounded-3"
2024-04-19 02:51:05 +00:00
alt="Steam Deck quick settings in the foreground with the RetroDECK interface behind it">
< / div >
< div class = "carousel-item" >
2024-04-26 16:54:33 +00:00
< img src = "assets/screens/small/screen04.png" class = "d-block w-100 rounded-3"
2024-04-19 02:51:05 +00:00
alt="One of the ES-DE Themes with SEGA Genesis visible">
< / div >
< div class = "carousel-item" >
2024-04-26 16:54:33 +00:00
< img src = "assets/screens/small/screen05.png" class = "d-block w-100 rounded-3"
2024-04-19 02:51:05 +00:00
alt="Sonic the Hedgehog 2 (SEGA Genesis) on the Steam Deck">
< / div >
< div class = "carousel-item" >
2024-04-26 16:54:33 +00:00
< img src = "assets/screens/small/screen06.png" class = "d-block w-100 rounded-3"
2024-04-19 02:51:05 +00:00
alt="A list of TurboGrafx games in the ES-DE frontend">
< / div >
< / div >
2024-04-19 12:06:02 +00:00
2024-04-26 16:54:33 +00:00
< img class = "img-fluid mb-4 rounded-3" id = "screen-blank" src = "assets/screens/small/blank.png" >
2024-04-19 12:06:02 +00:00
< button class = "carousel-control-prev z-2" type = "button" data-bs-target = "#screenshotCarousel"
2024-04-19 02:51:05 +00:00
data-bs-slide="prev">
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
< span class = "visually-hidden" > Previous< / span >
< / button >
2024-04-19 12:06:02 +00:00
< button class = "carousel-control-next z-2" type = "button" data-bs-target = "#screenshotCarousel"
2024-04-19 02:51:05 +00:00
data-bs-slide="next">
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
< span class = "visually-hidden" > Next< / span >
< / button >
2024-04-18 13:19:40 +00:00
< / div >
2024-04-18 14:08:06 +00:00
< / div >
2024-04-19 12:06:02 +00:00
< / div >
2024-04-18 16:22:51 +00:00
<!-- End Carousel -->
2024-04-18 13:19:40 +00:00
2024-06-13 13:50:24 +00:00
<!-- Feature Jumbotron -->
< div id = "feature-section" class = "p-md-2 mb-md-4 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin" >
< div class = "container-fluid py-md-5 py-3" >
< 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 >
<!-- End Jumbotron -->
<!-- Feature Section -->
< div class = "p-md-2 p-1 mb-4 rounded-3 jumbotron" id = "feature-jumbotron" >
< div class = "container-fluid" >
<!-- Theme based on https://github.com/anthonycaccese/art - book - next - es - de -->
< div class = "row" >
<!-- Left Column -->
< div class = "col-md-4" id = "left-feature-column" >
<!-- Logo Header -->
< div class = "row p-3 rounded-3 d-none d-md-block" id = "feature-logo-container" >
< div class = "col" >
< img class = "img-fluid" src = "assets/logos/logo_stacked_esde.png" >
< / div >
< / div >
<!-- Feature List -->
< 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 -->
< div class = "col feature-list-item gradient-spin my-gradient rounded-3 m-0"
id="active-feature-item">
Pick Up and Play
< / div >
<!-- Feature 2 -->
< div class = "col feature-list-item gradient-spin my-gradient rounded-3 m-0" id = "" >
Rich Metadata & Cover Art
< / div >
<!-- Feature 3 -->
< div class = "col feature-list-item gradient-spin my-gradient rounded-3 m-0" id = "" >
Custom Radial Menu
< / div >
<!-- Feature 4 -->
< div class = "col feature-list-item gradient-spin my-gradient rounded-3 m-0" id = "" >
External Controller Support
< / div >
<!-- Feature 5 -->
< div class = "col feature-list-item gradient-spin my-gradient rounded-3 m-0" id = "" >
Portable Installation
< / div >
<!-- Feature 6 -->
< div class = "col feature-list-item gradient-spin my-gradient rounded-3 m-0" id = "" >
RetroAchievement Support
< / div >
< / div >
< / div >
<!-- End Left Column -->
<!-- Right Column -->
< 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 -->
< div class = "feature-detail-container rounded-3 p-3" id = "active-feature-detail" >
<!-- Image/Video Container -->
< div class = "row" id = "feature-media-container" >
< div class = "col" >
< img class = "img-fluid rounded-3" src = "assets/screens/small/screen01.png" >
< / div >
< / div >
<!-- Feature Detail Container -->
< div class = "row py-2 rounded-3 feature-text-container" >
< div class = "col" >
< h4 > Don't waste time on setup< / h4 >
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).
< / div >
< / div >
< / div >
<!-- Feature 2 -->
< 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/screen02.png" >
< / div >
< / div >
<!-- Feature Detail Container -->
< div class = "row py-2 rounded-3 feature-text-container" >
< div class = "col" >
< 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.
< / div >
< / div >
< / div >
<!-- Feature 3 -->
< 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/screen03.png" >
< / div >
< / div >
<!-- 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 >
<!-- Feature Detail Container -->
< div class = "row py-2 rounded-3 feature-text-container" >
< div class = "col" >
< h4 > Move to a new device< / h4 >
If you get a new Steam Deck or upgrade the internal storage, moving your RetroDECK installation is easy.
Just install RetroDECK on the new device and copy your existing folder over.
< / div >
< / div >
< / div >
<!-- Feature 6 -->
< 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 > Show off your skills< / h4 >
If you have a RetroAchievements account, you can connect it to RetroDECK and track your progress.
You can sign up < a target = "_blank" rel = "noopener noreferrer"
href="https://retroachievements.org/">here.< / a >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- End Right Column -->
< / div >
< / div >
< / div >
<!-- End Feature Section -->
2024-04-18 16:22:51 +00:00
<!-- Donate Jumbotron -->
< div class = "p-2 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin" >
< div class = "container-fluid py-4" >
2024-04-19 11:38:06 +00:00
< div class = "row" >
2024-04-19 12:06:02 +00:00
2024-04-19 11:38:06 +00:00
< / div >
< div class = "row align-items-center" >
< div class = "col-md-8" >
2024-04-19 15:01:06 +00:00
< h1 class = "display-md-5 fw-bold" > We can't do this alone< / h1 >
< p class = "fs-md-4" >
2024-04-19 11:38:06 +00:00
RetroDECK is run by volunteers.
2024-04-19 12:06:02 +00:00
If you appreciate our work, please consider code contribution or donating to us or our
sibling
2024-04-19 11:38:06 +00:00
projects.
< / p >
< / div >
< div class = "col-md-4 text-center" >
2024-04-19 15:01:06 +00:00
< a class = "btn btn-dark btn-lg align-center" type = "button" target = "_blank"
rel="noopener noreferrer"
2024-04-19 11:38:06 +00:00
href="https://retrodeck.readthedocs.io/en/latest/wiki_about/donations-licenses/">
2024-04-23 16:16:44 +00:00
< i class = "bi bi-balloon-heart pe-2" > < / i > Learn More
2024-04-19 11:38:06 +00:00
< / a >
< / div >
< / div >
2024-04-17 02:11:19 +00:00
< / div >
2024-04-18 16:22:51 +00:00
< / div >
<!-- End Jumbotron -->
2024-04-18 15:01:27 +00:00
2024-04-18 16:22:51 +00:00
< / main >
<!-- End Main Content -->
2024-04-18 15:01:27 +00:00
2024-04-18 16:22:51 +00:00
<!-- Footer -->
2024-04-23 11:21:15 +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 11:21:15 +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-19 11:38:06 +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 -->
2024-04-18 15:01:27 +00:00
2024-04-18 13:19:40 +00:00
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous">< / script >
2024-04-18 15:01:27 +00:00
< script src = "scripts/gradient.js" > < / script >
2024-06-13 13:50:24 +00:00
< script src = "scripts/features.js" > < / script >
2024-04-17 02:11:19 +00:00
< / body >
2024-04-18 13:19:40 +00:00
< / html >
