3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: the preset tester picks its recipe from a grouped dropdown

Browse Source 
The row of pills grew as the library did, so the landing's live tester now
offers the stocks through one native select, grouped into Landscape, Portrait
and Streetlife, five stocks each — fifteen in all. Choosing one still lands on
the preview immediately: the frame, the HUD and the spec card all follow the
selection. Stock names stay proper nouns, the group names are translated with
the rest of the page.
This commit is contained in:
3dtours
2026-09-22 12:49:18 +07:00
parent 7dea0f1e7b
commit 339d36eb3e
2 changed files with 59 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/styles/landing.css
+12 -7
View File
@@ -51,7 +51,7 @@
[data-theme="light"] .lp-glow { opacity: 0.5; }
[data-theme="light"] .lp-btn,
[data-theme="light"] .lp-tool,
[data-theme="light"] .lp-tab { background: rgba(20, 22, 28, 0.04); }
[data-theme="light"] .lp-select { background: rgba(20, 22, 28, 0.04); }
[data-theme="light"] .lp-stat { background: linear-gradient(180deg, rgba(20, 22, 28, 0.04), transparent); }
[data-theme="light"] .lp-bar i { background: rgba(20, 22, 28, 0.12); }
[data-theme="light"] .lp-frame { background: #ffffff; }
@@ -329,18 +329,23 @@ html { scroll-behavior: smooth; scroll-padding-top: 116px; }
/* --- 4. preset tester --------------------------------------------------- */
.lp-tester { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
.lp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lp-tab {
.lp-preset-pick { display: block; margin-bottom: 16px; }
.lp-preset-pick .lp-eyebrow { display: block; margin-bottom: 8px; }
.lp-select {
width: 100%;
max-width: 420px;
border: 1px solid var(--lp-line);
background: rgba(255, 255, 255, 0.03);
color: var(--lp-muted);
border-radius: 999px;
padding: 7px 14px;
color: var(--lp-text);
border-radius: 10px;
padding: 9px 12px;
font-size: 12.5px;
font-family: var(--lp-mono);
cursor: pointer;
}
.lp-tab[aria-pressed="true"] { border-color: var(--lp-amber); color: var(--lp-ink-amber); background: var(--accent-soft); }
.lp-select:hover, .lp-select:focus-visible { border-color: var(--lp-amber); color: var(--lp-ink-amber); outline: none; }
.lp-select optgroup { background: var(--lp-card); color: var(--lp-muted); font-family: var(--lp-mono); font-size: 11px; }
.lp-select option { background: var(--lp-card); color: var(--lp-text); font-family: var(--lp-mono); font-size: 12.5px; }
.lp-view { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--lp-line); background: #000; }
.lp-view img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: filter 380ms ease; }
.lp-arrow {