mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-25 08:05:38 +00:00
Initial commit of new layout
This commit is contained in:
Adam Iannazzone
parent
70b8e0e6d0
commit
853b492159
18
assets/img/squircle-icon.svg
Normal file
18
assets/img/squircle-icon.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g transform="matrix(1.88235,0,0,1.86861,-7.52941,-5.60584)">
|
||||||
|
<path d="M140,37.25C140,18.347 124.765,3 106,3L38,3C19.235,3 4,18.347 4,37.25L4,105.75C4,124.653 19.235,140 38,140L106,140C124.765,140 140,124.653 140,105.75L140,37.25Z" style="fill:rgb(17,17,17);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(2.02105,0,0,2.02105,-13.4737,-13.4737)">
|
||||||
|
<g id="D" transform="matrix(-0.674885,8.26495e-17,-8.26495e-17,-0.674885,223.747,109.037)">
|
||||||
|
<path d="M172.54,-2.511C175.786,-5.757 179.378,-8.24 183.315,-9.96C187.251,-11.68 191.533,-12.54 196.16,-12.54L271.855,-12.54L271.855,6.901L196.16,6.901C194.44,6.901 192.823,7.222 191.309,7.864C189.795,8.506 188.475,9.39 187.348,10.517C186.222,11.643 185.337,12.964 184.695,14.478C184.053,15.992 183.732,17.609 183.732,19.329L183.732,96.355C183.732,97.954 184.084,99.498 184.786,100.988C185.489,102.478 186.416,103.798 187.566,104.949C188.717,106.1 190.037,107.027 191.527,107.729C193.017,108.432 194.562,108.783 196.16,108.783L271.855,108.783L271.855,128.224L196.16,128.224C193.859,128.224 191.624,127.982 189.456,127.498C187.288,127.013 185.204,126.329 183.206,125.444C181.207,124.56 179.311,123.5 177.518,122.265C175.726,121.029 174.066,119.673 172.54,118.195C169.366,115.118 166.901,111.575 165.145,107.566C163.389,103.556 162.51,99.226 162.51,94.574L162.51,21.11C162.51,16.458 163.37,12.17 165.09,8.246C166.811,4.321 169.294,0.736 172.54,-2.511Z" style="fill:white;fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
<g id="Left-Symbol" serif:id="Left Symbol" transform="matrix(0.494792,-0,-0,0.494792,6.66667,6.66667)">
|
||||||
|
<use xlink:href="#_Image1" x="39.093" y="89.764" width="103.568px" height="78.228px" transform="matrix(0.995844,0,0,0.990223,0,0)"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<image id="_Image1" width="104px" height="79px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABPCAYAAAAHtYAvAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAGHUlEQVR4nO2de2xTVRzHP6cbe4qg8jB1ioQMcDJAHgEVMPyjgaAGQR4xhAxEGfIY8gaBGCXGGEULjMG2FhEG6JCBhEgEJWRBBkaDopIYwRAsigSHoMLa3usftzVla7eu/bWU9HySJvd37jnfnNzvPae95/Scq2hE7cTz6YZigqEYYKAKTUWhoehoKDBQmAqsYzCUwlBYaUGxocBsFBuAGS7Gn6ZUkFaQfnOx/9hsFIfSalE7rJa/rk3jBkNRbyjqDVS9qfjRUBw3FMcM1IlvXkpvaHx9W4sKDo5McPc1lKo0FP2aGKINajYOca3+MBSlpqL02+L0C9EaZAscfDnBPRs4DvSLVkxzAx2BlcDZXmXeioIy34PRiNgA6sa7+wBvA+ly9dP4yQSmAid7bvDt77HR16c1hW11493pQAXanETwOFCbX+4bGWkBGzAOGBC3KmkacxvwSbdyoziSzDZgYHzrowmBDSjtWmG81aXSsLWUsVdi6qQJwXxgy31OQ4XLYAMKE1cfTQgmApPDnbQBnRNXF00YVuc5TXuoE832f5qE0R5Yb3eZTbo6bVDy8BQwvnGiNii5WGN3mbnBCdqg5KIDMCo4QRuUfEwMDiSGd5YCLgGdWw0bUAAM8X+GI3PDj7C7zPbuIlUPMgZdHlPZ6TcBnVsRN3AAYLDDMxL4EMhttkTLZACj8d/0uosT4ujsNvuAYcDvAnL/d3PaIEHqZrX5GlgsIDUs8EykDZJnK3A2Ro1M4E7QBolzfGYbD/COgNQ9oA2KF0cFNLRBceS0gIY2KI5cBK7GqKENiiOK2J8xvaANihd5QFaMGr+CNihe5AtonANtULwYLqChDYoHA9d62gEzBaR0FxcnZgHtYtT4y12kroBlkBlzlTQADFrjGQ0sE5A6HDjQLUiIwQ5PCbCT2H+9AWwPHEjMB927c+qFvim4/MRmQKGhGGoohhrQXeBaAlwD9gQCCYMWIzPErrHYG/j+Ad3FJSPbgwNtUHJxEdgXnKANSi5muYvUv8EJ2qDkoQbY0ThRG5Qc/AnMcBepJs+k2qDkoOTcFHU+1Ak9knDzqQI+CHdSt6Cby5vApLNTbGEbiV7ZfXPwAsVnnrdVtJRRG5R4LgNjf55mOxBJZt3FJQ4T66f0wz9NS4vIHNAtKBFcBSoBx6kX01r9dyxtUPz4BXAAzpPT0y9HKyJh0BXgHwGdeHM7kC2o58VaflKP9b1SD5wCvvJ/zpyYkR7zI4zIdMOYyk6lAjpxZeqrfxcAdVhbsUiggMm1czIOCemFJGV+JFSuzP0BeE5QMg2oHvJew/2Cmk1IqZEE54rcPcByQcm7gN2POBpiXVUXlpRpQUGsAqoF9XoDmwY7PGH324mFlDNo04pcEygCvhOUHYu1mFqclDMIYPPy3KvA08AlQdnXBq3xPCmoB6SoQQBbXsk5AzwL+IQkFbB14FrPA0J6QAobBFC1LOdzYK6gZFtgd/91njukBFPaID9rAaegXj6w7aF13jQJsZQ3aNuyHBOYgcy60gBPAG9ICKW8QQA7luZcB57BGrqRYkGfUm/MD8baID8fLck+j7UFy3VB2Yre670x7aicUiMJLbFzSfYx4AVBySxgV68y793RCugW1Ihdi7M3A6sFJfOA6oIyX0Y0hbVBoVmIfxcrIR4F1vbc4Gv1cJA2KAQ1i7K9WPuHSmxIEWAaML21hbRBYdizMOsS1kavsW5IEYyjx0bfY60poA1qhr0Ls74HJglKpgPV+eW+LpEW0Aa1wL4FWTVY7wGSogNQ063ciGgOSRsUGa8DHwvq9QWcXSvCv7MhgDYoAj6dn2VgvV/hpKDsOCJYOqoNipD98zLjMYe0qkulMaq5DHokoRV8Ni/zNNadLzmHVHWf0+gZLoNuQa3k4MuZB4F5gpJtgd15TrN9qJPaoOhwAJsE9boDVXaX2WQOSRsUBV/MzTSBYqw/QkoxAusfRzegDYqSQyUZ17DmkEIuXYySRXaXecO7G7RBMXC4JMONNYcU8yuhg3DaXWb/QKANipHaORl1yM8h1dhdZmfQBolwZHbG+8C7gpJ5QLXdZWZog+RYABwU1BsCOP4DNMctuHcT4JEAAAAASUVORK5CYII="/>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.4 KiB |
23
css/style.css
Normal file
23
css/style.css
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
background: linear-gradient(-95deg, #1a9fff, #946beb);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown-menu {
|
||||||
|
background-color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark {
|
||||||
|
background-color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
#lead-jumbotron {
|
||||||
|
background: linear-gradient(45deg, #1a9fff, #946beb);
|
||||||
|
color: white;
|
||||||
|
border: 1px white solid;
|
||||||
|
}
|
||||||
318
index.html
318
index.html
|
|
@ -1,231 +1,161 @@
|
||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||||
<title>RetroDECK</title>
|
<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 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 property="og:image" content="assets/img/RetroDeck%20Wallpaper.png">
|
||||||
<meta name="twitter:title" content="RetroDECK">
|
<meta name="twitter:title" content="RetroDECK">
|
||||||
<meta name="twitter:card" content="summary">
|
<meta name="twitter:card" content="summary">
|
||||||
<meta property="og:type" content="website">
|
<meta property="og:type" content="website">
|
||||||
<meta name="twitter:image" content="">
|
<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.">
|
<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="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="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="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="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="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="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/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="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700">
|
||||||
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||||
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
|
<link rel="stylesheet" href="css/style.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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- Start: Navigation Clean -->
|
<nav class="navbar navbar-expand-lg bg-dark sticky-top" data-bs-theme="dark">
|
||||||
<nav class="navbar navbar-light navbar-expand-lg sticky-top navigation-clean">
|
<div class=" container-fluid">
|
||||||
<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>
|
<a class="navbar-brand" href="index.html">
|
||||||
<div class="collapse navbar-collapse" id="navcol-1">
|
Home
|
||||||
<ul class="navbar-nav ms-auto">
|
</a>
|
||||||
<li class="nav-item"><a class="nav-link" href="#top" style="color: rgb(49,52,55);">Home</a></li>
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
|
||||||
<li class="nav-item"><a class="nav-link" href="#features" style="color: rgb(49,52,55);">features</a></li>
|
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<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>
|
<span class="navbar-toggler-icon"></span>
|
||||||
<li class="nav-item"><a class="nav-link" href="https://discord.gg/WDc5C9YWMx" target="_blank" style="color: rgb(49,52,55);">Discord</a></li>
|
</button>
|
||||||
<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>
|
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||||
<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>
|
<ul class="navbar-nav">
|
||||||
<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">
|
||||||
<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>
|
<a class="nav-link" href="#">Features</a>
|
||||||
<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>
|
</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav><!-- End: Navigation Clean -->
|
</nav>
|
||||||
<!-- Start: Highlight Clean -->
|
|
||||||
<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-fluid">
|
||||||
<div class="container">
|
<main class="container pt-3">
|
||||||
<!-- Start: Intro -->
|
|
||||||
<div class="intro">
|
<!-- Lead Jumbotron -->
|
||||||
<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>
|
<div class="p-5 mb-4 bg-body-tertiary rounded-3" id="lead-jumbotron">
|
||||||
<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 class="container-fluid py-5">
|
||||||
</div><!-- End: Intro -->
|
<h1 class="display-5 fw-bold">Your all-in-one emulation package for the Steam Deck</h1>
|
||||||
<!-- Start: Buttons -->
|
<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>
|
||||||
<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 -->
|
<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>
|
||||||
</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>
|
||||||
</div><!-- Start: Photos -->
|
<!-- End Jumbotron -->
|
||||||
<div class="row g-0 justify-content-center photos" data-bss-baguettebox="">
|
|
||||||
<div class="col">
|
<!-- Screenshot Carousel -->
|
||||||
<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 id="screenshotCarousel" class="carousel slide" data-bs-ride="carousel">
|
||||||
<div class="carousel-inner">
|
<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 active">
|
||||||
<div class="carousel-item"><img class="w-100 d-block" src="assets/img/screen02.jpeg" alt="Slide Image"></div>
|
<img src="/assets/img/screen01.jpeg" class="d-block w-100 rounded-3" alt="The RetroDECK logo displayed on a Steam Deck">
|
||||||
<div class="carousel-item"><img class="w-100 d-block" src="assets/img/screen03.jpeg" alt="Slide Image"></div>
|
</div>
|
||||||
<div class="carousel-item"><img class="w-100 d-block" src="assets/img/screen04.jpeg" alt="Slide Image"></div>
|
<div class="carousel-item">
|
||||||
<div class="carousel-item"><img class="w-100 d-block" src="assets/img/screen05.jpeg" alt="Slide Image"></div>
|
<img src="/assets/img/screen02.jpeg" class="d-block w-100 rounded-3" alt="The RetroDECK icon visible in a Steam Library">
|
||||||
<div class="carousel-item"><img class="w-100 d-block" src="assets/img/screen06.jpeg" alt="Slide Image"></div>
|
</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>
|
||||||
</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>
|
</div>
|
||||||
</div><!-- End: Photos -->
|
<!-- End Carousel -->
|
||||||
</div>
|
|
||||||
</section><!-- End: Lightbox Gallery -->
|
<!-- Donate Jumbotron -->
|
||||||
<!-- Start: Banner Color -->
|
<div class="p-5 mb-4 bg-body-tertiary rounded-3" id="lead-jumbotron">
|
||||||
<section class="py-4 py-xl-5">
|
<div class="container-fluid py-4">
|
||||||
<div class="container">
|
<h1 class="display-5 fw-bold">We can't do this alone</h1>
|
||||||
<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);">
|
<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>
|
||||||
<div class="pb-2 pb-lg-1">
|
<a class="btn btn-dark btn-lg" type="button" target="_blank" rel="noopener noreferrer" href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
|
||||||
<h2 class="fw-bold mb-2" style="color: rgb(255,255,255);text-align: center;">POWERED BY ES-DE & THE RETRODECK FRAMEWORK</h2>
|
<i class="bi bi-balloon-heart"></i> Learn how to donate
|
||||||
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- End Jumbotron -->
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</section><!-- End: Banner Color -->
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
||||||
<!-- Start: Features Clean -->
|
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
||||||
<section id="features" class="features-clean">
|
crossorigin="anonymous"></script>
|
||||||
<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 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">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_about/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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
231
index_old.html
Normal file
231
index_old.html
Normal file
|
|
@ -0,0 +1,231 @@
|
||||||
|
<!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_about/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="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 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">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_about/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>
|
||||||
Loading…
Reference in a new issue