@oriro/orirocli 0.1.11 → 0.3.1

package/skills/craft/uipm-design/scripts/cip/render-html.py

@@ -1,424 +1,424 @@
-#!/usr/bin/env python3
-# -*- coding: utf-8 -*-
-"""
-CIP HTML Presentation Renderer
-
-Generates a professional HTML presentation from CIP mockup images
-with detailed descriptions, concepts, and brand guidelines.
-"""
-
-import argparse
-import json
-import os
-import sys
-import base64
-from pathlib import Path
-from datetime import datetime
-
-# Add parent directory for imports
-sys.path.insert(0, str(Path(__file__).parent))
-from core import search, get_cip_brief
-
-# Deliverable descriptions for presentation
-DELIVERABLE_INFO = {
-    "business card": {
-        "title": "Business Card",
-        "concept": "First impression touchpoint for professional networking",
-        "purpose": "Creates memorable brand recall during business exchanges",
-        "specs": "Standard 3.5 x 2 inches, premium paper stock"
-    },
-    "letterhead": {
-        "title": "Letterhead",
-        "concept": "Official correspondence identity",
-        "purpose": "Establishes credibility and professionalism in written communications",
-        "specs": "A4/Letter size, digital and print versions"
-    },
-    "document template": {
-        "title": "Document Template",
-        "concept": "Branded document system for internal and external use",
-        "purpose": "Ensures consistent brand representation across all documents",
-        "specs": "Multiple formats: Word, PDF, Google Docs compatible"
-    },
-    "reception signage": {
-        "title": "Reception Signage",
-        "concept": "Brand presence in physical office environment",
-        "purpose": "Creates strong first impression for visitors and reinforces brand identity",
-        "specs": "3D dimensional letters, backlit LED options, premium materials"
-    },
-    "office signage": {
-        "title": "Office Signage",
-        "concept": "Wayfinding and brand presence system",
-        "purpose": "Guides visitors while maintaining consistent brand experience",
-        "specs": "Modular system with directional and informational signs"
-    },
-    "polo shirt": {
-        "title": "Polo Shirt",
-        "concept": "Professional team apparel",
-        "purpose": "Creates unified team identity and brand ambassadorship",
-        "specs": "Premium pique cotton, embroidered logo on left chest"
-    },
-    "t-shirt": {
-        "title": "T-Shirt",
-        "concept": "Casual brand apparel",
-        "purpose": "Extends brand reach through everyday wear and promotional events",
-        "specs": "High-quality cotton, screen print or embroidery options"
-    },
-    "vehicle": {
-        "title": "Vehicle Branding",
-        "concept": "Mobile brand advertising",
-        "purpose": "Transforms fleet into moving billboards for maximum visibility",
-        "specs": "Partial or full wrap, vinyl graphics, weather-resistant"
-    },
-    "van": {
-        "title": "Van Branding",
-        "concept": "Commercial vehicle identity",
-        "purpose": "Professional fleet presence for service and delivery operations",
-        "specs": "Full wrap design, high-visibility contact information"
-    },
-    "car": {
-        "title": "Car Branding",
-        "concept": "Executive vehicle identity",
-        "purpose": "Professional presence for corporate and sales teams",
-        "specs": "Subtle branding, door panels and rear window"
-    },
-    "envelope": {
-        "title": "Envelope",
-        "concept": "Branded mail correspondence",
-        "purpose": "Extends brand identity to all outgoing mail",
-        "specs": "DL, C4, C5 sizes with logo placement"
-    },
-    "folder": {
-        "title": "Presentation Folder",
-        "concept": "Document organization with brand identity",
-        "purpose": "Professional presentation of proposals and materials",
-        "specs": "A4/Letter pocket folder with die-cut design"
-    }
-}
-
-
-def get_image_base64(image_path):
-    """Convert image to base64 for embedding in HTML"""
-    try:
-        with open(image_path, "rb") as f:
-            return base64.b64encode(f.read()).decode('utf-8')
-    except Exception as e:
-        print(f"Warning: Could not load image {image_path}: {e}")
-        return None
-
-
-def get_deliverable_info(filename):
-    """Extract deliverable type from filename and get info"""
-    filename_lower = filename.lower()
-    for key, info in DELIVERABLE_INFO.items():
-        if key.replace(" ", "-") in filename_lower or key.replace(" ", "_") in filename_lower:
-            return info
-    # Default info
-    return {
-        "title": filename.replace("-", " ").replace("_", " ").title(),
-        "concept": "Brand identity application",
-        "purpose": "Extends brand presence across touchpoints",
-        "specs": "Custom specifications"
-    }
-
-
-def generate_html(brand_name, industry, images_dir, output_path=None, style=None):
-    """Generate HTML presentation from CIP images"""
-
-    images_dir = Path(images_dir)
-    if not images_dir.exists():
-        print(f"Error: Directory not found: {images_dir}")
-        return None
-
-    # Get all PNG images
-    images = sorted(images_dir.glob("*.png"))
-    if not images:
-        print(f"Error: No PNG images found in {images_dir}")
-        return None
-
-    # Get CIP brief for brand info
-    brief = get_cip_brief(brand_name, industry, style)
-    style_info = brief.get("style", {})
-    industry_info = brief.get("industry", {})
-
-    # Build HTML
-    html_parts = [f'''<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{brand_name} - Corporate Identity Program</title>
-    <style>
-        * {{
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }}
-        body {{
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-            background: #0a0a0a;
-            color: #ffffff;
-            line-height: 1.6;
-        }}
-        .hero {{
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            padding: 4rem 2rem;
-            background: linear-gradient(135deg, #1a1a2e 0%, #0a0a0a 100%);
-        }}
-        .hero h1 {{
-            font-size: 4rem;
-            font-weight: 700;
-            letter-spacing: -0.02em;
-            margin-bottom: 1rem;
-            background: linear-gradient(135deg, #ffffff 0%, #888888 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }}
-        .hero .subtitle {{
-            font-size: 1.5rem;
-            color: #888;
-            margin-bottom: 3rem;
-        }}
-        .hero .meta {{
-            display: flex;
-            gap: 3rem;
-            flex-wrap: wrap;
-            justify-content: center;
-        }}
-        .hero .meta-item {{
-            text-align: center;
-        }}
-        .hero .meta-label {{
-            font-size: 0.75rem;
-            text-transform: uppercase;
-            letter-spacing: 0.1em;
-            color: #666;
-            margin-bottom: 0.5rem;
-        }}
-        .hero .meta-value {{
-            font-size: 1rem;
-            color: #ccc;
-        }}
-        .section {{
-            padding: 6rem 2rem;
-            max-width: 1400px;
-            margin: 0 auto;
-        }}
-        .section-title {{
-            font-size: 2.5rem;
-            font-weight: 600;
-            margin-bottom: 1rem;
-            color: #fff;
-        }}
-        .section-subtitle {{
-            font-size: 1.1rem;
-            color: #888;
-            margin-bottom: 4rem;
-            max-width: 600px;
-        }}
-        .deliverable {{
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 4rem;
-            margin-bottom: 8rem;
-            align-items: center;
-        }}
-        .deliverable:nth-child(even) {{
-            direction: rtl;
-        }}
-        .deliverable:nth-child(even) > * {{
-            direction: ltr;
-        }}
-        .deliverable-image {{
-            position: relative;
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-        }}
-        .deliverable-image img {{
-            width: 100%;
-            height: auto;
-            display: block;
-        }}
-        .deliverable-content {{
-            padding: 2rem 0;
-        }}
-        .deliverable-title {{
-            font-size: 2rem;
-            font-weight: 600;
-            margin-bottom: 1rem;
-            color: #fff;
-        }}
-        .deliverable-concept {{
-            font-size: 1.1rem;
-            color: #aaa;
-            margin-bottom: 1.5rem;
-            font-style: italic;
-        }}
-        .deliverable-purpose {{
-            font-size: 1rem;
-            color: #888;
-            margin-bottom: 1.5rem;
-            line-height: 1.8;
-        }}
-        .deliverable-specs {{
-            display: inline-block;
-            padding: 0.5rem 1rem;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 8px;
-            font-size: 0.85rem;
-            color: #666;
-        }}
-        .color-palette {{
-            display: flex;
-            gap: 1rem;
-            margin-top: 2rem;
-        }}
-        .color-swatch {{
-            width: 60px;
-            height: 60px;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-        }}
-        .footer {{
-            text-align: center;
-            padding: 4rem 2rem;
-            border-top: 1px solid #222;
-            color: #666;
-        }}
-        .footer p {{
-            margin-bottom: 0.5rem;
-        }}
-        @media (max-width: 900px) {{
-            .hero h1 {{
-                font-size: 2.5rem;
-            }}
-            .deliverable {{
-                grid-template-columns: 1fr;
-                gap: 2rem;
-            }}
-            .deliverable:nth-child(even) {{
-                direction: ltr;
-            }}
-        }}
-    </style>
-</head>
-<body>
-    <section class="hero">
-        <h1>{brand_name}</h1>
-        <p class="subtitle">Corporate Identity Program</p>
-        <div class="meta">
-            <div class="meta-item">
-                <div class="meta-label">Industry</div>
-                <div class="meta-value">{industry_info.get("Industry", industry.title())}</div>
-            </div>
-            <div class="meta-item">
-                <div class="meta-label">Style</div>
-                <div class="meta-value">{style_info.get("Style Name", "Corporate")}</div>
-            </div>
-            <div class="meta-item">
-                <div class="meta-label">Mood</div>
-                <div class="meta-value">{style_info.get("Mood", "Professional")}</div>
-            </div>
-            <div class="meta-item">
-                <div class="meta-label">Deliverables</div>
-                <div class="meta-value">{len(images)} Items</div>
-            </div>
-        </div>
-    </section>
-
-    <section class="section">
-        <h2 class="section-title">Brand Applications</h2>
-        <p class="section-subtitle">
-            Comprehensive identity system designed to maintain consistency
-            across all brand touchpoints and communications.
-        </p>
-''']
-
-    # Add each deliverable
-    for i, image_path in enumerate(images):
-        info = get_deliverable_info(image_path.stem)
-        img_base64 = get_image_base64(image_path)
-
-        if img_base64:
-            img_src = f"data:image/png;base64,{img_base64}"
-        else:
-            img_src = str(image_path)
-
-        html_parts.append(f'''
-        <div class="deliverable">
-            <div class="deliverable-image">
-                <img src="{img_src}" alt="{info['title']}" loading="lazy">
-            </div>
-            <div class="deliverable-content">
-                <h3 class="deliverable-title">{info['title']}</h3>
-                <p class="deliverable-concept">{info['concept']}</p>
-                <p class="deliverable-purpose">{info['purpose']}</p>
-                <span class="deliverable-specs">{info['specs']}</span>
-            </div>
-        </div>
-''')
-
-    # Close HTML
-    html_parts.append(f'''
-    </section>
-
-    <footer class="footer">
-        <p><strong>{brand_name}</strong> Corporate Identity Program</p>
-        <p>Generated on {datetime.now().strftime("%B %d, %Y")}</p>
-        <p style="margin-top: 1rem; font-size: 0.8rem;">Powered by CIP Design Skill</p>
-    </footer>
-</body>
-</html>
-''')
-
-    html_content = "".join(html_parts)
-
-    # Save HTML
-    output_path = output_path or images_dir / f"{brand_name.lower().replace(' ', '-')}-cip-presentation.html"
-    output_path = Path(output_path)
-
-    with open(output_path, "w", encoding="utf-8") as f:
-        f.write(html_content)
-
-    print(f"✅ HTML presentation generated: {output_path}")
-    return str(output_path)
-
-
-def main():
-    parser = argparse.ArgumentParser(
-        description="Generate HTML presentation from CIP mockups",
-        formatter_class=argparse.RawDescriptionHelpFormatter,
-        epilog="""
-Examples:
-  # Generate HTML from CIP images directory
-  python render-html.py --brand "TopGroup" --industry "consulting" --images ./topgroup-cip
-
-  # Specify output path
-  python render-html.py --brand "TopGroup" --industry "consulting" --images ./cip --output presentation.html
-        """
-    )
-
-    parser.add_argument("--brand", "-b", required=True, help="Brand name")
-    parser.add_argument("--industry", "-i", default="technology", help="Industry type")
-    parser.add_argument("--style", "-s", help="Design style")
-    parser.add_argument("--images", required=True, help="Directory containing CIP mockup images")
-    parser.add_argument("--output", "-o", help="Output HTML file path")
-
-    args = parser.parse_args()
-
-    generate_html(
-        brand_name=args.brand,
-        industry=args.industry,
-        images_dir=args.images,
-        output_path=args.output,
-        style=args.style
-    )
-
-
-if __name__ == "__main__":
-    main()
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+CIP HTML Presentation Renderer
+
+Generates a professional HTML presentation from CIP mockup images
+with detailed descriptions, concepts, and brand guidelines.
+"""
+
+import argparse
+import json
+import os
+import sys
+import base64
+from pathlib import Path
+from datetime import datetime
+
+# Add parent directory for imports
+sys.path.insert(0, str(Path(__file__).parent))
+from core import search, get_cip_brief
+
+# Deliverable descriptions for presentation
+DELIVERABLE_INFO = {
+    "business card": {
+        "title": "Business Card",
+        "concept": "First impression touchpoint for professional networking",
+        "purpose": "Creates memorable brand recall during business exchanges",
+        "specs": "Standard 3.5 x 2 inches, premium paper stock"
+    },
+    "letterhead": {
+        "title": "Letterhead",
+        "concept": "Official correspondence identity",
+        "purpose": "Establishes credibility and professionalism in written communications",
+        "specs": "A4/Letter size, digital and print versions"
+    },
+    "document template": {
+        "title": "Document Template",
+        "concept": "Branded document system for internal and external use",
+        "purpose": "Ensures consistent brand representation across all documents",
+        "specs": "Multiple formats: Word, PDF, Google Docs compatible"
+    },
+    "reception signage": {
+        "title": "Reception Signage",
+        "concept": "Brand presence in physical office environment",
+        "purpose": "Creates strong first impression for visitors and reinforces brand identity",
+        "specs": "3D dimensional letters, backlit LED options, premium materials"
+    },
+    "office signage": {
+        "title": "Office Signage",
+        "concept": "Wayfinding and brand presence system",
+        "purpose": "Guides visitors while maintaining consistent brand experience",
+        "specs": "Modular system with directional and informational signs"
+    },
+    "polo shirt": {
+        "title": "Polo Shirt",
+        "concept": "Professional team apparel",
+        "purpose": "Creates unified team identity and brand ambassadorship",
+        "specs": "Premium pique cotton, embroidered logo on left chest"
+    },
+    "t-shirt": {
+        "title": "T-Shirt",
+        "concept": "Casual brand apparel",
+        "purpose": "Extends brand reach through everyday wear and promotional events",
+        "specs": "High-quality cotton, screen print or embroidery options"
+    },
+    "vehicle": {
+        "title": "Vehicle Branding",
+        "concept": "Mobile brand advertising",
+        "purpose": "Transforms fleet into moving billboards for maximum visibility",
+        "specs": "Partial or full wrap, vinyl graphics, weather-resistant"
+    },
+    "van": {
+        "title": "Van Branding",
+        "concept": "Commercial vehicle identity",
+        "purpose": "Professional fleet presence for service and delivery operations",
+        "specs": "Full wrap design, high-visibility contact information"
+    },
+    "car": {
+        "title": "Car Branding",
+        "concept": "Executive vehicle identity",
+        "purpose": "Professional presence for corporate and sales teams",
+        "specs": "Subtle branding, door panels and rear window"
+    },
+    "envelope": {
+        "title": "Envelope",
+        "concept": "Branded mail correspondence",
+        "purpose": "Extends brand identity to all outgoing mail",
+        "specs": "DL, C4, C5 sizes with logo placement"
+    },
+    "folder": {
+        "title": "Presentation Folder",
+        "concept": "Document organization with brand identity",
+        "purpose": "Professional presentation of proposals and materials",
+        "specs": "A4/Letter pocket folder with die-cut design"
+    }
+}
+
+
+def get_image_base64(image_path):
+    """Convert image to base64 for embedding in HTML"""
+    try:
+        with open(image_path, "rb") as f:
+            return base64.b64encode(f.read()).decode('utf-8')
+    except Exception as e:
+        print(f"Warning: Could not load image {image_path}: {e}")
+        return None
+
+
+def get_deliverable_info(filename):
+    """Extract deliverable type from filename and get info"""
+    filename_lower = filename.lower()
+    for key, info in DELIVERABLE_INFO.items():
+        if key.replace(" ", "-") in filename_lower or key.replace(" ", "_") in filename_lower:
+            return info
+    # Default info
+    return {
+        "title": filename.replace("-", " ").replace("_", " ").title(),
+        "concept": "Brand identity application",
+        "purpose": "Extends brand presence across touchpoints",
+        "specs": "Custom specifications"
+    }
+
+
+def generate_html(brand_name, industry, images_dir, output_path=None, style=None):
+    """Generate HTML presentation from CIP images"""
+
+    images_dir = Path(images_dir)
+    if not images_dir.exists():
+        print(f"Error: Directory not found: {images_dir}")
+        return None
+
+    # Get all PNG images
+    images = sorted(images_dir.glob("*.png"))
+    if not images:
+        print(f"Error: No PNG images found in {images_dir}")
+        return None
+
+    # Get CIP brief for brand info
+    brief = get_cip_brief(brand_name, industry, style)
+    style_info = brief.get("style", {})
+    industry_info = brief.get("industry", {})
+
+    # Build HTML
+    html_parts = [f'''<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{brand_name} - Corporate Identity Program</title>
+    <style>
+        * {{
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }}
+        body {{
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            background: #0a0a0a;
+            color: #ffffff;
+            line-height: 1.6;
+        }}
+        .hero {{
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            padding: 4rem 2rem;
+            background: linear-gradient(135deg, #1a1a2e 0%, #0a0a0a 100%);
+        }}
+        .hero h1 {{
+            font-size: 4rem;
+            font-weight: 700;
+            letter-spacing: -0.02em;
+            margin-bottom: 1rem;
+            background: linear-gradient(135deg, #ffffff 0%, #888888 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }}
+        .hero .subtitle {{
+            font-size: 1.5rem;
+            color: #888;
+            margin-bottom: 3rem;
+        }}
+        .hero .meta {{
+            display: flex;
+            gap: 3rem;
+            flex-wrap: wrap;
+            justify-content: center;
+        }}
+        .hero .meta-item {{
+            text-align: center;
+        }}
+        .hero .meta-label {{
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: #666;
+            margin-bottom: 0.5rem;
+        }}
+        .hero .meta-value {{
+            font-size: 1rem;
+            color: #ccc;
+        }}
+        .section {{
+            padding: 6rem 2rem;
+            max-width: 1400px;
+            margin: 0 auto;
+        }}
+        .section-title {{
+            font-size: 2.5rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: #fff;
+        }}
+        .section-subtitle {{
+            font-size: 1.1rem;
+            color: #888;
+            margin-bottom: 4rem;
+            max-width: 600px;
+        }}
+        .deliverable {{
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 4rem;
+            margin-bottom: 8rem;
+            align-items: center;
+        }}
+        .deliverable:nth-child(even) {{
+            direction: rtl;
+        }}
+        .deliverable:nth-child(even) > * {{
+            direction: ltr;
+        }}
+        .deliverable-image {{
+            position: relative;
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+        }}
+        .deliverable-image img {{
+            width: 100%;
+            height: auto;
+            display: block;
+        }}
+        .deliverable-content {{
+            padding: 2rem 0;
+        }}
+        .deliverable-title {{
+            font-size: 2rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: #fff;
+        }}
+        .deliverable-concept {{
+            font-size: 1.1rem;
+            color: #aaa;
+            margin-bottom: 1.5rem;
+            font-style: italic;
+        }}
+        .deliverable-purpose {{
+            font-size: 1rem;
+            color: #888;
+            margin-bottom: 1.5rem;
+            line-height: 1.8;
+        }}
+        .deliverable-specs {{
+            display: inline-block;
+            padding: 0.5rem 1rem;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 8px;
+            font-size: 0.85rem;
+            color: #666;
+        }}
+        .color-palette {{
+            display: flex;
+            gap: 1rem;
+            margin-top: 2rem;
+        }}
+        .color-swatch {{
+            width: 60px;
+            height: 60px;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        }}
+        .footer {{
+            text-align: center;
+            padding: 4rem 2rem;
+            border-top: 1px solid #222;
+            color: #666;
+        }}
+        .footer p {{
+            margin-bottom: 0.5rem;
+        }}
+        @media (max-width: 900px) {{
+            .hero h1 {{
+                font-size: 2.5rem;
+            }}
+            .deliverable {{
+                grid-template-columns: 1fr;
+                gap: 2rem;
+            }}
+            .deliverable:nth-child(even) {{
+                direction: ltr;
+            }}
+        }}
+    </style>
+</head>
+<body>
+    <section class="hero">
+        <h1>{brand_name}</h1>
+        <p class="subtitle">Corporate Identity Program</p>
+        <div class="meta">
+            <div class="meta-item">
+                <div class="meta-label">Industry</div>
+                <div class="meta-value">{industry_info.get("Industry", industry.title())}</div>
+            </div>
+            <div class="meta-item">
+                <div class="meta-label">Style</div>
+                <div class="meta-value">{style_info.get("Style Name", "Corporate")}</div>
+            </div>
+            <div class="meta-item">
+                <div class="meta-label">Mood</div>
+                <div class="meta-value">{style_info.get("Mood", "Professional")}</div>
+            </div>
+            <div class="meta-item">
+                <div class="meta-label">Deliverables</div>
+                <div class="meta-value">{len(images)} Items</div>
+            </div>
+        </div>
+    </section>
+
+    <section class="section">
+        <h2 class="section-title">Brand Applications</h2>
+        <p class="section-subtitle">
+            Comprehensive identity system designed to maintain consistency
+            across all brand touchpoints and communications.
+        </p>
+''']
+
+    # Add each deliverable
+    for i, image_path in enumerate(images):
+        info = get_deliverable_info(image_path.stem)
+        img_base64 = get_image_base64(image_path)
+
+        if img_base64:
+            img_src = f"data:image/png;base64,{img_base64}"
+        else:
+            img_src = str(image_path)
+
+        html_parts.append(f'''
+        <div class="deliverable">
+            <div class="deliverable-image">
+                <img src="{img_src}" alt="{info['title']}" loading="lazy">
+            </div>
+            <div class="deliverable-content">
+                <h3 class="deliverable-title">{info['title']}</h3>
+                <p class="deliverable-concept">{info['concept']}</p>
+                <p class="deliverable-purpose">{info['purpose']}</p>
+                <span class="deliverable-specs">{info['specs']}</span>
+            </div>
+        </div>
+''')
+
+    # Close HTML
+    html_parts.append(f'''
+    </section>
+
+    <footer class="footer">
+        <p><strong>{brand_name}</strong> Corporate Identity Program</p>
+        <p>Generated on {datetime.now().strftime("%B %d, %Y")}</p>
+        <p style="margin-top: 1rem; font-size: 0.8rem;">Powered by CIP Design Skill</p>
+    </footer>
+</body>
+</html>
+''')
+
+    html_content = "".join(html_parts)
+
+    # Save HTML
+    output_path = output_path or images_dir / f"{brand_name.lower().replace(' ', '-')}-cip-presentation.html"
+    output_path = Path(output_path)
+
+    with open(output_path, "w", encoding="utf-8") as f:
+        f.write(html_content)
+
+    print(f"✅ HTML presentation generated: {output_path}")
+    return str(output_path)
+
+
+def main():
+    parser = argparse.ArgumentParser(
+        description="Generate HTML presentation from CIP mockups",
+        formatter_class=argparse.RawDescriptionHelpFormatter,
+        epilog="""
+Examples:
+  # Generate HTML from CIP images directory
+  python render-html.py --brand "TopGroup" --industry "consulting" --images ./topgroup-cip
+
+  # Specify output path
+  python render-html.py --brand "TopGroup" --industry "consulting" --images ./cip --output presentation.html
+        """
+    )
+
+    parser.add_argument("--brand", "-b", required=True, help="Brand name")
+    parser.add_argument("--industry", "-i", default="technology", help="Industry type")
+    parser.add_argument("--style", "-s", help="Design style")
+    parser.add_argument("--images", required=True, help="Directory containing CIP mockup images")
+    parser.add_argument("--output", "-o", help="Output HTML file path")
+
+    args = parser.parse_args()
+
+    generate_html(
+        brand_name=args.brand,
+        industry=args.industry,
+        images_dir=args.images,
+        output_path=args.output,
+        style=args.style
+    )
+
+
+if __name__ == "__main__":
+    main()