Redesign nginx landing page with modern dark blueish theme

[Copilot]

Replaced the basic inline HTML landing page with a modern, responsive design using a dark blueish color scheme.

Changes

New landing page assets

• nginx/index.html.template - HTML template with dynamic service injection via SERVICES_LIST placeholder
• nginx/style.css - Dark theme (#0a1628 → #1a2c47 gradient) with responsive grid layout, service cards, and hover effects

Infrastructure updates

• Modified startup.sh functions generate_nginx_config() and generate_nginx_config_from_running_services():
  • Copy template → inject service HTML → generate final index.html
  • Service cards now include descriptions and URLs instead of plain list items
  • Added error handling for missing template file
• Updated nginx container mount to include HTML/CSS files
• Updated nginx config to serve static files from /usr/share/nginx/html with caching headers
• Added nginx/index.html to .gitignore (generated file)

Service card generation

# Before: plain list items
services_html+="<li><a href=\"http://${GRAFANA_HOSTNAME}.${BASE_DOMAIN}\">Grafana</a></li>"

# After: styled cards with metadata
services_html+="<a href=\"http://${GRAFANA_HOSTNAME}.${BASE_DOMAIN}\" class=\"service-card\">"
services_html+="<h3>Grafana</h3>"
services_html+="<p>Data visualization and monitoring dashboards</p>"
services_html+="<span class=\"service-url\">${GRAFANA_HOSTNAME}.${BASE_DOMAIN}</span>"
services_html+="</a>"

Screenshots

Desktop

Mobile

Design Details

• Dark blue gradient background with teal/blue accents
• Nginx branding in official green (#009639)
• Responsive breakpoints at 768px and 480px
• Documentation links to GitHub README
• Features section highlighting stack components

Original prompt

Redesign the nginx landing page to be visually appealing and modern with a dark blueish color theme. Update the HTML/CSS files for the page, using creative layouts, modern typography, and prominent documentation links. Ensure the design works well on desktop and mobile, and remains minimal and stylish, with only nginx branding visible. Do not add other branding or content beyond what is standard for a landing page.

This pull request was created as a result of the following prompt from Copilot chat.

Redesign the nginx landing page to be visually appealing and modern with a dark blueish color theme. Update the HTML/CSS files for the page, using creative layouts, modern typography, and prominent documentation links. Ensure the design works well on desktop and mobile, and remains minimal and stylish, with only nginx branding visible. Do not add other branding or content beyond what is standard for a landing page.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[Stolas]

@copilot Looks good, some deadlinks.
Make issues to fix these links later.

[Copilot]

@copilot Looks good, some deadlinks.
Make issues to fix these links later.

Found one dead link in the landing page:

Dead Link:

• "Security Details" button links to #security anchor which doesn't exist in README.md

Suggested Fix:
Either:

1. Add a ## Security section to README.md, or
2. Update link to point to line 15 where security is mentioned: #L15, or
3. Remove the anchor and link to repo root

The main "View Documentation" link works correctly.