Create /downloads page with OS auto-detection
Task Description:
Need to create a new page on the thunderengine.org website at /downloads. The page should automatically detect the user's operating system (Windows, macOS, Linux) and offer a download link for the latest engine release. File links are specified explicitly (without GitHub API parsing), which simplifies implementation and maintenance.
Important: The site is hosted on GitHub Pages, so the page must be completely static (HTML/JS/CSS).
Design and Styling
- Overall Style: Full consistency with the main page design (same fonts, color scheme, spacing, button styles).
- Page Header: A special graphic image (overlay/banner) will be used for the top of the page. The image link will be provided later. Include a placeholder in the markup for this image.
- OS Icons:
- Use monochrome (single-color) flat icons for Windows, macOS, and Linux.
- Icon style should match the site's minimalist design.
- Icon color — inherits from the current text color (
currentColor) for easy adaptation to the site theme.
- Typography: Matches the main page.
Implementation Details
1. Routing:
- Create a
downloads.html file in the repository root.
- Ensure the page is accessible at
https://thunderengine.org/downloads.
2. Link Configuration (important!):
All file links are specified explicitly in the page code (in a JavaScript config). This simplifies implementation and allows easy updates when new versions are released.
// Download links configuration
const DOWNLOAD_LINKS = {
windows: 'https://github.com/thunder-engine/thunder/releases/download/latest/ThunderEngine-windows-x64.7z',
macos: 'https://github.com/thunder-engine/thunder/releases/download/latest/ThunderEngine-macosx-arm64.7z',
linux: 'https://github.com/thunder-engine/thunder/releases/download/latest/ThunderEngine-linux-x86_64.7z'
};
// Version and size information (updated manually on release)
const VERSION_INFO = {
architectures: {
windows: 'x86_64',
macos: 'ARM64 (Apple Silicon)',
linux: 'x86_64'
}
};
3. OS Detection Logic (Frontend/JavaScript):
- The
/downloads page runs a script analyzing navigator.userAgent or navigator.platform.
- Detection Rules:
- Windows: if platform contains
Win (excluding mobile versions).
- macOS: if platform contains
Mac (note that only Apple Silicon is supported).
- Linux: if platform contains
Linux and does not contain Android.
- Other/Unknown: if OS cannot be identified — show manual selection.
4. Architecture Display:
- Architecture is displayed under the main download button or next to the file size.
- For macOS, it's important to indicate "Apple Silicon" so Intel users don't download the wrong version.
5. Future Architecture (launcher):
Include a small informational block in the interface:
- Text: "🚀 Launcher will be available in future versions"
- Block style should match the overall design (maybe semi-transparent or with a gray background)
6. UI/UX States:
- State 1: Loading. While the script analyzes the user-agent, show skeleton loaders (pulsing blocks) in the style of the main page.
- State 2: Successful Detection.
- Special graphic header (image to be provided).
- Large button in main page style with flat monochrome OS icon.
- Block with format information (7z) and launcher plans.
- Platform switcher under the button.
- State 3: Detection Failed.
- Special graphic header.
- Text: "Could not detect your OS automatically. Please select your platform:"
- Three equal buttons with flat monochrome icons.
7. Additional Content:
- System Requirements:
- Windows: 64-bit, Windows 10/11
- macOS: macOS 12+ (Apple Silicon M1/M2/M3 only)
- Linux: Ubuntu 22.04+ (or compatible distributions, x86_64)
- Link to all releases: "All versions and source code on GitHub"