Add complete frontend interface with Jinja2 templates

- Created base.html template with navigation and flash messages
- Created dashboard.html for video listing sorted by date
- Created channels.html for channel management
- Created add_channel.html with subscription form
- Created watch.html with HTML5 video player
- Created static/style.css with YouTube-inspired dark theme
- Updated main.py with frontend routes:
  - / (index): Dashboard with all videos
  - /channels: Channel management page
  - /add-channel: Add new channel form (GET/POST)
  - /watch/<video_id>: Video player page
- Added new API endpoints:
  - /api/videos/refresh/<channel_id>: Refresh channel videos
  - /api/video/stream/<video_id>: Stream/download video files
- Enhanced /api/download/<video_id> with status checks
- Updated CLAUDE.md with comprehensive frontend documentation

Features:
- Video grid with thumbnails and download status badges
- Inline download buttons for pending videos
- Channel subscription and refresh functionality
- HTML5 video player for downloaded videos
- Auto-refresh during video downloads
- Responsive design for mobile/desktop
- Flash message system for user feedback
- Dark theme with hover effects and animations

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

templates/add_channel.html

@@ -0,0 +1,58 @@
+{% extends "base.html" %}
+
+{% block title %}Add Channel - YottoB{% endblock %}
+
+{% block content %}
+<div class="add-channel-page">
+    <div class="page-header">
+        <h2>Add New Channel</h2>
+        <p>Subscribe to a YouTube channel to download and track videos</p>
+    </div>
+
+    <div class="form-container">
+        <form method="POST" action="/add-channel" class="channel-form">
+            <div class="form-group">
+                <label for="rss_url">YouTube Channel RSS URL</label>
+                <input
+                    type="url"
+                    id="rss_url"
+                    name="rss_url"
+                    placeholder="https://www.youtube.com/feeds/videos.xml?channel_id=..."
+                    required
+                    class="form-input"
+                >
+                <small class="form-help">
+                    Enter the RSS feed URL for the YouTube channel.
+                    Format: https://www.youtube.com/feeds/videos.xml?channel_id=CHANNEL_ID
+                </small>
+            </div>
+
+            <div class="form-actions">
+                <button type="submit" class="btn btn-primary">Subscribe & Fetch Videos</button>
+                <a href="/channels" class="btn btn-secondary">Cancel</a>
+            </div>
+        </form>
+    </div>
+
+    <div class="help-section">
+        <h3>How to find a channel's RSS URL</h3>
+        <ol>
+            <li>Go to the YouTube channel page</li>
+            <li>Look at the URL in your browser - it will contain the channel ID</li>
+            <li>The channel URL format is usually:
+                <ul>
+                    <li><code>youtube.com/channel/CHANNEL_ID</code> or</li>
+                    <li><code>youtube.com/@username</code> (you'll need to find the channel ID from the page source)</li>
+                </ul>
+            </li>
+            <li>Use the format: <code>https://www.youtube.com/feeds/videos.xml?channel_id=CHANNEL_ID</code></li>
+        </ol>
+
+        <h4>Example</h4>
+        <p>
+            For channel: <code>https://www.youtube.com/channel/UC_x5XG1OV2P6uZZ5FSM9Ttw</code><br>
+            RSS URL: <code>https://www.youtube.com/feeds/videos.xml?channel_id=UC_x5XG1OV2P6uZZ5FSM9Ttw</code>
+        </p>
+    </div>
+</div>
+{% endblock %}