website

docs/index.html

@@ -44,11 +44,12 @@
                 <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://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://retrodeck.readthedocs.io/en/latest/blog/" style="color: rgb(49,52,55);" target="_blank">blog</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://discord.gg/tbmBpJbpur" target="_blank" style="color: rgb(49,52,55);">Discord</a></li>
+                    <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://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://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://discord.gg/tbmBpJbpur" target="_blank" style="color: rgb(49,52,55);">connect with us</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>
@@ -58,8 +59,8 @@
         <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/logo_stacked_esde.png" style="margin-bottom: 25px;"></h2>
+                <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 polished and beginner-friendly environment for playing your retro games on Steam Deck, available with just one click from the Discover app.</span></p>
+                <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 polished and beginner-friendly environment for playing your retro games on Steam Deck and Linux Desktop, available with just one click from the Discover app 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>&nbsp;Get retrodeck</a></div><!-- End: Buttons -->
@@ -94,8 +95,8 @@
         <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>
+                    <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;">RetroDECK teamed up with ES-DE to bring you the best retro launcher out there!</p>
+                    <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>
@@ -110,32 +111,40 @@
             <!-- 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>
+                    <h3 class="name">pickup and play</h3>
-                    <p class="description">No configuration, just play!</p>
+                    <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>instant pickup</strong></h3>
+                    <h3 class="name"><strong>quick resume</strong></h3>
-                    <p class="description">Close your game? No worries! Pick up exactly where you left off!</p>
+                    <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</strong></h3>
+                    <h3 class="name"><strong>rewind & fast forward</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>
+                    <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">Wanna be that guy? You can.</p>
+                    <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-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>
+                    <h3 class="name"><strong>metadata & Images</strong></h3>
-                    <p class="description">RetroDECK pulls information from your library to create a beautiful user experience!<br></p>
+                    <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-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>
@@ -145,14 +154,61 @@
         </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 seperate games to Steam</strong></h3>
+                    <p class="description">Tools for adding all your favorite games as seperate 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 us oN patreon!</h2>
+                    <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 our servers running by donating to our Patreon!</p>
+                    <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://www.patreon.com/RetroDECK" target="_blank">donate</a></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 -->
@@ -161,7 +217,7 @@
         <!-- 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 -->
+        <p class="copyright">Made with&nbsp;<i class="fa fa-heart"></i>&nbsp;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>