Загрузка данных

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {
    margin:0;
    font-family:-apple-system, Arial;
    background:#f2f2f7;
}

/* контейнер */
.container {
    padding:10px;
}

/* карточка */
.card {
    background:white;
    border-radius:16px;
    padding:15px;
    box-shadow:0 3px 10px rgba(0,0,0,0.1);
}

/* изображение */
.img {
    width:100%;
    height:200px;
    object-fit:contain;
    margin-bottom:15px;
}

/* название */
.name {
    font-size:18px;
    margin-bottom:10px;
}

/* цена */
.price {
    font-size:20px;
    font-weight:bold;
    color:#2e7d32;
    margin-bottom:20px;
}

/* кнопка */
.btn {
    width:100%;
    padding:15px;
    background:#007aff;
    color:white;
    border:none;
    border-radius:12px;
    font-size:16px;
    text-align:center;
}

.btn:active {
    opacity:0.7;
}
</style>

<script>
function buyItem(id){
    window.external.Invoke('КупитьТовар', id);
}
</script>

</head>

<body>

<div class="container">
    <div class="card">

        <img class="img" src="data:image/png;base64,%КАРТИНКА%" />

        <div class="name">%НАИМЕНОВАНИЕ%</div>

        <div class="price">%ЦЕНА%</div>

        <div class="btn" onclick="buyItem('%ССЫЛКА%')">
            Купить
        </div>

    </div>
</div>

</body>
</html>