create-template-html-css 2.0.4 → 2.1.0

package/templates/_shared/PATTERNS.md

@@ -0,0 +1,246 @@
+# Template Code Patterns
+
+This document catalogs common code patterns found across templates. These patterns are intentionally duplicated in each template to maintain independence.
+
+## JavaScript Patterns
+
+### DOM Selection Patterns
+
+**querySelector/querySelectorAll** - Used in 40+ templates
+```javascript
+const element = document.querySelector('.class-name');
+const elements = document.querySelectorAll('.multiple-items');
+```
+
+**getElementById** - Used in 35+ templates (especially games and interactive components)
+```javascript
+const button = document.getElementById('myButton');
+```
+
+### Event Listener Patterns
+
+**Click Handlers** - Found in all interactive templates
+```javascript
+button.addEventListener('click', handleClick);
+
+// Or inline
+button.addEventListener('click', () => {
+    // Handle click
+});
+```
+
+**Common Event Setup**
+```javascript
+// Multiple elements
+buttons.forEach(button => {
+    button.addEventListener('click', handler);
+});
+
+// Delegation pattern
+document.addEventListener('click', function(e) {
+    if (e.target.matches('.selector')) {
+        // Handle
+    }
+});
+```
+
+### Game Control Patterns
+
+Found in 12 game templates (snake, tetris, pong, etc.):
+```javascript
+let gameActive = false;
+let score = 0;
+
+function startGame() {
+    gameActive = true;
+    score = 0;
+    // Initialize game
+}
+
+function pauseGame() {
+    gameActive = false;
+    // Pause logic
+}
+
+function resetGame() {
+    gameActive = false;
+    score = 0;
+    // Reset logic
+}
+
+// Button bindings
+startBtn.addEventListener('click', startGame);
+pauseBtn.addEventListener('click', pauseGame);
+resetBtn.addEventListener('click', resetGame);
+```
+
+### Update Display Pattern
+
+Common in counters, scores, and dynamic content:
+```javascript
+function updateDisplay() {
+    element.textContent = value;
+    // Update other UI elements
+}
+```
+
+## CSS Patterns
+
+### Layout Patterns
+
+**Centered Container** (30+ templates)
+```css
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+
+.container {
+    background: white;
+    padding: 40px;
+    border-radius: 15px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+```
+
+**Grid Layout** (15+ templates)
+```css
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+}
+```
+
+**Flexbox Layout** (20+ templates)
+```css
+.flex-container {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+}
+```
+
+### Animation Patterns
+
+**Hover Transitions** (35+ templates)
+```css
+.element {
+    transition: all 0.3s ease;
+}
+
+.element:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+```
+
+**Fade Animations**
+```css
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.animated {
+    animation: fadeIn 0.5s ease-in-out;
+}
+```
+
+### Button Patterns
+
+Found in 40+ templates:
+```css
+.btn {
+    padding: 12px 24px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: all 0.3s ease;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+```
+
+## HTML Patterns
+
+### Semantic Structure
+
+**Container → Card → Content** (25+ templates)
+```html
+<div class="container">
+    <div class="card">
+        <h1>Title</h1>
+        <p>Content</p>
+    </div>
+</div>
+```
+
+**Form Structure** (form, login, register templates)
+```html
+<form class="form">
+    <h1 class="form-title">Title</h1>
+    <div class="form-group">
+        <label for="input">Label</label>
+        <input type="text" id="input" name="input">
+    </div>
+    <button type="submit">Submit</button>
+</form>
+```
+
+### Canvas for Games (10 game templates)
+```html
+<canvas id="gameCanvas" width="400" height="400"></canvas>
+<div class="game-controls">
+    <button id="startBtn">Start</button>
+    <button id="pauseBtn">Pause</button>
+    <button id="resetBtn">Reset</button>
+</div>
+```
+
+## Why These Patterns Repeat
+
+1. **Consistency**: Users recognize familiar patterns across templates
+2. **Learning**: Patterns reinforce best practices
+3. **Copy-Paste Ready**: Each template works standalone
+4. **No Dependencies**: No shared libraries to break
+
+## Best Practices for New Templates
+
+When creating new templates, follow these patterns:
+
+✅ **DO**:
+- Use semantic HTML5 elements
+- Include comprehensive comments
+- Follow existing naming conventions
+- Keep JavaScript vanilla (no frameworks)
+- Make it work without any build process
+
+❌ **DON'T**:
+- Import from other templates
+- Require external libraries (unless clearly documented)
+- Use complex build tools
+- Break the self-contained principle
+
+## Statistics
+
+- **Total Templates**: 42
+- **JavaScript Files**: 42
+- **CSS Files**: 42
+- **HTML Files**: 42
+- **Average File Size**: ~150 lines per file
+- **Common Patterns**: 15+ recurring patterns across templates
+
+---
+
+*These patterns ensure consistency while maintaining template independence.*

