RetroDECK-Website/index.html
2024-04-18 09:19:40 -04:00

161 lines
9.5 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/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="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/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark sticky-top" data-bs-theme="dark">
<div class=" container-fluid">
<a class="navbar-brand" href="index.html">
Home
</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</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 dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Social
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" target="_blank" rel="noopener noreferrer"
href="https://discord.gg/WDc5C9YWMx">Discord</a></li>
<li><a class="dropdown-item" target="_blank" rel="noopener noreferrer"
href="https://matrix.to/#/#retrodeck:matrix.org">Matrix</a></li>
<li><a class="dropdown-item" target="_blank" rel="noopener noreferrer"
href="https://www.reddit.com/r/RetroDeck/">Reddit</a></li>
<li><a class="dropdown-item" target="_blank" rel="noopener noreferrer"
href="https://lemmy.zip/c/retrodeck">Lemmy</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Source Code
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="https://github.com/XargonWan/RetroDECK/tree/main"
target="_blank" rel="noopener noreferrer">
Github
</a>
</li>
<li>
<a class="dropdown-item" href="https://repo.retrodeck.net/Xargon/RetroDECK"
target="_blank" rel="noopener noreferrer">
Gitea
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<main class="container pt-3">
<!-- Lead Jumbotron -->
<div class="p-5 mb-4 bg-body-tertiary rounded-3" id="lead-jumbotron">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Your all-in-one emulation package for the Steam Deck</h1>
<p class="col-md-8 fs-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante finibus nulla imperdiet mattis id id augue. Donec maximus molestie tempor. Nulla efficitur ex erat, nec vehicula arcu dapibus sed.</p>
<a class="btn btn-dark btn-lg" type="button" target="_blank" rel="noopener noreferrer" href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
<i class="bi bi-download"></i> Get RetroDECK
</a>
</div>
</div>
<!-- End Jumbotron -->
<!-- Screenshot Carousel -->
<div id="screenshotCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/assets/img/screen01.jpeg" class="d-block w-100 rounded-3" alt="The RetroDECK logo displayed on a Steam Deck">
</div>
<div class="carousel-item">
<img src="/assets/img/screen02.jpeg" class="d-block w-100 rounded-3" alt="The RetroDECK icon visible in a Steam Library">
</div>
<div class="carousel-item">
<img src="/assets/img/screen03.jpeg" class="d-block w-100 rounded-3" alt="Steam Deck quick settings in the foreground with the RetroDECK interface behind it">
</div>
<div class="carousel-item">
<img src="/assets/img/screen04.jpeg" class="d-block w-100 rounded-3" alt="One of the ES-DE Themes with SEGA Genesis visible">
</div>
<div class="carousel-item">
<img src="/assets/img/screen05.jpeg" class="d-block w-100 rounded-3" alt="Sonic the Hedgehog 2 (SEGA Genesis) on the Steam Deck">
</div>
<div class="carousel-item">
<img src="/assets/img/screen06.jpeg" class="d-block w-100 rounded-3" alt="A list of TurboGrafx games in the ES-DE frontend">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#screenshotCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#screenshotCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- End Carousel -->
<!-- Donate Jumbotron -->
<div class="p-5 mb-4 bg-body-tertiary rounded-3" id="lead-jumbotron">
<div class="container-fluid py-4">
<h1 class="display-5 fw-bold">We can't do this alone</h1>
<p class="col-md-8 fs-4">RetroDECK is run by volunteers. If you appreciate our work, please consider donating to us or our sibling projects.</p>
<a class="btn btn-dark btn-lg" type="button" target="_blank" rel="noopener noreferrer" href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
<i class="bi bi-balloon-heart"></i> Learn how to donate
</a>
</div>
</div>
<!-- End Jumbotron -->
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>