UI: Standardize buttons and design system across the application
- 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
@@ -1,23 +1,26 @@
|
||||
<div class="episode-list-container card" x-data="{ view: 'grid' }">
|
||||
<div class="episode-header">
|
||||
<div class="header-info">
|
||||
<h3>{{ anime_title }}</h3>
|
||||
<span class="episode-count">{{ episodes|length }} épisodes disponibles</span>
|
||||
<div class="episode-list-container section-container" x-data="{ view: 'grid' }">
|
||||
<div class="section-header">
|
||||
<div>
|
||||
<h2 style="border: none; padding: 0; margin-bottom: 5px;">{{ anime_title }}</h2>
|
||||
<span class="badge">{{ episodes|length }} épisodes disponibles</span>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="btn btn-icon" @click="view = 'grid'" :class="{ 'active': view === 'grid' }">
|
||||
<div class="header-actions" style="display: flex; gap: 10px;">
|
||||
<button class="btn btn-icon" @click="view = 'grid'" :class="{ 'btn-primary': view === 'grid' }">
|
||||
<i class="fas fa-th"></i>
|
||||
</button>
|
||||
<button class="btn btn-icon" @click="view = 'list'" :class="{ 'active': view === 'list' }">
|
||||
<button class="btn btn-icon" @click="view = 'list'" :class="{ 'btn-primary': view === 'list' }">
|
||||
<i class="fas fa-list"></i>
|
||||
</button>
|
||||
<button class="btn btn-close" onclick="document.getElementById('player-container').innerHTML = ''">
|
||||
<button class="btn btn-icon danger" onclick="document.getElementById('player-container').innerHTML = ''">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episodes-content" :class="'view-' + view">
|
||||
<!-- Zone d'affichage du player vidéo (Placé en haut pour une meilleure visibilité lors de la sélection) -->
|
||||
<div id="video-player-display"></div>
|
||||
|
||||
<div class="episodes-content" :class="'view-' + view" style="margin-top: 25px;">
|
||||
{% if episodes %}
|
||||
{% for ep in episodes %}
|
||||
<div class="episode-item">
|
||||
@@ -26,105 +29,103 @@
|
||||
{{ ep.title or 'Épisode ' ~ (ep.episode_number or loop.index) }}
|
||||
</div>
|
||||
<div class="ep-actions">
|
||||
<button class="btn-play-small"
|
||||
<button class="btn btn-primary btn-small"
|
||||
hx-get="/api/player/embed?url={{ ep.url | urlencode }}"
|
||||
hx-target="#video-player-display"
|
||||
hx-swap="innerHTML"
|
||||
onclick="document.getElementById('video-player-display').scrollIntoView({behavior: 'smooth'})">
|
||||
<i class="fas fa-play"></i> Regarder
|
||||
</button>
|
||||
<button class="btn-download-small"
|
||||
<button class="btn btn-secondary btn-icon btn-small"
|
||||
hx-post="/api/anime/download?url={{ ep.url | urlencode }}"
|
||||
hx-swap="none">
|
||||
hx-swap="none"
|
||||
title="Télécharger cet épisode">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p class="empty-msg">Aucun épisode trouvé pour ce lien.</p>
|
||||
<div class="no-results">
|
||||
<i class="fas fa-exclamation-circle"></i>
|
||||
<p>Aucun épisode trouvé pour cette source.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Zone d'affichage du player vidéo -->
|
||||
<div id="video-player-display"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.episode-list-container {
|
||||
margin-top: 20px;
|
||||
background: #1e1e2e;
|
||||
border: 1px solid #333;
|
||||
padding: 20px;
|
||||
margin-top: 30px;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--card-radius);
|
||||
padding: 30px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
.episode-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
.episode-header h3 { margin: 0; color: #00d9ff; }
|
||||
.episode-count { font-size: 0.8rem; color: #888; }
|
||||
|
||||
.episodes-content.view-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 10px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.view-grid .episode-item {
|
||||
background: #252538;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
padding: 20px 15px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
transition: var(--transition);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.view-grid .episode-item:hover { background: #2d2d4a; transform: translateY(-2px); }
|
||||
|
||||
.view-grid .episode-item:hover {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
border-color: var(--primary);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.view-grid .ep-title { display: none; }
|
||||
.view-grid .ep-number { font-weight: bold; font-size: 1.2rem; margin-bottom: 10px; }
|
||||
.view-grid .ep-number { font-weight: 800; font-size: 1.2rem; color: var(--primary); }
|
||||
.view-grid .ep-actions { display: flex; flex-direction: column; gap: 8px; }
|
||||
.view-grid .ep-actions .btn { width: 100%; }
|
||||
|
||||
.episodes-content.view-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.view-list .episode-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
background: #252538;
|
||||
padding: 10px 15px;
|
||||
border-radius: 6px;
|
||||
gap: 20px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
padding: 12px 20px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
transition: var(--transition);
|
||||
}
|
||||
.view-list .ep-number { font-weight: bold; width: 50px; }
|
||||
.view-list .ep-title { flex: 1; color: #ccc; }
|
||||
|
||||
.btn-play-small {
|
||||
background: #00d9ff;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 5px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
.view-list .episode-item:hover {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.btn-download-small {
|
||||
background: transparent;
|
||||
color: #888;
|
||||
border: 1px solid #444;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-download-small:hover { color: #fff; border-color: #fff; }
|
||||
|
||||
.view-list .ep-number { font-weight: 800; width: 60px; color: var(--primary); }
|
||||
.view-list .ep-title { flex: 1; color: var(--text-main); font-weight: 500; }
|
||||
.view-list .ep-actions { display: flex; gap: 10px; }
|
||||
|
||||
#video-player-display:not(:empty) {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 2px dashed #333;
|
||||
margin: 20px 0 30px 0;
|
||||
padding: 25px;
|
||||
background: #000;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--primary);
|
||||
box-shadow: 0 0 30px rgba(0, 217, 255, 0.15);
|
||||
}
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
Reference in New Issue
Block a user