<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Магазин техники</title>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont;
padding: 16px;
background: #f6f6f6;
}
h2 { margin-bottom: 8px; }
.user { font-size: 14px; opacity: 0.7; margin-bottom: 16px; }
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.card {
background: white;
border-radius: 14px;
padding: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.title { font-weight: 600; }
.price { margin: 6px 0; font-weight: 500; }
button {
width: 100%;
padding: 8px;
border-radius: 10px;
border: none;
background: #0088cc;
color: white;
font-size: 14px;
}
</style>
</head>
<body>
<h2>🛒 Магазин техники</h2>
<div class="user" id="user">Загрузка...</div>
<div class="grid" id="catalog"></div>
<script>
const tg = window.Telegram.WebApp;
tg.ready();
tg.expand();
const user = tg.initDataUnsafe?.user;
document.getElementById("user").textContent =
user ? `Привет, ${user.first_name}!` : "Открой внутри Telegram";
// 📦 ТОВАРЫ
const products = [
{ id: 1, name: "iPhone 15", price: 99990 },
{ id: 2, name: "Samsung Galaxy S23", price: 79990 },
{ id: 3, name: "MacBook Air M2", price: 149990 },
{ id: 4, name: "PlayStation 5", price: 59990 }
];
const catalog = document.getElementById("catalog");
function formatPrice(p) {
return new Intl.NumberFormat("ru-RU").format(p) + " ₽";
}
products.forEach(p => {
const card = document.createElement("div");
card.className = "card";
card.innerHTML = `
<div class="title">${p.name}</div>
<div class="price">${formatPrice(p.price)}</div>
<button>Добавить</button>
`;
card.querySelector("button").onclick = () => {
tg.showAlert(`Добавлено: ${p.name}`);
};
catalog.appendChild(card);
});
</script>
</body>
</html>