-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
242 lines (238 loc) · 21.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!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>
<li class="nav-item"><a class="nav-link" href="https://discord.gg/WDc5C9YWMx" target="_blank" style="color: rgb(49,52,55);">Discord</a></li>
<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>
<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_credits/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="py-2">
<div class="container">
<a style="text-decoration:none;" href="https://www.stopkillinggames.com/" target="_blank" rel="noopener noreferrer"><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-1 p-md-2" 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;">VIDEO GAME PRESERVATION IS AT RISK</h2>
<p class="mb-0" style="color: rgb(255,255,255);text-align: center;">If you are an EU citizen you can help us in our mission by signing the Stop Killing Games EU initiative!</p>
</div>
</div></a>
</div>
</section>
<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 backup!</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_credits/donations-licenses/" 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/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 -->
<!-- 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>