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

feat: flat design avec palette Blazing Flame
CI / Test (Python 3.11) (pull_request) Has been cancelled
Details
CI / Test (Python 3.12) (pull_request) Has been cancelled
Details
CI / Lint (pull_request) Has been cancelled
Details
CI / Type Check (pull_request) Has been cancelled
Details
CI / Summary (pull_request) Has been cancelled
Details

Browse Source
This commit is contained in:
root
2026-04-03 15:35:39 +00:00
parent 693615a7dc
commit 0179ddbdf4
21 changed files with 348 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/style.css
+192 -332
View File
@@ -1,90 +1,20 @@
/* Ohm Streaming - Material Design Dark Theme */ /* Ohm Streaming - Flat Design Theme */
:root { :root {
/* ========== EXISTING VARIABLES (kept for compatibility) ========== */ /* ========== FLAT DESIGN VARIABLES ========== */
--bg-dark: #0b0b14; --primary: #f15025;
--bg-card: #161625; --primary-hover: #d94420;
--primary: #00d9ff; --bg-dark: #ffffff;
--primary-hover: #00b8d9; --bg-card: #e6e8e6;
--primary-glow: rgba(0, 217, 255, 0.3); --text-main: #191919;
--secondary: #ff6b6b; --text-dim: #ced0ce;
--secondary-hover: #e55a5a; --secondary: #ced0ce;
--text-main: #ffffff; --accent: #f15025;
--text-dim: #a0a0b0; --danger: #e63946;
--accent: #00ff88; --success: #2d936c;
--danger: #ff4d4d; --warning: #f4a261;
--card-radius: 12px; --card-radius: 4px;
--input-radius: 8px; --input-radius: 4px;
--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition: all 0.2s ease;
/* ========== MATERIAL DESIGN VARIABLES ========== */
/* Material Colors */
--md-primary: #6C63FF;
--md-primary-variant: #5a52d5;
--md-secondary: #00BCD4;
--md-secondary-variant: #0097a7;
--md-surface: #1E1E2E;
--md-surface-variant: #2A2A3C;
--md-background: #12121c;
--md-error: #ff5252;
--md-success: #4caf50;
--md-warning: #ffc107;
--md-on-primary: #ffffff;
--md-on-surface: #e0e0e0;
--md-on-background: #ffffff;
--md-outline: rgba(255, 255, 255, 0.12);
/* Material Elevation (Box Shadows) */
--md-elevation-0: none;
--md-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.3);
--md-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.4);
--md-elevation-3: 0 6px 24px rgba(0, 0, 0, 0.5);
--md-elevation-4: 0 8px 32px rgba(0, 0, 0, 0.6);
--md-elevation-hover: 0 12px 40px rgba(0, 0, 0, 0.7);
/* Material Radius */
--md-radius: 16px;
--md-radius-sm: 8px;
--md-radius-lg: 24px;
--md-radius-pill: 50px;
/* Material Transitions */
--md-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--md-transition-standard: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--md-transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
/* Material Letter Spacing */
--md-letter-spacing: 0.5px;
--md-letter-spacing-lg: 1px;
/* ========== LIGHT THEME VARIABLES (commented, ready for toggle) ========== */
/*
[data-theme="light"] {
--md-primary: #6C63FF;
--md-primary-variant: #5a52d5;
--md-secondary: #00BCD4;
--md-secondary-variant: #0097a7;
--md-surface: #ffffff;
--md-surface-variant: #f5f5f5;
--md-background: #fafafa;
--md-error: #d32f2f;
--md-success: #388e3c;
--md-warning: #ffa000;
--md-on-primary: #ffffff;
--md-on-surface: #1c1b1f;
--md-on-background: #1c1b1f;
--md-outline: rgba(0, 0, 0, 0.12);
--md-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.15);
--md-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.2);
--md-elevation-3: 0 6px 24px rgba(0, 0, 0, 0.25);
--md-elevation-4: 0 8px 32px rgba(0, 0, 0, 0.3);
--md-elevation-hover: 0 12px 40px rgba(0, 0, 0, 0.35);
--bg-dark: #f5f5f5;
--bg-card: #ffffff;
--primary: #6C63FF;
--text-main: #1c1b1f;
--text-dim: #605d62;
}
*/
} }
/* ========== BASE RESET ========== */ /* ========== BASE RESET ========== */
@@ -102,31 +32,31 @@ body {
overflow-x: hidden; overflow-x: hidden;
} }
/* ========== CUSTOM SCROLLBAR (Material Design) ========== */ /* ========== CUSTOM SCROLLBAR ========== */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.03); background: #e6e8e6;
border-radius: 10px; border-radius: 4px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: var(--md-primary); background: var(--text-dim);
border-radius: 10px; border-radius: 4px;
transition: var(--md-transition-standard); transition: var(--transition);
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: var(--md-primary-variant); background: var(--primary);
} }
/* Firefox scrollbar */ /* Firefox scrollbar */
* { * {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--md-primary) rgba(255, 255, 255, 0.03); scrollbar-color: var(--text-dim) #e6e8e6;
} }
/* ========== CONTAINER ========== */ /* ========== CONTAINER ========== */
@@ -148,9 +78,7 @@ h1 {
font-weight: 800; font-weight: 800;
letter-spacing: -1px; letter-spacing: -1px;
margin-bottom: 5px; margin-bottom: 5px;
background: linear-gradient(90deg, var(--primary), var(--accent)); color: var(--primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.subtitle { .subtitle {
@@ -171,46 +99,26 @@ h1 {
font-weight: 700; font-weight: 700;
border-left: 4px solid var(--primary); border-left: 4px solid var(--primary);
padding-left: 15px; padding-left: 15px;
color: var(--text-main);
} }
/* ========== MATERIAL DESIGN BUTTONS ========== */ /* ========== FLAT BUTTONS ========== */
.btn { .btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
padding: 10px 20px; padding: 10px 20px;
border-radius: var(--md-radius-sm); border-radius: var(--input-radius);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
letter-spacing: var(--md-letter-spacing);
cursor: pointer; cursor: pointer;
transition: var(--md-transition-standard); transition: var(--transition);
border: 1px solid transparent; border: 1px solid transparent;
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
overflow: hidden;
}
/* Ripple effect (CSS-only) */
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn:active::before {
width: 300px;
height: 300px;
} }
.btn:disabled { .btn:disabled {
@@ -218,94 +126,81 @@ h1 {
cursor: not-allowed; cursor: not-allowed;
} }
.btn:disabled::before { /* Primary Button */
display: none;
}
/* Material Button Variants */
.btn-contained {
background: var(--md-primary);
color: var(--md-on-primary);
box-shadow: var(--md-elevation-1);
}
.btn-contained:hover:not(:disabled) {
background: var(--md-primary-variant);
box-shadow: var(--md-elevation-2);
transform: translateY(-2px);
}
.btn-outlined {
background: transparent;
border: 1px solid var(--md-outline);
color: var(--md-on-surface);
}
.btn-outlined:hover:not(:disabled) {
background: rgba(108, 99, 255, 0.08);
border-color: var(--md-primary);
color: var(--md-primary);
}
.btn-text {
background: transparent;
color: var(--md-primary);
padding: 10px 15px;
}
.btn-text:hover:not(:disabled) {
background: rgba(108, 99, 255, 0.08);
}
/* Primary Button (legacy compatibility) */
.btn-primary { .btn-primary {
background: var(--primary); background: var(--primary);
color: #000; color: #fff;
box-shadow: var(--md-elevation-1);
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
background: var(--primary-hover); background: var(--primary-hover);
box-shadow: 0 0 15px var(--primary-glow), var(--md-elevation-2);
transform: translateY(-2px);
} }
/* Secondary Button */ /* Secondary Button */
.btn-secondary { .btn-secondary {
background: rgba(255, 255, 255, 0.05); background: var(--bg-card);
border-color: rgba(255, 255, 255, 0.1); border-color: var(--text-dim);
color: var(--text-main); color: var(--text-main);
} }
.btn-secondary:hover:not(:disabled) { .btn-secondary:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.1); background: var(--text-dim);
border-color: rgba(255, 255, 255, 0.2); border-color: var(--text-main);
box-shadow: var(--md-elevation-1);
} }
/* Accent Button */ /* Accent Button */
.btn-accent { .btn-accent {
background: var(--accent); background: var(--accent);
color: #000; color: #fff;
box-shadow: var(--md-elevation-1);
} }
.btn-accent:hover:not(:disabled) { .btn-accent:hover:not(:disabled) {
box-shadow: var(--md-elevation-2); background: var(--primary-hover);
transform: translateY(-2px);
} }
/* Danger Button */ /* Danger Button */
.btn-danger { .btn-danger {
background: rgba(255, 77, 77, 0.15); background: transparent;
border-color: rgba(255, 77, 77, 0.3); border-color: var(--danger);
color: var(--danger); color: var(--danger);
} }
.btn-danger:hover:not(:disabled) { .btn-danger:hover:not(:disabled) {
background: var(--danger); background: var(--danger);
color: #fff; color: #fff;
box-shadow: var(--md-elevation-2); }
/* Contained Button */
.btn-contained {
background: var(--primary);
color: #fff;
}
.btn-contained:hover:not(:disabled) {
background: var(--primary-hover);
}
/* Outlined Button */
.btn-outlined {
background: transparent;
border: 1px solid var(--text-dim);
color: var(--text-main);
}
.btn-outlined:hover:not(:disabled) {
border-color: var(--primary);
color: var(--primary);
}
/* Text Button */
.btn-text {
background: transparent;
color: var(--primary);
padding: 10px 15px;
}
.btn-text:hover:not(:disabled) {
background: var(--bg-card);
} }
/* Button Sizes */ /* Button Sizes */
@@ -343,42 +238,37 @@ h1 {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: var(--md-letter-spacing-lg);
} }
.btn-watch { .btn-watch {
background: var(--primary); background: var(--primary);
color: #000;
box-shadow: var(--md-elevation-1);
}
.btn-watch:hover {
box-shadow: var(--md-elevation-2);
}
.btn-download {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff; color: #fff;
} }
.btn-download:hover { .btn-watch:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.1); background: var(--primary-hover);
} }
/* ========== MATERIAL DESIGN CARDS ========== */ .btn-download {
background: var(--bg-card);
border: 1px solid var(--text-dim);
color: var(--text-main);
}
.btn-download:hover:not(:disabled) {
background: var(--text-dim);
}
/* ========== FLAT CARDS ========== */
.card, .hc, .download-item { .card, .hc, .download-item {
background: var(--md-surface); background: var(--bg-card);
border-radius: var(--md-radius); border-radius: var(--card-radius);
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid var(--text-dim);
box-shadow: var(--md-elevation-1); transition: var(--transition);
transition: var(--md-transition-standard);
} }
.card:hover, .hc:hover, .download-item:hover { .card:hover, .hc:hover, .download-item:hover {
transform: translateY(-2px); border-color: var(--primary);
box-shadow: var(--md-elevation-2);
border-color: rgba(255, 255, 255, 0.1);
} }
/* ========== HORIZONTAL SCROLL ROW ========== */ /* ========== HORIZONTAL SCROLL ROW ========== */
@@ -402,8 +292,8 @@ h1 {
.streaming-row::-webkit-scrollbar-thumb, .streaming-row::-webkit-scrollbar-thumb,
.recommendations-carousel::-webkit-scrollbar-thumb, .recommendations-carousel::-webkit-scrollbar-thumb,
.releases-carousel::-webkit-scrollbar-thumb { .releases-carousel::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1); background: var(--text-dim);
border-radius: 10px; border-radius: 4px;
} }
.home-row::-webkit-scrollbar-thumb:hover, .home-row::-webkit-scrollbar-thumb:hover,
@@ -413,25 +303,21 @@ h1 {
background: var(--primary); background: var(--primary);
} }
/* ========== HOME CARD (Material Card) ========== */ /* ========== HOME CARD ========== */
.hc { .hc {
flex: 0 0 180px; flex: 0 0 180px;
display: block; display: block;
background: var(--md-surface); background: var(--bg-card);
border-radius: var(--md-radius); border-radius: var(--card-radius);
overflow: hidden; overflow: hidden;
transition: var(--md-transition-standard); transition: var(--transition);
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid var(--text-dim);
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
box-shadow: var(--md-elevation-1);
} }
.hc:hover { .hc:hover {
transform: translateY(-2px) scale(1.02);
z-index: 10;
border-color: var(--primary); border-color: var(--primary);
box-shadow: var(--md-elevation-hover);
} }
.hc-poster { .hc-poster {
@@ -453,14 +339,12 @@ h1 {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
background: rgba(0, 0, 0, 0.85); background: rgba(0, 0, 0, 0.75);
color: #ffcc00; color: #ffcc00;
padding: 4px 8px; padding: 4px 8px;
border-radius: var(--md-radius-sm); border-radius: 4px;
font-size: 0.7rem; font-size: 0.7rem;
font-weight: 800; font-weight: 800;
letter-spacing: var(--md-letter-spacing);
backdrop-filter: blur(4px);
} }
.hc-play { .hc-play {
@@ -471,19 +355,17 @@ h1 {
height: 36px; height: 36px;
border-radius: 50%; border-radius: 50%;
background: var(--primary); background: var(--primary);
color: var(--bg-dark); color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 0.75rem; font-size: 0.75rem;
opacity: 0; opacity: 0;
transition: var(--md-transition-standard); transition: var(--transition);
box-shadow: var(--md-elevation-2);
} }
.hc:hover .hc-play { .hc:hover .hc-play {
opacity: 1; opacity: 1;
transform: scale(1.1);
} }
.hc-info { .hc-info {
@@ -495,7 +377,6 @@ h1 {
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
color: var(--primary); color: var(--primary);
letter-spacing: var(--md-letter-spacing-lg);
display: block; display: block;
margin-bottom: 4px; margin-bottom: 4px;
} }
@@ -517,11 +398,11 @@ h1 {
gap: 20px; gap: 20px;
} }
/* ========== MATERIAL TABS ========== */ /* ========== FLAT TABS ========== */
.tabs { .tabs {
display: flex; display: flex;
gap: 20px; gap: 20px;
border-bottom: 1px solid var(--md-outline); border-bottom: 1px solid var(--text-dim);
margin-bottom: 30px; margin-bottom: 30px;
overflow-x: auto; overflow-x: auto;
} }
@@ -534,12 +415,11 @@ h1 {
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: var(--md-transition-standard); transition: var(--transition);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
white-space: nowrap; white-space: nowrap;
letter-spacing: var(--md-letter-spacing);
} }
.tab svg { .tab svg {
@@ -563,31 +443,28 @@ h1 {
width: 100%; width: 100%;
height: 3px; height: 3px;
background: var(--primary); background: var(--primary);
box-shadow: 0 0 10px var(--primary-glow);
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
} }
/* ========== MATERIAL INPUTS ========== */ /* ========== FLAT INPUTS ========== */
.input-group { .input-group {
display: flex; display: flex;
background: rgba(255, 255, 255, 0.03); background: var(--bg-card);
border-radius: var(--md-radius); border-radius: var(--input-radius);
padding: 6px; padding: 6px;
border: 1px solid var(--md-outline); border: 1px solid var(--text-dim);
transition: var(--md-transition-standard); transition: var(--transition);
} }
.input-group:focus-within { .input-group:focus-within {
border-color: var(--primary); 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 { .input-group input {
background: none; background: none;
border: none; border: none;
padding: 12px 16px; padding: 12px 16px;
color: #fff; color: var(--text-main);
flex-grow: 1; flex-grow: 1;
font-size: 1rem; font-size: 1rem;
} }
@@ -603,10 +480,10 @@ h1 {
.btn-search { .btn-search {
padding: 0 25px; padding: 0 25px;
border-radius: var(--md-radius-sm); border-radius: var(--input-radius);
} }
/* Material Underline Input Style */ /* Flat Input Style */
.form-group { .form-group {
margin-bottom: 24px; margin-bottom: 24px;
position: relative; position: relative;
@@ -618,8 +495,7 @@ h1 {
color: var(--text-dim); color: var(--text-dim);
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
letter-spacing: var(--md-letter-spacing); transition: var(--transition);
transition: var(--md-transition-standard);
} }
.form-group input { .form-group input {
@@ -627,10 +503,10 @@ h1 {
padding: 16px 0; padding: 16px 0;
background: transparent; background: transparent;
border: none; border: none;
border-bottom: 2px solid var(--md-outline); border-bottom: 2px solid var(--text-dim);
color: #fff; color: var(--text-main);
font-size: 1rem; font-size: 1rem;
transition: var(--md-transition-standard); transition: var(--transition);
} }
.form-group input:focus { .form-group input:focus {
@@ -653,34 +529,33 @@ h1 {
.auth-panel { .auth-panel {
margin-bottom: 25px; margin-bottom: 25px;
padding: 16px 20px; padding: 16px 20px;
background: linear-gradient(90deg, rgba(0, 217, 255, 0.1), transparent); background: var(--bg-card);
border: 1px solid rgba(0, 217, 255, 0.15); border: 1px solid var(--primary);
border-radius: var(--md-radius); border-radius: var(--card-radius);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-shadow: var(--md-elevation-1);
} }
.auth-container { .auth-container {
max-width: 450px; max-width: 450px;
margin: 80px auto; margin: 80px auto;
padding: 40px; padding: 40px;
background: var(--md-surface); background: var(--bg-card);
border-radius: var(--md-radius-lg); border-radius: 6px;
border: 1px solid var(--md-outline); border: 1px solid var(--text-dim);
box-shadow: var(--md-elevation-3);
} }
.auth-title { .auth-title {
text-align: center; text-align: center;
margin-bottom: 30px; margin-bottom: 30px;
color: var(--primary);
} }
.auth-tabs { .auth-tabs {
display: flex; display: flex;
margin-bottom: 30px; margin-bottom: 30px;
border-bottom: 1px solid var(--md-outline); border-bottom: 1px solid var(--text-dim);
} }
.auth-tab { .auth-tab {
@@ -689,7 +564,7 @@ h1 {
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
color: var(--text-dim); color: var(--text-dim);
transition: var(--md-transition-standard); transition: var(--transition);
font-weight: 600; font-weight: 600;
position: relative; position: relative;
} }
@@ -718,32 +593,32 @@ h1 {
.auth-error, .auth-success { .auth-error, .auth-success {
padding: 12px 16px; padding: 12px 16px;
border-radius: var(--md-radius-sm); border-radius: var(--input-radius);
margin-bottom: 20px; margin-bottom: 20px;
font-size: 0.9rem; font-size: 0.9rem;
display: none; display: none;
} }
.auth-error { .auth-error {
background: rgba(255, 77, 77, 0.1); background: rgba(230, 57, 70, 0.1);
border: 1px solid rgba(255, 77, 77, 0.3); border: 1px solid var(--danger);
color: var(--danger); color: var(--danger);
} }
.auth-success { .auth-success {
background: rgba(0, 255, 136, 0.1); background: rgba(45, 147, 108, 0.1);
border: 1px solid rgba(0, 255, 136, 0.3); border: 1px solid var(--success);
color: var(--accent); color: var(--success);
} }
.show { .show {
display: block !important; display: block !important;
} }
/* ========== MATERIAL PROGRESS BARS ========== */ /* ========== FLAT PROGRESS BARS ========== */
.progress-container { .progress-container {
height: 6px; height: 6px;
background: rgba(255, 255, 255, 0.1); background: var(--text-dim);
border-radius: 3px; border-radius: 3px;
margin: 12px 0; margin: 12px 0;
overflow: hidden; overflow: hidden;
@@ -751,7 +626,7 @@ h1 {
.progress-bar { .progress-bar {
height: 100%; height: 100%;
background: linear-gradient(90deg, var(--primary), var(--accent)); background: var(--primary);
transition: width 0.3s ease; transition: width 0.3s ease;
border-radius: 3px; border-radius: 3px;
} }
@@ -761,21 +636,20 @@ h1 {
width: 40px; width: 40px;
height: 40px; height: 40px;
padding: 0; padding: 0;
border-radius: var(--md-radius-sm); border-radius: var(--input-radius);
background: rgba(255, 255, 255, 0.05); background: var(--bg-card);
border: 1px solid var(--md-outline); border: 1px solid var(--text-dim);
color: var(--text-main); color: var(--text-main);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: var(--md-transition-standard); transition: var(--transition);
} }
.btn-icon:hover { .btn-icon:hover {
background: rgba(255, 255, 255, 0.1); background: var(--text-dim);
border-color: rgba(255, 255, 255, 0.2); border-color: var(--text-main);
box-shadow: var(--md-elevation-1);
} }
.btn-icon.danger { .btn-icon.danger {
@@ -783,17 +657,19 @@ h1 {
} }
.btn-icon.danger:hover { .btn-icon.danger:hover {
background: rgba(255, 77, 77, 0.15); background: var(--danger);
border-color: rgba(255, 77, 77, 0.3); color: #fff;
border-color: var(--danger);
} }
.btn-icon.success { .btn-icon.success {
color: var(--accent); color: var(--success);
} }
.btn-icon.success:hover { .btn-icon.success:hover {
background: rgba(0, 255, 136, 0.15); background: var(--success);
border-color: rgba(0, 255, 136, 0.3); color: #fff;
border-color: var(--success);
} }
/* ========== DOWNLOAD ITEMS ========== */ /* ========== DOWNLOAD ITEMS ========== */
@@ -804,20 +680,18 @@ h1 {
} }
.download-item { .download-item {
background: var(--md-surface); background: var(--bg-card);
border-radius: var(--md-radius); border-radius: var(--card-radius);
padding: 20px; padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid var(--text-dim);
transition: var(--md-transition-standard); transition: var(--transition);
box-shadow: var(--md-elevation-1);
border-left: 4px solid var(--text-dim); border-left: 4px solid var(--text-dim);
margin-bottom: 10px; margin-bottom: 10px;
} }
.download-item:hover { .download-item:hover {
border-color: var(--primary); border-color: var(--primary);
transform: translateY(-2px); border-left-color: var(--primary);
box-shadow: var(--md-elevation-2);
} }
.download-info { .download-info {
@@ -852,11 +726,13 @@ h1 {
} }
.download-actions .btn-icon.warning { .download-actions .btn-icon.warning {
color: #f0a500; color: var(--warning);
} }
.download-actions .btn-icon.warning:hover { .download-actions .btn-icon.warning:hover {
background: rgba(240, 165, 0, 0.2); background: var(--warning);
color: #fff;
border-color: var(--warning);
} }
/* Download Status Colors */ /* Download Status Colors */
@@ -866,7 +742,7 @@ h1 {
} }
.download-item.status-completed { .download-item.status-completed {
border-left-color: var(--accent); border-left-color: var(--success);
} }
.download-item.status-failed, .download-item.status-failed,
@@ -875,7 +751,7 @@ h1 {
} }
.download-item.status-paused { .download-item.status-paused {
border-left-color: #f0a500; border-left-color: var(--warning);
} }
.download-item.status-pending { .download-item.status-pending {
@@ -887,56 +763,45 @@ h1 {
border-left-color: var(--primary); border-left-color: var(--primary);
} }
50% { 50% {
border-left-color: rgba(0, 217, 255, 0.3); border-left-color: var(--warning);
} }
} }
/* Progress bar shimmer */ /* Progress bar for downloading */
.download-item.status-downloading .progress-bar { .download-item.status-downloading .progress-bar {
background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 50%, var(--primary) 100%); background: var(--primary);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
} }
/* ========== BADGE SYSTEM ========== */ /* ========== BADGE SYSTEM ========== */
.badge-completed { .badge-completed {
color: var(--accent); color: var(--success);
background: rgba(0, 255, 136, 0.1); background: rgba(45, 147, 108, 0.1);
padding: 4px 8px; padding: 4px 8px;
border-radius: var(--md-radius-sm); border-radius: var(--input-radius);
} }
.badge-failed { .badge-failed {
color: var(--danger); color: var(--danger);
background: rgba(255, 77, 77, 0.1); background: rgba(230, 57, 70, 0.1);
padding: 4px 8px; padding: 4px 8px;
border-radius: var(--md-radius-sm); border-radius: var(--input-radius);
} }
.badge-downloading { .badge-downloading {
color: var(--primary); color: var(--primary);
background: rgba(0, 217, 255, 0.1); background: rgba(241, 80, 37, 0.1);
padding: 4px 8px; padding: 4px 8px;
border-radius: var(--md-radius-sm); border-radius: var(--input-radius);
} }
.badge-paused { .badge-paused {
color: #ffcc00; color: var(--warning);
background: rgba(255, 204, 0, 0.1); background: rgba(244, 162, 97, 0.1);
padding: 4px 8px; padding: 4px 8px;
border-radius: var(--md-radius-sm); border-radius: var(--input-radius);
} }
/* ========== MATERIAL LOADING STATES ========== */ /* ========== LOADING STATES ========== */
.loading-placeholder, .loading-spinner-container { .loading-placeholder, .loading-spinner-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -947,12 +812,12 @@ h1 {
gap: 15px; gap: 15px;
} }
/* Material Circular Spinner */ /* Circular Spinner */
.spinner { .spinner {
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid rgba(108, 99, 255, 0.2); border: 3px solid var(--text-dim);
border-top-color: var(--md-primary); border-top-color: var(--primary);
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@@ -963,25 +828,19 @@ h1 {
} }
} }
/* Material Skeleton Loading */ /* Skeleton Loading */
.skeleton { .skeleton {
background: linear-gradient( background: var(--bg-card);
90deg,
var(--md-surface) 0%,
var(--md-surface-variant) 50%,
var(--md-surface) 100%
);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite; animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: var(--md-radius-sm); border-radius: var(--input-radius);
} }
@keyframes skeleton-loading { @keyframes skeleton-loading {
0% { 0%, 100% {
background-position: 200% 0; opacity: 0.5;
} }
100% { 50% {
background-position: -200% 0; opacity: 1;
} }
} }
@@ -998,7 +857,7 @@ h1 {
.skeleton-card { .skeleton-card {
height: 200px; height: 200px;
border-radius: var(--md-radius); border-radius: var(--card-radius);
} }
.empty-state, .no-results { .empty-state, .no-results {
@@ -1029,7 +888,7 @@ h1 {
margin-bottom: 50px; margin-bottom: 50px;
} }
/* ========== MATERIAL TOAST/SNACKBAR ========== */ /* ========== FLAT TOAST ========== */
.toast-container { .toast-container {
position: fixed; position: fixed;
bottom: 24px; bottom: 24px;
@@ -1044,32 +903,33 @@ h1 {
.toast { .toast {
padding: 16px 24px; padding: 16px 24px;
background: var(--md-surface); background: var(--bg-card);
border-left: 4px solid var(--primary); border-left: 4px solid var(--primary);
border-radius: var(--md-radius); border-radius: var(--card-radius);
box-shadow: var(--md-elevation-3); border: 1px solid var(--text-dim);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
animation: slide-up 0.3s ease-out; animation: slide-up 0.3s ease-out;
min-width: 300px; min-width: 300px;
max-width: 500px; max-width: 500px;
color: var(--text-main);
} }
.toast.success { .toast.success {
border-left-color: var(--md-success); border-left-color: var(--success);
} }
.toast.error { .toast.error {
border-left-color: var(--md-error); border-left-color: var(--danger);
} }
.toast.warning { .toast.warning {
border-left-color: var(--md-warning); border-left-color: var(--warning);
} }
.toast.info { .toast.info {
border-left-color: var(--md-primary); border-left-color: var(--primary);
} }
@keyframes slide-up { @keyframes slide-up {
static/js/anime-details.js
+1 -1
View File
@@ -310,7 +310,7 @@ function renderAnimeDetails(anime) {
<div class="anime-related-items"> <div class="anime-related-items">
${season.entries.map(entry => ` ${season.entries.map(entry => `
<div class="anime-related-item" onclick="searchAnimeDetails('${escapeHtml(entry.title)}', ${entry.mal_id})" style="cursor: pointer;"> <div class="anime-related-item" onclick="searchAnimeDetails('${escapeHtml(entry.title)}', ${entry.mal_id})" style="cursor: pointer;">
${entry.type ? `<span style="color: #00d9ff; font-size: 11px; margin-right: 8px;">${escapeHtml(entry.type)}</span>` : ''} ${entry.type ? `<span style="color: #f15025; font-size: 11px; margin-right: 8px;">${escapeHtml(entry.type)}</span>` : ''}
${escapeHtml(entry.title)} ${escapeHtml(entry.title)}
${entry.url ? `<a href="${escapeHtml(entry.url)}" target="_blank" style="margin-left: auto; color: #888; font-size: 18px; text-decoration: none;" title="Voir sur MyAnimeList">↗</a>` : ''} ${entry.url ? `<a href="${escapeHtml(entry.url)}" target="_blank" style="margin-left: auto; color: #888; font-size: 18px; text-decoration: none;" title="Voir sur MyAnimeList">↗</a>` : ''}
</div> </div>
static/js/recommendations.js
+5 -5
View File
@@ -246,11 +246,11 @@ function renderReleaseCard(anime) {
// Get rating color based on score // Get rating color based on score
function getRatingColor(score) { function getRatingColor(score) {
if (score >= 9) return 'linear-gradient(45deg, #ffd700, #ffed4e)'; if (score >= 9) return '#ffd700';
if (score >= 8) return 'linear-gradient(45deg, #00ff88, #00d9ff)'; if (score >= 8) return '#2d936c';
if (score >= 7) return 'linear-gradient(45deg, #00d9ff, #6c5ce7)'; if (score >= 7) return '#f15025';
if (score >= 6) return 'linear-gradient(45deg, #ffa500, #ff6b6b)'; if (score >= 6) return '#f4a261';
return 'linear-gradient(45deg, #666, #888)'; return '#ced0ce';
} }
// Search anime on providers (redirects to anime tab) // Search anime on providers (redirects to anime tab)
static/js/series-search.js
+3 -3
View File
@@ -50,7 +50,7 @@ async function handleSeriesSearch() {
</div> </div>
${coverImage ? ` ${coverImage ? `
<div style="text-align: center; margin: 10px 0;"> <div style="text-align: center; margin: 10px 0;">
<img src="${escapeHtml(coverImage)}" alt="" style="max-width: 200px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.3);" onerror="this.style.display='none'"> <img src="${escapeHtml(coverImage)}" alt="" style="max-width: 200px; border-radius: 4px;" onerror="this.style.display='none'">
</div> </div>
` : ''} ` : ''}
<div class="anime-card-actions"> <div class="anime-card-actions">
@@ -102,10 +102,10 @@ async function loadSeriesEpisodesDirect(url, title) {
if (data.episodes && data.episodes.length > 0) { if (data.episodes && data.episodes.length > 0) {
let html = ` let html = `
<div style="margin-top: 15px;"> <div style="margin-top: 15px;">
<label style="font-size: 12px; color: #00d9ff; margin-bottom: 5px; display: block;"> <label style="font-size: 12px; color: #f15025; margin-bottom: 5px; display: block;">
📺 Sélectionner un épisode: 📺 Sélectionner un épisode:
</label> </label>
<select id="select-episodes-${encodeURIComponent(url)}" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid rgba(0, 217, 255, 0.3); background: rgba(0, 0, 0, 0.3); color: white;"> <select id="select-episodes-${encodeURIComponent(url)}" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ced0ce; background: #ffffff; color: #191919;">
<option value="">Sélectionner un épisode</option> <option value="">Sélectionner un épisode</option>
${data.episodes.map(ep => ` ${data.episodes.map(ep => `
<option value="${escapeHtml(ep.url)}">Épisode ${escapeHtml(ep.episode)}</option> <option value="${escapeHtml(ep.url)}">Épisode ${escapeHtml(ep.episode)}</option>
templates/components/admin_panel.html
+9 -9
View File
@@ -5,23 +5,23 @@
<!-- Stats Cards --> <!-- Stats Cards -->
<div id="admin-stats" class="admin-stats-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-bottom: 30px;"> <div id="admin-stats" class="admin-stats-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-bottom: 30px;">
<div class="admin-stat-card" style="padding: 20px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid rgba(255,255,255,0.05); text-align: center;"> <div class="admin-stat-card" style="padding: 20px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #ced0ce; text-align: center;">
<div style="font-size: 2rem; font-weight: 800; color: var(--primary);" id="stat-total-users">{{ users|length }}</div> <div style="font-size: 2rem; font-weight: 800; color: var(--primary);" id="stat-total-users">{{ users|length }}</div>
<div style="color: var(--text-dim); font-size: 0.85rem;">Utilisateurs</div> <div style="color: var(--text-dim); font-size: 0.85rem;">Utilisateurs</div>
</div> </div>
<div class="admin-stat-card" style="padding: 20px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid rgba(255,255,255,0.05); text-align: center;"> <div class="admin-stat-card" style="padding: 20px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #ced0ce; text-align: center;">
<div style="font-size: 2rem; font-weight: 800; color: var(--accent);" id="stat-active-users">{{ users|selectattr('is_active')|list|length }}</div> <div style="font-size: 2rem; font-weight: 800; color: var(--accent);" id="stat-active-users">{{ users|selectattr('is_active')|list|length }}</div>
<div style="color: var(--text-dim); font-size: 0.85rem;">Actifs</div> <div style="color: var(--text-dim); font-size: 0.85rem;">Actifs</div>
</div> </div>
<div class="admin-stat-card" style="padding: 20px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid rgba(255,255,255,0.05); text-align: center;"> <div class="admin-stat-card" style="padding: 20px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #ced0ce; text-align: center;">
<div style="font-size: 2rem; font-weight: 800; color: #f0a500;" id="stat-admin-users">{{ users|selectattr('is_admin')|list|length }}</div> <div style="font-size: 2rem; font-weight: 800; color: #f0a500;" id="stat-admin-users">{{ users|selectattr('is_admin')|list|length }}</div>
<div style="color: var(--text-dim); font-size: 0.85rem;">Admins</div> <div style="color: var(--text-dim); font-size: 0.85rem;">Admins</div>
</div> </div>
</div> </div>
<!-- Users Table --> <!-- Users Table -->
<div style="background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid rgba(255,255,255,0.05); overflow: hidden;"> <div style="background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #ced0ce; overflow: hidden;">
<div style="padding: 20px 25px; border-bottom: 1px solid rgba(255,255,255,0.05);"> <div style="padding: 20px 25px; border-bottom: 1px solid #ced0ce;">
<h3 style="margin: 0; color: var(--primary);">Gestion des utilisateurs</h3> <h3 style="margin: 0; color: var(--primary);">Gestion des utilisateurs</h3>
</div> </div>
@@ -29,7 +29,7 @@
<div style="overflow-x: auto;"> <div style="overflow-x: auto;">
<table style="width: 100%; border-collapse: collapse;"> <table style="width: 100%; border-collapse: collapse;">
<thead> <thead>
<tr style="border-bottom: 1px solid rgba(255,255,255,0.05);"> <tr style="border-bottom: 1px solid #ced0ce;">
<th style="padding: 12px 20px; text-align: left; color: var(--text-dim); font-size: 0.8rem; text-transform: uppercase;">Utilisateur</th> <th style="padding: 12px 20px; text-align: left; color: var(--text-dim); font-size: 0.8rem; text-transform: uppercase;">Utilisateur</th>
<th style="padding: 12px 15px; text-align: left; color: var(--text-dim); font-size: 0.8rem; text-transform: uppercase;">Email</th> <th style="padding: 12px 15px; text-align: left; color: var(--text-dim); font-size: 0.8rem; text-transform: uppercase;">Email</th>
<th style="padding: 12px 15px; text-align: center; color: var(--text-dim); font-size: 0.8rem; text-transform: uppercase;">Statut</th> <th style="padding: 12px 15px; text-align: center; color: var(--text-dim); font-size: 0.8rem; text-transform: uppercase;">Statut</th>
@@ -41,7 +41,7 @@
</thead> </thead>
<tbody> <tbody>
{% for user in users %} {% for user in users %}
<tr style="border-bottom: 1px solid rgba(255,255,255,0.03); {% if not user.is_active %}opacity: 0.5;{% endif %}"> <tr style="border-bottom: 1px solid #ced0ce; {% if not user.is_active %}opacity: 0.5;{% endif %}">
<td style="padding: 12px 20px;"> <td style="padding: 12px 20px;">
<div style="font-weight: 600;">{{ user.username }}</div> <div style="font-weight: 600;">{{ user.username }}</div>
{% if user.full_name %} {% if user.full_name %}
@@ -50,12 +50,12 @@
</td> </td>
<td style="padding: 12px 15px; color: var(--text-dim); font-size: 0.9rem;">{{ user.email or '-' }}</td> <td style="padding: 12px 15px; color: var(--text-dim); font-size: 0.9rem;">{{ user.email or '-' }}</td>
<td style="padding: 12px 15px; text-align: center;"> <td style="padding: 12px 15px; text-align: center;">
<span style="display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; background: {% if user.is_active %}rgba(0,255,136,0.15); color: var(--accent){% else %}rgba(255,77,77,0.15); color: var(--danger){% endif %};"> <span style="display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; background: {% if user.is_active %}rgba(45,147,108,0.1); color: #2d936c{% else %}rgba(230,57,70,0.1); color: #e63946{% endif %};">
{% if user.is_active %}Actif{% else %}Inactif{% endif %} {% if user.is_active %}Actif{% else %}Inactif{% endif %}
</span> </span>
</td> </td>
<td style="padding: 12px 15px; text-align: center;"> <td style="padding: 12px 15px; text-align: center;">
<span style="display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; background: {% if user.is_admin %}rgba(240,165,0,0.15); color: #f0a500{% else %}rgba(255,255,255,0.05); color: var(--text-dim){% endif %};"> <span style="display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; background: {% if user.is_admin %}rgba(244,162,97,0.15); color: #f4a261{% else %}#e6e8e6; color: var(--text-dim){% endif %};">
{% if user.is_admin %}Admin{% else %}User{% endif %} {% if user.is_admin %}Admin{% else %}User{% endif %}
</span> </span>
</td> </td>
templates/components/anime_card.html
+2 -2
View File
@@ -2,9 +2,9 @@
<div class="hc" id="anime-{{ anime.url | hash }}" <div class="hc" id="anime-{{ anime.url | hash }}"
@click="activeTab = 'anime'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'anime' } })); $nextTick(() => { const input = document.getElementById('animeSearchInput'); if (input) { input.value = '{{ anime.title | e }}'; htmx.trigger(input, 'keyup'); } });"> @click="activeTab = 'anime'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'anime' } })); $nextTick(() => { const input = document.getElementById('animeSearchInput'); if (input) { input.value = '{{ anime.title | e }}'; htmx.trigger(input, 'keyup'); } });">
<div class="hc-poster"> <div class="hc-poster">
{% set poster = anime.cover_image or (anime.metadata.poster_image if anime.metadata else None) or 'https://placehold.co/400x600/161625/00d9ff?text=No+Image' %} {% set poster = anime.cover_image or (anime.metadata.poster_image if anime.metadata else None) or 'https://placehold.co/400x600/e6e8e6/f15025?text=No+Image' %}
<img src="{{ poster }}" alt="{{ anime.title }}" loading="lazy" referrerpolicy="no-referrer" <img src="{{ poster }}" alt="{{ anime.title }}" loading="lazy" referrerpolicy="no-referrer"
onerror="this.src='https://placehold.co/400x600/161625/00d9ff?text=Error'; this.onerror=null;"> onerror="this.src='https://placehold.co/400x600/e6e8e6/f15025?text=Error'; this.onerror=null;">
{% if anime.metadata and anime.metadata.rating %} {% if anime.metadata and anime.metadata.rating %}
<span class="hc-rating"><i class="fas fa-star"></i> {{ anime.metadata.rating }}</span> <span class="hc-rating"><i class="fas fa-star"></i> {{ anime.metadata.rating }}</span>
{% endif %} {% endif %}
templates/components/anime_search_results.html
+17 -17
View File
@@ -1,4 +1,4 @@
{% set accent = "#00d9ff" %} {% set accent = "#f15025" %}
{% set default_lang = settings.default_lang if settings else 'vostfr' %} {% set default_lang = settings.default_lang if settings else 'vostfr' %}
{% set _groups = namespace(items={}) %} {% set _groups = namespace(items={}) %}
@@ -36,9 +36,9 @@
{% set first_url = group.providers[0].url %} {% set first_url = group.providers[0].url %}
<div class="sr-card" style="--sr-accent: {{ accent }};"> <div class="sr-card" style="--sr-accent: {{ accent }};">
<a class="sr-poster-link" href="{{ first_url }}" target="_blank" rel="noopener"> <a class="sr-poster-link" href="{{ first_url }}" target="_blank" rel="noopener">
<img class="sr-poster-img" src="{{ group.cover or 'https://placehold.co/240x360/161625/00d9ff?text=No+Image' }}" <img class="sr-poster-img" src="{{ group.cover or 'https://placehold.co/240x360/e6e8e6/f15025?text=No+Image' }}"
alt="{{ group.title }}" loading="lazy" referrerpolicy="no-referrer" alt="{{ group.title }}" loading="lazy" referrerpolicy="no-referrer"
onerror="this.src='https://placehold.co/240x360/161625/00d9ff?text=Error'; this.onerror=null;"> onerror="this.src='https://placehold.co/240x360/e6e8e6/f15025?text=Error'; this.onerror=null;">
</a> </a>
<div class="sr-body"> <div class="sr-body">
<div class="sr-top"> <div class="sr-top">
@@ -114,11 +114,11 @@
.sr-card { .sr-card {
display: flex; gap: 20px; display: flex; gap: 20px;
background: var(--bg-card); border-radius: var(--card-radius); background: var(--bg-card); border-radius: var(--card-radius);
padding: 20px; border: 1px solid rgba(255,255,255,0.05); padding: 20px; border: 1px solid #ced0ce;
transition: var(--transition); transition: var(--transition);
} }
.sr-card:hover { border-color: var(--sr-accent); box-shadow: 0 4px 24px rgba(0,0,0,0.4); } .sr-card:hover { border-color: var(--sr-accent); }
.sr-poster-link { flex-shrink: 0; display: block; width: 120px; aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; background: #000; } .sr-poster-link { flex-shrink: 0; display: block; width: 120px; aspect-ratio: 2/3; border-radius: 4px; overflow: hidden; background: #000; }
.sr-poster-img { width: 100%; height: 100%; object-fit: cover; display: block; } .sr-poster-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .sr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sr-top { display: flex; align-items: baseline; gap: 12px; } .sr-top { display: flex; align-items: baseline; gap: 12px; }
@@ -126,24 +126,24 @@
.sr-rating { flex-shrink: 0; font-size: 0.8rem; font-weight: 700; color: #ffcc00; } .sr-rating { flex-shrink: 0; font-size: 0.8rem; font-weight: 700; color: #ffcc00; }
.sr-synopsis { font-size: 0.85rem; color: var(--text-dim); margin: 0; line-height: 1.5; } .sr-synopsis { font-size: 0.85rem; color: var(--text-dim); margin: 0; line-height: 1.5; }
.sr-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; } .sr-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.sr-tag { font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,0.06); color: var(--text-dim); } .sr-tag { font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: #e6e8e6; color: var(--text-dim); }
.sr-providers { display: flex; flex-wrap: wrap; gap: 6px; } .sr-providers { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-provider-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; border: 1px solid var(--sr-accent); color: var(--sr-accent); background: transparent; cursor: pointer; transition: var(--transition); letter-spacing: 0.5px; text-decoration: none; } .sr-provider-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; border: 1px solid var(--sr-accent); color: var(--sr-accent); background: transparent; cursor: pointer; transition: var(--transition); letter-spacing: 0.5px; text-decoration: none; }
.sr-provider-badge:hover { background: var(--sr-accent); color: var(--bg-dark); } .sr-provider-badge:hover { background: var(--sr-accent); color: #fff; }
.sr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .sr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: var(--transition); text-decoration: none; background: transparent; color: var(--text-main); min-height: 34px; } .sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; border: 1px solid #ced0ce; cursor: pointer; transition: var(--transition); text-decoration: none; background: transparent; color: var(--text-main); min-height: 34px; }
.sr-btn:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); } .sr-btn:hover { border-color: var(--text-main); background: var(--bg-card); }
.sr-btn-dl { border-color: var(--secondary); color: var(--secondary); } .sr-btn-dl { border-color: var(--secondary); color: var(--secondary); }
.sr-btn-dl:hover { background: var(--secondary); color: var(--bg-dark); } .sr-btn-dl:hover { background: var(--secondary); color: #191919; }
.sr-btn-watch { border-color: var(--sr-accent); color: var(--sr-accent); } .sr-btn-watch { border-color: var(--sr-accent); color: var(--sr-accent); }
.sr-btn-watch:hover { background: var(--sr-accent); color: var(--bg-dark); } .sr-btn-watch:hover { background: var(--sr-accent); color: #fff; }
.sr-btn-follow { border-color: var(--accent); color: var(--accent); } .sr-btn-follow { border-color: var(--accent); color: var(--accent); }
.sr-btn-follow:hover { background: var(--accent); color: var(--bg-dark); } .sr-btn-follow:hover { background: var(--accent); color: #fff; }
.sr-btn-followed { border-color: var(--accent); color: var(--accent); background: rgba(0,255,136,0.1); pointer-events: none; } .sr-btn-followed { border-color: var(--accent); color: var(--accent); background: rgba(241,80,37,0.1); pointer-events: none; }
.sr-dropdown { position: relative; } .sr-dropdown { position: relative; }
.sr-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; background: var(--bg-card); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 4px; z-index: 100; box-shadow: 0 8px 32px rgba(0,0,0,0.6); } .sr-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; background: var(--bg-card); border: 1px solid #ced0ce; border-radius: 4px; padding: 4px; z-index: 100; }
.sr-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; background: transparent; color: var(--text-main); font-size: 0.8rem; cursor: pointer; border-radius: 6px; transition: var(--transition); text-align: left; } .sr-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; background: transparent; color: var(--text-main); font-size: 0.8rem; cursor: pointer; border-radius: 4px; transition: var(--transition); text-align: left; }
.sr-dropdown-item:hover { background: rgba(255,255,255,0.06); } .sr-dropdown-item:hover { background: #ced0ce; }
.sr-empty { text-align: center; padding: 100px 20px; color: var(--text-dim); } .sr-empty { text-align: center; padding: 100px 20px; color: var(--text-dim); }
.sr-empty i { font-size: 4rem; margin-bottom: 20px; display: block; opacity: 0.2; } .sr-empty i { font-size: 4rem; margin-bottom: 20px; display: block; opacity: 0.2; }
@media (max-width: 768px) { @media (max-width: 768px) {
templates/components/downloads_section.html
+1 -1
View File
@@ -36,7 +36,7 @@
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 600; font-weight: 600;
color: var(--primary); color: var(--primary);
background: rgba(0, 217, 255, 0.1); background: rgba(241, 80, 37, 0.1);
padding: 2px 10px; padding: 2px 10px;
border-radius: 12px; border-radius: 12px;
margin-left: 10px; margin-left: 10px;
templates/components/episode_list.html
+10 -12
View File
@@ -60,7 +60,7 @@
background: var(--bg-card); background: var(--bg-card);
border-radius: var(--card-radius); border-radius: var(--card-radius);
padding: 30px; padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.05); border: 1px solid #ced0ce;
animation: fadeIn 0.3s ease-out; animation: fadeIn 0.3s ease-out;
} }
@@ -71,21 +71,20 @@
} }
.view-grid .episode-item { .view-grid .episode-item {
background: rgba(255, 255, 255, 0.03); background: #ffffff;
padding: 20px 15px; padding: 20px 15px;
border-radius: 12px; border-radius: 4px;
text-align: center; text-align: center;
transition: var(--transition); transition: var(--transition);
border: 1px solid rgba(255, 255, 255, 0.05); border: 1px solid #ced0ce;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
} }
.view-grid .episode-item:hover { .view-grid .episode-item:hover {
background: rgba(255, 255, 255, 0.07); background: #e6e8e6;
border-color: var(--primary); border-color: var(--primary);
transform: translateY(-3px);
} }
.view-grid .ep-title { display: none; } .view-grid .ep-title { display: none; }
@@ -103,15 +102,15 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
background: rgba(255, 255, 255, 0.03); background: #ffffff;
padding: 12px 20px; padding: 12px 20px;
border-radius: 10px; border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.05); border: 1px solid #ced0ce;
transition: var(--transition); transition: var(--transition);
} }
.view-list .episode-item:hover { .view-list .episode-item:hover {
background: rgba(255, 255, 255, 0.07); background: #e6e8e6;
border-color: var(--primary); border-color: var(--primary);
} }
@@ -123,9 +122,8 @@
margin: 20px 0 30px 0; margin: 20px 0 30px 0;
padding: 25px; padding: 25px;
background: #000; background: #000;
border-radius: 12px; border-radius: 4px;
border: 1px solid var(--primary); 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); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
templates/components/header.html
+1 -1
View File
@@ -6,7 +6,7 @@
<div id="userInfo" x-show="isAuthenticated" class="auth-panel" x-cloak> <div id="userInfo" x-show="isAuthenticated" class="auth-panel" x-cloak>
<div style="display: flex; align-items: center; gap: 10px;"> <div style="display: flex; align-items: center; gap: 10px;">
<span style="color: var(--primary); font-size: 1.2rem;">👤</span> <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> <span style="color: var(--text-main); font-size: 14px;">Connecté en tant que <strong x-text="username" style="color: var(--primary);">-</strong></span>
</div> </div>
<button class="btn btn-secondary btn-small" <button class="btn btn-secondary btn-small"
onclick="removeToken(); isAuthenticated = false" onclick="removeToken(); isAuthenticated = false"
templates/components/login_prompt.html
+2 -2
View File
@@ -1,4 +1,4 @@
<div class="login-prompt" style="text-align: center; padding: 40px 20px;"> <div class="login-prompt" style="text-align: center; padding: 40px 20px;">
<i class="fas fa-lock" style="font-size: 2rem; color: #00d9ff; margin-bottom: 15px;"></i> <i class="fas fa-lock" style="font-size: 2rem; color: #f15025; margin-bottom: 15px;"></i>
<p style="color: #888; font-size: 0.95rem;">Connectez-vous pour accéder à cette section.</p> <p style="color: #ced0ce; font-size: 0.95rem;">Connectez-vous pour accéder à cette section.</p>
</div> </div>
templates/components/player_embed.html
+2 -2
View File
@@ -41,8 +41,8 @@
margin: 20px 0; margin: 20px 0;
padding: 15px; padding: 15px;
background: #000; background: #000;
border-radius: 12px; border-radius: 4px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid #ced0ce;
} }
.iframe-container { .iframe-container {
position: relative; position: relative;
templates/components/series_card.html
+2 -2
View File
@@ -1,9 +1,9 @@
{% macro series_card(series, in_watchlist=False, lang='vf') %} {% macro series_card(series, in_watchlist=False, lang='vf') %}
<div class="ac" id="series-{{ series.url | hash }}"> <div class="ac" id="series-{{ series.url | hash }}">
<div class="ac-poster"> <div class="ac-poster">
<img src="{{ series.cover_image or 'https://placehold.co/400x600/161625/ff6b6b?text=No+Image' }}" <img src="{{ series.cover_image or 'https://placehold.co/400x600/e6e8e6/f15025?text=No+Image' }}"
alt="{{ series.title }}" loading="lazy" referrerpolicy="no-referrer" alt="{{ series.title }}" loading="lazy" referrerpolicy="no-referrer"
onerror="this.src='https://placehold.co/400x600/161625/ff6b6b?text=Error'; this.onerror=null;"> onerror="this.src='https://placehold.co/400x600/e6e8e6/f15025?text=Error'; this.onerror=null;">
<button class="ac-play" <button class="ac-play"
hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang={{ lang }}" hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang={{ lang }}"
hx-target="#player-container" hx-swap="innerHTML"> hx-target="#player-container" hx-swap="innerHTML">
templates/components/series_search_results.html
+16 -16
View File
@@ -1,4 +1,4 @@
{% set accent = "#ff6b6b" %} {% set accent = "#f15025" %}
{% set default_lang = settings.default_lang if settings else 'vf' %} {% set default_lang = settings.default_lang if settings else 'vf' %}
{% set _groups = namespace(items={}) %} {% set _groups = namespace(items={}) %}
@@ -28,9 +28,9 @@
{% set first_url = group.providers[0].url %} {% set first_url = group.providers[0].url %}
<div class="sr-card" style="--sr-accent: {{ accent }};"> <div class="sr-card" style="--sr-accent: {{ accent }};">
<a class="sr-poster-link" href="{{ first_url }}" target="_blank" rel="noopener"> <a class="sr-poster-link" href="{{ first_url }}" target="_blank" rel="noopener">
<img class="sr-poster-img" src="{{ group.cover or 'https://placehold.co/240x360/161625/ff6b6b?text=No+Image' }}" <img class="sr-poster-img" src="{{ group.cover or 'https://placehold.co/240x360/e6e8e6/f15025?text=No+Image' }}"
alt="{{ group.title }}" loading="lazy" referrerpolicy="no-referrer" alt="{{ group.title }}" loading="lazy" referrerpolicy="no-referrer"
onerror="this.src='https://placehold.co/240x360/161625/ff6b6b?text=Error'; this.onerror=null;"> onerror="this.src='https://placehold.co/240x360/e6e8e6/f15025?text=Error'; this.onerror=null;">
</a> </a>
<div class="sr-body"> <div class="sr-body">
<h3 class="sr-title">{{ group.title }}</h3> <h3 class="sr-title">{{ group.title }}</h3>
@@ -93,32 +93,32 @@
.sr-card { .sr-card {
display: flex; gap: 20px; display: flex; gap: 20px;
background: var(--bg-card); border-radius: var(--card-radius); background: var(--bg-card); border-radius: var(--card-radius);
padding: 20px; border: 1px solid rgba(255,255,255,0.05); padding: 20px; border: 1px solid #ced0ce;
transition: var(--transition); transition: var(--transition);
} }
.sr-card:hover { border-color: var(--sr-accent); box-shadow: 0 4px 24px rgba(0,0,0,0.4); } .sr-card:hover { border-color: var(--sr-accent); }
.sr-poster-link { flex-shrink: 0; display: block; width: 120px; aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; background: #000; } .sr-poster-link { flex-shrink: 0; display: block; width: 120px; aspect-ratio: 2/3; border-radius: 4px; overflow: hidden; background: #000; }
.sr-poster-img { width: 100%; height: 100%; object-fit: cover; display: block; } .sr-poster-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .sr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sr-title { font-size: 1.1rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-title { font-size: 1.1rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-synopsis { font-size: 0.85rem; color: var(--text-dim); margin: 0; line-height: 1.5; } .sr-synopsis { font-size: 0.85rem; color: var(--text-dim); margin: 0; line-height: 1.5; }
.sr-providers { display: flex; flex-wrap: wrap; gap: 6px; } .sr-providers { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-provider-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; border: 1px solid var(--sr-accent); color: var(--sr-accent); background: transparent; cursor: pointer; transition: var(--transition); letter-spacing: 0.5px; text-decoration: none; } .sr-provider-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; border: 1px solid var(--sr-accent); color: var(--sr-accent); background: transparent; cursor: pointer; transition: var(--transition); letter-spacing: 0.5px; text-decoration: none; }
.sr-provider-badge:hover { background: var(--sr-accent); color: var(--bg-dark); } .sr-provider-badge:hover { background: var(--sr-accent); color: #fff; }
.sr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .sr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: var(--transition); text-decoration: none; background: transparent; color: var(--text-main); min-height: 34px; } .sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; border: 1px solid #ced0ce; cursor: pointer; transition: var(--transition); text-decoration: none; background: transparent; color: var(--text-main); min-height: 34px; }
.sr-btn:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); } .sr-btn:hover { border-color: var(--text-main); background: var(--bg-card); }
.sr-btn-dl { border-color: var(--secondary); color: var(--secondary); } .sr-btn-dl { border-color: var(--secondary); color: var(--secondary); }
.sr-btn-dl:hover { background: var(--secondary); color: var(--bg-dark); } .sr-btn-dl:hover { background: var(--secondary); color: #191919; }
.sr-btn-watch { border-color: var(--sr-accent); color: var(--sr-accent); } .sr-btn-watch { border-color: var(--sr-accent); color: var(--sr-accent); }
.sr-btn-watch:hover { background: var(--sr-accent); color: var(--bg-dark); } .sr-btn-watch:hover { background: var(--sr-accent); color: #fff; }
.sr-btn-follow { border-color: var(--accent); color: var(--accent); } .sr-btn-follow { border-color: var(--accent); color: var(--accent); }
.sr-btn-follow:hover { background: var(--accent); color: var(--bg-dark); } .sr-btn-follow:hover { background: var(--accent); color: #fff; }
.sr-btn-followed { border-color: var(--accent); color: var(--accent); background: rgba(0,255,136,0.1); pointer-events: none; } .sr-btn-followed { border-color: var(--accent); color: var(--accent); background: rgba(241,80,37,0.1); pointer-events: none; }
.sr-dropdown { position: relative; } .sr-dropdown { position: relative; }
.sr-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; background: var(--bg-card); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 4px; z-index: 100; box-shadow: 0 8px 32px rgba(0,0,0,0.6); } .sr-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; background: var(--bg-card); border: 1px solid #ced0ce; border-radius: 4px; padding: 4px; z-index: 100; }
.sr-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; background: transparent; color: var(--text-main); font-size: 0.8rem; cursor: pointer; border-radius: 6px; transition: var(--transition); text-align: left; } .sr-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; background: transparent; color: var(--text-main); font-size: 0.8rem; cursor: pointer; border-radius: 4px; transition: var(--transition); text-align: left; }
.sr-dropdown-item:hover { background: rgba(255,255,255,0.06); } .sr-dropdown-item:hover { background: #ced0ce; }
.sr-empty { text-align: center; padding: 100px 20px; color: var(--text-dim); } .sr-empty { text-align: center; padding: 100px 20px; color: var(--text-dim); }
.sr-empty i { font-size: 4rem; margin-bottom: 20px; display: block; opacity: 0.2; } .sr-empty i { font-size: 4rem; margin-bottom: 20px; display: block; opacity: 0.2; }
@media (max-width: 768px) { @media (max-width: 768px) {
templates/components/settings_section.html
+7 -8
View File
@@ -4,7 +4,7 @@
</div> </div>
<!-- General Preferences --> <!-- General Preferences -->
<div class="settings-card card" style="margin-bottom: 30px; padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid rgba(255,255,255,0.05);"> <div class="settings-card card" style="margin-bottom: 30px; padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #ced0ce;">
<h3 style="margin-bottom: 20px; color: var(--primary);">General</h3> <h3 style="margin-bottom: 20px; color: var(--primary);">General</h3>
<form id="settings-form" class="settings-form"> <form id="settings-form" class="settings-form">
@@ -43,7 +43,7 @@
</div> </div>
<!-- Content Filters --> <!-- Content Filters -->
<div class="settings-card card" style="margin-bottom: 30px; padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid rgba(255,255,255,0.05);"> <div class="settings-card card" style="margin-bottom: 30px; padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #ced0ce;">
<h3 style="margin-bottom: 20px; color: var(--primary);">Filtres de contenu</h3> <h3 style="margin-bottom: 20px; color: var(--primary);">Filtres de contenu</h3>
<div class="form-group"> <div class="form-group">
@@ -66,12 +66,12 @@
</div> </div>
<!-- Categories --> <!-- Categories -->
<div class="settings-card card" style="margin-bottom: 30px; padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid rgba(255,255,255,0.05);"> <div class="settings-card card" style="margin-bottom: 30px; padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #ced0ce;">
<h3 style="margin-bottom: 20px; color: var(--primary);">Categories</h3> <h3 style="margin-bottom: 20px; color: var(--primary);">Categories</h3>
<p style="color: var(--text-dim); font-size: 13px; margin-bottom: 15px;">Activez ou desactivez les categories. Au moins une doit rester active.</p> <p style="color: var(--text-dim); font-size: 13px; margin-bottom: 15px;">Activez ou desactivez les categories. Au moins une doit rester active.</p>
<div style="display: flex; gap: 15px; flex-wrap: wrap;"> <div style="display: flex; gap: 15px; flex-wrap: wrap;">
<label class="toggle-card" style="flex: 1; min-width: 200px; padding: 15px; background: rgba(255,255,255,0.02); border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: space-between; cursor: pointer;"> <label class="toggle-card" style="flex: 1; min-width: 200px; padding: 15px; background: #ffffff; border-radius: 4px; border: 1px solid #ced0ce; display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
<div> <div>
<div style="font-weight: 600; font-size: 1.1rem;">Animes</div> <div style="font-weight: 600; font-size: 1.1rem;">Animes</div>
<div style="font-size: 0.8rem; color: var(--text-dim);">Films et series anime</div> <div style="font-size: 0.8rem; color: var(--text-dim);">Films et series anime</div>
@@ -79,7 +79,7 @@
<input type="checkbox" id="anime_enabled" {% if settings.anime_enabled %}checked{% endif %} onchange="toggleCategory('anime_enabled', this.checked)" style="width: 20px; height: 20px; cursor: pointer; accent-color: var(--primary);"> <input type="checkbox" id="anime_enabled" {% if settings.anime_enabled %}checked{% endif %} onchange="toggleCategory('anime_enabled', this.checked)" style="width: 20px; height: 20px; cursor: pointer; accent-color: var(--primary);">
</label> </label>
<label class="toggle-card" style="flex: 1; min-width: 200px; padding: 15px; background: rgba(255,255,255,0.02); border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: space-between; cursor: pointer;"> <label class="toggle-card" style="flex: 1; min-width: 200px; padding: 15px; background: #ffffff; border-radius: 4px; border: 1px solid #ced0ce; display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
<div> <div>
<div style="font-weight: 600; font-size: 1.1rem;">Series TV</div> <div style="font-weight: 600; font-size: 1.1rem;">Series TV</div>
<div style="font-size: 0.8rem; color: var(--text-dim);">Series americaines et europeennes</div> <div style="font-size: 0.8rem; color: var(--text-dim);">Series americaines et europeennes</div>
@@ -90,7 +90,7 @@
</div> </div>
<!-- Providers Management --> <!-- Providers Management -->
<div class="settings-card card" style="padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid rgba(255,255,255,0.05);"> <div class="settings-card card" style="padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #ced0ce;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<h3 style="margin: 0; color: var(--primary);">Disponibilite des Fournisseurs</h3> <h3 style="margin: 0; color: var(--primary);">Disponibilite des Fournisseurs</h3>
<button class="btn btn-secondary btn-small" hx-post="/api/providers/health/check" hx-swap="none"> <button class="btn btn-secondary btn-small" hx-post="/api/providers/health/check" hx-swap="none">
@@ -100,7 +100,7 @@
<div class="providers-settings-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px;"> <div class="providers-settings-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px;">
{% for provider in providers %} {% for provider in providers %}
<div class="provider-status-card" style="padding: 15px; background: rgba(255,255,255,0.02); border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: space-between;"> <div class="provider-status-card" style="padding: 15px; background: #ffffff; border-radius: 4px; border: 1px solid #ced0ce; display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center; gap: 12px;"> <div style="display: flex; align-items: center; gap: 12px;">
<span style="font-size: 1.5rem;">{{ provider.icon }}</span> <span style="font-size: 1.5rem;">{{ provider.icon }}</span>
<div> <div>
@@ -223,6 +223,5 @@ function showToast(message, type) {
} }
.status-dot { .status-dot {
display: inline-block; display: inline-block;
box-shadow: 0 0 5px currentColor;
} }
</style> </style>
templates/components/toast_container.html
+8 -8
View File
@@ -37,18 +37,18 @@
.toast { .toast {
min-width: 250px; min-width: 250px;
padding: 12px 16px; padding: 12px 16px;
border-radius: 8px; border-radius: 4px;
background: #2d2d2d; background: #e6e8e6;
color: white; color: #191919;
box-shadow: 0 4px 12px rgba(0,0,0,0.3); border: 1px solid #ced0ce;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-left: 4px solid #ccc; border-left: 4px solid #ced0ce;
} }
.toast-success { border-left-color: #4caf50; } .toast-success { border-left-color: #2d936c; }
.toast-error { border-left-color: #f44336; } .toast-error { border-left-color: #e63946; }
.toast-info { border-left-color: #2196f3; } .toast-info { border-left-color: #f15025; }
.toast-content { display: flex; align-items: center; gap: 10px; } .toast-content { display: flex; align-items: center; gap: 10px; }
.toast-close { background: none; border: none; color: #aaa; cursor: pointer; } .toast-close { background: none; border: none; color: #aaa; cursor: pointer; }
</style> </style>
templates/components/watchlist_items_list.html
+29 -25
View File
@@ -167,7 +167,7 @@
.filter-tabs { .filter-tabs {
display: flex; display: flex;
gap: 8px; gap: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid #ced0ce;
padding-bottom: 12px; padding-bottom: 12px;
margin-bottom: 8px; margin-bottom: 8px;
} }
@@ -188,7 +188,7 @@
} }
.filter-tab:hover { .filter-tab:hover {
background: rgba(255, 255, 255, 0.05); background: #e6e8e6;
color: var(--text-main); color: var(--text-main);
} }
@@ -211,14 +211,12 @@
background: var(--bg-card); background: var(--bg-card);
border-radius: var(--card-radius); border-radius: var(--card-radius);
padding: 16px; padding: 16px;
border: 1px solid rgba(255, 255, 255, 0.05); border: 1px solid #ced0ce;
transition: var(--transition); transition: var(--transition);
} }
.watchlist-card:hover { .watchlist-card:hover {
border-color: var(--primary); border-color: var(--primary);
box-shadow: 0 4px 24px rgba(0, 217, 255, 0.15);
transform: translateY(-2px);
} }
/* Poster */ /* Poster */
@@ -254,22 +252,22 @@
} }
.poster-badge.active { .poster-badge.active {
background: rgba(0, 255, 136, 0.9); background: #2d936c;
color: var(--bg-dark); color: #fff;
} }
.poster-badge.paused { .poster-badge.paused {
background: rgba(255, 193, 7, 0.9); background: #f4a261;
color: var(--bg-dark); color: #191919;
} }
.poster-badge.completed { .poster-badge.completed {
background: rgba(156, 39, 176, 0.9); background: #9c27b0;
color: var(--bg-dark); color: #fff;
} }
.poster-badge.archived { .poster-badge.archived {
background: rgba(255, 255, 255, 0.15); background: #ced0ce;
color: var(--text-dim); color: var(--text-dim);
} }
@@ -279,7 +277,7 @@
left: 8px; left: 8px;
padding: 4px 10px; padding: 4px 10px;
border-radius: 20px; border-radius: 20px;
background: rgba(0, 217, 255, 0.9); background: #f15025;
color: var(--bg-dark); color: var(--bg-dark);
font-size: 0.65rem; font-size: 0.65rem;
font-weight: 700; font-weight: 700;
@@ -327,21 +325,21 @@
} }
.meta-provider { .meta-provider {
background: rgba(0, 217, 255, 0.15); background: rgba(241, 80, 37, 0.1);
color: var(--primary); color: var(--primary);
border: 1px solid rgba(0, 217, 255, 0.3); border: 1px solid rgba(241, 80, 37, 0.3);
} }
.meta-lang { .meta-lang {
background: rgba(255, 107, 107, 0.15); background: rgba(206, 208, 206, 0.3);
color: var(--secondary); color: var(--text-dim);
border: 1px solid rgba(255, 107, 107, 0.3); border: 1px solid var(--text-dim);
} }
.meta-quality { .meta-quality {
background: rgba(0, 255, 136, 0.15); background: rgba(45, 147, 108, 0.1);
color: var(--accent); color: var(--success);
border: 1px solid rgba(0, 255, 136, 0.3); border: 1px solid rgba(45, 147, 108, 0.3);
} }
.watchlist-synopsis { .watchlist-synopsis {
@@ -375,7 +373,7 @@
gap: 6px; gap: 6px;
margin-top: auto; margin-top: auto;
padding-top: 8px; padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.05); border-top: 1px solid #ced0ce;
} }
.action-btn { .action-btn {
@@ -389,12 +387,18 @@
font-size: 0.85rem; font-size: 0.85rem;
cursor: pointer; cursor: pointer;
transition: var(--transition); transition: var(--transition);
background: rgba(255, 255, 255, 0.05); background: #e6e8e6;
border: none;
border-radius: 6px;
font-size: 0.85rem;
cursor: pointer;
transition: var(--transition);
background: #e6e8e6;
color: var(--text-dim); color: var(--text-dim);
} }
.action-btn:hover { .action-btn:hover {
background: rgba(255, 255, 255, 0.1); background: #ced0ce;
color: var(--text-main); color: var(--text-main);
} }
@@ -436,7 +440,7 @@
padding: 80px 40px; padding: 80px 40px;
background: var(--bg-card); background: var(--bg-card);
border-radius: var(--card-radius); border-radius: var(--card-radius);
border: 1px dashed rgba(255, 255, 255, 0.1); border: 1px dashed #ced0ce;
} }
.watchlist-empty i { .watchlist-empty i {
templates/components/watchlist_section.html
+7 -7
View File
@@ -35,15 +35,15 @@
display: flex; display: flex;
gap: 15px; gap: 15px;
padding: 15px; padding: 15px;
background: rgba(255, 255, 255, 0.05); background: #e6e8e6;
border-radius: 12px; border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid #ced0ce;
transition: transform 0.2s; transition: border-color 0.2s;
} }
.watchlist-item:hover { transform: translateY(-3px); border-color: #00d9ff; } .watchlist-item:hover { border-color: #f15025; }
.item-poster img { width: 80px; height: 120px; border-radius: 8px; object-fit: cover; } .item-poster img { width: 80px; height: 120px; border-radius: 4px; object-fit: cover; }
.item-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .item-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.item-info h3 { font-size: 1rem; margin-bottom: 5px; color: #fff; } .item-info h3 { font-size: 1rem; margin-bottom: 5px; color: #191919; }
.item-meta { display: flex; gap: 8px; margin-bottom: 8px; } .item-meta { display: flex; gap: 8px; margin-bottom: 8px; }
.item-actions { display: flex; gap: 10px; margin-top: 10px; } .item-actions { display: flex; gap: 10px; margin-top: 10px; }
</style> </style>
templates/index.html
+2 -2
View File
@@ -46,7 +46,7 @@
<!-- Player container for HTMX injections --> <!-- Player container for HTMX injections -->
<div id="player-container"></div> <div id="player-container"></div>
<hr style="border: none; border-top: 1px solid rgba(255,255,255,0.05); margin: 40px 0;"> <hr style="border: none; border-top: 1px solid #ced0ce; margin: 40px 0;">
<!-- Latest Releases Section - Anime only --> <!-- Latest Releases Section - Anime only -->
<div class="section-header"> <div class="section-header">
@@ -97,7 +97,7 @@
<!-- Series search results --> <!-- Series search results -->
<div id="seriesSearchResults" style="margin-bottom: 40px;"></div> <div id="seriesSearchResults" style="margin-bottom: 40px;"></div>
<hr style="border: none; border-top: 1px solid rgba(255,255,255,0.05); margin: 40px 0;"> <hr style="border: none; border-top: 1px solid #ced0ce; margin: 40px 0;">
<!-- Recommendations Section - Series only --> <!-- Recommendations Section - Series only -->
<div class="section-header"> <div class="section-header">
templates/player.html
+27 -27
View File
@@ -14,13 +14,13 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); background: #ffffff;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
color: #fff; color: #191919;
} }
.container { .container {
@@ -36,13 +36,14 @@
.header h1 { .header h1 {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 10px; margin-bottom: 10px;
color: #00d9ff; color: #f15025;
} }
.video-info { .video-info {
background: rgba(255, 255, 255, 0.05); background: #e6e8e6;
padding: 15px 20px; padding: 15px 20px;
border-radius: 10px; border-radius: 4px;
border: 1px solid #ced0ce;
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -57,19 +58,18 @@
} }
.video-info .filesize { .video-info .filesize {
color: #aaa; color: #ced0ce;
font-size: 0.9rem; font-size: 0.9rem;
} }
.video-wrapper { .video-wrapper {
background: #000; background: #000;
border-radius: 15px; border-radius: 4px;
overflow: hidden; overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
} }
.plyr { .plyr {
border-radius: 15px; border-radius: 4px;
} }
.controls { .controls {
@@ -82,13 +82,13 @@
.btn { .btn {
padding: 12px 24px; padding: 12px 24px;
background: rgba(255, 255, 255, 0.1); background: #e6e8e6;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid #ced0ce;
color: #fff; color: #191919;
border-radius: 8px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 0.9rem; font-size: 0.9rem;
transition: all 0.3s ease; transition: all 0.2s ease;
text-decoration: none; text-decoration: none;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -96,28 +96,28 @@
} }
.btn:hover { .btn:hover {
background: rgba(0, 217, 255, 0.2); background: #ced0ce;
border-color: #00d9ff; border-color: #191919;
transform: translateY(-2px);
} }
.btn-primary { .btn-primary {
background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%); background: #f15025;
border: none; border: 1px solid #f15025;
color: #000; color: #fff;
font-weight: 600; font-weight: 600;
} }
.btn-primary:hover { .btn-primary:hover {
background: linear-gradient(135deg, #00ff88 0%, #00d9ff 100%); background: #d94420;
border-color: #d94420;
} }
.error-message { .error-message {
background: rgba(255, 71, 87, 0.1); background: rgba(230, 57, 70, 0.1);
border: 1px solid #ff4757; border: 1px solid #e63946;
color: #ff4757; color: #e63946;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 4px;
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
} }
@@ -169,8 +169,8 @@
wrapper.innerHTML = ` wrapper.innerHTML = `
<div class="error-message"> <div class="error-message">
Erreur lors de la lecture du flux vidéo.<br> Erreur lors de la lecture du flux vidéo.<br>
<a href="/video/{{ task_id }}" style="color: #00d9ff; text-decoration: underline;">Réessayer</a> ou <a href="/video/{{ task_id }}" style="color: #f15025; text-decoration: underline;">Réessayer</a> ou
<a href="/stream/{{ filename }}" style="color: #00d9ff; text-decoration: underline;" download>Télécharger</a> <a href="/stream/{{ filename }}" style="color: #f15025; text-decoration: underline;" download>Télécharger</a>
</div> </div>
`; `;
}); });
templates/watchlist.html
+5 -5
View File
@@ -10,18 +10,18 @@
<body class="watchlist-body"> <body class="watchlist-body">
<!-- Main Header --> <!-- Main Header -->
<div style="text-align: center; margin-bottom: 20px;"> <div style="text-align: center; margin-bottom: 20px;">
<h1 style="background: linear-gradient(45deg, #00d9ff, #00ff88); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 32px; margin: 0;">⚡ Ohm Stream Downloader</h1> <h1 style="color: #f15025; font-size: 32px; margin: 0;">⚡ Ohm Stream Downloader</h1>
<p style="color: #888; font-size: 14px; margin: 5px 0 0;">Téléchargez vos vidéos, animes et séries</p> <p style="color: #ced0ce; font-size: 14px; margin: 5px 0 0;">Téléchargez vos vidéos, animes et séries</p>
</div> </div>
<!-- User Info --> <!-- User Info -->
<div id="userInfo" style="display: none; max-width: 1200px; margin: 0 auto 15px; padding: 10px; background: rgba(0,217,255,0.1); border-radius: 8px; display: flex; justify-content: space-between; align-items: center;"> <div id="userInfo" style="display: none; max-width: 1200px; margin: 0 auto 15px; padding: 10px; background: rgba(241,80,37,0.1); border: 1px solid #f15025; border-radius: 4px;">
<span style="color: #00d9ff;">👤 Connecté</span> <span style="color: #f15025;">👤 Connecté</span>
<button class="btn-secondary btn-small" onclick="handleLogout()">🚪 Déconnexion</button> <button class="btn-secondary btn-small" onclick="handleLogout()">🚪 Déconnexion</button>
</div> </div>
<!-- Tabs --> <!-- Tabs -->
<div class="tabs" style="max-width: 1200px; margin: 0 auto 20px; display: flex; gap: 5px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px;"> <div class="tabs" style="max-width: 1200px; margin: 0 auto 20px; display: flex; gap: 5px; border-bottom: 1px solid #ced0ce; padding-bottom: 10px;">
<button class="tab" onclick="window.location.href='/web'">🏠 Accueil</button> <button class="tab" onclick="window.location.href='/web'">🏠 Accueil</button>
<button class="tab" onclick="window.location.href='/web#anime'">🎬 Anime</button> <button class="tab" onclick="window.location.href='/web#anime'">🎬 Anime</button>
<button class="tab" onclick="window.location.href='/web#series'">📺 Série</button> <button class="tab" onclick="window.location.href='/web#series'">📺 Série</button>