LibreSpeed now supports switching between the classic design and the new modern design.

By default, LibreSpeed uses the classic design (located in index-classic.html).

• index.html - Entry point (lightweight switcher)
• index-classic.html - Classic design at root
• index-modern.html - Modern design at root (references assets in subdirectories)
• frontend/ - Directory containing modern design assets (CSS, JS, images, fonts) - kept for non-Docker deployments

Docker deployments preserve the same layout as non-Docker deployments:

• index.html - Entry point (lightweight switcher)
• index-classic.html - Classic design at root
• index-modern.html - Modern design at root
• frontend/ - Modern design assets, copied into the web root unchanged
• settings.json and server-list.json - Configuration files at root, next to index-modern.html

✅ Docker and non-Docker deployments use the same paths ✅ Both designs are at the same level ✅ results/ and backend/ use the same relative paths from both designs ✅ The modern design loads assets consistently from frontend/ ✅ Configuration files stay at the web root, where the modern page expects them

The feature switch uses modern JavaScript features (URLSearchParams, XMLHttpRequest). It is compatible with all modern browsers. The new design itself requires modern browser features and has no backwards compatibility with older browsers (see frontend/README.md).

There are two ways to enable the new design:

Edit the config.json file in the root directory and set useNewDesign to true:

{
  "useNewDesign": true
}

This will make the new design the default for all users visiting your site.

You can override the configuration by adding a URL parameter:

• To use the new design: http://yoursite.com/?design=new
• To use the classic design: http://yoursite.com/?design=classic or ?design=old

URL parameters take precedence over the configuration file, making them useful for testing or allowing users to choose their preferred design.

The useNewDesign setting also controls the default style of shared result images. Result images can be explicitly overridden with ?style=modern or ?style=classic.

• 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 frontend/ subdirectory)
• Assets: Frontend assets (CSS, JS, images, fonts) in frontend/ subdirectory

• 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 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.

The feature switch is implemented in design-switch.js, which is loaded by the root index.html. It checks:

1. First, URL parameters (?design=new or ?design=old)
2. Then, the config.json configuration file
3. Redirects to either index-classic.html or index-modern.html

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.

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.