2024-04-17 02:11:19 +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" >
< title > RetroDECK< / title >
< 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/img/icon_circle_16x16.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "assets/img/icon_circle_1_32x32.png" >
< link rel = "icon" type = "image/png" sizes = "180x180" href = "assets/img/icon_circle_2_180x180.png" >
< link rel = "icon" type = "image/png" sizes = "192x192" href = "assets/img/icon_circle_3_192x192.png" >
< link rel = "icon" type = "image/png" sizes = "512x512" href = "assets/img/icon_circle_4_512x512.png" >
< link rel = "stylesheet" href = "assets/bootstrap/css/bootstrap.min.css" >
< 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 rel = "stylesheet" href = "assets/fonts/fontawesome-all.min.css" >
< link rel = "stylesheet" href = "assets/fonts/font-awesome.min.css" >
< link rel = "stylesheet" href = "assets/fonts/ionicons.min.css" >
< link rel = "stylesheet" href = "assets/fonts/fontawesome5-overrides.min.css" >
< link rel = "stylesheet" href = "assets/css/Features-Clean.css" >
< link rel = "stylesheet" href = "assets/css/Footer-Basic.css" >
< link rel = "stylesheet" href = "assets/css/Header-Blue.css" >
< link rel = "stylesheet" href = "assets/css/Highlight-Blue.css" >
< link rel = "stylesheet" href = "assets/css/Highlight-Clean.css" >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.css" >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css" >
< link rel = "stylesheet" href = "assets/css/Navigation-Clean.css" >
< link rel = "stylesheet" href = "assets/css/Simple-Slider-Simple-Slider.css" >
< / head >
< body >
<!-- Start: Navigation Clean -->
< nav class = "navbar navbar-light navbar-expand-lg sticky-top navigation-clean" >
< div class = "container" > < a class = "navbar-brand" href = "#top" > < img src = "assets/img/logo_unstacked.svg" style = "width: 165px;" > < / a > < button data-bs-toggle = "collapse" class = "navbar-toggler" data-bs-target = "#navcol-1" > < span class = "visually-hidden" > Toggle navigation< / span > < span class = "navbar-toggler-icon" > < / span > < / button >
< div class = "collapse navbar-collapse" id = "navcol-1" >
< ul class = "navbar-nav ms-auto" >
< li class = "nav-item" > < a class = "nav-link" href = "#top" style = "color: rgb(49,52,55);" > Home< / a > < / li >
< li class = "nav-item" > < a class = "nav-link" href = "#features" style = "color: rgb(49,52,55);" > features< / a > < / li >
< li class = "nav-item" > < a class = "nav-link" href = "https://retrodeck.readthedocs.io/en/latest/blog/" style = "color: rgb(49,52,55);" target = "_blank" > blog< / a > < / li >
2024-04-17 23:50:19 +00:00
< li class = "nav-item" > < a class = "nav-link" href = "https://discord.gg/WDc5C9YWMx" target = "_blank" style = "color: rgb(49,52,55);" > Discord< / a > < / li >
2024-04-17 11:44:19 +00:00
< li class = "nav-item" > < a class = "nav-link" href = "https://matrix.to/#/#retrodeck:matrix.org" target = "_blank" style = "color: rgb(49,52,55);" > Matrix< / a > < / li >
2024-04-17 02:11:19 +00:00
< li class = "nav-item" > < a class = "nav-link" href = "https://retrodeck.readthedocs.io/en/latest/" style = "color: rgb(49,52,55);" target = "_blank" > wiki< / a > < / li >
< li class = "nav-item" > < a class = "nav-link" href = "https://github.com/XargonWan/RetroDECK" target = "_blank" style = "color: rgb(49,52,55);" > github< / a > < / li >
< li class = "nav-item" > < a class = "nav-link" href = "https://github.com/XargonWan/RetroDECK-cooker/" style = "color: rgb(49,52,55);" target = "_blank" > cooker< / a > < / li >
< li class = "nav-item" > < a class = "nav-link" href = "https://retrodeck.readthedocs.io/en/latest/wiki_about/donations-licenses/" target = "_blank" style = "color: rgb(49,52,55);" > donations< / a > < / li >
< / ul >
< / div >
< / div >
< / nav > <!-- End: Navigation Clean -->
<!-- Start: Highlight Clean -->
< section class = "d-flex d-md-flex align-items-center align-items-md-center highlight-clean" id = "top" style = "height: 550px;background: #111111;" >
< div class = "container" >
<!-- Start: Intro -->
< div class = "intro" >
< h2 class = "text-center" style = "font-size: 60px;margin-bottom: 0px;" > < img class = "img-fluid" src = "assets/img/rd-esde-logo.svg" style = "margin-bottom: 25px;" > < / h2 >
< p class = "text-center" style = "font-size: 20px;color: rgb(255,255,255);" > < span style = "color: rgb(220, 221, 222); background-color: rgba(4, 4, 5, 0.07);" > RetroDECK is a in development but polished and beginner-friendly flatpak application for playing your retro games on the Steam Deck and the Linux Desktop. Available with just one click away in Discover or wherever you get your flatpaks.< / span > < / p >
< / div > <!-- End: Intro -->
<!-- Start: Buttons -->
< div class = "buttons" style = "margin-bottom: 0px;" > < a class = "btn btn-secondary" role = "button" target = "_blank" style = "color: black;background: white;border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;" href = "https://flathub.org/apps/details/net.retrodeck.retrodeck" > < i class = "fas fa-download" > < / i > Get retrodeck< / a > < / div > <!-- End: Buttons -->
< / div >
< / section > <!-- End: Highlight Clean -->
<!-- Start: Lightbox Gallery -->
< section class = "photo-gallery py-4 py-xl-5" >
< div class = "container" >
< div class = "row mb-5" >
< div class = "col-md-8 col-xl-6 text-center mx-auto" >
< h2 style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > screenshots< / h2 >
< / div >
< / div > <!-- Start: Photos -->
< div class = "row g-0 justify-content-center photos" data-bss-baguettebox = "" >
< div class = "col" >
< div class = "carousel slide carousel-fade" data-bs-ride = "carousel" data-bs-interval = "4000" data-bs-pause = "false" data-bs-keyboard = "false" data-bs-touch = "false" id = "carousel-1" style = "overflow: hidden;border-radius: 6px;" >
< div class = "carousel-inner" >
< div class = "carousel-item active" > < img class = "w-100 d-block" src = "assets/img/screen01.jpeg" alt = "Slide Image" > < / div >
< div class = "carousel-item" > < img class = "w-100 d-block" src = "assets/img/screen02.jpeg" alt = "Slide Image" > < / div >
< div class = "carousel-item" > < img class = "w-100 d-block" src = "assets/img/screen03.jpeg" alt = "Slide Image" > < / div >
< div class = "carousel-item" > < img class = "w-100 d-block" src = "assets/img/screen04.jpeg" alt = "Slide Image" > < / div >
< div class = "carousel-item" > < img class = "w-100 d-block" src = "assets/img/screen05.jpeg" alt = "Slide Image" > < / div >
< div class = "carousel-item" > < img class = "w-100 d-block" src = "assets/img/screen06.jpeg" alt = "Slide Image" > < / div >
< / div >
< / div >
< / div >
< / div > <!-- End: Photos -->
< / div >
< / section > <!-- End: Lightbox Gallery -->
<!-- Start: Banner Color -->
< section class = "py-4 py-xl-5" >
< div class = "container" >
< div class = "text-white bg-primary border rounded border-0 border-primary d-flex flex-column justify-content-between align-items-center align-items-sm-center align-items-md-center flex-lg-row justify-content-lg-center justify-content-xl-center justify-content-xxl-center p-4 p-md-5" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);" >
< div class = "pb-2 pb-lg-1" >
< h2 class = "fw-bold mb-2" style = "color: rgb(255,255,255);text-align: center;" > POWERED BY ES-DE & THE RETRODECK FRAMEWORK< / h2 >
< p class = "mb-0" style = "color: rgb(255,255,255);text-align: center;" > Together with ES-DE, other software and RetroDECK's own Framework. We are trying to bring you the best all-in-one system out there.< / p >
< / div >
< / div >
< / div >
< / section > <!-- End: Banner Color -->
<!-- Start: Features Clean -->
< section id = "features" class = "features-clean" >
< div class = "container" >
<!-- Start: Intro -->
< div class = "intro" >
< h2 class = "text-center" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > designed for you< / h2 >
< / div > <!-- End: Intro -->
<!-- Start: Features -->
< div class = "row justify-content-center features" >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-play-circle icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > pickup and play< / h3 >
< p class = "description" > No configuration is needed to start. You provide the games and we provide the play.< / p >
< / div >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-exchange-alt icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > < strong > quick resume< / strong > < / h3 >
< p class = "description" > Quit your game and pick it up exactly where you left off.< / p >
< / div >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-backward icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > < strong > rewind & fast forward< / strong > < / h3 >
< p class = "description" > Go back in time and retry without having to restart your game or skip over that long conversation.< / p >
< / div >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-wrench icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > The Configurator< / h3 >
< p class = "description" > A super powerful multi-tool interface that allows you to have quick access to the advanced functions and tweak them to your desire.< / p >
< / div >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-box icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > Flatpak< / h3 >
< p class = "description" > Everything is contained within one application and not over your entire filesystem. Only one place to look and one place to backu.!< / p >
< / div >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fa fa-linux icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > Use your system< / h3 >
< p class = "description" > 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. < / p >
< / div >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-gamepad icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > Hotkey System< / h3 >
< p class = "description" > Features a in-depth global hotkey system with radial menus in addition to button combos via Steam Input. < / p >
< / div >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-ghost icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > < strong > cheats< / strong > < / h3 >
< p class = "description" > Can't surpass THAT point? Don't want to farm? Enable cheats and play smoothly. < / p >
< / div >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-database icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > < strong > metadata & Images< / strong > < / h3 >
< p class = "description" > 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.< br > < / p >
< / div >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-medal icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > Retro Achievements< / h3 >
< p class = "description" > Get rewarded while you play! RetroDECK tracks your progress and awards you when you go the extra mile.< / p >
< / div >
< / div > <!-- End: Features -->
< / div >
< / section > <!-- End: Features Clean -->
<!-- Start: Banner Color -->
< section class = "py-4 py-xl-5" >
< div class = "container" >
< div class = "text-white bg-primary border rounded border-0 border-primary d-flex flex-column justify-content-between align-items-center align-items-sm-center align-items-md-center flex-lg-row justify-content-lg-center justify-content-xl-center justify-content-xxl-center p-4 p-md-5" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);" >
< div class = "pb-2 pb-lg-1" >
< h2 class = "fw-bold mb-2" style = "color: rgb(255,255,255);text-align: center;" > Always evolving & Improving < / h2 >
< p class = "mb-0" style = "color: rgb(255,255,255);text-align: center;" > The RetroDECK Team always have several things in the works, what follows is just a tiny selection. To stay up to date on latest RetroDECK news check the the Wiki and join the Discord.< / p >
< / div >
< div class = "my-2" > < a class = "btn btn-light fs-5 py-2 px-4" role = "button" href = "https://retrodeck.readthedocs.io/en/latest/wiki_development/what-are-you-working.on/" target = "_blank" > News< / a > < / div >
< / div >
< / div >
< / section > <!-- End: Banner Color -->
< section id = "pl-features" class = "features-clean" >
< div class = "container" >
<!-- Start: Intro -->
< div class = "intro" >
< h2 class = "text-center" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > Planned / In-progress Features < / h2 >
< / div > <!-- End: Intro -->
<!-- Start: Features -->
< div class = "row justify-content-center features" >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-wifi icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > online gaming < br > < / h3 >
< p class = "description" > Tools to make it easier to play with your friends online. < br > < / p >
< / div >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-cloud-download-alt icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > < strong > cloud saves and backup < / strong > < / h3 >
< p class = "description" > RetroDECK will backup your progression and sync it across multiple devices. < br > < / p >
< / div >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-users icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > < strong > Multi-User System< / strong > < / h3 >
< p class = "description" > Use local RetroDECK users or bind Steam Deck users to your own saves and emulator configurations. < br > < / p >
< / div >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-wrench icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > < strong > Configurator Godot Edition< / strong > < / h3 >
< p class = "description" > The new controller friendly configurator with even more advanced tools. < br > < / p >
< / div >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-flask icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > < strong > Add separate games to Steam< / strong > < / h3 >
< p class = "description" > Tools for adding all your favorite games as separate entries in Steam with the click of a button. < br > < / p >
< / div >
< div class = "col-sm-6 col-lg-4 item" > < i class = "fas fa-dice icon" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;" > < / i >
< h3 class = "name" > < strong > More Content< / strong > < / h3 >
< p class = "description" > RetroDECK will support even more Emulators / Game Engines / Tools and Systems. < br > < / p >
< / div >
< / div > <!-- End: Features -->
< / div >
< / section > <!-- End: Features Clean -->
<!-- Start: Banner Color -->
< section class = "py-4 py-xl-5" >
< div class = "container" >
< div class = "text-white bg-primary border rounded border-0 border-primary d-flex flex-column justify-content-between flex-lg-row p-4 p-md-5" style = "background: linear-gradient(-95deg, #1a9fff, #946beb);" >
< div class = "pb-2 pb-lg-1" >
< h2 class = "fw-bold mb-2" style = "color: rgb(255,255,255);" > Support RetroDECK or the software we use < / h2 >
< p class = "mb-0" style = "color: rgb(255,255,255);" > Help us keep the game preservation ecosystem alive and healthy.< / p >
< / div >
< div class = "my-2" > < a class = "btn btn-light fs-5 py-2 px-4" role = "button" href = "https://retrodeck.readthedocs.io/en/latest/wiki_about/donations-licenses/" target = "_blank" > donate< / a > < / div >
< / div >
< / div >
< / section > <!-- End: Banner Color -->
<!-- Start: Footer Basic -->
< footer class = "footer-basic" >
<!-- Start: Social Icons -->
2024-04-17 23:50:19 +00:00
< div class = "social" > < a href = "https://discord.gg/WDc5C9YWMx" target = "_blank" > < i class = "fab fa-discord" > < / i > < / a > < a href = "https://matrix.to/#/#retrodeck:matrix.org" target = "_blank" > < i class = "icon ion-social-matrix" > < / i > < / a > < a href = "https://github.com/XargonWan/RetroDECK" target = "_blank" > < i class = "icon ion-social-gitea" > < / i > < / a > < a href = "https://repo.retrodeck.net" target = "_blank" > < i class = "icon ion-social-gitea" > < / i > < / a > < / div > <!-- End: Social Icons -->
2024-04-17 02:11:19 +00:00
<!-- Start: Copyright -->
< p class = "copyright" > Made with < i class = "fa fa-heart" > < / i > by gabeee_boii#5232 and RetroDECK Team< / p > <!-- End: Copyright -->
< / footer > <!-- End: Footer Basic -->
< script src = "assets/bootstrap/js/bootstrap.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js" > < / script >
< script src = "assets/js/Lightbox-Gallery.js" > < / script >
< script src = "assets/js/scroll.js" > < / script >
< script src = "assets/js/Simple-Slider.js" > < / script >
< / body >
< / html >
