1#!/usr/bin/env python3
2# -*- coding: utf-8 -*-
3"""
4CIP HTML Presentation Renderer
5 
6Generates a professional HTML presentation from CIP mockup images
7with detailed descriptions, concepts, and brand guidelines.
8"""
9 
10import argparse
11import json
12import os
13import sys
14import base64
15from pathlib import Path
16from datetime import datetime
17 
18# Add parent directory for imports
19sys.path.insert(0, str(Path(__file__).parent))
20from core import search, get_cip_brief
21 
22# Deliverable descriptions for presentation
23DELIVERABLE_INFO = {
24    "business card": {
25        "title": "Business Card",
26        "concept": "First impression touchpoint for professional networking",
27        "purpose": "Creates memorable brand recall during business exchanges",
28        "specs": "Standard 3.5 x 2 inches, premium paper stock"
29    },
30    "letterhead": {
31        "title": "Letterhead",
32        "concept": "Official correspondence identity",
33        "purpose": "Establishes credibility and professionalism in written communications",
34        "specs": "A4/Letter size, digital and print versions"
35    },
36    "document template": {
37        "title": "Document Template",
38        "concept": "Branded document system for internal and external use",
39        "purpose": "Ensures consistent brand representation across all documents",
40        "specs": "Multiple formats: Word, PDF, Google Docs compatible"
41    },
42    "reception signage": {
43        "title": "Reception Signage",
44        "concept": "Brand presence in physical office environment",
45        "purpose": "Creates strong first impression for visitors and reinforces brand identity",
46        "specs": "3D dimensional letters, backlit LED options, premium materials"
47    },
48    "office signage": {
49        "title": "Office Signage",
50        "concept": "Wayfinding and brand presence system",
51        "purpose": "Guides visitors while maintaining consistent brand experience",
52        "specs": "Modular system with directional and informational signs"
53    },
54    "polo shirt": {
55        "title": "Polo Shirt",
56        "concept": "Professional team apparel",
57        "purpose": "Creates unified team identity and brand ambassadorship",
58        "specs": "Premium pique cotton, embroidered logo on left chest"
59    },
60    "t-shirt": {
61        "title": "T-Shirt",
62        "concept": "Casual brand apparel",
63        "purpose": "Extends brand reach through everyday wear and promotional events",
64        "specs": "High-quality cotton, screen print or embroidery options"
65    },
66    "vehicle": {
67        "title": "Vehicle Branding",
68        "concept": "Mobile brand advertising",
69        "purpose": "Transforms fleet into moving billboards for maximum visibility",
70        "specs": "Partial or full wrap, vinyl graphics, weather-resistant"
71    },
72    "van": {
73        "title": "Van Branding",
74        "concept": "Commercial vehicle identity",
75        "purpose": "Professional fleet presence for service and delivery operations",
76        "specs": "Full wrap design, high-visibility contact information"
77    },
78    "car": {
79        "title": "Car Branding",
80        "concept": "Executive vehicle identity",
81        "purpose": "Professional presence for corporate and sales teams",
82        "specs": "Subtle branding, door panels and rear window"
83    },
84    "envelope": {
85        "title": "Envelope",
86        "concept": "Branded mail correspondence",
87        "purpose": "Extends brand identity to all outgoing mail",
88        "specs": "DL, C4, C5 sizes with logo placement"
89    },
90    "folder": {
91        "title": "Presentation Folder",
92        "concept": "Document organization with brand identity",
93        "purpose": "Professional presentation of proposals and materials",
94        "specs": "A4/Letter pocket folder with die-cut design"
95    }
96}
97 
98 
99def get_image_base64(image_path):
100    """Convert image to base64 for embedding in HTML"""
101    try:
102        with open(image_path, "rb") as f:
103            return base64.b64encode(f.read()).decode('utf-8')
104    except Exception as e:
105        print(f"Warning: Could not load image {image_path}: {e}")
106        return None
107 
108 
109def get_deliverable_info(filename):
110    """Extract deliverable type from filename and get info"""
111    filename_lower = filename.lower()
112    for key, info in DELIVERABLE_INFO.items():
113        if key.replace(" ", "-") in filename_lower or key.replace(" ", "_") in filename_lower:
114            return info
115    # Default info
116    return {
117        "title": filename.replace("-", " ").replace("_", " ").title(),
118        "concept": "Brand identity application",
119        "purpose": "Extends brand presence across touchpoints",
120        "specs": "Custom specifications"
121    }
122 
123 
124def generate_html(brand_name, industry, images_dir, output_path=None, style=None):
125    """Generate HTML presentation from CIP images"""
126 
127    images_dir = Path(images_dir)
128    if not images_dir.exists():
129        print(f"Error: Directory not found: {images_dir}")
130        return None
131 
132    # Get all PNG images
133    images = sorted(images_dir.glob("*.png"))
134    if not images:
135        print(f"Error: No PNG images found in {images_dir}")
136        return None
137 
138    # Get CIP brief for brand info
139    brief = get_cip_brief(brand_name, industry, style)
140    style_info = brief.get("style", {})
141    industry_info = brief.get("industry", {})
142 
143    # Build HTML
144    html_parts = [f'''<!DOCTYPE html>
145<html lang="en">
146<head>
147    <meta charset="UTF-8">
148    <meta name="viewport" content="width=device-width, initial-scale=1.0">
149    <title>{brand_name} - Corporate Identity Program</title>
150    <style>
151        * {{
152            margin: 0;
153            padding: 0;
154            box-sizing: border-box;
155        }}
156        body {{
157            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
158            background: #0a0a0a;
159            color: #ffffff;
160            line-height: 1.6;
161        }}
162        .hero {{
163            min-height: 100vh;
164            display: flex;
165            flex-direction: column;
166            justify-content: center;
167            align-items: center;
168            text-align: center;
169            padding: 4rem 2rem;
170            background: linear-gradient(135deg, #1a1a2e 0%, #0a0a0a 100%);
171        }}
172        .hero h1 {{
173            font-size: 4rem;
174            font-weight: 700;
175            letter-spacing: -0.02em;
176            margin-bottom: 1rem;
177            background: linear-gradient(135deg, #ffffff 0%, #888888 100%);
178            -webkit-background-clip: text;
179            -webkit-text-fill-color: transparent;
180        }}
181        .hero .subtitle {{
182            font-size: 1.5rem;
183            color: #888;
184            margin-bottom: 3rem;
185        }}
186        .hero .meta {{
187            display: flex;
188            gap: 3rem;
189            flex-wrap: wrap;
190            justify-content: center;
191        }}
192        .hero .meta-item {{
193            text-align: center;
194        }}
195        .hero .meta-label {{
196            font-size: 0.75rem;
197            text-transform: uppercase;
198            letter-spacing: 0.1em;
199            color: #666;
200            margin-bottom: 0.5rem;
201        }}
202        .hero .meta-value {{
203            font-size: 1rem;
204            color: #ccc;
205        }}
206        .section {{
207            padding: 6rem 2rem;
208            max-width: 1400px;
209            margin: 0 auto;
210        }}
211        .section-title {{
212            font-size: 2.5rem;
213            font-weight: 600;
214            margin-bottom: 1rem;
215            color: #fff;
216        }}
217        .section-subtitle {{
218            font-size: 1.1rem;
219            color: #888;
220            margin-bottom: 4rem;
221            max-width: 600px;
222        }}
223        .deliverable {{
224            display: grid;
225            grid-template-columns: 1fr 1fr;
226            gap: 4rem;
227            margin-bottom: 8rem;
228            align-items: center;
229        }}
230        .deliverable:nth-child(even) {{
231            direction: rtl;
232        }}
233        .deliverable:nth-child(even) > * {{
234            direction: ltr;
235        }}
236        .deliverable-image {{
237            position: relative;
238            border-radius: 16px;
239            overflow: hidden;
240            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
241        }}
242        .deliverable-image img {{
243            width: 100%;
244            height: auto;
245            display: block;
246        }}
247        .deliverable-content {{
248            padding: 2rem 0;
249        }}
250        .deliverable-title {{
251            font-size: 2rem;
252            font-weight: 600;
253            margin-bottom: 1rem;
254            color: #fff;
255        }}
256        .deliverable-concept {{
257            font-size: 1.1rem;
258            color: #aaa;
259            margin-bottom: 1.5rem;
260            font-style: italic;
261        }}
262        .deliverable-purpose {{
263            font-size: 1rem;
264            color: #888;
265            margin-bottom: 1.5rem;
266            line-height: 1.8;
267        }}
268        .deliverable-specs {{
269            display: inline-block;
270            padding: 0.5rem 1rem;
271            background: rgba(255, 255, 255, 0.05);
272            border-radius: 8px;
273            font-size: 0.85rem;
274            color: #666;
275        }}
276        .color-palette {{
277            display: flex;
278            gap: 1rem;
279            margin-top: 2rem;
280        }}
281        .color-swatch {{
282            width: 60px;
283            height: 60px;
284            border-radius: 12px;
285            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
286        }}
287        .footer {{
288            text-align: center;
289            padding: 4rem 2rem;
290            border-top: 1px solid #222;
291            color: #666;
292        }}
293        .footer p {{
294            margin-bottom: 0.5rem;
295        }}
296        @media (max-width: 900px) {{
297            .hero h1 {{
298                font-size: 2.5rem;
299            }}
300            .deliverable {{
301                grid-template-columns: 1fr;
302                gap: 2rem;
303            }}
304            .deliverable:nth-child(even) {{
305                direction: ltr;
306            }}
307        }}
308    </style>
309</head>
310<body>
311    <section class="hero">
312        <h1>{brand_name}</h1>
313        <p class="subtitle">Corporate Identity Program</p>
314        <div class="meta">
315            <div class="meta-item">
316                <div class="meta-label">Industry</div>
317                <div class="meta-value">{industry_info.get("Industry", industry.title())}</div>
318            </div>
319            <div class="meta-item">
320                <div class="meta-label">Style</div>
321                <div class="meta-value">{style_info.get("Style Name", "Corporate")}</div>
322            </div>
323            <div class="meta-item">
324                <div class="meta-label">Mood</div>
325                <div class="meta-value">{style_info.get("Mood", "Professional")}</div>
326            </div>
327            <div class="meta-item">
328                <div class="meta-label">Deliverables</div>
329                <div class="meta-value">{len(images)} Items</div>
330            </div>
331        </div>
332    </section>
333 
334    <section class="section">
335        <h2 class="section-title">Brand Applications</h2>
336        <p class="section-subtitle">
337            Comprehensive identity system designed to maintain consistency
338            across all brand touchpoints and communications.
339        </p>
340''']
341 
342    # Add each deliverable
343    for i, image_path in enumerate(images):
344        info = get_deliverable_info(image_path.stem)
345        img_base64 = get_image_base64(image_path)
346 
347        if img_base64:
348            img_src = f"data:image/png;base64,{img_base64}"
349        else:
350            img_src = str(image_path)
351 
352        html_parts.append(f'''
353        <div class="deliverable">
354            <div class="deliverable-image">
355                <img src="{img_src}" alt="{info['title']}" loading="lazy">
356            </div>
357            <div class="deliverable-content">
358                <h3 class="deliverable-title">{info['title']}</h3>
359                <p class="deliverable-concept">{info['concept']}</p>
360                <p class="deliverable-purpose">{info['purpose']}</p>
361                <span class="deliverable-specs">{info['specs']}</span>
362            </div>
363        </div>
364''')
365 
366    # Close HTML
367    html_parts.append(f'''
368    </section>
369 
370    <footer class="footer">
371        <p><strong>{brand_name}</strong> Corporate Identity Program</p>
372        <p>Generated on {datetime.now().strftime("%B %d, %Y")}</p>
373        <p style="margin-top: 1rem; font-size: 0.8rem;">Powered by CIP Design Skill</p>
374    </footer>
375</body>
376</html>
377''')
378 
379    html_content = "".join(html_parts)
380 
381    # Save HTML
382    output_path = output_path or images_dir / f"{brand_name.lower().replace(' ', '-')}-cip-presentation.html"
383    output_path = Path(output_path)
384 
385    with open(output_path, "w", encoding="utf-8") as f:
386        f.write(html_content)
387 
388    print(f"✅ HTML presentation generated: {output_path}")
389    return str(output_path)
390 
391 
392def main():
393    parser = argparse.ArgumentParser(
394        description="Generate HTML presentation from CIP mockups",
395        formatter_class=argparse.RawDescriptionHelpFormatter,
396        epilog="""
397Examples:
398  # Generate HTML from CIP images directory
399  python render-html.py --brand "TopGroup" --industry "consulting" --images ./topgroup-cip
400 
401  # Specify output path
402  python render-html.py --brand "TopGroup" --industry "consulting" --images ./cip --output presentation.html
403        """
404    )
405 
406    parser.add_argument("--brand", "-b", required=True, help="Brand name")
407    parser.add_argument("--industry", "-i", default="technology", help="Industry type")
408    parser.add_argument("--style", "-s", help="Design style")
409    parser.add_argument("--images", required=True, help="Directory containing CIP mockup images")
410    parser.add_argument("--output", "-o", help="Output HTML file path")
411 
412    args = parser.parse_args()
413 
414    generate_html(
415        brand_name=args.brand,
416        industry=args.industry,
417        images_dir=args.images,
418        output_path=args.output,
419        style=args.style
420    )
421 
422 
423if __name__ == "__main__":
424    main()
425