# MyUIbrix Editor - Vylepšení a Modernizace

**Datum:** 15. října 2025  
**Verze:** 2.0

---

## 📋 Přehled Změn

MyUIbrix Editor byl kompletně přepracován s moderním minimalistickým designem, českým jazykem a výrazně rozšířenou knihovnou elementů. Editor nyní nabízí intuitivnější uživatelské rozhraní s pokročilými funkcemi pro správu obsahu.

---

## 🎨 Klíčové Vylepšení

### 1. **Rozšířená Knihovna Elementů (31 elementů)**

Počet dostupných elementů byl zdvojnásoben z 15 na 31, s kompletními českými popisy:

#### **Rozvržení (Layout)** - 5 elementů
- 📋 **Hlavička** - Hlavička stránky s logem a navigací
- 🎯 **Hlavní Sekce** - Hlavní obsahová oblast s úvodním obsahem
- 📄 **Patička** - Spodní část stránky s odkazy a kontakty
- ▶️ **Boční Panel** - Boční sloupec s doplňkovým obsahem
- 🎪 **Banner** - Reklamní nebo informační banner

#### **Obsah (Content)** - 11 elementů
- 📰 **Novinky** - Nejnovější články a zprávy
- ⚽ **Zápasy** - Nadcházející a poslední zápasy
- 👥 **Tým** - Hráči a realizační tým
- 📊 **Tabulka** - Ligová tabulka
- 📈 **Statistiky** - Týmové a hráčské statistiky
- 📅 **Akce** - Nadcházející události a aktivity
- 🤝 **Partneři** - Loga a odkazy partnerů
- 👕 **Fanshop** - Prodej klubového zboží
- 💬 **Reference** - Hodnocení a ohlasy fanoušků
- 🏆 **Úspěchy** - Trofeje a ocenění klubu
- 📜 **Historie** - Historie a milníky klubu

#### **Média (Media)** - 5 elementů
- 🖼️ **Galerie** - Fotogalerie
- 🎥 **Videa** - YouTube videa a sestřihy
- 📡 **Live Stream** - Živé přenosy zápasů
- 🎙️ **Podcast** - Zvukové podcasty a komentáře
- 📱 **Sociální Sítě** - Příspěvky ze sociálních sítí

#### **Interaktivní (Interactive)** - 10 elementů
- ✉️ **Newsletter** - Formulář pro odběr novinek
- 📞 **Kontakt** - Kontaktní formulář
- ⏱️ **Odpočet** - Odpočet do příštího zápasu
- 📊 **Anketa** - Hlasování a ankety pro fanoušky
- 🎯 **Kvíz** - Interaktivní kvízy
- 🔍 **Vyhledávání** - Vyhledávací pole
- 🗺️ **Mapa** - Mapa stadionu a areálu
- 📆 **Kalendář** - Kalendář zápasů a akcí
- 🌤️ **Počasí** - Informace o počasí na stadionu
- 🎫 **Vstupenky** - Prodej a rezervace vstupenek

---

### 2. **Rozšířené Varianty Stylů**

Každý element nyní nabízí více variant (celkem 100+ variant):

