felhom.eu/marketing/facebook/build.py

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""build.py — the Felhom.eu Facebook Page pictures: two profile pictures, three covers, one preview page.

Run:   python3 marketing/facebook/build.py
Exit:  0 every image built and every check passed · 1 a check failed · 2 a render failed

The brand lockup. The headline is set the way the WEBSITE sets its own h1 - `site.css`
`.page-index .hero-text h1` is `font-weight: 700; letter-spacing: -0.03em` - so HEADLINE_WEIGHT is Bold, not
ExtraBold, and HEADLINE_TRACK is -0.03 em. „felhom.eu" is NOT typed in Plus Jakarta Sans: it is the logo's own
lettering, cropped out of logo.png, because that lettering is set in „M+ 2c" / „Vremena Grotesk" (fonts this
machine does not have, R-916) and typing it in another face is a different wordmark. The website hero shows the
same logo.png on the same dark background, so the cover matches the page. The PROFILE picture carries the MARK
only - at 176 px the mark plus the wordmark left both too small to read (operator, 2026-10-09).

Renderer: Pillow only (shapes, text, compositing). Text is set in the website's own Plus Jakarta Sans
(website/assets/fonts/*.woff2), which Pillow reads through FreeType. NOT librsvg: tried 2026-10-08 — pango fell back
to DejaVu for the woff2 fonts, and logo.svg's own lettering is live <text> in 'M+ 2c' / 'Vremena Grotesk', fonts
DooPlex does not have, so the SVG renders with the wrong letters. The logo master is therefore website/assets/logo.png
(645 x 408, the file the site itself shows), placed unscaled.

Checks (each prints its numbers; a failure exits 1):
  circle   every logo pixel of a profile picture lies inside radius 0.42 x width of the centre (8 % margin).
           Shown failing first on the shape the Page has today (logo.png, full size, on a square).
  safe     every pixel of a cover's CONTENT layer (text, logo, drawings — not the background) lies inside the
           area both desktop and phone show, and outside the places the profile circle covers. Shown failing
           first on the covers as committed at a76207945e — all three were cut on phones (R-919).
  cap      a cover's headline is set at a capital-letter height of at least CAP_MIN, so it stays readable
           once the phone has shrunk the cover to 412 px wide.
  size     each PNG's size is read back from the file, never taken from the constants here.

Sizes. The COMPUTER figures are graded READ, second-hand (820 x 312; built at 2 x = 1640 x 624; the
profile circle 16 px from the left, 176 px from the top, 176 px across). The PHONE figures are graded
MEASURED — see the constants block: one device (Pixel 9 emulated, 412 x 924, the mobile WEBSITE), NOT the
Facebook app and no other width. Meta's own help page claims 2,4:1 for the phone cover and is wrong; that
figure is what cut „saját szabályaid" down to „aját szabályaid" on every phone (R-919). The profile picture
is shown 176 px (computer) / 196 px (phone) and is built at the size where logo.png fits unscaled.
"""
import base64
import math
import os
import sys

from PIL import Image, ImageDraw, ImageFilter, ImageFont

HERE = os.path.dirname(os.path.abspath(__file__))
ROOT = os.path.dirname(os.path.dirname(HERE))
sys.path.insert(0, HERE)

ASSETS = os.path.join(ROOT, "website", "assets")
OUT = os.path.join(HERE, "out")
LOGO_PNG = os.path.join(ASSETS, "logo.png")
SHOT = os.path.join(ASSETS, "dashboard-backups-hu.webp")
PJS = os.path.join(ASSETS, "fonts", "pjs-latin.woff2")
PJS_EXT = os.path.join(ASSETS, "fonts", "pjs-latin-ext.woff2")


def hexc(h, a=255):
    h = h.lstrip("#")
    return (int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16), a)


# website/assets/site.css :root — design system v2 tokens, verbatim (the site is dark-only).
BG0, BG1, BG2 = hexc("#0A1220"), hexc("#0F1B2E"), hexc("#16263F")
LINE = hexc("#22344F")
TEXT1, TEXT2, TEXT3 = hexc("#EDF2F9"), hexc("#94A6BF"), hexc("#5E7392")
BLUE, BLUE_BRIGHT = hexc("#0083D8"), hexc("#2EA8F5")
WHITE = hexc("#FFFFFF")

# The site's headline (index.html hero), from escapes (brief section 9.7).
L1 = "Saj\u00e1t felh\u0151d,"
L2 = "saj\u00e1t szab\u00e1lyaid"
SLOGAN = L1 + " " + L2
# No DOMAIN constant: „felhom.eu" is never typed. wordmark() draws the logo's own lettering, so the
# brand name on a cover is the same artwork as on the website, not a look-alike in another face.

# The website's own h1, read from website/assets/site.css (.page-index .hero-text h1).
HEADLINE_WEIGHT = "Bold"     # font-weight: 700 - NOT ExtraBold, which is what this file used to use
HEADLINE_TRACK = -0.03       # letter-spacing: -0.03em
# logo.png is one image holding two things: the mark, then a blank band, then the „felhom.eu" lettering.
# MEASURED on the file 2026-10-09: ink runs y 5..289, the band is y 290..295, the wordmark y 296..403.
LOGO_SPLIT_Y = 293
CIRCLE_R = 0.42      # brief §7 A: the check radius, as a fraction of the width
LOGO_R = 0.40        # where the logo's farthest pixel is placed (inside the check radius)
CW, CH = 1640, 624   # cover, 2 x the 820 x 312 computer display
SCALE = CW / 820.0

# --- the phone view: MEASURED, never read off Meta's help page (R-919) -------------------------------
# Measured 2026-10-08 on the live Page in Chrome DevTools device mode, Pixel 9 (412 x 924, mobile user
# agent, AFTER a reload — without one Facebook keeps serving the desktop bundle). The Page's mobile
# header renders 412 x 274 CSS px = 1,504 : 1, so Facebook keeps the cover's FULL HEIGHT and shows only
# the centre CW_PHONE pixels of its width. Evidence and the recipe to re-measure:
# documentation/audits/facebook-page-setup-2026-10-08/ (README.md, C2-phone-headline-cut-closeup.png).
# GRADE: measured on ONE device, in the mobile WEBSITE. NOT measured in the Facebook app and not at any
# other width — which is why MARGIN below is deliberate and why the operator's app check is the
# acceptance step, not this build.
PHONE_HDR = (412.0, 274.0)
CW_PHONE = CH * PHONE_HDR[0] / PHONE_HDR[1]        # 938.3 of 1640 — about 351 px lost from EACH side
PHONE_X0 = (CW - CW_PHONE) / 2.0
MARGIN = 40
SAFE = (int(math.ceil(PHONE_X0 + MARGIN)), MARGIN, int(CW - PHONE_X0 - MARGIN), CH - MARGIN)
PAD = 24
# x, y, diameter in cover pixels. The COMPUTER circle is UNCHANGED (second-hand, and left-anchored: it
# sits against the cover's left edge, so everything to its left is under it too). On 2026-10-08 the
# computer circle was measured to sit 16 px BELOW the cover and to overlap nothing — this stays as a
# deliberate conservatism, not because it is still true.
DESK_CIRCLE = (16 * SCALE, 176 * SCALE, 176 * SCALE)
# The PHONE circle is MEASURED and CENTRED: 172 display px over the bottom middle of the header, which
# maps to source x 637..1030, y 369..bottom. A centred circle hides its own box only — never the whole
# width to its left, which is why QUIET can no longer be one formula for both.
PHONE_CIRCLE = (637.0, 369.0, 393.0)
QUIET = [(0, DESK_CIRCLE[1] - PAD, DESK_CIRCLE[0] + DESK_CIRCLE[2] + PAD, CH),
         (PHONE_CIRCLE[0] - PAD, PHONE_CIRCLE[1] - PAD, PHONE_CIRCLE[0] + PHONE_CIRCLE[2] + PAD, CH)]
# The band every cover draws in: inside SAFE, clear of the computer circle on the left, above the phone
# circle. Derived, so a re-measurement moves the designs with it.
BAND = (max(SAFE[0], int(math.ceil(DESK_CIRCLE[0] + DESK_CIRCLE[2] + PAD))), SAFE[1] + 8,
        SAFE[2], int(PHONE_CIRCLE[1] - PAD) - 5)
CAP_MIN = int(round(0.04 * CH))   # a headline capital is at least 4 % of the cover height (25 px at 624)
# What this file believed before R-919: that a phone shows 640 x 360 of the cover. Kept ONLY so the
# control below can convict it - a check that has never been seen failing is a wish, not a check.
OLD_SAFE_X0 = (CW - CH * 640.0 / 360.0) / 2.0 + MARGIN

FAILS = []


def check(ok, msg):
    print(("  ok    " if ok else "  FAIL  ") + msg)
    if not ok:
        FAILS.append(msg)


# ------------------------------------------------------------------ text in the site font

_fonts = {}


def font(size, weight, ext):
    key = (size, weight, ext)
    if key not in _fonts:
        f = ImageFont.truetype(PJS_EXT if ext else PJS, size)
        f.set_variation_by_name(weight)
        _fonts[key] = f
    return _fonts[key]


def runs(text):
    """Split into runs by the CSS unicode-range of the two woff2 files (latin-ext = U+0100–02BA)."""
    out = []
    for ch in text:
        ext = 0x100 <= ord(ch) <= 0x2BA
        if out and out[-1][0] == ext:
            out[-1][1] += ch
        else:
            out.append([ext, ch])
    return out


def text_width(text, size, weight):
    return sum(font(size, weight, e).getlength(s) for e, s in runs(text))


def text_width_tracked(text, size, weight, track=0.0):
    """Width with letter-spacing, the way the site puts -0.03em on its h1. `track` is in pixels."""
    if not track:
        return text_width(text, size, weight)
    w = 0.0
    for e, s in runs(text):
        f = font(size, weight, e)
        for ch in s:
            w += f.getlength(ch) + track
    return w - track


def draw_text(img, x, y, text, size, weight, fill, align="left", track=0.0):
    """Draw at baseline y; x is the left edge, or the centre with align='center'. Returns the width.
    With `track` the glyphs are placed one at a time, so letter-spacing is real and not faked by scaling."""
    w = text_width_tracked(text, size, weight, track)
    if align == "center":
        x -= w / 2.0
    d = ImageDraw.Draw(img)
    for e, s in runs(text):
        f = font(size, weight, e)
        if track:
            for ch in s:
                d.text((x, y), ch, font=f, fill=fill, anchor="ls")
                x += f.getlength(ch) + track
        else:
            d.text((x, y), s, font=f, fill=fill, anchor="ls")
            x += f.getlength(s)
    return w


def fit_size(text, weight, max_w, start, track_em=0.0):
    """The largest size at or below `start` whose tracked width fits max_w."""
    size = start
    while text_width_tracked(text, size, weight, track_em * size) > max_w:
        size -= 1
    return size


def headline(c, x, y, text, size, fill, align="left"):
    """One run of headline text in the website's weight and tracking. Returns the PEN x after it, so the
    second, blue half of the line starts exactly where the first ended - tracking makes `x + width` wrong
    by one letter-space."""
    tr = HEADLINE_TRACK * size
    w = draw_text(c, x, y, text, size, HEADLINE_WEIGHT, fill, align=align, track=tr)
    if align == "center":
        x -= w / 2.0
    return x + w + tr


def headline_fit(text, max_w, start):
    return fit_size(text, HEADLINE_WEIGHT, max_w, start, HEADLINE_TRACK)


def headline_width(text, size):
    return text_width_tracked(text, size, HEADLINE_WEIGHT, HEADLINE_TRACK * size)


# ------------------------------------------------------------------ the logo

def alpha_points(img, thr=16):
    a = img.getchannel("A")
    w, h = img.size
    px = a.load()
    return [(x, y) for y in range(h) for x in range(w) if px[x, y] > thr]


def outside_circle(img, bg, r_frac):
    """Count pixels that differ from the background and lie outside radius r_frac x width of the centre."""
    w, h = img.size
    cx, cy, r = (w - 1) / 2.0, (h - 1) / 2.0, r_frac * w
    rgb = img.convert("RGB").load()
    n = 0
    for y in range(h):
        dy2 = (y - cy) ** 2
        for x in range(w):
            p = rgb[x, y]
            if max(abs(p[0] - bg[0]), abs(p[1] - bg[1]), abs(p[2] - bg[2])) > 24 and (x - cx) ** 2 + dy2 > r * r:
                n += 1
    return n


_logo_parts = []


def logo_parts():
    """logo.png split into (mark, wordmark), each tightened to its own ink. The split row is MEASURED."""
    if _logo_parts:
        return _logo_parts[0]
    src = Image.open(LOGO_PNG).convert("RGBA")
    out = []
    for box in ((0, 0, src.width, LOGO_SPLIT_Y), (0, LOGO_SPLIT_Y, src.width, src.height)):
        part = src.crop(box)
        out.append(part.crop(part.getchannel("A").point(lambda v: 255 if v > 16 else 0).getbbox()))
    _logo_parts.append((out[0], out[1]))
    return _logo_parts[0]


def wordmark(c, x, y, height, align="left"):
    """Draw „felhom.eu" as the logo's own lettering, scaled to `height`. Returns its width."""
    art = logo_parts()[1]
    w = int(round(art.width * float(height) / art.height))
    art = art.resize((w, int(height)), Image.LANCZOS)
    c.alpha_composite(art, (int(round(x - w / 2.0)) if align == "center" else int(round(x)), int(round(y))))
    return w


def today_shape():
    """The Page today: logo.png at full size, unscaled, centred on a white square of its own width."""
    src = Image.open(LOGO_PNG).convert("RGBA")
    w, h = src.size
    sq = Image.new("RGBA", (w, w), WHITE)
    sq.alpha_composite(src, (0, (w - h) // 2))
    return sq


def profile_width():
    """The square size at which the MARK fits radius LOGO_R x width UNSCALED (never upsampled).
    Floor 640 = twice the 320 x 320 Meta recommends as a source, so there is resolution to spare at the
    176 / 196 px Facebook actually shows. It used to be 720, which was above what the mark alone needs and
    would have shrunk the mark inside the circle for no gain."""
    src = logo_parts()[0]
    pts = alpha_points(src)
    xs, ys = [p[0] for p in pts], [p[1] for p in pts]
    cx, cy = (min(xs) + max(xs)) / 2.0, (min(ys) + max(ys)) / 2.0
    dmax = max(math.hypot(x - cx, y - cy) for x, y in pts) + 1
    return max(640, int(math.ceil(dmax / LOGO_R / 2.0)) * 2), (cx, cy)


def build_profile(bg, name):
    w, (cx, cy) = profile_width()
    logo = logo_parts()[0]
    img = Image.new("RGBA", (w, w), bg)
    img.alpha_composite(logo, (int(round(w / 2.0 - cx)), int(round(w / 2.0 - cy))))
    path = os.path.join(OUT, name)
    img.convert("RGB").save(path, optimize=True)
    return path


# ------------------------------------------------------------------ covers

def background(glow_at=(0.78, 0.25)):
    """bg-0 with the site's 50 px grid (3 % blue, index.html) and the og-image's soft blue glow; top blue rule."""
    img = Image.new("RGBA", (CW, CH), BG0)
    glow = Image.new("RGBA", (CW, CH), (0, 0, 0, 0))
    gd = ImageDraw.Draw(glow)
    gx, gy, gr = glow_at[0] * CW, glow_at[1] * CH, 520
    gd.ellipse((gx - gr, gy - gr, gx + gr, gy + gr), fill=(0, 131, 216, 46))
    img.alpha_composite(glow.filter(ImageFilter.GaussianBlur(180)))
    grid = Image.new("RGBA", (CW, CH), (0, 0, 0, 0))
    d = ImageDraw.Draw(grid)
    step = int(50 * SCALE)
    for x in range(0, CW, step):
        d.line((x, 0, x, CH), fill=(0, 131, 216, 9), width=2)
    for y in range(0, CH, step):
        d.line((0, y, CW, y), fill=(0, 131, 216, 9), width=2)
    img.alpha_composite(grid)
    ImageDraw.Draw(img).rectangle((0, 0, CW, 8), fill=BLUE)
    return img


def content_a():
    """Calm: the one line, centred in the band, with the domain under it."""
    c = Image.new("RGBA", (CW, CH), (0, 0, 0, 0))
    mid = (BAND[0] + BAND[2]) / 2.0
    size = headline_fit(SLOGAN, (BAND[2] - BAND[0]) - 20, 86)
    x = mid - headline_width(SLOGAN, size) / 2.0
    x = headline(c, x, 212, L1 + " ", size, TEXT1)
    headline(c, x, 212, L2, size, BLUE_BRIGHT)
    wordmark(c, mid, 246, round(size * 0.95), align="center")
    return c, size


def rack(d, x, y, w, h, fill, dot):
    """Three stacked server units with status dots — the logo's own motif, drawn as plain shapes."""
    uh = (h - 2 * 8) / 3.0
    for i in range(3):
        ty = y + i * (uh + 8)
        d.rectangle((x, ty, x + w, ty + uh), fill=fill)
        for j in range(3):
            cx = x + 20 + j * 22
            d.ellipse((cx - 5, ty + uh / 2 - 5, cx + 5, ty + uh / 2 + 5), fill=dot)


def tile(d, cx, cy, s, kind):
    """A plain app tile (no third-party logo): a square with a simple generic glyph."""
    x0, y0, x1, y1 = cx - s / 2, cy - s / 2, cx + s / 2, cy + s / 2
    d.rectangle((x0, y0, x1, y1), fill=BG2, outline=LINE, width=3)
    g = s * 0.28
    if kind == "photo":
        d.polygon([(cx - g, cy + g * 0.7), (cx - g * 0.2, cy - g * 0.5), (cx + g * 0.3, cy + g * 0.2),
                   (cx + g * 0.6, cy - g * 0.1), (cx + g, cy + g * 0.7)], fill=BLUE_BRIGHT)
        d.ellipse((cx + g * 0.35, cy - g, cx + g * 0.85, cy - g * 0.5), fill=TEXT2)
    elif kind == "doc":
        d.rectangle((cx - g * 0.75, cy - g, cx + g * 0.75, cy + g), outline=TEXT1, width=5)
        for i in range(3):
            yy = cy - g * 0.45 + i * g * 0.45
            d.line((cx - g * 0.45, yy, cx + g * 0.45, yy), fill=BLUE_BRIGHT, width=5)
    elif kind == "play":
        d.polygon([(cx - g * 0.6, cy - g), (cx + g, cy), (cx - g * 0.6, cy + g)], fill=BLUE_BRIGHT)
    elif kind == "lock":
        d.arc((cx - g * 0.6, cy - g * 1.2, cx + g * 0.6, cy), 180, 360, fill=TEXT1, width=6)
        d.rectangle((cx - g * 0.85, cy - g * 0.6, cx + g * 0.85, cy + g * 0.9), fill=TEXT1)
        d.ellipse((cx - g * 0.18, cy - g * 0.1, cx + g * 0.18, cy + g * 0.26), fill=BG2)
    elif kind == "folder":
        d.polygon([(cx - g, cy - g * 0.7), (cx - g * 0.2, cy - g * 0.7), (cx, cy - g * 0.4), (cx + g, cy - g * 0.4),
                   (cx + g, cy + g * 0.8), (cx - g, cy + g * 0.8)], fill=BLUE_BRIGHT)


def content_b():
    """The idea: the headline on the left, a home with its server and its apps on the right. Both
    columns live inside BAND -- the phone hides the cover's bottom middle behind the profile circle,
    so nothing is drawn down there any more (R-919)."""
    c = Image.new("RGBA", (CW, CH), (0, 0, 0, 0))
    d = ImageDraw.Draw(c)
    tx = BAND[0] + 12
    size = headline_fit(L2, 456, 64)                # the text column; the motif gets the rest
    headline(c, tx, 170, L1, size, TEXT1)
    headline(c, tx, 170 + size + 14, L2, size, BLUE_BRIGHT)
    wordmark(c, tx, 170 + size + 30, round(size * 0.9))
    # the home with its server, on the right, scaled to the band's height
    hx, hy, hw = 1000, 190, 150                     # house body: left, top, width
    tiles = [(935, 95, "photo"), (1065, 84, "doc"), (1195, 140, "play"), (1200, 278, "lock"),
             (928, 262, "folder"), (1155, 425, "photo"), (1110, 540, "doc")]
    for x, y, _ in tiles:
        d.line((hx + hw / 2, hy + 70, x, y), fill=(46, 168, 245, 110), width=4)
    d.rectangle((hx, hy, hx + hw, hy + 130), fill=BG1, outline=BLUE_BRIGHT, width=6)
    d.polygon([(hx - 30, hy + 4), (hx + hw / 2, hy - 85), (hx + hw + 30, hy + 4)], fill=BG1, outline=BLUE_BRIGHT)
    d.line([(hx - 30, hy + 4), (hx + hw / 2, hy - 85), (hx + hw + 30, hy + 4)], fill=BLUE_BRIGHT, width=6, joint="curve")
    rack(d, hx + 28, hy + 28, hw - 56, 75, BLUE, TEXT1)
    for x, y, kind in tiles:
        tile(d, x, y, 62, kind)
    return c, size


def content_c():
    """The product: the headline on the left, the demo box's own dashboard on the right. Both inside
    BAND -- the screen used to run past the phone's right crop edge and into the phone circle."""
    c = Image.new("RGBA", (CW, CH), (0, 0, 0, 0))
    d = ImageDraw.Draw(c)
    tx = BAND[0] + 12
    size = headline_fit(L2, 366, 56)
    headline(c, tx, 180, L1, size, TEXT1)
    headline(c, tx, 180 + size + 12, L2, size, BLUE_BRIGHT)
    wordmark(c, tx, 180 + size + 28, round(size * 0.9))
    shot = Image.open(SHOT).convert("RGBA")
    # The domain chip next to the title names the demo box; covered with the page colour (copy only, source unchanged).
    ImageDraw.Draw(shot).rectangle((684, 32, 826, 70), fill=hexc("#0B1322"))
    sw = 370
    sh = int(round(sw * shot.height / shot.width))
    shot = shot.resize((sw, sh), Image.LANCZOS)
    fx, fy, b = 814, 56, 14                        # frame left/top, bezel
    d.rectangle((fx, fy, fx + sw + 2 * b, fy + sh + 2 * b), fill=BG2, outline=LINE, width=3)
    c.alpha_composite(shot, (fx + b, fy + b))
    base_y = fy + sh + 2 * b
    d.polygon([(fx - 30, base_y + 22), (fx + sw + 2 * b + 30, base_y + 22), (fx + sw + 2 * b, base_y),
               (fx, base_y)], fill=LINE)
    return c, size


def cap_height(size):
    """The height of a capital letter at this size, read from the font rather than assumed."""
    bb = font(size, HEADLINE_WEIGHT, 0).getbbox("S")
    return bb[3] - bb[1]


def control_old_window():
    """Draw the headline where the OLD 640 x 360 assumption put it - which is where every shipped cover
    had it - and return whether the measured check rejects that. It must. On the live Page the phone cut
    18 px off exactly this layout: „saj\u00e1t szab\u00e1lyaid" read „aj\u00e1t szab\u00e1lyaid" (R-919)."""
    c = Image.new("RGBA", (CW, CH), (0, 0, 0, 0))
    draw_text(c, OLD_SAFE_X0 + 24, 180, L1, 52, "ExtraBold", TEXT1)
    x0 = min(p[0] * 4 for p in alpha_points(c.resize((CW // 4, CH // 4)), thr=8))
    return x0 < SAFE[0], x0


def check_safe(name, content, headline):
    pts = alpha_points(content.resize((CW // 4, CH // 4)), thr=8)
    xs = [p[0] * 4 for p in pts]
    ys = [p[1] * 4 for p in pts]
    bbox = (min(xs), min(ys), max(xs) + 3, max(ys) + 3)
    inside = bbox[0] >= SAFE[0] and bbox[1] >= SAFE[1] and bbox[2] <= SAFE[2] and bbox[3] <= SAFE[3]
    check(inside, "%s: content box %s inside the safe area %s" % (name, bbox, SAFE))
    hits = []
    for q in QUIET:
        hits.append(sum(1 for x, y in zip(xs, ys) if q[0] <= x <= q[2] and q[1] <= y <= q[3]))
    check(sum(hits) == 0, "%s: %d content pixels under the computer circle, %d under the phone circle"
          % (name, hits[0], hits[1]))
    cap = cap_height(headline)
    check(cap >= CAP_MIN, "%s: headline size %d, capital height %d px (at least %d)"
          % (name, headline, cap, CAP_MIN))


def build_cover(name, content, glow):
    img = background(glow)
    img.alpha_composite(content)
    path = os.path.join(OUT, name)
    img.convert("RGB").save(path, optimize=True)
    return path


# ------------------------------------------------------------------ preview

def b64(path):
    with open(path, "rb") as fh:
        return "data:image/png;base64," + base64.b64encode(fh.read()).decode()


def preview(profiles, covers):
    dk, ph = DESK_CIRCLE, PHONE_CIRCLE
    sx0, sy0, sx1, sy1 = SAFE
    pct = lambda v, tot: "%.3f%%" % (100.0 * v / tot)  # noqa: E731
    prof_html = "".join(
        '<figure><div class="row"><img class="pc" src="%s" alt=""><img class="pc sm" src="%s" alt="">'
        '<img class="pc xs" src="%s" alt=""></div><figcaption>%s — 176 px, 96 px, 40 px (the mark only)</figcaption></figure>'
        % (b64(p), b64(p), b64(p), label) for label, p in profiles)
    cov = []
    rec = profiles[0][1]
    for label, p in covers:
        src = b64(p)
        safe = ('<div class="safe" style="left:%s;top:%s;width:%s;height:%s"></div>'
                % (pct(sx0, CW), pct(sy0, CH), pct(sx1 - sx0, CW), pct(sy1 - sy0, CH)))
        desk = ('<div class="desk"><img src="%s" alt="">%s<img class="ov" src="%s" alt="" '
                'style="left:%s;top:%s;width:%s"></div>'
                % (src, safe, b64(rec), pct(dk[0], CW), pct(dk[1], CH), pct(dk[2], CW)))
        crop_l = PHONE_X0 / CW_PHONE * 100
        phone = ('<div class="phone" style="aspect-ratio:%.2f/%d"><div class="crop">'
                 '<img src="%s" alt="" style="width:%.3f%%;left:-%.3f%%">'
                 '</div><img class="ov" src="%s" alt="" style="left:%s;top:%s;width:%s"></div>'
                 % (CW_PHONE, CH, src, CW / CW_PHONE * 100, crop_l, b64(rec),
                    pct(ph[0] - PHONE_X0, CW_PHONE), pct(ph[1], CH), pct(ph[2], CW_PHONE)))
        cov.append('<section><h2>%s</h2><p class="k">Computer (820 x 312), dashed = safe area (preview only)</p>%s'
                   '<p class="k">Phone \u2014 MEASURED (R-919): the centre %d px of %d at full height, and the '
                   'profile circle %d cover-pixels across - %d px on a %d px phone screen - centred. '
                   'NOT 640 x 360, and NOT Meta\u2019s 2,4:1.</p>%s</section>'
                   % (label, desk, round(CW_PHONE), CW, round(ph[2]),
                      round(ph[2] * PHONE_HDR[0] / CW_PHONE), round(PHONE_HDR[0]), phone))
    html = """<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Facebook Page pictures</title>
<style>
:root{--bg-0:#0A1220;--bg-1:#0F1B2E;--line:#22344F;--text-1:#EDF2F9;--text-2:#94A6BF;--blue:#0083D8}
body{margin:0;background:var(--bg-0);color:var(--text-1);font:15px/1.5 -apple-system,'Segoe UI',sans-serif;padding:24px 16px}
main{max-width:860px;margin:0 auto}h1{font-size:22px;margin:0 0 4px}h2{font-size:17px;margin:32px 0 8px}
.k{color:var(--text-2);margin:12px 0 6px;font-size:13px}figure{margin:16px 0}.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pc{width:176px;height:176px;border-radius:50%%;border:4px solid #fff;display:block}.sm{width:96px;height:96px;border-width:3px}
.xs{width:40px;height:40px;border-width:1px}figcaption{color:var(--text-2);font-size:13px;margin-top:6px}
.desk{position:relative;max-width:820px;margin-bottom:56px}.desk>img:first-child{width:100%%;display:block}
.ov{position:absolute;border-radius:50%%;border:3px solid #fff;box-sizing:border-box}
.safe{position:absolute;border:2px dashed #E0A93E;box-sizing:border-box;pointer-events:none}
.phone{position:relative;width:min(412px,100%%);aspect-ratio:938/624;margin-bottom:48px}
.crop{position:absolute;inset:0;overflow:hidden}.crop img{position:absolute;top:0;height:100%%}
</style></head><body><main>
<h1>Felhom.eu - Facebook pictures</h1>
<p class="k">The phone view below is MEASURED on the live Page (Pixel 9 emulated, mobile website, 2026-10-08,
R-919): Facebook keeps the full height and shows only the centre %d px of the %d-pixel width, with a profile
circle over the bottom middle %d cover-pixels across. It is NOT measured in the Facebook app \u2014 check there too.</p>
<p class="k">Profile picture: the logo MARK only \u2014 no \u201efelhom.eu\u201d lettering. At the 176 px Facebook shows (and
40 px in a comment) the mark plus the lettering left both too small to read, so the lettering was dropped and the
mark grew to %d %% of the circle. BOTH backgrounds now read at 40 px, which was not true while the lettering was
there: dark matches the covers and the Page as it stands, white separates the circle from the dark cover. The
covers below show the dark one.</p>
<h2>Profile picture</h2>%s
%s
</main></body></html>
""" % (round(CW_PHONE), CW, round(PHONE_CIRCLE[2]),
       round(100.0 * logo_parts()[0].width / profile_width()[0]), prof_html, "".join(cov))
    path = os.path.join(OUT, "preview.html")
    with open(path, "w", encoding="utf-8") as fh:
        fh.write(html)
    return path


# ------------------------------------------------------------------ main

def main():
    os.makedirs(OUT, exist_ok=True)
    print("circle check (radius %.2f x width)" % CIRCLE_R)
    try:
        before = today_shape()
        n0 = outside_circle(before, WHITE, CIRCLE_R)
        print("  today's shape (logo.png %dx%d on a %d square): %d logo pixels outside the circle — expected > 0"
              % (Image.open(LOGO_PNG).width, Image.open(LOGO_PNG).height, before.width, n0))
        check(n0 > 0, "the check convicts today's shape (control)")
        prof = [("profile-white.png", WHITE), ("profile-dark.png", BG0)]
        built = []
        for name, bg in prof:
            p = build_profile(bg, name)
            n = outside_circle(Image.open(p), bg, CIRCLE_R)
            check(n == 0, "%s: %d logo pixels outside the circle" % (name, n))
            built.append(p)
        print("safe-area check (computer %d x %d; the phone shows the centre %d px of %d - MEASURED, R-919)"
              % (CW, CH, round(CW_PHONE), CW))
        print("                 safe %s, band %s, both profile circles kept clear" % (SAFE, BAND))
        convicted, old_x0 = control_old_window()
        print("  the pre-R-919 layout put the headline at x %d. The phone's crop edge is x %d, so %d px of it"
              % (old_x0, round(PHONE_X0), round(PHONE_X0) - old_x0))
        print("  were CUT on every phone; the measured safe edge is x %d, %d px further in (MARGIN %d)."
              % (SAFE[0], SAFE[0] - old_x0, MARGIN))
        check(convicted, "the safe check convicts the pre-R-919 layout (control)")
        covers = [("cover-a.png", content_a(), (0.50, 0.78)), ("cover-b.png", content_b(), (0.68, 0.70)),
                  ("cover-c.png", content_c(), (0.30, 0.74))]
        cpaths = []
        for name, (content, headline), glow in covers:
            check_safe(name, content, headline)
            cpaths.append(build_cover(name, content, glow))
    except RuntimeError as e:
        print("RENDER FAILED: %s" % e)
        return 2
    print("sizes read back from the files")
    for p in built + cpaths:
        w, h = Image.open(p).size
        want = (profile_width()[0],) * 2 if "profile" in p else (CW, CH)
        check((w, h) == want, "%s: %d x %d" % (os.path.basename(p), w, h))
    pv = preview([("Dark background (recommended)", built[1]), ("White background", built[0])],
                 [("A - calm", cpaths[0]), ("B - the idea", cpaths[1]), ("C - the product", cpaths[2])])
    print("preview: %s (%d KB)" % (os.path.relpath(pv, ROOT), os.path.getsize(pv) // 1024))
    if FAILS:
        print("FAILED: %d check(s)" % len(FAILS))
        return 1
    print("all checks passed")
    return 0


if __name__ == "__main__":
    sys.exit(main())