oimwiodev/vela-platform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Temu-style speed: faster animations, flash border, aggressive urgency

Browse Source
This commit is contained in:
fedora-heremes
2026-06-26 21:31:26 +01:00
parent 370727af88
commit a19692e9a4
1 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+19 -11
View File
@@ -94,36 +94,44 @@
padding: 5px 12px; border-radius: 5px;
font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
z-index: 2;
animation: glow 2s ease-in-out infinite;
animation: glow 0.8s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 8px rgba(59,130,246,0.3); }
50% { box-shadow: 0 0 20px rgba(59,130,246,0.6); }
50% { box-shadow: 0 0 25px rgba(59,130,246,0.8); }
}
/* ── Limited offer ── */
.old-price { text-decoration:line-through; color:var(--muted); font-size:18px; font-weight:400; }
.deal-price { font-size:32px; font-weight:800; color:#22c55e; animation: dealPulse 1.5s ease-in-out infinite; }
.deal-price { font-size:32px; font-weight:800; color:#22c55e; animation: dealPulse 0.7s ease-in-out infinite; }
@keyframes dealPulse {
0%, 100% { transform:scale(1); }
50% { transform:scale(1.04); }
25% { transform:scale(1.06); }
75% { transform:scale(1.06); }
}
.limited-tag {
display:inline-block; background:#ef4444; color:#fff;
padding:3px 10px; border-radius:4px; font-size:11px; font-weight:700;
animation: blink 1s ease-in-out infinite; margin-top:4px;
animation: blink 0.5s ease-in-out infinite; margin-top:4px;
}
@keyframes blink {
0%, 100% { opacity:1; }
50% { opacity:0.5; }
50% { opacity:0.2; }
}
.hurry-text { font-size:11px; color:#ef4444; font-weight:600; margin-top:6px; animation: shake 0.5s ease-in-out infinite; }
.hurry-text { font-size:11px; color:#ef4444; font-weight:600; margin-top:6px; animation: shake 0.3s ease-in-out infinite; }
@keyframes shake {
0%, 100% { transform:translateX(0); }
25% { transform:translateX(-2px); }
75% { transform:translateX(2px); }
25% { transform:translateX(-3px); }
75% { transform:translateX(3px); }
}
.btn-shake { animation: shake 0.4s ease-in-out infinite; }
/* ── Flash overlay ── */
.pricing-card.flash-deal { border-color:#ef4444; animation: flashBorder 0.8s ease-in-out infinite; }
@keyframes flashBorder {
0%, 100% { border-color:#ef4444; box-shadow:0 0 0 rgba(239,68,68,0); }
50% { border-color:#ff6b6b; box-shadow:0 0 15px rgba(239,68,68,0.3); }
}
.btn-shake { animation: shake 0.6s ease-in-out infinite; }
/* Why */
.reasons { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
@@ -383,7 +391,7 @@ async function loadPricing() {
<div class="hurry-text">${lang==='fr'?'⭐ Dépêchez-vous !':"⭐ Hurry!"}</div>`
: `<div class="price">${Number(t.sell_price).toLocaleString('fr-MA')} <small>MAD</small></div>`;
return `
<div class="pricing-card">
<div class="pricing-card ${isAtlas ? 'flash-deal' : ''}">
${isAtlas ? '<div class="promo-badge">LE BON CHOIX</div>' : ''}
<h3>${t.name}</h3>
${priceHTML}