npm - create-template-html-css - Versions diffs - 1.4.0 → 1.4.2 - Mend

create-template-html-css 1.4.0 → 1.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.md +35 -0
package/INSERT-DEMO.md +31 -2
package/bin/cli.js +116 -57
package/package.json +1 -1
package/src/inserter.js +69 -22
package/templates/card/index.html +106 -16
package/templates/card/script.js +120 -7
package/templates/card/style.css +293 -17
package/test-insert.html +54 -0

package/CHANGELOG.md CHANGED Viewed

@@ -5,6 +5,41 @@ 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.2] - 2025-01-29
+### Enhanced
+- **Card Template Improvements**:
+  - 6 professional card variations: Modern (featured), Premium (pricing), Blog (tags), Minimal (clean), User Profile (avatar), Interactive (action buttons)
+  - Rich interactions: like/save buttons, social links, tag filtering, toast notifications
+  - Professional gradient styling and animations
+  - Enhanced badges, metadata displays (ratings, dates, comments, authors)
+  - Improved hover effects and button animations with ripple effect
+  - Better mobile responsiveness
+## [1.4.1] - 2025-01-29
+### Improved
+- **Enhanced Insert Feature**:
+  - Better indentation handling - respects existing HTML file formatting
+  - Improved duplicate detection - prevents inserting same component twice
+  - Unique component IDs - all styles/scripts get unique identifiers
+  - File validation - checks if HTML file exists before insertion
+  - All 19 components now available in insert command (was only 9 basic ones)
+- **Improved CLI**:
+  - Better visual design with emojis and separators
+  - Organized component lists with categories
+  - File existence validation before insertion
+  - Enhanced help text and examples
+  - Better status messages with clear summaries
+  - Separated files as default for CSS insertion
+### Technical Details
+- Simplified indentation detection using HTML file's existing format
+- Added `path` and `fs` imports for better file handling
+- Improved error messages for better debugging
+- Extended insert command with all template categories
 ## [1.4.0] - 2025-01-18
 ### Added

package/INSERT-DEMO.md CHANGED Viewed

@@ -2,7 +2,16 @@
 ## How to Use the Insert Command
-The `insert` command allows you to add pre-styled components to your existing HTML pages without creating new projects.
+The `insert` command allows you to add pre-styled components to your existing HTML pages without creating new projects. Components are smartly integrated with proper indentation and ID attributes for easy customization.
+## How It Works
+When inserting a component:
+1. ✅ Detects existing indentation in your HTML file
+2. ✅ Respects your code formatting style
+3. ✅ Adds unique IDs to styles and scripts (e.g., `button-styles`, `button-script`)
+4. ✅ Prevents duplicate insertions (warns if component already exists)
+5. ✅ Validates HTML structure (checks for `<head>` and `<body>` tags)
 ## Example Usage
@@ -132,7 +141,9 @@ npm run insert
 ## Available Components
-All 7 templates are available for insertion:
+All 19 templates are available for insertion:
+### Basic Components
 - Button - Styled button variations
 - Card - Product/content cards
 - Form - Contact/input forms
@@ -140,3 +151,21 @@ All 7 templates are available for insertion:
 - Modal - Dialog popups
 - Footer - Page footer
 - Hero - Hero sections with CTA
+- Slider - Image carousel
+- Table - Data tables with features
+### Animation Templates
+- Spinner - Loading animations
+- Animated Card - Interactive card effects
+- Typing Effect - Text animations
+- Fade Gallery - Image gallery with effects
+### Grid Layouts (CSS Grid)
+- Grid Layout - CSS Grid examples
+- Masonry Grid - Pinterest-style layout
+- Dashboard Grid - Admin dashboard
+### Flexbox Layouts
+- Flex Layout - Flexbox patterns
+- Flex Cards - Equal-height cards
+- Flex Dashboard - Admin dashboard with Flexbox

package/bin/cli.js CHANGED Viewed

@@ -2,26 +2,40 @@
 const { program } = require('commander');
 const inquirer = require('inquirer').default || require('inquirer');
+const path = require('path');
+const fs = require('fs').promises;
 const { generateTemplate } = require('../src/generator');
 const { insertComponent } = require('../src/inserter');
 const chalk = require('chalk');
 program
   .name('create-template')
-  .description('CLI tool to generate HTML and CSS templates')
-  .version('1.0.0');
+  .description(chalk.cyan('🎨 Create HTML/CSS UI component templates in seconds'))
+  .version('1.4.0');
+// Add intro message
+program.on('--help', () => {
+  console.log('\n' + chalk.cyan('Examples:'));
+  console.log('  $ create-template create        # Create a new template');
+  console.log('  $ create-template insert        # Insert into existing HTML');
+  console.log('  $ create-template list          # List all templates');
+  console.log('');
+});
 program
   .command('create')
-  .description('Create a new HTML/CSS template')
+  .description(chalk.green('Create a new HTML/CSS template component'))
   .action(async () => {
     try {
+      console.log(chalk.cyan('\n✨ Creating a new template component...\n'));
       const answers = await inquirer.prompt([
         {
           type: 'list',
           name: 'component',
           message: 'What component would you like to create?',
           choices: [
+            new inquirer.Separator(chalk.gray('─ Basic Components')),
             { name: 'Button', value: 'button' },
             { name: 'Card', value: 'card' },
             { name: 'Form', value: 'form' },
@@ -31,15 +45,18 @@ program
             { name: 'Hero Section', value: 'hero' },
             { name: 'Slider', value: 'slider' },
             { name: 'Table', value: 'table' },
+            new inquirer.Separator(chalk.gray('─ Animation Templates')),
             { 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' },
+            new inquirer.Separator(chalk.gray('─ Grid Layouts (CSS Grid)')),
+            { name: 'Grid Layout', value: 'grid-layout' },
             { name: 'Masonry Grid (Pinterest-style)', value: 'masonry-grid' },
             { name: 'Dashboard Grid (Admin Panel)', value: 'dashboard-grid' },
+            new inquirer.Separator(chalk.gray('─ Flexbox Layouts')),
             { name: 'Flex Layout (Flexbox Patterns)', value: 'flex-layout' },
-            { name: 'Flex Cards (Flexbox Cards)', value: 'flex-cards' },
+            { name: 'Flex Cards (Equal-height cards)', value: 'flex-cards' },
             { name: 'Flex Dashboard (Flexbox Admin)', value: 'flex-dashboard' }
           ]
         },
@@ -65,37 +82,50 @@ program
           type: 'confirm',
           name: 'includeJs',
           message: 'Include JavaScript file?',
-          default: false
+          default: true
         }
       ]);
       await generateTemplate(answers);
-      console.log(chalk.green('✓ Template created successfully!'));
+      console.log('\n' + chalk.green('✓ Template created successfully!'));
+      console.log(chalk.gray(`  Location: ./${answers.name}/`));
+      console.log(chalk.gray(`  Files: index.html, style.css${answers.includeJs ? ', script.js' : ''}`));
+      console.log('');
     } catch (error) {
-      console.error(chalk.red('Error creating template:'), error.message);
+      console.error(chalk.red('✗ Error:'), error.message);
       process.exit(1);
     }
   });
 program
   .command('insert')
-  .description('Insert a component into an existing HTML page')
+  .description(chalk.green('Insert a component into an existing HTML page'))
   .action(async () => {
     try {
+      console.log(chalk.cyan('\n🚀 Inserting component into HTML file...\n'));
       const answers = await inquirer.prompt([
         {
           type: 'input',
           name: 'targetFile',
           message: 'Enter the path to your HTML file:',
           default: 'index.html',
-          validate: (input) => {
+          validate: async (input) => {
             if (!input || input.trim().length === 0) {
               return 'Please enter a file path';
             }
             if (!input.toLowerCase().endsWith('.html')) {
               return 'File must be an HTML file (.html)';
             }
-            return true;
+            // Check if file exists
+            try {
+              await fs.access(path.resolve(process.cwd(), input));
+              return true;
+            } catch {
+              return `File not found: ${input}`;
+            }
           }
         },
         {
@@ -103,6 +133,7 @@ program
           name: 'component',
           message: 'Which component would you like to insert?',
           choices: [
+            new inquirer.Separator(chalk.gray('─ Basic Components')),
             { name: 'Button', value: 'button' },
             { name: 'Card', value: 'card' },
             { name: 'Form', value: 'form' },
@@ -111,78 +142,106 @@ program
             { name: 'Footer', value: 'footer' },
             { name: 'Hero Section', value: 'hero' },
             { name: 'Slider', value: 'slider' },
-            { name: 'Table', value: 'table' }
+            { name: 'Table', value: 'table' },
+            new inquirer.Separator(chalk.gray('─ Animation Templates')),
+            { name: 'Spinner', value: 'spinner' },
+            { name: 'Animated Card', value: 'animated-card' },
+            { name: 'Typing Effect', value: 'typing-effect' },
+            { name: 'Fade Gallery', value: 'fade-gallery' },
+            new inquirer.Separator(chalk.gray('─ Grid Layouts')),
+            { name: 'Grid Layout', value: 'grid-layout' },
+            { name: 'Masonry Grid', value: 'masonry-grid' },
+            { name: 'Dashboard Grid', value: 'dashboard-grid' },
+            new inquirer.Separator(chalk.gray('─ Flexbox Layouts')),
+            { name: 'Flex Layout', value: 'flex-layout' },
+            { name: 'Flex Cards', value: 'flex-cards' },
+            { name: 'Flex Dashboard', value: 'flex-dashboard' }
           ]
         },
-        {
-          type: 'list',
-          name: 'styleMode',
-          message: 'How should the CSS be added?',
-          choices: [
-            { name: 'Inline (inside <style> tag)', value: 'inline' },
-            { name: 'Separate file', value: 'separate' },
-            { name: 'Skip (I\'ll add it manually)', value: 'skip' }
-          ],
-          default: 'inline'
-        },
         {
           type: 'list',
           name: 'scriptMode',
           message: 'How should the JavaScript be added?',
           choices: [
+            { name: 'Separate file (recommended)', value: 'separate' },
             { name: 'Inline (inside <script> tag)', value: 'inline' },
-            { name: 'Separate file', value: 'separate' },
             { name: 'Skip (I\'ll add it manually)', value: 'skip' }
           ],
-          default: 'inline'
+          default: 'separate'
         }
       ]);
+      // CSS is always separate (external)
+      answers.styleMode = 'separate';
       const result = await insertComponent(answers);
-      console.log(chalk.green('\n✓ Component inserted successfully!'));
-      console.log(chalk.cyan(`  File: ${result.targetFile}`));
-      console.log(chalk.cyan(`  Component: ${result.component}`));
-      console.log(chalk.cyan(`  CSS: ${result.styleMode}`));
-      console.log(chalk.cyan(`  JS: ${result.scriptMode}`));
+      console.log('\n' + chalk.green('✓ Component inserted successfully!'));
+      console.log(chalk.cyan('  Summary:'));
+      console.log(chalk.gray(`    File: ${path.relative(process.cwd(), result.targetFile)}`));
+      console.log(chalk.gray(`    Component: ${chalk.bold(result.component)}`));
+      console.log(chalk.gray(`    CSS: ${chalk.yellow('external file')}`));
+      console.log(chalk.gray(`    JS: ${chalk.yellow(result.scriptMode)}`));
+      console.log(chalk.gray(`\n    Component IDs: ${result.component}-styles, ${result.component}-script`));
+      console.log('');
     } catch (error) {
-      console.error(chalk.red('Error inserting component:'), error.message);
+      console.error('\n' + chalk.red('✗ Error:'), error.message);
       process.exit(1);
     }
   });
 program
   .command('list')
-  .description('List all available templates')
+  .description(chalk.green('List all available templates'))
   .action(() => {
-    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');
-    console.log('  • Navigation - Navigation bar');
-    console.log('  • Modal - Modal dialog');
-    console.log('  • Footer - Footer section');
-    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('\n' + chalk.blue('📦 Available Components (19 total)\n'));
+    console.log(chalk.yellow('━ Basic Components (9)'));
+    console.log('  button          Styled button component');
+    console.log('  card            Card component with image and content');
+    console.log('  form            Form with input fields and validation');
+    console.log('  navigation      Responsive navigation bar');
+    console.log('  modal           Modal dialog component');
+    console.log('  footer          Footer section');
+    console.log('  hero            Hero section with CTA button');
+    console.log('  slider          Image carousel with navigation');
+    console.log('  table           Data table with search and filtering');
+    console.log('\n' + chalk.magenta('━ Animation Templates (4)'));
+    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('\n' + chalk.cyan('━ Grid Layouts (3)'));
+    console.log('  grid-layout     CSS Grid patterns and examples');
+    console.log('  masonry-grid    Pinterest-style masonry layout');
+    console.log('  dashboard-grid  Complete admin dashboard (Grid)');
+    console.log('\n' + chalk.green('━ Flexbox Layouts (3)'));
+    console.log('  flex-layout     Flexbox patterns and examples');
+    console.log('  flex-cards      Equal-height card layouts');
+    console.log('  flex-dashboard  Complete admin dashboard (Flexbox)');
+    console.log('\n' + chalk.gray('Usage:'));
+    console.log('  create-template create              Create a new component');
+    console.log('  create-template insert              Insert into HTML file');
     console.log('');
   });
 program.parse(process.argv);
 if (!process.argv.slice(2).length) {
-  program.outputHelp();
+  console.log('\n' + chalk.cyan('🎨 Create HTML/CSS UI Templates\n'));
+  console.log(chalk.white('Usage: create-template [command]') + '\n');
+  console.log(chalk.yellow('Commands:'));
+  console.log('  create    Create a new template component');
+  console.log('  insert    Insert component into existing HTML file');
+  console.log('  list      Show all available templates');
+  console.log('  help      Display help information\n');
+  console.log(chalk.gray('Examples:'));
+  console.log('  $ create-template create        # Interactive template creation');
+  console.log('  $ create-template insert        # Interactive component insertion');
+  console.log('  $ create-template list          # View all 19 templates');
+  console.log('  $ create-template --help        # Show full help\n');
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-template-html-css",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "CLI tool to generate HTML and CSS templates for common UI elements",
   "main": "src/index.js",
   "bin": {

package/src/inserter.js CHANGED Viewed

@@ -4,6 +4,31 @@ 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', 'flex-layout', 'flex-cards', 'flex-dashboard'];
+/**
+ * Extracts indentation from a line
+ */
+function getIndentation(line) {
+  const match = line.match(/^(\s*)/);
+  return match ? match[1] : '';
+}
+/**
+ * Checks if a component is already inserted in the HTML
+ */
+function isComponentAlreadyInserted(htmlContent, component) {
+  const commentPattern = new RegExp(`<!-- ${component.toUpperCase()} Component -->`, 'i');
+  return commentPattern.test(htmlContent);
+}
+/**
+ * Gets the indentation level used in an HTML file
+ */
+function getHtmlIndentation(htmlContent) {
+  // Look for any indented line to determine the standard indentation
+  const match = htmlContent.match(/\n(\s+)\S/);
+  return match ? match[1] : '    '; // default to 4 spaces
+}
 async function insertComponent(options) {
   const { component, targetFile, styleMode, scriptMode } = options;
@@ -23,12 +48,26 @@ async function insertComponent(options) {
   // Read target HTML file
   let htmlContent = await fs.readFile(targetPath, 'utf-8');
+  // Check if component is already inserted
+  if (isComponentAlreadyInserted(htmlContent, component)) {
+    throw new Error(`Component "${component}" is already inserted in this file`);
+  }
+  // Validate HTML structure
+  if (!htmlContent.includes('</body>')) {
+    throw new Error('Target HTML file does not have a closing </body> tag');
+  }
+  if (!htmlContent.includes('</head>')) {
+    throw new Error('Target HTML file does not have a </head> tag');
+  }
   // Get component templates
   const templateDir = path.join(__dirname, '..', 'templates', component);
   const componentHtml = await fs.readFile(path.join(templateDir, 'index.html'), 'utf-8');
   const componentCss = await fs.readFile(path.join(templateDir, 'style.css'), 'utf-8');
-  // Extract component body content (between <body> tags, excluding container if needed)
+  // Extract component body content
   const bodyMatch = componentHtml.match(/<body[^>]*>([\s\S]*)<\/body>/i);
   if (!bodyMatch) {
     throw new Error('Invalid component template structure');
@@ -36,31 +75,36 @@ async function insertComponent(options) {
   let componentBody = bodyMatch[1].trim();
+  // Get indentation used in the HTML file
+  const baseIndent = getHtmlIndentation(htmlContent);
+  // Normalize component body indentation
+  const lines = componentBody.split('\n').map(line => {
+    if (line.trim() === '') return '';
+    return baseIndent + line.trim();
+  }).join('\n');
+  componentBody = lines;
   // Insert component HTML before closing </body> tag
-  if (htmlContent.includes('</body>')) {
-    htmlContent = htmlContent.replace('</body>', `\n    <!-- ${component.toUpperCase()} Component -->\n${componentBody}\n</body>`);
-  } else {
-    throw new Error('Target HTML file does not have a closing </body> tag');
-  }
+  htmlContent = htmlContent.replace('</body>', `${baseIndent}<!-- ${component.toUpperCase()} Component -->\n${componentBody}\n\n</body>`);
   // Handle CSS
   if (styleMode === 'inline') {
-    // Add CSS in <style> tag before </head>
-    const styleTag = `\n    <style>\n        /* ${component.toUpperCase()} Component Styles */\n${componentCss}\n    </style>`;
-    if (htmlContent.includes('</head>')) {
-      htmlContent = htmlContent.replace('</head>', `${styleTag}\n</head>`);
-    }
+    // Normalize CSS indentation
+    const normalizedCss = componentCss.split('\n').map(line => {
+      if (line.trim() === '') return '';
+      return baseIndent + '    ' + line.trim();
+    }).join('\n');
+    htmlContent = htmlContent.replace('</head>', `${baseIndent}<style id="${component}-styles">\n${baseIndent}    /* ${component.toUpperCase()} Component Styles */\n${normalizedCss}\n${baseIndent}</style>\n</head>`);
   } else if (styleMode === 'separate') {
     // Create separate CSS file
     const cssFileName = `${component}-component.css`;
     const cssPath = path.join(path.dirname(targetPath), cssFileName);
-    await fs.writeFile(cssPath, `/* ${component.toUpperCase()} Component Styles */\n${componentCss}`);
+    await fs.writeFile(cssPath, `/* ${component.toUpperCase()} Component Styles */\n\n${componentCss}`);
     // Add link to CSS file
-    const linkTag = `\n    <link rel="stylesheet" href="${cssFileName}">`;
-    if (htmlContent.includes('</head>')) {
-      htmlContent = htmlContent.replace('</head>', `${linkTag}\n</head>`);
-    }
+    htmlContent = htmlContent.replace('</head>', `${baseIndent}<link rel="stylesheet" href="${cssFileName}">\n</head>`);
   }
   // Handle JavaScript
@@ -68,18 +112,21 @@ async function insertComponent(options) {
     const componentJs = await fs.readFile(path.join(templateDir, 'script.js'), 'utf-8');
     if (scriptMode === 'inline') {
-      // Add JS in <script> tag before </body>
-      const scriptTag = `\n    <script>\n        // ${component.toUpperCase()} Component Script\n${componentJs}\n    </script>\n`;
-      htmlContent = htmlContent.replace('</body>', `${scriptTag}</body>`);
+      // Normalize JS indentation
+      const normalizedJs = componentJs.split('\n').map(line => {
+        if (line.trim() === '') return '';
+        return baseIndent + '    ' + line.trim();
+      }).join('\n');
+      htmlContent = htmlContent.replace('</body>', `${baseIndent}<script id="${component}-script">\n${baseIndent}    // ${component.toUpperCase()} Component Script\n${normalizedJs}\n${baseIndent}</script>\n</body>`);
     } else if (scriptMode === 'separate') {
       // Create separate JS file
       const jsFileName = `${component}-component.js`;
       const jsPath = path.join(path.dirname(targetPath), jsFileName);
-      await fs.writeFile(jsPath, `// ${component.toUpperCase()} Component Script\n${componentJs}`);
+      await fs.writeFile(jsPath, `// ${component.toUpperCase()} Component Script\n\n${componentJs}`);
       // Add script tag
-      const scriptTag = `\n    <script src="${jsFileName}"></script>\n`;
-      htmlContent = htmlContent.replace('</body>', `${scriptTag}</body>`);
+      htmlContent = htmlContent.replace('</body>', `${baseIndent}<script src="${jsFileName}" id="${component}-script"></script>\n</body>`);
     }
   } catch (error) {
     // No JavaScript file for this component, skip

package/templates/card/index.html CHANGED Viewed

@@ -9,44 +9,134 @@
 <body>
     <div class="container">
         <h1>Card Components</h1>
+        <p class="subtitle">Explore different card variations and designs</p>
         <div class="cards-grid">
-            <!-- Card 1 -->
+            <!-- Card 1 - Basic -->
             <div class="card">
-                <img src="https://via.placeholder.com/300x200" alt="Card Image" class="card-img">
+                <div class="card-header">
+                    <img src="https://via.placeholder.com/300x200/667eea" alt="Card Image" class="card-img">
+                    <span class="card-badge">Featured</span>
+                </div>
                 <div class="card-body">
-                    <h2 class="card-title">Card Title</h2>
+                    <div class="card-category">Technology</div>
+                    <h2 class="card-title">Modern Card Design</h2>
                     <p class="card-text">
-                        This is a card description. Here you can add more information about the content.
+                        This is a beautifully designed card with rich information and interactive elements.
                     </p>
-                    <button class="card-btn">Read More</button>
+                    <div class="card-meta">
+                        <span class="meta-item">⭐ 4.5</span>
+                        <span class="meta-item">📅 Jan 29, 2026</span>
+                    </div>
+                    <button class="card-btn">Learn More</button>
                 </div>
             </div>
-            <!-- Card 2 -->
-            <div class="card">
-                <img src="https://via.placeholder.com/300x200/667eea" alt="Card Image" class="card-img">
+            <!-- Card 2 - With Price -->
+            <div class="card card-premium">
+                <div class="card-header">
+                    <img src="https://via.placeholder.com/300x200/764ba2" alt="Premium Card" class="card-img">
+                    <span class="card-badge premium">Popular</span>
+                </div>
                 <div class="card-body">
-                    <h2 class="card-title">Styled Card</h2>
+                    <div class="card-category">Services</div>
+                    <h2 class="card-title">Premium Package</h2>
+                    <div class="card-price">$29.99/mo</div>
                     <p class="card-text">
-                        Clean and modern design with shadows and animations.
+                        Get exclusive access to premium features and priority support.
                     </p>
-                    <button class="card-btn">Learn More</button>
+                    <div class="card-features">
+                        <span class="feature">✓ Advanced Tools</span>
+                        <span class="feature">✓ Priority Support</span>
+                        <span class="feature">✓ Analytics</span>
+                    </div>
+                    <button class="card-btn btn-premium">Subscribe Now</button>
                 </div>
             </div>
-            <!-- Card 3 -->
+            <!-- Card 3 - With Tags -->
             <div class="card">
-                <img src="https://via.placeholder.com/300x200/764ba2" alt="Card Image" class="card-img">
+                <div class="card-header">
+                    <img src="https://via.placeholder.com/300x200/43e97b" alt="Blog Card" class="card-img">
+                    <span class="card-badge secondary">New</span>
+                </div>
+                <div class="card-body">
+                    <div class="card-category">Blog</div>
+                    <h2 class="card-title">Latest Updates</h2>
+                    <p class="card-text">
+                        Discover the newest features and improvements in our latest release.
+                    </p>
+                    <div class="card-tags">
+                        <span class="tag">CSS</span>
+                        <span class="tag">Design</span>
+                        <span class="tag">UI</span>
+                    </div>
+                    <div class="card-meta">
+                        <span class="meta-item">👤 By Admin</span>
+                        <span class="meta-item">💬 12 Comments</span>
+                    </div>
+                    <button class="card-btn">Read Article</button>
+                </div>
+            </div>
+            <!-- Card 4 - Minimal -->
+            <div class="card card-minimal">
+                <div class="card-header">
+                    <img src="https://via.placeholder.com/300x200/fa709a" alt="Minimal Card" class="card-img">
+                </div>
+                <div class="card-body">
+                    <h2 class="card-title">Clean & Simple</h2>
+                    <p class="card-text">
+                        A minimalist approach to card design focusing on essential information.
+                    </p>
+                    <button class="card-btn">Explore</button>
+                </div>
+            </div>
+            <!-- Card 5 - With Avatar -->
+            <div class="card card-user">
+                <div class="card-header">
+                    <img src="https://via.placeholder.com/300x200/feca57" alt="User Card" class="card-img">
+                </div>
                 <div class="card-body">
-                    <h2 class="card-title">Third Card</h2>
+                    <div class="card-avatar">👨‍💼</div>
+                    <h2 class="card-title">John Developer</h2>
+                    <p class="card-subtitle">Full Stack Developer</p>
                     <p class="card-text">
-                        More interesting content displayed in an attractive and pleasant way.
+                        Passionate about creating beautiful and functional web experiences.
                     </p>
-                    <button class="card-btn">Get Started</button>
+                    <div class="card-social">
+                        <a href="#" class="social-btn">GitHub</a>
+                        <a href="#" class="social-btn">Twitter</a>
+                        <a href="#" class="social-btn">LinkedIn</a>
+                    </div>
+                </div>
+            </div>
+            <!-- Card 6 - Interactive -->
+            <div class="card card-interactive">
+                <div class="card-header">
+                    <img src="https://via.placeholder.com/300x200/48dbfb" alt="Interactive Card" class="card-img">
+                    <span class="card-badge interactive">Hot</span>
+                </div>
+                <div class="card-body">
+                    <div class="card-category">Trending</div>
+                    <h2 class="card-title">Interactive Components</h2>
+                    <p class="card-text">
+                        Engage your users with interactive and dynamic card elements.
+                    </p>
+                    <div class="card-actions">
+                        <button class="action-btn" data-action="like">❤️ Like</button>
+                        <button class="action-btn" data-action="share">🔗 Share</button>
+                        <button class="action-btn" data-action="save">⭐ Save</button>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
+    <script src="script.js"></script>
+</body>
+</html>
 </body>
 </html>

package/templates/card/script.js CHANGED Viewed

@@ -1,9 +1,122 @@
-// Card interactions
-document.querySelectorAll('.card-btn').forEach(button => {
-    button.addEventListener('click', function() {
-        const card = this.closest('.card');
-        const title = card.querySelector('.card-title').textContent;
-        console.log(`Card clicked: ${title}`);
-        alert(`Clicked on: ${title}`);
+document.addEventListener('DOMContentLoaded', function() {
+    // Action buttons functionality
+    const actionBtns = document.querySelectorAll('.action-btn');
+    actionBtns.forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            const action = this.getAttribute('data-action');
+            const card = this.closest('.card');
+            if (action === 'like') {
+                this.classList.toggle('liked');
+                this.textContent = this.classList.contains('liked') ? '❤️ Liked' : '🤍 Like';
+            } else if (action === 'share') {
+                showNotification('Shared!');
+            } else if (action === 'save') {
+                this.classList.toggle('saved');
+                this.textContent = this.classList.contains('saved') ? '✓ Saved' : '🔖 Save';
+            }
+        });
     });
+    // Social buttons functionality
+    const socialBtns = document.querySelectorAll('.social-btn');
+    socialBtns.forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.preventDefault();
+            const platform = this.getAttribute('data-platform');
+            showNotification(`Opening ${platform}...`);
+        });
+    });
+    // Tags click functionality
+    const tags = document.querySelectorAll('.tag');
+    tags.forEach(tag => {
+        tag.style.cursor = 'pointer';
+        tag.addEventListener('click', function() {
+            showNotification(`Filtered by: ${this.textContent}`);
+        });
+    });
+    // Card click animations
+    const cards = document.querySelectorAll('.card');
+    cards.forEach(card => {
+        card.addEventListener('mousedown', function() {
+            this.style.transition = 'all 0.1s ease';
+        });
+        card.addEventListener('mouseup', function() {
+            this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
+        });
+    });
+    // Categories click
+    const categories = document.querySelectorAll('.card-category');
+    categories.forEach(cat => {
+        cat.style.cursor = 'pointer';
+        cat.addEventListener('click', function(e) {
+            e.stopPropagation();
+            showNotification(`Category: ${this.textContent}`);
+        });
+    });
+    // Notification system
+    function showNotification(message) {
+        const notification = document.createElement('div');
+        notification.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px 25px;
+            border-radius: 8px;
+            font-weight: 600;
+            z-index: 9999;
+            animation: slideInRight 0.3s ease;
+            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+        `;
+        notification.textContent = message;
+        document.body.appendChild(notification);
+        setTimeout(() => {
+            notification.style.animation = 'slideOutRight 0.3s ease';
+            setTimeout(() => notification.remove(), 300);
+        }, 2000);
+    }
+    // Add animation styles
+    if (!document.getElementById('card-animations')) {
+        const style = document.createElement('style');
+        style.id = 'card-animations';
+        style.textContent = `
+            @keyframes slideInRight {
+                from {
+                    opacity: 0;
+                    transform: translateX(100px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateX(0);
+                }
+            }
+            @keyframes slideOutRight {
+                from {
+                    opacity: 1;
+                    transform: translateX(0);
+                }
+                to {
+                    opacity: 0;
+                    transform: translateX(100px);
+                }
+            }
+            .action-btn.liked, .action-btn.saved {
+                border-color: #667eea;
+                background: rgba(102, 126, 234, 0.1);
+                color: #667eea;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    console.log('✨ Card interactions loaded successfully!');
 });

package/templates/card/style.css CHANGED Viewed

@@ -6,9 +6,9 @@
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     min-height: 100vh;
-    padding: 40px 20px;
+    padding: 60px 20px;
 }
 .container {
@@ -18,58 +18,198 @@ body {
 h1 {
     text-align: center;
-    color: #333;
-    margin-bottom: 40px;
+    color: white;
+    margin-bottom: 10px;
     font-size: 2.5rem;
+    font-weight: 700;
+}
+.subtitle {
+    text-align: center;
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: 50px;
+    font-size: 1.1rem;
 }
 .cards-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 30px;
 }
+/* Card Base */
 .card {
     background: white;
-    border-radius: 15px;
+    border-radius: 16px;
     overflow: hidden;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
+    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
 }
 .card:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+    transform: translateY(-8px);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
+}
+.card-header {
+    position: relative;
+    overflow: hidden;
+    height: 200px;
 }
 .card-img {
     width: 100%;
-    height: 200px;
+    height: 100%;
     object-fit: cover;
-    transition: transform 0.3s ease;
+    transition: transform 0.4s ease;
 }
 .card:hover .card-img {
-    transform: scale(1.1);
+    transform: scale(1.08);
+}
+/* Badges */
+.card-badge {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: #667eea;
+    color: white;
+    padding: 6px 14px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    z-index: 10;
+    animation: slideIn 0.4s ease;
+}
+.card-badge.premium {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+.card-badge.secondary {
+    background: #43e97b;
+}
+.card-badge.interactive {
+    background: #fa709a;
+    animation: pulse 2s infinite;
+}
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
 }
 .card-body {
     padding: 25px;
 }
+.card-category {
+    display: inline-block;
+    color: #667eea;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 10px;
+}
 .card-title {
     color: #333;
-    font-size: 1.5rem;
+    font-size: 1.6rem;
+    margin-bottom: 12px;
+    font-weight: 600;
+    line-height: 1.3;
+}
+.card-subtitle {
+    color: #666;
+    font-size: 0.95rem;
     margin-bottom: 15px;
+    font-weight: 500;
 }
 .card-text {
     color: #666;
-    line-height: 1.6;
+    line-height: 1.7;
     margin-bottom: 20px;
+    font-size: 0.95rem;
+}
+.card-price {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #667eea;
+    margin-bottom: 15px;
+}
+/* Features List */
+.card-features {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 20px;
+}
+.feature {
+    color: #555;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
+/* Tags */
+.card-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 15px;
+}
+.tag {
+    display: inline-block;
+    background: #f0f0f0;
+    color: #667eea;
+    padding: 5px 12px;
+    border-radius: 16px;
+    font-size: 0.85rem;
+    font-weight: 500;
+}
+/* Meta Information */
+.card-meta {
+    display: flex;
+    gap: 15px;
+    margin-bottom: 20px;
+    font-size: 0.9rem;
+    color: #999;
+}
+.meta-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+/* Button */
 .card-btn {
+    width: 100%;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     border: none;
@@ -80,18 +220,143 @@ h1 {
     cursor: pointer;
     transition: all 0.3s ease;
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: 0.5px;
+    position: relative;
+    overflow: hidden;
+}
+.card-btn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.3);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+}
+.card-btn:hover::before {
+    width: 300px;
+    height: 300px;
 }
 .card-btn:hover {
     transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
 }
 .card-btn:active {
     transform: translateY(0);
 }
+.btn-premium {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+.btn-premium:hover {
+    box-shadow: 0 8px 20px rgba(245, 87, 108, 0.4);
+}
+/* Card Variations */
+.card-premium {
+    border-top: 3px solid #f5576c;
+}
+.card-minimal .card-body {
+    padding: 20px;
+}
+.card-minimal .card-title {
+    font-size: 1.4rem;
+}
+.card-minimal .card-text {
+    margin-bottom: 15px;
+}
+/* User Card */
+.card-user .card-body {
+    text-align: center;
+    padding: 30px 25px;
+}
+.card-avatar {
+    font-size: 3rem;
+    margin-bottom: 15px;
+}
+.card-user .card-title {
+    margin-bottom: 5px;
+}
+.card-user .card-subtitle {
+    margin-bottom: 15px;
+}
+.card-social {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+    justify-content: center;
+}
+.social-btn {
+    display: inline-block;
+    padding: 8px 16px;
+    background: #f0f0f0;
+    color: #667eea;
+    text-decoration: none;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+.social-btn:hover {
+    background: #667eea;
+    color: white;
+    transform: translateY(-2px);
+}
+/* Interactive Card */
+.card-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+}
+.action-btn {
+    flex: 1;
+    padding: 10px 12px;
+    background: #f5f5f5;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+.action-btn:hover {
+    border-color: #667eea;
+    background: #f9f9f9;
+    color: #667eea;
+    transform: translateY(-2px);
+}
+.action-btn:active {
+    transform: translateY(0);
+}
+/* Responsive */
 @media (max-width: 768px) {
     .cards-grid {
         grid-template-columns: 1fr;
@@ -100,4 +365,15 @@ h1 {
     h1 {
         font-size: 2rem;
     }
+    .card-title {
+        font-size: 1.4rem;
+    }
+    .subtitle {
+        font-size: 1rem;
+    }
+}
+        font-size: 2rem;
+    }
 }

package/test-insert.html ADDED Viewed

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Test Page</title>
+    <link rel="stylesheet" href="button-component.css">
+</head>
+<body>
+    <h1>Welcome</h1>
+    <p>Test content</p>
+    <!-- BUTTON Component -->
+    <div class="container">
+    <h1>Button Component</h1>
+    <!-- Primary Button -->
+    <button class="btn btn-primary">Click Here</button>
+    <!-- Secondary Button -->
+    <button class="btn btn-secondary">Secondary</button>
+    <!-- Success Button -->
+    <button class="btn btn-success">Success</button>
+    <!-- Danger Button -->
+    <button class="btn btn-danger">Delete</button>
+    <!-- Outlined Button -->
+    <button class="btn btn-outlined">Outlined</button>
+    <!-- Disabled Button -->
+    <button class="btn btn-primary" disabled>Disabled</button>
+    </div>
+    <script id="button-script">
+        // BUTTON Component Script
+        // Button click animations
+        document.querySelectorAll('.btn').forEach(button => {
+        button.addEventListener('click', function(e) {
+        if (!this.disabled) {
+        console.log('Button clicked:', this.textContent);
+        // Ripple effect
+        const ripple = document.createElement('span');
+        ripple.classList.add('ripple');
+        this.appendChild(ripple);
+        setTimeout(() => ripple.remove(), 600);
+        }
+        });
+        });
+    </script>
+</body>
+</html>