124 lines
2.5 KiB
Svelte
124 lines
2.5 KiB
Svelte
<script>
|
|
import offLogo from './assets/icons/off-logo.svg';
|
|
import BarcodeIcon from './assets/icons/barcode.svg';
|
|
import svelteIcon from './assets/icons/svelte.svg';
|
|
import OFF from './lib/OFF.svelte';
|
|
import Scanner from './lib/Scanner.svelte';
|
|
import Card from './lib/Card.svelte';
|
|
import SW from './lib/SW.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>
|
|
|
|
<div class="content flex flex-col grow">
|
|
<header>
|
|
<div>
|
|
<a href="/">
|
|
<img src={offLogo} class="logo" alt="Open Food Facts Logo" />
|
|
</a>
|
|
</div>
|
|
<h1>OpenFoodFacts Client</h1>
|
|
</header>
|
|
<main class="placeholder">
|
|
<div id="card" />
|
|
|
|
<div class="reader">
|
|
{#if showScanner}
|
|
<Scanner onClose={stopScanner} onResult={scannerResult} />
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="product">
|
|
{#if showCard}
|
|
<Card {barcode} />
|
|
{/if}
|
|
</div>
|
|
</main>
|
|
<nav class="menu bottom nav-bar">
|
|
<ul>
|
|
<li>
|
|
<button
|
|
class="nav-item"
|
|
title="Scan barcode"
|
|
on:click={() => (showScanner = true)}
|
|
>
|
|
<img class="monochrome icon" src={BarcodeIcon} alt="Barcode icon" />
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<footer class="flex flex-row align-between">
|
|
<p>
|
|
<span class="copyleft">🄯</span>
|
|
2022 - <a href="https://samuel.ortion.fr/">Samulus.i.n</a>.
|
|
</p>
|
|
<p>
|
|
Made with ♥ and
|
|
<a href="https://svelte.dev">
|
|
<img class="svelte icon" src={svelteIcon} alt="Svelte.js icon" />
|
|
</a>.
|
|
<a
|
|
href="https://forge.chapril.org/UncleSamulus/openfoodfacts-client/"
|
|
title="OpenFoodFacts Client source code">View source</a
|
|
>.
|
|
</p>
|
|
<p>
|
|
Based on data from <a href="https://openfoodfacts.org/">OpenFoodFacts</a>.
|
|
</p>
|
|
</footer>
|
|
|
|
<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;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.monochrome {
|
|
filter: invert(1);
|
|
}
|
|
}
|
|
.svelte.icon {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
|
|
.placeholder {
|
|
min-height: 25vh;
|
|
}
|
|
</style>
|