<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"
    />
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/public/css/style.css" />
    <title>OrgiCheck</title>
  </head>
  <body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark py-3 fixed-top">
      <div class="container">
        <a href="/" class="navbar-brand">OrgiCheck</a>

        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navmenu"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navmenu">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a href="#cam" class="nav-link">Device Connection</a>
            </li>
            <li class="nav-item">
              <a href="#team" class="nav-link">Team</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
<br>
<br>
    <br>
    <br>
    <!-- Boxes -->
    <section id="check" class="p-5">
      <div class="container">
        <div class="row text-center g-4">
          <div class="col-md">
            <div class="card bg-dark text-light">
              <div class="card-body text-center">
                <div class="h1 mb-3">
                  <i class="bi bi-cash"></i>
                </div>
                <h3 class="card-title mb-3">Price</h3>

                <p><span class="text-warning"> Detected Fruit/Vegetable : </span>{{ vegita }}</p>
                <p><span class="text-warning"> Estimated Weight : </span>{{ weight }} grams.</p>
                <p> <span class="text-warning"> Estimated Price for 1Kg : </span> LKR. {{ price }}.00 </p>
                <p> <span class="text-warning"> Estimated Price : </span> LKR. {{ esti }}.00 </p>
                </div>

            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="p-5 bg-dark text-white text-center position-relative">
      <div class="container">
        <p class="lead">Copyright &copy; 2021 OrgiCheck</p>

        <a href="#" class="position-absolute bottom-0 end-0 p-5">
          <i class="bi bi-arrow-up-circle h1"></i>
        </a>
      </div>
    </footer>

  </body>
</html>
