<script>
  import offLogo from './assets/off-logo.svg';
  import OFF from './lib/OFF.svelte';
  import Scanner from './lib/Scanner.svelte';
  import BarcodeIcon from './assets/barcode.svg';
</script>

<main class="dark">
  <div>
    <a href="/">
      <img src={offLogo} class="logo" alt="Open Food Facts Logo" />
    </a>
  </div>
  <h1>OpenFoodFacts Client</h1>

  <div class="card">
    <Scanner />
  </div>

  <nav class="menu bottom nav-bar">
    <ul>
      <li>
        <a class="nav-item" href="/scan" title="Scan barcode">
          <img class="icon" src={BarcodeIcon} alt="Barcode icon" />
        </a>
      </li>
    </ul>
  </nav>
</main>

<style>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #ff3e00aa);
  }

  .menu .icon {
    height: 5rem;
    width: 5rem;
  }

  .menu li {
    list-style: none;
  }

  .icon {
    filter: invert(1);
  }
</style>