package/templates/_shared/README.md

@@ -0,0 +1,74 @@
+# Shared Template Resources
+
+This directory contains shared resources and documentation for templates.
+
+## Philosophy: Self-Contained Templates
+
+**Each template is intentionally self-contained and standalone.** This means:
+- ✅ Every template includes its own complete HTML, CSS, and JS
+- ✅ No external dependencies between templates
+- ✅ Users can copy a single template folder and it "just works"
+- ✅ Perfect for learning, prototyping, and quick integration
+
+## Why Not Use Shared CSS?
+
+While we have `base.css` with common styles, **we deliberately duplicate** them in each template because:
+
+1. **Portability**: Users can grab one folder and go
+2. **Independence**: No broken links if files are moved
+3. **Customization**: Users can modify without affecting others
+4. **Simplicity**: No build process or import management needed
+
+## Common Patterns (For Reference)
+
+### CSS Reset (42/42 templates)
+```css
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+```
+
+### Gradient Body (37/42 templates)
+```css
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+}
+```
+
+### Common Container Pattern
+```css
+.container {
+    background: white;
+    padding: 40px;
+    border-radius: 15px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+```
+
+## Files
+
+### base.css
+Reference implementation of common CSS patterns. Use this as a template when creating new components.
+
+## Creating New Templates
+
+When adding new templates:
+1. Copy the full CSS reset and base styles (don't import)
+2. Follow existing naming conventions
+3. Keep it self-contained
+4. Test that the folder works in isolation
+
+## Statistics
+
+- **Total Templates**: 42
+- **Templates with CSS Reset**: 42 (100%)
+- **Templates with Gradient Background**: 37 (88%)
+- **Duplication is intentional** for better user experience
+
+---
+
+*Note: This duplication is a feature, not a bug. It optimizes for end-user experience over DRY principles.*

package/templates/_shared/base.css

@@ -0,0 +1,18 @@
+/**
+ * Shared CSS Reset and Base Styles
+ * This file contains common styles used across all templates
+ */
+
+/* CSS Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Base Body Styles - Common gradient background and font */
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+}

package/templates/blackjack/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Blackjack - 21</title>
+    <title>{{name}} - Blackjack Game</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>

package/templates/breakout/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Breakout</title>
+    <title>{{name}} - Breakout Game</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>

package/templates/connect-four/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Connect Four</title>
+    <title>{{name}} - Connect Four Game</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>

package/templates/dice-game/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dice Game</title>
+    <title>{{name}} - Dice Game</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>

package/templates/flappy-bird/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Flappy Bird</title>
+    <title>{{name}} - Flappy Bird Game</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>

package/templates/pong/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Pong</title>
+    <title>{{name}} - Pong Game</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>

package/templates/skeleton/index.html

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Skeleton Loading</title>
-    <link rel="stylesheet" href="style.css" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - Skeleton Loading</title>
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <div class="skeleton-container">

package/templates/slot-machine/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Slot Machine</title>
+    <title>{{name}} - Slot Machine Game</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>

package/templates/tetris/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Tetris</title>
+    <title>{{name}} - Tetris Game</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>

package/templates-react/README.md