#### Příklady rozšíření:
- **Hlavička**: 6 variant (Jednotný, Okrajový, Minimální, Moderní, Přilepený, Průhledný)
- **Hero**: 7 variant (Mřížka, Karusel, Celý Karusel, Okrajový, Video, Rozdělený, **Zvýrazněný + Sidebar**)
- **Novinky**: 8 variant (Mřížka, Posuvník, **Hero Karusel**, **Zvýrazněný + Sidebar**, Seznam, Magazín, Zdivo, Časová Osa)
- **Tým**: 8 variant (Mřížka, Seznam, Karusel, **Auto Scroller**, Tabulka, Hierarchie, **Rozestavení**, **Hloubka Kádru**)
- **Zápasy**: 7 variant (Kompaktní, Rozšířený, Časová Osa, Kalendář, Živě, **Tabule**, **Ticker**)
- **Partneři**: 7 variant (Mřížka, Posuvník, Horizontální, Pyramida, Zeď, **Vrstvený**, **Spotlight**)
- **Galerie**: 7 variant (Mřížka, Zdivo, Posuvník, Lightbox, Koláž, **Zvýrazněná + Mřížka**, **Stories**)
- **Videa**: 6 variant (Mřížka, Zvýrazněné, Karusel, Playlist, **Sestřih**, **Kanál**)
- **Statistiky**: 6 variant (Karty, Tabulka, Grafy, Dashboard, **Žebříček**, **Porovnání**)
- **Akce**: 6 variant (Seznam, Kalendář, Časová Osa, Karty, **Zvýrazněná Akce**, **Odpočet + Mřížka**)
- **Sociální Sítě**: 6 variant (Mřížka, Boční Panel, Plovoucí, Tok, **Sociální Zeď**, **Highlights**)
- **Newsletter**: 6 variant (Výchozí, Vyskakovací, Vložený, Boční, **Banner**, **Hero CTA**)

Všechny varianty mají české názvy a popisy.

#### 🆕 Speciální Styly:

**1. Hero Karusel (Novinky)**
- Plnoobrazovkový karusel s jedním článkem najednou
- Automatické přepínání mezi články
- Tlačítko CTA vlevo dole (např. "ZJISTIT VÍCE")
- Numerace vpravo dole (01, 02, 03...)
- Tmavý overlay pro lepší čitelnost

**2. Auto Scroller (Tým)**
- Automatický horizontální scroller
- Zobrazení hráčů se jménem, číslem dresu
- Odkaz na profil každého hráče
- Tab přepínání (Muži/Ženy)
- Fokus na centrálního hráče

**3. Zvýrazněný + Sidebar (Hero/Novinky)**
- **Layout**: Split screen (70% vlevo / 30% vpravo)
- **Levá strana**: 
  - Velký featured článek s plným obrázkem na pozadí
  - Kategorie/tagy nahoře (např. "UNLIMITED", "BUĎ V TÝMU", "BLOG")
  - Velký nadpis článku
  - Popis/perex článku
  - CTA tlačítko (např. "PŘEHRÁT", "ZJISTIT VÍCE")
- **Pravá strana**:
  - Vertikální sloupec se 4 menšími články
  - Každý článek: miniatura + nadpis
  - Automatické přepínání mezi články
  - Tlačítko "VÍCE NOVINEK" nebo "DALŠÍ NOVINKY" na konci
- **Spodní sekce**:
  - Překrývá se s hero sekcí (sticky/floating element)
  - Nadcházející zápas s detaily
  - Skóre a časy (Góly, H, Min, Sec)
  - Logo týmů a tlačítko "DETAIL"

#### 📝 České Popisky a Tlačítka (Doporučené)

**Kategorie článků:**
- NOVINKY / AKTUALITY
- BLOG
- ZÁPASY
- TÝM
- ROZHOVORY
- UNLIMITED (brand název)
- BUĎ V TÝMU (brand název)

**Tlačítka a odkazy:**
- PŘEHRÁT / PLAY
- ZJISTIT VÍCE
- ČÍST VÍCE
- VÍCE NOVINEK
- DALŠÍ NOVINKY
- VŠECHNY NOVINKY
- DETAIL
- ZOBRAZIT VŠE

**Zápasy:**
- NADCHÁZEJÍCÍ ZÁPASY
- POSLEDNÍ ZÁPASY
- VÝSLEDKY
- Góly / G
- Hodiny / H
- Minuty / MIN
- Sekundy / SEC

#### 🎨 Nové Kreativní Varianty

**Tým - Rozestavení:**
- Zobrazení hráčů v fotbalovém rozestavení (4-4-2, 4-3-3, 3-5-2)
- Interaktivní klikací hřiště
- Ideální pro prezentaci základní sestavy

