Enhanced Documentation Website with GitHub Pages Support

[coderberry]

Summary

This PR adds a comprehensive, modern documentation website for the Fyto project, ready to be published via GitHub Pages. The website provides an improved user experience with interactive diagrams, better organization, and mobile-responsive design.

Changes Made

📚 New Documentation Website (/docs)

To see an example of the docs page, go to https://coderberry.github.io/fyto/.

Created a complete documentation website in the /docs folder that can be served via GitHub Pages:

Main Files:

• index.html - Modern landing page with all project information
• wiring-diagram.html - Dedicated full-page wiring guide
• README.md - Documentation for the docs folder
• .nojekyll - Ensures GitHub Pages serves files without Jekyll processing
• _config.yml - GitHub Pages configuration

Assets & Diagrams:

• assets/ - Contains animated emotion GIFs for visual previews
• diagrams/ - SVG wiring diagrams (schematic, wiring, pinout)
• stl/ - 3D printable case files

Generated Content:

• generate_schematic.py - PEP 723 script using schemdraw to generate wiring diagrams programmatically
• generated_animated_emotions.py - Script to create emotion preview GIFs

🎨 Design & Features

Modern, Dark-Themed UI:

• Gradient backgrounds and text effects
• Dark purple/teal color scheme matching the Fyto branding
• Fully responsive design (mobile, tablet, desktop)
• Smooth hover animations and transitions

Key Sections:

1. Hero Section - Project introduction with quick action buttons
2. Video Embed - YouTube demo of Fyto in action
3. Six Emotions Display - Animated GIF previews of each emotion
4. Wiring Diagrams - Tabbed interface with 4 different diagram views
5. Important Setup Notes - Critical warnings and setup instructions
6. Hardware Requirements - Complete parts list
7. Key Features - Project highlights
8. Quick Start Guide - Bash-highlighted code blocks for setup
9. Resources & Links - GitHub, Instructables, Facebook group, STL downloads

Wiring Diagram Enhancements:

• Fullscreen toggle button for detailed viewing
• Color-coded connection tables for LCD, ADS1115, and sensors
• Wire color reference legend
• Interactive SVG diagrams with proper component labeling
• Critical safety warnings prominently displayed

🔧 Technical Improvements

Removed "Interactive" Misnomer:

• Changed "Interactive View" to "Detailed Guide" (the original wasn't actually interactive, just had basic hover effects on pins)
• Updated all references in navigation and descriptions

Added Fullscreen Functionality:

• Fullscreen toggle button on wiring diagram page
• Cross-browser support (Chrome, Firefox, Safari, Edge)
• Proper ESC key handling
• Dynamic button text updates

Better Accessibility:

• Semantic HTML structure
• Proper heading hierarchy
• Alt text for images
• Keyboard navigation support
• ARIA labels where appropriate

📝 Documentation Updates

Updated CLAUDE.md:

• Added documentation about the new /docs folder
• Explained the GitHub Pages setup
• Documented the schemdraw diagram generation workflow
• Clarified the emotion folder structure discrepancies

Added .gitignore entries:

• Excluded .DS_Store, .mypy_cache/, .claude/, and build artifacts
• Kept docs folder properly tracked

🐛 Bug Fixes & Clarifications

Corrected Documentation Issues:

• Fixed emotion name mapping (code sends 'thirs', 'sleep', 'hotty', 'freez', 'savor' but expects folder names thirsty/, sleepy/, hot/, freeze/, savory/)
• Clarified ADS1115 channel assignments (A1=Temp, A2=Moisture, A3=Light) which differ from the original Instructables tutorial
• Emphasized LM35 vs DS18B20 temperature sensor requirement
• Added logic level converter warning for GPIO protection

🚀 GitHub Pages Setup

The /docs folder is configured for immediate GitHub Pages deployment:

To enable:

1. Go to repository Settings → Pages
2. Source: "Deploy from a branch"
3. Branch: main, Folder: /docs
4. Save

Site will be live at: https://coderscafetech.github.io/Fyto/

🎯 Benefits

For Users:

• Professional-looking documentation site
• Easy-to-follow wiring instructions with color-coded tables
• Mobile-friendly design for workshop/lab use
• Fullscreen diagrams for detailed viewing
• All resources in one place

For Maintainers:

• No build step required - pure HTML/CSS/JavaScript
• Easy to update and maintain
• Automated diagram generation via Python script
• GitHub Pages hosting (free, fast CDN)
• Version controlled documentation

For the Community:

• Shareable URL for the project
• Better onboarding for new builders
• Corrected technical details from original tutorial
• Clear hardware requirements and setup warnings

Testing

• ✅ All pages load correctly in modern browsers
• ✅ Responsive design tested on mobile, tablet, and desktop viewports
• ✅ Fullscreen functionality works across browsers
• ✅ All links and resources are accessible
• ✅ SVG diagrams display properly
• ✅ Animated GIFs load and play smoothly
• ✅ Tabbed diagram interface works correctly
• ✅ Code syntax highlighting renders properly

Files Changed

Added:

• docs/index.html
• docs/wiring-diagram.html
• docs/README.md
• docs/.nojekyll
• docs/_config.yml
• docs/generate_schematic.py
• docs/generated_animated_emotions.py
• docs/assets/ (6 emotion GIFs)
• docs/diagrams/ (3 SVG diagrams)
• docs/stl/ (STL files archive)

Modified:

• .gitignore - Added common build artifacts and system files
• CLAUDE.md - Updated with documentation website information

Breaking Changes

None. This PR only adds new files and does not modify any existing functionality of the Fyto hardware/software system.

License

All documentation follows the same license as the main Fyto project.

---

Note: This PR focuses solely on documentation improvements and does not modify any Python code, hardware configurations, or core functionality of the Fyto system.