public/lab9/task1/index.html - main - Coderdev/web-nodejs-labs

public/lab9/task1/index.html
1 строка3 KB
Coderdev
23 апр 2026, 22:48
23 апр 2026, 22:48fe8b855
<!doctype html><html lang="ru"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Lab9 Task1</title><style>body{margin:0;font-family:Arial,sans-serif;background:#0f172a;color:#e2e8f0}.wrapper{max-width:1200px;margin:0 auto;padding:24px}.panel,.card{background:#111c34;border:1px solid #25314d;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}.panel{padding:24px}.row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.grid{display:grid;grid-template-columns:1fr 2fr;gap:18px}input{width:100%;min-height:44px;border-radius:12px;border:1px solid #334155;background:#0f172a;color:#fff;padding:0 12px;box-sizing:border-box}button,a.btn{display:inline-block;padding:12px 16px;border-radius:12px;background:#2563eb;color:#fff;text-decoration:none;border:none;cursor:pointer}.card{padding:16px}.list-item{border-bottom:1px solid #25314d;padding:12px 0}.muted{color:#94a3b8}@media(max-width:900px){.grid,.row{grid-template-columns:1fr}}</style></head><body><div class="wrapper"><a class="btn" href="/lab9/" style="background:#334155">← Назад</a><div class="grid" style="margin-top:16px"><div class="panel"><h2 style="margin-top:0">Статистика склада</h2><div id="stockBox" class="muted">Загрузка...</div><hr style="border-color:#25314d;margin:18px 0"><h2 style="margin-top:0">Поиск товара</h2><input id="searchInput" type="text" placeholder="Например: iPhone"><div style="display:flex;gap:12px;margin-top:12px"><button id="searchBtn">Найти</button><button id="resetBtn" style="background:#475569">Сбросить</button></div></div><div class="panel"><h2 style="margin-top:0">Список товаров</h2><div id="productsBox">Загрузка...</div></div></div><script>const API='/api/lab9/products';const RUB=new Intl.NumberFormat('ru-RU',{style:'currency',currency:'RUB'});function formatPrice(cents){return RUB.format(Number(cents||0)/100)}async function loadStock(){const res=await fetch(API+'/stock');const data=await res.json();document.getElementById('stockBox').innerHTML=`<div class="card"><strong>Всего наименований:</strong> ${data.total_products}</div><div class="card" style="margin-top:12px"><strong>Всего единиц товара:</strong> ${data.total_items}</div><div class="card" style="margin-top:12px"><strong>Общая стоимость:</strong> ${formatPrice(data.total_value)}</div>`}async function loadProducts(q=''){const url=q?`${API}?q=${encodeURIComponent(q)}`:API;const res=await fetch(url);const items=await res.json();const box=document.getElementById('productsBox');if(!items.length){box.innerHTML='<div class="muted">Ничего не найдено.</div>';return}box.innerHTML=items.map(p=>`<div class="list-item"><strong>${p.title}</strong><br>Цена: ${formatPrice(p.price)}<br>Остаток: ${p.amount} шт.</div>`).join('')}document.getElementById('searchBtn').addEventListener('click',()=>{loadProducts(document.getElementById('searchInput').value.trim())});document.getElementById('resetBtn').addEventListener('click',()=>{document.getElementById('searchInput').value='';loadProducts()});loadStock();loadProducts();</script></body></html>