Atlas: 3990 MAD, shake animations, 'Dépêchez-vous!', Backup instead of Sauvegarde

This commit is contained in:
2026-06-26 21:27:43 +01:00
parent a7edca9a5a
commit 370727af88
+13 -5
View File
@@ -117,6 +117,13 @@
0%, 100% { opacity:1; } 0%, 100% { opacity:1; }
50% { opacity:0.5; } 50% { opacity:0.5; }
} }
.hurry-text { font-size:11px; color:#ef4444; font-weight:600; margin-top:6px; animation: shake 0.5s ease-in-out infinite; }
@keyframes shake {
0%, 100% { transform:translateX(0); }
25% { transform:translateX(-2px); }
75% { transform:translateX(2px); }
}
.btn-shake { animation: shake 0.6s ease-in-out infinite; }
/* Why */ /* Why */
.reasons { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; } .reasons { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
@@ -341,9 +348,9 @@ async function loadPricing() {
const specs = { const specs = {
fr: { fr: {
"Rif": ["Mini PC", "512 Go SSD", "8 Go RAM", "Appli photos + fichiers", "Installation incluse"], "Rif": ["Mini PC", "512 Go SSD", "8 Go RAM", "Appli photos + fichiers", "Installation incluse"],
"Rif+": ["Mini PC", "512 Go SSD", "8 Go RAM", "Appli photos + fichiers", '<a href="/backup?lang=fr" style="color:var(--green);">+ Sauvegarde automatique 1 To</a>', "Installation incluse"], "Rif+": ["Mini PC", "512 Go SSD", "8 Go RAM", "Appli photos + fichiers", '<a href="/backup?lang=fr" style="color:var(--green);">+ Backup automatique 1 To</a>', "Installation incluse"],
"Atlas": ["Mini PC", "1 To SSD", "16 Go RAM", "Appli photos + fichiers", "Installation incluse"], "Atlas": ["Mini PC", "1 To SSD", "16 Go RAM", "Appli photos + fichiers", "Installation incluse"],
"Atlas+": ["Mini PC", "1 To SSD", "16 Go RAM", "Appli photos + fichiers", '<a href="/backup?lang=fr" style="color:var(--green);">+ Sauvegarde redondante 1 To</a>', "Installation incluse"] "Atlas+": ["Mini PC", "1 To SSD", "16 Go RAM", "Appli photos + fichiers", '<a href="/backup?lang=fr" style="color:var(--green);">+ Backup redondant 1 To</a>', "Installation incluse"]
}, },
en: { en: {
"Rif": ["Mini PC", "512 GB SSD", "8 GB RAM", "Photo + file apps", "Installation included"], "Rif": ["Mini PC", "512 GB SSD", "8 GB RAM", "Photo + file apps", "Installation included"],
@@ -371,8 +378,9 @@ async function loadPricing() {
const isAtlas = t.name === 'Atlas'; const isAtlas = t.name === 'Atlas';
const priceHTML = isAtlas const priceHTML = isAtlas
? `<div class="old-price">${Number(t.sell_price).toLocaleString('fr-MA')} MAD</div> ? `<div class="old-price">${Number(t.sell_price).toLocaleString('fr-MA')} MAD</div>
<div class="deal-price">3 999 <small>MAD</small></div> <div class="deal-price">3 990 <small>MAD</small></div>
<div><span class="limited-tag">${lang==='fr'?'Offre limitée':'Limited offer'}</span></div>` <div><span class="limited-tag">${lang==='fr'?'Offre limitée':'Limited offer'}</span></div>
<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>`; : `<div class="price">${Number(t.sell_price).toLocaleString('fr-MA')} <small>MAD</small></div>`;
return ` return `
<div class="pricing-card"> <div class="pricing-card">
@@ -381,7 +389,7 @@ async function loadPricing() {
${priceHTML} ${priceHTML}
<div class="desc">${(desc[lang]||desc.fr)[t.name] || t.description || ''}</div> <div class="desc">${(desc[lang]||desc.fr)[t.name] || t.description || ''}</div>
<ul class="specs">${(specs[lang]||specs.fr)[t.name]?.map(s => `<li>${s}</li>`).join('') || ''}</ul> <ul class="specs">${(specs[lang]||specs.fr)[t.name]?.map(s => `<li>${s}</li>`).join('') || ''}</ul>
<a href="https://wa.me/212725569519" class="btn btn-primary" style="width:100%;text-align:center;">${lang==='fr'?'Commander':'Order'}</a> <a href="https://wa.me/212725569519" class="btn btn-primary ${isAtlas ? 'btn-shake' : ''}" style="width:100%;text-align:center;">${lang==='fr'?'Commander':'Order'}</a>
</div>`; </div>`;
}).join(''); }).join('');
} catch(e) { document.getElementById('pricingGrid').innerHTML = '<p style="color:var(--muted);text-align:center;">Pricing unavailable</p>'; } } catch(e) { document.getElementById('pricingGrid').innerHTML = '<p style="color:var(--muted);text-align:center;">Pricing unavailable</p>'; }