create-template-html-css 1.8.0 → 1.8.1

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", () => {

package/package.json

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