# Custom Pages - Quick Reference Guide

## 🎯 Accessing the System

### Admin Panel

**URL**: <http://localhost:5000/admin/pages.html>
**Login Required**: Yes (use admin credentials)

### Frontend Pages

- **About**: <http://localhost:5000/about.html>
- **Contact**: <http://localhost:5000/contact.html>
- **Privacy**: <http://localhost:5000/privacy.html>
- **Dynamic**: <http://localhost:5000/page.html?slug=YOUR-SLUG>

## ✏️ How to Edit Pages

### Step 1: Access Admin Panel

1. Navigate to `/admin/pages.html`
2. Login if prompted
3. You'll see a list of all custom pages

### Step 2: Edit a Page

1. Find the page you want to edit (About, Contact, or Privacy)
2. Click the **pencil icon** (Edit button)
3. Modal opens with page details loaded

### Step 3: Make Changes

Use the rich text editor to format content:

- **Headings**: H1-H6 dropdown
- **Bold/Italic**: Click B or I buttons
- **Lists**: Bullet or numbered
- **Colors**: Text and background
- **Links**: Insert hyperlinks
- **Images**: Add images (optional)

### Step 4: Save Changes

1. Review your changes
2. Toggle "Published" if needed
3. Click **"Save Page"**
4. Changes are immediately saved

### Step 5: View Changes

1. Open the frontend page (e.g., `/about.html`)
2. Refresh browser to see updates
3. Content loads from database

## 📋 Current Pages

### About Us (page-about)

- **Slug**: `about`
- **Frontend**: `/about.html`
- **Sections**: Our Story, What We Offer, Why Choose Us

### Contact (page-contact)

- **Slug**: `contact`
- **Frontend**: `/contact.html`
- **Sections**: Contact Info, Business Hours
- **Note**: Preserves contact form below content

### Privacy Policy (page-privacy)

- **Slug**: `privacy`
- **Frontend**: `/privacy.html`
- **Sections**: Full privacy policy with 6 main sections

## 🛠️ Common Tasks

### Update About Page Content

1. Admin Panel → Click edit on "About Us"
2. Modify text in editor
3. Save → Refresh `/about.html`

### Change Contact Information

1. Admin Panel → Click edit on "Contact"
2. Update phone, email, or address
3. Save → Refresh `/contact.html`

### Update Privacy Policy

1. Admin Panel → Click edit on "Privacy Policy"
2. Add/modify policy sections
3. Save → Refresh `/privacy.html`

### Create New Page

1. Admin Panel → Click "Create New Page"
2. Enter title (e.g., "Shipping Policy")
3. Slug auto-generates (e.g., "shipping-policy")
4. Add content with editor
5. Save → Access at `/page.html?slug=shipping-policy`

## 🎨 Formatting Tips

### Headers for Structure

```
H2 for main sections (Our Story, Contact Information)
H3 for subsections (Phone, Email, Location)
```

### Lists for Items

- Use bullet lists for features or contact methods
- Use numbered lists for steps or procedures

### Links for Actions

- Make phone numbers clickable: `tel:+1234567890`
- Make emails clickable: `mailto:email@example.com`

### Bold for Emphasis

- Use **bold** for important information
- Highlight key contact details

## ⚠️ Important Notes

1. **Always Save**: Changes aren't applied until you click "Save Page"

2. **Published Status**: Uncheck "Published" to hide page from frontend

3. **Slug is URL**: The slug becomes the page URL
   - Example: slug `about` → `/about.html` or `/page.html?slug=about`

4. **Test After Editing**: Always check the frontend page after saving

5. **SEO Fields**: Fill in Meta Title and Meta Description for better SEO

## 🔍 Troubleshooting

### Edit Button Not Working

- ✅ **Fixed**: ID escaping issue resolved
- Ensure you're logged in as admin
- Check browser console for errors

### Content Not Updating

1. Hard refresh browser (Ctrl+Shift+R or Cmd+Shift+R)
2. Clear browser cache
3. Check if page is marked as "Published"

### Page Not Loading

- Verify slug matches exactly (case-sensitive)
- Check if page is active in database
- Ensure API routes are working: `/api/pages/{slug}`

## 📊 Database Fields

Each page has:

- **id**: Unique identifier (e.g., "page-about")
- **title**: Display title ("About Us")
- **slug**: URL path ("about")
- **content**: Delta format for editor (JSON)
- **pagecontent**: HTML for frontend display
- **metatitle**: SEO title
- **metadescription**: SEO description
- **ispublished**: Visible on frontend (true/false)
- **isactive**: Active status (true/false)

## 🚀 Quick Links

- **Admin Pages**: /admin/pages.html
- **Test Interface**: /test-custom-pages.html
- **About**: /about.html
- **Contact**: /contact.html
- **Privacy**: /privacy.html

## 💾 Backup Reminder

Before making major changes:

1. Test in development first
2. Keep backup of important content
3. Use draft mode (unpublish) to test changes
4. Can always edit again if needed

---

**Need Help?** Check the detailed documentation at `/docs/CUSTOM_PAGES_INTEGRATION_COMPLETE.md`