create-template-html-css 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -5,6 +5,30 @@ 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.4.0] - 2025-01-18
+
+### Added
+- **Flexbox Layout Templates**:
+  - `flex-layout` - Comprehensive Flexbox patterns and examples (row, column, space-between, space-around, space-evenly, center, wrap, flex-grow, alignment variations, Holy Grail layout)
+  - `flex-cards` - Equal-height card layouts with Flexbox (pricing cards, product cards, team cards, testimonial cards with automatic equal heights and gradient backgrounds)
+  - `flex-dashboard` - Complete admin dashboard using Flexbox (collapsible sidebar, top bar with search, stats cards, bar chart, activity feed, top products, quick actions)
+
+### Changed
+- Updated template count from 16 to 19 templates
+- Enhanced `generator.js` and `inserter.js` with 3 new Flexbox components
+- Updated CLI choices in `bin/cli.js` with Flexbox templates
+- Enhanced `list` command to show new Flexbox category
+- Updated README.md with detailed Flexbox template documentation
+- Added `flexbox`, `flex-layout`, and `flex-dashboard` keywords to package.json
+
+### Technical Details
+- All Flexbox templates include full HTML, CSS, and JavaScript implementations
+- Interactive sidebar collapse functionality
+- Responsive design using pure Flexbox (no CSS Grid)
+- Modern animations and hover effects
+- Equal-height card systems without hacks
+- Professional dashboard layouts with Flexbox
+
 ## [1.3.0] - 2025-01-18
 
 ### Added

package/README.md

@@ -26,7 +26,7 @@ A powerful CLI library to create HTML+CSS element templates. Generate styled UI
 - 🌈 **Stunning Gradients** - Colorful and attractive designs
 - ⚡ **Animations** - Smooth and professional effects
 - 🔧 **Customizable** - Easy to edit and modify the code
-- 📦 **16 Templates** - Button, Card, Form, Navigation, Modal, Footer, Hero, Slider, Table, Spinner, Animated Cards, Typing Effect, Fade Gallery, Grid Layouts, Masonry Grid, Dashboard
+- 📦 **19 Templates** - Button, Card, Form, Navigation, Modal, Footer, Hero, Slider, Table, Spinner, Animated Cards, Typing Effect, Fade Gallery, Grid Layouts, Masonry Grid, Dashboard, Flexbox Layouts
 - 🎯 **Two Modes** - Create new projects or insert into existing HTML pages
 - 🔒 **Secure** - Input validation and path protection
 - 📚 **Well Documented** - Comprehensive guides and examples
@@ -407,6 +407,60 @@ Complete admin dashboard template:
 - Mobile responsive
 - Professional design
 
+### 17. Flex Layout 📏
+
+Comprehensive Flexbox patterns and examples:
+
+**Includes:**
+- Row and column layouts
+- Space distribution patterns
+- Alignment variations
+- Flex-grow examples
+- Nested flex containers
+- Holy Grail layout
+
+**Features:**
+- Interactive examples
+- Visual demonstrations
+- Responsive design
+- Modern Flexbox techniques
+
+### 18. Flex Cards 🃏
+
+Equal-height card layouts with Flexbox:
+
+**Variations:**
+- Basic equal-height cards
+- Pricing cards
+- Product cards
+- Team member cards
+- Testimonial cards
+
+**Features:**
+- Automatic equal heights
+- Hover animations
+- Gradient backgrounds
+- Fully responsive
+
+### 19. Flex Dashboard 🎛️
+
+Admin dashboard built entirely with Flexbox:
+
+**Components:**
+- Collapsible sidebar
+- Top search bar
+- Stats cards
+- Bar chart visualization
+- Activity feed
+- Top products list
+- Quick actions
+
+**Features:**
+- Pure Flexbox layout
+- Mobile responsive
+- Interactive animations
+- Professional design
+
 
 ## 💡 Examples
 

package/bin/cli.js