@@ -0,0 +1,126 @@
+# React Components Templates 🎨⚛️
+
+This directory contains React component templates that can be generated using the `create-template` CLI tool with React support.
+
+## Available Components
+
+### 🔘 Button
+A customizable button component with various styles and states:
+- **Variants**: primary, secondary, success, danger
+- **Sizes**: small, medium, large
+- **States**: enabled, disabled
+- **Props**: variant, size, disabled, onClick, type, className
+
+### 🎴 Card
+A versatile card component for displaying content:
+- **Features**: image support, title, description, footer
+- **Responsive design**
+- **Hover effects**
+- **Dark mode support**
+- **Props**: title, description, image, imageAlt, footer, onClick, className
+
+### 🔢 Counter
+A simple counter with increment and decrement functionality:
+- **Features**: customizable initial value, min/max limits, custom step
+- **Animations**: smooth transitions
+- **Controls**: increment, decrement, reset buttons
+- **Props**: initialValue, min, max, step, onChange
+
+### 📝 Form
+A flexible form component with validation:
+- **Features**: multiple field types (text, email, textarea, select)
+- **Validation**: required fields, patterns, min length
+- **Error messages**
+- **Dark mode support**
+- **Props**: title, fields, onSubmit, submitButtonText
+
+### 🪟 Modal
+A flexible modal dialog component:
+- **Features**: overlay click to close, customizable size
+- **Sizes**: small, medium, large
+- **Animations**: fade in, slide up
+- **Dark mode support**
+- **Props**: isOpen, onClose, title, children, footer, showCloseButton, closeOnOverlayClick, size
+
+### ✅ Todo List
+A complete todo list with add, toggle, and delete functionality:
+- **Features**: add tasks, mark as complete, delete tasks
+- **Statistics**: active and completed count
+- **Animations**: smooth transitions
+- **Dark mode support**
+- **Local state management**
+
+## Usage
+
+### Creating a React Component
+
+```bash
+# Interactive mode
+npx create-template-html-css create --react
+
+# With flags
+npx create-template-html-css create --react --component button --name my-button
+```
+
+### Importing in Your Project
+
+```jsx
+import Button from './components/Button/Button';
+import './components/Button/Button.css';
+
+function App() {
+  return (
+    <Button variant="primary" onClick={() => console.log('Clicked!')}>
+      Click Me
+    </Button>
+  );
+}
+```
+
+## Component Structure
+
+Each component follows this structure:
+```
+component-name/
+├── ComponentName.jsx      # Main component
+├── ComponentName.css      # Styles
+└── ComponentName.example.jsx  # Usage examples
+```
+
+## Styling
+
+All components support:
+- ✨ Gradient backgrounds with customizable colors
+- 🌙 Dark mode (prefers-color-scheme)
+- 📱 Responsive design
+- 🎭 Smooth animations and transitions
+- 🎨 CSS color placeholders ({{primaryColor}}, {{secondaryColor}})
+
+## Color Customization
+
+Colors can be customized during generation:
+- `--primary-color`: Main brand color
+- `--secondary-color`: Accent color
+- `--color-scheme`: Predefined schemes (ocean, sunset, forest, etc.)
+
+## Requirements
+
+These components are designed for use with:
+- React 16.8+ (Hooks support)
+- Modern browsers (ES6+)
+- CSS3 support
+
+## Contributing
+
+To add a new React component template:
+1. Create a new directory in `templates-react/`
+2. Add `ComponentName.jsx`, `ComponentName.css`, and `ComponentName.example.jsx`
+3. Follow the existing component structure
+4. Update this README
+
+## Notes
+
+- All components use functional components with hooks
+- PropTypes or TypeScript types can be added as needed
+- Components are fully self-contained with their own styles
+- CSS uses placeholders for color customization during generation

package/templates-react/button/Button.css

@@ -0,0 +1,88 @@
+/* Button Styles */
+.btn {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+/* Size Variations */
+.btn-small {
+  padding: 8px 16px;
+  font-size: 14px;
+}
+
+.btn-medium {
+  padding: 12px 24px;
+  font-size: 16px;
+}
+
+.btn-large {
+  padding: 16px 32px;
+  font-size: 18px;
+}
+
+/* Variant Styles - Primary */
+.btn-primary {
+  background: linear-gradient(135deg, {{primaryColor}} 0%, {{secondaryColor}} 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+/* Variant Styles - Secondary */
+.btn-secondary {
+  background: transparent;
+  color: {{primaryColor}};
+  border: 2px solid {{primaryColor}};
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: {{primaryColor}};
+  color: white;
+}
+
+/* Variant Styles - Danger */
+.btn-danger {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
+}
+
+.btn-danger:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
+}
+
+/* Variant Styles - Success */
+.btn-success {
+  background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(81, 207, 102, 0.3);
+}
+
+.btn-success:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(81, 207, 102, 0.4);
+}
+
+/* Disabled State */
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/templates-react/button/Button.example.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Button from './Button';
+
+/**
+ * Example usage of Button component
+ */
+const ButtonExample = () => {
+  const handleClick = () => {
+    console.log('Button clicked!');
+  };
+
+  return (
+    <div style={{ padding: '40px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
+      <h2>Button Component Examples</h2>
+      
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        <h3 style={{ width: '100%' }}>Variants</h3>
+        <Button variant="primary" onClick={handleClick}>Primary Button</Button>
+        <Button variant="secondary" onClick={handleClick}>Secondary Button</Button>
+        <Button variant="success" onClick={handleClick}>Success Button</Button>
+        <Button variant="danger" onClick={handleClick}>Danger Button</Button>
+      </div>
+
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        <h3 style={{ width: '100%' }}>Sizes</h3>
+        <Button size="small" onClick={handleClick}>Small</Button>
+        <Button size="medium" onClick={handleClick}>Medium</Button>
+        <Button size="large" onClick={handleClick}>Large</Button>
+      </div>
+
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        <h3 style={{ width: '100%' }}>States</h3>
+        <Button onClick={handleClick}>Enabled</Button>
+        <Button disabled>Disabled</Button>
+      </div>
+    </div>
+  );
+};
+
+export default ButtonExample;