mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-21 14:35:38 +00:00
c41e5b083c
- Update screenshot paths in index.html - Update screenshot files with higher quality assets
418 lines
32 KiB
HTML
418 lines
32 KiB
HTML
<!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/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">
|
||
<div class="container large">
|
||
<a class="navbar-brand" href="index.html">
|
||
<img src="assets/icons/squircle-icon.svg" height="40">
|
||
</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" href="#features">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" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||
Social <i class="bi bi-caret-down-square-fill"></i>
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li>
|
||
<a class="dropdown-item" target="_blank" rel="noopener noreferrer"
|
||
href="https://discord.gg/WDc5C9YWMx">
|
||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<title>Discord</title>
|
||
<path
|
||
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
|
||
</svg>Discord
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" target="_blank" rel="noopener noreferrer"
|
||
href="https://matrix.to/#/#retrodeck:matrix.org">
|
||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<title>Matrix</title>
|
||
<path
|
||
d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z" />
|
||
</svg>Matrix
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" target="_blank" rel="noopener noreferrer"
|
||
href="https://www.reddit.com/r/RetroDeck/">
|
||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<title>Reddit</title>
|
||
<path
|
||
d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z" />
|
||
</svg>Reddit
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" target="_blank" rel="noopener noreferrer"
|
||
href="https://lemmy.zip/c/retrodeck">
|
||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<title>Lemmy</title>
|
||
<path
|
||
d="M2.9595 4.2228a3.9132 3.9132 0 0 0-.332.019c-.8781.1012-1.67.5699-2.155 1.3862-.475.8-.5922 1.6809-.35 2.4971.2421.8162.8297 1.5575 1.6982 2.1449.0053.0035.0106.0076.0163.0114.746.4498 1.492.7431 2.2877.8994-.02.3318-.0272.6689-.006 1.0181.0634 1.0432.4368 2.0006.996 2.8492l-2.0061.8189a.4163.4163 0 0 0-.2276.2239.416.416 0 0 0 .0879.455.415.415 0 0 0 .2941.1231.4156.4156 0 0 0 .1595-.0312l2.2093-.9035c.408.4859.8695.9315 1.3723 1.318.0196.0151.0407.0264.0603.0423l-1.2918 1.7103a.416.416 0 0 0 .664.501l1.314-1.7385c.7185.4548 1.4782.7927 2.2294 1.0242.3833.7209 1.1379 1.1871 2.0202 1.1871.8907 0 1.6442-.501 2.0242-1.2072.744-.2347 1.4959-.5729 2.2073-1.0262l1.332 1.7606a.4157.4157 0 0 0 .7439-.1936.4165.4165 0 0 0-.0799-.3074l-1.3099-1.7345c.0083-.0075.0178-.0113.0261-.0188.4968-.3803.9549-.8175 1.3622-1.2939l2.155.8794a.4156.4156 0 0 0 .5412-.2276.4151.4151 0 0 0-.2273-.5432l-1.9438-.7928c.577-.8538.9697-1.8183 1.0504-2.8693.0268-.3507.0242-.6914.0079-1.0262.7905-.1572 1.5321-.4502 2.2737-.8974.0053-.0033.011-.0076.0163-.0113.8684-.5874 1.456-1.3287 1.6982-2.145.2421-.8161.125-1.697-.3501-2.497-.4849-.8163-1.2768-1.2852-2.155-1.3863a3.2175 3.2175 0 0 0-.332-.0189c-.7852-.0151-1.6231.229-2.4286.6942-.5926.342-1.1252.867-1.5433 1.4387-1.1699-.6703-2.6923-1.0476-4.5635-1.0785a15.5768 15.5768 0 0 0-.5111 0c-2.085.034-3.7537.43-5.0142 1.1449-.0033-.0038-.0045-.0114-.008-.0152-.4233-.5916-.973-1.1365-1.5835-1.489-.8055-.465-1.6434-.7083-2.4286-.6941Zm.2858.7365c.5568.042 1.1696.2358 1.7787.5875.485.28.9757.7554 1.346 1.2696a5.6875 5.6875 0 0 0-.4969.4085c-.9201.8516-1.4615 1.9597-1.668 3.2335-.6809-.1402-1.3183-.3945-1.984-.7948-.7553-.5128-1.2159-1.1225-1.4004-1.7445-.1851-.624-.1074-1.2712.2776-1.9196.3743-.63.9275-.9534 1.6118-1.0322a2.796 2.796 0 0 1 .5352-.0076Zm17.5094 0a2.797 2.797 0 0 1 .5353.0075c.6842.0786 1.2374.4021 1.6117 1.0322.385.6484.4627 1.2957.2776 1.9196-.1845.622-.645 1.2317-1.4004 1.7445-.6578.3955-1.2881.6472-1.9598.7888-.1942-1.2968-.7375-2.4338-1.666-3.302a5.5639 5.5639 0 0 0-.4709-.3923c.3645-.49.8287-.9428 1.2938-1.2113.6091-.3515 1.2219-.5454 1.7787-.5875ZM12.006 6.0036a14.832 14.832 0 0 1 .487 0c2.3901.0393 4.0848.67 5.1631 1.678 1.1501 1.0754 1.6423 2.6006 1.499 4.467-.1311 1.7079-1.2203 3.2281-2.652 4.324-.694.5313-1.4626.9354-2.2254 1.2294.0031-.0453.014-.0888.014-.1349.0029-1.1964-.9313-2.2133-2.2918-2.2133-1.3606 0-2.3222 1.0154-2.2918 2.2213.0013.0507.014.0972.0181.1471-.781-.2933-1.5696-.7013-2.2777-1.2456-1.4239-1.0945-2.4997-2.6129-2.6037-4.322-.1129-1.8567.3778-3.3382 1.5212-4.3965C7.5094 6.7 9.352 6.047 12.006 6.0036Zm-3.6419 6.8291c-.6053 0-1.0966.4903-1.0966 1.0966 0 .6063.4913 1.0986 1.0966 1.0986s1.0966-.4923 1.0966-1.0986c0-.6063-.4913-1.0966-1.0966-1.0966zm7.2819.0113c-.5998 0-1.0866.4859-1.0866 1.0866s.4868 1.0885 1.0866 1.0885c.5997 0 1.0865-.4878 1.0865-1.0885s-.4868-1.0866-1.0865-1.0866zM12 16.0835c1.0237 0 1.5654.638 1.5634 1.4829-.0018.7849-.6723 1.485-1.5634 1.485-.9167 0-1.54-.5629-1.5634-1.493-.0212-.8347.5397-1.4749 1.5634-1.4749Z" />
|
||
</svg>Lemmy
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||
Source Code <i class="bi bi-caret-down-square-fill"></i>
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li>
|
||
<a class="dropdown-item" href="https://github.com/XargonWan/RetroDECK/tree/main"
|
||
target="_blank" rel="noopener noreferrer">
|
||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<title>GitHub</title>
|
||
<path
|
||
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
||
</svg>Github
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://github.com/XargonWan/RetroDECK-cooker/"
|
||
target="_blank" rel="noopener noreferrer">
|
||
<svg role="img" height="1rem" class="pe-2" xmlns="http://www.w3.org/2000/svg"
|
||
fill="currentColor" class="bi bi-fire" viewBox="0 0 16 16">
|
||
<path
|
||
d="M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16m0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15" />
|
||
</svg></i>Cooker
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://repo.retrodeck.net/" target="_blank"
|
||
rel="noopener noreferrer">
|
||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<title>Forgejo</title>
|
||
<path
|
||
d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z" />
|
||
</svg>Forejo
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<!-- End Navbar -->
|
||
|
||
<!-- Main Content -->
|
||
<main class="container-fluid px-0 mt-4">
|
||
|
||
<!-- Jumbotron -->
|
||
<div class="container px-2">
|
||
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
|
||
<div class="container-fluid align-items-center">
|
||
<!-- First section -->
|
||
<div class="row align-items-center">
|
||
<div class="col-md-8">
|
||
<h1 class="display-md-5 jumbo-header">Your all-in-one emulation package for the Steam Deck</h1>
|
||
<p class="fs-md-4">
|
||
Powered by <a target="_blank" rel="noopener noreferrer" href="https://es-de.org/">ES-DE</a>,
|
||
RetroDECK combines all of the best open-source emulators into a single application.
|
||
Pair that with a best-in-class Steam Deck controller configuration, and you'll be in retro
|
||
gaming
|
||
paradise.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Flathub Link -->
|
||
<div class="col-md-4 text-center">
|
||
<a type="button" class="btn btn-dark align-center p-2" target="_blank" rel="noopener noreferrer"
|
||
href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
|
||
<div class="row align-items-center">
|
||
<div class="col-4">
|
||
<svg fill="#946beb" role="img" height="2rem" class="px-2" viewBox="0 0 24 24"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<title>Flathub</title>
|
||
<path
|
||
d="M6.068 0a6 6 0 0 0-6 6 6 6 0 0 0 6 6 6 6 0 0 0 5.998-6 6 6 0 0 0-5.998-6Zm9.15.08a1.656 1.656 0 0 0-1.654 1.656v8.15a1.656 1.656 0 0 0 2.483 1.434l7.058-4.074a1.656 1.656 0 0 0 0-2.869l-1.044-.604-6.014-3.47a1.656 1.656 0 0 0-.828-.223Zm3.575 13.135a.815.815 0 0 0-.816.818v2.453h-2.454a.817.817 0 1 0 0 1.635h2.454v2.453a.817.817 0 1 0 1.635 0v-2.453h2.452a.817.817 0 1 0 0-1.635h-2.453v-2.453a.817.817 0 0 0-.818-.818zM2.865 13.5a2.794 2.794 0 0 0-2.799 2.8v4.9c0 1.55 1.248 2.8 2.8 2.8h4.9c1.55 0 2.8-1.25 2.8-2.8v-4.9c0-1.55-1.25-2.8-2.8-2.8Z" />
|
||
</svg>
|
||
</div>
|
||
<div class="col-8 text-start">
|
||
<div class="row">
|
||
<div class="col">Get it on</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col">Flathub</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<!-- End Flathub Link -->
|
||
|
||
</div>
|
||
|
||
<!-- End First Section -->
|
||
|
||
<hr />
|
||
|
||
<!-- Second Section -->
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<h2 class="display-md-5 jumbo-header">No need to configure emulators</h2>
|
||
<h2 class="display-md-5 jumbo-header">(But you can if you want)</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row"></div>
|
||
<p class="fs-md-4">
|
||
With RetroDECK, everything has been pre-configured for optimal performance and quality on the Steam
|
||
Deck.
|
||
If you want to dig deeper, you tinker with common emulator settings in the RetroDECK Configurator.
|
||
And don’t worry – you can always reset with a single click.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- End Second Section -->
|
||
|
||
</div>
|
||
</div>
|
||
<!-- End Jumbotron -->
|
||
|
||
<!-- Screenshot/Feature Section -->
|
||
<!-- <div class="container-fluid mb-4 pt-2" id="features">
|
||
<div class="row mb-2 overflow-x-scroll" id="feature-row">
|
||
<div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div>
|
||
<div class="col-8 col-sm-6 feature-container" id="active-feature">
|
||
<img src="assets/screens/large/screen01.png" class="img-fluid screenshot mx-auto" alt="" />
|
||
<div class="feature-card px-2 mt-2 mx-auto">
|
||
<h3>Feature 1</h3>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
|
||
sodales
|
||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-8 col-sm-6 feature-container" id="">
|
||
<img src="assets/screens/large/screen02.png" class="img-fluid screenshot" alt="" />
|
||
<div class="feature-card px-2 mt-2 mx-auto">
|
||
<h3>Feature 1</h3>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
|
||
sodales
|
||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-8 col-sm-6 feature-container" id="">
|
||
<img src="assets/screens/large/screen03.png" class="img-fluid screenshot" alt="" />
|
||
<div class="feature-card px-2 mt-2 mx-auto">
|
||
<h3>Feature 1</h3>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
|
||
sodales
|
||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-8 col-sm-6 feature-container" id="">
|
||
<img src="assets/screens/large/screen04.png" class="img-fluid screenshot" alt="" />
|
||
<div class="feature-card px-2 mt-2 mx-auto">
|
||
<h3>Feature 1</h3>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
|
||
sodales
|
||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-8 col-sm-6 feature-container" id="">
|
||
<img src="assets/screens/large/screen05.png" class="img-fluid screenshot" alt="" />
|
||
<div class="feature-card px-2 mt-2 mx-auto">
|
||
<h3>Feature 1</h3>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
|
||
sodales
|
||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-8 col-sm-6 feature-container" id="">
|
||
<img src="assets/screens/large/screen06.png" class="img-fluid screenshot" alt="" />
|
||
<div class="feature-card px-2 mt-2 mx-auto">
|
||
<h3>Feature 1</h3>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
|
||
sodales
|
||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div>
|
||
</div>
|
||
</div> -->
|
||
<!-- End Screenshot/Feature Section -->
|
||
|
||
<!-- Screenshots and Features as Bootstrap Carousel -->
|
||
<div class="container-fluid mb-4" id="features">
|
||
<div class="carousel slide py-2" id="features-carousel">
|
||
<div class="carousel-indicators">
|
||
<button type="button" data-bs-target="#features-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
||
<button type="button" data-bs-target="#features-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||
<button type="button" data-bs-target="#features-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||
<button type="button" data-bs-target="#features-carousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
|
||
</div>
|
||
<div class="carousel-inner pb-md-5" role="listbox">
|
||
<div class="carousel-item active feature-container px-md-5">
|
||
<img src="assets/screens/screen01.png" class="d-block img-fluid screenshot" alt="The RetroDECK and ES-DE logos on a black screen" />
|
||
<div class="feature-card px-2 mt-2 mx-auto">
|
||
<h3>A One-Stop Shop</h3>
|
||
<p>Designed with the Steam Deck in mind, RetroDECK is your perfect emulation companion.
|
||
It combines the amazing work of Emulation Station Desktop Edition with our own special features to the best Linux emulation platform around.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="carousel-item feature-container px-md-5">
|
||
<img src="assets/screens/screen02.png" class="d-block img-fluid screenshot" alt="" />
|
||
<div class="feature-card px-2 mt-2 mx-auto">
|
||
<h3>Designed for Gaming Mode</h3>
|
||
<p>RetroDECK fits right in with the other games in your Steam library.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="carousel-item feature-container px-md-5">
|
||
<img src="assets/screens/screen03.png" class="d-block img-fluid screenshot" alt="" />
|
||
<div class="feature-card px-2 mt-2 mx-auto">
|
||
<h3>Custom ES-DE Theme</h3>
|
||
<p>RetroDECK includes a custom ES-DE theme with pixel text and retro vibes.
|
||
But you can also choose any ES-DE theme in the settings menu.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="carousel-item feature-container px-md-5">
|
||
<img src="assets/screens/screen04.png" class="d-block img-fluid screenshot" alt="" />
|
||
<div class="feature-card px-2 mt-2 mx-auto">
|
||
<h3>Easy art scraping</h3>
|
||
<p>Use the built-in scraping integration to grab beautiful artwork and metadata for your games. You can use Screenscraper or The GamesDB.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<button class="carousel-control-prev carousel-button" type="button" data-bs-target="#features-carousel" data-bs-slide="prev" id="carousel-prev">
|
||
<img class="d-pad d-none d-md-block" src="assets/pixel-icons/steamdeck_dpad_left_outline.svg" aria-hidden="true"/>
|
||
</button>
|
||
<button class="carousel-control-next carousel-button" type="button" data-bs-target="#features-carousel" data-bs-slide="next" id="carousel-next">
|
||
<img class="d-pad d-none d-md-block" src="assets/pixel-icons/steamdeck_dpad_right_outline.svg" aria-hidden="true"/>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Screenshots and Features as Bootstrap Carousel -->
|
||
|
||
<!-- Donate Appeal -->
|
||
<div class="container px-2">
|
||
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
|
||
<div class="container-fluid py-2 align-items-center">
|
||
<!-- First section -->
|
||
<div class="row align-items-center">
|
||
<div class="col-md-8">
|
||
<h2 class="display-md-5 jumbo-header">We can't do this alone!</h2>
|
||
<p class="fs-md-4">
|
||
RetroDECK is run by volunteers.
|
||
If you appreciate our work, please consider code contribution or donating to us or our
|
||
sibling projects.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Donate/Help Link -->
|
||
<div class="col-md-4 text-center">
|
||
<a type="button" class="btn btn-dark align-center p-2" target="_blank" rel="noopener noreferrer"
|
||
href="https://retrodeck.readthedocs.io/en/latest/wiki_credits/donations-licenses/">
|
||
<div class="row align-items-center">
|
||
<div class="col-4">
|
||
<svg xmlns="http://www.w3.org/2000/svg" height="2rem" fill="#946beb"
|
||
class="bi bi-balloon-heart-fill px-2" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd"
|
||
d="M8.49 10.92C19.412 3.382 11.28-2.387 8 .986 4.719-2.387-3.413 3.382 7.51 10.92l-.234.468a.25.25 0 1 0 .448.224l.04-.08c.009.17.024.315.051.45.068.344.208.622.448 1.102l.013.028c.212.422.182.85.05 1.246-.135.402-.366.751-.534 1.003a.25.25 0 0 0 .416.278l.004-.007c.166-.248.431-.646.588-1.115.16-.479.212-1.051-.076-1.629-.258-.515-.365-.732-.419-1.004a2 2 0 0 1-.037-.289l.008.017a.25.25 0 1 0 .448-.224l-.235-.468ZM6.726 1.269c-1.167-.61-2.8-.142-3.454 1.135-.237.463-.36 1.08-.202 1.85.055.27.467.197.527-.071.285-1.256 1.177-2.462 2.989-2.528.234-.008.348-.278.14-.386" />
|
||
</svg>
|
||
</div>
|
||
<div class="col-8 text-start">Learn More</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<!-- End Donate/Help Link -->
|
||
|
||
</div>
|
||
|
||
<!-- End First Section -->
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Donate Appeal -->
|
||
|
||
</main>
|
||
<!-- End Main Content -->
|
||
|
||
<!-- Footer -->
|
||
<footer class="container-fluid pt-2 pb-2">
|
||
<div class="row justify-content-between">
|
||
<div class="col">
|
||
<div>
|
||
Created by <a target="_blank" rel="noopener noreferrer" href="https://github.com/jiannazzone">Adam
|
||
Iannazzone</a> and the RetroDECK team.
|
||
</div>
|
||
<div class="form-check form-switch">
|
||
<input class="form-check-input" id="pixel-font-switch" type="checkbox" role="switch"
|
||
id="reduceMotionSwitch" checked onchange="pixelFontToggle()">
|
||
<label class="form-check-label" for="reduceMotionSwitch">Retro Fonts</label>
|
||
</div>
|
||
</div>
|
||
</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> -->
|
||
<script src="scripts/features.js"></script>
|
||
<script src="scripts/accessibility.js"></script>
|
||
</body>
|
||
|
||
</html> |