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

web: star ratings on the reel, and PICTURES becomes an album browser

Browse Source 
The landing strip now carries a score: each look and each contributed
frame shows an average, five stars the visitor can press, and how many
votes it has. Votes are keyed photo:<id> or look:<TAG> and one visitor
has one vote per key, so pressing a second star moves a score instead of
stacking one. The API is public and rate-limited; look: scores survive a
cleared pool, photo: scores are pruned with their photo.

PICTURES was four destination rows; it is now an album per uploader with
a search box, a recipe/rating/newest sort, a minimum-star filter, a big
preview and a filmstrip of thumbnails. Deleting and slot picking still
live in the big box.
This commit is contained in:
3dtours
2026-09-18 19:17:38 +07:00
parent 4057566a14
commit 07fbadcdc5
10 changed files with 558 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/styles/landing.css
+18
View File
@@ -308,6 +308,24 @@ html { scroll-behavior: smooth; scroll-padding-top: 116px; }
.lp-frame-meta { display: flex; flex-direction: column; gap: 3px; }
.lp-frame-meta b { font-size: 13px; font-weight: 600; }
.lp-frame-meta span { font-family: var(--lp-mono); font-size: 9.5px; color: var(--lp-muted); letter-spacing: 0.06em; }
/* The score line: the tally reads first, the five clickable stars after it, the
number of votes last. One vote per visitor — a second click replaces it. */
.lp-rate { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.lp-rate-index { font-family: var(--lp-mono); font-size: 12px; font-weight: 600; color: var(--lp-amber); }
.lp-stars { display: inline-flex; gap: 1px; }
.lp-star {
border: 0;
background: none;
padding: 0;
line-height: 1;
font-size: 13px;
cursor: pointer;
color: var(--lp-line);
transition: color 0.12s ease, transform 0.12s ease;
}
.lp-star:hover { color: var(--lp-amber); transform: scale(1.18); }
.lp-star.on { color: var(--lp-amber); }
.lp-rate-count { font-family: var(--lp-mono); font-size: 9.5px; color: var(--lp-muted); }
/* --- 4. preset tester --------------------------------------------------- */
.lp-tester { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }