-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (139 loc) · 7.71 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
152
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Entdecke Produkte, die du verträgst – Filtered by FAAS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="favicon.png" />
<script src="jquery-1.12.4.js"></script>
<script src="openfoodapi.js"></script>
<script src="filters.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav class="ui-widget">
<div class="row logo-bar">
<div class="container">
<div class="column-1-2 no-break">
<img src="images/logo-faas.svg" alt="Logo of FAAS" class="ui-widget__logo">
</div>
<div class="column-1-2 no-break u-text-align-right">
<a href="#" class="showDialog"><i class="zmdi zmdi-info-outline"></i>Über</a>
</div>
</div>
</div>
<div class="row search-bar">
<div class="container">
<div class="column-1-2">
<label for="filterSelector h3"><span class="number">1</span>Ich bin allergisch/intolerant auf…</label>
<div class="filtersView">
<select name="SelectFilter" id = "filterSelector" onChange = "updateProductView();">
<option value="default">Filter wählen…</option>
</select>
</div>
</div>
<div class="column-1-2">
<label for="search h3"><span class="number">2</span>Ich suche nach…</label>
<div class="search">
<input id="search" placeholder="Produktname" type="text" class="search__input" onkeypress="return runScript(event)">
<button id = searchButton onClick = "search();" class="search__button">Suchen</button>
<div class="loader" title="4">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="13" width="4" height="5" fill="#333">
<animate attributeName="height" attributeType="XML"
values="5;21;5"
begin="0s" dur="0.6s" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML"
values="13; 5; 13"
begin="0s" dur="0.6s" repeatCount="indefinite" />
</rect>
<rect x="10" y="13" width="4" height="5" fill="#333">
<animate attributeName="height" attributeType="XML"
values="5;21;5"
begin="0.15s" dur="0.6s" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML"
values="13; 5; 13"
begin="0.15s" dur="0.6s" repeatCount="indefinite" />
</rect>
<rect x="20" y="13" width="4" height="5" fill="#333">
<animate attributeName="height" attributeType="XML"
values="5;21;5"
begin="0.3s" dur="0.6s" repeatCount="indefinite" />
<animate attributeName="y" attributeType="XML"
values="13; 5; 13"
begin="0.3s" dur="0.6s" repeatCount="indefinite" />
</rect>
</svg>
</div>
</div>
</div><!-- column -->
</div><!-- container -->
</div>
</nav>
<div class="search-results-title hidden">
<h1><span class="search-results-amount"></span> Produkte gefunden</h1>
</div>
<div class="go-search-something container">
<img src="images/illustration__discover-food.svg" class="go-search-something__image" alt="Illustration of a tray of food">
<h1>Entdecke Produkte, die du verträgst.</h1>
</div>
<section class="container masonry">
<div id="display_result">
</div>
<div id="prototype" class="hidden prototype">
<div class="column-1-3">
<div class = "productView">
<h2 class = "productNameView">Produktname</h2>
<div class = "productImageView">
<img class = "productImage" src = "images/example.jpg">
</div>
<div class = "productDetailsView">
<input type="checkbox" class = "showIngredienceCheckBox" id="showIngredients">
<h3 class="productDetailsViewLabel">
<label class = "showIngredienceView" for="showIngredients">Zutaten</label>
</h3>
<div class = "productContentView">beans, green beans, string beans, berries.</div>
</div>
<div class = "productDetailsLinkView"><a href = "https://www.openfood.ch/de/products/" target="_blank" class = "productDetailsLink">Produktdetails</a></div>
<div class = "warningView"><i class="zmdi zmdi-alert-triangle"></i> Achtung: dieses Produkt enthält eine eventuell problematische Zutat.
<div class = "warnReason">Reason.</div>
</div>
</div>
</div>
</div>
</section>
<div class="backdrop"></div>
<aside class="dialog">
<div class="row">
<div class="column-2-3 no-break">
<h3>Über dieses Projekt</h3>
</div>
<div class="column-1-3 u-text-align-right no-break">
<a href="" class="hideDialog"><i class="zmdi zmdi-close"></i>Schliessen</a>
</div>
</div>
<div class="row is-scrollable">
<h4>What is it?</h4>
<p>FAAS steht für “Filter as a Service”. FAAS findet Produkte, die zu deinen Ernährungspräferenzen passt.</p>
<h4>Wie funktioniert es?</h4>
<p>Wir bekommen unsere Produkte über die <a href="https://openfood.ch">OpenFood.ch-Datenbank</a>. Das ist eine offene Lebensmitteldatenbank mit momentan etwa 15.000 Produkten (Februar 2017). FAAS scannt die Zutatenlisten auf bestimmte Schlagwörter, um dir eine geeignete Auswahl zu geben.
<h4>Wie funktioniert das im Detail?</h4>
<p>Gehen wir mal davon aus, dass jemand mit Zöliakie ein bestimmtes Lebensmittel sucht ohne den Weizenkleber Gluten, den sein Körper nicht verträgt. Ein simpler Schlagwortfilter für das Wort “Gluten” reicht da nicht aus, da Gluten enthalten ist in Bulgur, Beer, Gerstenmalz, Sojasosse, Dinkel, Kamut, usw. FAAS hat eine intelligente Filterfunktion, der diese Zutaten und zahlreiche Wortkombinationen berücksichtigt.
<h4>Welche Grenzen hat die Software bisher?</h4>
<p>FAAS ist noch ein Prototyp. Im Moment unterstützen wir nur eine Hand voll von Unverträglichkeiten und Allergien. Diese sind bisher noch nicht kombinierbar. Auch gibt es noch einige Fehler. Dessen sind wir uns bewusst. Wir haben viele tolle Ideen für die weitere Entwicklung und sind gespannt, euch diese bald zeigen zu können. Fehler und Wünsche können in <a href="https://github.com/fv0/filter-as-a-service/issues" target="_blank">unserem öffentlich zugänglichen Quellcode auf Github</a> erfasst werden.</p>
<h4>Wer steht hinter diesem Projekt?</h4>
<p>Die Software ist an den Open Food Hackdays in Zürich vom 10.–11. Februar 2017 entstanden. Das Team bestand aus Ramon Innerhofer (Backend-Development), Graham Tritt (Concept), Frank Calberg (Documentation) and <a href="http://www.ferdinandvogler.com">Ferdinand Vogler</a> (Design und Frontend-Development).</p>
<h4>Links</h4>
<p><a href="https://github.com/fv0/filter-as-a-service" target="_blank">Github</a></p>
</div>
</aside>
<script>
$('.showDialog, .hideDialog').click(function() {
$('.backdrop, .dialog').toggle();
});
</script>
</body>
</html>