# MyUIbrix Quick Start Guide

## 🚀 Quick Access

### For Admins:
```
Method 1: URL Parameter
→ Navigate to: http://your-site.com/?myuibrix=edit

Method 2: Admin Sidebar
→ Click "MyUIbrix Editor" in admin navigation
```

---

## ⌨️ Keyboard Shortcuts

| Key | Action |
|-----|--------|
| `ESC` | Close panels / Exit edit mode |
| `Ctrl+S` | Save changes |
| `L` | Toggle Layers panel |
| `A` | Open Add Element picker |
| `↑` | Move selected element up |
| `↓` | Move selected element down |
| `Delete` | Remove selected element |

---

## 🎨 Basic Workflow

### 1. Enter Edit Mode
- Click floating edit button (bottom-left)
- Or use URL: `/?myuibrix=edit`

### 2. Select Element
- Hover over sections to see badges
- Click to select

### 3. Change Variant
- Choose from available styles in popup
- See live preview instantly

### 4. Reorder Elements
- Open Layers panel (L key)
- Use arrow buttons or drag

### 5. Toggle Visibility
- In Layers panel
- Click eye icon to hide/show

### 6. Save Changes
- Click "Publikovat" button
- Page will reload with new design

---

## 📦 Available Elements

### Layout (5)
- **Header** - 7 variants
- **Hero** - 8 variants
- **Footer** - Standard, Minimal, Extended
- **Sidebar** - Left, Right, Sticky
- **Banner** - Top, Bottom, Sidebar, Overlay

### Content (11)
- **News** - 8 variants (Grid, Scroller, Magazine, etc.)
- **Matches** - 7 variants (Compact, Timeline, Scoreboard, etc.)
- **Team** - 8 variants (Grid, Formation, Auto-scroll, etc.)
- **Table** - League standings
- **Stats** - Cards, Charts, Dashboard
- **Activities** - List, Calendar, Timeline
- **Sponsors** - 8 variants (Grid, Pyramid, Spotlight, etc.)
- **Merch** - Product grid/carousel
- **Testimonials** - Reviews carousel
- **Achievements** - Trophy showcase
- **History** - Club timeline

### Media (5)
- **Gallery** - 7 variants (Grid, Masonry, Stories, etc.)
- **Videos** - 6 variants (Grid, Playlist, Highlights, etc.)
- **Live** - Stream player
- **Podcast** - Episode list/player
- **Social** - Social media feeds

### Interactive (9)
- **Newsletter** - Subscription forms
- **Contact** - Contact form
- **Countdown** - Match countdown
- **Poll** - Fan voting
- **Quiz** - Interactive quizzes
- **Search** - Search box
- **Map** - Stadium location
- **Calendar** - Events calendar
- **Weather** - Match day weather
- **Ticketing** - Ticket sales widget

---

## 🎯 Common Tasks

### Change Homepage Layout
1. Enter edit mode
2. Click hero section
3. Select variant: Grid / Carousel / Split
4. Save

### Hide/Show Sections
1. Press `L` for Layers
2. Click eye icon next to element
3. Save changes

### Reorder Sections
1. Press `L` for Layers
2. Use ↑↓ buttons
3. Save changes

### Add New Element
1. Press `A` for Add Element
2. Browse by category
3. Click to add
4. Configure and save

### Preview Mobile View
1. Use viewport switcher (top bar)
2. Select: Desktop / Tablet / Mobile
3. Test responsive behavior

---

## ⚠️ Important Notes

### Preview Mode
- ✅ Changes visible only to you during editing
- ❌ Not visible to regular visitors
- 💾 Must click "Publikovat" to make live

### Saving
- Changes auto-reload page after save
- All visitors will see new design
- Previous design lost (no undo yet)

### Performance
- No impact on page load for visitors
- Editor loads only for admins
- Live preview uses client-side events only

---

## 🐛 Troubleshooting

### Can't select elements?
→ Element might be missing `data-element` attribute  
→ Contact developer to add it

### Changes not saving?
→ Check browser console for errors  
→ Verify admin permissions  
→ Check network tab for API errors

### Preview not updating?
→ Refresh page and try again  
→ Check if edit mode is active  
→ Try different browser

### Element disappeared?
→ Check visibility in Layers panel  
→ Element might be at bottom of page  
→ Scroll to find it

---

## 📚 Learn More

- **Full Audit:** `DOCS/MYUIBRIX_INTEGRITY_CHECK.md`
- **Fixes Applied:** `DOCS/MYUIBRIX_FIXES_APPLIED.md`
- **Code:** `frontend/src/components/editor/MyUIbrixEditor.tsx`

---

## 🎓 Pro Tips

1. **Use keyboard shortcuts** - Much faster than clicking
2. **Preview on mobile** - Always check responsive design
3. **Save often** - No undo functionality yet
4. **Test variants** - Try different styles to see what works
5. **Check performance** - Some variants are more complex
6. **Use layers panel** - Easier than clicking elements
7. **Category filter** - In Add Element picker for quick search
8. **Hover for details** - Variant descriptions explain differences

---

## 🆘 Need Help?

1. Check this guide
2. Review documentation in `/DOCS/`
3. Contact system administrator
4. Check browser console for errors
5. Review server logs if issues persist

---

**Version:** 1.0  
**Last Updated:** 2025-01-15  
**Status:** ✅ Production Ready