init
This commit is contained in:
424
.opencode/skills/design/scripts/cip/render-html.py
Normal file
424
.opencode/skills/design/scripts/cip/render-html.py
Normal file
@@ -0,0 +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()
|
||||
Reference in New Issue
Block a user