feat: fix auth, provider health checks, search, and redesign UI
- Fix register/login: dict-style access on UserTable ORM objects - Fix HTMX auth: inject JWT token in all HTMX request headers - Fix FS7 search: use DLE AJAX endpoint /engine/ajax/search.php - Fix ZT search: use ?p=series&search=QUERY (not DLE format) - Fix provider health: load hardcoded providers + domain manager - Add self.id to all anime/series providers - Redesign homepage: Netflix-style horizontal scroll cards (.hc) - Redesign search results: grouped by title, poster + synopsis + 3 buttons - Add Télécharger dropdown: season download + episode picker - Fix navbar CSS: restore .tabs flex layout, remove orphan rules - Fix HTMX spinner: remove inline display:none, use CSS indicator - Add AGENTS.md files across project for developer documentation
This commit is contained in:
root
+58
-98
@@ -170,140 +170,106 @@ h1 {
|
||||
.btn-watch { background: var(--primary); color: #000; }
|
||||
.btn-download { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; }
|
||||
|
||||
/* Horizontal Rows (Netflix Style) */
|
||||
.streaming-row {
|
||||
/* Horizontal Scroll Row (Homepage) */
|
||||
.home-row, .streaming-row, .recommendations-carousel, .releases-carousel {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
overflow-x: auto;
|
||||
padding: 20px 5px;
|
||||
padding: 10px 0 20px;
|
||||
scroll-behavior: smooth;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.streaming-row::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
.home-row::-webkit-scrollbar, .streaming-row::-webkit-scrollbar, .recommendations-carousel::-webkit-scrollbar, .releases-carousel::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.streaming-row::-webkit-scrollbar-thumb {
|
||||
.home-row::-webkit-scrollbar-thumb, .streaming-row::-webkit-scrollbar-thumb, .recommendations-carousel::-webkit-scrollbar-thumb, .releases-carousel::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.streaming-row::-webkit-scrollbar-thumb:hover {
|
||||
.home-row::-webkit-scrollbar-thumb:hover, .streaming-row::-webkit-scrollbar-thumb:hover, .recommendations-carousel::-webkit-scrollbar-thumb:hover, .releases-carousel::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
/* Modern Card Design */
|
||||
.anime-card {
|
||||
flex: 0 0 220px;
|
||||
/* Home Card */
|
||||
.hc {
|
||||
flex: 0 0 180px;
|
||||
display: block;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--card-radius);
|
||||
overflow: hidden;
|
||||
transition: var(--transition);
|
||||
position: relative;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.anime-card:hover {
|
||||
transform: scale(1.05);
|
||||
.hc:hover {
|
||||
transform: scale(1.08);
|
||||
z-index: 10;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.anime-poster {
|
||||
.hc-poster {
|
||||
position: relative;
|
||||
padding-top: 150%;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.anime-poster img {
|
||||
.hc-poster img {
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.anime-rating-badge {
|
||||
.hc-rating {
|
||||
position: absolute;
|
||||
top: 10px; right: 10px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
top: 8px; right: 8px;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
color: #ffcc00;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
backdrop-filter: blur(5px);
|
||||
border: 1px solid rgba(255, 204, 0, 0.2);
|
||||
}
|
||||
|
||||
.anime-overlay {
|
||||
.hc-play {
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
|
||||
bottom: 8px; right: 8px;
|
||||
width: 32px; height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
color: var(--bg-dark);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 15px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
opacity: 0;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.anime-card:hover .anime-overlay { opacity: 1; }
|
||||
|
||||
.overlay-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
.hc:hover .hc-play { opacity: 1; }
|
||||
.hc-info {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Info Area */
|
||||
.anime-info {
|
||||
padding: 12px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.hc-src {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: var(--primary);
|
||||
letter-spacing: 0.5px;
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.anime-title {
|
||||
font-size: 0.95rem;
|
||||
.hc-title {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.anime-meta-tags {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Action Buttons Grid */
|
||||
.anime-card-buttons {
|
||||
/* Responsive Grid for Search */
|
||||
.anime-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn-add-watchlist.followed {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: rgba(0, 255, 136, 0.1);
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Tabs UI */
|
||||
@@ -640,23 +606,17 @@ h1 {
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.htmx-indicator { display: none; }
|
||||
.htmx-indicator.htmx-request { display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
/* Section Containers */
|
||||
.section-container {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Responsive Grid for Search */
|
||||
.anime-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.anime-card { flex: 0 0 160px; }
|
||||
.anime-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
|
||||
.btn-card span { display: none; }
|
||||
.btn-card { padding: 10px; }
|
||||
.anime-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
|
||||
.hc { flex: 0 0 140px; }
|
||||
.tabs { gap: 10px; }
|
||||
.auth-panel { flex-direction: column; gap: 15px; text-align: center; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user