Web UI fixes

README.md

@@ -1,4 +1,5 @@
-![Sunshine icon](gamepad.png "Sunshine")
+<img src="assets/web/third_party/sunshine.svg" alt="Sunshine Logo" width="200px">
+
 # Introduction
 Sunshine is a Gamestream host for Moonlight
 

assets/web/config.html

@@ -85,7 +85,7 @@ <h1 class="my-4">Configuration</h1>
           <option value="ds4">DS4 (PS4)</option>
           <option value="x360">X360 (Xbox 360)</option>
         </select>
-        <div class="form-text">Automatically configure port forwarding</div>
+        <div class="form-text">Choose which type of gamepad to Emulate on the host</div>
       </div>
       <!--Ping Timeout-->
       <div class="mb-3">
@@ -186,7 +186,8 @@ <h1 class="my-4">Configuration</h1>
           The display modes advertised by Sunshine<br />
           Some versions of Moonlight, such as Moonlight-nx (Switch), rely on
           this list to ensure that the requested resolutions and fps are
-          supported.
+          supported.<br>
+          This setting does <b>not</b> change how the screen stream is sent to Moonlight
         </div>
       </div>
       <!-- Mapping Key AltRight to Key Windows -->
@@ -628,6 +629,9 @@ <h1 class="my-4">Configuration</h1>
           placeholder="superfast"
           v-model="config.sw_preset"
         />
+        <div class="form-text">
+          Available Values: ultrafast, superfast, veryfast, faster, fast, medium, slow, slower, veryslow
+        </div>
       </div>
       <div class="mb-3">
         <label for="sw_tune" class="form-label">SW Tune</label>
@@ -637,6 +641,15 @@ <h1 class="my-4">Configuration</h1>
           placeholder="zerolatency"
           v-model="config.sw_tune"
         />
+        <div class="form-text">
+          Available Tune settings: <br>
+          film – use for high quality movie content; lowers deblocking<br>
+          animation – good for cartoons; uses higher deblocking and more reference frames<br>
+          grain – preserves the grain structure in old, grainy film material<br>
+          stillimage – good for slideshow-like content<br>
+          fastdecode – allows faster decoding by disabling certain filters<br>
+          zerolatency – good for fast encoding and low-latency streaming<br>
+        </div>
       </div>
     </div>
     <!--Nvidia Encoder Settings-->

assets/web/header.html

@@ -16,7 +16,10 @@
       style="background-color: #ffc400"
     >
       <div class="container-fluid">
-        <span class="navbar-brand">Sunshine</span>
+        <span class="navbar-brand">
+          <img src="/third_party/sunshine.svg" alt="" width="48px" height="48px">
+          Sunshine
+        </span>
         <button
           class="navbar-toggler"
           type="button"
@@ -54,3 +57,14 @@
     </nav>
   </body>
 </html>
+
+<script>
+  let el = document.querySelector("a[href='"+document.location.pathname+"']");
+  if(el)el.classList.add("active")
+</script>
+
+<style>
+  .nav-link.active {
+    font-weight: 500;
+  }
+</style>

assets/web/index.html

@@ -1,7 +1,7 @@
 <div id="content" class="container">
   <div class="row">
     <div class="col-md-6 py-4" style="margin: 0 auto">
-      <h1>Hello, Sunshine!</h1>
+      <h1>Hello, Sunshine! <img src="third_party/sunshine.svg" height="48px"></h1>
       <p>Sunshine is a Gamestream host for Moonlight</p>
       <a href="https://github.com/loki-47-6F-64/sunshine"
         >Official GitHub Repository</a

assets/web/pin.html

@@ -28,14 +28,14 @@ <h1 class="my-4">PIN Pairing</h1>
     fetch("/api/pin", { method: "POST", body: b })
       .then((response) => response.json())
       .then((response) => {
-        if (response.status) {
+        if (response.status && response.status === "true") {
           document.querySelector(
             "#status"
           ).innerHTML = `<div class="alert alert-success" role="alert">Success! Please check Moonlight to continue</div>`;
         } else {
           document.querySelector(
             "#status"
-          ).innerHTML = `<div class="alert alert-danger" role="alert">PIN does not match, please check if it's typed correctly</div>`;
+          ).innerHTML = `<div class="alert alert-danger" role="alert">Pairing Failed: Check if the PIN is typed correctly</div>`;
         }
       });
   });

assets/web/welcome.html

@@ -1,13 +1,15 @@
 <main role="main" id="app" style="max-width: 600px; margin: 0 auto">
   <header>
-    <h1 class="mb-0">Welcome to Sunshine!</h1>
-    <p class="mb-0 align-self-start">
-      Before Getting Started, write down below these credentials
+    <h1 class="my-2">
+      <img src="third_party/sunshine.svg" alt="">
+      Welcome to Sunshine!
+    </h1>
+    <p class="my-2 align-self-start">
+      Before Getting Started, we need you to make a new username and password for accessing the Web UI.
     </p>
   </header>
   <div class="alert alert-warning">
-    These Credentials down below are needed to access the rest of the
-    application.<br />
+    These Credentials down below are needed to access Sunshine's Web UI.<br />
     Keep them safe, since <b>you will never see them again!</b>
   </div>
   <form @submit.prevent="save">

sunshine/confighttp.cpp

@@ -242,6 +242,16 @@ void getVueJs(resp_https_t response, req_https_t request) {
   response->write(content);
 }
 
+
+void getSunshineSvg(resp_https_t response, req_https_t request) {
+  print_req(request);
+  const SimpleWeb::CaseInsensitiveMultimap headers {
+    { "Content-Type", "image/svg+xml" }
+  };
+  std::string content = read_file(WEB_DIR "third_party/sunshine.svg");
+  response->write(content,headers);
+}
+
 void getApps(resp_https_t response, req_https_t request) {
   if(!authenticate(response, request)) return;
 
@@ -575,6 +585,7 @@ void start() {
   server.resource["^/third_party/bootstrap.min.css$"]["GET"]       = getBootstrapCss;
   server.resource["^/third_party/bootstrap.bundle.min.js$"]["GET"] = getBootstrapJs;
   server.resource["^/third_party/vue.js$"]["GET"]                  = getVueJs;
+  server.resource["^/third_party/sunshine.svg$"]["GET"]            = getSunshineSvg;
   server.config.reuse_address                                      = true;
   server.config.address                                            = "0.0.0.0"s;
   server.config.port                                               = port_https;