Add feature switch for new design via config file, URL parameters, and Docker

[Copilot]

User description

Implements a toggle mechanism to enable the new frontend design while keeping the classic design as default. Supports both standalone deployments and Docker containers.

Both designs are placed at root level to ensure correct relative paths to shared resources like backend/ and results/. In Docker containers, frontend assets are flattened to eliminate the frontend/ parent directory.

Changes

• config.json: Site-wide setting (useNewDesign: false by default)
• design-switch.js: Client-side redirect logic with priority: URL params → config → default (old design)
• DESIGN_SWITCH.md: Usage documentation
• index.html: Lightweight entry point that loads design switcher
• index-classic.html: Classic design at root level
• index-modern.html: Modern design at root level (references assets from subdirectories)
• frontend/index.html: Unchanged for non-Docker deployments
• Dockerfile & Dockerfile.alpine: Copy design switch files and both design HTML files
• docker/entrypoint.sh: Handle design switch setup, USE_NEW_DESIGN environment variable, and flatten frontend assets to root subdirectories in Docker
• doc_docker.md: Document new USE_NEW_DESIGN environment variable

Architecture

Non-Docker Deployments

• Both index-classic.html and index-modern.html at root
• Modern design references assets from frontend/ subdirectory
• Both designs access backend/ and results/ with same relative paths

Docker Deployments

• Both index-classic.html and index-modern.html at root
• Frontend assets flattened to root subdirectories: styling/, javascript/, images/, fonts/
• No frontend/ parent directory in containers
• Both designs access backend/ and results/ with same relative paths

Usage

Non-Docker Deployments

// config.json - enable new design site-wide
{
  "useNewDesign": true
}

// URL override (takes precedence over config)
?design=new   // force new design
?design=old   // force classic design

Docker Deployments

# Enable new design via environment variable
docker run -e USE_NEW_DESIGN=true -p 80:8080 ghcr.io/librespeed/speedtest

Or in docker-compose.yml:

environment:
  MODE: standalone
  USE_NEW_DESIGN: "true"

Error Handling

• Malformed JSON falls back to old design
• Path detection prevents redirect loops
• Config fetch failures default to old design

Screenshots

Classic Design (Default)

New Design

---

PR Type

Enhancement

---

Description

• Implements feature switch for new design with multiple configuration methods

• Supports URL parameters, config file, and Docker environment variables

• Includes client-side redirect logic with infinite loop prevention

• Adds comprehensive documentation and Docker integration

[sstidl]

@copilot look into the Dockerfiles and adjust entrypoint logic

[Copilot]

@copilot look into the Dockerfiles and adjust entrypoint logic

Updated Dockerfiles and entrypoint.sh to support the design feature switch (commit 90cf3e5).

Changes:

• Both Dockerfile and Dockerfile.alpine now copy config.json, root index.html, and design-switch.js
• entrypoint.sh copies these files to /var/www/html/ and supports the new USE_NEW_DESIGN environment variable
• In standalone mode, the root index.html (with feature switch) is used by default, with the frontend directory available for the new design
• Added documentation to doc_docker.md for the USE_NEW_DESIGN environment variable

Docker Usage:

# Default (old design)
docker run -p 80:8080 ghcr.io/librespeed/speedtest

# Enable new design
docker run -e USE_NEW_DESIGN=true -p 80:8080 ghcr.io/librespeed/speedtest

Tested successfully with Docker build and runtime.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• pecl.php.net
  • Triggering command: /usr/local/bin/php /usr/local/bin/php -C -q -d include_path=/usr/local/lib/php -d date.timezone=UTC -d output_buffering=1 -d variables_order=EGPCS -d safe_mode=0 -d register_argc_argv=On /usr/local/lib/php/peclcmd.php channel-update pecl.php.net (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[sstidl]

@copilot the solution has a big flaw. the frontend now lives in two places.
with old design it is in the root of the server, with new design it is in subdir frontend.
this has the effect that the results/ folder isnt found in new design mode.
a better solution would be to put old and new design side by side into the docker container, both at the same level. no additional paths needed.

[Copilot]

@copilot the solution has a big flaw. the frontend now lives in two places.
with old design it is in the root of the server, with new design it is in subdir frontend.
this has the effect that the resu...

Fixed in commit 9de1131. Both designs are now at root level side by side.

Architecture:

• index.html - Entry point (lightweight switcher)
• index-classic.html - Classic design at root
• index-modern.html - Modern design at root (references frontend/ for assets)
• Both designs can access results/ and backend/ with same relative paths

Screenshots:

Classic Design (Default):

Modern Design:

The path issue is resolved - both designs are at the same directory level, so relative paths to shared resources work correctly.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• pecl.php.net
  • Triggering command: /usr/local/bin/php /usr/local/bin/php -C -q -d include_path=/usr/local/lib/php -d date.timezone=UTC -d output_buffering=1 -d variables_order=EGPCS -d safe_mode=0 -d register_argc_argv=On /usr/local/lib/php/peclcmd.php channel-update pecl.php.net (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)