---

name: template-system description: HTML infographic templates. Use when creating carousel slides or infographics.

Template System

Instagram post ve carousel icin HTML infographic sablonlari. Playwright ile PNG'ye render edilir.

11 Template

Rendering

Copyfrom app.renderer import render_html_to_png, save_html_and_render

# Direkt render
png_path = await render_html_to_png(
    html_content=html_string,
    width=1080,
    height=1080
)

# HTML + PNG kaydet
html_path, png_path = await save_html_and_render(
    html_content=html_string,
    base_name="carousel_slide_1"
)

Boyutlar

Tasarim Sabitleri (OLIVENET_DESIGN)

Renkler

Copy/* Ana Renkler - visual-guidelines.md ve templates ile senkron */
--olive-900: #1a2e1a;  /* En koyu arka plan */
--olive-800: #243524;  /* Koyu arka plan */
--olive-700: #2d4a2d;  /* Primary button */
--olive-600: #3a5f3a;  /* Hover durumlari */
--olive-500: #4a7c4a;  /* Ana marka rengi */
--olive-400: #5e9a5e;  /* Vurgu elementleri */
--olive-300: #7ab87a;  /* Acik vurgular */
--olive-200: #a3d4a3;  /* Hafif arka planlar */
--olive-100: #d1e8d1;  /* Cok acik arka plan */
--olive-50: #e8f4e8;   /* En acik arka plan */

/* Vurgu */
--sky-500: #0ea5e9;    /* Teknoloji mavisi */
--sky-400: #38bdf8;    /* Acik mavi vurgu */
--sky-300: #7dd3fc;    /* Hafif mavi vurgu */

/* Sektor Renkleri */
--emerald-500: #10b981;  /* Tarim/Sera */
--amber-500: #f59e0b;    /* Enerji */
--violet-500: #8b5cf6;   /* Kestirimci Bakim */

Font

Copyfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 700; /* Basliklar */
font-weight: 400; /* Body */

Boyutlar

Copy/* Font Sizes */
--h1: 80px;
--h2: 56px;
--h3: 40px;
--body: 32px;
--small: 24px;

/* Border Radius */
--radius-base: 10px;
--radius-card: 16px;
--radius-cta: 24px;
--radius-button: 8px;

Carousel Akisi

Copy1. Creator.create_carousel_content(topic)
   -> 5+ slide HTML array

2. Her slide icin:
   render_html_to_png(slide_html)
   -> PNG dosyasi

3. Upload to CDN (imgbb)
   -> Public URL array

4. Instagram carousel API
   -> post_carousel_to_instagram(urls, caption)

Template Data Binding

Her template JSON data alir:

Copy# Dashboard ornegi
data = {
    "title": "IoT Dashboard",
    "subtitle": "Gercek Zamanli Izleme",
    "metrics": [
        {"label": "Sicaklik", "value": "24°C"},
        {"label": "Nem", "value": "65%"}
    ]
}

Dosyalar

• templates/*.html - 11 template dosyasi
• app/renderer.py - Playwright rendering
• app/claude_helper.py - Template generation (generate_*_html fonksiyonlari)