@@ -37,7 +37,10 @@ program
             { name: 'Fade Gallery (Image Gallery)', value: 'fade-gallery' },
             { name: 'Grid Layout (CSS Grid)', value: 'grid-layout' },
             { name: 'Masonry Grid (Pinterest-style)', value: 'masonry-grid' },
-            { name: 'Dashboard Grid (Admin Panel)', value: 'dashboard-grid' }
+            { name: 'Dashboard Grid (Admin Panel)', value: 'dashboard-grid' },
+            { name: 'Flex Layout (Flexbox Patterns)', value: 'flex-layout' },
+            { name: 'Flex Cards (Flexbox Cards)', value: 'flex-cards' },
+            { name: 'Flex Dashboard (Flexbox Admin)', value: 'flex-dashboard' }
           ]
         },
         {
@@ -151,7 +154,7 @@ program
   .command('list')
   .description('List all available templates')
   .action(() => {
-    console.log(chalk.blue('\n📦 Available templates (16):\n'));
+    console.log(chalk.blue('\n📦 Available templates (19):\n'));
     console.log(chalk.yellow('Basic Components:'));
     console.log('  • Button - Styled button component');
     console.log('  • Card - Card component with image and content');
@@ -167,10 +170,14 @@ program
     console.log('  • Animated Card - 6 interactive card animations');
     console.log('  • Typing Effect - Text typing animations');
     console.log('  • Fade Gallery - Image gallery with fade effects');
-    console.log(chalk.yellow('\nGrid Layouts:'));
+    console.log(chalk.yellow('\nGrid Layouts (CSS Grid):'));
     console.log('  • Grid Layout - CSS Grid examples');
     console.log('  • Masonry Grid - Pinterest-style layout');
     console.log('  • Dashboard Grid - Complete admin dashboard');
+    console.log(chalk.yellow('\nFlexbox Layouts:'));
+    console.log('  • Flex Layout - Flexbox patterns and examples');
+    console.log('  • Flex Cards - Equal-height card layouts');
+    console.log('  • Flex Dashboard - Admin dashboard with Flexbox');
     console.log('');
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-template-html-css",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "CLI tool to generate HTML and CSS templates for common UI elements",
   "main": "src/index.js",
   "bin": {
@@ -35,7 +35,10 @@
     "typing-effect",
     "gallery",
     "responsive",
-    "modern-ui"
+    "modern-ui",
+    "flexbox",
+    "flex-layout",
+    "flex-dashboard"
   ],
   "author": "Ben Shabbat <benshabbat@example.com> (https://github.com/benshabbat)",
   "license": "MIT",

package/src/generator.js

@@ -2,7 +2,7 @@ const fs = require('fs').promises;
 const path = require('path');
 
 // Security: Validate component name against whitelist
-const VALID_COMPONENTS = ['button', 'card', 'form', 'navigation', 'modal', 'footer', 'hero', 'slider', 'table', 'spinner', 'animated-card', 'typing-effect', 'fade-gallery', 'grid-layout', 'masonry-grid', 'dashboard-grid'];
+const VALID_COMPONENTS = ['button', 'card', 'form', 'navigation', 'modal', 'footer', 'hero', 'slider', 'table', 'spinner', 'animated-card', 'typing-effect', 'fade-gallery', 'grid-layout', 'masonry-grid', 'dashboard-grid', 'flex-layout', 'flex-cards', 'flex-dashboard'];
 
 // Security: Sanitize filename to prevent path traversal
 function sanitizeFilename(filename) {

package/src/inserter.js

@@ -2,7 +2,7 @@ const fs = require('fs').promises;
 const path = require('path');
 
 // Security: Validate component name against whitelist
-const VALID_COMPONENTS = ['button', 'card', 'form', 'navigation', 'modal', 'footer', 'hero', 'slider', 'table', 'spinner', 'animated-card', 'typing-effect', 'fade-gallery', 'grid-layout', 'masonry-grid', 'dashboard-grid'];
+const VALID_COMPONENTS = ['button', 'card', 'form', 'navigation', 'modal', 'footer', 'hero', 'slider', 'table', 'spinner', 'animated-card', 'typing-effect', 'fade-gallery', 'grid-layout', 'masonry-grid', 'dashboard-grid', 'flex-layout', 'flex-cards', 'flex-dashboard'];
 
 async function insertComponent(options) {
   const { component, targetFile, styleMode, scriptMode } = options;

package/templates/flex-cards/index.html

@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - Flex Cards Component</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <header class="hero">
+            <h1>Flex Cards Gallery</h1>
+            <p>Equal height cards with Flexbox magic</p>
+        </header>
+
+        <!-- Equal Height Cards -->
+        <section class="section">
+            <h2 class="section-title">Equal Height Cards</h2>
+            <div class="card-container">
+                <div class="card">
+                    <div class="card-icon">🚀</div>
+                    <h3>Launch Fast</h3>
+                    <p>Get your project up and running in minutes with our streamlined setup process.</p>
+                    <button class="card-btn">Get Started</button>
+                </div>
+
+                <div class="card">
+                    <div class="card-icon">⚡</div>
+                    <h3>Lightning Speed</h3>
+                    <p>Optimized for performance with modern techniques.</p>
+                    <button class="card-btn">Learn More</button>
+                </div>
+
+                <div class="card">
+                    <div class="card-icon">🎨</div>
+                    <h3>Beautiful Design</h3>
+                    <p>Stunning interfaces that work perfectly on all devices. Responsive and accessible design patterns that your users will love. Premium quality guaranteed.</p>
+                    <button class="card-btn">View Demo</button>
+                </div>
+
+                <div class="card">
+                    <div class="card-icon">🔒</div>
+                    <h3>Secure</h3>
+                    <p>Enterprise-level security built-in from day one.</p>
+                    <button class="card-btn">Security Info</button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Pricing Cards -->
+        <section class="section">
+            <h2 class="section-title">Pricing Plans</h2>
+            <div class="pricing-container">
+                <div class="pricing-card">
+                    <div class="pricing-badge">Basic</div>
+                    <div class="pricing-icon">📦</div>
+                    <div class="pricing-amount">
+                        <span class="currency">$</span>
+                        <span class="price">9</span>
+                        <span class="period">/month</span>
+                    </div>
+                    <ul class="pricing-features">
+                        <li>✓ 10 Projects</li>
+                        <li>✓ 5GB Storage</li>
+                        <li>✓ Email Support</li>
+                        <li>✓ Basic Analytics</li>
+                    </ul>
+                    <button class="pricing-btn">Choose Plan</button>
+                </div>
+
+                <div class="pricing-card featured">
+                    <div class="pricing-badge popular">Popular</div>
+                    <div class="pricing-icon">⭐</div>
+                    <div class="pricing-amount">
+                        <span class="currency">$</span>
+                        <span class="price">29</span>
+                        <span class="period">/month</span>
+                    </div>
+                    <ul class="pricing-features">
+                        <li>✓ Unlimited Projects</li>
+                        <li>✓ 50GB Storage</li>
+                        <li>✓ Priority Support</li>
+                        <li>✓ Advanced Analytics</li>
+                        <li>✓ Custom Domain</li>
+                        <li>✓ Team Collaboration</li>
+                    </ul>
+                    <button class="pricing-btn featured-btn">Choose Plan</button>
+                </div>
+
+                <div class="pricing-card">
+                    <div class="pricing-badge">Enterprise</div>
+                    <div class="pricing-icon">🏢</div>
+                    <div class="pricing-amount">
+                        <span class="currency">$</span>
+                        <span class="price">99</span>
+                        <span class="period">/month</span>
+                    </div>
+                    <ul class="pricing-features">
+                        <li>✓ Unlimited Everything</li>
+                        <li>✓ 500GB Storage</li>
+                        <li>✓ 24/7 Phone Support</li>
+                        <li>✓ White Label</li>
+                        <li>✓ API Access</li>
+                    </ul>
+                    <button class="pricing-btn">Contact Sales</button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Product Cards -->
+        <section class="section dark-section">
+            <h2 class="section-title">Featured Products</h2>
+            <div class="product-container">
+                <div class="product-card">
+                    <div class="product-image gradient-1">
+                        <span class="product-badge">New</span>
+                    </div>
+                    <div class="product-info">
+                        <h3>Premium Headphones</h3>
+                        <div class="product-rating">
+                            ⭐⭐⭐⭐⭐ <span>(128)</span>
+                        </div>
+                        <p>High-quality wireless headphones with noise cancellation</p>
+                        <div class="product-footer">
+                            <span class="product-price">$299</span>
+                            <button class="product-btn">Add to Cart</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="product-card">
+                    <div class="product-image gradient-2">
+                        <span class="product-badge sale">Sale</span>
+                    </div>
+                    <div class="product-info">
+                        <h3>Smart Watch Pro</h3>
+                        <div class="product-rating">
+                            ⭐⭐⭐⭐☆ <span>(94)</span>
+                        </div>
+                        <p>Advanced fitness tracking and health monitoring</p>
+                        <div class="product-footer">
+                            <span class="product-price">
+                                <del>$399</del> $299
+                            </span>
+                            <button class="product-btn">Add to Cart</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="product-card">
+                    <div class="product-image gradient-3">
+                        <span class="product-badge">Hot</span>
+                    </div>
+                    <div class="product-info">
+                        <h3>Wireless Earbuds</h3>
+                        <div class="product-rating">
+                            ⭐⭐⭐⭐⭐ <span>(256)</span>
+                        </div>
+                        <p>Crystal clear sound in a compact design</p>
+                        <div class="product-footer">
+                            <span class="product-price">$149</span>
+                            <button class="product-btn">Add to Cart</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Team Cards -->
+        <section class="section">
+            <h2 class="section-title">Meet Our Team</h2>
+            <div class="team-container">
+                <div class="team-card">
+                    <div class="team-avatar gradient-4">
+                        <span class="avatar-text">JD</span>
+                    </div>
+                    <h3>John Doe</h3>
+                    <p class="team-role">CEO & Founder</p>
+                    <p class="team-bio">Visionary leader with 15 years of experience in tech innovation</p>
+                    <div class="team-social">
+                        <a href="#" class="social-link">💼</a>
+                        <a href="#" class="social-link">🐦</a>
+                        <a href="#" class="social-link">📧</a>
+                    </div>
+                </div>
+
+                <div class="team-card">
+                    <div class="team-avatar gradient-5">
+                        <span class="avatar-text">JS</span>
+                    </div>
+                    <h3>Jane Smith</h3>
+                    <p class="team-role">CTO</p>
+                    <p class="team-bio">Tech expert specializing in scalable architectures</p>
+                    <div class="team-social">
+                        <a href="#" class="social-link">💼</a>
+                        <a href="#" class="social-link">🐦</a>
+                        <a href="#" class="social-link">📧</a>
+                    </div>
+                </div>
+
+                <div class="team-card">
+                    <div class="team-avatar gradient-6">
+                        <span class="avatar-text">MB</span>
+                    </div>
+                    <h3>Mike Brown</h3>
+                    <p class="team-role">Lead Designer</p>
+                    <p class="team-bio">Award-winning designer with a passion for user experience</p>
+                    <div class="team-social">
+                        <a href="#" class="social-link">💼</a>
+                        <a href="#" class="social-link">🐦</a>
+                        <a href="#" class="social-link">📧</a>
+                    </div>
+                </div>
+
+                <div class="team-card">
+                    <div class="team-avatar gradient-7">
+                        <span class="avatar-text">SE</span>
+                    </div>
+                    <h3>Sarah Evans</h3>
+                    <p class="team-role">Marketing Director</p>
+                    <p class="team-bio">Strategic thinker driving growth and brand awareness</p>
+                    <div class="team-social">
+                        <a href="#" class="social-link">💼</a>
+                        <a href="#" class="social-link">🐦</a>
+                        <a href="#" class="social-link">📧</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Testimonial Cards -->
+        <section class="section">
+            <h2 class="section-title">What Our Clients Say</h2>
+            <div class="testimonial-container">
+                <div class="testimonial-card">
+                    <div class="quote-icon">"</div>
+                    <p class="testimonial-text">This product completely transformed how we work. The team is incredibly responsive and the features are exactly what we needed.</p>
+                    <div class="testimonial-author">
+                        <div class="author-avatar gradient-8">AC</div>
+                        <div class="author-info">
+                            <h4>Alice Cooper</h4>
+                            <p>CEO, TechCorp</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="testimonial-card">
+                    <div class="quote-icon">"</div>
+                    <p class="testimonial-text">Outstanding quality and support. We've seen a 300% increase in productivity since implementation.</p>
+                    <div class="testimonial-author">
+                        <div class="author-avatar gradient-9">BD</div>
+                        <div class="author-info">
+                            <h4>Bob Davis</h4>
+                            <p>CTO, StartupXYZ</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="testimonial-card">
+                    <div class="quote-icon">"</div>
+                    <p class="testimonial-text">Simply the best solution on the market. Easy to use, powerful features, and excellent value for money.</p>
+                    <div class="testimonial-author">
+                        <div class="author-avatar gradient-10">CE</div>
+                        <div class="author-info">
+                            <h4>Carol Edwards</h4>
+                            <p>Director, MegaCorp</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>

package/templates/flex-cards/script.js

@@ -0,0 +1,122 @@
+// Flex Cards Component JavaScript
+console.log('Flex Cards Component initialized');
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Add animation on scroll
+    const observerOptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.1
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry, index) => {
+            if (entry.isIntersecting) {
+                setTimeout(() => {
+                    entry.target.style.animation = 'fadeInUp 0.6s ease forwards';
+                }, index * 100);
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+
+    // Observe all cards
+    const cards = document.querySelectorAll('.card, .pricing-card, .product-card, .team-card, .testimonial-card');
+    cards.forEach(card => {
+        card.style.opacity = '0';
+        observer.observe(card);
+    });
+
+    // Card button interactions
+    const cardButtons = document.querySelectorAll('.card-btn, .pricing-btn, .product-btn');
+    cardButtons.forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            
+            // Create ripple effect
+            const ripple = document.createElement('span');
+            ripple.classList.add('ripple');
+            this.appendChild(ripple);
+            
+            setTimeout(() => ripple.remove(), 600);
+            
+            console.log('Button clicked:', this.textContent);
+        });
+    });
+
+    // Social link interactions
+    const socialLinks = document.querySelectorAll('.social-link');
+    socialLinks.forEach(link => {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            console.log('Social link clicked');
+        });
+    });
+
+    // Product card interactions
+    const productCards = document.querySelectorAll('.product-card');
+    productCards.forEach(card => {
+        card.addEventListener('click', function() {
+            const productName = this.querySelector('h3').textContent;
+            console.log('Product clicked:', productName);
+        });
+    });
+
+    // Pricing card selection
+    const pricingCards = document.querySelectorAll('.pricing-card');
+    pricingCards.forEach(card => {
+        card.addEventListener('click', function() {
+            // Remove selected class from all cards
+            pricingCards.forEach(c => c.classList.remove('selected'));
+            
+            // Add selected class to clicked card
+            this.classList.add('selected');
+            
+            const plan = this.querySelector('.pricing-badge').textContent;
+            console.log('Pricing plan selected:', plan);
+        });
+    });
+
+    console.log('Total cards loaded:', cards.length);
+});
+
+// Add animations and ripple effect styles
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes fadeInUp {
+        from {
+            opacity: 0;
+            transform: translateY(30px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+    
+    @keyframes ripple {
+        from {
+            width: 0;
+            height: 0;
+            opacity: 0.5;
+        }
+        to {
+            width: 100px;
+            height: 100px;
+            opacity: 0;
+        }
+    }
+    
+    .ripple {
+        position: absolute;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.6);
+        animation: ripple 0.6s ease-out;
+        pointer-events: none;
+    }
+    
+    .pricing-card.selected {
+        border: 3px solid #667eea;
+    }
+`;
+document.head.appendChild(style);