-
Notifications
You must be signed in to change notification settings - Fork 22
/
index.html
151 lines (137 loc) · 8.72 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
<head>
<title>Checkjebon.nl - Goedkopere boodschappen</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta name="description" content="Scan je supermarktbon om er achter te komen waar je goedkoper kunt winkelen." />
<link rel="stylesheet" href="/css/w3/w3.css">
<link rel="stylesheet" href="/css/site/style.css">
<link rel="stylesheet" href="/css/googlefonts/lato.css">
<link rel="stylesheet" href="/css/fontawesome/font-awesome.min.css">
<!-- Vue -->
<script src="/js/vue/vue.min.js"></script>
<!-- Text recognition -->
<script src="/js/tesseract/tesseract.min.js"></script>
<script src="/js/fuse/fuse.js"></script>
</head>
<body class="w3-gray">
<div class="w3-content" style="max-width: 2000px; padding-top: 0px;" id="checkjebon">
<div class="w3-blue-grey">
<div class="w3-container w3-content w3-padding-64" style="max-width:800px">
<h2 class="w3-wide w3-center caps">Checkjebon.nl</h2>
<p class="w3-opacity w3-center">Bekijk wat je kwijt zou zijn voor dezelfde boodschappen bij een andere supermarkt en bespaar elke keer dat je naar de winkel gaat.</p>
<div class="w3-center">
<button class="w3-btn w3-ripple w3-amber" @click="scan" :disabled="isSearching" title="Scan je kassabon"><i class="fa fa-camera"></i> Scan je kassabon</button>
<button class="w3-btn w3-ripple w3-light-gray" @click="example" :disabled="isSearching" title="Voorbeeld">Voorbeeld</button>
<input type="file" id="file-selector" style="display: none;">
</div>
<p class="w3-center">
- of -
</p>
<div class="w3-center">
<label>
<p>Schrijf hier je boodschappenlijstje:</p>
<textarea class="w3-input" style="height: 300px;" v-model="shoppinglist" @input="update" :disabled="isSearching" placeholder="Tik hier je boodschappen in of gebruik de scan knop om je laatste kassabon te scannen. halfvolle melk volkoren brood zilvervliesrijst bananen stokbrood falafel" title="Vul hier je boodschappenlijst in"></textarea>
</label>
</div>
<p class="w3-center">
Op zoek naar een specifiek merk? Tik de merknaam er dan bij.
</p>
<p class="w3-center">
<button class="w3-btn w3-ripple w3-amber" @click="search" :disabled="isSearching" title="Vergelijk prijzen"><i class="fa fa-search"></i> {{ isSearching ? "Bezig met zoeken..." : "Vergelijk prijzen" }}</button>
<button class="w3-btn w3-ripple w3-light-gray" @click="share" :disabled="isSearching" title="Delen"><i class="fa fa-share-alt"></i> Delen</button>
<button class="w3-btn w3-ripple w3-light-gray" @click="clear" :disabled="isSearching" title="Wissen"><i class="fa fa-trash"></i></button>
</p>
</div>
</div>
<div class="w3-light-gray" id="supermarkets" v-show="supermarkets.length > 0">
<div class="w3-container w3-content w3-padding-64" style="max-width: 800px">
<h2 class="w3-wide w3-center caps">Totaalprijs</h2>
<ul class="w3-ul w3-card-4 w3-light-gray w3-hoverable">
<li class="w3-bar" :class="{'w3-amber': supermarket.n == selectedSupermarket?.n}" v-for="supermarket in supermarkets" :key="supermarket.n" @click="selectedSupermarket=supermarket; select()">
<table style="width: 100%;">
<tr :class="{'w3-hover-amber': supermarket.n == selectedSupermarket?.n}">
<td style="width: 80px">
<img v-bind:src="supermarket.i" class="w3-circle" style="width: 60px" :title="'Logo ' + supermarket.c">
</td>
<td>
<a href="#" class="w3-large noline" onclick="return false;" :title="supermarket.c + ': ' + $options.filters.formatPrice(supermarket.totalPrice) + ' euro'">
{{supermarket.c}}
</a>
<br>
<span class="w3-text-blue-gray">
<span v-if="supermarket.notFound > 0">
<i class="fa fa-info-circle"></i> {{supermarket.notFound}} product{{supermarket.notFound==1?"":"en"}} niet gevonden in
</span>
{{supermarket.d.length | formatCount}} producten
</span>
</td>
<td class="w3-xlarge w3-right-align" style="width: 80px;">
{{ supermarket.totalPrice | formatPrice }}
</td>
</tr>
</table>
</li>
</ul>
<p class="w3-center">
Waarom sommige <a href="#" onclick="alert('Een aantal grote supermarktketens zoals LIDL, Nettorama, Boni maar ook online bezorgservices zoals GORILLAS en Crisp hebben geen prijzen op hun website staan. Hierdoor kunnen ze ook niet meegenomen worden in de prijsvergelijking van Checkjebon.nl.'); return false;" target="_blank">supermarkten ontbreken</a>, zoals LIDL, Nettorama, Boni, etc.
</p>
</div>
</div>
<div class="w3-blue-grey" id="shoppinglist" v-show="selectedSupermarket">
<div class="w3-container w3-content w3-padding-64" style="max-width: 800px">
<h2 class="w3-wide w3-center caps">{{ selectedSupermarket?.c }}</h2>
<ul class="w3-ul w3-card-4 w3-light-gray w3-hoverable">
<li class="w3-bar" v-for="product in products">
<table style="width: 100%;" :class="{'w3-text-blue-gray': !product.link || product.checked, 'strike': product.checked}">
<tr>
<td style="width: 40px">
<input type="checkbox" class="w3-check" :checked="product.checked" @click="check(product, $event)">
</td>
<td>
<span class="w3-large">
<a v-bind:href="product.link" target="_blank" class="noline" :title="product.name + ': ' + $options.filters.formatPrice(product.price)">
{{ product.name }}
</a>
</span><br>
<span class="w3-text-blue-gray">
<span v-if="product.size">
<i class="fa fa-pencil" style="cursor: pointer;" @click="edit(product, $event, 'Bedoelde je soms iets anders? Pas dan de naam van dit product aan.\n\nTip: Hoe specifieker je bent, hoe beter het resultaat. Gebruik bijvoorbeeld "smeerboter" in plaats van "boter" of "1,5 liter halfvolle melk" in plaats van alleen "melk".')" title="Product aanpassen"></i>
{{ product.size | formatAmount }}
</span>
<span v-if="product.priceNotFound && !product.priceIsEstimate">
<i class="fa fa-exclamation-triangle" style="cursor: pointer;" @click="edit(product, $event, 'Dit product kon bij geen enkele supermarket gevonden worden.\n\nPas de naam of hoeveelheid aan op je boodschappenlijst en probeer het opnieuw.')" title="Product aanpassen"></i>
Niet gevonden
</span>
<span v-if="product.priceNotFound && product.priceIsEstimate">
Niet gevonden, geschatte prijs
<i class="fa fa-question-circle" style="cursor: pointer;" @click="edit(product, $event, 'Het lijkt er op dat deze supermarkt dit product niet onder deze naam op hun website heeft staan. Om toch goed je boodschappenlijstje te kunnen vergelijken, is uitgegaan van de gemiddelde prijs van dit product bij andere winkels.\n\nOm het product toch te kunnen vinden, pas de naam of hoeveelheid aan om iets minder specifiek te zoeken.')" title="Product aanpassen"></i>
</span>
</span>
</td>
<td class="w3-xlarge w3-right-align" style="width: 80px;">
<a v-bind:href="product.link" target="_blank" class="noline" :title="product.name + ': ' + $options.filters.formatPrice(product.price)">
{{ !product.link && product.price ? "~" : "" }}{{ product.price | formatPrice }}
</a>
</td>
</tr>
</table>
</li>
</ul>
<p class="w3-center">
<button class="w3-btn w3-ripple w3-amber" @click="share" title="Deel je boodschappenlijst"><i class="fa fa-share-alt"></i> Deel je boodschappenlijst</button>
</p>
</div>
</div>
<div class="w3-light-gray">
<div class="w3-container w3-content w3-padding-64" style="max-width: 800px">
<h2 class="w3-wide w3-center caps">Over Checkjebon.nl</h2>
<p class="w3-opacity w3-center">Prijzen in supermarkten veranderen regelmatig, Checkjebon.nl werkt ze <abbr :title="'Laatst bijgewerkt op ' + pricesLastUpdated">dagelijks</abbr> bij en vertelt je waar je het goedkoopst uit bent voor je boodschappen. Verder is Checkjebon.nl een <a href="https://www.github.com/supermarkt/checkjebon/" target="_blank">open source project</a> en ook de gebruikte <a href="https://github.com/supermarkt/checkjebon/blob/main/data/supermarkets.json" target="_blank">supermarktdata</a> is gratis te hergebruiken in andere projecten. Neem <a href="mailto:[email protected]">contact op</a> voor vragen of suggesties.</p>
</div>
</div>
</div>
<script src="/js/site/script.js"></script>
</body>
</html>