Phase 3: HTMX & Alpine.js integration, router refactoring, and UI modernization

- Modernized the frontend with HTMX for server-driven UI and Alpine.js for client state.
- Refactored anime, player, and recommendation logic into modular routers.
- Updated README.md to reflect the latest project state and technologies (v2.4).
- Added Plyr.io for an improved streaming experience.
- Improved project structure with componentized templates.
- Added Playwright and Vitest configuration for frontend testing.

templates/index.html

@@ -18,6 +18,7 @@
         <form hx-get="/api/anime/search" 
               hx-target="#animeSearchResults" 
               hx-indicator="#search-loading"
+              hx-trigger="submit, keyup changed delay:500ms from:#animeSearchInput"
               class="input-group">
             <input type="hidden" name="html" value="1">
             <input
@@ -53,14 +54,16 @@
     <!-- Latest Releases Section -->
     <div class="section-header">
         <h2>🔥 Dernières sorties Anime</h2>
-        <button class="btn-small btn-secondary" onclick="loadAnimeReleases()">
+        <button class="btn-small btn-secondary" 
+                hx-get="/api/releases/latest" 
+                hx-target="#animeReleasesList">
             <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
             </svg>
             Dernières sorties
         </button>
     </div>
-    <div id="animeReleasesList" class="recommendations-carousel"></div>
+    <div id="animeReleasesList" class="recommendations-carousel" hx-get="/api/releases/latest" hx-trigger="load delay:500ms"></div>
 </div>
 
 <div id="tab-series" class="tab-content" x-show="activeTab === 'series'">
@@ -69,18 +72,28 @@
         <h2>📺 Rechercher une Série TV</h2>
     </div>
     <div class="url-form">
-        <div class="input-group">
+        <form hx-get="/api/series/search" 
+              hx-target="#seriesSearchResults" 
+              hx-indicator="#series-search-loading"
+              hx-trigger="submit, keyup changed delay:500ms from:#seriesSearchInput"
+              class="input-group">
+            <input type="hidden" name="html" value="1">
             <input
                 type="text"
+                name="q"
                 id="seriesSearchInput"
                 placeholder="Rechercher une série (ex: Breaking Bad, Game of Thrones...)"
+                required
             >
-            <button type="button" class="btn-primary" onclick="handleSeriesSearch()">
+            <button type="submit" class="btn-primary">
                 <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                 </svg>
                 Rechercher
             </button>
+        </form>
+        <div id="series-search-loading" class="htmx-indicator">
+            <div class="spinner"></div> Recherche en cours...
         </div>
         <div style="margin-top: 10px; padding: 10px; background: rgba(255, 107, 107, 0.1); border-radius: 8px; font-size: 12px; color: #aaa;">
             💡 <strong>Info:</strong> La recherche utilise FS7 pour trouver des séries TV américaines et européennes
@@ -95,26 +108,30 @@
     <!-- Recommendations Section -->
     <div class="section-header">
         <h2>🎯 Recommandé pour vous</h2>
-        <button class="btn-small btn-secondary" onclick="loadSeriesRecommendations()">
+        <button class="btn-small btn-secondary" 
+                hx-get="/api/recommendations" 
+                hx-target="#seriesRecommendationsList">
             <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
             </svg>
             Actualiser
         </button>
     </div>
-    <div id="seriesRecommendationsList" class="recommendations-carousel" style="margin-bottom: 40px;"></div>
+    <div id="seriesRecommendationsList" class="recommendations-carousel" style="margin-bottom: 40px;" hx-get="/api/recommendations" hx-trigger="load delay:600ms"></div>
 
     <!-- Latest Releases Section -->
     <div class="section-header" style="margin-top: 40px;">
         <h2>🔥 Dernières sorties Séries TV</h2>
-        <button class="btn-small btn-secondary" onclick="loadSeriesReleases()">
+        <button class="btn-small btn-secondary" 
+                hx-get="/api/releases/latest" 
+                hx-target="#seriesReleasesList">
             <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
             </svg>
             Dernières sorties
         </button>
     </div>
-    <div id="seriesReleasesList" class="releases-carousel"></div>
+    <div id="seriesReleasesList" class="releases-carousel" hx-get="/api/releases/latest" hx-trigger="load delay:700ms"></div>
 </div>
 
 <div id="tab-providers" class="tab-content" x-show="activeTab === 'providers'">