create-template-html-css 1.6.4 → 1.8.0

package/CHANGELOG.md

@@ -5,6 +5,158 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.8.0] - 2026-02-02
+
+### Added
+- **Dark Mode Support**: Automatic dark mode detection and styling
+  - `--dark-mode` CLI flag enables dark theme support
+  - Uses `prefers-color-scheme: dark` media query
+  - Automatic color inversion for readability
+  - Fallback CSS variables for light theme
+  - Works with all 26 templates
+
+- **Color Customizer**: Create components with custom colors
+  - `--primary-color <hex>` flag for primary gradient color
+  - `--secondary-color <hex>` flag for secondary color  
+  - Automatic CSS variables generation
+  - RGB value calculation for rgba() support
+  - Color validation with helpful error messages
+
+- **Color Scheme Presets**: 10 beautiful pre-made color schemes
+  - Vibrant, Pastel, Ocean, Sunset, Forest, Purple, Minimal, Coral, Teal, Neon
+  - `--color-scheme <scheme>` flag for instant color selection
+  - Interactive CLI prompts for scheme selection
+  - Each scheme with complementary primary and secondary colors
+  - Perfect for creating branded components quickly
+
+- **Interactive Component Gallery** (COMPONENTS-GALLERY.html):
+  - Browse all 26 components with descriptions
+  - Search functionality for quick discovery
+  - Filter by component category
+  - Copy CLI commands with one-click button
+  - Live color scheme preview section with hex values
+  - Interactive color scheme cards with copy commands
+  - Dark mode support built-in
+  - Responsive mobile design
+  - Print-friendly layout
+  - Live component statistics
+
+- **Enhanced CLI Features**:
+  - Dark mode and color options in interactive mode
+  - Color validation (hex format)
+  - Updated help text with new examples
+  - Better example commands showing customization
+
+- **Login Form Template**: Professional authentication form with complete validation
+  - Email and password validation
+  - "Remember me" checkbox functionality
+  - "Forgot password" link handler
+  - Social login buttons (Google, GitHub placeholders)
+  - Real-time form validation with error messages
+  - Focus states and smooth animations
+  - Mobile-responsive design
+  - Integration with navigation modal
+
+- **Register Form Template**: Advanced user registration form
+  - Real-time password strength validator
+  - Password requirements display (8+ chars, uppercase, number, special char)
+  - Username validation (3-20 characters, alphanumeric + underscore)
+  - Password matching validator with visual feedback
+  - Full name, email, and username fields
+  - Terms of Service and newsletter subscription checkboxes
+  - Dynamic submit button (enabled only when all requirements met)
+  - Social registration options (Google, GitHub)
+  - Professional gradient styling
+  - Mobile-optimized layout
+
+- **Login Modal Integration**: Navigation component now includes built-in login modal
+  - Login button in navigation bar
+  - Modal window with complete login form
+  - Multiple close options (X button, ESC key, overlay click)
+  - Smooth animations and transitions
+  - Prevents body scroll when modal is open
+  - Fully responsive on mobile devices
+
+- **CLI Support**: Added Login and Register templates to CLI
+  - New "Authentication Forms" category in component selection
+  - Full support for template creation with `create-template create -c login -n my-login`
+  - Support for template insertion with `create-template insert`
+
+- **Skeleton Loading Template**: Loading placeholders with shimmer animation
+  - Multiple skeleton variations (card, article, list, profile, grid)
+  - Smooth CSS-based shimmer animation effect
+  - Fade-in animations for smooth transitions
+  - Toggle button to switch between skeleton and actual content
+  - Professional gray gradient styling
+  - Responsive grid layout
+  - Mobile-responsive design
+  - Perfect for displaying while content loads or APIs respond
+
+- **Documentation**: Added CLI-USAGE.md with Hebrew instructions for new features
+
+### Improved
+- Enhanced README with Login, Register, and Skeleton template documentation
+- Updated template count to 26 templates in features section
+- Improved navigation template with modal authentication example
+- Better organized authentication-related components
+
+### Technical Details
+- All new templates follow project standards and conventions
+- Prettier formatting applied to all new files
+- Organized folder structure (css/, js/ folders)
+- Comprehensive JavaScript validation and error handling
+- Cross-browser compatibility ensured
+
+## [1.7.0] - 2026-02-01
+
+### Added
+- **Customizable Navigation Items**: Choose exactly which menu items to include when creating navigation components
+  - Interactive prompt: "Enter navigation items (comma-separated)"
+  - Default: "Home, About, Services, Portfolio, Contact"
+  - Automatically generates navigation links and matching page sections
+  - Example: "Home, Blog, Shop, About Us, Contact" creates 5 custom navigation items
+
+- **Customizable Form Fields**: Select and customize form fields during creation
+  - **Standard Fields**: Choose from 6 predefined fields (Name, Email, Phone, Subject, Message, Terms)
+  - **Custom Fields**: Add unlimited custom fields with format `type:label`
+  - Supports all HTML5 input types: text, email, url, date, number, tel, password, color, etc.
+  - Special field types: textarea, checkbox, select
+  - Examples:
+    - `text:Age` → text input for age
+    - `url:Website` → URL input
+    - `date:Birth Date` → date picker
+    - `number:Quantity` → number input
+    - `textarea:Comments` → text area
+    - `checkbox:Subscribe` → checkbox field
+    - `select:Country` → dropdown menu
+
+- **Component Variation Selection**: Choose specific variations for components with multiple styles
+  - **Button Component**: Select from 6 button types or choose specific ones
+    - Primary, Secondary, Success, Danger, Outlined, Disabled
+    - Option: "All Buttons (6 variations)" or "Select Specific Buttons"
+  - **Card Component**: Select from 6 card variations or choose specific ones
+    - Modern Card (Featured), Premium Card (Price), Blog Card (Tags)
+    - Minimal Card, User Profile Card, Interactive Card
+    - Option: "All Cards (6 variations)" or "Select Specific Cards"
+  - **Spinner Component**: Select from 5 spinner types or choose specific ones
+    - Circle Spinner, Bouncing Dots, Pulse Loader, Bar Loader, Gradient Ring
+    - Option: "All Spinners (5 types)" or "Select Specific Spinners"
+
+### Improved
+- Enhanced CLI prompts with better validation and user guidance
+- More interactive component creation experience
+- Clear format instructions for custom fields
+- Cleaner generated HTML when selecting specific variations
+
+### Developer Notes
+- Added `generateNavigationItems()` function to dynamically create nav menus
+- Added `generateFormFields()` function to handle both standard and custom form fields
+- Added `filterButtonVariations()` function to filter button HTML
+- Added `filterCardVariations()` function to filter card HTML
+- Added `filterSpinnerVariations()` function to filter spinner HTML
+- Updated CLI to include conditional prompts based on component type
+- Generator now accepts `navItems`, `formFields`, `customFormFields`, and variation parameters
+
 ## [1.6.2] - 2026-02-01
 
 ### Added