fix: point the modern frontend at the assets where they actually live

index-modern.html refers to styling/, javascript/ and images/ as if they sat
next to it, but they live under frontend/. Only docker/entrypoint.sh reconciles
that, by flattening those directories into the web root, so serving the
repository as it stands renders the page without stylesheet, script or logo.

Point the HTML at frontend/, have the entrypoint copy that directory as-is, and
move settings.json and server-list.json to the root that the page fetches them
from, so the repository layout and the deployed layout are the same. Update the
install instructions, which described the flattening.

DESIGN_SWITCH.md

@@ -73,9 +73,9 @@ URL parameters take precedence over the configuration file, making them useful f
 ### Docker Deployments
 - **Entry Point**: Root `index.html` file (lightweight redirect page)
 - **Old Design**: `index-classic.html` at root
-- **New Design**: `index-modern.html` at root (references assets in root subdirectories)
-- **Assets**: Frontend assets copied directly to root subdirectories (`styling/`, `javascript/`, `images/`, `fonts/`)
-- **No `frontend/` directory** - Assets are flattened to root level
+- **New Design**: `index-modern.html` at root (references assets in `frontend/` subdirectory)
+- **Assets**: Frontend assets in `frontend/`, copied into the web root unchanged
+- Same layout as a non-Docker deployment, so the two cannot drift apart
 
 Both designs are at the same directory level, ensuring that relative paths to shared resources like `backend/` and `results/` work correctly for both.
 
@@ -93,4 +93,4 @@ Both design HTML files are at the root level, eliminating path issues.
 The modern design references assets from the `frontend/` subdirectory (e.g., `frontend/styling/index.css`), while both designs can access shared resources like `backend/` and `results/` using the same relative paths.
 
 ### Docker
-In Docker deployments, the `frontend/` directory is flattened during container startup. Assets are copied directly to root-level subdirectories (`styling/`, `javascript/`, `images/`, `fonts/`), and `index-modern.html` references these root-level paths. This eliminates the `frontend/` parent directory in the container.
+In Docker deployments, `frontend/` is copied into the web root as it stands during container startup, so the container serves the same layout the repository has and the same paths `index-modern.html` asks for.

Dockerfile

@@ -27,6 +27,8 @@ COPY index.html /speedtest/
 COPY index-classic.html /speedtest/
 COPY index-modern.html /speedtest/
 COPY config.json /speedtest/
+COPY settings.json /speedtest/
+COPY server-list.json /speedtest/
 COPY stability.html /speedtest/
 COPY favicon.ico /speedtest/
 COPY manifest.webmanifest /speedtest/

README.md

@@ -41,8 +41,7 @@ Works with mobile versions too.
 Assuming you have PHP and a web server installed, the installation steps are quite simple.
 
 1. Download the source code and extract it
-1. Copy the project files to your web server's shared folder (ie. `/var/www/html/speedtest` for Apache). For the current layout, the web root should contain `index.html`, `index-classic.html`, `index-modern.html`, `stability.html`, `design-switch.js`, `config.json`, `speedtest.js`, `speedtest_worker.js`, `stability_worker.js`, `favicon.ico`, and the `backend` folder.
-1. Also copy the contents of `frontend/` into the same web root so the modern UI assets end up in `styling/`, `javascript/`, `images/`, and `fonts/` next to the HTML files.
+1. Copy the project files to your web server's shared folder (ie. `/var/www/html/speedtest` for Apache), keeping the layout as it is in the repository. The modern UI loads its assets from `frontend/`, so that directory is copied as a whole rather than unpacked.
 1. Optionally, copy the results folder too, and set up the database using the config file in it.
 1. Be sure your permissions allow read and execute access where needed.
 1. Visit YOURSITE/speedtest/index.html and voila!

doc.md

@@ -197,18 +197,20 @@ Requirements:
   * FreeType 2 and its PHP module
   * The PHP gd library
 
-To install the speed test frontend, copy the project files to your web server and keep the modern UI assets next to the HTML files:
+To install the speed test frontend, copy the project files to your web server, keeping the layout they have in the repository:
 
 * `index.html`
 * `index-classic.html`
 * `index-modern.html`
 * `design-switch.js`
 * `config.json`
+* `settings.json`
+* `server-list.json`
 * `speedtest.js`
 * `speedtest_worker.js`
 * `favicon.ico`
 * the `backend` folder
-* the contents of `frontend/`, copied so `styling/`, `javascript/`, `images/`, and `fonts/` sit next to the HTML files
+* the `frontend` folder, copied as a whole: the modern UI loads its assets from `frontend/`
 * Optionally, the `results` folder
 
 __Important:__ The speed test needs read and execute permissions in the installation folder where applicable!

docker/entrypoint.sh

