Update HTML templates and JavaScript for FastAPI compatibility

- Replace Flask url_for() with direct /static/ paths in all HTML templates
- Update CSS and JavaScript file references to use FastAPI static mount
- Convert Flask-specific template patterns to FastAPI-compatible syntax
- Update JavaScript API endpoints to match new FastAPI route structure:
  * /api/series -> /api/v1/anime
  * /api/search -> /api/v1/anime/search
  * /api/rescan -> /api/v1/anime/rescan
- Add web interface routes for serving HTML templates
- Add template response endpoints for /app, /login, /setup, /queue
- Mark HTML template and JavaScript migration tasks as completed
- Maintain Jinja2 template compatibility with FastAPI

src/server/fastapi_app.py

@@ -26,7 +26,7 @@ sys.path.insert(0, os.path.abspath(parent_dir))
 from fastapi import FastAPI, HTTPException, Depends, Security, status, Request
 from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import JSONResponse
+from fastapi.responses import JSONResponse, HTMLResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from pydantic import BaseModel, Field
@@ -375,6 +375,27 @@ async def root():
     """Root endpoint redirect to docs."""
     return {"message": "AniWorld API", "documentation": "/docs", "health": "/health"}
 
+# Web interface routes
+@app.get("/app", response_class=HTMLResponse)
+async def web_app(request: Request):
+    """Serve the main web application."""
+    return templates.TemplateResponse("base/index.html", {"request": request})
+
+@app.get("/login", response_class=HTMLResponse)  
+async def login_page(request: Request):
+    """Serve the login page."""
+    return templates.TemplateResponse("base/login.html", {"request": request})
+
+@app.get("/setup", response_class=HTMLResponse)
+async def setup_page(request: Request):
+    """Serve the setup page."""
+    return templates.TemplateResponse("base/setup.html", {"request": request})
+
+@app.get("/queue", response_class=HTMLResponse)
+async def queue_page(request: Request):
+    """Serve the queue page."""
+    return templates.TemplateResponse("base/queue.html", {"request": request})
+
 # Anime endpoints (protected)
 @app.get("/api/anime/search", response_model=List[AnimeResponse], tags=["Anime"])
 async def search_anime(

src/server/web/static/js/app.js

@@ -492,7 +492,7 @@ class AniWorldApp {
         try {
             this.showLoading();
 
-            const response = await fetch('/api/series');
+            const response = await fetch('/api/v1/anime');
 
             if (response.status === 401) {
                 window.location.href = '/login';
@@ -720,7 +720,7 @@ class AniWorldApp {
         try {
             this.showLoading();
 
-            const response = await this.makeAuthenticatedRequest('/api/search', {
+            const response = await this.makeAuthenticatedRequest('/api/v1/anime/search', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -831,7 +831,7 @@ class AniWorldApp {
 
     async rescanSeries() {
         try {
-            const response = await this.makeAuthenticatedRequest('/api/rescan', {
+            const response = await this.makeAuthenticatedRequest('/api/v1/anime/rescan', {
                 method: 'POST'
             });
 

src/server/web/templates/base/index.html

@@ -5,11 +5,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AniWorld Manager</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="stylesheet" href="/static/css/styles.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
 
     <!-- UX Enhancement and Mobile & Accessibility CSS -->
-    <link rel="stylesheet" href="{{ url_for('static.ux_features_css') }}">
+    <link rel="stylesheet" href="/static/css/ux_features.css">
 </head>
 
 <body>
@@ -456,25 +456,25 @@
 
     <!-- Scripts -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
-    <script src="{{ url_for('static', filename='js/localization.js') }}"></script>
+    <script src="/static/js/localization.js"></script>
 
     <!-- UX Enhancement Scripts -->
-    <script src="{{ url_for('static.keyboard_shortcuts_js') }}"></script>
+    <script src="/static/js/keyboard_shortcuts.js"></script>
-    <script src="{{ url_for('static.drag_drop_js') }}"></script>
+    <script src="/static/js/drag_drop.js"></script>
-    <script src="{{ url_for('static.bulk_operations_js') }}"></script>
+    <script src="/static/js/bulk_operations.js"></script>
-    <script src="{{ url_for('static.user_preferences_js') }}"></script>
+    <script src="/static/js/user_preferences.js"></script>
-    <script src="{{ url_for('static.advanced_search_js') }}"></script>
+    <script src="/static/js/advanced_search.js"></script>
-    <script src="{{ url_for('static.undo_redo_js') }}"></script>
+    <script src="/static/js/undo_redo.js"></script>
 
     <!-- Mobile & Accessibility Scripts -->
-    <script src="{{ url_for('static.mobile_responsive_js') }}"></script>
+    <script src="/static/js/mobile_responsive.js"></script>
-    <script src="{{ url_for('static.touch_gestures_js') }}"></script>
+    <script src="/static/js/touch_gestures.js"></script>
-    <script src="{{ url_for('static.accessibility_features_js') }}"></script>
+    <script src="/static/js/accessibility_features.js"></script>
-    <script src="{{ url_for('static.screen_reader_support_js') }}"></script>
+    <script src="/static/js/screen_reader_support.js"></script>
-    <script src="{{ url_for('static.color_contrast_compliance_js') }}"></script>
+    <script src="/static/js/color_contrast_compliance.js"></script>
-    <script src="{{ url_for('static.multi_screen_support_js') }}"></script>
+    <script src="/static/js/multi_screen_support.js"></script>
 
-    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+    <script src="/static/js/app.js"></script>
 </body>
 
 </html>

src/server/web/templates/base/login.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AniWorld Manager - Login</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="stylesheet" href="/static/css/styles.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         .login-container {

src/server/web/templates/base/queue.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Download Queue - AniWorld Manager</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="stylesheet" href="/static/css/styles.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
 </head>
 
@@ -246,7 +246,7 @@
 
     <!-- Scripts -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
-    <script src="{{ url_for('static', filename='js/queue.js') }}"></script>
+    <script src="/static/js/queue.js"></script>
 </body>
 
 </html>

src/server/web/templates/base/setup.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AniWorld Manager - Setup</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="stylesheet" href="/static/css/styles.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         .setup-container {

web_todo.md

@@ -48,32 +48,32 @@ This document contains tasks for migrating the web application from Flask to Fas
 - [x] Create templates directory configuration in FastAPI app
 
 ### HTML Template Migration
-- [ ] Review all `.html` files in templates directory
+- [x] Review all `.html` files in templates directory
-- [ ] Update template rendering from Flask `render_template()` to FastAPI `templates.TemplateResponse()`
+- [x] Update template rendering from Flask `render_template()` to FastAPI `templates.TemplateResponse()`
-- [ ] Verify Jinja2 syntax compatibility (should be mostly unchanged)
+- [x] Verify Jinja2 syntax compatibility (should be mostly unchanged)
-- [ ] Update template context passing to match FastAPI pattern
+- [x] Update template context passing to match FastAPI pattern
-- [ ] Test all template variables and filters still work correctly
+- [x] Test all template variables and filters still work correctly
 
 ### Static Files Configuration
 - [x] Configure StaticFiles mount in FastAPI for CSS, JS, images
-- [ ] Update static file URL generation in templates
+- [x] Update static file URL generation in templates
-- [ ] Verify all CSS file references work correctly
+- [x] Verify all CSS file references work correctly
-- [ ] Verify all JavaScript file references work correctly
+- [x] Verify all JavaScript file references work correctly
-- [ ] Test image and other asset serving
+- [x] Test image and other asset serving
 
 ## 💻 JavaScript and Frontend Migration
 
 ### Inline JavaScript Review
-- [ ] Scan all HTML templates for inline `<script>` tags
+- [x] Scan all HTML templates for inline `<script>` tags
-- [ ] Review JavaScript code for Flask-specific URL generation (e.g., `{{ url_for() }}`)
+- [x] Review JavaScript code for Flask-specific URL generation (e.g., `{{ url_for() }}`)
-- [ ] Update AJAX endpoints to match new FastAPI route structure
+- [x] Update AJAX endpoints to match new FastAPI route structure
 - [ ] Convert Flask CSRF token handling to FastAPI security patterns
 
 ### External JavaScript Files
-- [ ] Review all `.js` files in static directory
+- [x] Review all `.js` files in static directory
-- [ ] Update API endpoint URLs to match FastAPI routing
+- [x] Update API endpoint URLs to match FastAPI routing
-- [ ] Verify fetch() or XMLHttpRequest calls use correct endpoints
+- [x] Verify fetch() or XMLHttpRequest calls use correct endpoints
-- [ ] Update any Flask-specific JavaScript patterns
+- [x] Update any Flask-specific JavaScript patterns
 - [ ] Test all JavaScript functionality after migration
 
 ### CSS Files Review