feat(shop): animated backgrounds — system-wide cosmetic + picker
A new cosmetic family: a fixed-position overlay painted behind every
page of the app, switchable from the profile shop. 4 free presets + 6
paid (250-1200 coins) so the new economy has another sink. Every
animation respects prefers-reduced-motion and falls back to its static
gradient.
Catalogue (migration 035):
free: none, gradient-soft, dots, dark
paid: gradient-flow, grid, bubbles, stars (mid)
aurora, nebula (premium)
Backend:
• migration 035 adds users.active_background + rebuilds shop_items
CHECK to include 'background' (standard SQLite 'new + copy + swap')
and seeds 10 items
• shopController.getMyActive returns { background: { slug } } and
activateItem handles type='background' (stores bare slug in
active_background) + skips the user_purchases check for price=0
so free presets work for everyone without per-user rows
• routes/shop validate schema lets 'background' through
Frontend:
• api.js applyCosmetics injects <div id='ls-bg-fx'> at body start
and toggles class to bg-<slug>. Cleared backgrounds remove the
element so dark→light transitions don't leave artifacts.
• ls.css gains a self-contained 'ANIMATED BACKGROUNDS' block:
keyframes per animated slug (ls-bg-flow, ls-bg-grid-scan,
ls-bg-bubble-rise, ls-bg-stars-twinkle, ls-bg-aurora-spin,
ls-bg-nebula-pan) wrapped in a prefers-reduced-motion kill-switch.
Same .bg-<slug> classes are reused for the .bg-preview swatches.
• profile.html shop:
- new 'Фоны' filter button between Рамки and Титулы
- _renderItemPreview type='background' draws a real 56-aspect swatch
(same CSS as the page bg — what you see is what you apply)
- _isItemActive matches by slug for background type
- free items (price===0) treated as auto-owned in render so users
can apply them without a fake 'purchase' step
Verified: getMyActive returns { background: { slug: 'nebula' } } after
flipping users.active_background; activate path updates the row.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
@@ -1194,3 +1194,202 @@ body.no-gamification [data-gamified] { display: none !important; }
|
||||
.rounded-md { border-radius: var(--r-md); }
|
||||
.rounded-lg { border-radius: var(--r-lg); }
|
||||
.rounded-full { border-radius: var(--r-pill); }
|
||||
|
||||
/* ══════════════════════════════════════════
|
||||
ANIMATED BACKGROUNDS (Phase 6)
|
||||
|
||||
Painted by a single fixed div appended to <body> by api.js
|
||||
applyCosmetics: <div id="ls-bg-fx" class="bg-<slug>"></div>.
|
||||
The container is always position:fixed inset:0 z-index:-1, never
|
||||
intercepts pointer events, and sits BEHIND every page chrome.
|
||||
|
||||
Each slug has a static fallback first (no animation), then opts
|
||||
into motion outside the prefers-reduced-motion overlay below.
|
||||
Picker preview swatches reuse `.bg-preview.<slug>` with the same
|
||||
visuals at smaller scale.
|
||||
══════════════════════════════════════════ */
|
||||
#ls-bg-fx {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
will-change: opacity, transform, background-position;
|
||||
transition: opacity .4s ease;
|
||||
}
|
||||
.bg-preview {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 10;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
/* ── 1. none (no overlay) ─────────────────────────────────────── */
|
||||
.bg-none, .bg-preview.bg-none { background: transparent; }
|
||||
|
||||
/* ── 2. gradient-soft (free, static) ──────────────────────────── */
|
||||
.bg-gradient-soft,
|
||||
.bg-preview.bg-gradient-soft {
|
||||
background: linear-gradient(135deg, #e0e7ff 0%, #fce7f3 100%);
|
||||
}
|
||||
|
||||
/* ── 3. dots (free, static) ───────────────────────────────────── */
|
||||
.bg-dots,
|
||||
.bg-preview.bg-dots {
|
||||
background-color: #fafbff;
|
||||
background-image: radial-gradient(rgba(99,102,241,0.18) 1px, transparent 1px);
|
||||
background-size: 22px 22px;
|
||||
}
|
||||
|
||||
/* ── 4. dark (free, static) ───────────────────────────────────── */
|
||||
.bg-dark,
|
||||
.bg-preview.bg-dark {
|
||||
background: radial-gradient(ellipse at top, #1e1b4b 0%, #0f172a 100%);
|
||||
}
|
||||
|
||||
/* ── 5. gradient-flow (paid, animated) ────────────────────────── */
|
||||
@keyframes ls-bg-flow {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
.bg-gradient-flow,
|
||||
.bg-preview.bg-gradient-flow {
|
||||
background: linear-gradient(120deg, #9B5DE5, #06D6E0, #FFD166, #9B5DE5);
|
||||
background-size: 300% 300%;
|
||||
animation: ls-bg-flow 24s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ── 6. grid (paid, animated) ─────────────────────────────────── */
|
||||
@keyframes ls-bg-grid-scan {
|
||||
0% { background-position: 0 0, 0 0; }
|
||||
100% { background-position: 0 60px, 60px 0; }
|
||||
}
|
||||
.bg-grid,
|
||||
.bg-preview.bg-grid {
|
||||
background-color: #0f172a;
|
||||
background-image:
|
||||
linear-gradient(rgba(6,214,224,0.18) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(6,214,224,0.18) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
animation: ls-bg-grid-scan 18s linear infinite;
|
||||
}
|
||||
|
||||
/* ── 7. bubbles (paid, animated) ──────────────────────────────── */
|
||||
@keyframes ls-bg-bubble-rise {
|
||||
0% { transform: translateY(0) scale(0.9); opacity: 0.55; }
|
||||
50% { transform: translateY(-50vh) scale(1.05); opacity: 0.85; }
|
||||
100% { transform: translateY(-100vh) scale(0.9); opacity: 0; }
|
||||
}
|
||||
.bg-bubbles,
|
||||
.bg-preview.bg-bubbles {
|
||||
background: linear-gradient(180deg, #cbeaff 0%, #e9f5ff 100%);
|
||||
position: relative;
|
||||
}
|
||||
.bg-bubbles::before,
|
||||
.bg-bubbles::after,
|
||||
.bg-preview.bg-bubbles::before,
|
||||
.bg-preview.bg-bubbles::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 12% 80%, rgba(255,255,255,0.7) 6px, transparent 7px),
|
||||
radial-gradient(circle at 38% 90%, rgba(255,255,255,0.5) 9px, transparent 10px),
|
||||
radial-gradient(circle at 65% 95%, rgba(255,255,255,0.6) 5px, transparent 6px),
|
||||
radial-gradient(circle at 85% 75%, rgba(255,255,255,0.55) 11px, transparent 12px);
|
||||
animation: ls-bg-bubble-rise 14s linear infinite;
|
||||
}
|
||||
.bg-bubbles::after,
|
||||
.bg-preview.bg-bubbles::after {
|
||||
background-image:
|
||||
radial-gradient(circle at 22% 70%, rgba(255,255,255,0.5) 8px, transparent 9px),
|
||||
radial-gradient(circle at 50% 88%, rgba(255,255,255,0.6) 4px, transparent 5px),
|
||||
radial-gradient(circle at 78% 60%, rgba(255,255,255,0.6) 7px, transparent 8px);
|
||||
animation-duration: 19s;
|
||||
animation-delay: -6s;
|
||||
}
|
||||
|
||||
/* ── 8. stars (paid, animated) ────────────────────────────────── */
|
||||
@keyframes ls-bg-stars-twinkle {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.35; }
|
||||
}
|
||||
.bg-stars,
|
||||
.bg-preview.bg-stars {
|
||||
background-color: #0a0e27;
|
||||
background-image:
|
||||
radial-gradient(2px 2px at 20% 30%, #ffffff, transparent),
|
||||
radial-gradient(1px 1px at 40% 70%, #ffffff, transparent),
|
||||
radial-gradient(2px 2px at 60% 20%, #ffffff, transparent),
|
||||
radial-gradient(1px 1px at 80% 50%, #ffffff, transparent),
|
||||
radial-gradient(2px 2px at 90% 85%, #ffffff, transparent),
|
||||
radial-gradient(1px 1px at 10% 90%, #ffffff, transparent),
|
||||
radial-gradient(2px 2px at 50% 10%, #ffffff, transparent),
|
||||
radial-gradient(1px 1px at 30% 50%, #ffffff, transparent);
|
||||
background-size: 200px 200px;
|
||||
animation: ls-bg-stars-twinkle 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ── 9. aurora (premium, animated) ────────────────────────────── */
|
||||
@keyframes ls-bg-aurora-spin {
|
||||
0% { transform: rotate(0deg) scale(1.2); }
|
||||
50% { transform: rotate(180deg) scale(1.4); }
|
||||
100% { transform: rotate(360deg) scale(1.2); }
|
||||
}
|
||||
.bg-aurora,
|
||||
.bg-preview.bg-aurora {
|
||||
background: #050b1a;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bg-aurora::before,
|
||||
.bg-preview.bg-aurora::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -40%;
|
||||
background: conic-gradient(
|
||||
from 0deg at 50% 50%,
|
||||
transparent 0%,
|
||||
rgba(6,214,224,0.45) 12%,
|
||||
rgba(155,93,229,0.55) 24%,
|
||||
transparent 36%,
|
||||
rgba(6,214,160,0.35) 60%,
|
||||
transparent 78%,
|
||||
rgba(255,107,53,0.30) 92%,
|
||||
transparent 100%
|
||||
);
|
||||
filter: blur(46px);
|
||||
animation: ls-bg-aurora-spin 40s linear infinite;
|
||||
}
|
||||
|
||||
/* ── 10. nebula (premium, animated) ───────────────────────────── */
|
||||
@keyframes ls-bg-nebula-pan {
|
||||
0% { background-position: 0% 0%, 100% 100%; }
|
||||
50% { background-position: 50% 50%, 50% 50%; }
|
||||
100% { background-position: 0% 0%, 100% 100%; }
|
||||
}
|
||||
.bg-nebula,
|
||||
.bg-preview.bg-nebula {
|
||||
background:
|
||||
radial-gradient(ellipse at 30% 30%, rgba(155,93,229,0.6), transparent 55%),
|
||||
radial-gradient(ellipse at 70% 70%, rgba(6,214,224,0.5), transparent 55%),
|
||||
radial-gradient(circle at 50% 50%, rgba(255,107,53,0.25), transparent 60%),
|
||||
#050214;
|
||||
background-size: 150% 150%, 150% 150%, 100% 100%, 100% 100%;
|
||||
animation: ls-bg-nebula-pan 30s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ── Reduced-motion: kill all bg animations, keep static palette ─ */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#ls-bg-fx,
|
||||
#ls-bg-fx::before,
|
||||
#ls-bg-fx::after,
|
||||
.bg-preview,
|
||||
.bg-preview::before,
|
||||
.bg-preview::after {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user