create-template-html-css 2.0.3 → 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/blackjack/script.js

@@ -156,7 +156,7 @@ document.querySelectorAll('.bet-btn').forEach(btn => {
             updateDisplay();
             document.getElementById('dealBtn').disabled = false;
         } else {
-            showMessage('אין מספיק קרדיטים!', 'error');
+            showMessage('Not enough credits!', 'error');
         }
     });
 });
@@ -166,7 +166,7 @@ document.getElementById('dealBtn').addEventListener('click', startGame);
 
 function startGame() {
     if (gameState.currentBet === 0) {
-        showMessage('בחר הימור תחילה!', 'error');
+        showMessage('Choose a bet first!', 'error');
         return;
     }
     
@@ -261,7 +261,7 @@ document.getElementById('doubleBtn').addEventListener('click', () => {
             stand();
         }
     } else {
-        showMessage('אין מספיק קרדיטים להכפלה!', 'error');
+        showMessage('Not enough credits to double down!', 'error');
     }
 });
 
@@ -301,23 +301,23 @@ function endGame(result) {
     switch (result) {
         case 'blackjack':
             winAmount = Math.floor(gameState.currentBet * 2.5); // 3:2 payout
-            message = '🎉 BLACKJACK! אתה מנצח!';
+            message = '🎉 BLACKJACK! You win!';
             gameState.wins++;
             break;
         case 'win':
             winAmount = gameState.currentBet * 2;
-            message = '🎉 ניצחת!';
+            message = '🎉 You won!';
             gameState.wins++;
             break;
         case 'lose':
-            message = '😢 הפסדת!';
+            message = '😢 You lost!';
             break;
         case 'push':
             winAmount = gameState.currentBet;
-            message = '🤝 תיקו!';
+            message = '🤝 Push!';
             break;
         case 'bust':
-            message = '💥 עברת את 21! הפסדת!';
+            message = '💥 Busted! You lost!';
             break;
     }
     
@@ -337,7 +337,7 @@ function endGame(result) {
     // Check if out of credits
     if (gameState.credits < 10) {
         setTimeout(() => {
-            alert('נגמרו הקרדיטים! מקבל 1000 קרדיטים חדשים.');
+            alert('Out of credits! Receiving 1000 new credits.');
             gameState.credits = 1000;
             updateDisplay();
             saveGame();

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/breakout/script.js

@@ -263,11 +263,11 @@ function gameOver() {
     ctx.fillStyle = '#FFFFFF';
     ctx.font = 'bold 48px Arial';
     ctx.textAlign = 'center';
-    ctx.fillText('משחק נגמר!', canvas.width / 2, canvas.height / 2 - 40);
+    ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 40);
     
     ctx.font = '24px Arial';
-    ctx.fillText(`ניקוד סופי: ${gameState.score}`, canvas.width / 2, canvas.height / 2 + 20);
-    ctx.fillText('לחץ "אתחל" להתחיל מחדש', canvas.width / 2, canvas.height / 2 + 60);
+    ctx.fillText(`Final Score: ${gameState.score}`, canvas.width / 2, canvas.height / 2 + 20);
+    ctx.fillText('Click "Reset" to restart', canvas.width / 2, canvas.height / 2 + 60);
     
     document.getElementById('startBtn').disabled = false;
     document.getElementById('pauseBtn').disabled = true;
@@ -306,7 +306,7 @@ function draw() {
         ctx.fillStyle = '#FFFFFF';
         ctx.font = 'bold 36px Arial';
         ctx.textAlign = 'center';
-        ctx.fillText('משחק מושהה', canvas.width / 2, canvas.height / 2);
+        ctx.fillText('Game Paused', canvas.width / 2, canvas.height / 2);
     }
 }
 
@@ -349,7 +349,7 @@ function startGame() {
 // Pause game
 function pauseGame() {
     gameState.paused = !gameState.paused;
-    document.getElementById('pauseBtn').textContent = gameState.paused ? 'המשך' : 'השהה';
+    document.getElementById('pauseBtn').textContent = gameState.paused ? 'Resume' : 'Pause';
 }
 
 // Reset game
@@ -372,7 +372,7 @@ function resetGame() {
     
     document.getElementById('startBtn').disabled = false;
     document.getElementById('pauseBtn').disabled = true;
-    document.getElementById('pauseBtn').textContent = 'השהה';
+    document.getElementById('pauseBtn').textContent = 'Pause';
 }
 
 // Event listeners

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/connect-four/script.js

@@ -331,15 +331,15 @@ function endGame(winner) {
         gameState.score1++;
         localStorage.setItem('connect4Score1', gameState.score1);
         updateScore();
-        showMessage('🎉 שחקן 1 ניצח!', 'player1');
+        showMessage('🎉 Player 1 wins!', 'player1');
     } else if (winner === PLAYER2) {
         gameState.score2++;
         localStorage.setItem('connect4Score2', gameState.score2);
         updateScore();
-        const message = gameState.gameMode === 'pvc' ? '🤖 המחשב ניצח!' : '🎉 שחקן 2 ניצח!';
+        const message = gameState.gameMode === 'pvc' ? '🤖 Computer wins!' : '🎉 Player 2 wins!';
         showMessage(message, 'player2');
     } else {
-        showMessage('🤝 תיקו!', 'draw');
+        showMessage('🤝 Draw!', 'draw');
     }
 }
 
@@ -354,10 +354,10 @@ function showMessage(text, type) {
 function updateTurnIndicator() {
     const turnIndicator = document.getElementById('turnIndicator');
     if (gameState.currentPlayer === PLAYER1) {
-        turnIndicator.textContent = 'תור שחקן 1';
+        turnIndicator.textContent = 'Player 1\'s Turn';
         turnIndicator.className = 'player1-turn';
     } else {
-        const text = gameState.gameMode === 'pvc' ? 'תור המחשב' : 'תור שחקן 2';
+        const text = gameState.gameMode === 'pvc' ? 'Computer\'s Turn' : 'Player 2\'s Turn';
         turnIndicator.textContent = text;
         turnIndicator.className = 'player2-turn';
     }

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/dice-game/script.js

@@ -1,8 +1,8 @@
 // Game state
 let gameState = {
     players: [
-        { total: 0, current: 0, name: 'שחקן 1' },
-        { total: 0, current: 0, name: 'שחקן 2' }
+        { total: 0, current: 0, name: 'Player 1' },
+        { total: 0, current: 0, name: 'Player 2' }
     ],
     currentPlayer: 0,
     gameActive: true,
@@ -34,13 +34,13 @@ function updateDisplay() {
     if (gameState.currentPlayer === 0) {
         player1Card.classList.add('active');
         player2Card.classList.remove('active');
-        player1Card.querySelector('.current-turn').textContent = 'תורך!';
-        player2Card.querySelector('.current-turn').textContent = 'המתן...';
+        player1Card.querySelector('.current-turn').textContent = 'Your Turn!';
+        player2Card.querySelector('.current-turn').textContent = 'Wait...';
     } else {
         player1Card.classList.remove('active');
         player2Card.classList.add('active');
-        player1Card.querySelector('.current-turn').textContent = 'המתן...';
-        player2Card.querySelector('.current-turn').textContent = gameState.gameMode === 'pvc' ? 'תור המחשב...' : 'תורך!';
+        player1Card.querySelector('.current-turn').textContent = 'Wait...';
+        player2Card.querySelector('.current-turn').textContent = gameState.gameMode === 'pvc' ? 'Computer\'s Turn...' : 'Your Turn!';
     }
 }
 
@@ -96,7 +96,7 @@ document.getElementById('rollBtn').addEventListener('click', async () => {
     if (roll === 1) {
         // Lost turn
         gameState.players[gameState.currentPlayer].current = 0;
-        showMessage(`💥 הטלת 1! איבדת את כל ניקוד התור!`, 'error');
+        showMessage(`💥 Rolled 1! You lost all turn points!`, 'error');
         
         await new Promise(resolve => setTimeout(resolve, 1500));
         switchPlayer();
@@ -104,7 +104,7 @@ document.getElementById('rollBtn').addEventListener('click', async () => {
         // Add to current
         gameState.players[gameState.currentPlayer].current += roll;
         updateDisplay();
-        showMessage(`🎲 הטלת ${roll}!`, 'info');
+        showMessage(`🎲 Rolled ${roll}!`, 'info');
     }
 });
 
@@ -115,7 +115,7 @@ document.getElementById('holdBtn').addEventListener('click', () => {
     const player = gameState.players[gameState.currentPlayer];
     
     if (player.current === 0) {
-        showMessage('אין מה לשמור! הטל קובייה תחילה.', 'error');
+        showMessage('Nothing to save! Roll the dice first.', 'error');
         return;
     }
     
@@ -128,7 +128,7 @@ document.getElementById('holdBtn').addEventListener('click', () => {
     if (player.total >= 100) {
         endGame();
     } else {
-        showMessage(`✅ נשמר! ${player.total} נקודות סה"כ.`, 'success');
+        showMessage(`✅ Saved! ${player.total} points total.`, 'success');
         setTimeout(() => {
             switchPlayer();
         }, 1000);
@@ -161,7 +161,7 @@ async function computerTurn() {
         
         if (roll === 1) {
             player.current = 0;
-            showMessage(`🤖 המחשב הטיל 1! איבד את התור!`, 'error');
+            showMessage(`🤖 Computer rolled 1! Lost the turn!`, 'error');
             await new Promise(resolve => setTimeout(resolve, 1500));
             switchPlayer();
             return;
@@ -169,7 +169,7 @@ async function computerTurn() {
         
         player.current += roll;
         updateDisplay();
-        showMessage(`🤖 המחשב הטיל ${roll}!`, 'info');
+        showMessage(`🤖 Computer rolled ${roll}!`, 'info');
         
         // AI decision logic
         const shouldHold = 
@@ -189,7 +189,7 @@ async function computerTurn() {
                 return;
             }
             
-            showMessage(`🤖 המחשב שומר ${player.total} נקודות!`, 'success');
+            showMessage(`🤖 Computer saves ${player.total} points!`, 'success');
             await new Promise(resolve => setTimeout(resolve, 1500));
             switchPlayer();
             return;
@@ -203,10 +203,10 @@ function endGame() {
     
     const winner = gameState.players[gameState.currentPlayer];
     const winnerName = gameState.currentPlayer === 0 ? 
-        'שחקן 1' : 
-        (gameState.gameMode === 'pvc' ? 'המחשב' : 'שחקן 2');
+        'Player 1' : 
+        (gameState.gameMode === 'pvc' ? 'Computer' : 'Player 2');
     
-    showMessage(`🎉 ${winnerName} ניצח עם ${winner.total} נקודות!`, 'success');
+    showMessage(`🎉 ${winnerName} won with ${winner.total} points!`, 'success');
     
     // Celebrate
     celebrate();
@@ -217,8 +217,8 @@ document.getElementById('newGameBtn').addEventListener('click', newGame);
 
 function newGame() {
     gameState.players = [
-        { total: 0, current: 0, name: 'שחקן 1' },
-        { total: 0, current: 0, name: 'שחקן 2' }
+        { total: 0, current: 0, name: 'Player 1' },
+        { total: 0, current: 0, name: 'Player 2' }
     ];
     gameState.currentPlayer = 0;
     gameState.gameActive = true;
@@ -241,9 +241,9 @@ document.querySelectorAll('.mode-btn').forEach(btn => {
         
         // Update player 2 name
         if (gameState.gameMode === 'pvc') {
-            document.querySelector('#player2Card h3').textContent = '🤖 מחשב';
+            document.querySelector('#player2Card h3').textContent = '🤖 Computer';
         } else {
-            document.querySelector('#player2Card h3').textContent = '👤 שחקן 2';
+            document.querySelector('#player2Card h3').textContent = '👤 Player 2';
         }
         
         newGame();

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>