-
-
Notifications
You must be signed in to change notification settings - Fork 1k
/
Copy pathindex.html
412 lines (396 loc) · 24 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
<!DOCTYPE html>
<html lang="en">
<head>
<title>LizardByte - Sunshine</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Self-hosted game stream host for Moonlight." />
<meta name="author" content="" />
<!-- Open Graph/Twitter metadata -->
<meta property="og:site_name" content="LizardByte" />
<meta property="og:title" content="LizardByte | Sunshine" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://app.lizardbyte.dev/uno/github/openGraphImages/Sunshine_624x312.png" />
<meta property="og:url" content="https://app.lizardbyte.dev/Sunshine" />
<meta property="og:description" content="Self-hosted game stream host for Moonlight." />
<meta property="og:locale" content="en-US" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="og:twitter_site" content="@lizardbytedev" />
<meta property="og:twitter_site:id" content="@lizardbytedev" />
<meta property="og:twitter_creator" content="@lizardbytedev" />
<meta property="og:twitter_creator:id" content="@lizardbytedev" />
<meta property="twitter:image" content="https://app.lizardbyte.dev/uno/github/openGraphImages/Sunshine_624x312.png" />
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="https://app.lizardbyte.dev/assets/images/favicon.ico" />
<!-- FontAwesome-->
<link href="https://app.lizardbyte.dev/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<!-- Bootstrap theme-->
<link href="https://app.lizardbyte.dev/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Custom css-->
<link href="https://app.lizardbyte.dev/css/custom.css" rel="stylesheet" />
<script src="https://app.lizardbyte.dev/node_modules/jquery/dist/jquery.min.js"></script>
<script src="https://app.lizardbyte.dev/node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
<!-- Crowdin widget -->
<script src="https://app.lizardbyte.dev/js/crowdin.js"></script>
<script src="https://app.lizardbyte.dev/js/crowdin_web_widget.js"></script>
</head>
<body class="d-flex flex-column h-100 bg-dark-gray">
<main class="flex-shrink-0 overflow-hidden">
<!-- Navigation-->
<nav id="nav-container"></nav>
<!-- Header-->
<header class="bg-dark py-0">
<section class="offset-anchor" id="Top">
<div id="carousel1" class="carousel slide carousel-fade" data-bs-ride="carousel"
style="height:50vh">
<!--Indicators-->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carousel1" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carousel1" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carousel1" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view">
<img src="assets/images/AdobeStock_305732536_1920x1280.jpg" alt="">
<div class="mask rgba-black-light"></div>
</div>
<!-- <div class="carousel-caption">-->
<!-- <h3 class="h3-responsive">1</h3>-->
<!-- <p>First text</p>-->
<!-- </div>-->
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img src="assets/images/AdobeStock_231616343_1920x1280.jpg" alt="">
<div class="mask rgba-black-strong"></div>
</div>
<!-- <div class="carousel-caption">-->
<!-- <h3 class="h3-responsive">2</h3>-->
<!-- <p>Secondary text</p>-->
<!-- </div>-->
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img src="assets/images/AdobeStock_303330124_1920x1280.jpg" alt="">
<div class="mask rgba-black-slight"></div>
</div>
<!-- <div class="carousel-caption">-->
<!-- <h3 class="h3-responsive">3</h3>-->
<!-- <p>Third text</p>-->
<!-- </div>-->
</div>
</div>
<!--/.Slides-->
<div>
<h1 class="carousel-overlay-title display-5 fw-bolder text-white mb-2">Sunshine</h1>
<p class="carousel-overlay-subtitle lead fw-bolder text-white-50 mb-4">
A LizardByte project</p>
</div>
<!--Controls-->
<button class="carousel-control-prev" type="button" data-bs-target="#carousel1"
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="#carousel1"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<!--/.Controls-->
</div>
</section>
</header>
<!-- About section-->
<section class="offset-anchor py-5" id="About">
<div class="container px-auto">
<p class="lead text-center text-white mx-auto mt-0 mb-5">
Sunshine is a self-hosted game stream host for Moonlight. Offering low latency, cloud gaming
server capabilities with support for AMD, Intel, and Nvidia GPUs for hardware encoding. Software
encoding is also available. You can connect to Sunshine from any Moonlight client on a variety
of devices. A web UI is provided to allow configuration, and client pairing, from your favorite
web browser. Pair from the local server or any mobile device.
</p>
</div>
</section>
<!-- Features section-->
<section class="offset-anchor bg-dark py-5" id="Features">
<div class="container px-auto">
<h2 class="text-center text-white fw-bolder my-5">Features</h2>
<!-- Create a card for each feature -->
<div class="row gx-5">
<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-server"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Self-hosted</h5>
<p class="mb-0">
Run Sunshine on your own hardware. No need to pay monthly fees to a
cloud gaming provider.
</p>
</div>
</div>
</div>
</div>
</div>
<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">
<img height="40" src="https://moonlight-stream.org/images/moonlight.svg">
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Moonlight Support</h5>
<p class="mb-0">
Connect to Sunshine from any Moonlight client. Moonlight is available
for Windows, macOS, Linux, Android, iOS, Xbox, and more.
</p>
</div>
</div>
</div>
</div>
</div>
<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">Hardware Encoding</h5>
<p class="mb-0">
Sunshine supports AMD, Intel, and Nvidia GPUs for hardware encoding.
Software encoding is also available.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<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-globe"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Low Latency</h5>
<p class="mb-0">
Sunshine is designed to provide the lowest latency possible to achieve optimal gaming performance.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<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-gamepad"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Control</h5>
<p class="mb-0">
Sunshine emulates an Xbox 360 or DS4 controller. Use nearly any
controller on your Moonlight client!<br>
<small>
<ul>
<li>DS4 emulation is only available on Windows.</li>
<li>Gamepad emulation is not currently supported on macOS.</li>
</ul>
</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<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-gear"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Configurable</h5>
<p class="mb-0">
Sunshine offers many configuration options to customize your experience.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- More cards -->
<div class="container py-5 px-auto">
<div class="container col-md-10">
<!-- Docs section -->
<section class="offset-anchor py-4" id="Docs">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<i class="fa-fw fa-2x fas fa-book"></i>
<div class="ms-3">
<h2 class="fw-bolder mb-0">Documentation</h2>
<p class="mb-0">
Read the documentation to learn how to install, use, and configure Sunshine.
</p>
</div>
</div>
</div>
<div class="card-footer p-3 ms-3">
<a class="btn btn-outline-light me-3 mb-3" href="https://docs.lizardbyte.dev/projects/sunshine" target="_blank">
<i class="fa-fw fas fa-book"></i>
Read the Docs
</a>
</div>
</div>
</section>
<!-- Download section -->
<section class="offset-anchor py-4" id="Download">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<i class="fa-fw fa-2x fas fa-download"></i>
<div class="ms-3">
<h2 class="fw-bolder mb-0">Download</h2>
<p class="mb-0">
Download Sunshine for your platform.
</p>
</div>
</div>
</div>
<div class="card-footer p-3 ms-3">
<a class="btn btn-outline-light me-3 mb-3" href="https://github.com/LizardByte/Sunshine/releases/latest" target="_blank">
<i class="fa-fw fab fa-github"></i>
Latest
</a>
<a class="btn btn-outline-light me-3 mb-3" href="https://github.com/LizardByte/Sunshine/releases/tag/nightly-dev" target="_blank">
<i class="fa-fw fas fa-infinity"></i>
Nightly
</a>
<a class="btn btn-outline-light me-3 mb-3" href="https://hub.docker.com/r/lizardbyte/sunshine" target="_blank">
<i class="fa-fw fab fa-docker"></i>
Docker
</a>
</div>
</div>
</section>
</div>
</div>
<!-- Donate section -->
<section class="offset-anchor bg-dark p-5" id="Donate">
<div class="container mb-5 shadow border-0 bg-dark-gray rounded-0 col-md-7">
<div class="d-table-row g-0 text-white">
<div class="d-table-cell px-3 align-middle text-center">
<h1>
<i class="fa-fw fas fa-coins"></i>
</h1>
</div>
<div class="col-sm-auto border-white my-3 px-3 py-2 border-start">
<div class="container">
<h4 class="card-title mb-3 fw-bolder">Donate</h4>
</div>
<a
class="text-decoration-none"
href="https://github.com/sponsors/LizardByte"
target="_blank">
<img class="m-3"
alt="GitHub Sponsors"
src="https://img.shields.io/github/sponsors/lizardbyte?label=Github%20Sponsors&style=for-the-badge&color=green&logo=githubsponsors"
>
</a>
<a
class="text-decoration-none"
href="https://mee6.xyz/m/804382334370578482"
target="_blank">
<img class="m-3"
alt="MEE6"
src="https://img.shields.io/static/v1?style=for-the-badge&label=MEE6&message=Donate&color=green&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAklEQVR4AewaftIAAAG6SURBVJXBPWgTARiA4fe7H/WKCGoo0qAcIhUJHCSnoIgZYiq4ugk6BEuEimRxk04SwcEhU0pMDY5xcnSK0N22XCexYHSxkpBCB69gc58ntHCcEerzCCmVIMyjVEFLCi4xgT5ID6HV8Zw1EoR9D4LQMQwav8Y6DwiTqW1KO4qoLXtOSMwkNr8ROmON3kfKHUD4N4kUX9Eblx8tdleb9T2D2Fi1AVLk0KQ4Vm0Qk0oQ5lX1IyD8HxUR31DVKiDsU43YHQ1I290eolFEgqhq1RAokbDx+iXd8nl2vm1y4OfgO2/nLrC+9JwkgZKl4JIwc/Um4WCLqeksB46dzJC7/5izxdskKbgWKZlcgUyuQJJh2fi1Z0xiCfQVZkkJhz/Y+fqZP+zjJzh10SNNoG8p9IBZUkafAjaf3OW0bTO6doviizekKfQsEWmp6kNASMhen6O89I6Z7QEfrpSJ+IuKSMtcb9a38gtPs4BPyvDMOb64l9AjR0kTod3xpl4ZxEyRGugKh6YrpkiNmElstVnf8xcWu5Yp05FSAITJ1DalLci9Zc8JiQkplSDMo1RBSwouMYE+SA+h1fGcNRJ+A8xgoQAar6IXAAAAAElFTkSuQmCC"
>
</a>
<a
class="text-decoration-none"
href="https://www.patreon.com/LizardByte"
target="_blank">
<img class="m-3"
alt="Patreon"
src="https://img.shields.io/badge/dynamic/json?color=green&label=Patreon&style=for-the-badge&query=patron_count&url=https%3A%2F%2Fapp.lizardbyte.dev%2Funo%2Fpatreon%2FLizardByte.json&logo=patreon"
>
</a>
<a
class="text-decoration-none"
href="https://www.paypal.com/paypalme/ReenigneArcher"
target="_blank">
<img class="m-3"
alt="PayPal"
src="https://img.shields.io/static/v1?style=for-the-badge&label=PayPal&message=Donate&color=green&logo=paypal"
>
</a>
</div>
</div>
</div>
</section>
<!-- Support -->
<section class="offset-anchor bg-dark p-5" id="Support">
<div class="col-md-7 mx-auto mb-5">
<div class="container shadow border-0 bg-primary rounded-0">
<div class="d-table-row g-0 text-white">
<div class="d-table-cell px-4 align-middle text-center">
<div class="fs-3 fw-bold text-white">Support Center</div>
<div class="text-white">Find answers and ask questions.</div>
</div>
<div class="col-sm-auto border-white my-3 px-4 py-2 border-start">
<p class="card-text">
<em>The one who knows all the answers has not been asked all the questions.</em>
– Confucius.
</p>
<div class="input-group mb-2">
<a href="support">
<button class="btn btn-outline-light rounded-0"
id="button-support"
type="button"
>Support</button>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer-->
<footer class="bg-dark py-4 mt-auto" id="footer-container"></footer>
<!-- Audio player bottom navbar -->
<nav id="player-navbar"></nav>
<!-- Bootstrap core JS-->
<script src="https://app.lizardbyte.dev/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Get navbar -->
<script src="https://app.lizardbyte.dev/js/navbar.js"></script>
<!-- Get footer -->
<script src="https://app.lizardbyte.dev/js/footer.js"></script>
<!-- Discord WidgetBot -->
<script src="https://app.lizardbyte.dev/js/discord.js"></script>
</body>
</html>