create-template-html-css 1.8.0 → 1.9.0

package/COMPONENTS-GALLERY.html

@@ -436,6 +436,93 @@
         <h2 class="color-schemes-title">🎨 Color Schemes Preview</h2>
         <div class="schemes-grid" id="colorSchemesGrid"></div>
       </div>
+
+      <!-- CLI Flags Section -->
+      <div class="color-schemes-section" style="margin-top: 40px;">
+        <h2 class="color-schemes-title">⚡ One-Command Creation (Non-Interactive)</h2>
+        <p style="text-align: center; color: #666; margin-bottom: 20px;">
+          Create components instantly with all flags in a single command - no prompts needed!<br>
+          <small>Install globally with npm, or use npx to run without installation</small>
+        </p>
+        
+        <div style="max-width: 900px; margin: 0 auto;">
+          <!-- Available Flags -->
+          <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
+            <h3 style="margin: 0 0 15px 0; color: #333;">📋 Available Flags:</h3>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
+              <div>
+                <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px; color: #495057;">-c, --component &lt;type&gt;</code>
+                <div style="font-size: 0.9rem; color: #666; margin-top: 5px;">Component type (required)</div>
+              </div>
+              <div>
+                <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px; color: #495057;">-n, --name &lt;name&gt;</code>
+                <div style="font-size: 0.9rem; color: #666; margin-top: 5px;">Project name (required)</div>
+              </div>
+              <div>
+                <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px; color: #495057;">--dark-mode</code>
+                <div style="font-size: 0.9rem; color: #666; margin-top: 5px;">Add dark mode support</div>
+              </div>
+              <div>
+                <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px; color: #495057;">--color-scheme &lt;name&gt;</code>
+                <div style="font-size: 0.9rem; color: #666; margin-top: 5px;">Use preset colors</div>
+              </div>
+              <div>
+                <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px; color: #495057;">--primary-color &lt;hex&gt;</code>
+                <div style="font-size: 0.9rem; color: #666; margin-top: 5px;">Custom primary color</div>
+              </div>
+              <div>
+                <code style="background: #e9ecef; padding: 4px 8px; border-radius: 4px; color: #495057;">--secondary-color &lt;hex&gt;</code>
+                <div style="font-size: 0.9rem; color: #666; margin-top: 5px;">Custom secondary color</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Installation Note -->
+          <div style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; border-radius: 4px; margin-bottom: 20px;">
+            <strong>📦 Installation:</strong>
+            <div style="margin-top: 8px;">
+              <code style="background: #fff; padding: 6px 12px; border-radius: 4px; display: inline-block; margin-right: 10px;">npm install -g create-template-html-css</code>
+              <span style="color: #666;">or use</span>
+              <code style="background: #fff; padding: 6px 12px; border-radius: 4px; display: inline-block; margin-left: 10px;">npx create-template-html-css</code>
+            </div>
+          </div>
+
+          <!-- Example Commands -->
+          <div style="background: #fff; border: 2px solid #e9ecef; border-radius: 8px; padding: 20px;">
+            <h3 style="margin: 0 0 15px 0; color: #333;">💡 Example Commands (After Installation):</h3>
+            
+            <div class="code-block" style="margin: 15px 0;">
+              create-template create -c button -n my-button
+              <button class="copy-btn" onclick="copyExample(this)">Copy</button>
+              <div style="font-size: 0.85rem; color: #666; margin-top: 5px;">Basic: Create button with default colors</div>
+            </div>
+
+            <div class="code-block" style="margin: 15px 0;">
+              create-template create -c card -n my-card --color-scheme ocean
+              <button class="copy-btn" onclick="copyExample(this)">Copy</button>
+              <div style="font-size: 0.85rem; color: #666; margin-top: 5px;">With preset: Card with ocean color scheme</div>
+            </div>
+
+            <div class="code-block" style="margin: 15px 0;">
+              create-template create -c modal -n my-modal --dark-mode
+              <button class="copy-btn" onclick="copyExample(this)">Copy</button>
+              <div style="font-size: 0.85rem; color: #666; margin-top: 5px;">With dark mode: Modal with automatic dark theme</div>
+            </div>
+
+            <div class="code-block" style="margin: 15px 0;">
+              create-template create -c hero -n my-hero --primary-color "#FF5733" --secondary-color "#3498db"
+              <button class="copy-btn" onclick="copyExample(this)">Copy</button>
+              <div style="font-size: 0.85rem; color: #666; margin-top: 5px;">Custom colors: Hero with custom gradient</div>
+            </div>
+
+            <div class="code-block" style="margin: 15px 0;">
+              create-template create -c navigation -n my-nav --dark-mode --color-scheme sunset
+              <button class="copy-btn" onclick="copyExample(this)">Copy</button>
+              <div style="font-size: 0.85rem; color: #666; margin-top: 5px;">Everything: Navigation with dark mode + sunset colors</div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
 
     <footer>