**Tým - Hloubka Kádru:**
- Zobrazení pozic s hlavními hráči a náhradníky
- Organize by: Brankář, Obránci, Záložníci, Útočníci
- Skvělé pro přehled celého kádru

**Zápasy - Tabule:**
- TV broadcast style - velká digitální tabule skóre
- Live aktualizace během zápasu
- Dynamické zobrazení času a skóre

**Zápasy - Ticker:**
- Scrollující ticker s aktuálními výsledky
- Kompaktní zobrazení více zápasů najednou
- Ideální pro live updates

**Partneři - Vrstvený:**
- Hierarchické zobrazení partnerů podle úrovně
- HLAVNÍ PARTNER (největší)
- ZLATÍ / STŘÍBRNÍ / BRONZOVÍ (postupně menší)

**Partneři - Spotlight:**
- Jeden velký hlavní partner v centru
- Menší partneři okolo v kruhu/orbitu
- Vizuálně zajímavé zvýraznění hlavního sponzora

**Galerie - Zvýrazněná + Mřížka:**
- Split layout: velká fotka vlevo + malé fotky vpravo
- Ideální pro zvýraznění hlavní fotky akce

**Galerie - Stories:**
- Instagram-style kruhové thumbnaily
- Full-screen swipe view při kliknutí
- Moderní, mobilní-friendly

**Videa - Sestřih:**
- TV broadcast style layout
- Hlavní video player s kategoriemi níže
- Kategorie: GÓLY / ZÁKROKY / HIGHLIGHTS

**Videa - Kanál:**
- YouTube channel style
- Playlists v navigation
- Organize by: Zápasy / Tréninky / Rozhovory / Zákulisí

**Statistiky - Žebříček:**
- Top hráči v různých kategoriích
- Nejlepší střelci / Asistence / Čisté konto
- Leaderboard design s medailemi

**Statistiky - Porovnání:**
- Side-by-side comparison
- Porovnat 2 hráče nebo 2 týmy
- Vizuální grafické porovnání statistik

**Akce - Zvýrazněná Akce:**
- Velká hero karta hlavní akce
- Menší karty nadcházejících akcí pod ní
- Perfect for promoting big events

**Akce - Odpočet + Mřížka:**
- Velký odpočet do nejbližší akce nahoře
- Mřížka dalších akcí pod odpočtem
- Creates excitement and urgency

**Sociální Sítě - Sociální Zeď:**
- Agregovaný feed ze všech sociálních platforem
- Twitter + Instagram + Facebook posts
- Real-time updates s hashtags

**Sociální Sítě - Highlights:**
- Kurátor "nejlepších příspěvků týdne"
- Most liked / most shared / trending
- Showcase nejlepšího social content

**Newsletter - Banner:**
- Sticky top banner po celé šířce
- Minimalistický formulář: Email + Subscribe
- Neinvazivní, vždy viditelný

**Newsletter - Hero CTA:**
- Velký call-to-action section
- Seznam benefitů: ✓ Exkluzivní obsah ✓ Slevy ✓ Early access
- Vizuálně atraktivní s ikonami

---

### 3. **Pokročilé Vyhledávání a Filtrování**

#### **Vyhledávací Pole**
- Hledání v názvech a popisech elementů
- Okamžité zobrazení výsledků
- Podpora českých znaků

#### **Kategorie Filtry**
- 📦 **Všechny** - Zobrazit všechny dostupné elementy
- 📋 **Rozvržení** - Strukturální elementy
- 📝 **Obsah** - Obsahové elementy
- 🎬 **Média** - Multimediální elementy
- ⚡ **Interaktivní** - Interaktivní prvky

#### **Inteligentní Filtrování**
- Kombinace vyhledávání + kategorie
- Automatické skrytí přidaných elementů
- Zobrazení "Žádné výsledky" při prázdném výsledku

---

### 4. **Modernizované Uživatelské Rozhraní**

#### **České Rozhraní**
Kompletní překlad všech UI prvků do češtiny:
- Tlačítka a ovládací prvky
- Nápovědy a tooltips
- Systémové zprávy
- Chybové hlášky

