Roman/ohm_streaming
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

UI: Standardize buttons and design system across the application
CI / Test (Python 3.11) (push) Has been cancelled
Details
CI / Test (Python 3.12) (push) Has been cancelled
Details
CI / Lint (push) Has been cancelled
Details
CI / Type Check (push) Has been cancelled
Details
CI / Summary (push) Has been cancelled
Details

Browse Source 
- Created a unified button system in style.css with primary, secondary, and icon variants.
- Standardized cards, inputs, and layout components for a more premium look.
- Refactored header, login, anime/series cards, and watchlist/downloads sections to use the new design system.
- Cleaned up inline styles and redundant local style blocks in templates.
- Updated JS-generated buttons to follow the new global styling.
This commit is contained in:
root
2026-03-26 10:46:18 +00:00
parent 9f85908ff3
commit b6f12b2162
13 changed files with 635 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+17 -25
View File
@@ -28,18 +28,18 @@
placeholder="Rechercher un anime (ex: Frieren, One Piece, Naruto...)"
required
>
<button type="submit" class="btn-primary">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<button type="submit" class="btn btn-primary btn-search">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:18px;height:18px;">
<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="search-loading" class="htmx-indicator">
<div id="search-loading" class="htmx-indicator" style="margin-top: 15px; color: var(--primary); display: none;">
<div class="spinner"></div> Recherche en cours...
</div>
<div style="margin-top: 10px; padding: 10px; background: rgba(0, 217, 255, 0.1); border-radius: 8px; font-size: 12px; color: #aaa;">
💡 <strong>Info:</strong> La recherche utilise MyAnimeList pour afficher la fiche complète (synopsis, saisons, etc.)
<div style="margin-top: 15px; padding: 12px; background: rgba(0, 217, 255, 0.05); border: 1px solid rgba(0, 217, 255, 0.1); border-radius: var(--input-radius); font-size: 13px; color: var(--text-dim);">
💡 <strong>Astuce :</strong> La recherche unifiée explore plusieurs sources pour trouver vos animes préférés.
</div>
</div>
@@ -49,18 +49,18 @@
<!-- Player container for HTMX injections -->
<div id="player-container"></div>
<hr style="border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 40px 0;">
<hr style="border: none; border-top: 1px solid rgba(255,255,255,0.05); margin: 40px 0;">
<!-- Latest Releases Section -->
<div class="section-header">
<h2>🔥 Dernières sorties Anime</h2>
<button class="btn-small btn-secondary"
<button class="btn btn-secondary btn-small"
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
Actualiser
</button>
</div>
<div id="animeReleasesList" class="recommendations-carousel" hx-get="/api/releases/latest" hx-trigger="load delay:500ms"></div>
@@ -85,30 +85,30 @@
placeholder="Rechercher une série (ex: Breaking Bad, Game of Thrones...)"
required
>
<button type="submit" class="btn-primary">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<button type="submit" class="btn btn-primary btn-search">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:18px;height:18px;">
<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 id="series-search-loading" class="htmx-indicator" style="margin-top: 15px; color: var(--secondary); display: none;">
<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
<div style="margin-top: 15px; padding: 12px; background: rgba(255, 107, 107, 0.05); border: 1px solid rgba(255, 107, 107, 0.1); border-radius: var(--input-radius); font-size: 13px; color: var(--text-dim);">
💡 <strong>Info:</strong> La recherche utilise FS7 pour trouver des séries TV américaines et européennes.
</div>
</div>
<!-- Series search results -->
<div id="seriesSearchResults" style="margin-bottom: 40px;"></div>
<hr style="border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 40px 0;">
<hr style="border: none; border-top: 1px solid rgba(255,255,255,0.05); margin: 40px 0;">
<!-- Recommendations Section -->
<div class="section-header">
<h2>🎯 Recommandé pour vous</h2>
<button class="btn-small btn-secondary"
<button class="btn btn-secondary btn-small"
hx-get="/api/recommendations"
hx-target="#seriesRecommendationsList">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
@@ -122,26 +122,18 @@
<!-- 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"
<button class="btn btn-secondary btn-small"
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
Actualiser
</button>
</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'">
<div class="section-header">
<h2>📦 Fournisseurs de Streaming</h2>
<button class="btn btn-sm btn-secondary" hx-get="/api/providers/health" hx-target="#providersGrid">Actualiser</button>
</div>
<div id="providersGrid" class="search-results"></div>
</div>
<div id="tab-watchlist" class="tab-content" x-show="activeTab === 'watchlist'">
{% include "components/watchlist_section.html" %}
</div>