# New Design Integration This branch integrates the modern design from DraftHPRSplash (hobbypublicradio.org) into the hpr_generator system. ## What's Been Done ### 1. Design Assets Added - **CSS**: New responsive design stylesheet at `public_html/css/new-design.css` - **Images**: New banner logo at `public_html/images/logo.png` - **Icons**: Complete icon set from Remix Icons in `public_html/icons/` ### 2. New Templates Created - **Main Template**: `templates/page-newdesign.tpl.html` - Main page layout with new design - **Index Content**: `templates/content-index-newdesign.tpl.html` - Homepage with card-based layout - **Navigation**: `templates/navigation-newdesign.tpl.html` - Simplified navigation ### 3. Configuration - **New Config**: `site-newdesign.cfg` - Configuration file to use new design templates ## Key Design Changes ### Navigation - **Before**: Complex multi-level navigation with detailed menu structure - **After**: Simple 4-item top navigation (Home, Upload, Download, About) ### Layout - **Before**: Traditional header with logo + complex navigation + main content + detailed footer - **After**: Clean banner image + simplified navigation + card-based sections + minimal footer ### Homepage Content - **Before**: Text-heavy with detailed episode listings - **After**: Card-based sections for podcast functions (Record, Schedule, Subscribe, Listen) + streamlined episode/comment lists ## How to Use ### Option 1: Test New Design ```bash # Install dependencies first (see GETTING_STARTED.md) ./site-generator --configuration=site-newdesign.cfg index ``` ### Option 2: Generate Full Site with New Design ```bash ./site-generator --configuration=site-newdesign.cfg --all ``` ### Option 3: Compare Designs ```bash # Generate with old design ./site-generator index # Generate with new design ./site-generator --configuration=site-newdesign.cfg index # Compare the generated index.html files ``` ## Compatibility - **Database**: Uses same database and queries as original - **Functionality**: All existing features preserved - **RSS/XML**: Uses same RSS templates (no changes needed) - **URLs**: All URL structures remain the same - **Templates**: Original templates unchanged, new design uses separate template files ## Next Steps 1. **Testing**: Generate and test all page types with new design 2. **Content Templates**: Create new design versions for other content templates as needed 3. **Refinement**: Adjust styling and layout based on testing 4. **Documentation**: Update any template documentation ## Files Added/Modified ### New Files - `public_html/css/new-design.css` - `public_html/images/logo.png` - `public_html/icons/` (directory with SVG icons) - `templates/page-newdesign.tpl.html` - `templates/content-index-newdesign.tpl.html` - `templates/navigation-newdesign.tpl.html` - `site-newdesign.cfg` - `NEW_DESIGN_INTEGRATION.md` (this file) ### No Existing Files Modified This integration preserves all existing functionality while adding the new design as an option. ## Design Principles Maintained 1. **Responsive**: Mobile-first responsive design 2. **Accessible**: Maintains accessibility features 3. **Performance**: Optimized CSS and minimal JavaScript 4. **Standards**: Valid HTML5 and modern CSS 5. **Compatibility**: Works with existing generator system The integration allows switching between designs via configuration, enabling easy testing and gradual migration.