morgane/EverShelf
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

Fix sealed/opened expiry; AI shelf-life cache; redesign waste UI

Browse Source
This commit is contained in:
dadaloop82
2026-04-29 06:42:21 +00:00
parent e002955173
commit 22266cb620
4 changed files with 228 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+66 -43
View File
@@ -376,22 +376,21 @@ body {
.btn-quick-recipe span:last-child { font-size: 1.1rem; opacity: 0.8; }
.btn-quick-recipe:active { transform: scale(0.98); }
/* ── Anti-Waste Report Card ─────────────────────────────── */
/* ── Anti-Waste Report Card — same structure as .alert-section ── */
#waste-chart-section {
background: linear-gradient(160deg, #f0fdf4 0%, var(--bg-card) 70%);
background: #f0fdf4;
border: 2px solid #86efac;
border-left: 4px solid var(--success);
border-radius: var(--radius);
padding: 10px 12px;
margin-bottom: 10px;
padding: 16px;
margin-bottom: 12px;
}
/* Header row */
/* Header row — mirrors .alert-section h3 */
.aw-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 7px;
margin-bottom: 10px;
}
.aw-title-row {
display: flex;
@@ -399,7 +398,7 @@ body {
gap: 6px;
}
.aw-title {
font-size: 0.88rem;
font-size: 1.05rem;
font-weight: 700;
margin: 0;
color: var(--text);
@@ -441,48 +440,71 @@ body {
.aw-grade-c { background: #fb923c; }
.aw-grade-d { background: #dc2626; }
/* ── Single-row comparison bar ──────────────────────────── */
.aw-cmp-wrap { margin-bottom: 7px; }
.aw-cmp-row-labels {
/* ── Dual animated comparison bars ──────────────────────── */
.aw-cmp-wrap { margin-bottom: 10px; }
.aw-cmp-bar-row {
display: flex;
justify-content: space-between;
font-size: 0.72rem;
margin-bottom: 3px;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.aw-cmp-lbl-you { color: var(--success); }
.aw-cmp-lbl-you strong { font-size: 0.8rem; }
.aw-cmp-lbl-avg { color: var(--text-light); text-align: right; }
.aw-cmp-lbl-avg strong { color: var(--text); font-size: 0.8rem; }
.aw-cmp-track {
.aw-cmp-bar-label {
font-size: 0.68rem;
font-weight: 700;
width: 42px;
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.aw-cmp-bar-label-you { color: #16a34a; }
.aw-cmp-bar-label-avg { color: #f97316; }
.aw-cmp-bar-track {
flex: 1;
height: 14px;
background: rgba(0,0,0,.06);
border-radius: 7px;
overflow: hidden;
position: relative;
height: 8px;
background: var(--bg-main);
border-radius: 4px;
margin-bottom: 4px;
}
.aw-cmp-you-fill {
.aw-cmp-bar-fill {
height: 100%;
border-radius: 7px;
width: 0; /* starts at 0 — animated via JS */
transition: width 1.1s cubic-bezier(.4,0,.2,1);
position: relative;
overflow: hidden;
}
/* Shimmer overlay */
.aw-cmp-bar-fill::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
background: var(--success);
border-radius: 4px;
transition: width 0.7s cubic-bezier(.4,0,.2,1);
min-width: 3px;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
animation: aw-shimmer 2.2s ease-in-out infinite;
opacity: 0;
transition: opacity 0.5s 1s;
}
.aw-cmp-avg-tick {
position: absolute;
top: -2px; bottom: -2px;
width: 3px;
background: #f59e0b;
border-radius: 2px;
box-shadow: 0 0 0 2px var(--bg-card);
transform: translateX(-50%);
transition: left 0.7s cubic-bezier(.4,0,.2,1);
.aw-cmp-bar-fill.loaded::after { opacity: 1; }
@keyframes aw-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Inline status below bar */
.aw-cmp-bar-fill-you { background: linear-gradient(90deg, #4ade80, #16a34a); }
.aw-cmp-bar-fill-avg { background: linear-gradient(90deg, #fdba74, #f97316); }
.aw-cmp-bar-pct {
font-size: 0.8rem;
font-weight: 800;
width: 30px;
text-align: right;
flex-shrink: 0;
}
.aw-cmp-bar-pct-you { color: #16a34a; }
.aw-cmp-bar-pct-avg { color: #f97316; }
/* Inline status below bars */
.aw-status-inline {
font-size: 0.72rem;
font-size: 0.75rem;
font-weight: 600;
margin: 0 0 6px;
margin: 2px 0 8px;
padding: 0;
}
.aw-status-good { color: #16a34a; }
@@ -494,8 +516,9 @@ body {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
gap: 5px;
margin-bottom: 7px;
justify-content: center;
gap: 6px;
margin-bottom: 9px;
transition: opacity 0.38s ease;
}
.aw-badge {
assets/js/app.js
+42 -20
View File
@@ -2208,13 +2208,13 @@ function _startAntiWasteAutoRefresh() {
}
/**
* Start badge rotation: shows MAX_VISIBLE badges at a time, cycles through all
* with a fade-out/fade-in every INTERVAL ms.
* Start badge rotation: shows maxVisible badges at a time, cycles through all
* with a fade-out/fade-in once per hour (aligned to the next clock-hour boundary).
*/
function _startBadgeRotation(allBadges, maxVisible = 3) {
function _startBadgeRotation(allBadges, maxVisible = 4) {
clearInterval(_awBadgeTimer);
const row = document.getElementById('aw-badges-row');
if (!row || allBadges.length <= maxVisible) return; // no rotation needed
if (!row || allBadges.length <= maxVisible) return;
let start = 0;
const render = () => {
@@ -2225,7 +2225,7 @@ function _startBadgeRotation(allBadges, maxVisible = 3) {
row.innerHTML = slice.join('');
};
_awBadgeTimer = setInterval(() => {
const rotate = () => {
if (!row.isConnected) { clearInterval(_awBadgeTimer); return; }
row.style.opacity = '0';
setTimeout(() => {
@@ -2233,7 +2233,14 @@ function _startBadgeRotation(allBadges, maxVisible = 3) {
render();
row.style.opacity = '1';
}, 380);
}, 4500);
};
// Fire once per hour, aligned to next full clock-hour
const msToNextHour = (60 - new Date().getMinutes()) * 60_000 - new Date().getSeconds() * 1000;
setTimeout(() => {
rotate();
_awBadgeTimer = setInterval(rotate, 3_600_000); // then every hour
}, msToNextHour);
}
/** Build one trend mini-card. */
@@ -2303,10 +2310,11 @@ function _renderAntiWasteSection(used30, wasted30, usedP30, wastedP30, usedP60,
statusCls = 'aw-status-ok';
}
// Single-row compare bar
const scale = Math.max(myRate, avgRate, 5) * 1.35;
const youFillPct = +((myRate / scale) * 100).toFixed(1);
const avgTickPct = +((avgRate / scale) * 100).toFixed(1);
// Dual animated comparison bars — scaled so the larger value fills ~88% of its track
const scale = Math.max(myRate, avgRate, 1);
const youPct = +((myRate / scale) * 88).toFixed(1);
const avgPct = +((avgRate / scale) * 88).toFixed(1);
const youLabel = t('antiwaste.you').split(' ')[0]; // "Tu" / "You" / "Du"
// Trend cards
const totals = [usedP60 + wastedP60, usedP30 + wastedP30, total30];
@@ -2322,7 +2330,7 @@ function _renderAntiWasteSection(used30, wasted30, usedP30, wastedP30, usedP60,
const arr2 = _awTrendArrow(rates[1], rates[2]);
const arrowHtml = a => a ? `<span class="aw-tc-arrow ${a.cls}">${a.sym}</span>` : '';
// Build all badge objects (shown 3 at a time, rotated)
// Build all badge objects (shown 4 at a time, rotated every hour)
const diffPct = avgRate - myRate;
const allBadges = [];
allBadges.push(`<span class="aw-badge aw-badge-rate">
@@ -2350,8 +2358,8 @@ function _renderAntiWasteSection(used30, wasted30, usedP30, wastedP30, usedP60,
<span class="aw-badge-body"><b>−${diffPct}%</b><small>${t('antiwaste.badge_better')}</small></span>
</span>`);
// Initial 3-badge slice
const MAX_VISIBLE = 3;
// Initial 4-badge slice (centered via CSS justify-content:center)
const MAX_VISIBLE = 4;
const initBadges = allBadges.slice(0, MAX_VISIBLE).join('');
// Facts
@@ -2371,13 +2379,19 @@ function _renderAntiWasteSection(used30, wasted30, usedP30, wastedP30, usedP60,
</div>
<div class="aw-cmp-wrap">
<div class="aw-cmp-row-labels">
<span class="aw-cmp-lbl-you">${t('antiwaste.you')} <strong>${myRate}%</strong></span>
<span class="aw-cmp-lbl-avg"><strong>${avgRate}%</strong> ${country}</span>
<div class="aw-cmp-bar-row">
<span class="aw-cmp-bar-label aw-cmp-bar-label-you">${youLabel}</span>
<div class="aw-cmp-bar-track">
<div id="aw-bar-you" class="aw-cmp-bar-fill aw-cmp-bar-fill-you"></div>
</div>
<span class="aw-cmp-bar-pct aw-cmp-bar-pct-you">${myRate}%</span>
</div>
<div class="aw-cmp-track">
<div class="aw-cmp-you-fill" style="width:${youFillPct}%"></div>
<div class="aw-cmp-avg-tick" style="left:${avgTickPct}%"></div>
<div class="aw-cmp-bar-row">
<span class="aw-cmp-bar-label aw-cmp-bar-label-avg">${country}</span>
<div class="aw-cmp-bar-track">
<div id="aw-bar-avg" class="aw-cmp-bar-fill aw-cmp-bar-fill-avg"></div>
</div>
<span class="aw-cmp-bar-pct aw-cmp-bar-pct-avg">${avgRate}%</span>
</div>
<p class="aw-status-inline ${statusCls}">${statusMsg}</p>
</div>
@@ -2400,7 +2414,15 @@ function _renderAntiWasteSection(used30, wasted30, usedP30, wastedP30, usedP60,
<div class="aw-source">${(_awLiveFacts && _awLiveFacts.source) || t('antiwaste.source')}</div>
`;
// Badge rotation (3 at a time)
// Animate comparison bars after DOM insertion
requestAnimationFrame(() => {
const barYou = document.getElementById('aw-bar-you');
const barAvg = document.getElementById('aw-bar-avg');
if (barYou) { barYou.style.width = youPct + '%'; setTimeout(() => barYou.classList.add('loaded'), 100); }
if (barAvg) { barAvg.style.width = avgPct + '%'; setTimeout(() => barAvg.classList.add('loaded'), 100); }
});
// Badge rotation: 4 at a time, every hour
_startBadgeRotation(allBadges, MAX_VISIBLE);
// Fact rotation (every 6 s)