Template System

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

11 Template

| Template | Amac | Kullanim | |----------|------|----------| | dashboard-infographic | Panel/dashboard gorunumu | Metrik gosterimi | | feature-grid-infographic | Grid layout ozellikler | Feature listeleme | | timeline-infographic | Zaman cizelgesi | Surec/tarihce | | before-after-infographic | Donusum gosterimi | Karsilastirma | | comparison-infographic | Yan yana karsilastirma | vs. icerikleri | | quote-infographic | Alinti/soz | Motivasyon | | billboard-infographic | Buyuk baslik | Dikkat cekici | | big-number-infographic | Buyuk sayi/istatistik | %75 gibi rakamlar | | process-infographic | Adim adim surec | How-to | | checklist-infographic | Kontrol listesi | Todo/checklist | | visual-template | Genel sablon | Fallback |

Rendering

from 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

| Tip | Boyut | Kullanim | |-----|-------|----------| | Instagram Post | 1080x1080 | Kare post | | Instagram Story | 1080x1920 | Dikey story | | Carousel Slide | 1080x1080 | Her slide |

Tasarim Sabitleri (OLIVENET_DESIGN)

Renkler

/* 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

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

Boyutlar

/* 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

1. 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:

# 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)