{"id":"478b7180-8d68-4adb-956d-0ae60c3a180e","name":"Terminal Code Card","slug":"terminal-code-card","category":"code-snippet-images","description":"A polished code snippet card with macOS-style window chrome on a deep violet gradient — perfect for sharing code on social media, docs and changelogs.","sample_params":{"code":"const url = new URL(base + '/image/card');\nurl.searchParams.set('title', 'Hello world');\n\nconst res = await fetch(url);\nconst image = await res.arrayBuffer();","title":"render.ts"},"spec":{"name":"terminal-code-card","width":1200,"height":630,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003cstyle\u003e\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml, body { width: 100%; height: 100%; }\n.canvas {\n  width: 100vw; height: 100vh; overflow: hidden;\n  display: flex; align-items: center; justify-content: center;\n  background:\n    radial-gradient(900px 500px at 15% -10%, rgba(129, 90, 255, 0.55), transparent 60%),\n    radial-gradient(800px 520px at 95% 110%, rgba(56, 189, 248, 0.35), transparent 60%),\n    linear-gradient(135deg, #1b1036 0%, #2a1458 55%, #0f1b3d 100%);\n  position: relative;\n}\n.glow {\n  position: absolute; z-index: 0; width: 820px; height: 420px;\n  left: 50%; top: 50%; transform: translate(-50%, -46%);\n  background: radial-gradient(closest-side, rgba(167, 139, 250, 0.35), transparent 70%);\n}\n.window {\n  position: relative; z-index: 1;\n  width: 980px; max-height: 520px;\n  border-radius: 18px; overflow: hidden;\n  background: #0d1117;\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  box-shadow:\n    0 40px 80px rgba(5, 2, 20, 0.55),\n    0 12px 28px rgba(5, 2, 20, 0.45),\n    inset 0 1px 0 rgba(255, 255, 255, 0.06);\n  display: flex; flex-direction: column;\n}\n.chrome {\n  display: flex; align-items: center;\n  height: 56px; padding: 0 22px; flex: none;\n  background: linear-gradient(180deg, #1a2130, #141a26);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  position: relative;\n}\n.dots { display: flex; gap: 9px; }\n.dot { width: 14px; height: 14px; border-radius: 50%; }\n.dot-r { background: #ff5f57; box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25); }\n.dot-y { background: #febc2e; box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25); }\n.dot-g { background: #28c840; box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25); }\n.win-title {\n  position: absolute; left: 0; right: 0; text-align: center;\n  font: 500 19px/56px ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;\n  color: #8b95a7; letter-spacing: 0.02em;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  padding: 0 100px;\n}\n.body { padding: 30px 36px 34px; overflow: hidden; flex: 1; }\npre {\n  font: 400 23px/1.62 ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;\n  color: #dbe4f3;\n  white-space: pre-wrap; overflow-wrap: break-word;\n  overflow: hidden;\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n}\n.footer {\n  position: absolute; z-index: 1; bottom: 22px; right: 40px;\n  font: 600 16px ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;\n  color: rgba(230, 228, 255, 0.5); letter-spacing: 0.14em; text-transform: lowercase;\n}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='canvas'\u003e\n  \u003cdiv class='glow'\u003e\u003c/div\u003e\n  \u003cdiv class='window'\u003e\n    \u003cdiv class='chrome'\u003e\n      \u003cdiv class='dots'\u003e\n        \u003cspan class='dot dot-r'\u003e\u003c/span\u003e\n        \u003cspan class='dot dot-y'\u003e\u003c/span\u003e\n        \u003cspan class='dot dot-g'\u003e\u003c/span\u003e\n      \u003c/div\u003e\n      \u003cdiv class='win-title'\u003e{{.title}}\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class='body'\u003e\u003cpre\u003e{{.code}}\u003c/pre\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class='footer'\u003emedia0\u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"code":{"type":"string","required":true,"maxLen":1000,"description":"The code snippet to display. Newlines and indentation are preserved."},"title":{"type":"string","default":"snippet.ts","maxLen":80,"description":"Filename or window title shown centered in the title bar."}}}}