Implement the new design from #649

Dockerfile

@@ -15,6 +15,7 @@
 
 # Copy sources
 COPY backend/ /speedtest/backend
+COPY frontend/ /speedtest/frontend
 
 COPY results/*.php /speedtest/results/
 COPY results/*.ttf /speedtest/results/
@@ -30,7 +31,7 @@
 # Prepare default environment variables
 ENV TITLE=LibreSpeed
 ENV MODE=standalone
 ENV PASSWORD=password
 ENV TELEMETRY=false
 ENV ENABLE_ID_OBFUSCATION=false
 ENV REDACT_IP_ADDRESSES=false

Dockerfile.alpine

@@ -29,6 +29,7 @@
 
 # Copy sources
 COPY backend/ /speedtest/backend
+COPY frontend/ /speedtest/frontend
 
 COPY results/*.php /speedtest/results/
 COPY results/*.ttf /speedtest/results/
@@ -44,7 +45,7 @@
 # Prepare default environment variables
 ENV TITLE=LibreSpeed
 ENV MODE=standalone
 ENV PASSWORD=password
 ENV TELEMETRY=false
 ENV ENABLE_ID_OBFUSCATION=false
 ENV REDACT_IP_ADDRESSES=false

docker/entrypoint.sh

@@ -40,14 +40,18 @@ if [ "$MODE" == "backend" ]; then
   fi
 fi
 
-# Set up unified index.php
-if [ "$MODE" != "backend" ]; then
-  cp /speedtest/ui.php /var/www/html/index.php
+# Set up index.php for frontend-only or standalone modes
+if [[ "$MODE" == "frontend" || "$MODE" == "dual" ]]; then
+  cp -av /speedtest/frontend/* /var/www/html/
+elif [ "$MODE" == "standalone" ]; then
+  cp -av /speedtest/frontend/* /var/www/html/
+  echo '[{"name":"local","server":"/backend",  "dlURL": "garbage.php", "ulURL": "empty.php", "pingURL": "empty.php", "getIpURL": "getIP.php", "sponsorName": "", "sponsorURL": "", "id":1 }]' > /var/www/html/server-list.json
 fi
 
 # Apply Telemetry settings when running in standalone or frontend mode and telemetry is enabled
 if [[ "$TELEMETRY" == "true" && ("$MODE" == "frontend" || "$MODE" == "standalone" || "$MODE" == "dual") ]]; then
   cp -r /speedtest/results /var/www/html/results
+  sed -i 's/telemetry_level": ".*"/telemetry_level": "basic"/' /var/www/html/settings.json
 
   if [ "$MODE" == "frontend" ]; then
     mkdir /var/www/html/backend

frontend/README.md

@@ -0,0 +1,76 @@
+# LibreSpeed frontend
+
+This is a re-implementation of the LibreSpeed user interface based on [the
+design by fromScratch](https://github.com/librespeed/speedtest/issues/585). The
+code that's doing the actual speed test is still the same.
+
+### Desktop
+
+![Desktop screenshot](./screenshots/desktop.png)
+
+### Mobile
+
+![Mobile screenshot](./screenshots/mobile.png)
+
+## How to use
+
+Copy everything in this directory into the LibreSpeed root, next to
+`speedtest.js` and `speedtest_worker.js`, overwriting the `index.html` file that
+may already be there. That's it!
+
+## Configuration
+
+In the [`server-list.json`](./server-list.json) file you can provide a list of
+testing servers. If you only have a single testing server, just provide a list
+with one item in it, being your server. The frontend will then skip doing an
+automatic server selection and will not allow the user to change servers.
+
+For more advanced applications, you can override any of the settings that are
+defined in `speedtest_worker.js` using the file
+[`settings.json`](./settings.json). See
+[`speedtest_worker.js`](../speedtest_worker.js) for documentation on the
+different settings (scroll down a bit to where you find the definition of the
+`settings` object).
+
+## Features
+
+- Shows upload and download speed and progress
+- Shows ping and jitter
+- Shows your IP address and internet service provider if the testing server
+  supports it
+- Can handle a single testing server or a list of servers
+- Can save telemetry and share results if the hosting server supports it (set
+  `telemetry_level` in [`settings.json`](./settings.json))
+- Does not require any build steps; implementation is pure JS & CSS
+- Has zero dependencies
+
+## Limitations
+
+- This frontend relies heavily on modern browser features. It should work very
+  well in all modern ("evergreen") browsers, but has **no** backwards compatibility
+  with older browsers.
+
+## Credits
+
+**Design** by fromScratch Studio - 2022, 2023
+([www.fromscratch.io](https://www.fromscratch.io))
+
+> "During Hacktoberfest 2022 & 2023, fromScratch Studio took on the request for
+> LibreSpeed redesign and UI improvements. We ran 2 design sprints one on '22 and
+> one on '23, and produced high-fidelity screens for LibreSpeed redesign.
+> Furthermore, this year, we produced high-fidelity screens for mobile-view as
+> well."
+
+_-- Chris-ZoGo, https://github.com/librespeed/speedtest/issues/585_
+
+**Implementation** by Timendus - 2024
+([https://github.com/Timendus](https://github.com/Timendus))
+
+> "I had a couple of days of free time, and I came across the design by
+> fromScratch. I thought it looked great, and that it deserved a good
+> implementation, so I set out to make one. I've taken the liberty of changing a
+> couple of details, coming up with some animations and adding a few small
+> features, but otherwise I've tried to stay as close to the "intention" of the
+> design as I could."
+
+_-- Timendus, https://github.com/librespeed/speedtest/pull/649_

frontend/index.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta
+      name="description"
+      content="Free and Open Source Speedtest. Run it right now in your browser, or self-host on a PHP, Golang, Rust or Node server. License: LGPL."
+    />
+    <link rel="shortcut icon" href="images/favicon.svg" />
+    <script type="text/javascript" src="speedtest.js"></script>
+    <script type="text/javascript" src="javascript/index.js"></script>
+    <link rel="stylesheet" type="text/css" href="styling/index.css" />
+    <title>LibreSpeed - Free and Open Source Speedtest</title>
+  </head>
+
+  <body>
+    <header>
+      <img src="images/logo.svg" alt="LibreSpeed" />
+    </header>
+    <main>
+      <h1>Free and Open Source Speedtest.</h1>
+      <p class="tagline">No Flash, No Java, No Websockets, No Bullsh*t</p>
+
+      <div class="server-selector">
+        <div class="chosen">
+          <div class="chevron">
+            <img src="images/chevron.svg" alt="select..." />
+          </div>
+          <p>current server</p>
+          <h2 id="selected-server">searching nearest server...</h2>
+        </div>
+        <ul class="servers"></ul>
+        <p class="sponsor" id="sponsor">&nbsp;</p>
+      </div>
+
+      <p id="privacy-warning" class="hidden">
+        by clicking the start button you agree to our privacy policy<br />
+        <a href="#" id="choose-privacy">or choose your privacy options</a>
+      </p>
+      <button class="disabled" id="start-button"></button>
+
+      <div class="gauge-layout">
+        <div class="ping hidden">
+          <span class="label">Ping</span>:&nbsp;
+          <span class="value" id="ping">00</span>ms
+        </div>
+
+        <div class="gauge download" id="download-gauge">
+          <div class="progress"></div>
+          <div class="speed"></div>
+          <h1><span id="download-speed">00</span> Mbps</h1>
+          <h2>Download</h2>
+        </div>
+
+        <div class="gauge upload" id="upload-gauge">
+          <div class="progress"></div>
+          <div class="speed"></div>
+          <h1><span id="upload-speed">00</span> Mbps</h1>
+          <h2>Upload</h2>
+        </div>
+
+        <div class="jitter hidden">
+          <span class="label">Jitter</span>:&nbsp;
+          <span class="value" id="jitter">00</span>ms
+        </div>
+      </div>
+
+      <button class="small inverted hidden" id="share-results">
+        Share results
+      </button>
+    </main>
+    <footer>
+      <p class="source">
+        <a href="https://github.com/librespeed/speedtest">source code</a>
+      </p>
+    </footer>
+
+    <dialog id="share">
+      <div class="close-dialog">
+        <img src="images/close-button.svg" alt="Close" />
+      </div>
+      <img id="results" src="" alt="Test results in graphical form" />
+      <button id="copy-link">Copy link</button>
+    </dialog>
+
+    <dialog id="privacy">
+      <div class="close-dialog">
+        <img src="images/close-button.svg" alt="Close" />
+      </div>
+      <section>
+        <h1>Privacy Policy</h1>
+        <p>
+          This HTML5 speed test server is configured with telemetry enabled.
+        </p>
+
+        <h2>What data we collect</h2>
+        <p>
+          At the end of the test, the following data is collected and stored:
+        </p>
+
+        <ul>
+          <li>Test ID</li>
+          <li>Time of testing</li>
+          <li>Test results (download and upload speed, ping and jitter)</li>
+          <li>IP address</li>
+          <li>ISP information</li>
+          <li>Approximate location (inferred from IP address, not GPS)</li>
+          <li>User agent and browser locale</li>
+          <li>Test log (contains no personal information)</li>
+        </ul>
+
+        <h2>How we use the data</h2>
+        <p>Data collected through this service is used to:</p>
+
+        <ul>
+          <li>
+            Allow sharing of test results (sharable image for forums, etc.)
+          </li>
+          <li>
+            To improve the service offered to you (for instance, to detect
+            problems on our side)
+          </li>
+        </ul>
+
+        <p>No personal information is disclosed to third parties.</p>
+
+        <h2>Your consent</h2>
+        <p>
+          By starting the test, you consent to the terms of this privacy policy.
+        </p>
+
+        <h2>Data removal</h2>
+        <p>
+          If you want to have your information deleted, you need to provide
+          either the ID of the test or your IP address. This is the only way to
+          identify your data, without this information we won't be able to
+          comply with your request.
+        </p>
+        <p>
+          Contact this email address for all deletion requests:
+          <a href="mailto:PUT@YOUR_EMAIL.HERE">TO BE FILLED BY DEVELOPER</a>.
+        </p>
+      </section>
+      <button id="close-privacy">Close</button>
+    </dialog>
+  </body>
+</html>