@@ -535,8 +622,8 @@
               <div style="margin: 4px 0;">Secondary: ${scheme.secondary}</div>
             </div>
             <div style="display: flex; gap: 8px; margin-top: 12px;">
-              <button class="copy-btn" onclick="copySchemeCommand('npx', '${key}')" style="flex: 1; font-size: 0.85rem;">
-                Copy npx
+              <button class="copy-btn" onclick="copySchemeCommand('global', '${key}')" style="flex: 1; font-size: 0.85rem;">
+                Copy command
               </button>
               <button class="copy-btn" onclick="copySchemeCommand('local', '${key}')" style="flex: 1; font-size: 0.85rem; opacity: 0.7;">
                 Copy local
@@ -550,14 +637,22 @@
       // Copy color scheme command
       function copySchemeCommand(mode, schemeKey) {
         let text;
-        if (mode === 'npx') {
-          text = `npx create-template create -c button -n my-button --color-scheme ${schemeKey}`;
+        if (mode === 'global') {
+          text = `create-template create -c button -n my-button --color-scheme ${schemeKey}`;
         } else {
           text = `npm run create -- -c button -n my-button --color-scheme ${schemeKey}`;
         }
         navigator.clipboard.writeText(text);
         event.target.textContent = "✓ Copied!";
-        setTimeout(() => (event.target.textContent = `Copy ${mode}`), 2000);
+        setTimeout(() => (event.target.textContent = mode === 'global' ? 'Copy command' : 'Copy local'), 2000);
+      }
+
+      // Copy example command
+      function copyExample(btn) {
+        const text = btn.parentElement.textContent.trim().split("\n")[0].trim();
+        navigator.clipboard.writeText(text);
+        btn.textContent = "✓ Copied!";
+        setTimeout(() => (btn.textContent = "Copy"), 2000);
       }
 
       const components = [
@@ -616,14 +711,32 @@
               <span class="category-badge">${c.cat.toUpperCase()}</span>
               <p class="description">${c.desc}</p>
               <ul class="features-list">${c.feat.map((f) => `<li>${f}</li>`).join("")}</ul>
-              <div style="display: flex; gap: 10px; margin-top: 12px;">
-                <div class="code-block" style="flex: 1;">
-                  npx create-template create -c ${c.id}
-                  <button class="copy-btn" onclick="copy(this)">Copy</button>
+              
+              <!-- Full Command Examples -->
+              <div style="margin-top: 15px; padding: 10px; background: #f8f9fa; border-radius: 6px;">
+                <div style="font-size: 0.85rem; font-weight: 600; color: #495057; margin-bottom: 8px;">📋 One-Command Examples:</div>
+                
+                <div class="code-block" style="margin: 6px 0; font-size: 0.85rem;">
+                  create-template create -c ${c.id} -n my-${c.id}
+                  <button class="copy-btn" onclick="copy(this)" style="font-size: 0.75rem;">Copy</button>
                 </div>
-                <div class="code-block" style="flex: 1; opacity: 0.7;">
+                
+                <div class="code-block" style="margin: 6px 0; font-size: 0.85rem;">
+                  create-template create -c ${c.id} -n my-${c.id} --color-scheme ocean
+                  <button class="copy-btn" onclick="copy(this)" style="font-size: 0.75rem;">Copy</button>
+                </div>
+                
+                <div class="code-block" style="margin: 6px 0; font-size: 0.85rem;">
+                  create-template create -c ${c.id} -n my-${c.id} --dark-mode --color-scheme sunset
+                  <button class="copy-btn" onclick="copy(this)" style="font-size: 0.75rem;">Copy</button>
+                </div>
+              </div>
+              
+              <!-- Local npm command -->
+              <div style="display: flex; gap: 10px; margin-top: 12px;">
+                <div class="code-block" style="flex: 1; opacity: 0.6; font-size: 0.85rem;">
                   npm run create -- -c ${c.id}
-                  <button class="copy-btn" onclick="copy(this)">Copy</button>
+                  <button class="copy-btn" onclick="copy(this)" style="font-size: 0.75rem;">Local</button>
                 </div>
               </div>
             </div>

package/README.md

@@ -113,9 +113,13 @@ New **COMPONENTS-GALLERY.html** showcase page:
 
 **Open gallery:**
 ```bash
+# After global install
+create-template gallery
+
+# Or run directly with npx (first install package)
+npx create-template-html-css
+# Then run:
 create-template gallery
-# or
-npx create-template gallery
 ```
 
 ### 📚 Enhanced Documentation

package/bin/cli.js

@@ -14,7 +14,7 @@ program
   .description(
     chalk.cyan("🎨 Create HTML/CSS UI component templates in seconds"),
   )
-  .version("1.8.0");
+  .version("1.8.1");
 
 // Add intro message
 program.on("--help", () => {
@@ -601,7 +601,7 @@ program
   .command("list")
   .description(chalk.green("List all available templates"))
   .action(() => {
-    console.log("\n" + chalk.blue("📦 Available Components (26 total)\n"));
+    console.log("\n" + chalk.blue("📦 Available Components (30 total)\n"));
 
     console.log(chalk.yellow("━ Basic Components (9)"));
     console.log("  button          Styled button component");
@@ -643,6 +643,12 @@ program
     console.log("  accordion       Collapsible accordion component");
     console.log("  tabs            Tabbed content switcher");
 
+    console.log("\n" + chalk.green("━ Interactive Games (4)"));
+    console.log("  tic-tac-toe     Classic Tic-Tac-Toe game with score tracking");
+    console.log("  memory-game     Memory card matching game with difficulty levels");
+    console.log("  snake-game      Classic Snake game with keyboard controls");
+    console.log("  guess-number    Number guessing game with hints and scoring");
+
     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/demo-games/guess-number/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - Guess Number</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="game-card">
+            <h1>🎯 Guess the Number</h1>
+            
+            <div class="game-info">
+                <div class="info-row">
+                    <span class="label">Range:</span>
+                    <span id="rangeDisplay" class="value">1 - 100</span>
+                </div>
+                <div class="info-row">
+                    <span class="label">Attempts:</span>
+                    <span id="attempts" class="value">0</span>
+                </div>
+                <div class="info-row">
+                    <span class="label">Best Score:</span>
+                    <span id="bestScore" class="value">-</span>
+                </div>
+            </div>
+            
+            <div class="hint-section">
+                <div class="hint-box" id="hintBox">
+                    <p id="hintText">I'm thinking of a number...</p>
+                    <p id="hintDetails">Make your first guess!</p>
+                </div>
+            </div>
+            
+            <div class="input-section">
+                <input 
+                    type="number" 
+                    id="guessInput" 
+                    placeholder="Enter your guess"
+                    min="1"
+                    max="100"
+                />
+                <button id="guessBtn" class="btn btn-primary">Guess</button>
+            </div>
+            
+            <div class="history-section">
+                <h3>Previous Guesses</h3>
+                <div id="guessHistory" class="guess-history">
+                    <p class="empty-state">No guesses yet</p>
+                </div>
+            </div>
+            
+            <div class="difficulty-section">
+                <h3>Difficulty</h3>
+                <div class="difficulty-buttons">
+                    <button class="difficulty-btn active" data-range="100">Easy (1-100)</button>
+                    <button class="difficulty-btn" data-range="500">Medium (1-500)</button>
+                    <button class="difficulty-btn" data-range="1000">Hard (1-1000)</button>
+                </div>
+            </div>
+            
+            <div class="button-group">
+                <button id="newGameBtn" class="btn btn-success">New Game</button>
+                <button id="giveUpBtn" class="btn btn-secondary">Give Up</button>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

package/demo-games/guess-number/script.js

@@ -0,0 +1,216 @@
+// Guess the Number Game Logic
+
+const guessInput = document.getElementById('guessInput');
+const guessBtn = document.getElementById('guessBtn');
+const newGameBtn = document.getElementById('newGameBtn');
+const giveUpBtn = document.getElementById('giveUpBtn');
+const attemptsDisplay = document.getElementById('attempts');
+const bestScoreDisplay = document.getElementById('bestScore');
+const rangeDisplay = document.getElementById('rangeDisplay');
+const hintBox = document.getElementById('hintBox');
+const hintText = document.getElementById('hintText');
+const hintDetails = document.getElementById('hintDetails');
+const guessHistory = document.getElementById('guessHistory');
+const difficultyBtns = document.querySelectorAll('.difficulty-btn');
+
+let targetNumber = 0;
+let attempts = 0;
+let maxRange = 100;
+let guesses = [];
+let bestScores = {
+    100: localStorage.getItem('bestScore100') || null,
+    500: localStorage.getItem('bestScore500') || null,
+    1000: localStorage.getItem('bestScore1000') || null
+};
+let gameActive = true;
+
+// Initialize game
+function initGame() {
+    targetNumber = Math.floor(Math.random() * maxRange) + 1;
+    attempts = 0;
+    guesses = [];
+    gameActive = true;
+    
+    updateDisplay();
+    guessInput.value = '';
+    guessInput.disabled = false;
+    guessBtn.disabled = false;
+    guessInput.focus();
+    
+    hintBox.className = 'hint-box';
+    hintText.textContent = "I'm thinking of a number...";
+    hintDetails.textContent = 'Make your first guess!';
+    
+    guessHistory.innerHTML = '<p class="empty-state">No guesses yet</p>';
+}
+
+// Make a guess
+function makeGuess() {
+    if (!gameActive) return;
+    
+    const guess = parseInt(guessInput.value);
+    
+    // Validate input
+    if (isNaN(guess) || guess < 1 || guess > maxRange) {
+        showHint('invalid', '⚠️ Invalid Input', `Please enter a number between 1 and ${maxRange}`);
+        return;
+    }
+    
+    // Check if already guessed
+    if (guesses.includes(guess)) {
+        showHint('duplicate', '🔄 Already Guessed', 'You already tried this number!');
+        return;
+    }
+    
+    attempts++;
+    guesses.push(guess);
+    updateDisplay();
+    addToHistory(guess);
+    
+    // Check if correct
+    if (guess === targetNumber) {
+        handleWin();
+    } else if (guess < targetNumber) {
+        const diff = targetNumber - guess;
+        if (diff <= 5) {
+            showHint('hot', '🔥 Very Hot!', 'You\'re super close! Go higher!');
+        } else if (diff <= 10) {
+            showHint('warm', '🌡️ Hot!', 'Getting closer! Go higher!');
+        } else if (diff <= 20) {
+            showHint('cool', '❄️ Warm', 'Go higher!');
+        } else {
+            showHint('cold', '🧊 Cold', 'Too low! Go much higher!');
+        }
+    } else {
+        const diff = guess - targetNumber;
+        if (diff <= 5) {
+            showHint('hot', '🔥 Very Hot!', 'You\'re super close! Go lower!');
+        } else if (diff <= 10) {
+            showHint('warm', '🌡️ Hot!', 'Getting closer! Go lower!');
+        } else if (diff <= 20) {
+            showHint('cool', '❄️ Warm', 'Go lower!');
+        } else {
+            showHint('cold', '🧊 Cold', 'Too high! Go much lower!');
+        }
+    }
+    
+    guessInput.value = '';
+    guessInput.focus();
+}
+
+// Handle win
+function handleWin() {
+    gameActive = false;
+    guessInput.disabled = true;
+    guessBtn.disabled = true;
+    
+    showHint('win', '🎉 Congratulations!', `You found it in ${attempts} attempts!`);
+    
+    // Update best score
+    if (!bestScores[maxRange] || attempts < bestScores[maxRange]) {
+        bestScores[maxRange] = attempts;
+        localStorage.setItem(`bestScore${maxRange}`, attempts);
+        bestScoreDisplay.textContent = attempts;
+        
+        // Show new record message
+        setTimeout(() => {
+            hintDetails.textContent = `🏆 New Record: ${attempts} attempts!`;
+        }, 1500);
+    }
+}
+
+// Give up
+function giveUp() {
+    if (!gameActive) return;
+    
+    gameActive = false;
+    guessInput.disabled = true;
+    guessBtn.disabled = true;
+    
+    showHint('give-up', '😔 Game Over', `The number was ${targetNumber}`);
+}
+
+// Show hint
+function showHint(type, title, details) {
+    hintBox.className = `hint-box ${type}`;
+    hintText.textContent = title;
+    hintDetails.textContent = details;
+    
+    // Animate
+    hintBox.style.animation = 'none';
+    setTimeout(() => {
+        hintBox.style.animation = 'bounceIn 0.5s ease';
+    }, 10);
+}
+
+// Add to history
+function addToHistory(guess) {
+    if (guesses.length === 1) {
+        guessHistory.innerHTML = '';
+    }
+    
+    const guessItem = document.createElement('div');
+    guessItem.className = 'guess-item';
+    
+    let icon = '';
+    if (guess === targetNumber) {
+        icon = '🎯';
+        guessItem.classList.add('correct');
+    } else if (Math.abs(guess - targetNumber) <= 5) {
+        icon = '🔥';
+    } else if (Math.abs(guess - targetNumber) <= 10) {
+        icon = '🌡️';
+    } else if (Math.abs(guess - targetNumber) <= 20) {
+        icon = '❄️';
+    } else {
+        icon = '🧊';
+    }
+    
+    guessItem.innerHTML = `
+        <span class="guess-number">${guess}</span>
+        <span class="guess-icon">${icon}</span>
+    `;
+    
+    guessHistory.prepend(guessItem);
+}
+
+// Update display
+function updateDisplay() {
+    attemptsDisplay.textContent = attempts;
+    bestScoreDisplay.textContent = bestScores[maxRange] || '-';
+    rangeDisplay.textContent = `1 - ${maxRange}`;
+    guessInput.setAttribute('max', maxRange);
+    guessInput.setAttribute('placeholder', `Enter number (1-${maxRange})`);
+}
+
+// Change difficulty
+function changeDifficulty(newRange) {
+    maxRange = parseInt(newRange);
+    
+    // Update active button
+    difficultyBtns.forEach(btn => {
+        btn.classList.toggle('active', parseInt(btn.dataset.range) === maxRange);
+    });
+    
+    initGame();
+}
+
+// Event listeners
+guessBtn.addEventListener('click', makeGuess);
+newGameBtn.addEventListener('click', initGame);
+giveUpBtn.addEventListener('click', giveUp);
+
+guessInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') {
+        makeGuess();
+    }
+});
+
+difficultyBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+        changeDifficulty(btn.dataset.range);
+    });
+});
+
+// Initialize on load
+initGame();