Construct Features page

Create /features page with engine feature list

Task Description: Need to create a new page on the thunderengine.org website at /features. The page should present the key features of the Thunder Engine in a clear and convenient way. Feature descriptions should be organized in expandable blocks (accordion). The block grid should be responsive: the number of blocks per row changes depending on screen width. The complete feature list for content is in the features.rst file at this link.

Important: The site is hosted on GitHub Pages, so the page must be completely static (HTML/JS/CSS) and match the overall design.

---

Design and Structure

• Overall Style: Full consistency with the main page and /downloads page design (same fonts, color scheme, spacing, card styles).
• Page Header: Use the same header style as other pages. Text: "Thunder Engine Features" or similar.
• Responsive Card Grid:
  • Desktop (≥ 1024px): 3 blocks per row.
  • Tablet (768px - 1023px): 2 blocks per row.
  • Mobile (< 768px): 1 block per row (full width).
• Expandable Blocks (Accordion):
  • Each feature or logical feature group is in its own card.
  • Card Header: Feature name (e.g., "Rendering", "Physics", "Scripting"). No icons.
  • Card Body (hidden by default): Brief description (1-3 sentences), bulleted list of sub-features, or key characteristics.
  • Interaction: Clicking the header smoothly expands the block to show the description. Clicking again collapses it.
  • Visual Indicator: The header should have an arrow or ▼/▶ icon indicating expandability.
• Documentation Link: At the end of the page or in a note, add a link to the full documentation, especially since some features may not be fully documented yet.

---

Implementation Details

1. Routing: Create a features.html file in the repository root. The page should be accessible at https://thunderengine.org/features.

2. Content Population: The developer should manually transfer content from the features.rst file into the HTML structure, breaking it into logical blocks for accordion cards.

Example Block Structure (hypothetical, actual list from features.rst):

• Graphics Engine: DirectX 12, Vulkan support, modern rendering...
• Physics: Built-in rigid body physics, cloth physics support...
• Level Editor: Intuitive interface, terrain support...
• Particle System: Visual effects editor...
• Scripting: C++ support, visual scripting...
• Animation: Skeletal animation system, State Machine...
• Audio: 3D sound, popular format support...
• Cross-platform: Export to PC (Windows, Linux, macOS) and consoles...

3. Responsive Grid (CSS): Use CSS Grid or Flexbox with media queries for responsiveness.

.features-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr; /* mobile default */
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* tablets */
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr); /* desktop */
    }
}

4. Accordion Functionality (JavaScript):

• Write vanilla JavaScript (no jQuery) for the accordion.
• By default, all blocks should be collapsed so the page doesn't look overloaded.
• Allow multiple blocks to be open simultaneously (more convenient for comparing features).
• Add smooth CSS animation for expanding/collapsing (max-height transition).
• The expansion indicator should change: ▶ (collapsed) / ▼ (expanded).

5. Documentation Link: Since not all features may be documented, add a standard block:

"This is just a brief overview. The complete technical documentation is under development and available in our repository."