{"id":531,"date":"2026-10-18T12:48:29","date_gmt":"2026-10-18T12:48:29","guid":{"rendered":"https:\/\/ongroundmedia.com\/?page_id=531"},"modified":"2026-10-23T15:13:42","modified_gmt":"2026-10-23T15:13:42","slug":"design-visual-tools","status":"publish","type":"page","link":"https:\/\/ongroundmedia.com\/?page_id=531","title":{"rendered":"Design &#038; Visual Tools"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"531\" class=\"elementor elementor-531\">\n\t\t\t\t<div class=\"elementor-element elementor-element-640a939 e-con e-atomic-element e-flexbox-base e-default-div e-254eabf \" data-id=\"640a939\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"640a939\">\n    \t\t<div class=\"elementor-element elementor-element-bcbd428 elementor-widget elementor-widget-html\" data-id=\"bcbd428\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"utf-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<title>Free Social Media Design Tools | Image Size, QR, Stories<\/title>\r\n<meta name=\"description\" content=\"Check image sizes, preview your Instagram grid, and make quote images, story templates and QR codes. Free design tools.\">\r\n<meta name=\"robots\" content=\"index, follow, max-image-preview:large\">\r\n<meta property=\"og:type\" content=\"website\">\r\n<meta property=\"og:title\" content=\"Free Social Media Design Tools | Image Size, QR, Stories\">\r\n<meta property=\"og:description\" content=\"Check image sizes, preview your Instagram grid, and make quote images, story templates and QR codes. Free design tools.\">\r\n<meta name=\"twitter:card\" content=\"summary\">\r\n<meta name=\"theme-color\" content=\"#0F172A\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n:root{\r\n  --indigo:#4F46E5; --indigo-d:#4338CA; --navy:#0F172A; --orange:#FF6B35; --orange-d:#E85A24;\r\n  --green:#10B981; --bg:#F8FAFC; --card:#FFFFFF; --text:#1E293B; --muted:#64748B; --line:#E2E8F0;\r\n  --soft-indigo:#EEF2FF; --radius:16px;\r\n  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);\r\n}\r\n*{box-sizing:border-box}\r\nhtml{scroll-behavior:smooth}\r\nbody{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}\r\na{color:var(--indigo);text-decoration:none}\r\na:hover{text-decoration:underline}\r\n.wrap{max-width:1180px;margin:0 auto;padding:0 20px}\r\n\r\n\/* top bar *\/\r\n.topbar{background:var(--navy);color:#fff}\r\n.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}\r\n.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;letter-spacing:-.01em}\r\n.brand:hover{text-decoration:none}\r\n.brand svg{width:34px;height:34px;flex:none}\r\n.brand small{display:block;font-weight:500;font-size:11px;color:#94A3B8;letter-spacing:.04em;text-transform:uppercase;line-height:1}\r\n.topnav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}\r\n.topnav a{color:#CBD5E1;font-size:14px;font-weight:500;padding:8px 12px;border-radius:10px}\r\n.topnav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}\r\n.topnav a.on{background:rgba(255,255,255,.12);color:#fff}\r\n\r\n\/* hero *\/\r\n.hero{background:radial-gradient(900px 300px at 85% -20%,rgba(255,107,53,.35),transparent 60%),radial-gradient(700px 300px at 0% 0%,rgba(79,70,229,.55),transparent 60%),var(--navy);color:#fff;padding:44px 0 64px}\r\n.crumbs{font-size:13px;color:#94A3B8;margin-bottom:14px}\r\n.crumbs a{color:#CBD5E1}\r\n.pill{display:inline-flex;align-items:center;gap:6px;background:rgba(16,185,129,.15);color:#6EE7B7;border:1px solid rgba(16,185,129,.35);font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;margin-bottom:14px}\r\n.hero h1{margin:0 0 10px;font-size:clamp(28px,4.4vw,44px);line-height:1.1;letter-spacing:-.025em;font-weight:800}\r\n.hero p{margin:0;max-width:680px;color:#CBD5E1;font-size:clamp(15px,1.6vw,18px)}\r\n.main{margin-top:-36px;padding-bottom:56px}\r\n\r\n\/* cards & layout *\/\r\n.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}\r\n.card h2{font-size:17px;margin:0 0 14px;letter-spacing:-.01em}\r\n.layout{display:grid;grid-template-columns:minmax(300px,400px) 1fr;gap:20px;align-items:start}\r\n.stack{display:grid;gap:16px}\r\n.sticky{position:sticky;top:16px}\r\n.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}\r\n.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}\r\n@media(max-width:900px){.layout{grid-template-columns:1fr}.sticky{position:static}}\r\n@media(max-width:520px){.row{grid-template-columns:1fr}.card{padding:16px}}\r\n\r\n\/* form controls *\/\r\nlabel,.lbl{display:block;font-size:13px;font-weight:600;color:var(--text);margin:0 0 6px}\r\n.field{margin-bottom:14px}\r\n.field:last-child{margin-bottom:0}\r\ninput[type=text],input[type=url],input[type=number],input[type=tel],input[type=password],input[type=search],select,textarea{\r\n  width:100%;font:inherit;font-size:15px;color:var(--text);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;transition:border-color .15s, box-shadow .15s}\r\ntextarea{resize:vertical;min-height:96px}\r\ninput:focus,select:focus,textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 4px rgba(79,70,229,.14)}\r\ninput[type=color]{width:100%;height:44px;border:1.5px solid var(--line);border-radius:12px;padding:3px;background:#fff;cursor:pointer}\r\ninput[type=range]{width:100%;accent-color:var(--indigo)}\r\n.hint{font-size:12.5px;color:var(--muted);margin-top:6px}\r\n.val{float:right;font-weight:500;color:var(--muted)}\r\n.check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;cursor:pointer;margin:0}\r\n.check input{width:18px;height:18px;accent-color:var(--indigo)}\r\n\r\n\/* buttons *\/\r\n.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;font-size:14.5px;border:0;border-radius:12px;padding:11px 18px;cursor:pointer;transition:transform .08s, background .15s, box-shadow .15s;background:var(--indigo);color:#fff}\r\n.btn:hover{background:var(--indigo-d);text-decoration:none}\r\n.btn:active{transform:translateY(1px)}\r\n.btn.orange{background:var(--orange);box-shadow:0 6px 16px rgba(255,107,53,.3)}\r\n.btn.orange:hover{background:var(--orange-d)}\r\n.btn.ghost{background:#fff;color:var(--text);border:1.5px solid var(--line)}\r\n.btn.ghost:hover{background:var(--soft-indigo);border-color:#C7D2FE}\r\n.btn.sm{padding:7px 12px;font-size:13px;border-radius:10px}\r\n.btn:disabled{opacity:.5;cursor:not-allowed}\r\n.btns{display:flex;gap:10px;flex-wrap:wrap}\r\n\r\n\/* tabs \/ chips *\/\r\n.tabs{display:flex;gap:6px;flex-wrap:wrap}\r\n.tab{font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:all .15s}\r\n.tab:hover{color:var(--indigo);border-color:#C7D2FE}\r\n.tab.on{background:var(--indigo);border-color:var(--indigo);color:#fff}\r\n.swatches{display:flex;gap:8px;flex-wrap:wrap}\r\n.sw{width:36px;height:36px;border-radius:10px;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer;transition:transform .1s}\r\n.sw:hover{transform:scale(1.08)}\r\n.sw.on{box-shadow:0 0 0 2.5px var(--indigo)}\r\n\r\n\/* SEO content *\/\r\n.seo{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:20px}\r\n@media(max-width:800px){.seo{grid-template-columns:1fr}}\r\n.seo ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14.5px}\r\ndetails{border-bottom:1px solid var(--line);padding:10px 0}\r\ndetails:last-child{border:0}\r\nsummary{cursor:pointer;font-weight:600;font-size:14.5px}\r\ndetails p{margin:8px 0 0;font-size:14px;color:var(--muted)}\r\n\r\nfooter{border-top:1px solid var(--line);padding:22px 0;color:var(--muted);font-size:13.5px;background:#fff}\r\nfooter .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}\r\n\r\n.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:11px 18px;border-radius:12px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:all .25s;z-index:99;box-shadow:0 10px 30px rgba(15,23,42,.3)}\r\n.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}\r\n.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}\r\n:focus-visible{outline:3px solid rgba(79,70,229,.45);outline-offset:2px}\r\n\r\n\r\n.topbar .wrap{height:60px}\r\n.switch{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}\r\n.switch .wrap{display:flex;gap:6px;overflow-x:auto;padding:9px 20px;scrollbar-width:none}\r\n.switch .wrap::-webkit-scrollbar{display:none}\r\n.sp{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted);padding:8px 14px;border-radius:999px;white-space:nowrap;transition:all .15s}\r\n.sp svg{width:17px;height:17px}\r\n.sp:hover{color:var(--indigo);background:var(--soft-indigo);text-decoration:none}\r\n.sp.on{background:var(--indigo);color:#fff;box-shadow:0 4px 12px rgba(79,70,229,.3)}\r\n.panel[hidden]{display:none!important}\r\n.sticky{top:76px}\r\n.hero.compact{padding:26px 0 56px}\r\n.hero.compact h1{font-size:clamp(26px,3.6vw,38px)}\r\n.hero.compact p{font-size:clamp(14.5px,1.5vw,17px)}\r\n.hsearch{position:relative;max-width:560px;margin-top:24px}\r\n.hsearch svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted);pointer-events:none}\r\n.hsearch input{padding:15px 16px 15px 46px;border-radius:14px;border:0;font-size:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}\r\n.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}\r\n.tool{display:block;position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow);color:var(--text);transition:transform .18s,border-color .18s,box-shadow .18s}\r\n.tool:hover{text-decoration:none;transform:translateY(-4px);border-color:#C7D2FE;box-shadow:0 14px 34px rgba(79,70,229,.14)}\r\n.tool[hidden]{display:none}\r\n.tool .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff);margin-bottom:16px}\r\n.tool .ic svg{width:26px;height:26px}\r\n.tool .tg{position:absolute;top:22px;right:22px;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);padding:3px 10px;border-radius:999px}\r\n.tool h3{font-size:18px;margin:0 0 6px;letter-spacing:-.01em}\r\n.tool p{margin:0 0 14px;color:var(--muted);font-size:14.5px}\r\n.tool .go{font-weight:700;color:var(--indigo);font-size:14px}\r\n.tasks{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}\r\n.task{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;color:var(--text);font-size:14.5px;font-weight:500;transition:all .15s}\r\n.task b{color:var(--indigo)}\r\n.task:hover{text-decoration:none;border-color:#C7D2FE;background:var(--soft-indigo)}\r\n.more{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}\r\n.more h2{font-size:18px;margin:0 0 14px}\r\n.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}\r\n.mini{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:var(--text);transition:all .15s}\r\n.mini:hover{text-decoration:none;border-color:#C7D2FE;transform:translateY(-2px);box-shadow:var(--shadow)}\r\n.mini .ic{flex:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff)}\r\n.mini .ic svg{width:20px;height:20px}\r\n.mini b{display:block;font-size:14px;line-height:1.25}\r\n.mini span{font-size:12.5px;color:var(--muted);line-height:1.3;display:block}\r\n@media(max-width:600px){.topbar .topnav{display:none}}\r\n\r\n<\/style>\r\n<script type=\"application\/ld+json\">{\"@context\": \"https:\/\/schema.org\", \"@type\": \"CollectionPage\", \"name\": \"Social Media Design & Visual Tools\", \"description\": \"Check image sizes, preview your Instagram grid, and make quote images, story templates and QR codes. Free design tools.\", \"mainEntity\": {\"@type\": \"ItemList\", \"itemListElement\": [{\"@type\": \"ListItem\", \"position\": 1, \"item\": {\"@type\": \"WebApplication\", \"name\": \"Social Media Image Size Guide\", \"description\": \"Image and video sizes for Instagram, Facebook, LinkedIn, X and YouTube in one place. Free social media size cheat sheet.\", \"url\": \"#social-media-image-size-guide\", \"applicationCategory\": \"DesignApplication\", \"operatingSystem\": \"Any\", \"offers\": {\"@type\": \"Offer\", \"price\": \"0\", \"priceCurrency\": \"USD\"}}}, {\"@type\": \"ListItem\", \"position\": 2, \"item\": {\"@type\": \"WebApplication\", \"name\": \"Instagram Grid Preview\", \"description\": \"Upload images and preview how your Instagram grid will look. Plan a clean, consistent feed. Free tool.\", \"url\": \"#instagram-grid-preview\", \"applicationCategory\": \"DesignApplication\", \"operatingSystem\": \"Any\", \"offers\": {\"@type\": \"Offer\", \"price\": \"0\", \"priceCurrency\": \"USD\"}}}, {\"@type\": \"ListItem\", \"position\": 3, \"item\": {\"@type\": \"WebApplication\", \"name\": \"QR Code Generator\", \"description\": \"Create a QR code for any link, Instagram profile or WhatsApp chat. Download as PNG. Free QR code generator.\", \"url\": \"#qr-code-generator\", \"applicationCategory\": \"DesignApplication\", \"operatingSystem\": \"Any\", \"offers\": {\"@type\": \"Offer\", \"price\": \"0\", \"priceCurrency\": \"USD\"}}}, {\"@type\": \"ListItem\", \"position\": 4, \"item\": {\"@type\": \"WebApplication\", \"name\": \"Quote Image Maker\", \"description\": \"Turn any quote into a stylish image for Instagram, Facebook and LinkedIn. Pick colors and sizes. Free quote maker.\", \"url\": \"#quote-image-maker\", \"applicationCategory\": \"DesignApplication\", \"operatingSystem\": \"Any\", \"offers\": {\"@type\": \"Offer\", \"price\": \"0\", \"priceCurrency\": \"USD\"}}}, {\"@type\": \"ListItem\", \"position\": 5, \"item\": {\"@type\": \"WebApplication\", \"name\": \"Story Template Maker\", \"description\": \"Create Instagram and Facebook story designs in 9:16 size. Add text and colors, then download. Free story maker.\", \"url\": \"#story-template-maker\", \"applicationCategory\": \"DesignApplication\", \"operatingSystem\": \"Any\", \"offers\": {\"@type\": \"Offer\", \"price\": \"0\", \"priceCurrency\": \"USD\"}}}]}}<\/script>\r\n<\/head>\r\n<body>\r\n<header class=\"topbar\"><div class=\"wrap\">\r\n  <a class=\"brand\" href=\"#home\"><svg viewBox=\"0 0 40 40\" aria-hidden=\"true\"><circle cx=\"20\" cy=\"20\" r=\"16\" fill=\"none\" stroke=\"#FF6B35\" stroke-width=\"4\"\/><rect x=\"12\" y=\"21\" width=\"4\" height=\"8\" rx=\"1\" fill=\"#fff\"\/><rect x=\"18\" y=\"16\" width=\"4\" height=\"13\" rx=\"1\" fill=\"#fff\"\/><rect x=\"24\" y=\"12\" width=\"4\" height=\"17\" rx=\"1\" fill=\"#fff\"\/><path d=\"M27 3l7 0-0 7\" fill=\"none\" stroke=\"#FF6B35\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"translate(-1 2)\"\/><\/svg><span>Onground Media<small>Free marketing tools<\/small><\/span><\/a>\r\n  <nav class=\"topnav\" aria-label=\"Main\"><a href=\"#home\">Design &amp; Visual Tools<\/a><\/nav>\r\n<\/div><\/header>\r\n<nav class=\"switch\" aria-label=\"Design tools\"><div class=\"wrap\"><a class=\"sp\" href=\"#home\" data-route=\"home\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 11l9-8 9 8\"\/><path d=\"M5 10v10h14V10\"\/><\/svg><span>All tools<\/span><\/a><a class=\"sp\" href=\"#social-media-image-size-guide\" data-route=\"social-media-image-size-guide\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg><span>Size Guide<\/span><\/a><a class=\"sp\" href=\"#instagram-grid-preview\" data-route=\"instagram-grid-preview\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"\/><\/svg><span>Grid Preview<\/span><\/a><a class=\"sp\" href=\"#qr-code-generator\" data-route=\"qr-code-generator\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><path d=\"M14 14h3v3h-3zM20 14v.01M14 20h.01M17 20h4v-3\"\/><\/svg><span>QR Code<\/span><\/a><a class=\"sp\" href=\"#quote-image-maker\" data-route=\"quote-image-maker\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M7 7h4v5a4 4 0 0 1-4 4M15 7h4v5a4 4 0 0 1-4 4\"\/><\/svg><span>Quote Maker<\/span><\/a><a class=\"sp\" href=\"#story-template-maker\" data-route=\"story-template-maker\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"6\" y=\"2\" width=\"12\" height=\"20\" rx=\"3\"\/><path d=\"M9 7h6M9 11h6M10 17h4\"\/><\/svg><span>Story Maker<\/span><\/a><\/div><\/nav>\r\n<div class=\"panel\" data-route=\"home\">\r\n<section class=\"hero\"><div class=\"wrap\">\r\n  <div class=\"crumbs\">Free Marketing Tools \/ Design &amp; Visual Tools<\/div>\r\n  <span class=\"pill\">\u25cf 5 free tools \u00b7 No signup \u00b7 Runs in your browser<\/span>\r\n  <h1>Social Media Design &amp; Visual Tools<\/h1>\r\n  <p>Get image sizes right, preview your feed and create quote posts, stories and QR codes without a designer.<\/p>\r\n  <div class=\"hsearch\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M20 20l-3.5-3.5\"\/><\/svg>\r\n  <label for=\"hm-q\" class=\"sr\">Find a tool<\/label><input type=\"search\" id=\"hm-q\" placeholder=\"Find a tool: try \u201cQR\u201d, \u201cstory\u201d, \u201csize\u201d, \u201cgrid\u201d\u2026\" autocomplete=\"off\"><\/div>\r\n<\/div><\/section>\r\n<main class=\"wrap main\">\r\n  <div class=\"hub\" id=\"hm-hub\"><a class=\"tool\" href=\"#social-media-image-size-guide\" data-k=\"social media image size guide size sizes dimensions resolution pixels instagram facebook linkedin youtube twitter x pinterest tiktok whatsapp story reel cover banner thumbnail profile cheat sheet reference\">\r\n  <div class=\"ic\" style=\"--c:#4F46E5\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg><\/div><span class=\"tg\">Reference<\/span>\r\n  <h3>Social Media Image Size Guide<\/h3><p>See the right image size for every platform.<\/p><span class=\"go\">Open tool \u2192<\/span><\/a><a class=\"tool\" href=\"#instagram-grid-preview\" data-k=\"instagram grid preview instagram grid feed preview layout plan profile aesthetic posts order drag planning\">\r\n  <div class=\"ic\" style=\"--c:#E1306C\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"\/><\/svg><\/div><span class=\"tg\">Planning<\/span>\r\n  <h3>Instagram Grid Preview<\/h3><p>Preview how your feed will look before you post.<\/p><span class=\"go\">Open tool \u2192<\/span><\/a><a class=\"tool\" href=\"#qr-code-generator\" data-k=\"qr code generator qr code generator link website url instagram profile whatsapp wifi text scan png svg download generator\">\r\n  <div class=\"ic\" style=\"--c:#0F172A\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><path d=\"M14 14h3v3h-3zM20 14v.01M14 20h.01M17 20h4v-3\"\/><\/svg><\/div><span class=\"tg\">Generator<\/span>\r\n  <h3>QR Code Generator<\/h3><p>Make a QR code for your profile, website or WhatsApp.<\/p><span class=\"go\">Open tool \u2192<\/span><\/a><a class=\"tool\" href=\"#quote-image-maker\" data-k=\"quote image maker quote image maker post creator text design instagram facebook linkedin pinterest motivational typography design\">\r\n  <div class=\"ic\" style=\"--c:#FF6B35\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M7 7h4v5a4 4 0 0 1-4 4M15 7h4v5a4 4 0 0 1-4 4\"\/><\/svg><\/div><span class=\"tg\">Design<\/span>\r\n  <h3>Quote Image Maker<\/h3><p>Turn text into a clean, shareable quote post.<\/p><span class=\"go\">Open tool \u2192<\/span><\/a><a class=\"tool\" href=\"#story-template-maker\" data-k=\"story template maker story template maker instagram facebook 9:16 vertical sale announcement reel design design\">\r\n  <div class=\"ic\" style=\"--c:#10B981\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"6\" y=\"2\" width=\"12\" height=\"20\" rx=\"3\"\/><path d=\"M9 7h6M9 11h6M10 17h4\"\/><\/svg><\/div><span class=\"tg\">Design<\/span>\r\n  <h3>Story Template Maker<\/h3><p>Create 9:16 story designs in a few clicks.<\/p><span class=\"go\">Open tool \u2192<\/span><\/a><\/div>\r\n  <p class=\"hint\" id=\"hm-empty\" style=\"display:none;text-align:center;padding:24px 0\">No tool matches that search. Try \u201cQR\u201d, \u201cstory\u201d, \u201csize\u201d, \u201cgrid\u201d or \u201cquote\u201d.<\/p>\r\n  <div class=\"card\" style=\"margin-top:26px\"><h2>What do you want to do?<\/h2><div class=\"tasks\"><a class=\"task\" href=\"#social-media-image-size-guide\"><span>Find the right size for an Instagram Story<\/span><b>\u2192<\/b><\/a><a class=\"task\" href=\"#instagram-grid-preview\"><span>Check how my next 9 posts will look together<\/span><b>\u2192<\/b><\/a><a class=\"task\" href=\"#qr-code-generator\"><span>Make a QR code for my WhatsApp number<\/span><b>\u2192<\/b><\/a><a class=\"task\" href=\"#qr-code-generator\"><span>Link my Instagram profile with a QR code<\/span><b>\u2192<\/b><\/a><a class=\"task\" href=\"#quote-image-maker\"><span>Design a quote post for LinkedIn<\/span><b>\u2192<\/b><\/a><a class=\"task\" href=\"#story-template-maker\"><span>Create a 9:16 sale story<\/span><b>\u2192<\/b><\/a><a class=\"task\" href=\"#social-media-image-size-guide\"><span>Find the YouTube thumbnail size<\/span><b>\u2192<\/b><\/a><a class=\"task\" href=\"#quote-image-maker\"><span>Turn my favorite line into a shareable image<\/span><b>\u2192<\/b><\/a><\/div><\/div>\r\n  <div class=\"seo\">\r\n    <div class=\"card\"><h2>How these tools work<\/h2>\r\n      <ol><li>Pick a tool from the cards or the bar at the top of the page.<\/li><li>Type your text, upload your images or choose a template.<\/li><li>Download the result as PNG, JPG or SVG. Nothing is uploaded to a server.<\/li><\/ol><\/div>\r\n    <div class=\"card\"><h2>Questions<\/h2>\r\n      <details><summary>Are the tools really free?<\/summary><p>Yes. They are free, need no account and add no watermark.<\/p><\/details>\r\n      <details><summary>Do my images leave my device?<\/summary><p>No. Everything runs in your browser, so photos and text stay on your device.<\/p><\/details>\r\n      <details><summary>Can I use the designs for business?<\/summary><p>Yes. The images you make are yours to use on any social media account or in print.<\/p><\/details>\r\n    <\/div>\r\n  <\/div>\r\n<\/main><\/div>\r\n<div class=\"panel\" id=\"tool-sg\" data-route=\"social-media-image-size-guide\" hidden><section class=\"hero compact\"><div class=\"wrap\">\r\n  <div class=\"crumbs\"><a href=\"#home\">All design tools<\/a> \/ Image Size Guide<\/div>\r\n  <span class=\"pill\">\u25cf Free cheat sheet \u00b7 Instagram, Facebook, LinkedIn, X, YouTube &amp; more<\/span>\r\n  <h1>Social Media Image Size Guide<\/h1>\r\n  <p>Every image and video size you need in one place. Filter by platform, search by post type and copy any size in one click.<\/p>\r\n<\/div><\/section>\r\n\r\n<main class=\"wrap main\">\r\n  <div class=\"card\" style=\"padding:16px 18px;margin-bottom:18px\">\r\n    <div style=\"display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between\">\r\n      <div class=\"tabs\" id=\"sg-tabs\" role=\"tablist\"><\/div>\r\n      <div style=\"flex:1;min-width:220px;max-width:340px\">\r\n        <label for=\"sg-q\" class=\"sr\">Search sizes<\/label>\r\n        <input type=\"search\" id=\"sg-q\" placeholder=\"Search: story, cover, thumbnail\u2026\">\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div id=\"sg-out\"><\/div>\r\n  <p class=\"hint\" id=\"sg-empty\" style=\"display:none;text-align:center;padding:30px 0\">No sizes match your search. Try \u201cstory\u201d, \u201ccover\u201d or \u201cprofile\u201d.<\/p>\r\n  <p class=\"hint\" style=\"margin-top:18px\">Sizes are the commonly recommended upload dimensions in pixels. Platforms change layouts and crops from time to time, so check the platform's help page before a big campaign. Export as JPG or PNG and keep files light for faster loading.<\/p>\r\n\r\n  <div class=\"seo\">\r\n    <div class=\"card\"><h2>How to use this guide<\/h2>\r\n      <ol><li>Pick a platform, or stay on All.<\/li><li>Find your post type, for example Story, Cover or Thumbnail.<\/li><li>Click <b>Copy size<\/b> and paste it into Canva, Photoshop, Figma or your editor.<\/li><li>Keep key text away from the edges so crops never cut it off.<\/li><\/ol><\/div>\r\n    <div class=\"card\"><h2>Questions<\/h2>\r\n      <details><summary>What is the best Instagram post size?<\/summary><p>Portrait 1080 \u00d7 1350 px (4:5) takes the most feed space. Square 1080 \u00d7 1080 px also works well.<\/p><\/details>\r\n      <details><summary>What size is a Story or Reel?<\/summary><p>1080 \u00d7 1920 px at 9:16. Leave roughly the top and bottom 250 px free of text because buttons and captions sit there.<\/p><\/details>\r\n      <details><summary>Do I need to match sizes exactly?<\/summary><p>Matching the ratio matters most. A larger image with the same ratio stays sharp and is resized by the platform.<\/p><\/details>\r\n    <\/div>\r\n  <\/div>\r\n<div class=\"more\" data-self=\"social-media-image-size-guide\"><\/div><\/main>\r\n\r\n\r\n<style>\r\n.gridc{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}\r\n.sz{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;grid-template-columns:76px 1fr;gap:4px 14px;align-items:center;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}\r\n.sz:hover{transform:translateY(-2px);border-color:#C7D2FE}\r\n.sz .shape{width:76px;height:76px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:12px}\r\n.sz h3{margin:0;font-size:14.5px;letter-spacing:-.01em}\r\n.sz .dim{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--indigo);margin-top:2px}\r\n.sz .dim span{font-size:12px;font-weight:600;color:var(--muted)}\r\n.sz .rt{display:inline-block;font-size:11.5px;font-weight:700;background:var(--soft-indigo);color:var(--indigo);padding:2px 8px;border-radius:999px;margin-top:2px}\r\n.sz p{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}\r\n.sz .cpy{grid-column:1\/-1;margin-top:10px}\r\n<\/style>\r\n<\/div><div class=\"panel\" id=\"tool-gp\" data-route=\"instagram-grid-preview\" hidden><section class=\"hero compact\"><div class=\"wrap\">\r\n  <div class=\"crumbs\"><a href=\"#home\">All design tools<\/a> \/ Instagram Grid Preview<\/div>\r\n  <span class=\"pill\">\u25cf Free \u00b7 Your images never leave your device<\/span>\r\n  <h1>Instagram Grid Preview<\/h1>\r\n  <p>Upload your posts, drag them into order and see exactly how your profile will look before you publish. Plan a clean, consistent feed.<\/p>\r\n<\/div><\/section>\r\n\r\n<main class=\"wrap main\">\r\n<div class=\"layout\">\r\n  <div class=\"stack\">\r\n    <div class=\"card\">\r\n      <h2>1. Add your images<\/h2>\r\n      <label class=\"drop\" id=\"gp-drop\" for=\"gp-file\">\r\n        <div class=\"di\">\u2b06<\/div>\r\n        <b>Drop images here or click to upload<\/b>\r\n        <span>JPG, PNG or WebP \u00b7 select many at once<\/span>\r\n      <\/label>\r\n      <input type=\"file\" id=\"gp-file\" accept=\"image\/*\" multiple class=\"sr\">\r\n      <div class=\"btns\" style=\"margin-top:12px\">\r\n        <button class=\"btn ghost sm\" id=\"gp-b-sample\">Load sample posts<\/button>\r\n        <button class=\"btn ghost sm\" id=\"gp-b-shuffle\">Shuffle<\/button>\r\n        <button class=\"btn ghost sm\" id=\"gp-b-reverse\">Reverse<\/button>\r\n        <button class=\"btn ghost sm\" id=\"gp-b-clear\">Clear all<\/button>\r\n      <\/div>\r\n      <p class=\"hint\">Newest post goes top-left, just like Instagram. Drag tiles to reorder, or tap a tile to move it.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"card\">\r\n      <h2>2. Grid settings<\/h2>\r\n      <div class=\"row\">\r\n        <div class=\"field\"><label for=\"gp-s-ratio\">Tile shape<\/label>\r\n          <select id=\"gp-s-ratio\"><option value=\"3\/4\" selected>Portrait 3:4 (current)<\/option><option value=\"1\/1\">Square 1:1 (classic)<\/option><option value=\"4\/5\">Portrait 4:5 (older)<\/option><\/select><\/div>\r\n        <div class=\"field\"><label for=\"gp-s-gap\">Tile spacing<\/label>\r\n          <select id=\"gp-s-gap\"><option value=\"2\">Thin<\/option><option value=\"0\">None<\/option><option value=\"8\">Wide<\/option><\/select><\/div>\r\n      <\/div>\r\n      <div class=\"field\"><span class=\"lbl\">Theme<\/span>\r\n        <div class=\"tabs\" id=\"gp-theme\"><button class=\"tab on\" data-t=\"light\">Light<\/button><button class=\"tab\" data-t=\"dark\">Dark<\/button><\/div><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"card\">\r\n      <h2>3. Profile details <span style=\"font-weight:500;color:var(--muted);font-size:13px\">(optional)<\/span><\/h2>\r\n      <div class=\"row\">\r\n        <div class=\"field\"><label for=\"gp-p-user\">Username<\/label><input type=\"text\" id=\"gp-p-user\" value=\"yourbrand\" maxlength=\"30\"><\/div>\r\n        <div class=\"field\"><label for=\"gp-p-name\">Name<\/label><input type=\"text\" id=\"gp-p-name\" value=\"Your Brand\" maxlength=\"40\"><\/div>\r\n      <\/div>\r\n      <div class=\"field\"><label for=\"gp-p-bio\">Bio<\/label><textarea id=\"gp-p-bio\" style=\"min-height:70px\" maxlength=\"150\">Helping people grow online \u2728&#10;Tips, templates &amp; ideas<\/textarea><\/div>\r\n      <div class=\"row\">\r\n        <div class=\"field\"><label for=\"gp-p-fol\">Followers<\/label><input type=\"text\" id=\"gp-p-fol\" value=\"12.4K\" maxlength=\"8\"><\/div>\r\n        <div class=\"field\"><label for=\"gp-p-ing\">Following<\/label><input type=\"text\" id=\"gp-p-ing\" value=\"380\" maxlength=\"8\"><\/div>\r\n      <\/div>\r\n      <div class=\"field\"><label for=\"gp-p-av\">Profile photo<\/label><input type=\"file\" id=\"gp-p-av\" accept=\"image\/*\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"sticky\">\r\n    <div class=\"card\" style=\"padding:18px\">\r\n      <div class=\"btns\" style=\"justify-content:space-between;align-items:center;margin-bottom:14px\">\r\n        <h2 style=\"margin:0\">Live preview<\/h2>\r\n        <button class=\"btn orange sm\" id=\"gp-b-dl\">\u2b07 Download grid PNG<\/button>\r\n      <\/div>\r\n      <div class=\"phone\"><div class=\"ig\" id=\"gp-ig\">\r\n        <div class=\"ig-top\"><span id=\"gp-v-user\" class=\"ig-user\">yourbrand<\/span><\/div>\r\n        <div class=\"ig-head\">\r\n          <div class=\"ig-av\"><div id=\"gp-v-av\"><\/div><\/div>\r\n          <div class=\"ig-stats\">\r\n            <div><b id=\"gp-v-posts\">0<\/b><span>posts<\/span><\/div>\r\n            <div><b id=\"gp-v-fol\">0<\/b><span>followers<\/span><\/div>\r\n            <div><b id=\"gp-v-ing\">0<\/b><span>following<\/span><\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"ig-bio\"><b id=\"gp-v-name\"><\/b><div id=\"gp-v-bio\"><\/div><\/div>\r\n        <div class=\"ig-btns\"><span class=\"fol\">Follow<\/span><span>Message<\/span><\/div>\r\n        <div class=\"ig-tabs\"><span class=\"on\">\u25a6<\/span><span>\u25b7<\/span><span>\u263a<\/span><\/div>\r\n        <div class=\"grid\" id=\"gp-grid\"><\/div>\r\n      <\/div><\/div>\r\n      <div class=\"selbar\" id=\"gp-selbar\" hidden>\r\n        <span id=\"gp-seltxt\">Selected<\/span>\r\n        <div class=\"btns\">\r\n          <button class=\"btn ghost sm\" id=\"gp-m-first\">\u21f1 Make first<\/button>\r\n          <button class=\"btn ghost sm\" id=\"gp-m-left\">\u2190 Earlier<\/button>\r\n          <button class=\"btn ghost sm\" id=\"gp-m-right\">Later \u2192<\/button>\r\n          <button class=\"btn ghost sm\" id=\"gp-m-del\">\u2715 Remove<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"seo\">\r\n  <div class=\"card\"><h2>How to plan your Instagram feed<\/h2>\r\n    <ol><li>Upload the images you plan to post.<\/li><li>Drag them into the order you want. The first tile is your newest post.<\/li><li>Check colors, spacing and rhythm across rows. Try a theme and tile shape.<\/li><li>Download the grid as a PNG to share with your team or client.<\/li><\/ol><\/div>\r\n  <div class=\"card\"><h2>Questions<\/h2>\r\n    <details><summary>Are my images uploaded anywhere?<\/summary><p>No. Everything runs in your browser. Your photos stay on your device.<\/p><\/details>\r\n    <details><summary>What grid shape does Instagram use?<\/summary><p>Profile grids now show 3:4 portrait tiles. You can also preview the classic square and older 4:5 shapes.<\/p><\/details>\r\n    <details><summary>How do I keep a feed looking consistent?<\/summary><p>Repeat a color palette, alternate close-ups with wide shots, and leave a plain post between busy ones.<\/p><\/details>\r\n  <\/div>\r\n<\/div>\r\n<div class=\"more\" data-self=\"instagram-grid-preview\"><\/div><\/main>\r\n\r\n<style>\r\n.drop{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:2px dashed #C7D2FE;background:var(--soft-indigo);border-radius:14px;padding:26px 14px;cursor:pointer;transition:all .15s;font-size:14.5px;margin:0}\r\n.drop:hover,.drop.over{border-color:var(--indigo);background:#E0E7FF}\r\n.drop .di{width:44px;height:44px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:6px}\r\n.drop span{color:var(--muted);font-size:13px;font-weight:400}\r\n.phone{max-width:400px;margin:0 auto;background:#0F172A;padding:10px;border-radius:34px;box-shadow:0 20px 50px rgba(15,23,42,.25)}\r\n.ig{--bg:#fff;--tx:#0F172A;--mu:#64748B;--ln:#E2E8F0;--chip:#EEF0F4;background:var(--bg);color:var(--tx);border-radius:26px;overflow:hidden;min-height:520px;transition:background .2s,color .2s}\r\n.ig.dark{--bg:#000;--tx:#F5F5F5;--mu:#A8A8A8;--ln:#262626;--chip:#262626}\r\n.ig-top{text-align:center;padding:14px 12px 8px;font-weight:700;font-size:15px}\r\n.ig-head{display:flex;align-items:center;gap:18px;padding:6px 16px}\r\n.ig-av{width:78px;height:78px;border-radius:50%;padding:3px;background:linear-gradient(45deg,#FF6B35,#E1306C,#4F46E5);flex:none}\r\n.ig-av>div{width:100%;height:100%;border-radius:50%;border:3px solid var(--bg);background:#4F46E5 center\/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:28px}\r\n.ig-stats{flex:1;display:flex;justify-content:space-around;text-align:center}\r\n.ig-stats b{display:block;font-size:16px}\r\n.ig-stats span{font-size:12.5px;color:var(--tx)}\r\n.ig-bio{padding:10px 16px;font-size:13.5px;line-height:1.4;white-space:pre-wrap}\r\n.ig-btns{display:flex;gap:6px;padding:4px 16px 12px}\r\n.ig-btns span{flex:1;text-align:center;background:var(--chip);border-radius:8px;padding:7px 0;font-size:13px;font-weight:600}\r\n.ig-btns .fol{background:#4F46E5;color:#fff}\r\n.ig-tabs{display:flex;border-top:1px solid var(--ln)}\r\n.ig-tabs span{flex:1;text-align:center;padding:9px 0;font-size:16px;color:var(--mu);border-bottom:2px solid transparent}\r\n.ig-tabs span.on{color:var(--tx);border-bottom-color:var(--tx)}\r\n.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap,2px);background:var(--bg)}\r\n.tile{position:relative;aspect-ratio:var(--ar,3\/4);background:var(--chip);overflow:hidden;cursor:grab;user-select:none}\r\n.tile img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}\r\n.tile.empty{display:flex;align-items:center;justify-content:center;color:var(--mu);font-size:22px;cursor:pointer;border:1px dashed var(--ln)}\r\n.tile.sel{outline:3px solid #FF6B35;outline-offset:-3px;z-index:2}\r\n.tile.drag{opacity:.35}\r\n.tile.target{outline:3px dashed #4F46E5;outline-offset:-3px}\r\n.tile .n{position:absolute;left:5px;top:5px;background:rgba(15,23,42,.65);color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 7px;opacity:0;transition:opacity .15s}\r\n.tile:hover .n,.tile.sel .n{opacity:1}\r\n.selbar{margin-top:14px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#FFF7F3;border:1px solid #FFD9CA;border-radius:12px;padding:10px 12px;font-size:13.5px;font-weight:600}\r\n<\/style>\r\n\r\n\r\n<\/div><div class=\"panel\" id=\"tool-qr\" data-route=\"qr-code-generator\" hidden><section class=\"hero compact\"><div class=\"wrap\">\r\n  <div class=\"crumbs\"><a href=\"#home\">All design tools<\/a> \/ QR Code Generator<\/div>\r\n  <span class=\"pill\">\u25cf Free \u00b7 No signup \u00b7 Works in your browser<\/span>\r\n  <h1>Free QR Code Generator<\/h1>\r\n  <p>Make a QR code for your website, Instagram profile or WhatsApp chat. Pick your colors, then download it as a sharp PNG or SVG.<\/p>\r\n<\/div><\/section>\r\n\r\n<main class=\"wrap main\">\r\n<div class=\"layout\">\r\n  <div class=\"stack\">\r\n    <div class=\"card\">\r\n      <h2>1. What should the QR code open?<\/h2>\r\n      <div class=\"tabs\" id=\"qr-kinds\" role=\"tablist\" style=\"margin-bottom:16px\">\r\n        <button class=\"tab on\" data-k=\"url\" role=\"tab\">Website<\/button>\r\n        <button class=\"tab\" data-k=\"ig\" role=\"tab\">Instagram<\/button>\r\n        <button class=\"tab\" data-k=\"wa\" role=\"tab\">WhatsApp<\/button>\r\n        <button class=\"tab\" data-k=\"text\" role=\"tab\">Text<\/button>\r\n        <button class=\"tab\" data-k=\"wifi\" role=\"tab\">Wi-Fi<\/button>\r\n      <\/div>\r\n\r\n      <div data-p=\"url\">\r\n        <div class=\"field\"><label for=\"qr-f-url\">Website link<\/label>\r\n        <input id=\"qr-f-url\" type=\"url\" placeholder=\"https:\/\/example.com\" value=\"https:\/\/example.com\"><\/div>\r\n      <\/div>\r\n      <div data-p=\"ig\" hidden>\r\n        <div class=\"field\"><label for=\"qr-f-ig\">Instagram username or link<\/label>\r\n        <input id=\"qr-f-ig\" type=\"text\" placeholder=\"@yourbrand\" autocomplete=\"off\"><\/div>\r\n        <p class=\"hint\">Opens your profile when scanned.<\/p>\r\n      <\/div>\r\n      <div data-p=\"wa\" hidden>\r\n        <div class=\"field\"><label for=\"qr-f-wa\">WhatsApp number (with country code)<\/label>\r\n        <input id=\"qr-f-wa\" type=\"tel\" placeholder=\"919876543210\" inputmode=\"numeric\"><\/div>\r\n        <div class=\"field\"><label for=\"qr-f-wam\">Pre-filled message (optional)<\/label>\r\n        <textarea id=\"qr-f-wam\" placeholder=\"Hi! I found you through your QR code.\" style=\"min-height:72px\"><\/textarea><\/div>\r\n        <p class=\"hint\">Enter digits only, e.g. 91 for India followed by the number. No + or spaces needed.<\/p>\r\n      <\/div>\r\n      <div data-p=\"text\" hidden>\r\n        <div class=\"field\"><label for=\"qr-f-text\">Any text<\/label>\r\n        <textarea id=\"qr-f-text\" placeholder=\"Type or paste any text\"><\/textarea><\/div>\r\n      <\/div>\r\n      <div data-p=\"wifi\" hidden>\r\n        <div class=\"field\"><label for=\"qr-f-ssid\">Network name (SSID)<\/label><input id=\"qr-f-ssid\" type=\"text\" autocomplete=\"off\"><\/div>\r\n        <div class=\"row\">\r\n          <div class=\"field\"><label for=\"qr-f-wpass\">Password<\/label><input id=\"qr-f-wpass\" type=\"text\" autocomplete=\"off\"><\/div>\r\n          <div class=\"field\"><label for=\"qr-f-wsec\">Security<\/label>\r\n            <select id=\"qr-f-wsec\"><option value=\"WPA\">WPA\/WPA2\/WPA3<\/option><option value=\"WEP\">WEP<\/option><option value=\"nopass\">None<\/option><\/select><\/div>\r\n        <\/div>\r\n        <label class=\"check\"><input type=\"checkbox\" id=\"qr-f-whid\"> Hidden network<\/label>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"card\">\r\n      <h2>2. Style it<\/h2>\r\n      <div class=\"field\"><span class=\"lbl\">Quick colors<\/span>\r\n        <div class=\"swatches\" id=\"qr-presets\"><\/div><\/div>\r\n      <div class=\"row\">\r\n        <div class=\"field\"><label for=\"qr-o-fg\">QR color<\/label><input type=\"color\" id=\"qr-o-fg\" value=\"#0F172A\"><\/div>\r\n        <div class=\"field\"><label for=\"qr-o-bg\">Background<\/label><input type=\"color\" id=\"qr-o-bg\" value=\"#FFFFFF\"><\/div>\r\n      <\/div>\r\n      <div class=\"row\">\r\n        <div class=\"field\"><label for=\"qr-o-shape\">Dot shape<\/label>\r\n          <select id=\"qr-o-shape\"><option value=\"square\">Square<\/option><option value=\"rounded\">Rounded<\/option><option value=\"dots\">Dots<\/option><\/select><\/div>\r\n        <div class=\"field\"><label for=\"qr-o-ecc\">Error correction<\/label>\r\n          <select id=\"qr-o-ecc\"><option value=\"L\">Low (smallest code)<\/option><option value=\"M\" selected>Medium<\/option><option value=\"Q\">Quartile<\/option><option value=\"H\">High (most durable)<\/option><\/select><\/div>\r\n      <\/div>\r\n      <div class=\"row\">\r\n        <div class=\"field\"><label for=\"qr-o-size\">Download size <span class=\"val\" id=\"qr-v-size\">1024 px<\/span><\/label>\r\n          <input type=\"range\" id=\"qr-o-size\" min=\"256\" max=\"2048\" step=\"128\" value=\"1024\"><\/div>\r\n        <div class=\"field\"><label for=\"qr-o-margin\">Quiet zone <span class=\"val\" id=\"qr-v-margin\">4<\/span><\/label>\r\n          <input type=\"range\" id=\"qr-o-margin\" min=\"0\" max=\"8\" step=\"1\" value=\"4\"><\/div>\r\n      <\/div>\r\n      <p class=\"hint\" id=\"qr-warn\" style=\"color:#B45309;display:none\"><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"card sticky\" style=\"text-align:center\">\r\n    <h2 style=\"text-align:left\">Your QR code<\/h2>\r\n    <div style=\"background:repeating-conic-gradient(#EEF2F7 0% 25%,#fff 0% 50%) 50%\/20px 20px;border-radius:14px;padding:18px;border:1px solid var(--line)\">\r\n      <canvas id=\"qr-cv\" width=\"512\" height=\"512\" style=\"width:100%;max-width:340px;height:auto;display:block;margin:0 auto;border-radius:6px;box-shadow:0 6px 24px rgba(15,23,42,.12)\" aria-label=\"QR code preview\"><\/canvas>\r\n    <\/div>\r\n    <p class=\"hint\" id=\"qr-info\" style=\"word-break:break-all;margin:12px 0 14px\">&nbsp;<\/p>\r\n    <div class=\"btns\" style=\"justify-content:center\">\r\n      <button class=\"btn orange\" id=\"qr-dl-png\">\u2b07 Download PNG<\/button>\r\n      <button class=\"btn ghost\" id=\"qr-dl-svg\">\u2b07 SVG<\/button>\r\n      <button class=\"btn ghost\" id=\"qr-cp\">Copy image<\/button>\r\n    <\/div>\r\n    <p class=\"hint\" style=\"margin-top:14px\">Tip: always test the code with your phone camera before printing.<\/p>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"seo\">\r\n  <div class=\"card\"><h2>How to make a QR code<\/h2>\r\n    <ol><li>Choose Website, Instagram, WhatsApp, Text or Wi-Fi.<\/li><li>Enter your link, username or number.<\/li><li>Pick colors and a dot shape that match your brand.<\/li><li>Download the PNG for social posts or the SVG for print.<\/li><\/ol><\/div>\r\n  <div class=\"card\"><h2>Questions<\/h2>\r\n    <details><summary>Is the QR code free to use?<\/summary><p>Yes. The code is generated in your browser, never expires and has no scan limits.<\/p><\/details>\r\n    <details><summary>Which color combination scans best?<\/summary><p>Dark dots on a light background. Keep strong contrast and avoid light dots on a dark background.<\/p><\/details>\r\n    <details><summary>Can I use it for print?<\/summary><p>Yes. Download the SVG, or a 2048 px PNG, and keep at least a 4-module quiet zone around the code.<\/p><\/details>\r\n  <\/div>\r\n<\/div>\r\n<div class=\"more\" data-self=\"qr-code-generator\"><\/div><\/main>\r\n\r\n\r\n\r\n<\/div><div class=\"panel\" id=\"tool-qm\" data-route=\"quote-image-maker\" hidden><section class=\"hero compact\"><div class=\"wrap\">\r\n  <div class=\"crumbs\"><a href=\"#home\">All design tools<\/a> \/ Quote Image Maker<\/div>\r\n  <span class=\"pill\">\u25cf Free \u00b7 No watermark \u00b7 Download in HD<\/span>\r\n  <h1>Free Quote Image Maker<\/h1>\r\n  <p>Turn any quote into a clean, shareable image for Instagram, Facebook, LinkedIn and more. Pick a theme, size and font, then download.<\/p>\r\n<\/div><\/section>\r\n\r\n<main class=\"wrap main\">\r\n<div class=\"layout\">\r\n  <div class=\"stack\">\r\n    <div class=\"card\">\r\n      <h2>1. Your quote<\/h2>\r\n      <div class=\"field\"><label for=\"qm-t-quote\">Quote text<\/label>\r\n        <textarea id=\"qm-t-quote\" maxlength=\"600\">The best time to start was yesterday. The next best time is now.<\/textarea><\/div>\r\n      <div class=\"row\">\r\n        <div class=\"field\"><label for=\"qm-t-author\">Author<\/label><input type=\"text\" id=\"qm-t-author\" value=\"Your Name\" maxlength=\"60\"><\/div>\r\n        <div class=\"field\"><label for=\"qm-t-handle\">Handle \/ website <span class=\"val\">optional<\/span><\/label><input type=\"text\" id=\"qm-t-handle\" placeholder=\"@yourbrand\" maxlength=\"60\"><\/div>\r\n      <\/div>\r\n      <div class=\"field\"><label for=\"qm-t-size\">Image size<\/label>\r\n        <select id=\"qm-t-size\">\r\n          <option value=\"1080x1080\">Instagram \/ Facebook square \u00b7 1080 \u00d7 1080<\/option>\r\n          <option value=\"1080x1350\">Instagram portrait \u00b7 1080 \u00d7 1350<\/option>\r\n          <option value=\"1080x1920\">Story \/ Reel \u00b7 1080 \u00d7 1920<\/option>\r\n          <option value=\"1200x630\">Facebook link post \u00b7 1200 \u00d7 630<\/option>\r\n          <option value=\"1200x627\">LinkedIn post \u00b7 1200 \u00d7 627<\/option>\r\n          <option value=\"1600x900\">X (Twitter) post \u00b7 1600 \u00d7 900<\/option>\r\n          <option value=\"1000x1500\">Pinterest pin \u00b7 1000 \u00d7 1500<\/option>\r\n        <\/select><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"card\">\r\n      <h2>2. Colors &amp; style<\/h2>\r\n      <div class=\"field\"><span class=\"lbl\">Themes<\/span><div class=\"swatches\" id=\"qm-themes\"><\/div><\/div>\r\n      <div class=\"row3\" style=\"margin-bottom:14px\">\r\n        <div><label for=\"qm-c-bg1\">Background<\/label><input type=\"color\" id=\"qm-c-bg1\" value=\"#4F46E5\"><\/div>\r\n        <div><label for=\"qm-c-bg2\">Gradient to<\/label><input type=\"color\" id=\"qm-c-bg2\" value=\"#7C3AED\"><\/div>\r\n        <div><label for=\"qm-c-tx\">Text<\/label><input type=\"color\" id=\"qm-c-tx\" value=\"#FFFFFF\"><\/div>\r\n      <\/div>\r\n      <div class=\"row\">\r\n        <div class=\"field\"><label for=\"qm-c-ac\">Accent color<\/label><input type=\"color\" id=\"qm-c-ac\" value=\"#FF6B35\"><\/div>\r\n        <div class=\"field\"><label for=\"qm-c-ang\">Gradient angle <span class=\"val\" id=\"qm-vv-ang\">135\u00b0<\/span><\/label><input type=\"range\" id=\"qm-c-ang\" min=\"0\" max=\"360\" step=\"5\" value=\"135\"><\/div>\r\n      <\/div>\r\n      <div class=\"row\">\r\n        <div class=\"field\"><label for=\"qm-s-font\">Font<\/label>\r\n          <select id=\"qm-s-font\">\r\n            <option value='Georgia, \"Times New Roman\", serif'>Georgia (serif)<\/option>\r\n            <option value='\"Palatino Linotype\", Palatino, \"Book Antiqua\", serif'>Palatino (serif)<\/option>\r\n            <option value='Arial, Helvetica, sans-serif'>Arial (clean)<\/option>\r\n            <option value='\"Trebuchet MS\", Tahoma, sans-serif'>Trebuchet (friendly)<\/option>\r\n            <option value='Verdana, Geneva, sans-serif'>Verdana (wide)<\/option>\r\n            <option value='Impact, \"Arial Black\", sans-serif'>Impact (bold)<\/option>\r\n            <option value='\"Courier New\", Courier, monospace'>Courier (typewriter)<\/option>\r\n          <\/select><\/div>\r\n        <div class=\"field\"><label for=\"qm-s-deco\">Decoration<\/label>\r\n          <select id=\"qm-s-deco\"><option value=\"circles\">Soft circles<\/option><option value=\"frame\">Frame border<\/option><option value=\"none\">None<\/option><\/select><\/div>\r\n      <\/div>\r\n      <div class=\"field\"><span class=\"lbl\">Alignment<\/span>\r\n        <div class=\"tabs\" id=\"qm-align\"><button class=\"tab\" data-a=\"left\">Left<\/button><button class=\"tab on\" data-a=\"center\">Center<\/button><button class=\"tab\" data-a=\"right\">Right<\/button><\/div><\/div>\r\n      <div style=\"display:flex;gap:18px;flex-wrap:wrap\">\r\n        <label class=\"check\"><input type=\"checkbox\" id=\"qm-k-qm\" checked> Quote mark<\/label>\r\n        <label class=\"check\"><input type=\"checkbox\" id=\"qm-k-it\"> Italic<\/label>\r\n        <label class=\"check\"><input type=\"checkbox\" id=\"qm-k-bd\" checked> Bold<\/label>\r\n        <label class=\"check\"><input type=\"checkbox\" id=\"qm-k-line\" checked> Accent line<\/label>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"card\">\r\n      <h2>3. Fine tune<\/h2>\r\n      <label class=\"check\" style=\"margin-bottom:12px\"><input type=\"checkbox\" id=\"qm-k-auto\" checked> Auto-fit text size<\/label>\r\n      <div class=\"field\" id=\"qm-fs-wrap\" style=\"opacity:.5\"><label for=\"qm-r-fs\">Text size <span class=\"val\" id=\"qm-vv-fs\">8%<\/span><\/label><input type=\"range\" id=\"qm-r-fs\" min=\"3\" max=\"14\" step=\"0.5\" value=\"8\" disabled><\/div>\r\n      <div class=\"field\"><label for=\"qm-r-pad\">Margins <span class=\"val\" id=\"qm-vv-pad\">10%<\/span><\/label><input type=\"range\" id=\"qm-r-pad\" min=\"5\" max=\"20\" step=\"1\" value=\"10\"><\/div>\r\n      <div class=\"field\"><label for=\"qm-i-bg\">Background photo <span class=\"val\">optional<\/span><\/label><input type=\"file\" id=\"qm-i-bg\" accept=\"image\/*\"><\/div>\r\n      <div class=\"field\" id=\"qm-ov-wrap\" hidden><label for=\"qm-r-ov\">Photo darkness <span class=\"val\" id=\"qm-vv-ov\">45%<\/span><\/label><input type=\"range\" id=\"qm-r-ov\" min=\"0\" max=\"90\" step=\"5\" value=\"45\">\r\n        <button class=\"btn ghost sm\" id=\"qm-b-rmbg\" style=\"margin-top:8px\">Remove photo<\/button><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"card sticky\" style=\"text-align:center\">\r\n    <h2 style=\"text-align:left\">Preview<\/h2>\r\n    <div style=\"background:#EEF2F7;border-radius:14px;padding:14px;display:flex;justify-content:center\">\r\n      <canvas id=\"qm-cv\" width=\"1080\" height=\"1080\" style=\"max-width:100%;max-height:68vh;width:auto;height:auto;border-radius:8px;box-shadow:0 10px 30px rgba(15,23,42,.2)\" aria-label=\"Quote image preview\"><\/canvas>\r\n    <\/div>\r\n    <p class=\"hint\" id=\"qm-dim\" style=\"margin:10px 0 14px\">1080 \u00d7 1080 px<\/p>\r\n    <div class=\"btns\" style=\"justify-content:center\">\r\n      <button class=\"btn orange\" id=\"qm-dl-png\">\u2b07 Download PNG<\/button>\r\n      <button class=\"btn ghost\" id=\"qm-dl-jpg\">\u2b07 JPG<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"seo\">\r\n  <div class=\"card\"><h2>How to make a quote image<\/h2>\r\n    <ol><li>Type your quote and the author's name.<\/li><li>Choose the size for Instagram, Facebook, LinkedIn or a Story.<\/li><li>Pick a theme, font and alignment. Add your handle so people can find you.<\/li><li>Download the image and post it.<\/li><\/ol><\/div>\r\n  <div class=\"card\"><h2>Questions<\/h2>\r\n    <details><summary>Is there a watermark?<\/summary><p>No. Your image is clean and ready to post.<\/p><\/details>\r\n    <details><summary>Can I use my own photo as the background?<\/summary><p>Yes. Upload a photo and use the darkness slider so the text stays easy to read.<\/p><\/details>\r\n    <details><summary>What is the best size for Instagram?<\/summary><p>Use 1080 \u00d7 1350 for the most feed space, or 1080 \u00d7 1080 for a square post.<\/p><\/details>\r\n  <\/div>\r\n<\/div>\r\n<div class=\"more\" data-self=\"quote-image-maker\"><\/div><\/main>\r\n\r\n\r\n<\/div><div class=\"panel\" id=\"tool-st\" data-route=\"story-template-maker\" hidden><section class=\"hero compact\"><div class=\"wrap\">\r\n  <div class=\"crumbs\"><a href=\"#home\">All design tools<\/a> \/ Story Template Maker<\/div>\r\n  <span class=\"pill\">\u25cf Free \u00b7 9:16 \u00b7 1080 \u00d7 1920 HD download<\/span>\r\n  <h1>Free Instagram Story Template Maker<\/h1>\r\n  <p>Create Instagram and Facebook Story designs in a few clicks. Choose a template, edit the text and colors, then download.<\/p>\r\n<\/div><\/section>\r\n\r\n<main class=\"wrap main\">\r\n<div class=\"layout\">\r\n  <div class=\"stack\">\r\n    <div class=\"card\">\r\n      <h2>1. Pick a template<\/h2>\r\n      <div class=\"tgrid\" id=\"st-tpls\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"card\">\r\n      <h2>2. Edit the text<\/h2>\r\n      <div class=\"field\"><label for=\"st-x-tag\">Label <span class=\"val\">small badge<\/span><\/label><input type=\"text\" id=\"st-x-tag\" maxlength=\"24\"><\/div>\r\n      <div class=\"field\"><label for=\"st-x-hero\">Big text <span class=\"val\">e.g. 50% OFF<\/span><\/label><input type=\"text\" id=\"st-x-hero\" maxlength=\"24\"><\/div>\r\n      <div class=\"field\"><label for=\"st-x-head\">Headline<\/label><textarea id=\"st-x-head\" style=\"min-height:70px\" maxlength=\"120\"><\/textarea><\/div>\r\n      <div class=\"field\"><label for=\"st-x-sub\">Supporting text<\/label><textarea id=\"st-x-sub\" style=\"min-height:70px\" maxlength=\"200\"><\/textarea><\/div>\r\n      <div class=\"row\">\r\n        <div class=\"field\"><label for=\"st-x-cta\">Button text<\/label><input type=\"text\" id=\"st-x-cta\" maxlength=\"24\"><\/div>\r\n        <div class=\"field\"><label for=\"st-x-handle\">Handle \/ website<\/label><input type=\"text\" id=\"st-x-handle\" maxlength=\"40\" placeholder=\"@yourbrand\"><\/div>\r\n      <\/div>\r\n      <p class=\"hint\">Leave a box empty to remove that element.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"card\">\r\n      <h2>3. Colors &amp; style<\/h2>\r\n      <div class=\"row3\" style=\"margin-bottom:14px\">\r\n        <div><label for=\"st-c-bg1\">Background<\/label><input type=\"color\" id=\"st-c-bg1\"><\/div>\r\n        <div><label for=\"st-c-bg2\">Gradient to<\/label><input type=\"color\" id=\"st-c-bg2\"><\/div>\r\n        <div><label for=\"st-c-tx\">Text<\/label><input type=\"color\" id=\"st-c-tx\"><\/div>\r\n      <\/div>\r\n      <div class=\"row\">\r\n        <div class=\"field\"><label for=\"st-c-ac\">Accent \/ button<\/label><input type=\"color\" id=\"st-c-ac\"><\/div>\r\n        <div class=\"field\"><label for=\"st-s-layout\">Layout<\/label>\r\n          <select id=\"st-s-layout\"><option value=\"center\">Centered<\/option><option value=\"left\">Left, bottom aligned<\/option><option value=\"card\">White card<\/option><\/select><\/div>\r\n      <\/div>\r\n      <div class=\"row\">\r\n        <div class=\"field\"><label for=\"st-s-deco\">Decoration<\/label>\r\n          <select id=\"st-s-deco\"><option value=\"blobs\">Soft shapes<\/option><option value=\"stripes\">Stripes<\/option><option value=\"dots\">Dots<\/option><option value=\"none\">None<\/option><\/select><\/div>\r\n        <div class=\"field\"><label for=\"st-s-font\">Font<\/label>\r\n          <select id=\"st-s-font\">\r\n            <option value='Arial, Helvetica, sans-serif'>Arial (clean)<\/option>\r\n            <option value='Impact, \"Arial Black\", sans-serif'>Impact (bold)<\/option>\r\n            <option value='Georgia, \"Times New Roman\", serif'>Georgia (serif)<\/option>\r\n            <option value='\"Trebuchet MS\", Tahoma, sans-serif'>Trebuchet (friendly)<\/option>\r\n            <option value='Verdana, Geneva, sans-serif'>Verdana (wide)<\/option>\r\n          <\/select><\/div>\r\n      <\/div>\r\n      <div class=\"field\"><label for=\"st-i-bg\">Background photo <span class=\"val\">optional<\/span><\/label><input type=\"file\" id=\"st-i-bg\" accept=\"image\/*\"><\/div>\r\n      <div class=\"field\" id=\"st-ov-wrap\" hidden><label for=\"st-r-ov\">Photo darkness <span class=\"val\" id=\"st-vv-ov\">45%<\/span><\/label><input type=\"range\" id=\"st-r-ov\" min=\"0\" max=\"90\" step=\"5\" value=\"45\">\r\n        <button class=\"btn ghost sm\" id=\"st-b-rmbg\" style=\"margin-top:8px\">Remove photo<\/button><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"card sticky\" style=\"text-align:center\">\r\n    <div class=\"btns\" style=\"justify-content:space-between;align-items:center;margin-bottom:12px\">\r\n      <h2 style=\"margin:0\">Preview<\/h2>\r\n      <label class=\"check\"><input type=\"checkbox\" id=\"st-k-safe\"> Show safe zones<\/label>\r\n    <\/div>\r\n    <div style=\"background:#EEF2F7;border-radius:14px;padding:14px;display:flex;justify-content:center\">\r\n      <div id=\"st-stage\" style=\"position:relative;line-height:0;display:inline-block\">\r\n        <canvas id=\"st-cv\" width=\"1080\" height=\"1920\" style=\"max-width:100%;max-height:72vh;width:auto;height:auto;border-radius:18px;box-shadow:0 12px 34px rgba(15,23,42,.25)\" aria-label=\"Story preview\"><\/canvas>\r\n        <div id=\"st-safe\" hidden style=\"position:absolute;inset:0;pointer-events:none;border-radius:18px;overflow:hidden\">\r\n          <div style=\"position:absolute;left:0;right:0;top:0;height:13%;background:repeating-linear-gradient(45deg,rgba(239,68,68,.28) 0 8px,rgba(239,68,68,.1) 8px 16px);border-bottom:2px dashed #EF4444\"><\/div>\r\n          <div style=\"position:absolute;left:0;right:0;bottom:0;height:17.7%;background:repeating-linear-gradient(45deg,rgba(239,68,68,.28) 0 8px,rgba(239,68,68,.1) 8px 16px);border-top:2px dashed #EF4444\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <p class=\"hint\" style=\"margin:10px 0 14px\">1080 \u00d7 1920 px \u00b7 Keep key content out of the red zones<\/p>\r\n    <div class=\"btns\" style=\"justify-content:center\">\r\n      <button class=\"btn orange\" id=\"st-dl-png\">\u2b07 Download PNG<\/button>\r\n      <button class=\"btn ghost\" id=\"st-dl-jpg\">\u2b07 JPG<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"seo\">\r\n  <div class=\"card\"><h2>How to make an Instagram Story design<\/h2>\r\n    <ol><li>Pick a template that fits your message.<\/li><li>Edit the label, headline, supporting text and button.<\/li><li>Change colors, layout and decoration to match your brand, or add a photo.<\/li><li>Download the 1080 \u00d7 1920 image and upload it to Instagram or Facebook Stories.<\/li><\/ol><\/div>\r\n  <div class=\"card\"><h2>Questions<\/h2>\r\n    <details><summary>What size is an Instagram Story?<\/summary><p>1080 \u00d7 1920 px at a 9:16 ratio. This tool exports exactly that size.<\/p><\/details>\r\n    <details><summary>What are safe zones?<\/summary><p>The top and bottom of a Story are covered by your profile name and the reply bar. Turn on \u201cShow safe zones\u201d to see them.<\/p><\/details>\r\n    <details><summary>Does it work for Facebook Stories?<\/summary><p>Yes. Facebook Stories use the same 9:16 size.<\/p><\/details>\r\n  <\/div>\r\n<\/div>\r\n<div class=\"more\" data-self=\"story-template-maker\"><\/div><\/main>\r\n\r\n<style>\r\n.tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}\r\n@media(max-width:520px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}\r\n.tp{border:2px solid transparent;background:none;padding:0;cursor:pointer;border-radius:12px;font:inherit;text-align:center;transition:transform .12s}\r\n.tp:hover{transform:translateY(-2px)}\r\n.tp .th{aspect-ratio:9\/16;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px;box-shadow:0 4px 12px rgba(15,23,42,.15);overflow:hidden}\r\n.tp .th i{display:block;height:4px;border-radius:3px;background:currentColor;opacity:.85}\r\n.tp .th b{display:block;font-size:11px;line-height:1.1;font-weight:800;letter-spacing:-.01em}\r\n.tp .th u{display:block;width:56%;height:9px;border-radius:9px;text-decoration:none}\r\n.tp span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:6px}\r\n.tp.on{border-color:var(--indigo)}\r\n.tp.on span{color:var(--indigo)}\r\n<\/style>\r\n\r\n\r\n<\/div>\r\n<footer><div class=\"wrap\"><span>&copy; Onground Media &middot; Free social media design tools<\/span><a href=\"#home\">All design tools<\/a><\/div><\/footer>\r\n<div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\"><\/div>\r\n<script>\r\n\/* shared helpers *\/\r\n(function(){\r\n  var t;\r\n  window.toast=function(msg){\r\n    var el=document.getElementById('toast');\r\n    if(!el)return;\r\n    el.textContent=msg;el.classList.add('show');\r\n    clearTimeout(t);t=setTimeout(function(){el.classList.remove('show');},2200);\r\n  };\r\n  window.$=function(s,r){return (r||document).querySelector(s);};\r\n  window.$$=function(s,r){return Array.prototype.slice.call((r||document).querySelectorAll(s));};\r\n  window.debounce=function(fn,ms){var h;return function(){var a=arguments,c=this;clearTimeout(h);h=setTimeout(function(){fn.apply(c,a);},ms||120);};};\r\n  window.downloadBlob=function(blob,name){\r\n    var a=document.createElement('a');\r\n    var url=URL.createObjectURL(blob);\r\n    a.href=url;a.download=name;document.body.appendChild(a);a.click();\r\n    setTimeout(function(){URL.revokeObjectURL(url);a.remove();},400);\r\n  };\r\n  window.downloadCanvas=function(canvas,name,type,quality){\r\n    type=type||'image\/png';\r\n    if(canvas.toBlob){\r\n      canvas.toBlob(function(b){if(b)downloadBlob(b,name);else toast('Could not create the file');},type,quality||0.92);\r\n    }else{\r\n      var a=document.createElement('a');a.href=canvas.toDataURL(type,quality);a.download=name;a.click();\r\n    }\r\n  };\r\n  window.copyText=function(txt){\r\n    if(navigator.clipboard&&navigator.clipboard.writeText){\r\n      return navigator.clipboard.writeText(txt).then(function(){toast('Copied');},function(){fallback();});\r\n    }\r\n    fallback();\r\n    function fallback(){\r\n      var ta=document.createElement('textarea');ta.value=txt;ta.style.position='fixed';ta.style.opacity='0';\r\n      document.body.appendChild(ta);ta.select();\r\n      try{document.execCommand('copy');toast('Copied');}catch(e){toast('Copy failed');}\r\n      ta.remove();\r\n    }\r\n  };\r\n  window.hexLum=function(hex){\r\n    var h=hex.replace('#','');if(h.length===3)h=h.replace(\/(.)\/g,'$1$1');\r\n    var c=[0,2,4].map(function(i){var v=parseInt(h.substr(i,2),16)\/255;return v<=0.03928?v\/12.92:Math.pow((v+0.055)\/1.055,2.4);});\r\n    return 0.2126*c[0]+0.7152*c[1]+0.0722*c[2];\r\n  };\r\n  window.contrast=function(a,b){var la=hexLum(a),lb=hexLum(b);var hi=Math.max(la,lb),lo=Math.min(la,lb);return (hi+0.05)\/(lo+0.05);};\r\n})();\r\n\r\n<\/script>\r\n<script>\r\n\/* Minimal self-contained QR Code encoder (byte mode, versions 1-40, ECC L\/M\/Q\/H). *\/\r\nvar QR=(function(){\r\n  var ECC_PER_BLOCK=[\r\n    [-1,7,10,15,20,26,18,20,24,30,18,20,24,26,30,22,24,28,30,28,28,28,28,30,30,26,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],\r\n    [-1,10,16,26,18,24,16,18,22,22,26,30,22,22,24,24,28,28,26,26,26,26,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28],\r\n    [-1,13,22,18,26,18,24,18,22,20,24,28,26,24,20,30,24,28,28,26,30,28,30,30,30,30,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],\r\n    [-1,17,28,22,16,22,28,26,26,24,28,24,28,22,24,24,30,28,28,26,28,30,24,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]];\r\n  var NUM_BLOCKS=[\r\n    [-1,1,1,1,1,1,2,2,2,2,4,4,4,4,4,6,6,6,6,7,8,8,9,9,10,12,12,12,13,14,15,16,17,18,19,19,20,21,22,24,25],\r\n    [-1,1,1,1,2,2,4,4,4,5,5,5,8,9,9,10,10,11,13,14,16,17,17,18,20,21,23,25,26,28,29,31,33,35,37,38,40,43,45,47,49],\r\n    [-1,1,1,2,2,4,4,6,6,8,8,8,10,12,16,12,17,16,18,21,20,23,23,25,27,29,34,34,35,38,40,43,45,48,51,53,56,59,62,65,68],\r\n    [-1,1,1,2,4,4,4,5,6,8,8,11,11,16,16,18,16,19,21,25,25,25,34,30,32,35,37,40,42,45,48,51,54,57,60,63,66,70,74,77,81]];\r\n  var LEVELS={L:0,M:1,Q:2,H:3};\r\n  var FORMAT_BITS=[1,0,3,2]; \/\/ L,M,Q,H\r\n\r\n  function utf8(str){\r\n    var out=[],i,c;\r\n    str=unescape(encodeURIComponent(str));\r\n    for(i=0;i<str.length;i++){c=str.charCodeAt(i);out.push(c);}\r\n    return out;\r\n  }\r\n  function rawModules(ver){\r\n    var r=(16*ver+128)*ver+64;\r\n    if(ver>=2){var n=Math.floor(ver\/7)+2;r-=(25*n-10)*n-55;if(ver>=7)r-=36;}\r\n    return r;\r\n  }\r\n  function dataCodewords(ver,ecl){\r\n    return Math.floor(rawModules(ver)\/8)-ECC_PER_BLOCK[ecl][ver]*NUM_BLOCKS[ecl][ver];\r\n  }\r\n  function gfMul(x,y){\r\n    var z=0,i;\r\n    for(i=7;i>=0;i--){z=(z<<1)^((z>>>7)*0x11D);z^=((y>>>i)&1)*x;}\r\n    return z&0xFF;\r\n  }\r\n  function rsDivisor(deg){\r\n    var res=[],i,j,root=1;\r\n    for(i=0;i<deg-1;i++)res.push(0);\r\n    res.push(1);\r\n    for(i=0;i<deg;i++){\r\n      for(j=0;j<deg;j++){\r\n        res[j]=gfMul(res[j],root);\r\n        if(j+1<deg)res[j]^=res[j+1];\r\n      }\r\n      root=gfMul(root,0x02);\r\n    }\r\n    return res;\r\n  }\r\n  function rsRemainder(data,div){\r\n    var res=div.map(function(){return 0;});\r\n    data.forEach(function(b){\r\n      var f=b^res.shift();\r\n      res.push(0);\r\n      div.forEach(function(c,i){res[i]^=gfMul(c,f);});\r\n    });\r\n    return res;\r\n  }\r\n  function alignPositions(ver){\r\n    if(ver===1)return [];\r\n    var n=Math.floor(ver\/7)+2;\r\n    var step=(ver===32)?26:Math.ceil((ver*4+4)\/(n*2-2))*2;\r\n    var res=[6],pos=ver*4+10;\r\n    while(res.length<n){res.splice(1,0,pos);pos-=step;}\r\n    return res;\r\n  }\r\n\r\n  function encode(text,eclName){\r\n    var ecl=LEVELS[eclName||'M'];\r\n    var bytes=utf8(text);\r\n    var ver,cap,bits;\r\n    for(ver=1;ver<=40;ver++){\r\n      cap=dataCodewords(ver,ecl)*8;\r\n      var ccBits=ver<=9?8:16;\r\n      var used=4+ccBits+bytes.length*8;\r\n      if(bytes.length<(1<<ccBits)&&used<=cap)break;\r\n      if(ver===40)throw new Error('Text too long for a QR code');\r\n    }\r\n    \/\/ bit buffer\r\n    bits=[];\r\n    function put(val,len){for(var i=len-1;i>=0;i--)bits.push((val>>>i)&1);}\r\n    put(4,4);\r\n    put(bytes.length,ver<=9?8:16);\r\n    bytes.forEach(function(b){put(b,8);});\r\n    put(0,Math.min(4,cap-bits.length));\r\n    put(0,(8-bits.length%8)%8);\r\n    for(var pad=0xEC;bits.length<cap;pad^=0xEC^0x11)put(pad,8);\r\n    var data=[];\r\n    for(var i=0;i<bits.length;i+=8){\r\n      var v=0;for(var k=0;k<8;k++)v=(v<<1)|bits[i+k];\r\n      data.push(v);\r\n    }\r\n    \/\/ ECC + interleave\r\n    var nb=NUM_BLOCKS[ecl][ver],eccLen=ECC_PER_BLOCK[ecl][ver];\r\n    var raw=Math.floor(rawModules(ver)\/8);\r\n    var nShort=nb-raw%nb,shortLen=Math.floor(raw\/nb);\r\n    var blocks=[],div=rsDivisor(eccLen),kk=0,b;\r\n    for(b=0;b<nb;b++){\r\n      var dat=data.slice(kk,kk+shortLen-eccLen+(b<nShort?0:1));\r\n      kk+=dat.length;\r\n      var ecc=rsRemainder(dat,div);\r\n      if(b<nShort)dat.push(0);\r\n      blocks.push(dat.concat(ecc));\r\n    }\r\n    var all=[];\r\n    for(i=0;i<blocks[0].length;i++){\r\n      for(b=0;b<blocks.length;b++){\r\n        if(i!==shortLen-eccLen||b>=nShort)all.push(blocks[b][i]);\r\n      }\r\n    }\r\n    \/\/ matrix\r\n    var size=ver*4+17,mod=[],fn=[],y,x;\r\n    for(y=0;y<size;y++){mod.push(new Array(size).fill(false));fn.push(new Array(size).fill(false));}\r\n    function setFn(x,y,d){mod[y][x]=d;fn[y][x]=true;}\r\n    for(i=0;i<size;i++){setFn(6,i,i%2===0);setFn(i,6,i%2===0);}\r\n    function finder(cx,cy){\r\n      for(var dy=-4;dy<=4;dy++)for(var dx=-4;dx<=4;dx++){\r\n        var dist=Math.max(Math.abs(dx),Math.abs(dy)),xx=cx+dx,yy=cy+dy;\r\n        if(xx>=0&&xx<size&&yy>=0&&yy<size)setFn(xx,yy,dist!==2&&dist!==4);\r\n      }\r\n    }\r\n    finder(3,3);finder(size-4,3);finder(3,size-4);\r\n    var ap=alignPositions(ver),na=ap.length;\r\n    for(i=0;i<na;i++)for(var j=0;j<na;j++){\r\n      if((i===0&&j===0)||(i===0&&j===na-1)||(i===na-1&&j===0))continue;\r\n      for(var dy=-2;dy<=2;dy++)for(var dx=-2;dx<=2;dx++)\r\n        setFn(ap[i]+dx,ap[j]+dy,Math.max(Math.abs(dx),Math.abs(dy))!==1);\r\n    }\r\n    function formatBits(mask){\r\n      var d=(FORMAT_BITS[ecl]<<3)|mask,rem=d,k;\r\n      for(k=0;k<10;k++)rem=(rem<<1)^((rem>>>9)*0x537);\r\n      var bt=((d<<10)|rem)^0x5412;\r\n      function g(n){return ((bt>>>n)&1)!==0;}\r\n      for(k=0;k<=5;k++)setFn(8,k,g(k));\r\n      setFn(8,7,g(6));setFn(8,8,g(7));setFn(7,8,g(8));\r\n      for(k=9;k<15;k++)setFn(14-k,8,g(k));\r\n      for(k=0;k<8;k++)setFn(size-1-k,8,g(k));\r\n      for(k=8;k<15;k++)setFn(8,size-15+k,g(k));\r\n      setFn(8,size-8,true);\r\n    }\r\n    formatBits(0); \/\/ reserve\r\n    if(ver>=7){\r\n      var rem=ver,k;\r\n      for(k=0;k<12;k++)rem=(rem<<1)^((rem>>>11)*0x1F25);\r\n      var vb=(ver<<12)|rem;\r\n      for(k=0;k<18;k++){\r\n        var col=((vb>>>k)&1)!==0,a=size-11+k%3,bb=Math.floor(k\/3);\r\n        setFn(a,bb,col);setFn(bb,a,col);\r\n      }\r\n    }\r\n    \/\/ codewords\r\n    var idx=0;\r\n    for(var right=size-1;right>=1;right-=2){\r\n      if(right===6)right=5;\r\n      for(var vert=0;vert<size;vert++){\r\n        for(j=0;j<2;j++){\r\n          x=right-j;\r\n          var up=((right+1)&2)===0;\r\n          y=up?size-1-vert:vert;\r\n          if(!fn[y][x]&&idx<all.length*8){\r\n            mod[y][x]=((all[idx>>>3]>>>(7-(idx&7)))&1)!==0;\r\n            idx++;\r\n          }\r\n        }\r\n      }\r\n    }\r\n    function applyMask(m){\r\n      for(y=0;y<size;y++)for(x=0;x<size;x++){\r\n        var inv;\r\n        switch(m){\r\n          case 0:inv=(x+y)%2===0;break;\r\n          case 1:inv=y%2===0;break;\r\n          case 2:inv=x%3===0;break;\r\n          case 3:inv=(x+y)%3===0;break;\r\n          case 4:inv=(Math.floor(x\/3)+Math.floor(y\/2))%2===0;break;\r\n          case 5:inv=x*y%2+x*y%3===0;break;\r\n          case 6:inv=(x*y%2+x*y%3)%2===0;break;\r\n          default:inv=((x+y)%2+x*y%3)%2===0;\r\n        }\r\n        if(!fn[y][x]&&inv)mod[y][x]=!mod[y][x];\r\n      }\r\n    }\r\n    function penalty(){\r\n      var p=0,r,c,run,dark=0,line;\r\n      function runs(get){\r\n        var s=0,n,i2,col,len;\r\n        for(n=0;n<size;n++){\r\n          col=get(n,0);len=1;\r\n          for(i2=1;i2<size;i2++){\r\n            var v=get(n,i2);\r\n            if(v===col){len++;if(len===5)s+=3;else if(len>5)s++;}\r\n            else{col=v;len=1;}\r\n          }\r\n        }\r\n        return s;\r\n      }\r\n      p+=runs(function(a,b){return mod[a][b];});\r\n      p+=runs(function(a,b){return mod[b][a];});\r\n      for(r=0;r<size-1;r++)for(c=0;c<size-1;c++){\r\n        var v=mod[r][c];\r\n        if(v===mod[r][c+1]&&v===mod[r+1][c]&&v===mod[r+1][c+1])p+=3;\r\n      }\r\n      var pat=[true,false,true,true,true,false,true];\r\n      function finderPen(get){\r\n        var s=0,n,i2,k2,ok,l,rr;\r\n        for(n=0;n<size;n++)for(i2=0;i2+7<=size;i2++){\r\n          ok=true;\r\n          for(k2=0;k2<7;k2++)if(get(n,i2+k2)!==pat[k2]){ok=false;break;}\r\n          if(!ok)continue;\r\n          l=true;for(k2=1;k2<=4;k2++){if(i2-k2>=0&&get(n,i2-k2)){l=false;break;}}\r\n          rr=true;for(k2=0;k2<4;k2++){if(i2+7+k2<size&&get(n,i2+7+k2)){rr=false;break;}}\r\n          if((l&&i2>=4)||(rr&&i2+7+4<=size))s+=40;\r\n        }\r\n        return s;\r\n      }\r\n      p+=finderPen(function(a,b){return mod[a][b];});\r\n      p+=finderPen(function(a,b){return mod[b][a];});\r\n      for(r=0;r<size;r++)for(c=0;c<size;c++)if(mod[r][c])dark++;\r\n      var total=size*size;\r\n      p+=(Math.ceil(Math.abs(dark*20-total*10)\/total)-1)*10;\r\n      return p;\r\n    }\r\n    var best=0,bestPen=Infinity;\r\n    for(var m=0;m<8;m++){\r\n      applyMask(m);formatBits(m);\r\n      var pn=penalty();\r\n      if(pn<bestPen){bestPen=pn;best=m;}\r\n      applyMask(m); \/\/ undo\r\n    }\r\n    applyMask(best);formatBits(best);\r\n    return {size:size,version:ver,get:function(x,y){return mod[y][x];}};\r\n  }\r\n  return {encode:encode};\r\n})();\r\nif(typeof module!=='undefined')module.exports=QR;\r\n\r\n<\/script>\r\n<script>\r\n\r\n(function(){\r\n  var COL={Instagram:'#E1306C',Facebook:'#1877F2',LinkedIn:'#0A66C2',X:'#0F172A',YouTube:'#FF0000',Pinterest:'#E60023',TikTok:'#111827',WhatsApp:'#25D366'};\r\n  var D={\r\n    Instagram:[\r\n      ['Profile photo',320,320,'Shown as a circle, about 110 px on screen.'],\r\n      ['Feed post \u00b7 portrait',1080,1350,'Takes the most space in the feed. Best for reach.'],\r\n      ['Feed post \u00b7 square',1080,1080,'Safe, classic choice that works everywhere.'],\r\n      ['Feed post \u00b7 grid 3:4',1080,1440,'Profile grid now previews 3:4, so keep key content centered.'],\r\n      ['Feed post \u00b7 landscape',1080,566,'Smallest in-feed footprint.'],\r\n      ['Carousel slide',1080,1350,'Every slide in a carousel should share one ratio.'],\r\n      ['Story',1080,1920,'Keep text out of the top and bottom 250 px.'],\r\n      ['Reel video \/ cover',1080,1920,'Keep titles in the middle so the grid crop does not cut them.']\r\n    ],\r\n    Facebook:[\r\n      ['Profile photo',320,320,'Shown as a circle, about 170 px on desktop.'],\r\n      ['Cover photo',820,312,'Mobile crops to about 640 \u00d7 360. Keep text centered.'],\r\n      ['Feed post \u00b7 square',1080,1080,'Works on desktop and mobile.'],\r\n      ['Feed post \u00b7 portrait',1080,1350,'Great for mobile-first posts.'],\r\n      ['Shared link image',1200,630,'Used for link previews and Open Graph images.'],\r\n      ['Story',1080,1920,'Leave top and bottom margins for buttons.'],\r\n      ['Event cover',1920,1005,'Shows at a 1.91:1 ratio.'],\r\n      ['Group cover',1640,856,'Large banner at the top of a group.'],\r\n      ['Video \u00b7 landscape',1280,720,'Standard 16:9 HD.']\r\n    ],\r\n    LinkedIn:[\r\n      ['Personal profile photo',400,400,'Shown as a circle.'],\r\n      ['Personal banner',1584,396,'The profile photo covers the lower left.'],\r\n      ['Company logo',300,300,'Square, displays small, so keep it simple.'],\r\n      ['Company cover',1128,191,'Very wide strip. Use little text.'],\r\n      ['Shared image \/ link',1200,627,'Standard in-feed image and link preview.'],\r\n      ['Square post',1080,1080,'Takes more mobile feed space.'],\r\n      ['Portrait post',1080,1350,'Strong on mobile.'],\r\n      ['Document carousel page',1080,1350,'Export slides as a PDF with a portrait ratio.'],\r\n      ['Video \u00b7 landscape',1920,1080,'Full HD 16:9.']\r\n    ],\r\n    X:[\r\n      ['Profile photo',400,400,'Shown as a circle.'],\r\n      ['Header',1500,500,'Wide banner. Profile photo overlaps the lower left.'],\r\n      ['In-stream image',1600,900,'16:9 shows fully in the timeline.'],\r\n      ['Link card \u00b7 large image',1200,628,'Used when a link shows a large preview.'],\r\n      ['Square image',1080,1080,'Crops slightly in the timeline.'],\r\n      ['Video \u00b7 landscape',1280,720,'Standard 16:9.'],\r\n      ['Video \u00b7 portrait',720,1280,'Vertical video for mobile.']\r\n    ],\r\n    YouTube:[\r\n      ['Channel icon',800,800,'Shown as a circle.'],\r\n      ['Channel banner',2560,1440,'Keep logos and text inside the 1546 \u00d7 423 safe area.'],\r\n      ['Video thumbnail',1280,720,'Minimum 640 px wide, under 2 MB.'],\r\n      ['Video \u00b7 Full HD',1920,1080,'Standard upload.'],\r\n      ['Shorts',1080,1920,'Vertical 9:16, up to 3 minutes.']\r\n    ],\r\n    Pinterest:[\r\n      ['Profile photo',165,165,'Shown as a circle.'],\r\n      ['Standard pin',1000,1500,'The 2:3 ratio performs best.'],\r\n      ['Square pin',1000,1000,'Good for simple graphics.'],\r\n      ['Video pin',1080,1920,'Vertical 9:16.']\r\n    ],\r\n    TikTok:[\r\n      ['Video',1080,1920,'Vertical 9:16. Leave space for the caption and buttons.'],\r\n      ['Profile photo',200,200,'Minimum size, shown as a circle.']\r\n    ],\r\n    WhatsApp:[\r\n      ['Profile photo',640,640,'Shown as a circle.'],\r\n      ['Status image \/ video',1080,1920,'Vertical 9:16.'],\r\n      ['Link preview image',1200,630,'Open Graph image shown when a link is shared.']\r\n    ]\r\n  };\r\n  var COMMON=[[1,'1:1'],[0.8,'4:5'],[0.75,'3:4'],[2\/3,'2:3'],[9\/16,'9:16'],[16\/9,'16:9'],[1.5,'3:2'],[4\/3,'4:3'],[1.91,'1.91:1'],[3,'3:1'],[4,'4:1']];\r\n  function ratio(w,h){\r\n    var r=w\/h,i;\r\n    for(i=0;i<COMMON.length;i++)if(Math.abs(r-COMMON[i][0])\/COMMON[i][0]<0.012)return COMMON[i][1];\r\n    return r>=1?r.toFixed(1)+':1':'1:'+(1\/r).toFixed(1);\r\n  }\r\n  var active='All',names=Object.keys(D);\r\n  var tabs=$('#sg-tabs');\r\n  ['All'].concat(names).forEach(function(n){\r\n    var b=document.createElement('button');b.type='button';b.className='tab'+(n===active?' on':'');b.textContent=n;b.setAttribute('role','tab');\r\n    b.addEventListener('click',function(){active=n;$$('.tab',tabs).forEach(function(x){x.classList.toggle('on',x===b);});render();});\r\n    tabs.appendChild(b);\r\n  });\r\n  function esc(s){return String(s).replace(\/[&<>\"]\/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;'}[c];});}\r\n  function render(){\r\n    var q=$('#sg-q').value.trim().toLowerCase(),out=$('#sg-out'),html='',shown=0;\r\n    names.forEach(function(p){\r\n      if(active!=='All'&&active!==p)return;\r\n      var items=D[p].filter(function(it){return !q||(p+' '+it[0]+' '+it[3]+' '+it[1]+'x'+it[2]).toLowerCase().indexOf(q)>-1;});\r\n      if(!items.length)return;\r\n      shown+=items.length;\r\n      html+='<section style=\"margin-bottom:26px\"><h2 style=\"display:flex;align-items:center;gap:10px;font-size:19px;margin:0 0 12px;letter-spacing:-.01em\"><span style=\"width:12px;height:12px;border-radius:50%;background:'+COL[p]+';display:inline-block\"><\/span>'+p+' <span style=\"font-size:13px;font-weight:500;color:var(--muted)\">'+items.length+' sizes<\/span><\/h2><div class=\"gridc\">';\r\n      items.forEach(function(it){\r\n        var w=it[1],h=it[2],m=Math.max(w,h),bw=Math.max(14,Math.round(w\/m*64)),bh=Math.max(14,Math.round(h\/m*64));\r\n        html+='<article class=\"sz\"><div class=\"shape\"><div style=\"width:'+bw+'px;height:'+bh+'px;background:linear-gradient(135deg,'+COL[p]+','+COL[p]+'AA);border-radius:6px;box-shadow:0 4px 12px rgba(15,23,42,.18)\"><\/div><\/div>'\r\n          +'<div class=\"meta\"><h3>'+esc(it[0])+'<\/h3><div class=\"dim\">'+w+' \u00d7 '+h+' <span>px<\/span><\/div><div class=\"rt\">'+ratio(w,h)+'<\/div><p>'+esc(it[3])+'<\/p><\/div>'\r\n          +'<button class=\"btn ghost sm cpy\" data-s=\"'+w+' x '+h+'\">Copy size<\/button><\/article>';\r\n      });\r\n      html+='<\/div><\/section>';\r\n    });\r\n    out.innerHTML=html;\r\n    $('#sg-empty').style.display=shown?'none':'block';\r\n    $$('.cpy',out).forEach(function(b){b.addEventListener('click',function(){copyText(b.dataset.s);});});\r\n  }\r\n  $('#sg-q').addEventListener('input',debounce(render,80));\r\n  render();\r\n})();\r\n\r\n<\/script><script>\r\n\r\n(function(){\r\n  var items=[],sel=null,dragFrom=null,uid=0,avUrl='';\r\n  var grid=$('#gp-grid'),ig=$('#gp-ig');\r\n  var MAX=90;\r\n\r\n  function addFiles(files){\r\n    var list=Array.prototype.slice.call(files).filter(function(f){return \/^image\\\/\/.test(f.type);});\r\n    if(!list.length){toast('Please choose image files');return;}\r\n    list=list.slice(0,Math.max(0,MAX-items.length));\r\n    var pending=list.length;\r\n    var loaded=new Array(list.length);\r\n    list.forEach(function(f,idx){\r\n      var url=URL.createObjectURL(f),im=new Image();\r\n      im.onload=function(){loaded[idx]={id:++uid,url:url,img:im};done();};\r\n      im.onerror=function(){URL.revokeObjectURL(url);loaded[idx]=null;done();};\r\n      im.src=url;\r\n    });\r\n    function done(){\r\n      if(--pending>0)return;\r\n      var ok=loaded.filter(Boolean);\r\n      \/\/ newest first: keep chosen order, new images go to the front\r\n      items=ok.concat(items);sel=null;render();\r\n      if(ok.length<list.length)toast('Some files could not be read');\r\n    }\r\n  }\r\n\r\n  function sample(){\r\n    var pal=[['#4F46E5','#A78BFA'],['#FF6B35','#FBBF24'],['#10B981','#34D399'],['#0F172A','#475569'],['#E1306C','#FB7185'],['#0EA5E9','#6366F1'],['#F59E0B','#EF4444'],['#14B8A6','#3B82F6'],['#8B5CF6','#EC4899']];\r\n    var out=[];\r\n    pal.forEach(function(p,i){\r\n      var c=document.createElement('canvas');c.width=800;c.height=1000;var g=c.getContext('2d');\r\n      var gr=g.createLinearGradient(0,0,800,1000);gr.addColorStop(0,p[0]);gr.addColorStop(1,p[1]);\r\n      g.fillStyle=gr;g.fillRect(0,0,800,1000);\r\n      g.fillStyle='rgba(255,255,255,.16)';\r\n      g.beginPath();g.arc(620,260,230,0,7);g.fill();\r\n      g.beginPath();g.arc(160,820,170,0,7);g.fill();\r\n      g.fillStyle='#fff';g.font='800 340px Arial, sans-serif';g.textAlign='center';g.textBaseline='middle';\r\n      g.fillText(String(i+1),400,500);\r\n      g.font='600 38px Arial, sans-serif';g.fillText('SAMPLE POST',400,760);\r\n      var im=new Image();im.src=c.toDataURL('image\/jpeg',.88);\r\n      out.push({id:++uid,url:im.src,img:im,sample:true});\r\n    });\r\n    return out;\r\n  }\r\n\r\n  function fmt(n){return n+'';}\r\n  function render(){\r\n    var n=items.length,total=Math.max(12,Math.ceil((n+1)\/3)*3),i;\r\n    grid.style.setProperty('--ar',$('#gp-s-ratio').value);\r\n    grid.style.setProperty('--gap',$('#gp-s-gap').value+'px');\r\n    grid.innerHTML='';\r\n    for(i=0;i<total;i++){\r\n      var d=document.createElement('div');\r\n      if(i<n){\r\n        d.className='tile'+(sel===i?' sel':'');d.draggable=true;d.dataset.i=i;\r\n        var im=document.createElement('img');im.src=items[i].url;im.alt='Post '+(i+1);d.appendChild(im);\r\n        var b=document.createElement('span');b.className='n';b.textContent='#'+(i+1);d.appendChild(b);\r\n        bind(d,i);\r\n      }else{\r\n        d.className='tile empty';d.textContent='+';d.title='Add images';\r\n        d.addEventListener('click',function(){$('#gp-file').click();});\r\n      }\r\n      grid.appendChild(d);\r\n    }\r\n    $('#gp-v-posts').textContent=items.filter(function(x){return !x.sample;}).length||n;\r\n    $('#gp-v-user').textContent=$('#gp-p-user').value||'username';\r\n    $('#gp-v-name').textContent=$('#gp-p-name').value;\r\n    $('#gp-v-bio').textContent=$('#gp-p-bio').value;\r\n    $('#gp-v-fol').textContent=$('#gp-p-fol').value||'0';\r\n    $('#gp-v-ing').textContent=$('#gp-p-ing').value||'0';\r\n    var av=$('#gp-v-av');\r\n    if(avUrl){av.style.backgroundImage='url('+avUrl+')';av.textContent='';}\r\n    else{av.style.backgroundImage='none';av.textContent=($('#gp-p-name').value||$('#gp-p-user').value||'?').charAt(0).toUpperCase();}\r\n    var bar=$('#gp-selbar');\r\n    if(sel!==null&&sel<n){bar.hidden=false;$('#gp-seltxt').textContent='Post #'+(sel+1)+' selected';}\r\n    else{bar.hidden=true;sel=null;}\r\n  }\r\n\r\n  function move(from,to){\r\n    if(from===to||to<0||to>=items.length)return;\r\n    var it=items.splice(from,1)[0];items.splice(to,0,it);\r\n    sel=to;render();\r\n  }\r\n  function bind(d,i){\r\n    d.addEventListener('click',function(){sel=(sel===i)?null:i;render();});\r\n    d.addEventListener('dragstart',function(e){\r\n      dragFrom=i;d.classList.add('drag');\r\n      try{e.dataTransfer.effectAllowed='move';e.dataTransfer.setData('text\/plain','tile');}catch(x){}\r\n    });\r\n    d.addEventListener('dragend',function(){dragFrom=null;$$('.tile',grid).forEach(function(t){t.classList.remove('drag','target');});});\r\n    d.addEventListener('dragover',function(e){if(dragFrom===null)return;e.preventDefault();d.classList.add('target');});\r\n    d.addEventListener('dragleave',function(){d.classList.remove('target');});\r\n    d.addEventListener('drop',function(e){\r\n      if(dragFrom===null)return;\r\n      e.preventDefault();e.stopPropagation();\r\n      var f=dragFrom;dragFrom=null;move(f,i);\r\n    });\r\n  }\r\n\r\n  $('#gp-m-first').addEventListener('click',function(){if(sel!==null)move(sel,0);});\r\n  $('#gp-m-left').addEventListener('click',function(){if(sel!==null)move(sel,sel-1);});\r\n  $('#gp-m-right').addEventListener('click',function(){if(sel!==null)move(sel,sel+1);});\r\n  $('#gp-m-del').addEventListener('click',function(){\r\n    if(sel===null)return;\r\n    var it=items.splice(sel,1)[0];\r\n    if(it&&it.url.indexOf('blob:')===0)URL.revokeObjectURL(it.url);\r\n    sel=null;render();\r\n  });\r\n\r\n  $('#gp-file').addEventListener('change',function(e){addFiles(e.target.files);e.target.value='';});\r\n  var drop=$('#gp-drop');\r\n  ['dragenter','dragover'].forEach(function(ev){drop.addEventListener(ev,function(e){e.preventDefault();drop.classList.add('over');});});\r\n  ['dragleave','drop'].forEach(function(ev){drop.addEventListener(ev,function(e){e.preventDefault();drop.classList.remove('over');});});\r\n  drop.addEventListener('drop',function(e){if(e.dataTransfer&&e.dataTransfer.files.length)addFiles(e.dataTransfer.files);});\r\n  \/\/ dropping files onto the preview grid also works\r\n  grid.addEventListener('dragover',function(e){if(dragFrom===null)e.preventDefault();});\r\n  grid.addEventListener('drop',function(e){\r\n    if(dragFrom===null&&e.dataTransfer&&e.dataTransfer.files&&e.dataTransfer.files.length){e.preventDefault();addFiles(e.dataTransfer.files);}\r\n  });\r\n\r\n  $('#gp-b-sample').addEventListener('click',function(){items=sample();sel=null;render();});\r\n  $('#gp-b-clear').addEventListener('click',function(){\r\n    items.forEach(function(it){if(it.url.indexOf('blob:')===0)URL.revokeObjectURL(it.url);});\r\n    items=[];sel=null;render();\r\n  });\r\n  $('#gp-b-reverse').addEventListener('click',function(){items.reverse();sel=null;render();});\r\n  $('#gp-b-shuffle').addEventListener('click',function(){\r\n    for(var i=items.length-1;i>0;i--){var j=Math.floor(Math.random()*(i+1));var t=items[i];items[i]=items[j];items[j]=t;}\r\n    sel=null;render();\r\n  });\r\n  $$('#gp-theme .tab').forEach(function(t){t.addEventListener('click',function(){\r\n    $$('#gp-theme .tab').forEach(function(x){x.classList.toggle('on',x===t);});\r\n    ig.classList.toggle('dark',t.dataset.t==='dark');\r\n  });});\r\n  $('#gp-p-av').addEventListener('change',function(e){\r\n    var f=e.target.files[0];\r\n    if(avUrl&&avUrl.indexOf('blob:')===0)URL.revokeObjectURL(avUrl);\r\n    avUrl=f&&\/^image\\\/\/.test(f.type)?URL.createObjectURL(f):'';render();\r\n  });\r\n  ['#gp-s-ratio','#gp-s-gap','#gp-p-user','#gp-p-name','#gp-p-bio','#gp-p-fol','#gp-p-ing'].forEach(function(s){\r\n    $(s).addEventListener('input',render);$(s).addEventListener('change',render);\r\n  });\r\n\r\n  $('#gp-b-dl').addEventListener('click',function(){\r\n    if(!items.length){toast('Add some images first');return;}\r\n    var cols=3,W=1080,gap=+$('#gp-s-gap').value*3,parts=$('#gp-s-ratio').value.split('\/'),ar=(+parts[0])\/(+parts[1]);\r\n    var tw=Math.floor((W-gap*(cols-1))\/cols),th=Math.round(tw\/ar);\r\n    var rows=Math.ceil(items.length\/cols),H=rows*th+(rows-1)*gap;\r\n    var c=document.createElement('canvas');c.width=W;c.height=H;var g=c.getContext('2d');\r\n    var dark=ig.classList.contains('dark');\r\n    g.fillStyle=dark?'#000':'#fff';g.fillRect(0,0,W,H);\r\n    items.forEach(function(it,i){\r\n      var x=(i%cols)*(tw+gap),y=Math.floor(i\/cols)*(th+gap);\r\n      var iw=it.img.naturalWidth||it.img.width,ih=it.img.naturalHeight||it.img.height;\r\n      var s=Math.max(tw\/iw,th\/ih),sw=tw\/s,sh=th\/s,sx=(iw-sw)\/2,sy=(ih-sh)\/2;\r\n      g.drawImage(it.img,sx,sy,sw,sh,x,y,tw,th);\r\n    });\r\n    downloadCanvas(c,'instagram-grid-preview.png');\r\n  });\r\n\r\n  items=sample();render();\r\n})();\r\n\r\n<\/script><script>\r\n\r\n(function(){\r\n  var kind='url';\r\n  var PRESETS=[['#0F172A','#FFFFFF'],['#4F46E5','#FFFFFF'],['#000000','#FFFFFF'],['#FF6B35','#FFFFFF'],['#10B981','#FFFFFF'],['#FFFFFF','#0F172A']];\r\n  var cv=$('#qr-cv'),ctx=cv.getContext('2d');\r\n  var cur=null; \/\/ {q, opts}\r\n\r\n  PRESETS.forEach(function(p,i){\r\n    var b=document.createElement('button');b.type='button';b.className='sw';b.title='Preset '+(i+1);\r\n    b.style.background='linear-gradient(135deg,'+p[0]+' 50%,'+p[1]+' 50%)';\r\n    b.addEventListener('click',function(){$('#qr-o-fg').value=p[0];$('#qr-o-bg').value=p[1];render();});\r\n    $('#qr-presets').appendChild(b);\r\n  });\r\n\r\n  $$('#qr-kinds .tab').forEach(function(t){\r\n    t.addEventListener('click',function(){\r\n      kind=t.dataset.k;\r\n      $$('#qr-kinds .tab').forEach(function(x){x.classList.toggle('on',x===t);});\r\n      $$('#tool-qr [data-p]').forEach(function(p){p.hidden=p.dataset.p!==kind;});\r\n      render();\r\n    });\r\n  });\r\n\r\n  function payload(){\r\n    var v;\r\n    if(kind==='url'){\r\n      v=$('#qr-f-url').value.trim();\r\n      if(!v)return '';\r\n      if(!\/^[a-z][a-z0-9+.-]*:\/i.test(v))v='https:\/\/'+v;\r\n      return v;\r\n    }\r\n    if(kind==='ig'){\r\n      v=$('#qr-f-ig').value.trim();\r\n      if(!v)return '';\r\n      v=v.replace(\/^https?:\\\/\\\/(www\\.)?instagram\\.com\\\/\/i,'').replace(\/^@\/,'').split(\/[\/?#]\/)[0];\r\n      v=v.replace(\/[^A-Za-z0-9._]\/g,'');\r\n      return v?'https:\/\/www.instagram.com\/'+v+'\/':'';\r\n    }\r\n    if(kind==='wa'){\r\n      var n=$('#qr-f-wa').value.replace(\/\\D\/g,'').replace(\/^0+\/,'');\r\n      if(!n)return '';\r\n      var m=$('#qr-f-wam').value.trim();\r\n      return 'https:\/\/wa.me\/'+n+(m?'?text='+encodeURIComponent(m):'');\r\n    }\r\n    if(kind==='text')return $('#qr-f-text').value;\r\n    if(kind==='wifi'){\r\n      var s=$('#qr-f-ssid').value;\r\n      if(!s)return '';\r\n      function esc(x){return x.replace(\/([\\\\;,:\"])\/g,'\\\\$1');}\r\n      var sec=$('#qr-f-wsec').value;\r\n      return 'WIFI:T:'+sec+';S:'+esc(s)+';'+(sec==='nopass'?'':'P:'+esc($('#qr-f-wpass').value)+';')+($('#qr-f-whid').checked?'H:true;':'')+';';\r\n    }\r\n    return '';\r\n  }\r\n\r\n  function drawModule(g,shape,x,y,w){\r\n    if(shape==='square'){g.fillRect(x,y,w,w);return;}\r\n    if(shape==='dots'){g.beginPath();g.arc(x+w\/2,y+w\/2,w*0.5,0,Math.PI*2);g.fill();return;}\r\n    var r=w*0.28;g.beginPath();\r\n    if(g.roundRect){g.roundRect(x,y,w,w,r);}\r\n    else{g.moveTo(x+r,y);g.arcTo(x+w,y,x+w,y+w,r);g.arcTo(x+w,y+w,x,y+w,r);g.arcTo(x,y+w,x,y,r);g.arcTo(x,y,x+w,y,r);g.closePath();}\r\n    g.fill();\r\n  }\r\n\r\n  function isFinder(x,y,n){return (x<7&&y<7)||(x>=n-7&&y<7)||(x<7&&y>=n-7);}\r\n  function draw(canvas,q,o){\r\n    var n=q.size,total=n+o.margin*2,px=o.size;\r\n    canvas.width=px;canvas.height=px;\r\n    var g=canvas.getContext('2d');\r\n    g.fillStyle=o.bg;g.fillRect(0,0,px,px);\r\n    g.fillStyle=o.fg;\r\n    var s=px\/total;\r\n    for(var y=0;y<n;y++)for(var x=0;x<n;x++){\r\n      if(!q.get(x,y))continue;\r\n      var x0=Math.round((x+o.margin)*s),y0=Math.round((y+o.margin)*s);\r\n      var w=Math.round((x+o.margin+1)*s)-x0;\r\n      if(o.shape==='square'||isFinder(x,y,n))g.fillRect(x0,y0,w,Math.round((y+o.margin+1)*s)-y0);\r\n      else drawModule(g,o.shape,x0,y0,w);\r\n    }\r\n  }\r\n\r\n  function svg(q,o){\r\n    var n=q.size,t=n+o.margin*2,m=o.margin,sq=[],parts=[],x,y;\r\n    for(y=0;y<n;y++)for(x=0;x<n;x++){\r\n      if(!q.get(x,y))continue;\r\n      var X=x+m,Y=y+m;\r\n      if(o.shape==='square'||isFinder(x,y,n))sq.push('M'+X+' '+Y+'h1v1h-1z');\r\n      else if(o.shape==='dots')parts.push('<circle cx=\"'+(X+.5)+'\" cy=\"'+(Y+.5)+'\" r=\".5\"\/>');\r\n      else parts.push('<rect x=\"'+X+'\" y=\"'+Y+'\" width=\"1\" height=\"1\" rx=\".28\"\/>');\r\n    }\r\n    var body=(sq.length?'<path d=\"'+sq.join('')+'\"\/>':'')+parts.join('');\r\n    return '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 '+t+' '+t+'\" width=\"'+o.size+'\" height=\"'+o.size+'\" shape-rendering=\"'+(o.shape==='square'?'crispEdges':'auto')+'\"><rect width=\"'+t+'\" height=\"'+t+'\" fill=\"'+o.bg+'\"\/><g fill=\"'+o.fg+'\">'+body+'<\/g><\/svg>';\r\n  }\r\n\r\n  function opts(){\r\n    return {fg:$('#qr-o-fg').value,bg:$('#qr-o-bg').value,shape:$('#qr-o-shape').value,\r\n      ecc:$('#qr-o-ecc').value,size:+$('#qr-o-size').value,margin:+$('#qr-o-margin').value};\r\n  }\r\n\r\n  function render(){\r\n    var o=opts(),data=payload();\r\n    $('#qr-v-size').textContent=o.size+' px';$('#qr-v-margin').textContent=o.margin;\r\n    var warn=$('#qr-warn'),msgs=[];\r\n    if(contrast(o.fg,o.bg)<3)msgs.push('Low contrast: this code may be hard to scan.');\r\n    else if(hexLum(o.fg)>hexLum(o.bg))msgs.push('Light dots on a dark background don\u2019t scan on some older phones. Test before printing.');\r\n    if(o.margin<2)msgs.push('A quiet zone under 2 can stop scanners from finding the code.');\r\n    warn.style.display=msgs.length?'block':'none';warn.textContent=msgs.join(' ');\r\n    if(!data){\r\n      cur=null;\r\n      cv.width=512;cv.height=512;ctx.fillStyle='#fff';ctx.fillRect(0,0,512,512);\r\n      ctx.fillStyle='#94A3B8';ctx.font='600 20px sans-serif';ctx.textAlign='center';\r\n      ctx.fillText('Fill in the details',256,250);ctx.fillText('to see your QR code',256,280);\r\n      $('#qr-info').textContent='\u00a0';setBtns(false);return;\r\n    }\r\n    try{\r\n      var q=QR.encode(data,o.ecc);\r\n      cur={q:q,o:o};\r\n      var prev=Object.assign({},o,{size:640});\r\n      draw(cv,q,prev);\r\n      $('#qr-info').textContent=data.length>140?data.slice(0,140)+'\u2026':data;\r\n      setBtns(true);\r\n    }catch(e){\r\n      cur=null;$('#qr-info').textContent='That is too long for a QR code. Please shorten it.';setBtns(false);\r\n    }\r\n  }\r\n  function setBtns(on){['#qr-dl-png','#qr-dl-svg','#qr-cp'].forEach(function(s){$(s).disabled=!on;});}\r\n\r\n  function fileName(ext){return 'qr-code-'+kind+'.'+ext;}\r\n  $('#qr-dl-png').addEventListener('click',function(){\r\n    if(!cur)return;\r\n    var c=document.createElement('canvas');draw(c,cur.q,cur.o);downloadCanvas(c,fileName('png'));\r\n  });\r\n  $('#qr-dl-svg').addEventListener('click',function(){\r\n    if(!cur)return;\r\n    downloadBlob(new Blob([svg(cur.q,cur.o)],{type:'image\/svg+xml'}),fileName('svg'));\r\n  });\r\n  $('#qr-cp').addEventListener('click',function(){\r\n    if(!cur)return;\r\n    if(!(navigator.clipboard&&window.ClipboardItem)){toast('Copy not supported here. Use Download PNG.');return;}\r\n    var c=document.createElement('canvas');draw(c,cur.q,cur.o);\r\n    c.toBlob(function(b){\r\n      navigator.clipboard.write([new ClipboardItem({'image\/png':b})]).then(function(){toast('Image copied');},function(){toast('Copy blocked by the browser. Use Download PNG.');});\r\n    },'image\/png');\r\n  });\r\n\r\n  var r=debounce(render,120);\r\n  $$('input,select,textarea',document.querySelector('#tool-qr .layout')).forEach(function(el){\r\n    el.addEventListener('input',r);el.addEventListener('change',r);\r\n  });\r\n  render();\r\n})();\r\n\r\n<\/script><script>\r\n\r\n(function(){\r\n  var cv=$('#qm-cv'),ctx=cv.getContext('2d');\r\n  var bgImg=null,bgUrl='',align='center';\r\n  var THEMES=[\r\n    ['Indigo','#4F46E5','#7C3AED','#FFFFFF','#FF6B35'],\r\n    ['Midnight','#0F172A','#1E293B','#FFFFFF','#FF6B35'],\r\n    ['Sunrise','#FF6B35','#FBBF24','#0F172A','#FFFFFF'],\r\n    ['Fresh','#059669','#0EA5E9','#FFFFFF','#FDE68A'],\r\n    ['Paper','#F8FAFC','#E2E8F0','#0F172A','#4F46E5'],\r\n    ['Blush','#FCE7F3','#FEF3C7','#831843','#E1306C'],\r\n    ['Noir','#000000','#1F2937','#FFFFFF','#FACC15'],\r\n    ['Ocean','#0EA5E9','#4F46E5','#FFFFFF','#FDE68A']\r\n  ];\r\n  THEMES.forEach(function(t){\r\n    var b=document.createElement('button');b.type='button';b.className='sw';b.title=t[0];\r\n    b.style.background='linear-gradient(135deg,'+t[1]+','+t[2]+')';\r\n    b.addEventListener('click',function(){\r\n      $('#qm-c-bg1').value=t[1];$('#qm-c-bg2').value=t[2];$('#qm-c-tx').value=t[3];$('#qm-c-ac').value=t[4];\r\n      $$('#qm-themes .sw').forEach(function(x){x.classList.toggle('on',x===b);});draw();\r\n    });\r\n    $('#qm-themes').appendChild(b);\r\n  });\r\n  $('#qm-themes .sw').classList.add('on');\r\n\r\n  function wrap(g,text,maxW){\r\n    var out=[];\r\n    text.split(\/\\n\/).forEach(function(par){\r\n      var words=par.split(\/\\s+\/).filter(Boolean),line='';\r\n      if(!words.length){out.push('');return;}\r\n      words.forEach(function(w){\r\n        \/\/ break very long words\r\n        while(g.measureText(w).width>maxW&&w.length>1){\r\n          var k=w.length;\r\n          while(k>1&&g.measureText(w.slice(0,k)).width>maxW)k--;\r\n          if(line){out.push(line);line='';}\r\n          out.push(w.slice(0,k));w=w.slice(k);\r\n        }\r\n        var test=line?line+' '+w:w;\r\n        if(g.measureText(test).width<=maxW)line=test;\r\n        else{if(line)out.push(line);line=w;}\r\n      });\r\n      if(line)out.push(line);\r\n    });\r\n    return out;\r\n  }\r\n\r\n  function draw(){\r\n    var dims=$('#qm-t-size').value.split('x'),W=+dims[0],H=+dims[1];\r\n    cv.width=W;cv.height=H;\r\n    var g=ctx;\r\n    var bg1=$('#qm-c-bg1').value,bg2=$('#qm-c-bg2').value,tx=$('#qm-c-tx').value,ac=$('#qm-c-ac').value;\r\n    var ang=+$('#qm-c-ang').value*Math.PI\/180,pad=+$('#qm-r-pad').value\/100*W;\r\n    $('#qm-vv-ang').textContent=$('#qm-c-ang').value+'\u00b0';\r\n    $('#qm-vv-pad').textContent=$('#qm-r-pad').value+'%';\r\n    $('#qm-vv-fs').textContent=$('#qm-r-fs').value+'%';\r\n    $('#qm-vv-ov').textContent=$('#qm-r-ov').value+'%';\r\n    $('#qm-dim').textContent=W+' \u00d7 '+H+' px';\r\n\r\n    \/\/ background\r\n    var dx=Math.sin(ang),dy=-Math.cos(ang),half=(Math.abs(W*dx)+Math.abs(H*dy))\/2;\r\n    var gr=g.createLinearGradient(W\/2-dx*half,H\/2-dy*half,W\/2+dx*half,H\/2+dy*half);\r\n    gr.addColorStop(0,bg1);gr.addColorStop(1,bg2);\r\n    g.fillStyle=gr;g.fillRect(0,0,W,H);\r\n    var hasPhoto=!!bgImg;\r\n    if(hasPhoto){\r\n      var iw=bgImg.naturalWidth,ih=bgImg.naturalHeight,s=Math.max(W\/iw,H\/ih),sw=W\/s,sh=H\/s;\r\n      g.drawImage(bgImg,(iw-sw)\/2,(ih-sh)\/2,sw,sh,0,0,W,H);\r\n      g.fillStyle='rgba(0,0,0,'+(+$('#qm-r-ov').value\/100)+')';g.fillRect(0,0,W,H);\r\n    }\r\n    \/\/ decoration\r\n    var deco=$('#qm-s-deco').value;\r\n    if(deco==='circles'&&!hasPhoto){\r\n      g.save();g.globalAlpha=.14;g.fillStyle=ac;\r\n      g.beginPath();g.arc(W*0.92,H*0.08,W*0.28,0,Math.PI*2);g.fill();\r\n      g.globalAlpha=.10;g.beginPath();g.arc(W*0.05,H*0.96,W*0.22,0,Math.PI*2);g.fill();\r\n      g.restore();\r\n    }else if(deco==='frame'){\r\n      g.save();g.strokeStyle=ac;g.lineWidth=Math.max(3,W*0.004);\r\n      var inset=pad*0.42;g.strokeRect(inset,inset,W-inset*2,H-inset*2);g.restore();\r\n    }\r\n\r\n    \/\/ text\r\n    var quote=$('#qm-t-quote').value.trim(),author=$('#qm-t-author').value.trim(),handle=$('#qm-t-handle').value.trim();\r\n    var stack=$('#qm-s-font').value,it=$('#qm-k-it').checked?'italic ':'',wt=$('#qm-k-bd').checked?'700 ':'400 ';\r\n    var qm=$('#qm-k-qm').checked,line=$('#qm-k-line').checked;\r\n    var x=align==='left'?pad:(align==='right'?W-pad:W\/2);\r\n    var maxW=W-pad*2;\r\n    var handleSize=Math.round(W*0.027),handleH=handle?handleSize*2.2:0;\r\n    var qmSize=W*0.2,qmH=qm?qmSize*0.46:0;\r\n    var areaTop=pad,areaBottom=H-pad-handleH,availH=areaBottom-areaTop;\r\n    function authorSize(fs){return Math.max(W*0.026,Math.min(W*0.04,fs*0.42));}\r\n    function measure(fs){\r\n      g.font=it+wt+fs+'px '+stack;\r\n      var lines=wrap(g,quote,maxW),lh=fs*1.28;\r\n      var aS=authorSize(fs);\r\n      var h=qmH+lines.length*lh+(author?(line?fs*0.5+W*0.012:fs*0.45)+aS*1.2:0);\r\n      return {lines:lines,lh:lh,h:h,aS:aS};\r\n    }\r\n    var fs,m;\r\n    if($('#qm-k-auto').checked){\r\n      var hi=Math.round(W*0.088),lo=Math.round(W*0.022);\r\n      fs=hi;m=measure(fs);\r\n      while(fs>lo&&(m.h>availH)){fs-=2;m=measure(fs);}\r\n    }else{\r\n      fs=Math.round(+$('#qm-r-fs').value\/100*W);m=measure(fs);\r\n    }\r\n    $('#qm-fs-wrap').style.opacity=$('#qm-k-auto').checked?'.5':'1';\r\n    $('#qm-r-fs').disabled=$('#qm-k-auto').checked;\r\n\r\n    g.textAlign=align;g.textBaseline='alphabetic';\r\n    if(hasPhoto){g.shadowColor='rgba(0,0,0,.35)';g.shadowBlur=W*0.012;g.shadowOffsetY=W*0.004;}\r\n    var y=areaTop+Math.max(0,(availH-m.h)\/2);\r\n    if(qm){\r\n      g.font='700 '+qmSize+'px Georgia, \"Times New Roman\", serif';g.fillStyle=ac;\r\n      g.fillText('\u201c',x,y+qmSize*0.72);\r\n      y+=qmH;\r\n    }\r\n    g.font=it+wt+fs+'px '+stack;g.fillStyle=tx;\r\n    m.lines.forEach(function(l,i){g.fillText(l,x,y+m.lh*i+fs*0.9);});\r\n    y+=m.lines.length*m.lh;\r\n    if(author){\r\n      y+=line?fs*0.25:fs*0.2;\r\n      if(line){\r\n        var lw=W*0.09,lx=align==='left'?x:(align==='right'?x-lw:x-lw\/2);\r\n        g.fillStyle=ac;g.fillRect(lx,y,lw,Math.max(4,W*0.006));y+=W*0.012+fs*0.2;\r\n      }\r\n      g.font='600 '+m.aS+'px '+stack;g.fillStyle=tx;g.globalAlpha=.92;\r\n      g.fillText((line?'':'\u2014 ')+author,x,y+m.aS);g.globalAlpha=1;\r\n    }\r\n    g.shadowColor='transparent';g.shadowBlur=0;g.shadowOffsetY=0;\r\n    if(handle){\r\n      g.font='600 '+handleSize+'px '+stack;g.fillStyle=tx;g.globalAlpha=.7;\r\n      g.fillText(handle,x,H-pad+handleSize*0.2);g.globalAlpha=1;\r\n    }\r\n  }\r\n\r\n  $$('#qm-align .tab').forEach(function(t){t.addEventListener('click',function(){\r\n    align=t.dataset.a;$$('#qm-align .tab').forEach(function(x){x.classList.toggle('on',x===t);});draw();\r\n  });});\r\n  $('#qm-i-bg').addEventListener('change',function(e){\r\n    var f=e.target.files[0];if(!f||!\/^image\\\/\/.test(f.type))return;\r\n    if(bgUrl)URL.revokeObjectURL(bgUrl);\r\n    bgUrl=URL.createObjectURL(f);\r\n    var im=new Image();im.onload=function(){bgImg=im;$('#qm-ov-wrap').hidden=false;draw();};\r\n    im.onerror=function(){toast('Could not read that image');};\r\n    im.src=bgUrl;\r\n  });\r\n  $('#qm-b-rmbg').addEventListener('click',function(){\r\n    bgImg=null;if(bgUrl)URL.revokeObjectURL(bgUrl);bgUrl='';$('#qm-i-bg').value='';$('#qm-ov-wrap').hidden=true;draw();\r\n  });\r\n  var d=debounce(draw,40);\r\n  $$('input,select,textarea',document.querySelector('#tool-qm .layout')).forEach(function(el){\r\n    if(el.id==='qm-i-bg')return;\r\n    el.addEventListener('input',d);el.addEventListener('change',d);\r\n  });\r\n  $('#qm-dl-png').addEventListener('click',function(){downloadCanvas(cv,'quote-image.png','image\/png');});\r\n  $('#qm-dl-jpg').addEventListener('click',function(){downloadCanvas(cv,'quote-image.jpg','image\/jpeg',0.93);});\r\n  draw();\r\n  \/\/ redraw once fonts\/layout settle\r\n  window.addEventListener('load',draw);\r\n})();\r\n\r\n<\/script><script>\r\n\r\n(function(){\r\n  var cv=$('#st-cv'),ctx=cv.getContext('2d'),W=1080,H=1920;\r\n  var bgImg=null,bgUrl='';\r\n  var TP=[\r\n    {n:'News',l:'center',d:'blobs',c:['#4F46E5','#7C3AED','#FFFFFF','#FF6B35'],t:{tag:'NEW',hero:'',head:'Big news is coming',sub:'Something exciting launches this Friday. Stay tuned!',cta:'Learn more',handle:'@yourbrand'}},\r\n    {n:'Sale',l:'center',d:'stripes',c:['#FF6B35','#FBBF24','#0F172A','#0F172A'],t:{tag:'LIMITED TIME',hero:'50% OFF',head:'Weekend Sale',sub:'Use code SAVE50 at checkout',cta:'Shop now',handle:'@yourbrand'}},\r\n    {n:'Quote',l:'center',d:'dots',c:['#0F172A','#1E293B','#FFFFFF','#FF6B35'],t:{tag:'',hero:'\u201c',head:'Small steps every day lead to big results.',sub:'\u2014 Your Name',cta:'',handle:'@yourbrand'}},\r\n    {n:'Tip',l:'left',d:'blobs',c:['#F8FAFC','#E0E7FF','#0F172A','#4F46E5'],t:{tag:'TIP #1',hero:'',head:'Post at the same time every day',sub:'Consistency helps your audience know when to expect you.',cta:'Save for later',handle:'@yourbrand'}},\r\n    {n:'Question',l:'card',d:'blobs',c:['#FF6B35','#E1306C','#FFFFFF','#4F46E5'],t:{tag:'ASK ME',hero:'',head:'What should I post next?',sub:'Reply with your idea below',cta:'Send reply',handle:'@yourbrand'}},\r\n    {n:'Event',l:'left',d:'stripes',c:['#059669','#0EA5E9','#FFFFFF','#FDE68A'],t:{tag:'JOIN US',hero:'OCT 25',head:'Digital Marketing Workshop',sub:'Venue name \u00b7 6:00 PM \u00b7 Free entry',cta:'Register now',handle:'@yourbrand'}},\r\n    {n:'Minimal',l:'left',d:'none',c:['#000000','#111827','#FFFFFF','#FACC15'],t:{tag:'',hero:'',head:'Less noise. More signal.',sub:'',cta:'',handle:'@yourbrand'}},\r\n    {n:'Launch',l:'center',d:'blobs',c:['#0EA5E9','#4F46E5','#FFFFFF','#FDE68A'],t:{tag:'OUT NOW',hero:'NEW',head:'Our new collection is here',sub:'',cta:'Tap to view',handle:'@yourbrand'}}\r\n  ];\r\n  var tbox=$('#st-tpls');\r\n  TP.forEach(function(p,i){\r\n    var b=document.createElement('button');b.type='button';b.className='tp'+(i===0?' on':'');\r\n    b.innerHTML='<div class=\"th\" style=\"background:linear-gradient(160deg,'+p.c[0]+','+p.c[1]+');color:'+p.c[2]+'\"><i style=\"width:30%;background:'+p.c[3]+'\"><\/i><b>'+(p.t.hero||p.t.head.split(' ').slice(0,2).join(' '))+'<\/b><i style=\"width:60%\"><\/i><u style=\"background:'+p.c[3]+'\"><\/u><\/div><span>'+p.n+'<\/span>';\r\n    b.addEventListener('click',function(){apply(p);$$('.tp',tbox).forEach(function(x){x.classList.toggle('on',x===b);});draw();});\r\n    tbox.appendChild(b);\r\n  });\r\n  function apply(p){\r\n    $('#st-c-bg1').value=p.c[0];$('#st-c-bg2').value=p.c[1];$('#st-c-tx').value=p.c[2];$('#st-c-ac').value=p.c[3];\r\n    $('#st-s-layout').value=p.l;$('#st-s-deco').value=p.d;\r\n    $('#st-x-tag').value=p.t.tag;$('#st-x-hero').value=p.t.hero;$('#st-x-head').value=p.t.head;\r\n    $('#st-x-sub').value=p.t.sub;$('#st-x-cta').value=p.t.cta;$('#st-x-handle').value=p.t.handle;\r\n  }\r\n\r\n  function rr(g,x,y,w,h,r){\r\n    r=Math.min(r,w\/2,h\/2);\r\n    g.beginPath();g.moveTo(x+r,y);g.arcTo(x+w,y,x+w,y+h,r);g.arcTo(x+w,y+h,x,y+h,r);g.arcTo(x,y+h,x,y,r);g.arcTo(x,y,x+w,y,r);g.closePath();\r\n  }\r\n  function wrap(g,text,maxW){\r\n    var out=[];\r\n    text.split(\/\\n\/).forEach(function(par){\r\n      var words=par.split(\/\\s+\/).filter(Boolean),line='';\r\n      if(!words.length)return;\r\n      words.forEach(function(w){\r\n        while(g.measureText(w).width>maxW&&w.length>1){\r\n          var k=w.length;\r\n          while(k>1&&g.measureText(w.slice(0,k)).width>maxW)k--;\r\n          if(line){out.push(line);line='';}\r\n          out.push(w.slice(0,k));w=w.slice(k);\r\n        }\r\n        var test=line?line+' '+w:w;\r\n        if(g.measureText(test).width<=maxW)line=test;\r\n        else{if(line)out.push(line);line=w;}\r\n      });\r\n      if(line)out.push(line);\r\n    });\r\n    return out;\r\n  }\r\n  function fit(g,text,weight,stack,maxW,maxLines,maxS,minS){\r\n    var s=maxS,lines;\r\n    for(;s>=minS;s-=2){\r\n      g.font=weight+' '+s+'px '+stack;\r\n      lines=wrap(g,text,maxW);\r\n      if(lines.length<=maxLines)break;\r\n    }\r\n    if(s<minS){s=minS;g.font=weight+' '+s+'px '+stack;lines=wrap(g,text,maxW);}\r\n    return {s:s,lines:lines.slice(0,maxLines+1)};\r\n  }\r\n  function onColor(hex){return hexLum(hex)>0.45?'#0F172A':'#FFFFFF';}\r\n\r\n  function draw(){\r\n    var g=ctx,stack=$('#st-s-font').value,layout=$('#st-s-layout').value,deco=$('#st-s-deco').value;\r\n    var bg1=$('#st-c-bg1').value,bg2=$('#st-c-bg2').value,tx=$('#st-c-tx').value,ac=$('#st-c-ac').value;\r\n    $('#st-vv-ov').textContent=$('#st-r-ov').value+'%';\r\n    cv.width=W;cv.height=H;\r\n    var gr=g.createLinearGradient(W*0.2,0,W*0.8,H);gr.addColorStop(0,bg1);gr.addColorStop(1,bg2);\r\n    g.fillStyle=gr;g.fillRect(0,0,W,H);\r\n    var photo=!!bgImg;\r\n    if(photo){\r\n      var iw=bgImg.naturalWidth,ih=bgImg.naturalHeight,s=Math.max(W\/iw,H\/ih),sw=W\/s,sh=H\/s;\r\n      g.drawImage(bgImg,(iw-sw)\/2,(ih-sh)\/2,sw,sh,0,0,W,H);\r\n      g.fillStyle='rgba(0,0,0,'+(+$('#st-r-ov').value\/100)+')';g.fillRect(0,0,W,H);\r\n    }\r\n    if(!photo||deco!=='blobs'){\r\n      g.save();\r\n      if(deco==='blobs'){\r\n        g.globalAlpha=.18;g.fillStyle=ac;\r\n        g.beginPath();g.arc(W*0.98,H*0.1,420,0,7);g.fill();\r\n        g.globalAlpha=.12;g.beginPath();g.arc(-20,H*0.64,300,0,7);g.fill();\r\n        g.globalAlpha=.12;g.strokeStyle=tx;g.lineWidth=44;g.beginPath();g.arc(W*0.86,H*0.9,250,0,7);g.stroke();\r\n      }else if(deco==='stripes'){\r\n        g.globalAlpha=.08;g.fillStyle=tx;\r\n        for(var i=0;i<W+800;i+=120){g.beginPath();g.moveTo(i,0);g.lineTo(i+56,0);g.lineTo(i+56-760,H);g.lineTo(i-760,H);g.closePath();g.fill();}\r\n      }else if(deco==='dots'){\r\n        g.globalAlpha=.16;g.fillStyle=tx;\r\n        for(var y=70;y<H;y+=70)for(var x=((y\/70)%2?35:70);x<W;x+=70){g.beginPath();g.arc(x,y,4,0,7);g.fill();}\r\n      }\r\n      g.restore();\r\n    }\r\n\r\n    var vals={tag:$('#st-x-tag').value.trim(),hero:$('#st-x-hero').value.trim(),head:$('#st-x-head').value.trim(),\r\n      sub:$('#st-x-sub').value.trim(),cta:$('#st-x-cta').value.trim(),handle:$('#st-x-handle').value.trim()};\r\n    var isCard=layout==='card',left=layout==='left';\r\n    var pad=88,maxW=W-pad*2,topSafe=250,botSafe=H-340;\r\n    var al=left?'left':'center',ax=left?pad:W\/2;\r\n    var cardPad=70,innerW=isCard?maxW-cardPad*2:maxW;\r\n    var textCol=isCard?'#0F172A':tx;\r\n    var heroCol=isCard?ac:(contrast(ac,bg1)>=3||photo?ac:tx);\r\n    if(photo&&!isCard&&contrast(ac,'#222222')<3)heroCol=tx;\r\n    var accentText=onColor(ac);\r\n    g.textBaseline='top';\r\n    var hasLS='letterSpacing' in g;\r\n\r\n    var items=[],inner=[];\r\n    function add(arr,h,gapAfter,fn){arr.push({h:h,gap:gapAfter,fn:fn});}\r\n\r\n    \/\/ tag\r\n    if(vals.tag){\r\n      if(hasLS)g.letterSpacing='4px';\r\n      g.font='800 34px '+stack;\r\n      var tw=g.measureText(vals.tag.toUpperCase()).width+64,th=68;\r\n      if(hasLS)g.letterSpacing='0px';\r\n      add(items,th,isCard?44:46,function(y){\r\n        var x0=left?pad:W\/2-tw\/2;\r\n        g.fillStyle=ac;rr(g,x0,y,tw,th,th\/2);g.fill();\r\n        g.fillStyle=accentText;g.textAlign='center';g.font='800 34px '+stack;\r\n        if(hasLS)g.letterSpacing='4px';\r\n        g.fillText(vals.tag.toUpperCase(),x0+tw\/2+(hasLS?2:0),y+16);\r\n        if(hasLS)g.letterSpacing='0px';\r\n      });\r\n    }\r\n    var tgt=isCard?inner:items;\r\n    var alin=isCard?'center':al,axx=isCard?W\/2:ax;\r\n    \/\/ hero\r\n    if(vals.hero){\r\n      var isMark=vals.hero==='\u201c'||vals.hero==='\"';\r\n      var f=fit(g,vals.hero,'900',isMark?'Georgia, serif':stack,innerW,2,isMark?340:250,90);\r\n      var lh=f.s*(isMark?0.62:1.02),hh=f.lines.length*lh;\r\n      add(tgt,hh,isMark?10:26,(function(f,lh,isMark){return function(y){\r\n        g.font='900 '+f.s+'px '+(isMark?'Georgia, serif':stack);g.fillStyle=heroCol;g.textAlign=alin;\r\n        f.lines.forEach(function(l,i){g.fillText(l,axx,y+i*lh);});\r\n      };})(f,lh,isMark));\r\n    }\r\n    \/\/ headline\r\n    if(vals.head){\r\n      var fh=fit(g,vals.head,'800',stack,innerW,4,112,50),lhh=fh.s*1.12;\r\n      add(tgt,fh.lines.length*lhh,30,(function(fh,lhh){return function(y){\r\n        g.font='800 '+fh.s+'px '+stack;g.fillStyle=textCol;g.textAlign=alin;\r\n        fh.lines.forEach(function(l,i){g.fillText(l,axx,y+i*lhh);});\r\n      };})(fh,lhh));\r\n    }\r\n    \/\/ sub\r\n    if(vals.sub){\r\n      var fsb=fit(g,vals.sub,'500',stack,innerW,6,46,28),lhs=fsb.s*1.4;\r\n      add(tgt,fsb.lines.length*lhs,0,(function(fsb,lhs){return function(y){\r\n        g.font='500 '+fsb.s+'px '+stack;g.fillStyle=textCol;g.globalAlpha=.86;g.textAlign=alin;\r\n        fsb.lines.forEach(function(l,i){g.fillText(l,axx,y+i*lhs);});g.globalAlpha=1;\r\n      };})(fsb,lhs));\r\n    }\r\n    \/\/ card wrapper\r\n    if(isCard&&inner.length){\r\n      var ih2=0;inner.forEach(function(it,i){ih2+=it.h+(i<inner.length-1?it.gap:0);});\r\n      var ch=ih2+cardPad*2;\r\n      add(items,ch,56,function(y){\r\n        g.save();g.shadowColor='rgba(0,0,0,.25)';g.shadowBlur=50;g.shadowOffsetY=20;\r\n        g.fillStyle='#FFFFFF';rr(g,pad,y,maxW,ch,56);g.fill();g.restore();\r\n        var yy=y+cardPad;\r\n        inner.forEach(function(it,i){it.fn(yy);yy+=it.h+it.gap;});\r\n      });\r\n    }\r\n    \/\/ cta\r\n    if(vals.cta){\r\n      g.font='800 46px '+stack;\r\n      var label=vals.cta+'  \u2192',cw=g.measureText(label).width+110,chh=112;\r\n      var heroLast=items.length?items[items.length-1]:null;\r\n      if(heroLast&&!isCard&&heroLast.gap<70)heroLast.gap=70;\r\n      add(items,chh,0,function(y){\r\n        var x0=left?pad:W\/2-cw\/2;\r\n        g.fillStyle=ac;g.save();g.shadowColor='rgba(0,0,0,.22)';g.shadowBlur=26;g.shadowOffsetY=10;\r\n        rr(g,x0,y,cw,chh,chh\/2);g.fill();g.restore();\r\n        g.fillStyle=accentText;g.textAlign='center';g.font='800 46px '+stack;\r\n        g.fillText(label,x0+cw\/2,y+chh\/2-23);\r\n      });\r\n    }\r\n\r\n    var total=0;items.forEach(function(it,i){total+=it.h+(i<items.length-1?it.gap:0);});\r\n    var bottomLimit=botSafe-(vals.handle?70:0),avail=bottomLimit-topSafe;\r\n    var y0=left?Math.max(topSafe,bottomLimit-total):topSafe+Math.max(0,(avail-total)\/2);\r\n    var yy2=y0;\r\n    items.forEach(function(it){it.fn(yy2);yy2+=it.h+it.gap;});\r\n\r\n    if(vals.handle){\r\n      g.font='700 34px '+stack;g.fillStyle=tx;g.globalAlpha=.8;g.textAlign=al;g.textBaseline='top';\r\n      g.fillText(vals.handle,ax,botSafe-44);g.globalAlpha=1;\r\n    }\r\n  }\r\n\r\n  $('#st-k-safe').addEventListener('change',function(){$('#st-safe').hidden=!this.checked;});\r\n  $('#st-i-bg').addEventListener('change',function(e){\r\n    var f=e.target.files[0];if(!f||!\/^image\\\/\/.test(f.type))return;\r\n    if(bgUrl)URL.revokeObjectURL(bgUrl);\r\n    bgUrl=URL.createObjectURL(f);\r\n    var im=new Image();im.onload=function(){bgImg=im;$('#st-ov-wrap').hidden=false;draw();};\r\n    im.onerror=function(){toast('Could not read that image');};\r\n    im.src=bgUrl;\r\n  });\r\n  $('#st-b-rmbg').addEventListener('click',function(){\r\n    bgImg=null;if(bgUrl)URL.revokeObjectURL(bgUrl);bgUrl='';$('#st-i-bg').value='';$('#st-ov-wrap').hidden=true;draw();\r\n  });\r\n  var d=debounce(draw,40);\r\n  $$('input,select,textarea',document.querySelector('#tool-st .layout')).forEach(function(el){\r\n    if(el.id==='st-i-bg'||el.id==='st-k-safe')return;\r\n    el.addEventListener('input',d);el.addEventListener('change',d);\r\n  });\r\n  $('#st-dl-png').addEventListener('click',function(){downloadCanvas(cv,'instagram-story.png','image\/png');});\r\n  $('#st-dl-jpg').addEventListener('click',function(){downloadCanvas(cv,'instagram-story.jpg','image\/jpeg',0.93);});\r\n  apply(TP[0]);draw();\r\n  window.addEventListener('load',draw);\r\n})();\r\n\r\n<\/script>\r\n<script>\r\n(function(){\r\n  var R={\"home\": {\"title\": \"Free Social Media Design Tools | Image Size, QR, Stories\", \"meta\": \"Check image sizes, preview your Instagram grid, and make quote images, story templates and QR codes. Free design tools.\"}, \"social-media-image-size-guide\": {\"title\": \"Social Media Image Size Guide | All Platforms\", \"meta\": \"Image and video sizes for Instagram, Facebook, LinkedIn, X and YouTube in one place. Free social media size cheat sheet.\"}, \"instagram-grid-preview\": {\"title\": \"Instagram Grid Preview | Plan Your Feed Layout\", \"meta\": \"Upload images and preview how your Instagram grid will look. Plan a clean, consistent feed. Free tool.\"}, \"qr-code-generator\": {\"title\": \"Free QR Code Generator | Profile, Link & WhatsApp\", \"meta\": \"Create a QR code for any link, Instagram profile or WhatsApp chat. Download as PNG. Free QR code generator.\"}, \"quote-image-maker\": {\"title\": \"Free Quote Image Maker | Quote Post Creator\", \"meta\": \"Turn any quote into a stylish image for Instagram, Facebook and LinkedIn. Pick colors and sizes. Free quote maker.\"}, \"story-template-maker\": {\"title\": \"Free Instagram Story Template Maker | 9:16 Designs\", \"meta\": \"Create Instagram and Facebook story designs in 9:16 size. Add text and colors, then download. Free story maker.\"}},T=[{\"slug\": \"social-media-image-size-guide\", \"name\": \"Social Media Image Size Guide\", \"card\": \"See the right image size for every platform.\", \"icon\": \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" aria-hidden=\\\"true\\\"><rect x=\\\"3\\\" y=\\\"3\\\" width=\\\"18\\\" height=\\\"18\\\" rx=\\\"3\\\"\/><path d=\\\"M3 9h18M9 21V9\\\"\/><\/svg>\", \"color\": \"#4F46E5\"}, {\"slug\": \"instagram-grid-preview\", \"name\": \"Instagram Grid Preview\", \"card\": \"Preview how your feed will look before you post.\", \"icon\": \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" aria-hidden=\\\"true\\\"><rect x=\\\"3\\\" y=\\\"3\\\" width=\\\"7\\\" height=\\\"7\\\" rx=\\\"1.5\\\"\/><rect x=\\\"14\\\" y=\\\"3\\\" width=\\\"7\\\" height=\\\"7\\\" rx=\\\"1.5\\\"\/><rect x=\\\"3\\\" y=\\\"14\\\" width=\\\"7\\\" height=\\\"7\\\" rx=\\\"1.5\\\"\/><rect x=\\\"14\\\" y=\\\"14\\\" width=\\\"7\\\" height=\\\"7\\\" rx=\\\"1.5\\\"\/><\/svg>\", \"color\": \"#E1306C\"}, {\"slug\": \"qr-code-generator\", \"name\": \"QR Code Generator\", \"card\": \"Make a QR code for your profile, website or WhatsApp.\", \"icon\": \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" aria-hidden=\\\"true\\\"><rect x=\\\"3\\\" y=\\\"3\\\" width=\\\"7\\\" height=\\\"7\\\" rx=\\\"1\\\"\/><rect x=\\\"14\\\" y=\\\"3\\\" width=\\\"7\\\" height=\\\"7\\\" rx=\\\"1\\\"\/><rect x=\\\"3\\\" y=\\\"14\\\" width=\\\"7\\\" height=\\\"7\\\" rx=\\\"1\\\"\/><path d=\\\"M14 14h3v3h-3zM20 14v.01M14 20h.01M17 20h4v-3\\\"\/><\/svg>\", \"color\": \"#0F172A\"}, {\"slug\": \"quote-image-maker\", \"name\": \"Quote Image Maker\", \"card\": \"Turn text into a clean, shareable quote post.\", \"icon\": \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" aria-hidden=\\\"true\\\"><path d=\\\"M7 7h4v5a4 4 0 0 1-4 4M15 7h4v5a4 4 0 0 1-4 4\\\"\/><\/svg>\", \"color\": \"#FF6B35\"}, {\"slug\": \"story-template-maker\", \"name\": \"Story Template Maker\", \"card\": \"Create 9:16 story designs in a few clicks.\", \"icon\": \"<svg viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" aria-hidden=\\\"true\\\"><rect x=\\\"6\\\" y=\\\"2\\\" width=\\\"12\\\" height=\\\"20\\\" rx=\\\"3\\\"\/><path d=\\\"M9 7h6M9 11h6M10 17h4\\\"\/><\/svg>\", \"color\": \"#10B981\"}];\r\n  var metaEl=document.querySelector('meta[name=\"description\"]');\r\n  var bar=$('.switch .wrap');\r\n  function route(scroll){\r\n    var h=(location.hash||'').replace(\/^#\\\/?\/,'');\r\n    if(!R[h])h='home';\r\n    $$('.panel').forEach(function(p){p.hidden=p.dataset.route!==h;});\r\n    $$('.sp').forEach(function(a){\r\n      var on=a.dataset.route===h;a.classList.toggle('on',on);\r\n      if(on){a.setAttribute('aria-current','page');bar.scrollLeft=a.offsetLeft-(bar.clientWidth-a.offsetWidth)\/2;}else a.removeAttribute('aria-current');\r\n    });\r\n    document.title=R[h].title;metaEl.setAttribute('content',R[h].meta);\r\n    if(scroll)window.scrollTo(0,0);\r\n  }\r\n  window.addEventListener('hashchange',function(){route(true);});\r\n  route(false);\r\n  $$('.more').forEach(function(m){\r\n    var self=m.dataset.self,h='<h2>More free design tools<\/h2><div class=\"minis\">';\r\n    T.forEach(function(t){\r\n      if(t.slug===self)return;\r\n      h+='<a class=\"mini\" href=\"#'+t.slug+'\"><div class=\"ic\" style=\"--c:'+t.color+'\">'+t.icon+'<\/div><div><b>'+t.name+'<\/b><span>'+t.card+'<\/span><\/div><\/a>';\r\n    });\r\n    m.innerHTML=h+'<\/div>';\r\n  });\r\n  var q=$('#hm-q');\r\n  q.addEventListener('input',function(){\r\n    var terms=q.value.toLowerCase().split(\/\\s+\/).filter(Boolean),shown=0;\r\n    $$('#hm-hub .tool').forEach(function(c){\r\n      var ok=terms.every(function(w){return c.dataset.k.indexOf(w)>-1;});\r\n      c.hidden=!ok;if(ok)shown++;\r\n    });\r\n    $('#hm-empty').style.display=shown?'none':'block';\r\n  });\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Free Social Media Design Tools | Image Size, QR, Stories Onground MediaFree marketing tools Design &amp; Visual Tools All toolsSize [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-531","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=531"}],"version-history":[{"count":4,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/531\/revisions"}],"predecessor-version":[{"id":560,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/531\/revisions\/560"}],"wp:attachment":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}