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
+434
-75
@@ -3,13 +3,17 @@
|
||||
--bg-dark: #0b0b14;
|
||||
--bg-card: #161625;
|
||||
--primary: #00d9ff;
|
||||
--primary-hover: #00b8d9;
|
||||
--primary-glow: rgba(0, 217, 255, 0.3);
|
||||
--secondary: #ff6b6b;
|
||||
--secondary-hover: #e55a5a;
|
||||
--text-main: #ffffff;
|
||||
--text-dim: #a0a0b0;
|
||||
--accent: #00ff88;
|
||||
--danger: #ff4d4d;
|
||||
--card-radius: 12px;
|
||||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--input-radius: 8px;
|
||||
--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -36,7 +40,7 @@ body {
|
||||
.container { padding: 0 20px; }
|
||||
}
|
||||
|
||||
/* Header & Typography */
|
||||
/* Typography */
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
@@ -47,6 +51,12 @@ h1 {
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-dim);
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -61,6 +71,105 @@ h1 {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
/* Global Button System */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
border-radius: var(--input-radius);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
box-shadow: 0 0 15px var(--primary-glow);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-accent {
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: rgba(255, 77, 77, 0.15);
|
||||
border-color: rgba(255, 77, 77, 0.3);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-small, .btn-sm {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
padding: 4px 8px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 14px 28px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-circle {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* Legacy class mapping for compatibility */
|
||||
.btn-card {
|
||||
padding: 8px 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.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 {
|
||||
display: flex;
|
||||
@@ -106,7 +215,7 @@ h1 {
|
||||
|
||||
.anime-poster {
|
||||
position: relative;
|
||||
padding-top: 150%; /* standard anime poster ratio */
|
||||
padding-top: 150%;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
@@ -150,21 +259,6 @@ h1 {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-circle {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
color: #000;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
box-shadow: 0 4px 15px var(--primary-glow);
|
||||
}
|
||||
|
||||
/* Info Area */
|
||||
.anime-info {
|
||||
padding: 12px;
|
||||
@@ -198,7 +292,7 @@ h1 {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Action Buttons (The fix for text overflow) */
|
||||
/* Action Buttons Grid */
|
||||
.anime-card-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@@ -206,64 +300,23 @@ h1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn-card {
|
||||
padding: 8px 4px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
transition: var(--transition);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-card i { font-size: 0.8rem; }
|
||||
|
||||
.btn-watch { background: var(--primary); color: #000; }
|
||||
.btn-download { background: #2a2a3a; color: #fff; border: 1px solid #444; }
|
||||
|
||||
.btn-watch:hover { background: #fff; }
|
||||
.btn-download:hover { border-color: #fff; }
|
||||
|
||||
.btn-add-watchlist {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-dim);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-add-watchlist:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-add-watchlist.followed {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: rgba(0, 255, 136, 0.1);
|
||||
}
|
||||
|
||||
/* Tabs & UI */
|
||||
/* Tabs UI */
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
gap: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 30px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 15px 0;
|
||||
padding: 15px 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
@@ -271,6 +324,19 @@ h1 {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: var(--transition);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
@@ -287,31 +353,296 @@ h1 {
|
||||
box-shadow: 0 0 10px var(--primary-glow);
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
/* Modern Forms & Input Groups */
|
||||
.input-group {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 12px;
|
||||
padding: 5px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: var(--card-radius);
|
||||
padding: 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.input-group:focus-within {
|
||||
border-color: var(--primary);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 0 15px rgba(0, 217, 255, 0.1);
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 12px 20px;
|
||||
padding: 10px 15px;
|
||||
color: #fff;
|
||||
flex-grow: 1;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-group input:focus { outline: none; }
|
||||
|
||||
.btn-search {
|
||||
background: var(--primary);
|
||||
color: #000;
|
||||
border-radius: 8px;
|
||||
padding: 0 25px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Auth Section UI */
|
||||
.auth-panel {
|
||||
margin-bottom: 25px;
|
||||
padding: 15px 20px;
|
||||
background: linear-gradient(90deg, rgba(0, 217, 255, 0.1), transparent);
|
||||
border: 1px solid rgba(0, 217, 255, 0.15);
|
||||
border-radius: var(--card-radius);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.auth-container {
|
||||
max-width: 450px;
|
||||
margin: 80px auto;
|
||||
padding: 40px;
|
||||
background: var(--bg-card);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.auth-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.auth-tab {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: var(--text-dim);
|
||||
transition: var(--transition);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.auth-tab.active {
|
||||
color: var(--primary);
|
||||
border-bottom: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.auth-form.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 12px 15px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--input-radius);
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 0 10px rgba(0, 217, 255, 0.2);
|
||||
}
|
||||
|
||||
.auth-error, .auth-success {
|
||||
padding: 12px 15px;
|
||||
border-radius: var(--input-radius);
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.9rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.auth-error {
|
||||
background: rgba(255, 77, 77, 0.1);
|
||||
border: 1px solid rgba(255, 77, 77, 0.3);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.auth-success {
|
||||
background: rgba(0, 255, 136, 0.1);
|
||||
border: 1px solid rgba(0, 255, 136, 0.3);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.show { display: block !important; }
|
||||
|
||||
/* Progress Bars */
|
||||
.progress-container {
|
||||
height: 8px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
margin: 10px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary), var(--accent));
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* Icon Buttons */
|
||||
.btn-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-main);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-icon.danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.btn-icon.danger:hover {
|
||||
background: rgba(255, 77, 77, 0.15);
|
||||
border-color: rgba(255, 77, 77, 0.3);
|
||||
}
|
||||
|
||||
.btn-icon.success {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.btn-icon.success:hover {
|
||||
background: rgba(0, 255, 136, 0.15);
|
||||
border-color: rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
|
||||
/* Download Items */
|
||||
.downloads-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.download-item {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--card-radius);
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.download-item:hover {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.download-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.download-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.download-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.download-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Badge System Enhancements */
|
||||
.badge-completed { color: var(--accent); background: rgba(0, 255, 136, 0.1); }
|
||||
.badge-failed { color: var(--danger); background: rgba(255, 77, 77, 0.1); }
|
||||
.badge-downloading { color: var(--primary); background: rgba(0, 217, 255, 0.1); }
|
||||
.badge-paused { color: #ffcc00; background: rgba(255, 204, 0, 0.1); }
|
||||
|
||||
/* Loading Spinners & Empty States */
|
||||
.loading-placeholder, .loading-spinner-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--text-dim);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 3px solid rgba(0, 217, 255, 0.1);
|
||||
border-top-color: var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.empty-state, .no-results {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.empty-state i, .no-results i {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
/* Section Containers */
|
||||
.section-container {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Responsive Grid for Search */
|
||||
@@ -324,6 +655,34 @@ h1 {
|
||||
@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; } /* Hide text on very small screens, keep icons */
|
||||
.btn-card span { display: none; }
|
||||
.btn-card { padding: 10px; }
|
||||
.tabs { gap: 10px; }
|
||||
.auth-panel { flex-direction: column; gap: 15px; text-align: center; }
|
||||
}
|
||||
|
||||
/* Alerts & Toasts */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast {
|
||||
padding: 15px 25px;
|
||||
background: var(--bg-card);
|
||||
border-left: 4px solid var(--primary);
|
||||
border-radius: 8px;
|
||||
margin-top: 10px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from { transform: translateX(100%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@@ -268,10 +268,10 @@ function renderAnimeDetails(anime) {
|
||||
` : ''}
|
||||
|
||||
<div class="anime-details-actions">
|
||||
<a href="${escapeHtml(anime.url)}" target="_blank" class="btn-secondary btn-small">
|
||||
<a href="${escapeHtml(anime.url)}" target="_blank" class="btn btn-secondary btn-small">
|
||||
🔗 Voir sur MAL
|
||||
</a>
|
||||
<button onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')" class="btn-primary btn-small">
|
||||
<button onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')" class="btn btn-primary btn-small">
|
||||
📥 Télécharger
|
||||
</button>
|
||||
</div>
|
||||
@@ -291,7 +291,7 @@ function renderAnimeDetails(anime) {
|
||||
<div class="anime-details-section">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
|
||||
<h3 style="margin: 0;">📖 Synopsis</h3>
|
||||
<button onclick="translateSynopsis('${synopsisId}', this)" class="btn-secondary btn-small" style="font-size: 12px;">
|
||||
<button onclick="translateSynopsis('${synopsisId}', this)" class="btn btn-secondary btn-small" style="font-size: 12px;">
|
||||
🌐 Traduire en français
|
||||
</button>
|
||||
</div>
|
||||
@@ -405,7 +405,7 @@ function renderStreamingResult(result, query) {
|
||||
${episodes.length > 20 ? `<option disabled>... et ${episodes.length - 20} autres</option>` : ''}
|
||||
</select>
|
||||
|
||||
<button class="btn-primary btn-small streaming-download-btn" onclick="downloadSelectedEpisode(this)">
|
||||
<button class="btn btn-primary btn-small streaming-download-btn" onclick="downloadSelectedEpisode(this)">
|
||||
📥 Télécharger
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -26,7 +26,7 @@ async function loadRecommendations() {
|
||||
<p style="font-size: 12px; margin-top: 10px; color: #888;">
|
||||
Soit l'API MyAnimeList est inaccessible, soit vous n'avez pas encore de téléchargements.
|
||||
</p>
|
||||
<button class="btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
|
||||
<button class="btn btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
|
||||
🔄 Réessayer
|
||||
</button>
|
||||
</div>
|
||||
@@ -40,7 +40,7 @@ async function loadRecommendations() {
|
||||
<div class="no-results">
|
||||
<p>❌ Erreur lors du chargement des recommandations.</p>
|
||||
<p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
|
||||
<button class="btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
|
||||
<button class="btn btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
|
||||
🔄 Réessayer
|
||||
</button>
|
||||
</div>
|
||||
@@ -75,7 +75,7 @@ async function loadLatestReleases() {
|
||||
<p style="font-size: 12px; margin-top: 10px; color: #888;">
|
||||
L'API MyAnimeList pourrait être temporairement inaccessible.
|
||||
</p>
|
||||
<button class="btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
|
||||
<button class="btn btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
|
||||
🔄 Réessayer
|
||||
</button>
|
||||
</div>
|
||||
@@ -89,7 +89,7 @@ async function loadLatestReleases() {
|
||||
<div class="no-results">
|
||||
<p>❌ Erreur lors du chargement des sorties.</p>
|
||||
<p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
|
||||
<button class="btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
|
||||
<button class="btn btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
|
||||
🔄 Réessayer
|
||||
</button>
|
||||
</div>
|
||||
@@ -180,10 +180,10 @@ function renderRecommendationCard(anime) {
|
||||
` : ''}
|
||||
|
||||
<div class="anime-card-actions">
|
||||
<button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
|
||||
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
|
||||
🔗 MAL
|
||||
</button>
|
||||
<button class="btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
|
||||
<button class="btn btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
|
||||
📥 Télécharger
|
||||
</button>
|
||||
</div>
|
||||
@@ -233,10 +233,10 @@ function renderReleaseCard(anime) {
|
||||
` : ''}
|
||||
|
||||
<div class="anime-card-actions">
|
||||
<button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
|
||||
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
|
||||
🔗 MAL
|
||||
</button>
|
||||
<button class="btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
|
||||
<button class="btn btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
|
||||
📥 Télécharger
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -54,10 +54,10 @@ async function handleSeriesSearch() {
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="anime-card-actions">
|
||||
<button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(s.url)}', '_blank')">
|
||||
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(s.url)}', '_blank')">
|
||||
🔗 Voir sur FS7
|
||||
</button>
|
||||
<button class="btn-primary btn-small" onclick="loadSeriesEpisodesDirect('${escapeHtml(s.url)}', '${escapeHtml(s.title)}')">
|
||||
<button class="btn btn-primary btn-small" onclick="loadSeriesEpisodesDirect('${escapeHtml(s.url)}', '${escapeHtml(s.title)}')">
|
||||
📥 Voir les épisodes
|
||||
</button>
|
||||
</div>
|
||||
@@ -111,7 +111,7 @@ async function loadSeriesEpisodesDirect(url, title) {
|
||||
<option value="${escapeHtml(ep.url)}">Épisode ${escapeHtml(ep.episode)}</option>
|
||||
`).join('')}
|
||||
</select>
|
||||
<button class="btn-primary" style="margin-top: 10px; width: 100%;" onclick="downloadSeriesEpisode('${escapeHtml(url)}', '${escapeHtml(title)}')">
|
||||
<button class="btn btn-primary" style="margin-top: 10px; width: 100%;" onclick="downloadSeriesEpisode('${escapeHtml(url)}', '${escapeHtml(title)}')">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px;">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
|
||||
</svg>
|
||||
|
||||
+9
-9
@@ -36,10 +36,10 @@ function renderSeriesRecommendationCard(series) {
|
||||
</div>
|
||||
|
||||
<div class="anime-card-actions">
|
||||
<button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
|
||||
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
|
||||
🔗 Voir sur FS7
|
||||
</button>
|
||||
<button class="btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
|
||||
<button class="btn btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
|
||||
📥 Voir les épisodes
|
||||
</button>
|
||||
</div>
|
||||
@@ -98,10 +98,10 @@ function renderSeriesReleaseCard(series) {
|
||||
</div>
|
||||
|
||||
<div class="anime-card-actions">
|
||||
<button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
|
||||
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
|
||||
🔗 Voir sur FS7
|
||||
</button>
|
||||
<button class="btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
|
||||
<button class="btn btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
|
||||
📥 Voir les épisodes
|
||||
</button>
|
||||
</div>
|
||||
@@ -238,7 +238,7 @@ async function loadSeriesReleases() {
|
||||
<div class="no-results">
|
||||
<p>❌ Erreur lors du chargement des séries</p>
|
||||
<p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
|
||||
<button class="btn-secondary btn-small" onclick="loadSeriesReleases()" style="margin-top: 10px;">
|
||||
<button class="btn btn-secondary btn-small" onclick="loadSeriesReleases()" style="margin-top: 10px;">
|
||||
🔄 Réessayer
|
||||
</button>
|
||||
</div>`;
|
||||
@@ -280,11 +280,11 @@ async function loadProvidersGrid() {
|
||||
` : ''}
|
||||
<div class="anime-card-actions">
|
||||
${domains.length > 0 ? `
|
||||
<button class="btn-primary btn-small" onclick="window.open('https://${domains[0]}', '_blank')">
|
||||
<button class="btn btn-primary btn-small" onclick="window.open('https://${domains[0]}', '_blank')">
|
||||
🔗 Visiter le site
|
||||
</button>
|
||||
` : ''}
|
||||
<button class="btn-secondary btn-small" onclick="showProviderSearch('${id}')">
|
||||
<button class="btn btn-secondary btn-small" onclick="showProviderSearch('${id}')">
|
||||
🔍 Rechercher
|
||||
</button>
|
||||
</div>
|
||||
@@ -310,7 +310,7 @@ async function loadProvidersGrid() {
|
||||
<div class="anime-card-title">${host.icon} ${host.name}</div>
|
||||
</div>
|
||||
<div class="anime-card-actions">
|
||||
<button class="btn-secondary btn-small" onclick="showDownloadInfo()">
|
||||
<button class="btn btn-secondary btn-small" onclick="showDownloadInfo()">
|
||||
📥 Télécharger un fichier
|
||||
</button>
|
||||
</div>
|
||||
@@ -332,7 +332,7 @@ async function loadProvidersGrid() {
|
||||
<div class="no-results">
|
||||
<p>❌ Erreur lors du chargement des fournisseurs</p>
|
||||
<p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
|
||||
<button class="btn-secondary btn-small" onclick="loadProvidersGrid()" style="margin-top: 10px;">
|
||||
<button class="btn btn-secondary btn-small" onclick="loadProvidersGrid()" style="margin-top: 10px;">
|
||||
🔄 Réessayer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
<div class="anime-overlay">
|
||||
<div class="overlay-buttons">
|
||||
<button class="btn-circle"
|
||||
<button class="btn btn-primary btn-circle"
|
||||
hx-get="/api/anime/episodes?url={{ anime.url | urlencode }}"
|
||||
hx-target="#player-container"
|
||||
hx-swap="innerHTML"
|
||||
@@ -38,13 +38,13 @@
|
||||
</div>
|
||||
|
||||
<div class="anime-card-buttons">
|
||||
<button class="btn-card btn-watch"
|
||||
<button class="btn btn-primary btn-small"
|
||||
hx-get="/api/anime/episodes?url={{ anime.url | urlencode }}"
|
||||
hx-target="#player-container"
|
||||
hx-swap="innerHTML">
|
||||
<i class="fas fa-eye"></i> <span>Regarder</span>
|
||||
</button>
|
||||
<button class="btn-card btn-download"
|
||||
<button class="btn btn-secondary btn-small"
|
||||
hx-get="/api/anime/episodes?url={{ anime.url | urlencode }}"
|
||||
hx-target="#player-container"
|
||||
hx-swap="innerHTML">
|
||||
@@ -53,7 +53,7 @@
|
||||
</div>
|
||||
|
||||
{% if not in_watchlist %}
|
||||
<button class="btn-add-watchlist"
|
||||
<button class="btn btn-secondary btn-small btn-block"
|
||||
hx-post="/api/watchlist"
|
||||
hx-vals='{"anime_url": "{{ anime.url }}", "anime_title": "{{ anime.title }}", "provider_id": "{{ anime.provider_id }}"}'
|
||||
hx-swap="none"
|
||||
@@ -61,7 +61,7 @@
|
||||
<i class="fas fa-plus"></i> Watchlist
|
||||
</button>
|
||||
{% else %}
|
||||
<button class="btn-add-watchlist followed" disabled>
|
||||
<button class="btn btn-secondary btn-small btn-block followed" disabled>
|
||||
<i class="fas fa-check"></i> Suivi
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="download-item task-{{ task.status }}">
|
||||
<div class="download-info">
|
||||
<span class="download-name" title="{{ task.filename }}">{{ task.filename }}</span>
|
||||
<span class="badge badge-{{ task.status }}">{{ task.status }}</span>
|
||||
<span class="badge badge-{{ task.status }}">{{ task.status | upper }}</span>
|
||||
</div>
|
||||
|
||||
<div class="progress-container">
|
||||
@@ -23,21 +23,25 @@
|
||||
<i class="fas fa-pause"></i>
|
||||
</button>
|
||||
{% elif task.status == 'paused' %}
|
||||
<button class="btn-icon" hx-post="/api/downloads/{{ task.id }}/resume" hx-swap="none">
|
||||
<button class="btn-icon success" hx-post="/api/downloads/{{ task.id }}/resume" hx-swap="none">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
{% if task.status == 'completed' %}
|
||||
<a href="/video/{{ task.id }}" class="btn-icon success">
|
||||
<a href="/video/{{ task.id }}" class="btn-icon success" title="Voir la vidéo">
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
</a>
|
||||
<a href="/downloads/{{ task.filename }}" class="btn-icon" download title="Télécharger le fichier">
|
||||
<i class="fas fa-file-download"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<button class="btn-icon danger"
|
||||
hx-delete="/api/downloads/{{ task.id }}"
|
||||
hx-confirm="Supprimer ce téléchargement ?"
|
||||
hx-swap="none">
|
||||
hx-swap="none"
|
||||
title="Supprimer">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -45,52 +49,8 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<div class="empty-state" style="text-align: center; padding: 60px 20px; color: var(--text-dim);">
|
||||
<i class="fas fa-cloud-download-alt" style="font-size: 3rem; margin-bottom: 20px; opacity: 0.1; display: block;"></i>
|
||||
<p>Aucun téléchargement en cours</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.downloads-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
.download-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.progress-container {
|
||||
height: 8px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
margin: 10px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #00d9ff, #00ff88);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.download-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
|
||||
.download-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
|
||||
.download-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: #aaa; }
|
||||
.download-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }
|
||||
.btn-icon {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
color: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.badge-completed { color: #00ff88; }
|
||||
.badge-failed { color: #ff4444; }
|
||||
.badge-downloading { color: #00d9ff; }
|
||||
</style>
|
||||
|
||||
@@ -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); } }
|
||||
|
||||
@@ -1,70 +1,69 @@
|
||||
<h1>⚡ Ohm Stream Downloader</h1>
|
||||
<p class="subtitle">Téléchargez vos vidéos, animes et séries depuis vos hébergeurs préférés</p>
|
||||
<header>
|
||||
<h1>⚡ Ohm Stream Downloader</h1>
|
||||
<p class="subtitle">Téléchargez vos vidéos, animes et séries depuis vos hébergeurs préférés</p>
|
||||
|
||||
<!-- User info and logout button -->
|
||||
<div id="userInfo"
|
||||
x-show="isAuthenticated"
|
||||
style="margin-bottom: 15px; padding: 10px; background: rgba(0, 217, 255, 0.1); border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display: flex; align-items: center; gap: 10px;">
|
||||
<span style="color: #00d9ff;">👤</span>
|
||||
<span style="color: #fff; font-size: 14px;">Connecté en tant que <strong x-text="username" style="color: #00d9ff;">-</strong></span>
|
||||
<!-- User info and logout button -->
|
||||
<div id="userInfo" x-show="isAuthenticated" class="auth-panel" x-cloak>
|
||||
<div style="display: flex; align-items: center; gap: 10px;">
|
||||
<span style="color: var(--primary); font-size: 1.2rem;">👤</span>
|
||||
<span style="color: #fff; font-size: 14px;">Connecté en tant que <strong x-text="username" style="color: var(--primary);">-</strong></span>
|
||||
</div>
|
||||
<button class="btn btn-secondary btn-small"
|
||||
hx-post="/api/auth/logout"
|
||||
hx-on::after-request="isAuthenticated = false; window.location.reload()">
|
||||
🚪 Déconnexion
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn-secondary btn-small"
|
||||
hx-post="/api/auth/logout"
|
||||
hx-on::after-request="isAuthenticated = false; window.location.reload()"
|
||||
style="padding: 5px 15px; font-size: 12px;">
|
||||
🚪 Déconnexion
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Login prompt (shown when not logged in) -->
|
||||
<div id="loginPrompt"
|
||||
x-show="!isAuthenticated"
|
||||
style="margin-bottom: 15px; padding: 15px; background: rgba(0, 217, 255, 0.1); border: 1px solid rgba(0, 217, 255, 0.3); border-radius: 8px; text-align: center;">
|
||||
<p style="color: #00d9ff; margin: 0 0 10px 0;">👋 Bienvenue! <a href="/login" style="color: #00d9ff; text-decoration: underline;">Connectez-vous</a> pour télécharger des vidéos</p>
|
||||
</div>
|
||||
<!-- Login prompt (shown when not logged in) -->
|
||||
<div id="loginPrompt" x-show="!isAuthenticated" class="auth-panel" style="justify-content: center;" x-cloak>
|
||||
<p style="color: var(--primary); margin: 0;">
|
||||
👋 Bienvenue! <a href="/login" class="btn btn-secondary btn-small" style="margin-left: 10px;">Se connecter</a> pour accéder à toutes les fonctionnalités.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Tabs - Robust navigation -->
|
||||
<div id="mainTabs" class="tabs" style="display: flex !important; visibility: visible !important;">
|
||||
<button class="tab"
|
||||
:class="{ 'active': activeTab === 'home' }"
|
||||
@click="activeTab = 'home'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'home' } }))">
|
||||
<svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||||
</svg>
|
||||
Accueil
|
||||
</button>
|
||||
<button class="tab"
|
||||
:class="{ 'active': activeTab === 'anime' }"
|
||||
@click="activeTab = 'anime'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'anime' } }))">
|
||||
<svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
Anime
|
||||
</button>
|
||||
<button class="tab"
|
||||
:class="{ 'active': activeTab === 'series' }"
|
||||
@click="activeTab = 'series'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'series' } }))">
|
||||
<svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
|
||||
</svg>
|
||||
Série
|
||||
</button>
|
||||
<button class="tab"
|
||||
:class="{ 'active': activeTab === 'watchlist' }"
|
||||
@click="activeTab = 'watchlist'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'watchlist' } }))">
|
||||
<svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2m0 0a2 2 0 00-2 2h10a2 2 0 002-2V7a2 2 0 00-2-2"></path>
|
||||
</svg>
|
||||
Watchlist
|
||||
</button>
|
||||
<button class="tab"
|
||||
:class="{ 'active': activeTab === 'downloads' }"
|
||||
@click="activeTab = 'downloads'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'downloads' } }))">
|
||||
<svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
|
||||
</svg>
|
||||
Téléchargements
|
||||
</button>
|
||||
</div>
|
||||
<!-- Tabs - Robust navigation -->
|
||||
<nav id="mainTabs" class="tabs">
|
||||
<button class="tab"
|
||||
:class="{ 'active': activeTab === 'home' }"
|
||||
@click="activeTab = 'home'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'home' } }))">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||||
</svg>
|
||||
Accueil
|
||||
</button>
|
||||
<button class="tab"
|
||||
:class="{ 'active': activeTab === 'anime' }"
|
||||
@click="activeTab = 'anime'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'anime' } }))">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
Anime
|
||||
</button>
|
||||
<button class="tab"
|
||||
:class="{ 'active': activeTab === 'series' }"
|
||||
@click="activeTab = 'series'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'series' } }))">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
|
||||
</svg>
|
||||
Série
|
||||
</button>
|
||||
<button class="tab"
|
||||
:class="{ 'active': activeTab === 'watchlist' }"
|
||||
@click="activeTab = 'watchlist'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'watchlist' } }))">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2m0 0a2 2 0 00-2 2h10a2 2 0 002-2V7a2 2 0 00-2-2"></path>
|
||||
</svg>
|
||||
Watchlist
|
||||
</button>
|
||||
<button class="tab"
|
||||
:class="{ 'active': activeTab === 'downloads' }"
|
||||
@click="activeTab = 'downloads'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'downloads' } }))">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
|
||||
</svg>
|
||||
Téléchargements
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<div class="section-container">
|
||||
<div class="section-header">
|
||||
<h2>🎯 Recommandé pour vous</h2>
|
||||
<button class="btn-secondary btn-small"
|
||||
<button class="btn btn-secondary btn-small"
|
||||
hx-get="/api/recommendations"
|
||||
hx-target="#recommendationsList">
|
||||
<i class="fas fa-sync-alt"></i> Actualiser
|
||||
@@ -25,7 +25,7 @@
|
||||
<div class="section-container">
|
||||
<div class="section-header">
|
||||
<h2>🔥 Dernières sorties</h2>
|
||||
<button class="btn-secondary btn-small"
|
||||
<button class="btn btn-secondary btn-small"
|
||||
hx-get="/api/releases/latest"
|
||||
hx-target="#releasesList">
|
||||
<i class="fas fa-sync-alt"></i> Actualiser
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
onerror="this.src='https://placehold.co/400x600/161625/ff6b6b?text=Image+Error'; this.onerror=null;">
|
||||
<div class="anime-overlay">
|
||||
<div class="overlay-buttons">
|
||||
<button class="btn-circle"
|
||||
<button class="btn btn-primary btn-circle"
|
||||
hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang=vf"
|
||||
hx-target="#player-container"
|
||||
hx-swap="innerHTML"
|
||||
@@ -25,13 +25,13 @@
|
||||
</div>
|
||||
|
||||
<div class="anime-card-buttons">
|
||||
<button class="btn-card btn-watch"
|
||||
<button class="btn btn-primary btn-small"
|
||||
hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang=vf"
|
||||
hx-target="#player-container"
|
||||
hx-swap="innerHTML">
|
||||
<i class="fas fa-eye"></i> <span>Regarder</span>
|
||||
</button>
|
||||
<button class="btn-card btn-download"
|
||||
<button class="btn btn-secondary btn-small"
|
||||
hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang=vf"
|
||||
hx-target="#player-container"
|
||||
hx-swap="innerHTML">
|
||||
@@ -40,7 +40,7 @@
|
||||
</div>
|
||||
|
||||
{% if not in_watchlist %}
|
||||
<button class="btn-add-watchlist"
|
||||
<button class="btn btn-secondary btn-small btn-block"
|
||||
hx-post="/api/watchlist"
|
||||
hx-vals='{"anime_url": "{{ series.url }}", "anime_title": "{{ series.title }}", "provider_id": "fs7", "lang": "vf"}'
|
||||
hx-swap="none"
|
||||
@@ -48,7 +48,7 @@
|
||||
<i class="fas fa-plus"></i> Watchlist
|
||||
</button>
|
||||
{% else %}
|
||||
<button class="btn-add-watchlist followed" disabled>
|
||||
<button class="btn btn-secondary btn-small btn-block followed" disabled>
|
||||
<i class="fas fa-check"></i> Suivi
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
+17
-25
@@ -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>
|
||||
|
||||
+5
-141
@@ -5,116 +5,6 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Connexion - Ohm Stream Downloader</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<style>
|
||||
.auth-container {
|
||||
max-width: 400px;
|
||||
margin: 50px auto;
|
||||
padding: 30px;
|
||||
background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.95));
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 32px rgba(0, 217, 255, 0.3);
|
||||
}
|
||||
.auth-title {
|
||||
text-align: center;
|
||||
color: #00d9ff;
|
||||
margin-bottom: 30px;
|
||||
font-size: 28px;
|
||||
}
|
||||
.auth-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
border-bottom: 2px solid rgba(0, 217, 255, 0.2);
|
||||
}
|
||||
.auth-tab {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #aaa;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.auth-tab.active {
|
||||
color: #00d9ff;
|
||||
border-bottom: 2px solid #00d9ff;
|
||||
}
|
||||
.auth-tab:hover {
|
||||
color: #00d9ff;
|
||||
}
|
||||
.auth-form {
|
||||
display: none;
|
||||
}
|
||||
.auth-form.active {
|
||||
display: block;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #00d9ff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: rgba(0, 217, 255, 0.1);
|
||||
border: 1px solid rgba(0, 217, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #00d9ff;
|
||||
box-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
|
||||
}
|
||||
.form-group input::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
.auth-error {
|
||||
background: rgba(255, 107, 107, 0.2);
|
||||
border: 1px solid #ff6b6b;
|
||||
color: #ff6b6b;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
}
|
||||
.auth-error.show {
|
||||
display: block;
|
||||
}
|
||||
.auth-success {
|
||||
background: rgba(0, 217, 255, 0.2);
|
||||
border: 1px solid #00d9ff;
|
||||
color: #00d9ff;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
}
|
||||
.auth-success.show {
|
||||
display: block;
|
||||
}
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
.back-link {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.back-link a {
|
||||
color: #00d9ff;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
.back-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="auth-container">
|
||||
@@ -140,7 +30,7 @@
|
||||
aria-required="true"
|
||||
aria-describedby="loginUsernameHelp"
|
||||
>
|
||||
<span id="loginUsernameHelp" class="visually-hidden">Champ obligatoire</span>
|
||||
<span id="loginUsernameHelp" style="display: none;">Champ obligatoire</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="loginPassword">Mot de passe</label>
|
||||
@@ -152,7 +42,7 @@
|
||||
aria-required="true"
|
||||
>
|
||||
</div>
|
||||
<button type="submit" id="loginSubmit" class="btn-primary btn-block">Se connecter</button>
|
||||
<button type="submit" id="loginSubmit" class="btn btn-primary btn-block">Se connecter</button>
|
||||
</form>
|
||||
|
||||
<!-- Register Form -->
|
||||
@@ -206,11 +96,11 @@
|
||||
aria-required="true"
|
||||
>
|
||||
</div>
|
||||
<button type="submit" id="registerSubmit" class="btn-primary btn-block">S'inscrire</button>
|
||||
<button type="submit" id="registerSubmit" class="btn btn-primary btn-block">S'inscrire</button>
|
||||
</form>
|
||||
|
||||
<div class="back-link">
|
||||
<a href="/web">← Retour à l'accueil</a>
|
||||
<div style="text-align: center; margin-top: 25px;">
|
||||
<a href="/web" class="btn btn-secondary btn-small">← Retour à l'accueil</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -219,14 +109,6 @@
|
||||
<script src="/static/js/auth-api.js"></script>
|
||||
<script src="/static/js/auth-ui.js"></script>
|
||||
<script>
|
||||
// Debug: Check what's loaded
|
||||
console.log('Auth modules loaded:');
|
||||
console.log('- window.safeJsonParse:', typeof window.safeJsonParse);
|
||||
console.log('- window.authApi:', typeof window.authApi);
|
||||
console.log('- window.authUi:', typeof window.authUi);
|
||||
console.log('- window.authApi.login:', typeof window.authApi?.login);
|
||||
console.log('- window.authUi.handleLogin:', typeof window.authUi?.handleLogin);
|
||||
|
||||
// Expose setToken from auth.js if available
|
||||
if (typeof window.setToken === 'undefined') {
|
||||
window.setToken = function(token) {
|
||||
@@ -237,44 +119,26 @@
|
||||
|
||||
// Attach event listeners after all scripts are loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('DOM Content Loaded');
|
||||
console.log('window.authUi:', window.authUi);
|
||||
|
||||
const loginForm = document.getElementById('loginForm');
|
||||
const registerForm = document.getElementById('registerForm');
|
||||
|
||||
if (loginForm && window.authUi && window.authUi.handleLogin) {
|
||||
loginForm.addEventListener('submit', window.authUi.handleLogin);
|
||||
console.log('✓ Login handler attached');
|
||||
} else {
|
||||
console.error('✗ authUi.handleLogin not available', {
|
||||
hasLoginForm: !!loginForm,
|
||||
hasAuthUi: !!window.authUi,
|
||||
hasHandleLogin: !!window.authUi?.handleLogin
|
||||
});
|
||||
}
|
||||
|
||||
if (registerForm && window.authUi && window.authUi.handleRegister) {
|
||||
registerForm.addEventListener('submit', window.authUi.handleRegister);
|
||||
console.log('✓ Register handler attached');
|
||||
} else {
|
||||
console.error('✗ authUi.handleRegister not available');
|
||||
}
|
||||
|
||||
// Attach tab click handlers
|
||||
const tabs = document.querySelectorAll('.auth-tab');
|
||||
console.log('Found tabs:', tabs.length);
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
console.log('Tab clicked:', this.dataset.tab);
|
||||
if (window.authUi && window.authUi.switchTab) {
|
||||
window.authUi.switchTab(this.dataset.tab);
|
||||
} else {
|
||||
console.error('✗ authUi.switchTab not available');
|
||||
}
|
||||
});
|
||||
});
|
||||
console.log('✓ Tab handlers attached');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user