Items-list sparklines, retro CSS, pinned tooling, deploy docs
- Bulk-load recent price points per item and render a sparkline in the items list (new LoadRecentPriceHistory query avoids N+1). - Add retro.css visual layer and refreshed login/items/layout styling. - Swap the logo from webp to avif. - Pin htmx/Chart.js/Tailwind/templ versions in the Makefile with vendor / tools / update-deps targets; README documents the dependency-bump flow and the hardened systemd deploy. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
prosolis
@@ -176,6 +176,19 @@ a:hover { text-decoration: underline; }
|
||||
}
|
||||
.v-side-nav a:hover { color: white; }
|
||||
|
||||
/* The brand wordmark at the top of the sidebar is also an anchor (→ /), but
|
||||
shouldn't pick up the active-item border-left / padding treatment that
|
||||
the nav links get. Higher specificity overrides .v-side-nav a defaults. */
|
||||
.v-side-nav a.v-side-brand {
|
||||
border-left: 0;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
.v-side-nav a.v-side-brand:hover {
|
||||
text-decoration: none;
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
|
||||
.v-veola-portrait {
|
||||
background: #f3ead8;
|
||||
border-radius: 12px;
|
||||
@@ -304,6 +317,156 @@ table.v-table tbody tr:hover td { background: rgba(0, 164, 228, 0.08); }
|
||||
50% { opacity: 0.55; }
|
||||
}
|
||||
|
||||
/* Sparkline cells in the items list. Color follows trend: green when the
|
||||
latest price is meaningfully below the running average (good news for a
|
||||
watchlist), red when it's risen, neutral otherwise. */
|
||||
.v-sparkline { display: block; overflow: visible; }
|
||||
.v-spark-down { color: var(--success); filter: drop-shadow(0 0 4px rgba(0, 228, 164, 0.45)); }
|
||||
.v-spark-up { color: var(--danger); filter: drop-shadow(0 0 4px rgba(232, 64, 64, 0.40)); }
|
||||
.v-spark-flat { color: var(--text-2); }
|
||||
|
||||
/* Trend arrow rendered next to Best Price. Same palette as the sparkline,
|
||||
so a glance at the column reads consistently. */
|
||||
.v-trend { font-size: 0.95rem; font-weight: 700; }
|
||||
.v-trend-down { color: var(--success); }
|
||||
.v-trend-up { color: var(--danger); }
|
||||
.v-trend-flat { color: var(--text-2); }
|
||||
|
||||
/* Mascot "deal" moment: Veola appears next to an item's name only when the
|
||||
current best price is at or below target. Small, animated, decorative —
|
||||
purely a delight hit on top of the existing "Deal" badge. */
|
||||
.v-deal-mascot {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
background: #f3ead8;
|
||||
padding: 1px;
|
||||
box-shadow: 0 0 0 1px rgba(0, 228, 164, 0.6), 0 0 12px rgba(0, 228, 164, 0.45);
|
||||
animation: v-deal-bob 2.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes v-deal-bob {
|
||||
0%, 100% { transform: translateY(0) rotate(-2deg); }
|
||||
50% { transform: translateY(-2px) rotate(2deg); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.v-deal-mascot { animation: none; }
|
||||
}
|
||||
|
||||
/* --- Login / Setup chrome -----------------------------------------------
|
||||
The auth pages use the Bare layout (no sidebar) so the form has to carry
|
||||
its own visual weight. The v-auth-* classes give it that: a glassy card
|
||||
for the form, a softly-rotating conic halo behind the mascot, a
|
||||
typeset wordmark + tagline, and the right column is left translucent so
|
||||
the global aurora reaches edge-to-edge instead of stopping at a flat
|
||||
blue block. */
|
||||
|
||||
.v-auth-wordmark {
|
||||
font-family: 'Outfit', system-ui, sans-serif;
|
||||
text-shadow: 0 2px 14px rgba(0, 164, 228, 0.30);
|
||||
}
|
||||
|
||||
.v-auth-card {
|
||||
/* Slightly heavier shadow + inner glow ring since the card stands
|
||||
alone on the page with no sidebar context. */
|
||||
box-shadow:
|
||||
0 16px 44px rgba(0, 0, 80, 0.55),
|
||||
0 0 0 1px rgba(0, 164, 228, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.v-auth-tagline {
|
||||
margin-top: 1.5rem;
|
||||
text-align: center;
|
||||
letter-spacing: 0.34em;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-2);
|
||||
text-shadow: 0 0 12px rgba(0, 164, 228, 0.35);
|
||||
}
|
||||
|
||||
.v-auth-portrait-col {
|
||||
/* Translucent overlay instead of a solid block: a soft inward vignette
|
||||
plus a faint diagonal sheen, keeping the column distinct from the
|
||||
form side without hiding the aurora behind it. */
|
||||
background:
|
||||
radial-gradient(ellipse at center, rgba(0, 0, 0, 0.0) 30%, rgba(0, 0, 0, 0.25) 100%),
|
||||
linear-gradient(135deg, rgba(0, 164, 228, 0.05) 0%, rgba(245, 196, 0, 0.04) 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.v-auth-portrait-halo {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
width: min(420px, 80%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: v-auth-portrait-float 7s ease-in-out infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Rotating conic-gradient halo. Sits behind the portrait via z-index -1
|
||||
inside the isolated stacking context, blurred so it reads as a glow
|
||||
rather than a hard rainbow. */
|
||||
.v-auth-portrait-halo::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -15%;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(
|
||||
from 180deg,
|
||||
rgba(0, 164, 228, 0.55),
|
||||
rgba(245, 196, 0, 0.40),
|
||||
rgba(232, 64, 64, 0.30),
|
||||
rgba(0, 228, 164, 0.40),
|
||||
rgba(0, 164, 228, 0.55)
|
||||
);
|
||||
filter: blur(50px);
|
||||
z-index: -1;
|
||||
animation: v-auth-portrait-spin 22s linear infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* A second, slower halo gives the impression of depth: two layers of
|
||||
light rotating at different speeds keep the eye from locking onto a
|
||||
single repeating pattern. */
|
||||
.v-auth-portrait-halo::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -25%;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(
|
||||
from 0deg,
|
||||
rgba(0, 228, 164, 0.18),
|
||||
rgba(0, 164, 228, 0.10),
|
||||
rgba(245, 196, 0, 0.14),
|
||||
rgba(0, 228, 164, 0.18)
|
||||
);
|
||||
filter: blur(70px);
|
||||
z-index: -1;
|
||||
animation: v-auth-portrait-spin 42s linear infinite reverse;
|
||||
will-change: transform;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
@keyframes v-auth-portrait-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes v-auth-portrait-float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-6px); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.v-auth-portrait-halo,
|
||||
.v-auth-portrait-halo::before,
|
||||
.v-auth-portrait-halo::after { animation: none; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.v-card { transition: none; }
|
||||
.v-card:hover { transform: none; }
|
||||
|
||||
118
static/css/retro.css
Normal file
118
static/css/retro.css
Normal file
@@ -0,0 +1,118 @@
|
||||
/* retro.css — optional "retro-arcade identity" layer.
|
||||
*
|
||||
* Entirely additive. To revert, delete this file and remove its <link> tag
|
||||
* from templates/layout.templ. Nothing else depends on it.
|
||||
*
|
||||
* What this adds:
|
||||
* 1. Two independently-animated aurora blobs that drift across the
|
||||
* viewport on different paths — the real "shifting light" feel,
|
||||
* not a synchronized slide.
|
||||
* 2. Dot-grid overlay over the whole viewport.
|
||||
* 3. Heavier display headings with a soft accent glow.
|
||||
*
|
||||
* Both blobs live on html pseudo-elements at z-index -2 / -1, sitting
|
||||
* behind everything else so card glassiness still reads on top.
|
||||
*/
|
||||
|
||||
body {
|
||||
/* Let the html-level aurora show through. app.css set a solid blue here;
|
||||
dropping it here unlocks the gradient. Removing retro.css restores the
|
||||
original solid background automatically. */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--bg);
|
||||
/* Static dot-grid baked into the root background so the two pseudo-element
|
||||
slots stay free for the animated blobs. */
|
||||
background-image: radial-gradient(
|
||||
circle,
|
||||
rgba(255, 255, 255, 0.045) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: 26px 26px;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* Two aurora blobs animated with seven waypoints each (no `alternate`, so
|
||||
the second half doesn't mirror the first) on incommensurate periods —
|
||||
the two cycles drift in and out of phase, so the eye never locks onto a
|
||||
repeating pattern even though each blob is technically on a loop.
|
||||
Opacity also wobbles so the lights "breathe" instead of just sliding. */
|
||||
|
||||
html::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(
|
||||
closest-side,
|
||||
rgba(0, 164, 228, 0.60),
|
||||
rgba(0, 164, 228, 0.0) 70%
|
||||
);
|
||||
width: 70vmax;
|
||||
height: 70vmax;
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
/* Centered base; keyframes drive all motion from here. */
|
||||
top: 50%; left: 50%;
|
||||
margin-top: -35vmax; margin-left: -35vmax;
|
||||
animation: v-retro-drift-a 41s cubic-bezier(.6,.1,.4,.9) infinite;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
html::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(
|
||||
closest-side,
|
||||
rgba(245, 196, 0, 0.50),
|
||||
rgba(245, 196, 0, 0.0) 70%
|
||||
);
|
||||
width: 55vmax;
|
||||
height: 55vmax;
|
||||
border-radius: 50%;
|
||||
filter: blur(70px);
|
||||
top: 50%; left: 50%;
|
||||
margin-top: -27.5vmax; margin-left: -27.5vmax;
|
||||
animation: v-retro-drift-b 29s cubic-bezier(.5,.2,.3,.8) infinite;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
@keyframes v-retro-drift-a {
|
||||
0% { transform: translate3d(-30vw, -20vh, 0) scale(1.00); opacity: 0.85; }
|
||||
14% { transform: translate3d( 5vw, -28vh, 0) scale(1.18); opacity: 1.00; }
|
||||
29% { transform: translate3d( 32vw, -10vh, 0) scale(0.92); opacity: 0.75; }
|
||||
43% { transform: translate3d( 18vw, 22vh, 0) scale(1.10); opacity: 0.95; }
|
||||
58% { transform: translate3d(-15vw, 30vh, 0) scale(1.05); opacity: 0.80; }
|
||||
72% { transform: translate3d(-38vw, 8vh, 0) scale(0.95); opacity: 1.00; }
|
||||
86% { transform: translate3d(-20vw, -12vh, 0) scale(1.12); opacity: 0.90; }
|
||||
100% { transform: translate3d(-30vw, -20vh, 0) scale(1.00); opacity: 0.85; }
|
||||
}
|
||||
|
||||
@keyframes v-retro-drift-b {
|
||||
0% { transform: translate3d( 28vw, -25vh, 0) scale(1.00); opacity: 0.70; }
|
||||
17% { transform: translate3d( 0vw, -10vh, 0) scale(1.20); opacity: 0.95; }
|
||||
33% { transform: translate3d(-30vw, 8vh, 0) scale(0.90); opacity: 0.80; }
|
||||
48% { transform: translate3d(-12vw, 28vh, 0) scale(1.10); opacity: 1.00; }
|
||||
64% { transform: translate3d( 22vw, 18vh, 0) scale(0.95); opacity: 0.75; }
|
||||
80% { transform: translate3d( 36vw, -2vh, 0) scale(1.15); opacity: 0.90; }
|
||||
100% { transform: translate3d( 28vw, -25vh, 0) scale(1.00); opacity: 0.70; }
|
||||
}
|
||||
|
||||
/* Display headings: heavier, slightly tighter, with an accent glow that ties
|
||||
into the card border gradient. Class-free selectors so existing Tailwind
|
||||
utilities (text-3xl etc.) stack on top untouched. */
|
||||
h1, h2 {
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
text-shadow: 0 2px 14px rgba(0, 164, 228, 0.30);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html::before, html::after { animation: none; }
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
BIN
static/img/veola.avif
Normal file
BIN
static/img/veola.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
@@ -9,7 +9,29 @@
|
||||
return;
|
||||
}
|
||||
var data = JSON.parse(canvas.dataset.chart);
|
||||
new Chart(canvas.getContext('2d'), {
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
// Vertical gradient fill — bright accent at the top, transparent at the
|
||||
// baseline — makes the chart read at a glance instead of as a thin line.
|
||||
var fill = ctx.createLinearGradient(0, 0, 0, canvas.clientHeight || 200);
|
||||
fill.addColorStop(0, 'rgba(0, 228, 164, 0.45)');
|
||||
fill.addColorStop(1, 'rgba(0, 228, 164, 0.00)');
|
||||
|
||||
// Chart.js plugin that paints a soft glow under the line stroke before
|
||||
// the dataset draws. Cheap enough to keep on by default; respects
|
||||
// prefers-reduced-motion only insofar as nothing animates here.
|
||||
var glowPlugin = {
|
||||
id: 'priceLineGlow',
|
||||
beforeDatasetDraw: function (chart) {
|
||||
var c = chart.ctx;
|
||||
c.save();
|
||||
c.shadowColor = 'rgba(0, 228, 164, 0.55)';
|
||||
c.shadowBlur = 12;
|
||||
},
|
||||
afterDatasetDraw: function (chart) { chart.ctx.restore(); }
|
||||
};
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: data.labels,
|
||||
@@ -17,19 +39,37 @@
|
||||
label: 'Best price',
|
||||
data: data.points,
|
||||
borderColor: '#00e4a4',
|
||||
backgroundColor: 'rgba(0,228,164,0.15)',
|
||||
pointBackgroundColor: '#e84040',
|
||||
borderWidth: 2.5,
|
||||
backgroundColor: fill,
|
||||
pointBackgroundColor: '#ffffff',
|
||||
pointBorderColor: '#00e4a4',
|
||||
pointBorderWidth: 1.5,
|
||||
pointRadius: 3,
|
||||
tension: 0.25,
|
||||
pointHoverRadius: 5,
|
||||
tension: 0.3,
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: { mode: 'index', intersect: false },
|
||||
scales: {
|
||||
x: { ticks: { color: '#a8c0f0' }, grid: { color: 'rgba(255,255,255,0.07)' } },
|
||||
y: { ticks: { color: '#a8c0f0' }, grid: { color: 'rgba(255,255,255,0.07)' } }
|
||||
x: { ticks: { color: '#a8c0f0' }, grid: { color: 'rgba(255,255,255,0.06)' } },
|
||||
y: { ticks: { color: '#a8c0f0' }, grid: { color: 'rgba(255,255,255,0.06)' } }
|
||||
},
|
||||
plugins: { legend: { labels: { color: '#ffffff' } } }
|
||||
}
|
||||
plugins: {
|
||||
legend: { labels: { color: '#ffffff' } },
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(20, 32, 80, 0.95)',
|
||||
borderColor: 'rgba(0, 164, 228, 0.6)',
|
||||
borderWidth: 1,
|
||||
titleColor: '#ffffff',
|
||||
bodyColor: '#a8c0f0',
|
||||
padding: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [glowPlugin]
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user