commit f57da5ac8af2af7de707b91a062cdb3316c6829d Author: eddmanoo Date: Fri Sep 19 10:45:42 2025 +0300 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..df21f22 --- /dev/null +++ b/README.md @@ -0,0 +1,169 @@ +# Tema CSS Personalizata pentru Jellyfin Server + +## Descriere + +Aceasta tema CSS ofera o interfata moderna si eleganta pentru serverul tau Jellyfin, cu imbunatatiri vizuale si functionale pentru o experienta mai buna de utilizare. + +## Caracteristici + +### 🎨 Design Modern +- **Paleta de culori**: Albastru Jellyfin (#00a4dc) cu accente portocalii (#ff6b35) +- **Fundal intunecat**: Gradient elegant cu multiple tonuri de gri +- **Colturi rotunjite**: Design modern cu border-radius consistent +- **Umbre si efecte**: Box-shadow si backdrop-filter pentru profunzime + +### ✨ Animatii si Tranzitii +- **Hover effects**: Transformari fluide pentru carduri si butoane +- **Animatii fade-in**: Aparitie eleganta pentru elemente +- **Tranzitii smooth**: Toate elementele au tranzitii de 0.2-0.5s +- **Efecte pulse**: Animatii pentru butoane in focus + +### πŸ“± Responsive Design +- **Mobile-friendly**: Optimizat pentru toate dimensiunile de ecran +- **Taburi mari**: Butoane mai mari pentru dispozitivele mobile +- **Layout flexibil**: Adaptare automata la diferite rezolutii + +### 🎬 imbunatatiri Media +- **Carduri hover**: Efecte 3D pentru postere filme/seriale +- **Cast circular**: Imagini rotunde pentru actorii din cast +- **Preview episoade**: Layout compact pentru episoade +- **Player imbunatatit**: Controale video stilizate + +## Instalare + +### Pas 1: Acceseaza Dashboard-ul +1. Deschide interfata web Jellyfin +2. Mergi la **Dashboard** (Settings) +3. Selecteaza **General** din meniul lateral + +### Pas 2: Aplica CSS-ul +1. Gaseste sectiunea **"Custom CSS"** +2. Copiaza tot continutul din fisierul `edd.css` +3. Lipeste codul in cΓ’mpul "Custom CSS" +4. Apasa **"Save"** pentru a salva setarile + +### Pas 3: Verifica Rezultatul +- Modificarile se aplica imediat +- Nu este nevoie sa restartezi serverul +- Reimprospateaza pagina pentru a vedea toate schimbarile + +## Personalizare + +### Modificarea Culorilor +Pentru a schimba culorile temei, editeaza variabilele din sectiunea `:root`: + +```css +:root { + --primary-color: #00a4dc; /* Culoarea principala */ + --accent-color: #ff6b35; /* Culoarea accent */ + --background-dark: #0f0f0f; /* Fundal inchis */ + --text-primary: #ffffff; /* Text principal */ +} +``` + +### Exemple de Paleta Alternative + +#### Tema Verde +```css +--primary-color: #28a745; +--accent-color: #20c997; +``` + +#### Tema Violet +```css +--primary-color: #6f42c1; +--accent-color: #e83e8c; +``` + +#### Tema Rosie +```css +--primary-color: #dc3545; +--accent-color: #fd7e14; +``` + +## Functionalitati Incluse + +### πŸ”§ imbunatatiri Interface +- βœ… Header transparent cu blur effect +- βœ… Meniu lateral stilizat +- βœ… Butoane cu gradient si hover effects +- βœ… Formulare imbunatatite cu focus states +- βœ… Scrollbar personalizat + +### 🎭 Elemente Media +- βœ… Carduri cu animatii hover +- βœ… Indicatori vizionare stilizati +- βœ… Cast & crew cu imagini circulare +- βœ… Preview episoade compacte +- βœ… Player video imbunatatit + +### πŸ“± Mobile & Responsive +- βœ… Layout responsive pentru mobile +- βœ… Taburi mari pentru touch +- βœ… Formular login adaptat +- βœ… Linkuri externe vizibile pe mobile + +### 🎨 Efecte Vizuale +- βœ… Animatii fade-in pentru carduri +- βœ… Efecte pulse pentru butoane +- βœ… Tranzitii fluide pentru toate elementele +- βœ… Box-shadow pentru profunzime + +## Compatibilitate + +- βœ… **Jellyfin WebUI**: Toate versiunile moderne +- βœ… **Browsere**: Chrome, Firefox, Safari, Edge +- βœ… **Dispozitive**: Desktop, Tablet, Mobile +- βœ… **Aplicatii**: Jellyfin pentru Android (WebUI) + +## Suport si Depanare + +### Probleme Comune + +**CSS-ul nu se aplica:** +- Verifica daca ai copiat tot codul +- Asigura-te ca ai salvat setarile +- Reimprospateaza pagina (Ctrl+F5) + +**Culorile nu arata bine:** +- Modifica variabilele din `:root` +- Testeaza pe diferite browsere +- Verifica contrastul pentru accesibilitate + +**Layout stricat pe mobile:** +- Verifica media queries +- Testeaza pe diferite dimensiuni +- Ajusteaza padding-ul si margin-ul + +### Backup si Restaurare + +**inainte de aplicare:** +1. Fa o captura de ecran a interfetei curente +2. Salveaza CSS-ul existent (daca exista) +3. Noteaza setarile importante + +**Pentru restaurare:** +1. sterge continutul din "Custom CSS" +2. Salveaza setarile +3. Reimprospateaza pagina + +## Contributii + +Daca ai imbunatatiri sau sugestii: +1. Testeaza modificarile pe diferite browsere +2. Documenteaza schimbarile facute +3. Verifica compatibilitatea cu versiunile noi Jellyfin + +## Licenta + +Acest cod CSS este oferit gratuit pentru uz personal si comercial. +Modifica si distribuie liber, mentionΓ’nd sursa originala. + +--- + +**Autor**: EDD +**Versiune**: 1.0 +**Data**: 2025 +**Compatibilitate**: Jellyfin WebUI (toate versiunile moderne) + +Bucura-te de experienta imbunatatita Jellyfin! 🎬✨