#### **Minimalistický Design**
- Čistší rozvržení s více bílým prostorem
- Jemnější barvy a přechody
- Lepší čitelnost textu
- Konzistentní ikonografie

#### **Vylepšená Navigace**
- Plovoucí panel nástrojů (dolní levý roh)
- Kontextové menu u vybraných elementů
- Rychlé klávesové zkratky
- Intuitivní drag & drop

---

## 🎯 Nové Funkce

### **Kontextové Menu Elementů**
Při kliknutí na element se zobrazí smart panel s:
- České názvy elementů
- Pozice v seznamu (např. "Pozice 3 z 8")
- Tlačítka pro přesun nahoru/dolů
- Tlačítko pro odstranění
- Mřížka dostupných stylů s náhledy

### **Panel Vrstev**
Přehledný seznam všech elementů s:
- Vizuální indikací viditelnosti
- Drag & drop přeuspořádání
- Ikony pro rychlou identifikaci
- Pozice v seznamu

### **Element Picker**
Moderní dialog pro přidávání elementů:
- Vyhledávací pole nahoře
- Kategorie filtry (chipsy)
- Mřížkové rozložení elementů
- Velké ikony pro snadnou identifikaci
- České popisy každého elementu

### **Indikátor Změn**
- Zobrazení počtu neuložených změn
- Barevné rozlišení stavu
- Pulsující tlačítko "Uložit"
- Automatický reload po uložení

---

## 🔧 Technické Detaily

### **Soubory Změněny**
1. `frontend/src/services/pageElements.ts`
   - Rozšíření `PREDEFINED_ELEMENTS` (15 → 31 elementů)
   - Rozšíření `ELEMENT_VARIANTS` (50 → 100+ variant)
   - České překlady všech labelů a popisů

2. `frontend/src/components/editor/MyUIbrixEditor.tsx`
   - Přidání search state management
   - Implementace kategorie filtrů
   - České překlady UI
   - Vylepšené filtrování a zobrazení
   - Lepší UX pro prázdné stavy

### **Nové State Proměnné**
```typescript
const [searchQuery, setSearchQuery] = useState('');
const [selectedCategory, setSelectedCategory] = useState<string>('all');
```

### **Filtrační Logika**
```typescript
// Kombinace kategorie + vyhledávání
const availableElements = elements.filter(e => {
  if (visibleElements.has(e.name)) return false;
  if (searchQuery) {
    const query = searchQuery.toLowerCase();
    return e.label.toLowerCase().includes(query) || 
           e.description.toLowerCase().includes(query);
  }
  return true;
});
```

---

## 📱 Použití

### **Základní Workflow**

1. **Aktivace Editoru**
   - Klikněte na plovoucí tlačítko s ikonou editace (levý dolní roh)
   - Nebo přidejte `?myuibrix=edit` do URL

2. **Přidání Elementu**
   - Klikněte na tlačítko "+" (Přidat element)
   - Použijte vyhledávání nebo kategorie filtry
   - Klikněte na požadovaný element

3. **Úprava Stylu**
   - Klikněte na libovolný element na stránce
   - Vyberte požadovanou variantu stylu
   - Změny se zobrazí okamžitě (preview režim)

4. **Přeuspořádání**
   - Použijte tlačítka nahoru/dolů v kontextovém menu
   - Nebo otevřete panel vrstev (tlačítko "L")
   - Drag & drop v panelu vrstev

5. **Uložení**
   - Klikněte na zelené pulsující tlačítko "Uložit"
   - Nebo použijte Ctrl+S
   - Stránka se automaticky reloadne

### **Klávesové Zkratky**
- `ESC` - Zavřít panely / Deselect element
- `A` - Otevřít Element Picker
- `L` - Toggle panel vrstev
- `Ctrl+S` - Uložit změny
- `↑` / `↓` - Přesunout vybraný element

---

## 🎨 Kategorie Elementů - Kdy Co Použít

