Files
espresso_frame/server/app/templates/widget_html/framed_image.html.jinja
T
tfaour 5f4f8f2ea7
Build and push server image / test (push) Successful in 44s
Build and push server image / build-and-push (push) Successful in 3m33s
Build and push server image / deploy (push) Failing after 1m27s
Add a curated theme system for "modern" style widgets, inspired by Tesserae
Frame.theme (7 presets in app/theme_tokens.py) drives font family,
corner radius, drop shadow, and an accent hue for every modern-style
widget's header/accent region. Rich accent colors (not just the 6 flat
panel inks) are approximated via denser Bayer stippling confined to just
that region (html_render.ordered_dither_regions), so icon/text content
elsewhere stays exactly as crisp as it is today -- verified directly
against real Chromium renders, both in unit tests and via run-server.
"classic" is a byte-identical no-visual-change default: weather's header
keeps its original fixed blue gradient, tasks/calendar keep their flat
THEME_* ink.

Themes are purely stylistic -- battery's charge-level color, calendar/
tasks' per-owner event chips, and text's own per-widget font choice are
never touched.
2026-07-31 10:34:28 +00:00

28 lines
1006 B
Django/Jinja

<!doctype html>
<html><head><style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: {{ w }}px; height: {{ h }}px; background: #ffffff; }
.card {
width: {{ w - gutter * 2 }}px;
height: {{ h - gutter * 2 }}px;
margin: {{ gutter }}px;
border-radius: {{ radius }}px;
overflow: hidden;
{% if shadow %}box-shadow: 0 4px 14px rgba(0, 20, 60, 0.25);{% endif %}
background: #ffffff;
}
.card img {
width: 100%; height: 100%; display: block;
/* "contain", not "cover" -- the source image already went through
compose_into's own crop/fit (e.g. whiteboard's deliberate
letterbox-never-crop mode), so this card must not re-crop it;
the gutter inset is small relative to typical widget sizes, so
"contain" leaves at most a sliver of background visible, not a
real letterbox. */
object-fit: contain;
}
</style></head>
<body>
<div class="card"><img src="data:image/png;base64,{{ image_b64 }}"></div>
</body></html>