create-template-html-css 1.6.4 → 1.8.0

package/src/generator.js

@@ -40,6 +40,179 @@ async function formatJs(jsContent) {
   }
 }
 
+/**
+ * Color scheme presets
+ */
+const COLOR_SCHEMES = {
+  vibrant: {
+    name: "Vibrant",
+    primary: "#FF6B6B",
+    secondary: "#4ECDC4",
+    description: "Bold reds and teals - energetic and modern"
+  },
+  pastel: {
+    name: "Pastel",
+    primary: "#FFB3BA",
+    secondary: "#FFDFBA",
+    description: "Soft pinks and peaches - calm and friendly"
+  },
+  ocean: {
+    name: "Ocean",
+    primary: "#0066CC",
+    secondary: "#00CCFF",
+    description: "Deep blues and cyans - professional and cool"
+  },
+  sunset: {
+    name: "Sunset",
+    primary: "#FF6B35",
+    secondary: "#FFA500",
+    description: "Warm oranges and reds - energetic glow"
+  },
+  forest: {
+    name: "Forest",
+    primary: "#2D6A4F",
+    secondary: "#40916C",
+    description: "Green tones - natural and organic"
+  },
+  purple: {
+    name: "Purple",
+    primary: "#7209B7",
+    secondary: "#B5179E",
+    description: "Deep purples - elegant and premium"
+  },
+  minimal: {
+    name: "Minimal",
+    primary: "#1A1A1A",
+    secondary: "#666666",
+    description: "Grays and blacks - clean and simple"
+  },
+  coral: {
+    name: "Coral",
+    primary: "#FF6B9D",
+    secondary: "#FFA07A",
+    description: "Coral pinks and salmon - warm and playful"
+  },
+  teal: {
+    name: "Teal",
+    primary: "#008B8B",
+    secondary: "#20B2AA",
+    description: "Teal hues - balanced and professional"
+  },
+  neon: {
+    name: "Neon",
+    primary: "#FF006E",
+    secondary: "#00D9FF",
+    description: "Bright neon colors - bold and futuristic"
+  }
+};
+
+/**
+ * Get color scheme by preset name
+ */
+function getColorScheme(schemeName) {
+  if (COLOR_SCHEMES[schemeName]) {
+    return COLOR_SCHEMES[schemeName];
+  }
+  return null;
+}
+
+/**
+ * Apply custom colors to CSS content using CSS variables
+ */
+function applyCustomColors(cssContent, primaryColor, secondaryColor) {
+  if (!primaryColor && !secondaryColor) {
+    return cssContent;
+  }
+
+  // Create CSS variable overrides
+  let colorVariables = ":root {\n";
+  
+  if (primaryColor) {
+    colorVariables += `  --primary-color: ${primaryColor};\n`;
+    // Also add as root variable that can override gradients
+    colorVariables += `  --primary-rgb: ${hexToRgb(primaryColor)};\n`;
+  }
+  
+  if (secondaryColor) {
+    colorVariables += `  --secondary-color: ${secondaryColor};\n`;
+    colorVariables += `  --secondary-rgb: ${hexToRgb(secondaryColor)};\n`;
+  }
+  
+  colorVariables += "}\n\n";
+
+  // If CSS doesn't have :root, add it
+  if (!cssContent.includes(":root")) {
+    return colorVariables + cssContent;
+  }
+
+  // Replace existing :root with extended one
+  return cssContent.replace(/:root\s*{/, colorVariables.trim() + "\n\n:root {");
+}
+
+/**
+ * Convert hex color to RGB values
+ */
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (result) {
+    const r = parseInt(result[1], 16);
+    const g = parseInt(result[2], 16);
+    const b = parseInt(result[3], 16);
+    return `${r}, ${g}, ${b}`;
+  }
+  return "102, 126, 234"; // fallback to default primary
+}
+
+/**
+ * Add dark mode styles to CSS
+ */
+function addDarkModeStyles(cssContent) {
+  if (cssContent.includes("prefers-color-scheme")) {
+    return cssContent; // Already has dark mode
+  }
+
+  // Create dark mode media query
+  const darkModeStyles = `
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #2d2d2d;
+    --text-primary: #ffffff;
+    --text-secondary: #b0b0b0;
+    --border-color: #404040;
+  }
+
+  body {
+    background-color: var(--bg-primary, #1a1a1a);
+    color: var(--text-primary, #ffffff);
+  }
+
+  .container,
+  .card,
+  .modal-content,
+  .form-container {
+    background-color: var(--bg-secondary, #2d2d2d);
+    color: var(--text-primary, #ffffff);
+    border-color: var(--border-color, #404040);
+  }
+
+  input,
+  textarea,
+  select {
+    background-color: var(--bg-primary, #1a1a1a);
+    color: var(--text-primary, #ffffff);
+    border-color: var(--border-color, #404040);
+  }
+
+  input::placeholder {
+    color: var(--text-secondary, #b0b0b0);
+  }
+}`;
+
+  return cssContent + darkModeStyles;
+}
+
 // Security: Validate component name against whitelist
 const VALID_COMPONENTS = [
   "button",
@@ -65,6 +238,9 @@ const VALID_COMPONENTS = [
   "counter",
   "accordion",
   "tabs",
+  "login",
+  "register",
+  "skeleton",
 ];
 
 // Security: Sanitize filename to prevent path traversal
@@ -81,8 +257,305 @@ function sanitizeFilename(filename) {
   return sanitized.replace(/[<>:"|?*]/g, "").trim();
 }
 
+/**
+ * Filter button variations based on user selection
+ */
+function filterButtonVariations(htmlContent, buttonVariations, selectedButtons) {
+  if (buttonVariations === "all" || !selectedButtons || selectedButtons.length === 0) {
+    return htmlContent; // Return all buttons
+  }
+
+  // Map selection to button classes
+  const buttonMap = {
+    primary: "btn-primary",
+    secondary: "btn-secondary",
+    success: "btn-success",
+    danger: "btn-danger",
+    outlined: "btn-outlined",
+    disabled: "disabled"
+  };
+
+  let filteredHtml = htmlContent;
+  
+  // Remove buttons that weren't selected
+  for (const [key, className] of Object.entries(buttonMap)) {
+    if (!selectedButtons.includes(key)) {
+      // Remove button and its comment
+      const patterns = [
+        new RegExp(`\\s*<!-- ${key.charAt(0).toUpperCase() + key.slice(1)} Button -->\\s*\\n\\s*<button[^>]*${className}[^>]*>.*?<\\/button>\\s*\\n`, 'gis'),
+        new RegExp(`\\s*<button[^>]*${className}[^>]*>.*?<\\/button>\\s*\\n`, 'gis')
+      ];
+      
+      patterns.forEach(pattern => {
+        filteredHtml = filteredHtml.replace(pattern, '\n        ');
+      });
+    }
+  }
+  
+  return filteredHtml;
+}
+
+/**
+ * Filter card variations based on user selection
+ */
+function filterCardVariations(htmlContent, cardVariations, selectedCards) {
+  if (cardVariations === "all" || !selectedCards || selectedCards.length === 0) {
+    return htmlContent; // Return all cards
+  }
+
+  const cardComments = {
+    modern: "Card 1 - Basic",
+    premium: "Card 2 - With Price",
+    blog: "Card 3 - With Tags",
+    minimal: "Card 4 - Minimal",
+    user: "Card 5 - With Avatar",
+    interactive: "Card 6 - Interactive"
+  };
+
+  let filteredHtml = htmlContent;
+
+  // Remove cards that weren't selected
+  for (const [key, comment] of Object.entries(cardComments)) {
+    if (!selectedCards.includes(key)) {
+      // Remove entire card div including comment
+      const pattern = new RegExp(`\\s*<!-- ${comment.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')} -->\\s*\\n\\s*<div class="card[^>]*>.*?<\\/div>\\s*\\n\\s*<\\/div>\\s*\\n`, 'gis');
+      filteredHtml = filteredHtml.replace(pattern, '\n            ');
+    }
+  }
+
+  return filteredHtml;
+}
+
+/**
+ * Filter spinner variations based on user selection
+ */
+function filterSpinnerVariations(htmlContent, spinnerVariations, selectedSpinners) {
+  if (spinnerVariations === "all" || !selectedSpinners || selectedSpinners.length === 0) {
+    return htmlContent; // Return all spinners
+  }
+
+  const spinnerTypes = {
+    circle: "Circle Spinner",
+    dots: "Bouncing Dots",
+    pulse: "Pulse Loader",
+    bars: "Bar Loader",
+    gradient: "Gradient Ring"
+  };
+
+  let filteredHtml = htmlContent;
+
+  // Remove spinners that weren't selected
+  for (const [key, title] of Object.entries(spinnerTypes)) {
+    if (!selectedSpinners.includes(key)) {
+      // Remove entire spinner-group div
+      const pattern = new RegExp(`\\s*<!-- ${title} Spinner -->\\s*\\n\\s*<div class="spinner-group">.*?<\\/div>\\s*\\n\\s*<\\/div>\\s*\\n`, 'gis');
+      filteredHtml = filteredHtml.replace(pattern, '\n        ');
+    }
+  }
+
+  return filteredHtml;
+}
+
+/**
+ * Generate custom navigation items based on user input
+ */
+function generateNavigationItems(htmlContent, navItems) {
+  // Parse the comma-separated navigation items
+  const items = navItems.split(',').map(item => item.trim()).filter(item => item.length > 0);
+  
+  // Generate navigation HTML
+  let navHtml = '';
+  items.forEach((item, index) => {
+    const itemId = item.toLowerCase().replace(/\s+/g, '-');
+    const activeClass = index === 0 ? ' active' : '';
+    navHtml += `                <li class="nav-item">
+                    <a href="#${itemId}" class="nav-link${activeClass}">${item}</a>
+                </li>\n`;
+  });
+  
+  // Replace the navigation items in the HTML
+  const navMenuRegex = /<ul class="nav-menu"[^>]*>[\s\S]*?<\/ul>/;
+  const replacement = `<ul class="nav-menu" id="navMenu">
+${navHtml}            </ul>`;
+  
+  htmlContent = htmlContent.replace(navMenuRegex, replacement);
+  
+  // Generate sections for each navigation item
+  let sectionsHtml = '';
+  items.forEach(item => {
+    const itemId = item.toLowerCase().replace(/\s+/g, '-');
+    sectionsHtml += `        <section id="${itemId}" class="section">
+            <h1>${item}</h1>
+            <p>Content for ${item} section</p>
+        </section>
+        
+`;
+  });
+  
+  // Replace the sections in the HTML
+  const mainContentRegex = /<main class="main-content">[\s\S]*?<\/main>/;
+  const sectionsReplacement = `<main class="main-content">
+${sectionsHtml}    </main>`;
+  
+  htmlContent = htmlContent.replace(mainContentRegex, sectionsReplacement);
+  
+  return htmlContent;
+}
+
+/**
+ * Generate custom form fields based on user selection
+ */
+function generateFormFields(htmlContent, formFields, customFormFields) {
+  let fieldsHtml = '';
+  
+  // Add standard fields
+  formFields.forEach(field => {
+    switch(field) {
+      case 'name':
+        fieldsHtml += `            <div class="form-group">
+                <label for="name">Full Name</label>
+                <input type="text" id="name" name="name" required>
+            </div>
+            
+`;
+        break;
+      case 'email':
+        fieldsHtml += `            <div class="form-group">
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" required>
+            </div>
+            
+`;
+        break;
+      case 'phone':
+        fieldsHtml += `            <div class="form-group">
+                <label for="phone">Phone</label>
+                <input type="tel" id="phone" name="phone">
+            </div>
+            
+`;
+        break;
+      case 'subject':
+        fieldsHtml += `            <div class="form-group">
+                <label for="subject">Subject</label>
+                <select id="subject" name="subject" required>
+                    <option value="">Select a subject</option>
+                    <option value="support">Technical Support</option>
+                    <option value="sales">Sales</option>
+                    <option value="general">General</option>
+                </select>
+            </div>
+            
+`;
+        break;
+      case 'message':
+        fieldsHtml += `            <div class="form-group">
+                <label for="message">Message</label>
+                <textarea id="message" name="message" rows="5" required></textarea>
+            </div>
+            
+`;
+        break;
+      case 'terms':
+        fieldsHtml += `            <div class="form-group checkbox-group">
+                <input type="checkbox" id="terms" name="terms" required>
+                <label for="terms">I agree to the terms of service</label>
+            </div>
+            
+`;
+        break;
+    }
+  });
+  
+  // Add custom fields if provided
+  if (customFormFields && customFormFields.trim().length > 0) {
+    const customFields = customFormFields.split(',').map(f => f.trim()).filter(f => f.length > 0);
+    
+    customFields.forEach(field => {
+      const [type, label] = field.split(':').map(s => s.trim());
+      if (type && label) {
+        const fieldId = label.toLowerCase().replace(/\s+/g, '-');
+        
+        if (type === 'textarea') {
+          fieldsHtml += `            <div class="form-group">
+                <label for="${fieldId}">${label}</label>
+                <textarea id="${fieldId}" name="${fieldId}" rows="5"></textarea>
+            </div>
+            
+`;
+        } else if (type === 'checkbox') {
+          fieldsHtml += `            <div class="form-group checkbox-group">
+                <input type="checkbox" id="${fieldId}" name="${fieldId}">
+                <label for="${fieldId}">${label}</label>
+            </div>
+            
+`;
+        } else if (type === 'select') {
+          fieldsHtml += `            <div class="form-group">
+                <label for="${fieldId}">${label}</label>
+                <select id="${fieldId}" name="${fieldId}">
+                    <option value="">Select an option</option>
+                    <option value="option1">Option 1</option>
+                    <option value="option2">Option 2</option>
+                </select>
+            </div>
+            
+`;
+        } else {
+          // Default to input with specified type
+          fieldsHtml += `            <div class="form-group">
+                <label for="${fieldId}">${label}</label>
+                <input type="${type}" id="${fieldId}" name="${fieldId}">
+            </div>
+            
+`;
+        }
+      }
+    });
+  }
+  
+  // Replace the form fields in the HTML
+  const formRegex = /<form class="form"[^>]*>[\s\S]*?<button type="submit"/;
+  const replacement = `<form class="form" id="contactForm">
+            <h1 class="form-title">Contact Us</h1>
+            <p class="form-subtitle">Fill in the details and we'll get back to you soon</p>
+            
+${fieldsHtml}            <button type="submit"`;
+  
+  htmlContent = htmlContent.replace(formRegex, replacement);
+  
+  return htmlContent;
+}
+
 async function generateTemplate(options) {
-  const { component, name, includeJs } = options;
+  const { 
+    component, 
+    name, 
+    includeJs, 
+    navItems, 
+    formFields, 
+    customFormFields,
+    buttonVariations,
+    selectedButtons,
+    cardVariations,
+    selectedCards,
+    spinnerVariations,
+    selectedSpinners,
+    colorScheme,
+    primaryColor,
+    secondaryColor,
+    darkMode
+  } = options;
+
+  // If colorScheme is provided, use those colors
+  let finalPrimaryColor = primaryColor;
+  let finalSecondaryColor = secondaryColor;
+  
+  if (colorScheme && COLOR_SCHEMES[colorScheme]) {
+    const scheme = COLOR_SCHEMES[colorScheme];
+    finalPrimaryColor = scheme.primary;
+    finalSecondaryColor = scheme.secondary;
+  }
 
   // Security: Validate component name
   if (!VALID_COMPONENTS.includes(component)) {
@@ -117,6 +590,31 @@ async function generateTemplate(options) {
 
   // Replace placeholder name
   htmlContent = htmlContent.replace(/{{name}}/g, safeName);
+  
+  // Filter button variations
+  if (component === "button") {
+    htmlContent = filterButtonVariations(htmlContent, buttonVariations, selectedButtons);
+  }
+  
+  // Filter card variations
+  if (component === "card") {
+    htmlContent = filterCardVariations(htmlContent, cardVariations, selectedCards);
+  }
+  
+  // Filter spinner variations
+  if (component === "spinner") {
+    htmlContent = filterSpinnerVariations(htmlContent, spinnerVariations, selectedSpinners);
+  }
+  
+  // Custom navigation items
+  if (component === "navigation" && navItems) {
+    htmlContent = generateNavigationItems(htmlContent, navItems);
+  }
+  
+  // Custom form fields
+  if (component === "form" && formFields) {
+    htmlContent = generateFormFields(htmlContent, formFields, customFormFields);
+  }
 
   // Add script tag if JavaScript is included (pointing to js/ folder)
   if (includeJs) {
@@ -139,10 +637,21 @@ async function generateTemplate(options) {
   await fs.writeFile(path.join(outputDir, "index.html"), htmlContent);
 
   // Copy CSS file to css/ folder
-  const cssContent = await fs.readFile(
+  let cssContent = await fs.readFile(
     path.join(templateDir, "style.css"),
     "utf-8",
   );
+
+  // Apply custom colors if provided (either from colorScheme or direct colors)
+  if (finalPrimaryColor || finalSecondaryColor) {
+    cssContent = applyCustomColors(cssContent, finalPrimaryColor, finalSecondaryColor);
+  }
+
+  // Add dark mode support if requested
+  if (darkMode) {
+    cssContent = addDarkModeStyles(cssContent);
+  }
+
   const formattedCss = await formatCss(cssContent);
   await fs.writeFile(path.join(cssDir, "style.css"), formattedCss);
 
@@ -165,4 +674,4 @@ async function generateTemplate(options) {
   return outputDir;
 }
 
-module.exports = { generateTemplate };
+module.exports = { generateTemplate, COLOR_SCHEMES, getColorScheme };

package/src/inserter.js

@@ -161,8 +161,14 @@ async function insertComponent(options) {
     );
   }
 
-  // Check if target file exists
+  // Security: Prevent path traversal attacks
   const targetPath = path.resolve(process.cwd(), targetFile);
+  const cwd = process.cwd();
+  if (!targetPath.startsWith(cwd)) {
+    throw new Error(`Security error: Cannot access files outside current directory`);
+  }
+
+  // Check if target file exists
   try {
     await fs.access(targetPath);
   } catch {

package/templates/login/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - Login</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="login-card">
+            <h1 class="login-title">Welcome Back</h1>
+            <p class="login-subtitle">Login to your account</p>
+            
+            <form class="login-form" id="loginForm">
+                <div class="form-group">
+                    <label for="email">Email Address</label>
+                    <input type="email" id="email" name="email" placeholder="you@example.com" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="password">Password</label>
+                    <input type="password" id="password" name="password" placeholder="Enter your password" required>
+                </div>
+                
+                <div class="form-group remember-forgot">
+                    <div class="checkbox-wrapper">
+                        <input type="checkbox" id="remember" name="remember">
+                        <label for="remember">Remember me</label>
+                    </div>
+                    <a href="#" class="forgot-link">Forgot Password?</a>
+                </div>
+                
+                <button type="submit" class="login-btn">Login</button>
+            </form>
+            
+            <div class="form-divider">
+                <span>Or continue with</span>
+            </div>
+            
+            <div class="social-buttons">
+                <button class="social-btn google-btn">
+                    <span>Google</span>
+                </button>
+                <button class="social-btn github-btn">
+                    <span>GitHub</span>
+                </button>
+            </div>
+            
+            <p class="signup-link">
+                Don't have an account? <a href="#">Sign up here</a>
+            </p>
+        </div>
+    </div>
+    
+    <script src="script.js"></script>
+</body>
+</html>