### **Rozvržení (Layout)**
Pro základní strukturu stránky:
- Začněte s Hlavičkou
- Přidejte Hero sekci pro úvod
- Případně Patičku a Boční Panel

### **Obsah (Content)**
Pro prezentaci informací:
- Novinky pro články
- Zápasy pro sportovní výsledky
- Tým pro představení hráčů
- Statistiky pro číselné údaje

### **Média (Media)**
Pro multimediální obsah:
- Galerie pro fotky
- Videa pro YouTube obsah
- Live Stream pro živé přenosy
- Podcast pro audio obsah

### **Interaktivní (Interactive)**
Pro zapojení návštěvníků:
- Newsletter pro odběry
- Kontakt pro dotazy
- Anketa pro hlasování
- Kalendář pro události

---

## 💡 Tipy a Best Practices

### **Optimální Počet Elementů**
- Domovská stránka: 6-10 elementů
- Podstránky: 4-8 elementů
- Více není vždy lepší - zaměřte se na kvalitu

### **Kombinace Stylů**
- Střídejte světlé a tmavé varianty
- Používejte konzistentní styly napříč stránkou
- Mřížka vs. Seznam - podle typu obsahu

### **Performance**
- Více variant = více CSS
- Testujte rychlost načítání
- Minimalizujte počet Live Stream a Video elementů

### **Mobilní Zobrazení**
- Vždy testujte na mobilních zařízeních
- Některé varianty jsou responzivní, jiné ne
- Kompaktní varianty jsou vhodnější pro mobily

---

## 🐛 Řešení Problémů

### **Element se nezobrazuje**
- Zkontrolujte, zda je element viditelný (ikona oka v panelu vrstev)
- Zkuste změnit variantu
- Reloadněte stránku

### **Změny se neukládají**
- Zkontrolujte internetové připojení
- Ujistěte se, že jste admin
- Zkuste uložit znovu

### **Vyhledávání nefunguje**
- Pište česky (včetně háčků a čárek)
- Zkuste kratší dotaz
- Zkontrolujte kategorie filtr

### **Overlay překrývá obsah**
- Stiskněte ESC pro zavření panelů
- Klikněte mimo vybraný element
- Vypněte režim editace

---

## 🔄 Další Vylepšení (Plánováno)

1. **Pokročilé Styly**
   - Vlastní barevné palety
   - Font customizace
   - Animace a přechody

2. **Templates**
   - Předpřipravené kombinace elementů
   - Import/Export konfigurací
   - Sdílení mezi stránkami

3. **Analytics**
   - Sledování oblíbenosti variant
   - Heatmap interakcí
   - A/B testování

4. **Collaboration**
   - Multi-user editing
   - Change history
   - Komentáře a review

---

## 📚 Reference

- **Design System:** Chakra UI v2
- **Ikony:** Feather Icons (react-icons/fi)
- **Jazyk:** TypeScript
- **State Management:** React Hooks

---

## 🎉 Závěr

MyUIbrix Editor verze 2.0 představuje významný krok vpřed v uživatelské zkušenosti a funkčnosti. S více než dvojnásobným počtem elementů, pokročilým vyhledáváním a kompletním českým rozhraním je editor nyní výrazně přívětivější a výkonnější.

**Hlavní benefity:**
- ✅ 2x více elementů (31 vs. 15)
- ✅ 3x více variant stylů (120+ vs. 50)
- ✅ Kompletní české rozhraní
- ✅ Pokročilé vyhledávání a filtrování
- ✅ Modernější minimalistický design
- ✅ Lepší UX a intuitivnější ovládání
- ✅ Kreativní custom varianty (Rozestavení, Stories, Ticker, Žebříček...)
- ✅ Sports-specific layouts (Tabule, Sestřih, Sociální Zeď...)

**Statistika variant:**
- 20+ nových kreativních variant přidáno
- 12 elementů s custom sports-specific styly
- 100% české UI s doporučenými popisky

**Začněte tvořit moderní a funkční webové stránky snadno a rychle!** 🚀