upload

DOCS/MYUIBRIX_QUICK_START.md

@@ -0,0 +1,207 @@
+# 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