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 -->
< div class = "p-2 mb-4 bg-body-tertiary rounded-3 jumbotron my-gradient gradient-spin" >
< div class = "container-fluid py-5" >
2024-04-23 16:16:44 +00:00
<!-- <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 >
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 -->
< div class = "p-2 mb-4 rounded-3 jumbotron my-gradient gradient-spin" >
< div class = "container-fluid" >
<!-- Theme based on https://github.com/anthonycaccese/art - book - next - es - de -->
< div class = "row" >
<!-- Left Column -->
< div class = "col-4 rounded-3" id = "left-feature-column" >
<!-- Logo Header -->
< div class = "row p-3" 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" 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 >
2024-04-18 17:12:11 +00:00
< / div >
2024-04-23 16:16:44 +00:00
<!-- End Left Column -->
<!-- Right Column -->
< div class = "col-8" id = "feature-detail-column" >
< div class = "feature-detail-container" 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_old/screen01.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< / 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/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 >
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 >
