create-template-html-css 1.2.2 → 1.3.0

package/CHANGELOG.md

@@ -0,0 +1,39 @@
+# 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.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
+- 📦 **16 Templates** - Button, Card, Form, Navigation, Modal, Footer, Hero, Slider, Table, Spinner, Animated Cards, Typing Effect, Fade Gallery, Grid Layouts, Masonry Grid, Dashboard
 - 🎯 **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,116 @@ 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
+
+
 ## 💡 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,14 @@ 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' }
           ]
         },
         {
@@ -144,7 +151,8 @@ program
   .command('list')
   .description('List all available templates')
   .action(() => {
-    console.log(chalk.blue('\nAvailable templates:\n'));
+    console.log(chalk.blue('\n📦 Available templates (16):\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 +162,15 @@ 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:'));
+    console.log('  • Grid Layout - CSS Grid examples');
+    console.log('  • Masonry Grid - Pinterest-style layout');
+    console.log('  • Dashboard Grid - Complete admin dashboard');
     console.log('');
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-template-html-css",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "CLI tool to generate HTML and CSS templates for common UI elements",
   "main": "src/index.js",
   "bin": {
@@ -18,19 +18,24 @@
     "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"
   ],
   "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'];
 
 // 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'];
 
 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
+        });
+    });
+});

package/templates/animated-card/style.css

@@ -0,0 +1,254 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
+    min-height: 100vh;
+    padding: 40px 20px;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 60px;
+    color: #fff;
+    font-size: 3rem;
+    font-weight: 700;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.cards-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 40px;
+    padding: 20px;
+}
+
+/* Base Card Styles */
+.card {
+    background: white;
+    border-radius: 20px;
+    overflow: hidden;
+    cursor: pointer;
+    position: relative;
+    height: 350px;
+}
+
+.card-content {
+    padding: 40px 30px;
+    text-align: center;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.icon {
+    font-size: 4rem;
+    margin-bottom: 20px;
+}
+
+.card h3 {
+    font-size: 1.8rem;
+    color: #333;
+    margin-bottom: 15px;
+}
+
+.card p {
+    color: #666;
+    font-size: 1.1rem;
+    margin-bottom: 20px;
+    line-height: 1.6;
+}
+
+.btn {
+    padding: 12px 30px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 25px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+    margin-top: auto;
+}
+
+.btn:hover {
+    transform: scale(1.05);
+}
+
+/* Flip Card Animation */
+.flip-card {
+    perspective: 1000px;
+}
+
+.flip-card .card-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.8s;
+    transform-style: preserve-3d;
+}
+
+.flip-card:hover .card-inner {
+    transform: rotateY(180deg);
+}
+
+.card-front, .card-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 30px;
+}
+
+.card-front {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.card-back {
+    background: white;
+    transform: rotateY(180deg);
+}
+
+/* Glow Card Animation */
+.glow-card {
+    position: relative;
+    transition: transform 0.3s ease;
+}
+
+.glow-card::before {
+    content: '';
+    position: absolute;
+    inset: -4px;
+    background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
+    border-radius: 20px;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    z-index: -1;
+    animation: glowRotate 3s linear infinite;
+}
+
+.glow-card:hover::before {
+    opacity: 1;
+}
+
+.glow-card:hover {
+    transform: translateY(-10px);
+}
+
+@keyframes glowRotate {
+    0% {
+        filter: hue-rotate(0deg);
+    }
+    100% {
+        filter: hue-rotate(360deg);
+    }
+}
+
+/* Slide Card Animation */
+.slide-card {
+    position: relative;
+    overflow: hidden;
+}
+
+.slide-overlay {
+    position: absolute;
+    bottom: -100%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
+    transition: bottom 0.5s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.slide-card:hover .slide-overlay {
+    bottom: 0;
+}
+
+.slide-card:hover .card-content {
+    transform: translateY(-20px);
+    transition: transform 0.5s ease;
+}
+
+/* Scale Card Animation */
+.scale-card {
+    transition: transform 0.4s ease, box-shadow 0.4s ease;
+}
+
+.scale-card:hover {
+    transform: scale(1.08);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
+}
+
+.scale-card .card-content {
+    transition: all 0.3s ease;
+}
+
+.scale-card:hover .card-content {
+    transform: scale(0.95);
+}
+
+/* Tilt Card Animation */
+.tilt-card {
+    transition: transform 0.5s ease;
+}
+
+.tilt-card:hover {
+    transform: perspective(1000px) rotateX(10deg) rotateY(10deg);
+    box-shadow: -10px 20px 50px rgba(0, 0, 0, 0.3);
+}
+
+/* Gradient Card Animation */
+.gradient-card {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background-size: 200% 200%;
+    transition: background-position 0.5s ease, transform 0.3s ease;
+    color: white;
+}
+
+.gradient-card h3 {
+    color: white;
+}
+
+.gradient-card p {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.gradient-card:hover {
+    background-position: 100% 100%;
+    transform: translateY(-10px);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    h1 {
+        font-size: 2rem;
+    }
+    
+    .cards-grid {
+        grid-template-columns: 1fr;
+        gap: 30px;
+    }
+    
+    .card {
+        height: 320px;
+    }
+}