# Szablon obrazka OG: Makieta urządzenia

Zrzut ekranu w telefonie, tablecie, laptopie albo oknie przeglądarki narysowanym w CSS, lekko obróconym na długim, miękkim cieniu, z nagłówkiem obok.

- Slug: `device-mockup`
- Preview (real render): https://shareglint.com/storage/template-previews/device-mockup.jpg
- Page: https://shareglint.com/pl/templates/device-mockup

Dla marketingu aplikacji i SaaS, premier i wpisów w changelogu, które pokazują sam produkt. Ramkę wybierasz polem `device`; `second_screenshot` dodaje telefon przed tabletem lub laptopem, drugi telefon za pierwszym albo drugie okno za przeglądarką. Bez zrzutu ekran pokazuje narysowaną aplikację w kolorze akcentu, bez logo nazwa produktu dostaje monogram, a długi nagłówek zmniejsza się, aż się zmieści. W szerokich kadrach nagłówek stoi po lewej, a urządzenie po prawej; w kwadratowych i pionowych nagłówek idzie na górę, a urządzenie dostaje resztę miejsca — tablet w pionie staje pionowo.

## Pola

Każde pole jest opcjonalne. Za długi tekst zmniejsza się, zamiast wychodzić poza kadr; pole obrazka przyjmuje publiczny adres URL, który pobieramy po naszej stronie.

| Pole | Typ | Opis | Przykład |
|---|---|---|---|
| `headline` | tekst | Główny tekst obok urządzenia albo nad nim. (domyślnie: Your product, in a frame) | Every render, queue and cache hit on one dashboard |
| `subheadline` | tekst | Jedno–dwa zdania pod nagłówkiem; dłuższy tekst kończy się wielokropkiem po trzech wierszach. | Northwind Studio shows what your templates cost and how fast they render, live. |
| `product` | tekst | Nazwa produktu obok logo nad nagłówkiem. | Northwind Studio |
| `device` | tekst | Ramka wokół zrzutu: phone, tablet, laptop albo browser. (domyślnie: laptop) | laptop |
| `background` | tekst | Tło karty w hex, np. #1e1b4b; tekst sam przełącza się na czarny albo biały. Puste zostawia tło motywu. | #1e1b4b |
| `screenshot` | adres obrazka | Zrzut ekranu na urządzeniu; wypełnia ekran od górnej krawędzi. | https://example.com/images/dashboard.png |
| `second_screenshot` | adres obrazka | Opcjonalny drugi ekran: telefon przed tabletem lub laptopem, drugi telefon albo drugie okno przeglądarki. | https://example.com/images/phone-app.png |
| `logo` | adres obrazka | Logo produktu, kwadratowe. | https://example.com/images/logo-northwind.png |
| `accent` | kolor | Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. (domyślnie: #818cf8) | #818cf8 |
| `theme` | dark | light | Schemat kolorów: dark albo light. | — |

## Wyrenderuj go jednym żądaniem

```bash
curl -X POST "https://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "device-mockup",
    "modifications": {
        "headline": "Every render, queue and cache hit on one dashboard",
        "subheadline": "Northwind Studio shows what your templates cost and how fast they render, live.",
        "product": "Northwind Studio",
        "device": "laptop",
        "background": "#1e1b4b",
        "screenshot": "https://example.com/images/dashboard.png",
        "second_screenshot": "https://example.com/images/phone-app.png",
        "logo": "https://example.com/images/logo-northwind.png"
    }
}'
```

## Dopasuj do siebie

accent i theme zmieniasz w każdym żądaniu. Jeśli chcesz więcej, skopiuj szablon na swoje konto: dostajesz zwykły szablon HTML z tymi samymi polami, który edytujesz w panelu albo przez API. Jeśli slug jest na Twoim koncie wolny, kopia go przejmuje — Twoje integracje przechodzą na Twoją wersję bez zmiany jednej linijki.

```bash
curl -X POST "https://shareglint.com/v1/templates/library/device-mockup/copy" -H "Authorization: Bearer sk_live_YOUR_KEY"
```