upload

DOCS/QUICK_START_VISUAL_EDITOR.md

@@ -0,0 +1,143 @@
+# Quick Start: Visual Element Editor
+
+## What It Does
+
+The Visual Element Editor lets you change the visual style of different page elements (header, hero section, news layout, etc.) without touching code.
+
+## How to Use (Admin)
+
+### 1. Access the Editor
+
+1. Login as admin
+2. Navigate to the homepage
+3. Look for the **purple floating button** in the bottom-right corner (gear icon)
+4. Click it to open the Visual Editor
+
+### 2. Configure Elements
+
+1. **Toggle Editing Mode ON**
+   - Switch the toggle at the top of the drawer to "Editing"
+   
+2. **Select Variants**
+   - **Header**: Choose between Unified, Edge, Minimal, or Modern
+   - **Hero**: Choose between Grid, Swiper, Swiper Full, or Edge
+   - **News**: Choose between Grid, Scroller, List, or Magazine
+   - **Matches**: Choose between Compact, Expanded, or Timeline
+   - **Sponsors**: Choose between Grid, Slider, Scroller, or Pyramid
+
+3. **Save Changes**
+   - Click "Save & Reload"
+   - The page will reload with your new configuration
+
+## Header Variants Explained
+
+### Unified (Default)
+Classic header with logo on left and text on right. Professional and clean.
+
+### Edge
+Modern gradient background, centered logo and text. Bold and eye-catching.
+
+### Minimal
+Simplified centered header. Just logo and club name, very clean.
+
+### Modern
+Bold header with accent border at bottom. Logo has colored background glow.
+
+## Quick Tips
+
+- **Try Before Saving**: Select different options and review the descriptions
+- **Unsaved Changes**: Yellow badge warns you if you haven't saved
+- **Cancel**: Reverts to last saved configuration
+- **Hide Button**: You can temporarily hide the floating button if needed
+
+## Technical Setup (Developer)
+
+### 1. Run Database Migration
+
+```bash
+# Make sure migrations are up to date
+make migrate-up
+```
+
+Or manually:
+```bash
+cd database/migrations
+# Apply: 000020_create_page_element_configs.up.sql
+```
+
+### 2. Restart Backend
+
+The routes are already configured. Just restart:
+```bash
+go run main.go
+```
+
+### 3. Frontend is Ready
+
+No build needed - components are already integrated in HomePage.
+
+## Example Configuration
+
+**Modern Sports Club:**
+- Header: Modern
+- Hero: Swiper Full
+- News: Grid
+- Matches: Expanded
+- Sponsors: Slider
+
+**Classic Club:**
+- Header: Unified
+- Hero: Grid
+- News: List
+- Matches: Compact
+- Sponsors: Grid
+
+**Bold Contemporary:**
+- Header: Edge
+- Hero: Edge
+- News: Magazine
+- Matches: Timeline
+- Sponsors: Pyramid
+
+## Troubleshooting
+
+**Q: I don't see the purple button**
+- Make sure you're logged in as admin
+- Check the bottom-right corner (may be below fold)
+
+**Q: Changes don't save**
+- Check browser console for errors
+- Ensure backend is running
+- Verify database migration was applied
+
+**Q: Page doesn't reload after save**
+- The save triggers a `window.location.reload()`
+- Check for JavaScript errors in console
+
+**Q: I want to reset to defaults**
+- Delete configurations from admin panel or database
+- System falls back to default variants (usually 'unified')
+
+## API Reference
+
+For programmatic access:
+
+```bash
+# Get current config
+GET /api/v1/page-elements?page_type=homepage
+
+# Update config (admin only)
+POST /api/v1/admin/page-elements
+{
+  "page_type": "homepage",
+  "element_name": "header",
+  "variant": "modern"
+}
+```
+
+## Support
+
+For issues or feature requests, check:
+- `VISUAL_ELEMENT_EDITOR.md` - Full documentation
+- Console logs for debugging
+- Database table `page_element_configs` for stored values