<!doctype html>

<head>

<title>Автосписок (мок-данные до подключения API)</title>

<style>

:root{color-scheme:light dark}

body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0}

header{padding:1rem;border-bottom:1px solid #ccc;position:sticky;top:0;background:color-mix(in hsl,canvas 92%,transparent);backdrop-filter:blur(6px)}

h1{font-size:clamp(1.1rem,2vw,1.5rem);margin:.2rem 0}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;padding:1rem}

.card{border:1px solid #ddd;border-radius:1rem;overflow:hidden;display:flex;flex-direction:column;background:Canvas}

.thumb{aspect-ratio:16/10;object-fit:cover;width:100%;background:#eee}

.info{padding:.8rem;display:grid;gap:.35rem}

.muted{opacity:.75;font-size:.9rem}

.error{padding:1rem;color:#b91c1c}

.empty{padding:1rem;color:#6b7280}

button{padding:.5rem .8rem;border:0;border-radius:.6rem;background:#2563eb;color:#fff;font-weight:600;cursor:pointer}

</style>

</head>

<body>

<h1>Список автомобилей (пока мок‑данные)</h1>

<button id="reload">Обновить</button>

</header>

<main id="app"><p class="empty">Загрузка…</p></main>

const app = document.getElementById('app');

document.getElementById('reload').addEventListener('click', load);

load();

async function load(){

app.innerHTML = '<p class="empty">Загрузка…</p>';

try{

const res = await fetch('api/mobilede.php', { headers: { 'Accept': 'application/json' } });

if(!res.ok) throw new Error('HTTP '+res.status);

const data = await res.json();

render(data);

}catch(e){

app.innerHTML = '<p class="error">Ошибка загрузки: '+ e.message +'</p>';

}

function render(list){

if(!Array.isArray(list) || !list.length){

app.innerHTML = '<p class="empty">Пока нет автомобилей.</p>';

return;

}

const grid = document.createElement('div');

grid.className = 'grid';

for(const ad of list){

const card = document.createElement('article');

card.className = 'card';

const img = document.createElement('img');

img.className = 'thumb';

img.alt = ad.title || 'Авто';

img.loading = 'lazy';

img.src = (ad.images && ad.images[0]) || 'data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 750%22><rect width=%22100%25%22 height=%22100%25%22 fill=%22%23ddd%22/></svg>';

const info = document.createElement('div');

info.className = 'info';

const h3 = document.createElement('h3');

h3.textContent = ad.title || `${ad.make||''} ${ad.model||''}`.trim();

const p1 = document.createElement('div');

p1.innerHTML = `<strong>${fmtPrice(ad.price)}</strong> · <span class="muted">${(ad.firstRegistration||'').slice(0,7)} · ${fmtKm(ad.mileage)}</span>`;

const p2 = document.createElement('div');

p2.className = 'muted';

p2.textContent = [ad.powerKW?ad.powerKW+' кВт':null, ad.fuelType].filter(Boolean).join(' · ');

const a = document.createElement('a');

a.href = ad.url || '#'; a.target = '_blank'; a.rel = 'noopener';

a.textContent = ad.url ? 'Открыть объявление на mobile.de' : 'Ссылка недоступна';

info.append(h3,p1,p2,a);

card.append(img,info);

grid.append(card);

}

app.innerHTML = '';

app.append(grid);

}

function fmtPrice(v){ if(v==null) return ''; return new Intl.NumberFormat('de-DE',{style:'currency',currency:'EUR'}).format(v); }

function fmtKm(v){ if(v==null) return ''; return new Intl.NumberFormat('de-DE').format(v) + ' км'; }

</script>

</body>

</html>