create-template-html-css 1.2.2 → 1.4.0

package/CHANGELOG.md

@@ -0,0 +1,63 @@
+# Changelog
+
+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
+- **Animation Templates**: 
+  - `spinner` - 5 loading spinner variations (circle, dots, pulse, bars, gradient)
+  - `animated-card` - 6 animated card types with flip, glow, slide, scale, tilt, and gradient effects
+  - `typing-effect` - Multiple text typing animations with rotating text and code typing
+  - `fade-gallery` - Image gallery with fade-in animations, masonry layout, and parallax effects
+
+- **Grid Layout Templates**:
+  - `grid-layout` - 4 CSS Grid examples (basic, feature, auto-fit, complex)
+  - `masonry-grid` - Pinterest-style layout with filtering and category tags
+  - `dashboard-grid` - Complete admin dashboard with sidebar, widgets, and charts
+
+### Changed
+- Updated `generator.js` and `inserter.js` with new template components
+- Enhanced README.md with detailed descriptions of all 16 templates
+- Updated feature list from 9 to 16 templates
+
+### Technical Details
+- All new templates include full HTML, CSS, and JavaScript implementations
+- Responsive design support across all new components
+- Modern animations using CSS keyframes and transforms
+- Interactive features with vanilla JavaScript
+- Security validation maintained for all new components
+
+## [1.2.2] - Previous Version
+
+### Initial Release
+- Button, Card, Form, Navigation, Modal, Footer, Hero, Slider, Table templates
+- CLI tool with create, insert, and list commands
+- Security features: input validation, filename sanitization, path traversal protection

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
-- 📦 **9 Templates** - Button, Card, Form, Navigation, Modal, Footer, Hero, Slider, Table
+- 📦 **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
@@ -298,6 +298,170 @@ Professional data table with advanced features:
 - Page navigation
 - Color-coded status indicators
 
+### 10. Spinner 🔄
+
+Animated loading spinners for various use cases:
+
+**Variations:**
+- Circle Spinner - Classic rotating circle
+- Bouncing Dots - Three animated dots
+- Pulse Loader - Pulsing effect
+- Bar Loader - Dancing vertical bars
+- Gradient Ring - Colorful rotating ring
+
+**Features:**
+- Pure CSS animations
+- Smooth performance
+- Multiple styles
+- Easy customization
+
+### 11. Animated Card ✨
+
+Interactive card components with stunning animations:
+
+**Variations:**
+- Flip Card - 3D flip effect
+- Glow Card - Animated glowing border
+- Slide Card - Content slide animation
+- Scale Card - Zoom with shadow
+- Tilt Card - 3D tilt on hover
+- Gradient Card - Animated background
+
+**Features:**
+- Advanced hover effects
+- 3D transformations
+- Interactive JavaScript
+- Modern design patterns
+
+### 12. Typing Effect ⌨️
+
+Text animation components with typing effects:
+
+**Variations:**
+- Simple typing animation
+- Multi-line typing
+- Rotating text display
+- Code typing effect
+
+**Features:**
+- Customizable speed
+- Blinking cursor
+- Multiple phrases
+- Pause/restart controls
+
+### 13. Fade Gallery 🖼️
+
+Animated image gallery with scroll effects:
+
+**Features:**
+- Fade-in animations
+- Hover overlays
+- Horizontal scroll
+- Parallax effect
+- Intersection observer
+- Responsive masonry layout
+
+### 14. Grid Layout 📐
+
+Comprehensive CSS Grid layouts:
+
+**Includes:**
+- Basic responsive grid
+- Feature grid with hero item
+- Auto-fit flexible grid
+- Complex dashboard layout
+
+**Features:**
+- Modern CSS Grid
+- Multiple grid patterns
+- Animated items
+- Fully responsive
+
+### 15. Masonry Grid 🧱
+
+Pinterest-style masonry layout:
+
+**Features:**
+- Column-based layout
+- Category filtering
+- Variable item heights
+- Staggered animations
+- Interactive likes
+- 12 sample items
+
+### 16. Dashboard Grid 📊
+
+Complete admin dashboard template:
+
+**Components:**
+- Sidebar navigation
+- Statistics cards
+- Revenue chart
+- Activity feed
+- Product list
+- Quick actions
+
+**Features:**
+- Full grid layout
+- Real-time animations
+- 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
 
 ### Example 1: Create a Button Component

package/bin/cli.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 const { program } = require('commander');
 const inquirer = require('inquirer').default || require('inquirer');
@@ -30,7 +30,17 @@ program
             { name: 'Footer', value: 'footer' },
             { name: 'Hero Section', value: 'hero' },
             { name: 'Slider', value: 'slider' },
