Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-21 14:35:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial commit of new layout

Browse source
This commit is contained in:
Adam Iannazzone 2024-04-18 09:19:40 -04:00
parent 70b8e0e6d0
commit 853b492159
4 changed files with 401 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
assets/img/squircle-icon.svg Normal file
View 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,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"/>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.4 KiB

23
css/style.css Normal file
View 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;
}

328
index.html
View file

@ -1,231 +1,161 @@
<!DOCTYPE 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 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.">
<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&amp;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">
<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>
<!-- 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>
<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><!-- 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>&nbsp;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>
</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>
</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>
<!-- 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>
<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>
<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 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&nbsp;<i class="fa fa-heart"></i>&nbsp;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>
<!-- 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>
</html>

231
index_old.html Normal file
View 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&amp;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>&nbsp;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&nbsp;<i class="fa fa-heart"></i>&nbsp;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>