""" 3-step "Welcome — what to do next" infographic. 1600x600 PNG, white card, #1974CE accents, mode-agnostic. Embeds in welcome post + activation email + support docs. """ from PIL import Image, ImageDraw, ImageFont import os OUT = os.path.dirname(os.path.abspath(__file__)) BLUE = (25, 116, 206, 255) # #1974CE BLUE_DARK = (13, 79, 138, 255) # #0d4f8a BLUE_PALE = (240, 247, 255, 255) # #f0f7ff INK = (26, 26, 46, 255) # #1a1a2e INK_SOFT = (85, 85, 85, 255) BORDER = (229, 229, 229, 255) WHITE = (255, 255, 255, 255) OUTFIT = os.path.join(OUT, "fonts", "Outfit-ExtraBold.ttf") DMSANS = os.path.join(OUT, "fonts", "DMSans-Medium.ttf") def draw_paw(d, cx, cy, scale, color): pad_w = int(scale * 0.95); pad_h = int(scale * 0.78) pad_top = cy + int(scale * 0.10) d.ellipse([cx - pad_w // 2, pad_top, cx + pad_w // 2, pad_top + pad_h], fill=color) toe_w = int(scale * 0.40); toe_h = int(scale * 0.50) inner_dx = int(scale * 0.22); inner_y = cy - int(scale * 0.55) d.ellipse([cx - inner_dx - toe_w // 2, inner_y, cx - inner_dx + toe_w // 2, inner_y + toe_h], fill=color) d.ellipse([cx + inner_dx - toe_w // 2, inner_y, cx + inner_dx + toe_w // 2, inner_y + toe_h], fill=color) outer_w = int(scale * 0.36); outer_h = int(scale * 0.46) outer_dx = int(scale * 0.62); outer_y = cy - int(scale * 0.32) d.ellipse([cx - outer_dx - outer_w // 2, outer_y, cx - outer_dx + outer_w // 2, outer_y + outer_h], fill=color) d.ellipse([cx + outer_dx - outer_w // 2, outer_y, cx + outer_dx + outer_w // 2, outer_y + outer_h], fill=color) def draw_arrow(d, x1, y, x2, color, thickness=3): """Thin horizontal arrow with chevron head.""" d.line([(x1, y), (x2, y)], fill=color, width=thickness) head = 12 d.line([(x2 - head, y - head // 2), (x2, y)], fill=color, width=thickness) d.line([(x2 - head, y + head // 2), (x2, y)], fill=color, width=thickness) def render(out_w=1600, out_h=600, supersample=2): SS = supersample W, H = out_w * SS, out_h * SS img = Image.new("RGBA", (W, H), WHITE) d = ImageDraw.Draw(img) # Outer card border (subtle) pad = 12 * SS d.rounded_rectangle( [pad, pad, W - pad, H - pad], radius=18 * SS, outline=BORDER, width=2 * SS, fill=WHITE, ) # Title bar (small) — top-left, brand cue title_font = ImageFont.truetype(OUTFIT, 26 * SS) title = "GET STARTED IN 3 STEPS" paw_size = 22 * SS title_x = 56 * SS title_y = 50 * SS draw_paw(d, title_x + paw_size // 2, title_y + paw_size // 2 + 4 * SS, paw_size, BLUE) d.text((title_x + paw_size + 14 * SS, title_y), title, font=title_font, fill=BLUE) # Three step columns steps = [ { "n": "1", "head": "Open My Dogs", "sub": "Verify vet, shots, photo,\nemergency contact", }, { "n": "2", "head": "Sign waivers", "sub": "Under My Account →\nYour Agreements", }, { "n": "3", "head": "Book a service", "sub": "Daycare, grooming,\ntraining, or boarding", }, ] n_font = ImageFont.truetype(OUTFIT, 64 * SS) head_font = ImageFont.truetype(OUTFIT, 38 * SS) sub_font = ImageFont.truetype(DMSANS, 22 * SS) try: sub_font.set_variation_by_name("Medium") except Exception: pass # Layout: 3 equal columns, with arrows between col_top = 170 * SS col_bottom = H - 70 * SS avail_w = W - 2 * (56 * SS) col_w = avail_w // 3 col_left0 = 56 * SS circle_d = 96 * SS for i, step in enumerate(steps): col_x = col_left0 + i * col_w col_cx = col_x + col_w // 2 # Numbered circle cy = col_top + circle_d // 2 d.ellipse( [col_cx - circle_d // 2, col_top, col_cx + circle_d // 2, col_top + circle_d], fill=BLUE, ) # Number, centered n_bbox = n_font.getbbox(step["n"]) n_w = n_bbox[2] - n_bbox[0] n_h = n_bbox[3] - n_bbox[1] d.text( (col_cx - n_w // 2 - n_bbox[0], cy - n_h // 2 - n_bbox[1]), step["n"], font=n_font, fill=WHITE, ) # Headline head = step["head"] h_bbox = head_font.getbbox(head) h_w = h_bbox[2] - h_bbox[0] head_y = col_top + circle_d + 36 * SS d.text((col_cx - h_w // 2, head_y), head, font=head_font, fill=INK) # Sub (multi-line, centered) sub_y = head_y + (h_bbox[3] - h_bbox[1]) + 24 * SS line_h = int(sub_font.size * 1.40) for j, line in enumerate(step["sub"].split("\n")): sb = sub_font.getbbox(line) lw = sb[2] - sb[0] d.text((col_cx - lw // 2, sub_y + j * line_h), line, font=sub_font, fill=INK_SOFT) # Connector arrows between columns (horizontally between circles) arrow_y = col_top + circle_d // 2 for i in range(2): x_left = col_left0 + i * col_w + col_w // 2 + circle_d // 2 + 14 * SS x_right = col_left0 + (i + 1) * col_w + col_w // 2 - circle_d // 2 - 14 * SS draw_arrow(d, x_left, arrow_y, x_right, BLUE, thickness=3 * SS) # Downsample return img.resize((out_w, out_h), Image.LANCZOS) # Main 1600x600 — v2 (My Dogs / Account / Book a service copy) graphic = render(1600, 600) graphic.convert("RGB").save( os.path.join(OUT, "welcome-3-steps-v2-1600x600.jpg"), "JPEG", quality=94, optimize=True, progressive=True, ) graphic.save( os.path.join(OUT, "welcome-3-steps-v2-1600x600.png"), optimize=True, ) # Email-friendly slimmer crop (1200×500) — for the activation email email_g = render(1200, 500) email_g.convert("RGB").save( os.path.join(OUT, "welcome-3-steps-v2-1200x500.jpg"), "JPEG", quality=94, optimize=True, progressive=True, ) # 16:9 variant (1600×900) — for Kanamé COVER slot which enforces 16:9 cover_169 = render(1600, 900) cover_169.convert("RGB").save( os.path.join(OUT, "welcome-3-steps-v2-1600x900-cover.jpg"), "JPEG", quality=94, optimize=True, progressive=True, ) # Mode-test preview prev = Image.new("RGB", (1800, 1500), (250, 250, 250)) pd = ImageDraw.Draw(prev) prev.paste(graphic.convert("RGB").resize((1500, 562)), (150, 80)) pd.rectangle([0, 720, 1800, 1500], fill=(20, 22, 30)) prev.paste(graphic.convert("RGB").resize((1500, 562)), (150, 800)) lbl = ImageFont.truetype(DMSANS, 22) pd.text((150, 50), "ON LIGHT MODE PAGE", font=lbl, fill=(80, 80, 80)) pd.text((150, 770), "ON DARK MODE PAGE", font=lbl, fill=(220, 220, 220)) prev.save(os.path.join(OUT, "_steps-preview.png"), optimize=True) print("Built:") for f in ["welcome-3-steps-1600x600.jpg", "welcome-3-steps-1600x600.png", "welcome-3-steps-1200x500.jpg", "_steps-preview.png"]: p = os.path.join(OUT, f) print(f" {f} ({os.path.getsize(p)//1024} KB)")