<!DOCTYPE html>

<html lang='en'>

<head>

  <meta charset='UTF-8'>

  <title>Price Comparison App for Supermarkets in Kosovo</title>

  <meta name='description' content='An app to compare product prices across various supermarkets in Kosovo.'>

  <meta name='keywords' content='Price Comparison, Supermarkets, Kosovo'>

  <style>

    body {

      font-family: Arial, sans-serif;

      margin: 20px;

    }

    .container {

      display: flex;

      flex-direction: column;

      align-items: center;

    }

    .search-box {

      margin-bottom: 20px;

    }

    table {

      width: 100%;

      border-collapse: collapse;

    }

    th, td {

      border: 1px solid black;

      padding: 10px;

      text-align: center;

    }

  </style>

</head>

<body>

  <div class='container'>

    <h1>Price Comparison App for Supermarkets in Kosovo</h1>

    <div class='search-box'>

      <input type='text' id='productSearch' placeholder='Search for a product...'>

      <button onclick='searchProduct()'>Search</button>

    </div>

    <table id='resultTable'>

      <thead>

        <tr>

          <th>Product</th>

          <th>Supermarket</th>

          <th>Price (€)</th>

        </tr>

      </thead>

      <tbody>

        <!-- Results will be populated here -->

      </tbody>

    </table>

  </div>

  <script>

    function searchProduct() {

      // Dummy data for demonstration

      const data = [

        { product: 'Milk', supermarket: 'Maxi', price: 1.20 },

        { product: 'Milk', supermarket: 'Viva Fresh', price: 1.25 },

        { product: 'Milk', supermarket: 'Emona', price: 1.15 }

      ];

      const tableBody = document.getElementById('resultTable').getElementsByTagName('tbody')[0];

      tableBody.innerHTML = '';

      data.forEach(item => {

        const row = tableBody.insertRow();

        const cell1 = row.insertCell(0);

        const cell2 = row.insertCell(1);

        const cell3 = row.insertCell(2);

        cell1.innerHTML = item.product;

        cell2.innerHTML = item.supermarket;

        cell3.innerHTML = item.price;

      });

    }

  </script>

</body>

</html>