docs(website): add clients section (#2791)

This commit is contained in:
ReenigneArcher 2024-07-01 21:13:14 -04:00 committed by GitHub
commit defd98d3f5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -164,7 +164,8 @@
<h5 class="fw-bolder mb-0">Moonlight Support</h5> <h5 class="fw-bolder mb-0">Moonlight Support</h5>
<p class="mb-0"> <p class="mb-0">
Connect to Sunshine from any Moonlight client. Moonlight is available Connect to Sunshine from any Moonlight client. Moonlight is available
for Windows, macOS, Linux, Android, iOS, Xbox, and more. for Windows, macOS, Linux, Android, iOS, Xbox, and more. See
<a class="text-white" href="#Clients">clients</a> for more information.
</p> </p>
</div> </div>
</div> </div>
@ -251,6 +252,351 @@
</div> </div>
</section> </section>
<!-- Clients section-->
<section class="offset-anchor bg-dark py-5" id="Clients">
<div class="container px-auto">
<h2 class="text-center text-white fw-bolder my-5">Clients</h2>
<!-- Create a card for each client -->
<div class="row gx-5">
<!-- Android -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fab fa-android"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/moonlight-stream/moonlight-android" target="_blank" class="text-white text-decoration-none">
Android
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-info rounded-pill">Official</span>
</div>
</div>
</div>
<div class="card-footer p-3 ms-3">
<div>
<a href="https://play.google.com/store/apps/details?id=com.limelight" target="_blank">
<img alt="Get it on Google Play"
src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
height="60">
</a>
</div>
<div>
<a href="https://www.amazon.com/gp/product/B00JK4MFN2" target="_blank">
<img alt="Available at Amazon Appstore"
src="https://images-na.ssl-images-amazon.com/images/G/01/mobile-apps/devportal2/res/images/amazon-appstore-badge-english-black.png"
height="60"
style="padding: 10px;">
</a>
</div>
<div>
<a href="https://f-droid.org/packages/com.limelight" target="_blank">
<img alt="Get it on F-Droid"
src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
height="60">
</a>
</div>
</div>
</div>
</div>
<!-- ChromeOS -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fab fa-chrome"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/moonlight-stream/moonlight-chrome" target="_blank" class="text-white text-decoration-none">
ChromeOS
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-info rounded-pill">Official</span>
</div>
</div>
</div>
<div class="card-footer p-3 ms-3">
<div class="pb-3">
<a href="https://chrome.google.com/webstore/detail/moonlight-game-streaming/gemamigbbenahjlfnmlfdjhdnkpbkfjj" target="_blank" class="btn btn-outline-light">
<img alt="Available in the Chrome Web Store"
src="https://developer.chrome.com/static/docs/webstore/branding/image/206x58-chrome-web-043497a3d766e.png"
height="30">
</a>
</div>
</div>
</div>
</div>
<!-- iOS -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fab fa-apple"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/moonlight-stream/moonlight-ios" target="_blank" class="text-white text-decoration-none">
iOS
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-info rounded-pill">Official</span>
</div>
</div>
</div>
<div class="card-footer p-3 ms-3">
<div class="pb-3">
<a href="https://apps.apple.com/us/app/moonlight-game-streaming/id1000551566" target="_blank">
<img alt="Download on the App Store"
src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
height="40">
</a>
</div>
<div class="pb-3">
<a href="https://apps.apple.com/us/app/moonlight-game-streaming/id1000551566" target="_blank">
<img alt="Download on Apple TV"
src="https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-apple-tv.svg"
height="40">
</a>
</div>
</div>
</div>
</div>
<!-- Moonlight-QT -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fab fa-linux"></i>
<i class="fa-fw fa-2x fab fa-apple"></i>
<i class="fa-fw fa-2x fab fa-windows"></i>
<i class="fa-fw fa-2x fab fa-steam"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/moonlight-stream/moonlight-qt" target="_blank" class="text-white text-decoration-none">
QT
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-info rounded-pill">Official</span>
</div>
</div>
</div>
<div class="card-footer p-3 ms-3">
<div class="pb-3">
<a href="https://github.com/moonlight-stream/moonlight-qt/releases" target="_blank" class="btn btn-info">
<i class="fab fa-github"></i> Download on GitHub
</a>
</div>
</div>
</div>
</div>
<!-- Embedded -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fas fa-microchip"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/moonlight-stream/moonlight-embedded" target="_blank" class="text-white text-decoration-none">
Embedded
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-info rounded-pill">Official</span>
</div>
</div>
</div>
<div class="card-footer p-3 ms-3">
<div class="pb-3">
<a href="https://github.com/irtimmer/moonlight-embedded/wiki/Packages" target="_blank" class="btn btn-info">
<i class="fas fa-download"></i> Download
</a>
</div>
</div>
</div>
</div>
<!-- Xbox One/Series -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fab fa-xbox"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/TheElixZammuto/moonlight-xbox" target="_blank" class="text-white text-decoration-none">
Xbox One/Series
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-warning rounded-pill">Community</span>
</div>
</div>
</div>
<div class="card-footer p-3 ms-3">
<div class="pb-3">
<a href="https://apps.microsoft.com/store/detail/moonlight-uwp/9MW1BS08ZBTH" target="_blank">
<img alt="Get it from Microsoft"
src="https://get.microsoft.com/images/en-us%20dark.svg"
height="40">
</a>
</div>
</div>
</div>
</div>
<!-- PS Vita -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fab fa-playstation"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/xyzz/vita-moonlight" target="_blank" class="text-white text-decoration-none">
PS Vita
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-warning rounded-pill">Community</span>
</div>
</div>
</div>
<div class="card-footer p-3 ms-3">
<div class="pb-3">
<a href="https://github.com/xyzz/vita-moonlight/releases" target="_blank" class="btn btn-info">
<i class="fab fa-github"></i> Download on GitHub
</a>
</div>
</div>
</div>
</div>
<!-- Nintendo Switch -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fas fa-code"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/XITRIX/Moonlight-Switch" target="_blank" class="text-white text-decoration-none">
Nintendo Switch
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-warning rounded-pill">Community</span>
</div>
</div>
</div>
<div class="card-footer p-3 ms-3">
<div class="pb-3">
<a href="https://github.com/XITRIX/Moonlight-Switch/releases" target="_blank" class="btn btn-info">
<i class="fab fa-github"></i> Download on GitHub
</a>
</div>
</div>
</div>
</div>
<!-- Nintendo Wii U -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fas fa-code"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/GaryOderNichts/moonlight-wiiu" target="_blank" class="text-white text-decoration-none">
Nintendo Wii U
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-warning rounded-pill">Community</span>
</div>
</div>
</div>
<div class="card-footer p-3 ms-3">
<div class="pb-3">
<a href="https://github.com/GaryOderNichts/moonlight-wiiu#quick-start" target="_blank" class="btn btn-info">
<i class="fas fa-download"></i> Download
</a>
</div>
</div>
</div>
</div>
<!-- LG webOS TV -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark-gray text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fas fa-code"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/mariotaku/moonlight-tv" target="_blank" class="text-white text-decoration-none">
LG webOS TV
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-warning rounded-pill">Community</span>
</div>
</div>
</div>
<div class="card-footer p-3 ms-3">
<div class="pb-3">
<a href="https://github.com/mariotaku/moonlight-tv#download" target="_blank" class="btn btn-info">
<i class="fas fa-download"></i> Download
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- More cards --> <!-- More cards -->
<div class="container py-5 px-auto"> <div class="container py-5 px-auto">
<div class="container col-md-10"> <div class="container col-md-10">