-            { name: 'Table', value: 'table' }
+            { name: 'Table', value: 'table' },
+            { name: 'Spinner (Loading Animations)', value: 'spinner' },
+            { name: 'Animated Card (Interactive Cards)', value: 'animated-card' },
+            { name: 'Typing Effect (Text Animations)', value: 'typing-effect' },
+            { 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: 'Flex Layout (Flexbox Patterns)', value: 'flex-layout' },
+            { name: 'Flex Cards (Flexbox Cards)', value: 'flex-cards' },
+            { name: 'Flex Dashboard (Flexbox Admin)', value: 'flex-dashboard' }
           ]
         },
         {
@@ -144,7 +154,8 @@ program
   .command('list')
   .description('List all available templates')
   .action(() => {
-    console.log(chalk.blue('\nAvailable templates:\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');
     console.log('  • Form - Form with input fields');
@@ -154,6 +165,19 @@ program
     console.log('  • Hero - Hero section with CTA');
     console.log('  • Slider - Image carousel with navigation');
     console.log('  • Table - Data table with search and filtering');
+    console.log(chalk.yellow('\nAnimation Templates:'));
+    console.log('  • Spinner - 5 loading spinner variations');
+    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 (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.2.2",
+  "version": "1.4.0",
   "description": "CLI tool to generate HTML and CSS templates for common UI elements",
   "main": "src/index.js",
   "bin": {
@@ -18,19 +18,27 @@
     "template",
     "html",
     "css",
+    "javascript",
     "generator",
     "ui-components",
     "html-template",
     "css-template",
     "component-generator",
     "ui-generator",
-    "button",
-    "card",
-    "form",
-    "navigation",
-    "modal",
-    "footer",
-    "hero"
+    "animations",
+    "css-animations",
+    "css-grid",
+    "masonry",
+    "dashboard",
+    "spinner",
+    "loading",
+    "typing-effect",
+    "gallery",
+    "responsive",
+    "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'];
+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'];
+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/animated-card/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - Animated Cards Component</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Animated Cards Gallery</h1>
+        
+        <div class="cards-grid">
+            <!-- Flip Card -->
+            <div class="card flip-card">
+                <div class="card-inner">
+                    <div class="card-front">
+                        <div class="icon">🎨</div>
+                        <h3>Flip Card</h3>
+                        <p>Hover to flip</p>
+                    </div>
+                    <div class="card-back">
+                        <h3>Amazing!</h3>
+                        <p>This card flips with a smooth 3D animation effect</p>
+                        <button class="btn">Learn More</button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Glow Card -->
+            <div class="card glow-card">
+                <div class="card-content">
+                    <div class="icon">✨</div>
+                    <h3>Glow Effect</h3>
+                    <p>Beautiful glowing border animation on hover</p>
+                    <button class="btn">Explore</button>
+                </div>
+            </div>
+            
+            <!-- Slide Card -->
+            <div class="card slide-card">
+                <div class="card-content">
+                    <div class="icon">🚀</div>
+                    <h3>Slide Up</h3>
+                    <p>Content slides up with gradient overlay</p>
+                    <button class="btn">Discover</button>
+                </div>
+                <div class="slide-overlay"></div>
+            </div>
+            
+            <!-- Scale Card -->
+            <div class="card scale-card">
+                <div class="card-content">
+                    <div class="icon">💎</div>
+                    <h3>Scale Effect</h3>
+                    <p>Smooth scaling with shadow depth</p>
+                    <button class="btn">View More</button>
+                </div>
+            </div>
+            
+            <!-- Tilt Card -->
+            <div class="card tilt-card">
+                <div class="card-content">
+                    <div class="icon">🎯</div>
+                    <h3>3D Tilt</h3>
+                    <p>Interactive perspective transformation</p>
+                    <button class="btn">Try It</button>
+                </div>
+            </div>
+            
+            <!-- Gradient Card -->
+            <div class="card gradient-card">
+                <div class="card-content">
+                    <div class="icon">🌈</div>
+                    <h3>Gradient Shift</h3>
+                    <p>Animated gradient background transition</p>
+                    <button class="btn">See More</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="script.js"></script>
+</body>
+</html>

package/templates/animated-card/script.js

@@ -0,0 +1,37 @@
+// Animated Cards Component JavaScript
+console.log('Animated Cards Component initialized');
+
+// Add 3D tilt effect on mouse move for tilt card
+document.addEventListener('DOMContentLoaded', () => {
+    const tiltCard = document.querySelector('.tilt-card');
+    
+    if (tiltCard) {
+        tiltCard.addEventListener('mousemove', (e) => {
+            const rect = tiltCard.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            
+            const centerX = rect.width / 2;
+            const centerY = rect.height / 2;
+            
+            const rotateX = (y - centerY) / 10;
+            const rotateY = (centerX - x) / 10;
+            
+            tiltCard.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+        });
+        
+        tiltCard.addEventListener('mouseleave', () => {
+            tiltCard.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
+        });
+    }
+    
+    // Add click handlers to all buttons
+    const buttons = document.querySelectorAll('.btn');
+    buttons.forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            console.log('Button clicked:', btn.textContent);
+            // Add your custom action here
+        });
+    });
+});