@@ -82,15 +82,12 @@ if [[ "$MODE" == "frontend" || "$MODE" == "dual" ||  "$MODE" == "standalone" ]];
   cp /speedtest/index-classic.html /var/www/html/
   cp /speedtest/index-modern.html /var/www/html/
   cp /speedtest/stability.html /var/www/html/
-  # Copy frontend assets directly to root-level subdirectories (no frontend/ parent dir)
-  mkdir -p /var/www/html/styling /var/www/html/javascript /var/www/html/images /var/www/html/fonts
-  cp -a /speedtest/frontend/styling/* /var/www/html/styling/
-  cp -a /speedtest/frontend/javascript/* /var/www/html/javascript/
-  cp -a /speedtest/frontend/images/* /var/www/html/images/
-  cp -a /speedtest/frontend/fonts/* /var/www/html/fonts/ 2>/dev/null || true
+  # Keep the frontend assets under frontend/, which is where the HTML looks for
+  # them and where they sit in the repository
+  cp -a /speedtest/frontend /var/www/html/
 
   # Copy frontend config files
-  cp /speedtest/frontend/settings.json /var/www/html/settings.json 2>/dev/null || true
+  cp /speedtest/settings.json /var/www/html/settings.json 2>/dev/null || true
   if [ -f /servers.json ]; then
     echo "using mounted /servers.json for server-list.json"
     cp /servers.json /var/www/html/server-list.json

frontend/README.md

@@ -5,15 +5,18 @@ This directory contains the modern LibreSpeed UI assets.
 ## Deployment
 
 For installation and deployment, follow the top-level [README.md](../README.md)
-and [DESIGN_SWITCH.md](../DESIGN_SWITCH.md). In non-Docker deployments, the
-contents of this directory must be copied so `styling/`, `javascript/`,
-`images/`, and `fonts/` sit next to the root HTML files.
+and [DESIGN_SWITCH.md](../DESIGN_SWITCH.md). This directory is copied as a
+whole: `index-modern.html` loads its assets from `frontend/`, so the layout
+here is the layout that gets served.
 
 ## Configuration
 
-- `server-list.json` contains the default server list used by the modern UI.
-- `settings.json` overrides selected `speedtest_worker.js` settings.
-- `index.html` and `index-modern.html` show how the frontend is wired up.
+The two configuration files live at the top level rather than here, because the
+page fetches them relative to itself:
+
+- `../server-list.json` contains the default server list used by the modern UI.
+- `../settings.json` overrides selected `speedtest_worker.js` settings.
+- `index.html` and `../index-modern.html` show how the frontend is wired up.
 
 ## Notes
 

index-modern.html

@@ -6,7 +6,7 @@
   <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" />
+  <link rel="shortcut icon" href="frontend/images/favicon.svg" />
   <link rel="manifest" href="manifest.webmanifest" />
   <link rel="apple-touch-icon" href="images/icon-192.png" />
   <meta name="theme-color" content="#000000" />
@@ -15,14 +15,14 @@
     // Set this to a different URL to load the server list from another location.
     var SPEEDTEST_SERVERS = "server-list.json";
   </script>
-  <script type="text/javascript" src="javascript/index.js"></script>
-  <link rel="stylesheet" type="text/css" href="styling/index.css" />
+  <script type="text/javascript" src="frontend/javascript/index.js"></script>
+  <link rel="stylesheet" type="text/css" href="frontend/styling/index.css" />
   <title>LibreSpeed - Free and Open Source Speedtest</title>
 </head>
 
 <body>
   <header>
-    <img src="images/logo.svg" alt="LibreSpeed" />
+    <img src="frontend/images/logo.svg" alt="LibreSpeed" />
   </header>
   <main>
     <h1>Free and Open Source Speedtest.</h1>
@@ -31,7 +31,7 @@
     <div class="server-selector">
       <div class="chosen">
         <div class="chevron">
-          <img src="images/chevron.svg" alt="select..." />
+          <img src="frontend/images/chevron.svg" alt="select..." />
         </div>
         <p>current server</p>
         <h2 id="selected-server">searching nearest server...</h2>
@@ -84,7 +84,7 @@
 
   <dialog id="share">
     <div class="close-dialog">
-      <img src="images/close-button.svg" alt="Close" />
+      <img src="frontend/images/close-button.svg" alt="Close" />
     </div>
     <img id="results" src="" alt="Test results in graphical form" />
     <button id="copy-link">Copy link</button>
@@ -92,7 +92,7 @@
 
   <dialog id="privacy">
     <div class="close-dialog">
-      <img src="images/close-button.svg" alt="Close" />
+      <img src="frontend/images/close-button.svg" alt="Close" />
     </div>
     <section>
       <h1>Privacy Policy</h1>