image generation added

GENERATE_IMAGES_INSTRUCTIONS.md

@@ -0,0 +1,202 @@
+# Generate Required Images for SEO
+
+## Quick Start
+
+Run the image generation script:
+
+```bash
+# Navigate to project root
+cd C:\dev\mazer
+
+# Run the image generator
+python generate_images.py
+```
+
+This will create all required images in `web/static/images/`:
+
+## Generated Images
+
+### Favicons
+- ✅ `favicon-16x16.png` - Browser tab icon (16×16)
+- ✅ `favicon-32x32.png` - Browser tab icon (32×32)
+
+### Social Media
+- ✅ `twitter-image.png` - Twitter card preview (1200×675)
+- ✅ `og-image.png` - Facebook/LinkedIn preview (1200×630)
+
+### Mobile & PWA
+- ✅ `apple-touch-icon.png` - iOS home screen icon (180×180)
+- ✅ `icon-192x192.png` - PWA icon (192×192)
+- ✅ `icon-512x512.png` - PWA icon (512×512)
+
+### Other
+- ✅ `screenshot.png` - General screenshot (1280×720)
+
+## Design Features
+
+All images follow the **Neo-Brutalism** design aesthetic:
+
+### Color Palette
+- **Yellow**: #FFE500 (Neon yellow - primary brand color)
+- **Black**: #000000 (Borders and text)
+- **Pink**: #FF10F0 (Neon pink - accent)
+- **Cyan**: #00F0FF (Neon cyan - accent)
+- **Green**: #39FF14 (Neon green - accent)
+- **White**: #FFFFFF (Background)
+
+### Design Elements
+- ✅ Thick black borders (6-10px)
+- ✅ Hard drop shadows (no blur)
+- ✅ Flat colors (no gradients)
+- ✅ Bold typography
+- ✅ High contrast
+
+## Manual Creation (Optional)
+
+If you prefer to create custom images manually:
+
+### Twitter Image (1200×675)
+1. Use Canva, Figma, or Photoshop
+2. Set canvas to 1200×675 pixels
+3. Add yellow background (#FFE500)
+4. Add title "MAZE GENERATOR" in bold black text
+5. Add 3 boxes with features: "8 ALGORITHMS", "ANIMATED SOLVING", "NEO-BRUTALISM"
+6. Use colors: pink, cyan, green for the boxes
+7. Add thick black borders (6-8px)
+8. Export as PNG
+
+### OG Image (1200×630)
+1. Set canvas to 1200×630 pixels
+2. Yellow background with black border
+3. Title: "MAZE GENERATOR"
+4. Subtitle: "8 ALGORITHMS • ANIMATED SOLVING"
+5. Optional: Add simple maze pattern
+6. Export as PNG
+
+### Favicons
+1. Create 32×32 and 16×16 versions
+2. Yellow background
+3. Simple "M" letter or maze pattern
+4. Black border
+5. Export as PNG
+
+### Apple Touch Icon (180×180)
+1. Create 180×180 canvas
+2. Yellow background
+3. Large "M" letter in center
+4. Thick black border
+5. Export as PNG
+
+## Image Optimization
+
+After generating, optimize for web:
+
+```bash
+# Using ImageOptim (Mac)
+imageoptim web/static/images/*.png
+
+# Using pngquant (cross-platform)
+pngquant --quality=80-95 web/static/images/*.png
+
+# Using TinyPNG web service
+# Upload to https://tinypng.com/
+```
+
+## Verification
+
+Check that all images exist:
+
+```bash
+ls -lh web/static/images/
+```
+
+Expected output:
+```
+favicon-16x16.png
+favicon-32x32.png
+apple-touch-icon.png
+icon-192x192.png
+icon-512x512.png
+twitter-image.png
+og-image.png
+screenshot.png
+```
+
+## Testing
+
+### Test Favicons
+1. Start server: `python api/app.py`
+2. Visit: `http://localhost:5000`
+3. Check browser tab for favicon
+
+### Test Social Media Previews
+1. Deploy to production
+2. Test Twitter Card: https://cards-dev.twitter.com/validator
+3. Test Open Graph: https://developers.facebook.com/tools/debug/
+4. Test LinkedIn: Share URL and check preview
+
+### Test PWA Icons
+1. Visit site on mobile
+2. Use "Add to Home Screen"
+3. Check icon appears correctly
+
+## Alternative: Use Online Tools
+
+If Python isn't available, use these online tools:
+
+### Favicon Generator
+- https://favicon.io/
+- https://realfavicongenerator.net/
+
+### Social Media Image Generator
+- https://www.canva.com/ (templates for Twitter/OG images)
+- https://www.figma.com/ (free design tool)
+
+### Icon Generator
+- https://www.pwabuilder.com/ (PWA icon generator)
+
+## Troubleshooting
+
+### Script Fails to Run
+**Problem**: `python: command not found`
+
+**Solution**:
+```bash
+# Windows
+py generate_images.py
+
+# Or install Python from python.org
+# Or use Windows Store Python
+```
+
+### Images Not Showing
+**Problem**: 404 error for images
+
+**Solution**:
+1. Check files exist in `web/static/images/`
+2. Check Flask is serving static files
+3. Clear browser cache (Ctrl+Shift+R)
+
+### Low Quality Images
+**Problem**: Images look pixelated
+
+**Solution**:
+1. Re-run script with PIL (Pillow) installed
+2. Or create manually at higher DPI
+3. Use vector graphics tools (Figma, Illustrator)
+
+## Next Steps After Generation
+
+1. ✅ Verify all 8 images are created
+2. ✅ Check file sizes (should be <100KB each)
+3. ✅ Test locally at `http://localhost:5000`
+4. ✅ Deploy to production
+5. ✅ Test with social media validators
+6. ✅ Submit to Google Search Console
+
+## Additional Resources
+
+- **Neo-Brutalism Design**: https://neobrutalism.dev/
+- **PWA Icons Guide**: https://web.dev/add-manifest/
+- **OG Image Best Practices**: https://ogp.me/
+- **Twitter Cards Guide**: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards