create-template-html-css 1.4.2 → 1.5.0

package/CHANGELOG.md

@@ -5,6 +5,29 @@ 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.5.0] - 2026-01-31
+
+### Added
+- **4 New DOM Manipulation Templates**:
+  - **Todo List**: Interactive task management with add/remove items, checkboxes for completion status, and real-time statistics
+  - **Counter**: Increment/decrement counter with adjustable step sizes, color-changing display, and change history
+  - **Accordion**: Collapsible FAQ-style sections with smooth animations and toggle functionality
+  - **Tabs**: Multi-section content switcher with keyboard navigation (arrow keys) and fade-in animations
+- All new templates include automatic `<script src="script.js"></script>` tag in generated HTML
+- Enhanced component selection in CLI with new DOM Manipulation Examples category
+
+### Improved
+- JavaScript file is now always automatically included when creating templates (no confirmation prompt)
+- Better template organization in CLI with category separators
+- Updated component list command to show all 23 available templates
+
+## [1.4.3] - 2025-01-29
+
+### Documentation
+- Enhanced README with detailed card template variations
+- Added comprehensive card features and interactions documentation
+- Improved visual presentation of template capabilities
+
 ## [1.4.2] - 2025-01-29
 
 ### Enhanced

package/README.md

@@ -26,10 +26,11 @@ 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
-- 📦 **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
+- 📦 **23 Templates** - Button, Card, Form, Navigation, Modal, Footer, Hero, Slider, Table, Spinner, Animated Cards, Typing Effect, Fade Gallery, Grid Layouts, Masonry Grid, Dashboard, Flexbox Layouts, Todo List, Counter, Accordion, Tabs
 - 🎯 **Two Modes** - Create new projects or insert into existing HTML pages
 - 🔒 **Secure** - Input validation and path protection
 - 📚 **Well Documented** - Comprehensive guides and examples
+- 🎪 **DOM Manipulation Examples** - Interactive components demonstrating JavaScript DOM manipulation techniques
 
 ## 📦 Installation
 
@@ -161,21 +162,27 @@ A collection of styled button components with multiple variations:
 - Beautiful gradients
 - Click animations
 
-### 2. Card
+### 2. Card ✨
 
-Responsive card component for displaying content:
+Responsive card component with 6 professional variations:
 
-**Includes:**
-- Image container
-- Title and description
-- Action button
-- Metadata section
+**Variations:**
+- **Modern Card** - Featured item with badge, category, rating, and date metadata
+- **Premium Card** - Pricing card with feature list and gradient styling
+- **Blog Card** - Content card with tags, author info, and comment counts
+- **Minimal Card** - Clean, simplified design for minimal content
+- **User Profile Card** - Avatar-based card with social media links
+- **Interactive Card** - Action buttons for like, share, and save functionality
 
 **Features:**
+- Rich metadata displays (ratings, dates, comments, authors)
+- Animated action buttons with state management
+- Tag-based filtering system
+- Toast notifications
+- Professional gradients and animations
 - Hover image zoom effect
 - Advanced shadow effects
-- Responsive grid layout
-- Flexible content
+- Fully responsive grid layout
 
 ### 3. Form
 
@@ -609,9 +616,9 @@ The only requirement is to include a copy of the license and copyright notice.
 
 ## 👨‍💻 Author
 
-**Ben Shabbat**
+**DavidChen Benshabbat**
 - GitHub: [@benshabbat](https://github.com/benshabbat)
-- Email: benshabbat@example.com
+- Email: benshabbat27@gmail.com
 
 ## 🔗 Links
 
@@ -635,6 +642,6 @@ If you find this project helpful, please consider:
 
 ---
 
-Made with ❤️ by Ben Shabbat
+Made with ❤️ by  DavidChen Benshabbat
 
 **Happy coding! 🚀**

package/bin/cli.js

@@ -11,7 +11,7 @@ const chalk = require('chalk');
 program
   .name('create-template')
   .description(chalk.cyan('🎨 Create HTML/CSS UI component templates in seconds'))
-  .version('1.4.0');
+  .version('1.5.0');
 
 // Add intro message
 program.on('--help', () => {
@@ -57,7 +57,12 @@ program
             new inquirer.Separator(chalk.gray('─ Flexbox Layouts')),
             { name: 'Flex Layout (Flexbox Patterns)', value: 'flex-layout' },
             { name: 'Flex Cards (Equal-height cards)', value: 'flex-cards' },
-            { name: 'Flex Dashboard (Flexbox Admin)', value: 'flex-dashboard' }
+            { name: 'Flex Dashboard (Flexbox Admin)', value: 'flex-dashboard' },
+            new inquirer.Separator(chalk.gray('─ DOM Manipulation Examples')),
+            { name: 'Todo List (Add/Remove Items)', value: 'todo-list' },
+            { name: 'Counter (Click Handlers)', value: 'counter' },
+            { name: 'Accordion (Toggle Content)', value: 'accordion' },
+            { name: 'Tabs (Switch Sections)', value: 'tabs' }
           ]
         },
         {
@@ -78,14 +83,11 @@ program
             return true;
           }
         },
-        {
-          type: 'confirm',
-          name: 'includeJs',
-          message: 'Include JavaScript file?',
-          default: true
-        }
       ]);
 
+      // Always include JavaScript file
+      answers.includeJs = true;
+
       await generateTemplate(answers);
       
       console.log('\n' + chalk.green('✓ Template created successfully!'));
@@ -155,7 +157,12 @@ program
             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' }
+            { name: 'Flex Dashboard', value: 'flex-dashboard' },
+            new inquirer.Separator(chalk.gray('─ DOM Manipulation')),
+            { name: 'Todo List', value: 'todo-list' },
+            { name: 'Counter', value: 'counter' },
+            { name: 'Accordion', value: 'accordion' },
+            { name: 'Tabs', value: 'tabs' }
           ]
         },
         {
@@ -194,7 +201,7 @@ program
   .command('list')
   .description(chalk.green('List all available templates'))
   .action(() => {
-    console.log('\n' + chalk.blue('📦 Available Components (19 total)\n'));
+    console.log('\n' + chalk.blue('📦 Available Components (23 total)\n'));
     
     console.log(chalk.yellow('━ Basic Components (9)'));
     console.log('  button          Styled button component');
@@ -223,6 +230,12 @@ program
     console.log('  flex-cards      Equal-height card layouts');
     console.log('  flex-dashboard  Complete admin dashboard (Flexbox)');
     
+    console.log('\n' + chalk.red('━ DOM Manipulation Examples (4)'));
+    console.log('  todo-list       Interactive todo list with add/remove');
+    console.log('  counter         Click counter with history tracking');
+    console.log('  accordion       Collapsible accordion component');
+    console.log('  tabs            Tabbed content switcher');
+    
     console.log('\n' + chalk.gray('Usage:'));
     console.log('  create-template create              Create a new component');
     console.log('  create-template insert              Insert into HTML file');

package/package.json

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

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', 'flex-layout', 'flex-cards', 'flex-dashboard'];
+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', 'todo-list', 'counter', 'accordion', 'tabs'];
 
 // Security: Sanitize filename to prevent path traversal
 function sanitizeFilename(filename) {
@@ -40,8 +40,18 @@ async function generateTemplate(options) {
   const templateDir = path.join(__dirname, '..', 'templates', component);
   
   // Copy HTML file
-  const htmlContent = await fs.readFile(path.join(templateDir, 'index.html'), 'utf-8');
-  await fs.writeFile(path.join(outputDir, 'index.html'), htmlContent.replace(/{{name}}/g, safeName));
+  let htmlContent = await fs.readFile(path.join(templateDir, 'index.html'), 'utf-8');
+  
+  // Replace placeholder name
+  htmlContent = htmlContent.replace(/{{name}}/g, safeName);
+  
+  // Add script tag if JavaScript is included
+  if (includeJs) {
+    // Insert script tag before closing </body> tag
+    htmlContent = htmlContent.replace('</body>', '    <script src="script.js"></script>\n</body>');
+  }
+  
+  await fs.writeFile(path.join(outputDir, 'index.html'), htmlContent);
 
   // Copy CSS file
   const cssContent = await fs.readFile(path.join(templateDir, 'style.css'), 'utf-8');

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', 'flex-layout', 'flex-cards', 'flex-dashboard'];
+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', 'todo-list', 'counter', 'accordion', 'tabs'];
 
 /**
  * Extracts indentation from a line

package/templates/accordion/index.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - Accordion Component</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="accordion-wrapper">
+            <h1>Frequently Asked Questions</h1>
+            
+            <div class="accordion">
+                <div class="accordion-item">
+                    <button class="accordion-header">
+                        <span>What is this accordion component?</span>
+                        <span class="icon">+</span>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="accordion-body">
+                            This is a fully functional accordion component that uses DOM manipulation to toggle content visibility. Click on any header to expand or collapse the content.
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="accordion-item">
+                    <button class="accordion-header">
+                        <span>How does it work?</span>
+                        <span class="icon">+</span>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="accordion-body">
+                            The accordion uses JavaScript to toggle classes on DOM elements. When you click a header, it adds or removes the 'active' class to expand or collapse the content section.
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="accordion-item">
+                    <button class="accordion-header">
+                        <span>Can I customize the content?</span>
+                        <span class="icon">+</span>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="accordion-body">
+                            Absolutely! You can easily modify the HTML to add your own questions and answers. The styling and functionality will work with any content you add.
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="accordion-item">
+                    <button class="accordion-header">
+                        <span>Is it mobile responsive?</span>
+                        <span class="icon">+</span>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="accordion-body">
+                            Yes! This accordion is fully responsive and works great on all screen sizes - desktop, tablet, and mobile devices.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

package/templates/accordion/script.js

@@ -0,0 +1,29 @@
+// Accordion Component
+
+const accordionHeaders = document.querySelectorAll('.accordion-header');
+
+// Toggle accordion
+function toggleAccordion(e) {
+    const header = e.currentTarget;
+    const item = header.parentElement;
+    
+    // Close all other items
+    document.querySelectorAll('.accordion-item').forEach(accordionItem => {
+        if (accordionItem !== item) {
+            accordionItem.classList.remove('active');
+        }
+    });
+    
+    // Toggle current item
+    item.classList.toggle('active');
+}
+
+// Add event listeners
+accordionHeaders.forEach(header => {
+    header.addEventListener('click', toggleAccordion);
+});
+
+// Optional: Open first item by default
+if (accordionHeaders.length > 0) {
+    accordionHeaders[0].parentElement.classList.add('active');
+}

package/templates/accordion/style.css

@@ -0,0 +1,133 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.container {
+    width: 100%;
+    max-width: 600px;
+}
+
+.accordion-wrapper {
+    background: white;
+    border-radius: 12px;
+    padding: 40px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.accordion-wrapper h1 {
+    color: #333;
+    margin-bottom: 30px;
+    text-align: center;
+    font-size: 28px;
+}
+
+.accordion {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.accordion-item {
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    overflow: hidden;
+    transition: all 0.3s;
+}
+
+.accordion-item.active {
+    border-color: #667eea;
+    background: #f8f9ff;
+}
+
+.accordion-header {
+    width: 100%;
+    padding: 20px;
+    background: white;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    transition: all 0.3s;
+}
+
+.accordion-item.active .accordion-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.accordion-header:hover {
+    background: #f5f5f5;
+}
+
+.accordion-item.active .accordion-header:hover {
+    background: linear-gradient(135deg, #5568d3 0%, #6a3f99 100%);
+}
+
+.accordion-header .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    font-size: 18px;
+    font-weight: bold;
+    transition: transform 0.3s;
+}
+
+.accordion-item.active .accordion-header .icon {
+    transform: rotate(45deg);
+}
+
+.accordion-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+}
+
+.accordion-item.active .accordion-content {
+    max-height: 500px;
+}
+
+.accordion-body {
+    padding: 20px;
+    color: #666;
+    line-height: 1.6;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+    .accordion-wrapper {
+        padding: 20px;
+    }
+    
+    .accordion-wrapper h1 {
+        font-size: 22px;
+        margin-bottom: 20px;
+    }
+    
+    .accordion-header {
+        padding: 15px;
+        font-size: 14px;
+    }
+    
+    .accordion-body {
+        padding: 15px;
+        font-size: 14px;
+    }
+}

package/templates/counter/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - Counter App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="counter-card">
+            <h1>Counter</h1>
+            
+            <div class="counter-display">
+                <span id="counterValue">0</span>
+            </div>
+            
+            <div class="button-group">
+                <button id="decrementBtn" class="btn btn-danger">−</button>
+                <button id="resetBtn" class="btn btn-secondary">Reset</button>
+                <button id="incrementBtn" class="btn btn-success">+</button>
+            </div>
+            
+            <div class="stats">
+                <div class="stat-item">
+                    <label>Step Size:</label>
+                    <select id="stepSize" class="step-select">
+                        <option value="1">1</option>
+                        <option value="5">5</option>
+                        <option value="10">10</option>
+                        <option value="100">100</option>
+                    </select>
+                </div>
+            </div>
+            
+            <div class="history">
+                <h3>History</h3>
+                <div id="historyList" class="history-list">
+                    <p class="empty">No changes yet</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

package/templates/counter/script.js

@@ -0,0 +1,88 @@
+// Counter Application with History
+
+let counter = 0;
+const counterValue = document.getElementById('counterValue');
+const incrementBtn = document.getElementById('incrementBtn');
+const decrementBtn = document.getElementById('decrementBtn');
+const resetBtn = document.getElementById('resetBtn');
+const stepSelect = document.getElementById('stepSize');
+const historyList = document.getElementById('historyList');
+
+// Get step size
+function getStepSize() {
+    return parseInt(stepSelect.value);
+}
+
+// Update display
+function updateDisplay() {
+    counterValue.textContent = counter;
+    
+    // Change color based on value
+    const display = counterValue.parentElement;
+    if (counter > 0) {
+        display.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
+    } else if (counter < 0) {
+        display.style.background = 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)';
+    } else {
+        display.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+    }
+}
+
+// Add to history
+function addToHistory(action, value) {
+    const now = new Date().toLocaleTimeString();
+    const item = document.createElement('div');
+    item.className = 'history-item';
+    item.textContent = `${now} - ${action} (${value > 0 ? '+' : ''}${value})`;
+    
+    // Remove empty message if exists
+    if (historyList.querySelector('.empty')) {
+        historyList.innerHTML = '';
+    }
+    
+    historyList.insertBefore(item, historyList.firstChild);
+    
+    // Keep only last 10 items
+    while (historyList.children.length > 10) {
+        historyList.removeChild(historyList.lastChild);
+    }
+}
+
+// Increment
+function increment() {
+    const step = getStepSize();
+    counter += step;
+    updateDisplay();
+    addToHistory('Increment', step);
+}
+
+// Decrement
+function decrement() {
+    const step = getStepSize();
+    counter -= step;
+    updateDisplay();
+    addToHistory('Decrement', -step);
+}
+
+// Reset
+function reset() {
+    const oldValue = counter;
+    counter = 0;
+    updateDisplay();
+    addToHistory('Reset', -oldValue);
+}
+
+// Event listeners
+incrementBtn.addEventListener('click', increment);
+decrementBtn.addEventListener('click', decrement);
+resetBtn.addEventListener('click', reset);
+
+// Keyboard support
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowUp' || e.key === '+') increment();
+    if (e.key === 'ArrowDown' || e.key === '-') decrement();
+    if (e.key === '0' || e.key === 'r') reset();
+});
+
+// Initialize
+updateDisplay();

package/templates/counter/style.css

@@ -0,0 +1,164 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.container {
+    width: 100%;
+    max-width: 400px;
+}
+
+.counter-card {
+    background: white;
+    border-radius: 16px;
+    padding: 40px 30px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.counter-card h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 30px;
+    font-size: 28px;
+}
+
+.counter-display {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 12px;
+    padding: 40px;
+    text-align: center;
+    margin-bottom: 30px;
+    font-size: 64px;
+    font-weight: bold;
+    min-height: 140px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+}
+
+.button-group {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 25px;
+}
+
+.btn {
+    flex: 1;
+    padding: 15px;
+    border: none;
+    border-radius: 8px;
+    font-size: 18px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.btn-success {
+    background: #10b981;
+    color: white;
+}
+
+.btn-success:hover {
+    background: #059669;
+    transform: translateY(-2px);
+}
+
+.btn-danger {
+    background: #ef4444;
+    color: white;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+    transform: translateY(-2px);
+}
+
+.btn-secondary {
+    background: #6b7280;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: #4b5563;
+    transform: translateY(-2px);
+}
+
+.stats {
+    background: #f3f4f6;
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 20px;
+}
+
+.stat-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.stat-item label {
+    color: #666;
+    font-weight: 600;
+}
+
+.step-select {
+    padding: 8px 12px;
+    border: 2px solid #e5e7eb;
+    border-radius: 6px;
+    font-size: 14px;
+    cursor: pointer;
+    background: white;
+}
+
+.step-select:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+.history {
+    border-top: 2px solid #e5e7eb;
+    padding-top: 20px;
+}
+
+.history h3 {
+    color: #333;
+    margin-bottom: 12px;
+    font-size: 14px;
+    text-transform: uppercase;
+}
+
+.history-list {
+    max-height: 120px;
+    overflow-y: auto;
+}
+
+.history-item {
+    padding: 8px;
+    background: #f9fafb;
+    border-radius: 6px;
+    font-size: 13px;
+    color: #666;
+    margin-bottom: 8px;
+    border-left: 3px solid #667eea;
+    padding-left: 12px;
+}
+
+.empty {
+    text-align: center;
+    color: #999;
+    font-size: 13px;
+    padding: 15px;
+}

package/templates/tabs/index.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - Tabs Component</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="tabs-wrapper">
+            <h1>Tabbed Content</h1>
+            
+            <div class="tabs">
+                <div class="tab-buttons">
+                    <button class="tab-button active" data-tab="tab1">
+                        <span class="icon">📋</span> Overview
+                    </button>
+                    <button class="tab-button" data-tab="tab2">
+                        <span class="icon">⚙️</span> Features
+                    </button>
+                    <button class="tab-button" data-tab="tab3">
+                        <span class="icon">💬</span> Reviews
+                    </button>
+                    <button class="tab-button" data-tab="tab4">
+                        <span class="icon">ℹ️</span> About
+                    </button>
+                </div>
+                
+                <div class="tab-contents">
+                    <div class="tab-content active" id="tab1">
+                        <h2>Overview</h2>
+                        <p>This is a fully functional tabs component that uses DOM manipulation to switch between different content sections. Click on the tab buttons above to switch content.</p>
+                        <ul>
+                            <li>Easy to implement</li>
+                            <li>Responsive design</li>
+                            <li>Smooth transitions</li>
+                            <li>Clean and modern styling</li>
+                        </ul>
+                    </div>
+                    
+                    <div class="tab-content" id="tab2">
+                        <h2>Features</h2>
+                        <p>Our tabs component comes with many great features:</p>
+                        <ul>
+                            <li>🎨 Customizable colors and styles</li>
+                            <li>📱 Mobile responsive layout</li>
+                            <li>⌨️ Keyboard navigation support</li>
+                            <li>♿ Accessible to screen readers</li>
+                            <li>⚡ Fast and smooth animations</li>
+                            <li>🔧 Easy to customize and extend</li>
+                        </ul>
+                    </div>
+                    
+                    <div class="tab-content" id="tab3">
+                        <h2>Reviews</h2>
+                        <div class="review">
+                            <p><strong>⭐⭐⭐⭐⭐</strong> Perfect component!</p>
+                            <p>"This tabs component is exactly what I needed for my project. Easy to use and looks great!"</p>
+                        </div>
+                        <div class="review">
+                            <p><strong>⭐⭐⭐⭐⭐</strong> Highly recommended</p>
+                            <p>"Great functionality and clean code. Highly recommend to anyone building web applications."</p>
+                        </div>
+                    </div>
+                    
+                    <div class="tab-content" id="tab4">
+                        <h2>About</h2>
+                        <p>This tabs component was created to demonstrate DOM manipulation techniques in JavaScript. It shows how to:</p>
+                        <ul>
+                            <li>Select DOM elements</li>
+                            <li>Add/remove CSS classes</li>
+                            <li>Handle events dynamically</li>
+                            <li>Create interactive user interfaces</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

package/templates/tabs/script.js

@@ -0,0 +1,46 @@
+// Tabs Component
+
+const tabButtons = document.querySelectorAll('.tab-button');
+const tabContents = document.querySelectorAll('.tab-content');
+
+// Switch tab
+function switchTab(e) {
+    const button = e.currentTarget;
+    const tabId = button.getAttribute('data-tab');
+    
+    // Remove active class from all buttons
+    tabButtons.forEach(btn => btn.classList.remove('active'));
+    
+    // Add active class to clicked button
+    button.classList.add('active');
+    
+    // Hide all content
+    tabContents.forEach(content => content.classList.remove('active'));
+    
+    // Show selected content
+    const selectedContent = document.getElementById(tabId);
+    if (selectedContent) {
+        selectedContent.classList.add('active');
+    }
+}
+
+// Add event listeners
+tabButtons.forEach(button => {
+    button.addEventListener('click', switchTab);
+});
+
+// Keyboard navigation
+document.addEventListener('keydown', (e) => {
+    const activeButton = document.querySelector('.tab-button.active');
+    const activeIndex = Array.from(tabButtons).indexOf(activeButton);
+    
+    if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        const nextIndex = (activeIndex + 1) % tabButtons.length;
+        tabButtons[nextIndex].click();
+    } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        const prevIndex = (activeIndex - 1 + tabButtons.length) % tabButtons.length;
+        tabButtons[prevIndex].click();
+    }
+});

package/templates/tabs/style.css

@@ -0,0 +1,173 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.container {
+    width: 100%;
+    max-width: 700px;
+}
+
+.tabs-wrapper {
+    background: white;
+    border-radius: 12px;
+    padding: 40px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.tabs-wrapper h1 {
+    color: #333;
+    margin-bottom: 30px;
+    text-align: center;
+    font-size: 28px;
+}
+
+.tab-buttons {
+    display: flex;
+    gap: 8px;
+    border-bottom: 2px solid #e0e0e0;
+    margin-bottom: 30px;
+    flex-wrap: wrap;
+}
+
+.tab-button {
+    padding: 15px 20px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #666;
+    font-size: 14px;
+    font-weight: 600;
+    white-space: nowrap;
+    position: relative;
+    transition: all 0.3s;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.tab-button:hover {
+    color: #333;
+}
+
+.tab-button.active {
+    color: #667eea;
+}
+
+.tab-button.active::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.tab-button .icon {
+    font-size: 18px;
+}
+
+.tab-contents {
+    position: relative;
+}
+
+.tab-content {
+    display: none;
+    animation: fadeIn 0.3s ease-in;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.tab-content h2 {
+    color: #333;
+    margin-bottom: 15px;
+    font-size: 24px;
+}
+
+.tab-content p {
+    color: #666;
+    line-height: 1.6;
+    margin-bottom: 15px;
+}
+
+.tab-content ul {
+    list-style-position: inside;
+    color: #666;
+    line-height: 1.8;
+    margin-bottom: 15px;
+}
+
+.tab-content ul li {
+    margin-bottom: 8px;
+}
+
+.review {
+    background: #f8f9fa;
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    border-left: 4px solid #667eea;
+}
+
+.review p {
+    margin-bottom: 8px;
+}
+
+.review p:first-child {
+    font-weight: 600;
+    color: #333;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+    .tabs-wrapper {
+        padding: 20px;
+    }
+    
+    .tab-buttons {
+        gap: 4px;
+    }
+    
+    .tab-button {
+        padding: 12px 14px;
+        font-size: 12px;
+    }
+    
+    .tab-button .icon {
+        font-size: 16px;
+    }
+    
+    .tabs-wrapper h1 {
+        font-size: 22px;
+        margin-bottom: 20px;
+    }
+    
+    .tab-content h2 {
+        font-size: 18px;
+    }
+}

package/templates/todo-list/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - Todo List</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="todo-app">
+            <h1>My Tasks</h1>
+            
+            <div class="input-container">
+                <input 
+                    type="text" 
+                    id="todoInput" 
+                    class="todo-input" 
+                    placeholder="Add a new task..."
+                >
+                <button id="addBtn" class="add-btn">Add Task</button>
+            </div>
+            
+            <ul id="todoList" class="todo-list">
+                <li class="todo-item">
+                    <input type="checkbox" class="todo-checkbox">
+                    <span class="todo-text">Sample task 1</span>
+                    <button class="delete-btn">✕</button>
+                </li>
+                <li class="todo-item">
+                    <input type="checkbox" class="todo-checkbox">
+                    <span class="todo-text">Sample task 2</span>
+                    <button class="delete-btn">✕</button>
+                </li>
+            </ul>
+            
+            <div class="stats">
+                <span>Total: <strong id="totalCount">2</strong></span>
+                <span>Completed: <strong id="completedCount">0</strong></span>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

package/templates/todo-list/script.js

@@ -0,0 +1,69 @@
+// Todo List Application
+
+const todoInput = document.getElementById('todoInput');
+const addBtn = document.getElementById('addBtn');
+const todoList = document.getElementById('todoList');
+const totalCount = document.getElementById('totalCount');
+const completedCount = document.getElementById('completedCount');
+
+// Add new task
+function addTodo() {
+    const text = todoInput.value.trim();
+    
+    if (text === '') {
+        alert('Please enter a task!');
+        return;
+    }
+    
+    // Create new todo item
+    const li = document.createElement('li');
+    li.className = 'todo-item';
+    li.innerHTML = `
+        <input type="checkbox" class="todo-checkbox">
+        <span class="todo-text">${text}</span>
+        <button class="delete-btn">✕</button>
+    `;
+    
+    todoList.appendChild(li);
+    todoInput.value = '';
+    todoInput.focus();
+    
+    updateStats();
+    attachEventListeners();
+}
+
+// Update statistics
+function updateStats() {
+    const items = document.querySelectorAll('.todo-item');
+    const completed = document.querySelectorAll('.todo-item.completed');
+    
+    totalCount.textContent = items.length;
+    completedCount.textContent = completed.length;
+}
+
+// Attach event listeners to new items
+function attachEventListeners() {
+    document.querySelectorAll('.todo-checkbox').forEach(checkbox => {
+        checkbox.onclick = (e) => {
+            e.target.closest('.todo-item').classList.toggle('completed');
+            updateStats();
+        };
+    });
+    
+    document.querySelectorAll('.delete-btn').forEach(btn => {
+        btn.onclick = (e) => {
+            e.target.closest('.todo-item').remove();
+            updateStats();
+        };
+    });
+}
+
+// Event listeners
+addBtn.addEventListener('click', addTodo);
+todoInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') addTodo();
+});
+
+// Initialize
+attachEventListeners();
+updateStats();

package/templates/todo-list/style.css

@@ -0,0 +1,138 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.container {
+    width: 100%;
+    max-width: 500px;
+}
+
+.todo-app {
+    background: white;
+    border-radius: 12px;
+    padding: 30px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.todo-app h1 {
+    color: #333;
+    margin-bottom: 25px;
+    text-align: center;
+}
+
+.input-container {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 25px;
+}
+
+.todo-input {
+    flex: 1;
+    padding: 12px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 16px;
+    transition: border-color 0.3s;
+}
+
+.todo-input:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+.add-btn {
+    padding: 12px 25px;
+    background: #667eea;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: background 0.3s;
+}
+
+.add-btn:hover {
+    background: #5568d3;
+}
+
+.todo-list {
+    list-style: none;
+    margin-bottom: 20px;
+}
+
+.todo-item {
+    display: flex;
+    align-items: center;
+    padding: 15px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    margin-bottom: 10px;
+    transition: all 0.3s;
+}
+
+.todo-item:hover {
+    background: #e9ecef;
+}
+
+.todo-item.completed .todo-text {
+    text-decoration: line-through;
+    color: #999;
+}
+
+.todo-checkbox {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    margin-right: 15px;
+}
+
+.todo-text {
+    flex: 1;
+    color: #333;
+    font-size: 16px;
+    word-break: break-word;
+}
+
+.delete-btn {
+    background: #ff6b6b;
+    color: white;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background 0.3s;
+}
+
+.delete-btn:hover {
+    background: #ff5252;
+}
+
+.stats {
+    display: flex;
+    justify-content: space-around;
+    padding-top: 20px;
+    border-top: 2px solid #e0e0e0;
+    color: #666;
+}
+
+.stats span {
+    font-size: 14px;
+}
+
+.stats strong {
+    color: #667eea;
+    font-size: 18px;
+}