RetroDECK/docs/index.html

162 lines
13 KiB
HTML
Raw Normal View History

<!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>
2022-04-25 21:25:03 +00:00
<meta name="twitter:image" content="">
<meta property="og:image" content="assets/img/RetroDeck%20Wallpaper_ccexpress.png">
<meta name="twitter:title" content="RetroDeck">
2022-04-25 21:25:03 +00:00
<meta name="description" content="RetroDeck is an easy and fancy environment for managing and launching your retro games on Steam Deck without relying on custom firmware.">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="RetroDeck is an easy and fancy environment for managing and launching your retro games on Steam Deck without relying on custom firmware.">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="assets/img/RD_180x180.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/RD_16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/RD_32x32.png">
<link rel="icon" type="image/png" sizes="180x180" href="assets/img/RD_180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/img/RD_192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="assets/img/RD_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&amp;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">
2022-04-20 02:37:34 +00:00
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.css">
<link rel="stylesheet" href="assets/css/Navigation-Clean.css">
<link rel="stylesheet" href="assets/css/styles.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/icon128.png" style="width: 45px;"></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>
2022-04-25 21:25:03 +00:00
<li class="nav-item"><a class="nav-link" href="https://github.com/XargonWan/RetroDECK/wiki" 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-cooker/" style="color: rgb(49,52,55);" target="_blank">cooker</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://www.patreon.com/RetroDECK" target="_blank" style="color: rgb(49,52,55);">patreon</a></li>
<li class="nav-item"><a class="nav-link" href="https://discord.gg/tbmBpJbpur" target="_blank" style="color: rgb(49,52,55);">connect with us</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: #000000;">
<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/SSLM.png" style="margin-bottom: 25px;"></h2>
<p class="text-center" style="font-size: 20px;color: rgb(255,255,255);">RetroDeck is an easy and fancy environment for managing and launching your retro games on Steam Deck without relying on custom firmware. </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>&nbsp;Get retrodeck</a></div><!-- End: Buttons -->
</div>
</section><!-- End: Highlight 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;">POWERED BY EMULATIONSTATION-DE</h2>
<p class="mb-0" style="color: rgb(255,255,255);text-align: center;">RetroDeck teamed up with ES-DE to bring you the best retro launcher 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">ready, set, go!</h3>
<p class="description">No configuration, just 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>instant pickup</strong></h3>
<p class="description">Close your game? No worries! Pick 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</strong></h3>
<p class="description">Seems like you died! Go back in time and retry without having to restart your game or lose a life. <em>(Must be manually enabled during the beta)</em></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">Wanna be that guy? You can.</p>
</div>
<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 <em>(Coming soon)</em><br></h3>
<p class="description">Thanks to RetroArch's Netplay you will be able to play online with your friends, stay tuned for this feature!<br></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</strong></h3>
<p class="description">RetroDeck pulls information from your library to create a beautiful user experience!<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 <em>(coming soon)</em></strong></h3>
<p class="description">RetroDeck will backup your progression and sync it across multiple devices. <em>(User configuration may be needed)</em><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 -->
2022-04-20 02:37:34 +00:00
<!-- 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 gx-2 gy-2 row-cols-1 row-cols-md-2 row-cols-xl-3 photos" data-bss-baguettebox="">
2022-04-20 07:47:49 +00:00
<div class="col item"><a><img class="img-fluid" src="https://github.com/XargonWan/RetroDECK/blob/main/res/screenshots/screen02.png?raw=true"></a></div>
2022-04-25 13:37:42 +00:00
<div class="col item"><a><img class="img-fluid" src="https://github.com/XargonWan/RetroDECK/blob/main/res/screenshots/screen04.png?raw=true"></a></div>
<div class="col item"><a><img class="img-fluid" src="https://github.com/XargonWan/RetroDECK/blob/main/res/screenshots/screen05.png?raw=true"></a></div>
2022-04-20 02:37:34 +00:00
</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 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 us oN patreon!</h2>
<p class="mb-0" style="color: rgb(255,255,255);">Help us keep our servers running by donating to our Patreon! Did we mention you get donor benefits?</p>
</div>
<div class="my-2"><a class="btn btn-light fs-5 py-2 px-4" role="button" href="https://www.patreon.com/RetroDECK" target="_blank">donate</a></div>
</div>
</div>
</section><!-- End: Banner Color -->
<!-- Start: Footer Basic -->
<footer class="footer-basic">
<!-- Start: Social Icons -->
<div class="social"><a href="https://discord.gg/tbmBpJbpur" target="_blank"><i class="fab fa-discord"></i></a><a href="https://github.com/XargonWan/RetroDECK" target="_blank"><i class="icon ion-social-github"></i></a></div><!-- End: Social Icons -->
<!-- Start: Copyright -->
<p class="copyright">Made with&nbsp;<i class="fa fa-heart"></i>&nbsp;by gabeee_boii#5232</p><!-- End: Copyright -->
</footer><!-- End: Footer Basic -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
2022-04-20 02:37:34 +00:00
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.js"></script>
<script src="assets/js/Lightbox-Gallery.js"></script>
<script src="assets/js/scroll.js"></script>
</body>
2022-04-25 21:25:03 +00:00
</html>