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

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

<style>
* {
    box-sizing: border-box;
}

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

/* верхняя панель */
.topbar {
    display:flex;
    padding:10px;
    gap:10px;
}

/* поиск */
#search {
    flex:1;
    padding:10px;
    border-radius:10px;
    border:1px solid #ccc;
    font-size:14px;
}

/* кнопка темы */
.theme-btn {
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:white;
    border-radius:10px;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

/* сетка */
.grid {
    display:flex;
    flex-wrap:wrap;
    padding:5px;
}

/* карточка */
.card {
    width:48%;
    margin:1%;
    background:white;
    border-radius:16px;
    padding:10px;
    text-align:center;
    box-shadow:0 3px 8px rgba(0,0,0,0.08);
}

/* картинка */
.img {
    width:100%;
    height:100px;
    object-fit:contain;
    margin-bottom:8px;
}

/* название */
.name {
    font-size:14px;
}

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

/* тёмная тема */
body.dark {
    background:#1c1c1e;
}

body.dark .card {
    background:#2c2c2e;
    color:white;
}

body.dark .theme-btn {
    background:#2c2c2e;
    color:white;
}

</style>

<script>

// 
function filterItems(){
    let input = document.getElementById('search').value.toLowerCase();
    let cards = document.getElementsByClassName('card');

    for (let i = 0; i < cards.length; i++){
        let name = cards[i].getAttribute('data-name').toLowerCase();

        if (name.indexOf(input) > -1){
            cards[i].style.display = '';
        } else {
            cards[i].style.display = 'none';
        }
    }
}


function toggleTheme(){
    document.body.classList.toggle('dark');

    if (document.body.classList.contains('dark')){
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
}


window.onload = function(){
    let theme = localStorage.getItem('theme');
    if (theme === 'dark'){
        document.body.classList.add('dark');
    }
}

function selectItem(id){
    window.location = "onec://open/" + id;
}

</script>

</head>

<body>

<div class="topbar">
    <input type="text" id="search" placeholder="Поиск..." onkeyup="filterItems()" />
    <div class="theme-btn" onclick="toggleTheme()"></div>
</div>

<div class="grid">
%ТОВАРЫ%
</div>

</body>
</html>