Add self-contained docker/ stack for the web UI
`docker/` now holds the whole web build — frontend (Vite + React + CanvasKit),
backend (Fastify + SQLite) and the compose file — so the folder can be moved to
another machine and run without the React Native project:
cd docker && cp .env.example .env && docker compose up -d --build
Only `${WEB_PORT:-8090}` is published; nginx serves the SPA and proxies /api to
the `api` container over Docker's DNS. Photos never reach the server.
The shared render code is vendored into `docker/frontend/shared/` and aliased to
a CanvasKit shim, so the app's own frameUtils/toneShader/jpegDpi run unchanged.
Fix the all-black render on GPU surfaces: `MakeWebGLCanvasSurface` creates a
separate WebGL context per call, and a texture from one context cannot be
sampled by a surface on another — so any pass that drew a snapshot onto a second
surface (output sharpen, screen sharpen, polaroid/wallframe cards) came out
solid black, while the raster fallback was correct. Use one shared
GrDirectContext + MakeRenderTarget instead.
Verified in headless Chromium against the running stack: 12MP JPEG in, preview
mean=120.5 sd=60.5, export 2048x1536 mean=107.2 sd=62.1, JFIF density 300/300,
EXIF present, no console errors; health/signup/login/me/recipes all 2xx through
the nginx proxy.
This commit is contained in:
@@ -0,0 +1,208 @@
|
||||
/* Workspace layout: header strip on top, then rail | chips | stage.
|
||||
Under 860px the rail becomes a bottom bar and the chips a horizontal strip,
|
||||
which is the same shape the phone app uses. */
|
||||
|
||||
.shell { display: flex; flex-direction: column; height: 100%; }
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
background: var(--bg-elev);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.brand { font-weight: 700; letter-spacing: 0.04em; }
|
||||
.brand small { color: var(--text-dim); font-weight: 400; margin-left: 6px; letter-spacing: 0; }
|
||||
.header .spacer { flex: 1 1 auto; }
|
||||
.recipe-name {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: 999px;
|
||||
padding: 3px 10px;
|
||||
max-width: 320px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.menu-wrap { position: relative; }
|
||||
|
||||
.workspace { display: flex; flex: 1 1 auto; min-height: 0; }
|
||||
|
||||
/* --- tool rail ---------------------------------------------------------- */
|
||||
.rail {
|
||||
width: var(--rail-w);
|
||||
flex: 0 0 auto;
|
||||
border-right: 1px solid var(--border-soft);
|
||||
background: var(--bg-sunken);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 6px;
|
||||
gap: 4px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.rail button {
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 9px 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.rail button .glyph { font-size: 17px; line-height: 1; }
|
||||
.rail button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
|
||||
.rail button:hover { color: var(--text); }
|
||||
|
||||
/* --- chip column -------------------------------------------------------- */
|
||||
.chips {
|
||||
width: var(--chip-w);
|
||||
flex: 0 0 auto;
|
||||
border-right: 1px solid var(--border-soft);
|
||||
background: var(--bg);
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.chips h2 { margin: 0 0 2px; font-size: 11px; letter-spacing: 0.14em; color: var(--text-dim); font-weight: 600; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.chip {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-elev);
|
||||
border-radius: 999px;
|
||||
padding: 5px 11px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.chip[aria-pressed="true"], .chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
|
||||
.chip .val { color: var(--text-dim); font-family: var(--mono); font-size: 11px; }
|
||||
.chip .pro { font-size: 9px; letter-spacing: 0.08em; color: var(--accent); }
|
||||
.chip:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
.slider-row { border-top: 1px solid var(--border-soft); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
|
||||
.slider-row .head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.1em; color: var(--text-dim); }
|
||||
.slider-row .head b { color: var(--accent); font-family: var(--mono); letter-spacing: 0; }
|
||||
input[type="range"] { width: 100%; accent-color: var(--accent); }
|
||||
.hint { color: var(--text-dim); font-size: 12px; line-height: 1.5; }
|
||||
|
||||
/* --- stage -------------------------------------------------------------- */
|
||||
.stage {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
background: var(--bg-sunken);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.dropzone {
|
||||
border: 2px dashed var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 40px 28px;
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
background: var(--bg);
|
||||
max-width: 520px;
|
||||
}
|
||||
.dropzone.over { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
|
||||
.dropzone strong { display: block; color: var(--text); margin-bottom: 6px; font-size: 16px; }
|
||||
.canvas-wrap { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; flex: 1 1 auto; width: 100%; }
|
||||
.canvas-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
|
||||
.busy {
|
||||
position: absolute;
|
||||
inset: auto 0 12px 0;
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
background: var(--bg-elev);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
padding: 5px 12px;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.stage .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
|
||||
.err { color: var(--danger); font-size: 12px; max-width: 520px; text-align: center; }
|
||||
|
||||
/* --- landing ------------------------------------------------------------ */
|
||||
.landing { max-width: 960px; margin: 0 auto; padding: 56px 20px 72px; }
|
||||
.landing h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.1; margin: 0 0 14px; }
|
||||
.landing .lede { font-size: 17px; color: var(--text-dim); max-width: 620px; line-height: 1.6; }
|
||||
.landing .cta { display: flex; gap: 10px; margin: 24px 0 44px; flex-wrap: wrap; }
|
||||
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
|
||||
.card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--bg-elev); }
|
||||
.card h3 { margin: 0 0 6px; font-size: 14px; }
|
||||
.card p { margin: 0; color: var(--text-dim); line-height: 1.55; }
|
||||
.badges { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; }
|
||||
.badge {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 9px 14px;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.3;
|
||||
background: var(--bg-elev);
|
||||
}
|
||||
.badge small { color: var(--text-dim); font-size: 10px; letter-spacing: 0.08em; }
|
||||
|
||||
/* --- auth dialog -------------------------------------------------------- */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 60;
|
||||
padding: 16px;
|
||||
}
|
||||
.modal {
|
||||
background: var(--bg-elev);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.modal h2 { margin: 0; font-size: 17px; }
|
||||
|
||||
/* --- responsive --------------------------------------------------------- */
|
||||
@media (max-width: 860px) {
|
||||
.workspace { flex-direction: column; }
|
||||
.rail {
|
||||
order: 2;
|
||||
width: auto;
|
||||
flex-direction: row;
|
||||
border-right: none;
|
||||
border-top: 1px solid var(--border-soft);
|
||||
overflow-x: auto;
|
||||
padding: 4px;
|
||||
}
|
||||
.rail button { flex: 1 0 auto; min-width: 62px; }
|
||||
.chips { order: 1; width: auto; border-right: none; border-bottom: 1px solid var(--border-soft); max-height: 42vh; }
|
||||
.stage { order: 0; flex: 1 1 auto; }
|
||||
.chip-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
/* Theme tokens. Switching = two attributes on <html>, set by ThemeProvider —
|
||||
no React re-render, no per-component colour code. Adding an accent group is
|
||||
one 3-line block below; see src/theme/themes.ts for the picker's list. */
|
||||
|
||||
:root {
|
||||
--radius: 10px;
|
||||
--radius-sm: 7px;
|
||||
--rail-w: 84px;
|
||||
--chip-w: 300px;
|
||||
--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--mono: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
|
||||
/* --- base themes --------------------------------------------------------- */
|
||||
[data-theme="light"] {
|
||||
--bg: #ffffff;
|
||||
--bg-sunken: #f6f7f9;
|
||||
--bg-elev: #ffffff;
|
||||
--border: #dcdfe4;
|
||||
--border-soft: #eceef1;
|
||||
--text: #14181d;
|
||||
--text-dim: #5c6773;
|
||||
--danger: #c2402f;
|
||||
--accent-l: 42%;
|
||||
--accent-fg: #ffffff;
|
||||
--shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg: #000000;
|
||||
--bg-sunken: #0b0b0c;
|
||||
--bg-elev: #131315;
|
||||
--border: #2a2a2e;
|
||||
--border-soft: #1d1d20;
|
||||
--text: #f2f3f5;
|
||||
--text-dim: #9aa2ad;
|
||||
--danger: #ff6b57;
|
||||
--accent-l: 60%;
|
||||
--accent-fg: #0a0a0a;
|
||||
--shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
/* --- accent groups ------------------------------------------------------ */
|
||||
[data-accent="amber"] { --accent-h: 33; --accent-s: 92%; }
|
||||
[data-accent="blue"] { --accent-h: 214; --accent-s: 88%; }
|
||||
[data-accent="emerald"] { --accent-h: 158; --accent-s: 68%; }
|
||||
[data-accent="rose"] { --accent-h: 343; --accent-s: 82%; }
|
||||
[data-accent="violet"] { --accent-h: 265; --accent-s: 78%; }
|
||||
|
||||
:root {
|
||||
--accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
|
||||
--accent-hover: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 7%));
|
||||
--accent-soft: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.14);
|
||||
--accent-line: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.45);
|
||||
}
|
||||
|
||||
/* --- base elements ------------------------------------------------------ */
|
||||
* { box-sizing: border-box; }
|
||||
html, body, #root { height: 100%; margin: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
font-size: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
button { font: inherit; color: inherit; }
|
||||
a { color: var(--accent); }
|
||||
|
||||
.btn {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-elev);
|
||||
color: var(--text);
|
||||
padding: 7px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn:hover { border-color: var(--accent-line); }
|
||||
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
|
||||
.btn.primary:hover { background: var(--accent-hover); }
|
||||
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
|
||||
.btn.ghost:hover { color: var(--text); background: var(--bg-sunken); }
|
||||
|
||||
.field {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
.popover {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 6px);
|
||||
z-index: 40;
|
||||
min-width: 220px;
|
||||
background: var(--bg-elev);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user