RetroDECK-Website/index.html
Adam Iannazzone 49e4c8fb79 Fix bad mouseover on SKG logo
- Move Stop Killing Games SVG into HTML directly
2024-10-18 09:34:45 -04:00

519 lines
39 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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&amp;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/carousel.css">
<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">
<!-- Stop Killing Games -->
<div class="container px-2">
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
<div class="container-fluid align-items-center">
<div class="row align-items-center">
<div class="col-md-8">
<h1 class="display-md-5 jumbo-header">
Game preservation is at risk!
</h1>
<p class="fs-md-4">
RetroDECK is committed to preserving retro and vintage games for all. However, even new
games are at risk when online components are shut down.
If you are an EU citizen you can help us in our mission by signing the Stop Killing
Games EU initiative!
</p>
</div>
<!-- Stop Killing Games 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://www.stopkillinggames.com/">
<div class="row align-items-center">
<div class="col-6">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 599.5 281.3" fill="#946beb" xml:space="preserve">
<path id="c" class="st0" d="M63.2,25L63,6.1c0,0,0.2-2,1.4-3.1s3.3-1.6,3.3-1.6l85.1-0.2c0,0,2.9,0.2,4.3,1.6
c1.4,1.4,1.9,4.5,1.9,4.5l0.2,15.4l-11.9-1.6c0,0-13.9-6.8-37.3-6.8S63.3,25,63.2,25z M101.9,148.4l-20.8,20.2H36.6l0.3-38.7
l45.4-0.3L101.9,148.4z M109.5,156l20.2,20.8v44.5L91.1,221l-0.3-45.4L109.5,156z M117.1,149.5l20.8-20.2h44.5l-0.3,38.6
l-45.4,0.3L117.1,149.5L117.1,149.5z M110.1,141.3l-20.2-20.8V76l38.7,0.3l0.3,45.4L110.1,141.3z M202.6,220.1h84.9l19.3-45.4
l-6.4-40.7l17.9-28.7H301c0,0-4.7,0-4.7-6.7s4.4-7,4.4-7h17.9l5.9-59.7c0,0-139.1,2.9-179.2-7.3c-8.8-2.9-13.8-6.7-35.1-6.7
c-4.9,0-10.6,0.5-16.7,1.7C55.1,26.9,0,59.8,0,148.9c0,103.4,71.7,132.3,110.1,132.3C174.8,281.3,202.6,220.1,202.6,220.1
L202.6,220.1z M230.4,105c0,0-4.4,1.2-4.4-6.4s4.1-7,4.1-7h26.7c0,0,5.3,0.3,5.3,7s-5,6.7-5,6.7L230.4,105z M304.9,132.9
l15.6-26.5l11.1-2l23.4,34.9L304.9,132.9z M308.6,136.1l71.6,8.8l-0.2,10.1l-24.6,22.6l-40.8-1L308.6,136.1L308.6,136.1z
M317.6,180.4l39.8,3.7l27.9,28.1l-23.2,13.1l-64.2-3.7L317.6,180.4z M365.6,139.6l-21.5-32.4l2-5.9L384.9,90l12.1,37.3
c0,0-5.7,2.1-8.2,6.6c-2.5,4.5-3.3,8.6-3.3,8.6L365.6,139.6L365.6,139.6z M327.7,32.4l28.9-0.8l2.3,58.6L335.5,97
c0,0-0.4-3.1-1.8-4.5c-1.4-1.4-3.9-1.6-3.9-1.6h-8.2L327.7,32.4L327.7,32.4z M363.1,34l38.1-3.5l17.8,27.9l-36.3,25.2l-18,3.7
C364.6,87.3,363.1,34,363.1,34z M417.2,32.8c0,0,5.3-0.4,8.4-1c3.1-0.6,13.3-3.1,20.5-5.9c7.2-2.7,26.8-2.3,26.8-2.3l-5.9,38.8
l14.4,3.5c0,0-5.1,15.4-5.3,15.4s-10.3-1.8-16.6-0.2c-6.2,1.6-9,5.5-9,5.5L417.2,32.8L417.2,32.8z M427.9,68.9l12.3,19.9
c0,0-5.9,5.3-5.7,14.2c0.2,9,6.1,15.4,6.1,15.4l-15.2,11.3c0,0-3.3-3.9-8.8-4.3c-5.5-0.4-10.9,1.6-10.9,1.6l-12.5-33.2L427.9,68.9
L427.9,68.9z M370.5,176.5l22.1-20.3c0,0,2,8,7.2,12.3c5.3,4.3,16.8,3.7,16.8,3.7l0.6,15.6l-19.9,12.9L370.5,176.5L370.5,176.5z
M384.8,227.6l43.9-21.3c0,0,8.8,5.3,8.8,5.1c0-0.2-10.5,34.8-10.5,34.8l-37.7-8.8L384.8,227.6L384.8,227.6z M431.4,147l18-13.3
c0,0,4.1,3.1,7.2,4.5c3.1,1.4,11.7,1.6,11.7,1.6l-0.4,16.8c0,0-26.4,6.2-26.4,6.1c0-0.2-1.4-5.9-3.5-9
C435.9,150.5,431.4,147,431.4,147L431.4,147z M474.4,104.6l4.9-16.4l32,8l-7,26h-15.6c0,0-2-6.4-4.9-10.4
C480.8,108,474.4,104.6,474.4,104.6L474.4,104.6z M496.6,57.4l16.4-26c0,0,11.5,5.9,17.4,12.3c5.9,6.4,12.9,16.2,12.9,16.2
L525.7,80L496.6,57.4z M536.8,106.4l26.9-39.2c0,0,8.6,9.4,12.9,22.1c4.3,12.7,5.9,26.3,5.9,26.3l-25,16.2L536.8,106.4
L536.8,106.4z M548,157.4l-15.4-20.5l-11.1-3.7c0,0-1.4,5.9-4.7,9.4c-3.3,3.5-9.8,4.7-9.8,4.7l9.8,13.7c0,0,5.9-3.3,11.1-2.9
c5.3,0.4,11.7,5.9,11.7,5.9L548,157.4L548,157.4z M445.5,195.6l-0.2-8.2c0,0,4.1-1.4,6-4.1c2-2.7,2-8,2-8l11.9-2.1l11.7,16.4
l-3.7,3.5c0,0-6.2-6.1-12.1-3.3c-5.9,2.7-7.8,9.4-7.8,9.4L445.5,195.6L445.5,195.6z M443.5,242.3l37.1,2.9
c0,0-11.3,19.9-11.3,19.7s-9.4-5.9-13.9-9.8C450.9,251.2,443.5,242.3,443.5,242.3L443.5,242.3z M499.7,260.4l15.4-4.5l9.2,16.6
c0,0-6.2,3.5-11.9,5.1c-5.7,1.6-15.2,1-15.2,1L499.7,260.4L499.7,260.4z M550.3,246.6l18.2-0.2l4.7,6.6c0,0-4.5,6.1-8.4,8.4
c-3.9,2.3-12.3,6.2-12.3,6.2L550.3,246.6L550.3,246.6z M514,226.1l27.7-0.2l-10.3-23.4l-6.1-2.3l-10.3,9.8c0,0,2.5,3.9,2.5,8.2
S514,226.1,514,226.1L514,226.1z M586.4,202.6l7.4,11.1l5.7-14.1l-5.9-1.6L586.4,202.6L586.4,202.6z M554.4,173.2l15.8-20.5
c0,0,5.1,11.1,6,17.8c1,6.6,0.4,19.5,0.4,19.5l-16.8-3.5c0,0,1-4.1-0.4-7.6C558.1,175.3,554.4,173.2,554.4,173.2L554.4,173.2z
M455.6,210.4l-2.3,18.9l24,1.9l-0.2-9.2c0,0-8.6,2.7-12.9-1.2c-4.3-3.9-4.7-9.2-4.5-9.2S455.6,210.4,455.6,210.4L455.6,210.4z
M511.1,168.7v7.2l10,14.8l3.7-3.9c0,0-3.7-3.1-4.1-6.4c-0.4-3.3,1-6.4,1-6.4l-7.8-5.9L511.1,168.7L511.1,168.7z M426.7,17.8
l1-14.4c0,0,0.4-1.8,1.8-2.5c1.4-0.8,3.9-0.8,3.9-0.8l41.2,7.6l-0.4,10.1c0,0-13.7-2.9-24.2-3.1C439.4,14.5,426.7,17.8,426.7,17.8
L426.7,17.8z M524.1,10l22.5,5.9c0,0,1.8,0,3.5,2c1.8,2,0.4,5.7,0.6,5.7c0.2,0-3.3,12.5-3.3,12.1s-6.2-5.9-11.1-9.4
c-4.9-3.5-11.9-5.9-11.9-5.9L524.1,10L524.1,10z" />
</svg>
</div>
<div class="col-6 text-start">Learn More</div>
</div>
</a>
</div>
<!-- End Flathub Link -->
</div>
</div>
</div>
</div>
<!-- End Stop Killing Games -->
<!-- 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 dont worry you can always reset with a single click.
</p>
</div>
<!-- End Second Section -->
</div>
</div>
<!-- End Jumbotron -->
<div class="container-fluid mb-4" id="features">
<div class="row align-items-center mt-3 mb-3">
<div class="col-12 col-lg-8 stack">
<img src="assets/screens/screen01.png" class="img-fluid screenshot"
alt="The RetroDECK and ES-DE logos on a black screen" />
<img src="assets/screens/screen02.png" class="img-fluid screenshot"
alt="A RetroDECK icon on the Steam Library page." />
</div>
<div class="col-12 col-lg-4">
<div class="feature-card p-2 mt-2 mt-lg-0">
<h3>Designed for Gaming Mode</h3>
<p>RetroDECK fits right in with the other games in your Steam library.</p>
</div>
</div>
</div>
<div class="row align-items-center mb-3">
<div class="col-12 col-lg-8 order-lg-2 stack">
<img src="assets/screens/screen03.png" class="img-fluid screenshot"
alt="The RetroDECK custom ES-DE theme showing various emulation engine options." />
<img src="assets/screens/screen04.png" class="img-fluid screenshot"
alt="The RetroDECK custom ES-DE theme showing various game options." />
</div>
<div class="col-12 col-lg-4 order-lg-1">
<div class="feature-card p-2 mt-2 mt-lg-0">
<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. Thank you to <a
href="https://github.com/Weestuarty" target="_blank"
rel="noopener noreferrer">Weestuarty</a> for their amazing work!</p>
</div>
</div>
</div>
<!-- <div class="row align-items-center d-flex mb-4">
<div class="col-12 col-lg-8">
<img src="assets/screens/screen01.png" class="img-fluid screenshot"
alt="The RetroDECK and ES-DE logos on a black screen" />
</div>
<div class="col-12 col-lg-4">
<div class="feature-card p-2 mt-2 mt-lg-0">
<h3>Designed for Gaming Mode</h3>
<p>RetroDECK fits right in with the other games in your Steam library.</p>
</div>
</div>
</div> -->
</div>
<!-- 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>
<button type="button" data-bs-target="#features-carousel" data-bs-slide-to="4"
aria-label="Slide 5"></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. Thank you to <a
href="https://github.com/Weestuarty" target="_blank"
rel="noopener noreferrer">Weestuarty</a> for their amazing work!
</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 class="carousel-item feature-container px-md-5">
<img src="assets/screens/screen05.png" class="d-block img-fluid screenshot" alt="" />
<div class="feature-card px-2 mt-2 mx-auto">
<h3>And so much more!</h3>
<p>Pause, rewind, and fast-forward your games •
Use cheats for those hard-to-beat bosses •
Add your <a href="https://retroachievements.org/" target="_blank"
rel="noopener noreferrer">Retro Achievements</a> account •
Favorite games for quick access •
Easily save and load save states •
Use a variety of custom controllers</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>
<script src="scripts/carousel.js"></script>
</body>
</html>