-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (132 loc) · 9.78 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CookIt!</title>
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Für die Herzen -->
<script src="index.js"></script>
</head>
<body>
<!-- ========================= -->
<!-- Grundgerüst der Anwendung -->
<!-- ========================= -->
<section id="app">
<!-- ========================= Header =====================-->
<header>
<div></div> <!--grüner Balken oben-->
<h1>CookIt!</h1>
</header>
<!-- ========================= Navigation =====================-->
<nav id="app-menu">
<ul>
<a href="/" data-navigo>
<li id="meine" class="active">
Meine Rezepte
</li>
</a>
<a href="/search/" data-navigo>
<li id="search" class>
Rezept suchen
</li>
</a>
<a href="/info/" data-navigo>
<li id="inf" class>
Info
</li>
</a>
</ul>
</nav>
<!-- ========================= Hauptbereich mit variablem Content ====================-->
<main>
</main>
<!-- ========================= Footer =====================-->
<footer>
<div>
<div id="left">
CookIt!
</div>
<div id="right">
2018
</div>
</div> <!--grüner Balken unten-->
</footer>
</section>
<!-- ====================== -->
<!-- View: Info -->
<!-- ====================== -->
<section id="info-section" class="hidden">
<div id="info">
<ul class="accordion">
<h2>Anleitung</h2>
<li class="accordion-item">
<input class="accordion-item-input" type="checkbox" name="accordion" id="item1" />
<label for="item1" class="accordion-item-header">Rezept suchen<span class="accordion-item-header-symbol">▲</span></label>
<div class="accordion-item-text">
<h3>Suchkriterien festlegen</h3>
Auf der ersten Seite der Rezeptsuche ist es möglich im oberen Textfeld ein Suchwort bzw. Gericht einzugeben, nach dem gesucht werden soll. (Hinweis: Der Begriff sollte auf Englisch sein, da die verwendete API auch nur nach englischen Ergebnissen sucht)<br>
Darunter können Zutaten per Klick selektiert und wieder abgewählt werden.<br>
Im zweiten Textfeld ist es möglich neben den bereits ausgewählten Zutaten noch weitere anzugeben. (Hinweis: Hier sollten die Zutaten ebenfalls auf Englisch sein und durch ein Komma getrennt werden)<br>
Per Klick auf “Suchen” werden Suchwort und Zutaten verarbeitet und man navigiert zu einer neuen Seite auf der die Ergebnisse der Suche angezeigt werden.<br>
<h3>Suchergebnisse anzeigen</h3>
Nach der Suche werden die gefundenen Rezepte untereinader aufgelistet.<br>
Links sieht man ein Vorschaubild des Rezepts (falls kein Bild vorhanden ist, wird ein Platzhalterbild verwendet).<br>
In der Mitte befindet sich der Titel des Rezepts, der angeklickt werden kann, worauf sich ein neuer Browsertab öffnet, der das Rezept auf der externen Seite anzeigt.<br>
Rechts befindet sich ein Herz, welches den Favoritenstatus anzeigt. Ist das Herz ausgefüllt und rot ist es favorisiert und wird unter "Meine Rezepte" angezeigt. Der Status kann mit einem einfachen Klick geändert werden.<br>
Am Ende der Liste der Ergebnisse befindet sich ein kleiner animierter Pfeil. Nach einem Klick auf ihn werden max. 10 neue Rezepte gesucht und an die Ergebnisliste angehängt.<br>
</div>
</li>
<li class="accordion-item">
<input class="accordion-item-input" type="checkbox" name="accordion" id="item4" />
<label for="item4" class="accordion-item-header">Meine Rezepte<span class="accordion-item-header-symbol">▲</span></label>
<div class="accordion-item-text">Auf der Übersichtsseite besteht die Möglichkeit über die sich rechts befindende Buttons (Kalender und A-Z Abbildung) die Sortierung der Rezepte zu ändern. (Aktiver Button=schwarz, inaktive Button=leicht transparent) <br />Möchte man ein Rezept löschen, klickt man auf das Herz. Daraufhin erscheint eine Meldung, ob das Rezept wirklich entfernt werden soll. Wird diese Meldung mit “OK” bestätigt, wird das Rezept aus der Übersicht entfernt. <br />Möchte man das Rezept mit genaueren Informationen sehen muss dafür auf den Titel geklickt werden.<br />Eigene Rezepte können durch anklicken des "Rezept hinzufügen" Button eingepflegt werden.</div>
</li>
<li class="accordion-item">
<input class="accordion-item-input" type="checkbox" name="accordion" id="item5" />
<label for="item5" class="accordion-item-header">Rezept anzeigen<span class="accordion-item-header-symbol">▲</span></label>
<div class="accordion-item-text">Auch hier besteht die Möglichkeit das Rezept zu löschen, indem man auf den Mülleimer klickt. Nach dem Anklicken muss ebenfalls die Meldung mit “OK” bestätigt werden.<br />Eigene Rezepte können durch betätigen des Stift Buttons überarbeitet werden.<br />Rezepte die aus der API abgespeichert wurden kann man sich über den "Zum Rezept" Button genauer anschauen.</div>
</li>
<li class="accordion-item">
<input class="accordion-item-input" type="checkbox" name="accordion" id="item6" />
<label for="item6" class="accordion-item-header">Rezept erstellen<span class="accordion-item-header-symbol">▲</span></label>
<div class="accordion-item-text">Auf der Seite "Rezept erstellen" besteht die Möglichkeit, ein selbst erfundenes oder aus einem klassischen Kochbuch entnommenes Rezept in die Webanwendung "CookIt" abzuspeichern.<br />Hierzu müssen lediglich Titel, Zutaten und Beschreibung eingegeben werden. Um eine neue Zutat hinzuzufügen, klickt man auf den +-Button. Möchte man eine eingegebene Zutat löschen, klickt man auf den x-Button, der sich neben dieser befindet.<br /> Zum Speichern muss lediglich der Button "Rezept speichern" betätigt werden.</div>
</li>
<li class="accordion-item">
<input class="accordion-item-input" type="checkbox" name="accordion" id="item7" />
<label for="item7" class="accordion-item-header">Rezept bearbeiten<span class="accordion-item-header-symbol">▲</span></label>
<div class="accordion-item-text">Die Seite "Rezept bearbeiten" sieht der "Rezepte erstellen" sehr ähnlich. Die Funktionen sind identisch (um Zutaten hinzuzufügen den +-Button klicken, um eine Zutat zu entfernen den dazugehörigen x-Button anklicken).<br />Die Eingabefelder können beliebig verändert werden, indem man diese anklickt und den darin befindlichen Text abändert.<br />Zum Speichern der überarbeiteten Verison muss lediglich auf den Button "Überarbeitung speichern" geklickt werden.</div>
</li>
<h2>weitere Informationen</h2>
<li class="accordion-item">
<input class="accordion-item-input" type="checkbox" name="accordion" id="item2" />
<label for="item2" class="accordion-item-header">zukünfige Funktionen<span class="accordion-item-header-symbol">▲</span></label>
<div class="accordion-item-text">
<ul>
<li>Login-System</li>
<li>Teilen von selbsterstellten Rezepten</li>
<li>Deutsche Benutzung der Rezeptsuche</li>
<li>Vorschläge von empfohlenen Rezepten</li>
<li>Verwendung von Service Workern</li>
<li>Bewertung von Rezepten</li>
<li>Bessere API für Rezeptsuche</li>
</ul>
</div>
</li>
<li class="accordion-item">
<input class="accordion-item-input" type="checkbox" name="accordion" id="item3" />
<label for="item3" class="accordion-item-header">verwendete Technologien<span class="accordion-item-header-symbol">▲</span></label>
<div class="accordion-item-text">
<ul>
<li><a href="https://dexie.org/" target="_blank">Dexie</a>: Wrapper zur Benutzung der IndexedDB-API</li>
<li><a href="https://www.npmjs.com/package/navigo" target="_blank">Navigo</a>: Single-Page-Router</li>
<li><a href="https://parceljs.org/" target="_blank">Parcel</a>: Web Application Bundler</li>
<li><a href ="https://cors-anywhere.herokuapp.com/" target="_blank">cors-anywhere</a>: API um cross-origin Anfragen zu ermöglichen</li>
<li><a href ="http://www.recipepuppy.com/about/api/" target="_blank">recipepuppy</a>: API zur Rezeptsuche</li>
</ul>
</div>
</li>
</ul>
</div>
</section>
</body>
</html>