--- title: 'AM4 Fuel & CO2 Price Monitor' url: 'https://am4info.com/' markdown: 'https://am4info.com/index.md' date: '2026-10-11' description: "/* ── Theme detection ── */ :root { --pm-bg: #1a1f2e; --pm-surface: #222838; --pm-border: #2e3548; --pm-now-bg: #1a2a1a; --pm-now-border: #243a24; --pm-text: #e8eaf0; --pm-text-soft: #a0a8b8; --pm-muted: #6a7080; --pm-current-row: rgba(240,165,0,.08); --pm-chart-grid: #2a3040; --pm-spinner-bg: #2e3548; } [data-theme=\"light\"] { --pm-bg: #ede9e0; --pm-surface: #e0dbd2; --pm-border: #c8c2b8; --pm-now-bg: #dff0df; --pm-now-border: #a8cca8; --pm-text: #18202e; --pm-text-soft: #38485e; --pm-muted: #7a8898; --pm-current-row: rgba(240,165,0,.12); --pm-chart-grid: #c8c2b8; --pm-spinner-bg: #c8c2b8; } /* ── Base ── */ .pm-wrap { font-family: 'Segoe UI', Arial, sans-serif; font-size: 15px; max-width: 880px; margin: 0 auto; color: var(--pm-text); } /* ── NOW card ── */ .pm-now { background: var(--pm-now-bg); border: 1px solid var(--pm-now-border); border-radius: 12px; padding: 28px 32px; margin-bottom: 32px; position: relative; } .pm-now-badge { position: absolute; top: 14px; right: 20px; text-align: right; line-height: 1.6; } .pm-now-badge .pm-now-label { font-weight: 800; font-size: 11px; letter-spacing: 3px; color: #279950; display: block; } .pm-now-badge .pm-now-time { font-size: 12px; font-weight: 700; color: #279950; display: block; } .pm-slot-label { font-size: 14px; font-weight: 700; color: var(--pm-text); margin-bottom: 22px; letter-spacing: .3px; } .pm-prices { display: flex; gap: 40px; flex-wrap: wrap; margin-bottom: 22px; justify-content: center; } .pm-price-block .pm-plabel { font-size: 12px; color: var(--pm-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; } .pm-price-block .pm-pvalue { font-size: 54px; font-weight: 800; letter-spacing: -2px; line-height: 1; } .pm-price-block .pm-pvalue.fuel-green { color: #279950; } .pm-price-block .pm-pvalue.fuel-orange { color: #f0a500; } .pm-price-block .pm-pvalue.fuel-red { color: #ff4d4d; } .pm-price-block .pm-pvalue.co2-green { color: #279950; } .pm-price-block .pm-pvalue.co2-orange { color: #f0a500; } .pm-price-block .pm-pvalue.co2-red { color: #ff4d4d; } /* Countdown + cheap hints */ .pm-info-block { padding-top: 16px; border-top: 1px solid var(--pm-now-border); display: flex; flex-direction: column; gap: 10px; } .pm-info-line { font-size: 14px; color: var(--pm-muted); letter-spacing: .3px; } .pm-info-line strong { font-size: 16px; font-weight: 700; color: var(--pm-text); margin-left: 4px; } .pm-cheap-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 6px; border-top: 1px solid var(--pm-now-border); } .pm-cheap-col .pm-cheap-heading { font-size: 13px; font-weight: 700; color: var(--pm-muted); letter-spacing: .5px; margin-bottom: 8px; } .pm-cheap-col .pm-cheap-entry { display: block; font-size: 14px; font-weight: 700; color: #279950; margin-bottom: 5px; line-height: 1.4; } .pm-cheap-col .pm-cheap-entry.none { color: #ff4d4d; font-weight: 400; font-size: 13px; } @media (max-width: 560px) { .pm-cheap-cols { grid-template-columns: 1fr; } } /* Section heading */ .pm-section-title { font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--pm-muted); margin: 28px 0 12px; } /* Charts */ .pm-chart-box { background: var(--pm-surface); border: 1px solid var(--pm-border); border-radius: 10px; padding: 16px 14px 10px; margin-bottom: 18px; height: 230px; position: relative; transition: background .25s, border-color .25s; } /* Table */ .pm-table { width: 100%; border-collapse: collapse; font-size: 14px; } .pm-table thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--pm-muted); padding: 0 12px 10px; border-bottom: 1px solid var(--pm-border); } .pm-table thead th.right { text-align: right; } .pm-table tbody tr { border-bottom: 1px solid var(--pm-border); transition: background .15s; } .pm-table tbody tr:hover { background: var(--pm-surface); } .pm-table tbody tr.pm-current { background: var(--pm-current-row); outline: 1px solid rgba(240,165,0,.3); outline-offset: -1px; } .pm-table td { padding: 10px 12px; color: var(--pm-text-soft); white-space: nowrap; } .pm-table td.pm-td-date { font-weight: 700; color: var(--pm-text); font-size: 14px; } .pm-table tr.pm-current td.pm-td-date, .pm-table tr.pm-current td.pm-td-time { color: #f0a500; } .pm-table td.pm-td-time { color: var(--pm-muted); font-size: 14px; font-weight: 700; } .pm-table td.pm-td-fuel, .pm-table td.pm-td-co2 { text-align: right; font-weight: 700; font-size: 16px; } .clr-green { color: #279950 !important; } .clr-orange { color: #f0a500 !important; } .clr-red { color: #ff4d4d !important; } [data-theme=\"light\"] .clr-green { color: #1a8c3a !important; } [data-theme=\"light\"] .clr-orange { color: #b87800 !important; } [data-theme=\"light\"] .clr-red { color: #cc2020 !important; } .pm-last-upd { margin-top: 16px; font-size: 12px; color: var(--pm-muted); text-align: right; } /* State messages */ .pm-loading { text-align: center; padding: 60px 0; color: var(--pm-muted); font-size: 14px; } .pm-error { text-align: center; padding: 40px 0; color: #ff4d4d; font-size: 14px; } .pm-spinner { display: inline-block; width: 28px; height: 28px; border: 3px solid var(--pm-spinner-bg); border-top-color: #f0a500; border-radius: 50%; animation: pmspin .8s linear infinite; margin-bottom: 12px; } @keyframes pmspin { to { transform: rotate(360deg); } } @media (max-width: 560px) { .pm-price-block .pm-pvalue { font-size: 38px; } .pm-prices { gap: 24px; } .pm-table td, .pm-table th { padding: 8px 6px; font-size: 12px; } .pm-table td.pm-td-fuel, .pm-table td.pm-td-co2 { font-size: 14px; } } Loading price data… NOW --:--:-- UTC --:--:-- Local — ⛽ Fuel Price — 🌿 CO₂ Price — Next price change in — Next cheap fuel (<500$): scanning… Next cheap CO₂ (<130$): scanning… Next 24 Hours — Charts Next 24 Hours — Price Table Date Time (local) ⛽ Fuel 🌿 CO₂ (function() { function pad(n) { return String(n).padStart(2,'0'); } // ── Clock ── function updateClock() { const now = new Date(); const utcEl = document.getElementById('utc-now'); const locEl = document.getElementById('local-now'); const utcEl2 = document.getElementById('pm-utc-now'); const locEl2 = document.getElementById('pm-local-now'); const utcStr = pad(now.getUTCHours())+':'+pad(now.getUTCMinutes())+':'+pad(now.getUTCSeconds()); const locStr = pad(now.getHours())+':'+pad(now.getMinutes())+':'+pad(now.getSeconds()); if (utcEl) utcEl.textContent = utcStr+' UTC'; if (locEl) locEl.textContent = locStr+' Local'; if (utcEl2) utcEl2.textContent = utcStr+' UTC'; if (locEl2) locEl2.textContent = locStr+' Local'; } setInterval(updateClock, 1000); updateClock(); // ── UTC slot ── function currentUTCSlot() { const now = new Date(); return { day: now.getUTCDate(), time: pad(now.getUTCHours())+':'+pad(now.getUTCMinutes()>=30?30:0) }; } // ── Colour helpers ── function fuelClass(v) { return v===null?'': v ' '+label+': '+tickFn(c.parsed.y) } } }, scales: { x: { ticks: { color: chartTextColor(), font: { size: 11 }, maxRotation: 45, autoSkip: true, maxTicksLimit: 13 }, grid: { color: chartGridColor() } }, y: { position: 'left', min: yMin, max: yMax, ticks: { color: lineColor, font: { size: 11 }, callback: tickFn }, grid: { color: chartGridColor() } } } } }); } function initCharts() { fuelChart = makeChart('pm-fuel-chart', '⛽ Fuel', '#a0a8c8', 300, 2500, v => Math.round(v).toLocaleString('en-US')); co2Chart = makeChart('pm-co2-chart', '🌿 CO₂', '#279950', 100, 200, v => String(Math.round(v))); } function renderCharts(slots) { if (!fuelChart || !co2Chart) initCharts(); const labels = slots.map(s => s._chartLabel); const fuelData = slots.map(s => s.fuel !== null ? Math.round(s.fuel) : null); const co2Data = slots.map(s => s.co2 !== null ? Math.round(s.co2) : null); fuelChart.data.labels = co2Chart.data.labels = labels; fuelChart.data.datasets[0].data = fuelData; co2Chart.data.datasets[0].data = co2Data; fuelChart.update(); co2Chart.update(); } // ── Render dashboard ── function renderDashboard(slots) { document.getElementById('pm-loading').style.display = 'none'; document.getElementById('pm-error').style.display = 'none'; document.getElementById('pm-dashboard').style.display = 'block'; const cur = slots[0]; const curLocal = slotToLocal(cur.day, cur.time); const curEndLoc = slotLocalEnd(cur.day, cur.time); document.getElementById('pm-slot-label').textContent = curLocal.day+'. '+curLocal.month+' • '+curLocal.hour+':'+curLocal.minute+' – '+curEndLoc+' local • Valid until next slot'; const fuelEl = document.getElementById('pm-cur-fuel'); fuelEl.textContent = fmtFuel(cur.fuel); fuelEl.className = 'pm-pvalue '+(cur.fuel===null?'': cur.fuel { if (!r.ok) throw new Error('Server '+r.status); return r.json(); }) .then(data => { if (data.error) throw new Error(data.error); renderDashboard(data.slots); }) .catch(err => showError('Could not load price data: '+err.message)); } // ── Countdown ── function updateCountdown() { const now = new Date(); const secsLeft = 1800 - ((now.getUTCMinutes()%30)*60 + now.getUTCSeconds()); const el = document.getElementById('pm-countdown'); if (el) el.innerHTML = 'Next price change in '+pad(Math.floor(secsLeft/60))+':'+pad(secsLeft%60)+''; } setInterval(updateCountdown, 1000); updateCountdown(); // ── Auto-refresh ── function scheduleRefresh() { const now = new Date(); const secsLeft = 1800 - ((now.getUTCMinutes()%30)*60 + now.getUTCSeconds()) + 5; setTimeout(function() { fetchPrices(); scheduleRefresh(); }, secsLeft*1000); } fetchPrices(); scheduleRefresh(); })();" --- # AM4 Fuel & CO2 Price Monitor Loading price data… NOW --:--:-- UTC --:--:-- Local — ⛽ Fuel Price — 🌿 CO₂ Price — Next price change in — Next cheap fuel (<500$): scanning… Next cheap CO₂ (<130$): scanning… Next 24 Hours — Charts Next 24 Hours — Price Table | Date | Time (local) | ⛽ Fuel | 🌿 CO₂ | |---|---|---|---| --- ## Navigation - Next: [AM4 Achievements Guide](https://am4info.com/am4-achievements-guide.md)