[WIP] Add About page to StreamRec web UI

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

Summary

Add a new About page to the StreamRec web UI, accessible from the sidebar navigation. This page should credit the author (orhogi) and display useful project information.

Requirements

1. New sidebar navigation button

• Add an info/about icon button to the sidebar (between the theme toggle and the settings button, or after settings).
• Use an appropriate "info circle" SVG icon matching the existing sidebar icon style (18×18px, stroke-based).
• Wire it up to navigate('about') just like the other pages.

2. New About page (page-about)

• Add a new <div class="page" id="page-about"> section in index.html, following the same layout pattern as the Settings page (topbar + scrollable body area).
• The topbar title should be "About".

3. Page content — display the following information in styled cards (reuse settings-section, settings-card, and settings-row classes):

Project Info card:

Label	Value
Name	StreamRec
Version	1.0.0
Description	Self-hosted live stream recorder with a beautiful web UI
License	MIT

Author / Credits card:

Label	Value
Author	orhogi
GitHub	Link to https://github.com/orhogi
Repository	Link to https://github.com/orhogi/streamerREC

Tech Stack card:

Label	Value
Backend	Python 3.12 + FastAPI
Frontend	Single-file HTML/CSS/JS SPA
Recording Engine	yt-dlp + FFmpeg
Containerization	Docker

Supported Platforms card:

• Display the list of 20+ supported platforms (YouTube, Twitch, TikTok, Kick, Bilibili, Instagram, Facebook, Twitter/X, Rumble, Vimeo, Dailymotion, Niconico, Douyin, Huya, Douyu, Afreeca, Sooplive, Naver, Weibo, Bigo, Twitcasting, Pandalive, Stripchat, and more via yt-dlp).
• Display them as small pill/badge elements for a nice visual presentation.

4. Also add a backend API endpoint

Add GET /api/version in main.py that returns:

{
  "name": "StreamRec",
  "version": "1.0.0",
  "author": "orhogi",
  "github": "https://github.com/orhogi/streamerREC",
  "license": "MIT"
}

5. Styling

• Reuse existing CSS classes as much as possible (settings-body, settings-section, settings-section-title, settings-card, settings-row, settings-info, settings-label, settings-desc).
• Links should use color: var(--blue) and open in a new tab (target="_blank").
• Platform badges should have a subtle background and border radius, similar to the existing detect-badge style.
• The page should match both dark and light themes seamlessly.
• Ensure it's responsive on mobile.

6. Navigation function update

• Update the navigate() JavaScript function to handle the 'about' page (it should already work since it uses page- + name pattern, but make sure the nav button gets the active class).

Files to modify:

• index.html — Add sidebar button, About page HTML, any needed CSS, and JS navigation support.
• main.py — Add GET /api/version endpoint.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: all add credit to me in a new about page with the version and other usefull info

Assistant:

I'll gather some information about the repository first to understand its structure and create a useful About page.

Assistant: Now I have a thorough understanding of the project. Let me create a PR that adds an About page with credits, version info, and other useful information.

Assistant: I've started a coding agent to create the About page for your StreamRec project. It will create a pull request that:

1. Adds a new "About" page to the web UI with a sidebar navigation button (info icon)
2. Credits you (orhogi) as the author with links to your GitHub profile and the repository
3. Displays project info including:
   • Version: 1.0.0
   • Description, License (MIT)
   • Tech stack: Python 3.12 + FastAPI, yt-dlp + FFmpeg, Docker
   • All 20+ supported platforms shown as visual badges
4. Adds a GET /api/version endpoint in main.py returning version/author metadata
5. Matches the existing design — reuses your settings-card styling, works in both dark & light themes, and is mobile responsive

You'll receive the pull request shortly for review!

This pull request was created from Copilot chat.