88 lines
1.6 KiB
Svelte
88 lines
1.6 KiB
Svelte
<script>
|
|
import offLogo from './assets/off-logo.svg';
|
|
import BarcodeIcon from './assets/barcode.svg';
|
|
import OFF from './components/OFF.svelte';
|
|
import Scanner from './components/Scanner.svelte';
|
|
import Card from './components/Card.svelte';
|
|
|
|
import { onMount } from 'svelte';
|
|
|
|
let showScanner = false;
|
|
let showCard = false;
|
|
let barcode = '';
|
|
|
|
function startScanner() {
|
|
showScanner = true;
|
|
}
|
|
|
|
function stopScanner() {
|
|
showScanner = false;
|
|
}
|
|
|
|
function scannerResult(result) {
|
|
barcode = result;
|
|
showCard = true;
|
|
}
|
|
|
|
</script>
|
|
|
|
<main class="dark">
|
|
<div>
|
|
<a href="/">
|
|
<img src={offLogo} class="logo" alt="Open Food Facts Logo" />
|
|
</a>
|
|
</div>
|
|
<h1>OpenFoodFacts Client</h1>
|
|
|
|
<div id="card" />
|
|
|
|
<div class="reader">
|
|
{#if showScanner}
|
|
<Scanner onClose={stopScanner} onResult={scannerResult} />
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="product">
|
|
{#if showCard}
|
|
<Card barcode={barcode} />
|
|
{/if}
|
|
</div>
|
|
|
|
<nav class="menu bottom nav-bar">
|
|
<ul>
|
|
<li>
|
|
<button class="nav-item" title="Scan barcode" on:click={ () => showScanner = true }>
|
|
<img class="icon" src={BarcodeIcon} alt="Barcode icon" />
|
|
</button>
|
|
</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>
|