Comparateur Toyota GR Supra 2026 — Outil de vente (QC)
Comparateur dynamique — Toyota GR Supra 2026 (QC)
Outil (sans prix) : GR Supra 2026 vs 5 concurrents, calculateur carburant (km/an, % ville, $/L) + score pondéré “priorités client”.
📌 Axes forts : 382 hp, 368 lb-ft, RWD, AT ou 6MT (iMT), 2 places, conso officielle selon boîte.
1 fichier HTML
Responsive mobile/tablette/PC
Sans prix véhicule
AT 9.4 / MT 11.0 L/100 comb.
4382 mm longueur
112 mm garde au sol
Résumé rapide (client)
Les coûts d’usage se recalculent en direct selon tes sliders (carburant seulement, sans prix véhicule).
Conso calculée (selon % ville)
—
Basée sur ville/route officielles (AT ou MT).
Coût carburant (projection)
—
Carburant seulement (aucun prix véhicule).
Puissance / Couple
—
382 hp / 368 lb-ft (officiel).
Traction
—
RWD = dynamique / plaisir.
Garde au sol
—
112 mm (attention neige / entrées).
0–100 km/h (éditeur)
—
Champ “editable” (selon ta source).
Coffre (éditeur)
—
Affiche un chiffre que tu veux utiliser.
Score priorités client
— /100
Pondéré par les sliders ci-dessous.
Sliders (usage)
Priorités du client (pondération)
0–100. Le score compare la GR Supra vs 5 concurrents (placeholders).
Arguments “flash” (à dire au client)
Ce que l’outil démontre
- Usage : coût carburant sur X ans (km/an, % ville, $/L).
- Choix AT vs MT : conso officielle + feeling.
- Performance : 382 hp + 368 lb-ft (officiel).
- Transparence : concurrents + 0–100 + coffre = éditables/à valider.
Fiche comparative (sans prix)
Défilement horizontal sur mobile. Remplace les placeholders par des chiffres officiels si désiré.
| Modèle |
Traction |
Motorisation |
Puissance (hp) |
Couple (lb-ft) |
Ville (L/100) |
Route (L/100) |
Combinée (L/100) |
0–100 (s) |
“Handling” (index) |
Coffre (L) |
Longueur (mm) |
Empattement (mm) |
Hauteur (mm) |
Garde au sol (mm) |
Places |
Sécurité (résumé) |
${m.isToyota ? "Mise en avant" : "Concurrent (placeholder)"}
`; const pill = m.isToyota ? `
${m.safetyTag}` : `
${m.safetyTag}`; const z = (idx===0) ? edited0100 : (isFinite(m.zeroTo100) ? m.zeroTo100 : null); const cargo = (idx===0) ? editedCargo : (isFinite(m.cargoL) ? m.cargoL : null); tr.innerHTML = `
${modelCell} |
${m.drive || "—"} |
${m.powertrain || "—"} |
${m.hp ?? "—"} |
${m.torque ?? "—"} |
${isFinite(m.cityL) ? fmt(m.cityL,1) : "—"} |
${isFinite(m.hwyL) ? fmt(m.hwyL,1) : "—"} |
${isFinite(m.combL) ? fmt(m.combL,1) : "—"} |
${isFinite(z) ? fmt(z,1) : "—"} |
${m.handlingIndex ?? "—"} |
${isFinite(hàng hóa) ? fmtInt(hàng hóa) : "—"} |
${m.lengthMm ?? "—"} |
${m.wheelbaseMm ?? "—"} |
${m.heightMm ?? "—"} |
${m.gcMm ?? "—"} |
${m.seats ?? "—"} |
${pill} |
`; tbody.appendChild(tr); }); // biểu đồ const labels = ms.map(m => (m.isToyota ? "★ " : "") + shortName(m)); const fuelBars = ms.map(m=>{ const mix2 = blendedL100(m.cityL,m.hwyL,cityPct); if(isFinite(mix2)) return +mix2.toFixed(2); if(isFinite(m.combL)) return m.combL; return 11.0; }); const zBars = ms.map((m,idx)=>{ if(idx===0) return +edited0100.toFixed(1); return (isFinite(m.zeroTo100) ? m.zeroTo100 : 5.5); }); const scoreBars = ms.map(m => scores.find(s=>s.key===m.key)?.total ?? 0); chartFuel = upsertBar(chartFuel, "chartFuel", {labels, label:"Conso (L/100) — plus bas = mieux", data:fuelBars}, {reverseY:true}); chart0100 = upsertBar(chart0100, "chart0100", {labels, label:"0–100 (s) — plus bas = mieux", data:zBars}, {reverseY:true}); chartScore = upsertBar(chartScore, "chartScore", {labels, label:"Score priorités (0–100) — plus haut = mieux", data:scoreBars}); window.__STATE__ = {kmYear,fuelPrice,cityPct,years,weights,ms,l100,costHorizon,scoreCar,edited0100,editedCargo}; } [ "variant","kmYear","fuelPrice","cityPct","years","zeroTo","cargoEdit", "wFuel","wPerf","w0100","wHandling","wCargo","wWinter" ].forEach(id => $(id).addEventListener("input", render)); $("resetBtn").addEventListener("click", ()=>{ $("variant").value = "at"; $("kmYear").value = 16000; $("fuelPrice").value = 1.75; $("cityPct").value = 55; $("years").value = 5; $("zeroTo").value = 4.2; $("cargoEdit").value = 290; $("wFuel").value = 35; $("wPerf").value = 85; $("w0100").value = 80; $("wHandling").value = 85; $("wCargo").value = 25; $("wWinter").value = 30; render(); }); $("exportBtn").addEventListener("click", async ()=>{ const s = window.__STATE__; const car = s.ms[0]; const l100Txt = isFinite(s.l100) ? s.l100.toFixed(1).replace(".",",") : "—"; const costTxt = isFinite(s.costHorizon) ? Math.round(s.costHorizon).toLocaleString("fr-CA") : "—"; const txt = `Tóm tắt khách hàng — ${car.brand} ${car.model} • Cách sử dụng: ${s.kmYear.toLocaleString("fr-CA")} km/năm, ${s.cityPct}% thành phố, ${s.years} năm, giá trị ${s.fuelPrice.toFixed(2)} $/L • Conso tính toán: ${l100Txt} L/100 km • Bộ chế hòa khí chiếu: ~${costTxt} $ sur ${s.years} ans (bộ chế hòa khí) • Officiel: ${car.hp} hp | ${car.torque} lb-ft | ${car.drive} • 0–100 affiché (éditable): ${s.edited0100.toFixed(1).replace(".",",")} s • Coffre affiché (éditable): ${Math.round(s.editedCargo).toLocaleString("fr-CA")} L • Kích thước: L ${car.lengthMm} mm | sự phát triển ${car.wheelbaseMm} mm | H ${car.heightMm} mm | làm vườn au sol ${car.gcMm} mm | ${car.seats} địa điểm • Ưu tiên về điểm số: ${s.scoreCar}/100 Tuyên bố miễn trừ trách nhiệm: giá trị chỉ dẫn; concurrents/0–100/coffre à valider thông qua các nguồn văn phòng; aucun prix de xehicule.`; thử{ đang chờ navigator.clipboard.writeText(txt); $("exportBtn").textContent = "Bản sao sơ yếu lý lịch ✓"; setTimeout(()=>$("exportBtn").textContent="CV sao chép lý lịch", 1200); }catch(e){ notification("Không thể sao chép tự động. Sao chép thủ công."); } }); kết xuất();
