This repository has been archived by the owner on Jan 16, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
spice.html
167 lines (167 loc) · 12.7 KB
/
spice.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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html>
<head>
<title>Flavortown</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/bootstrap-template.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/food.css" type="text/css" media="screen"/>
<style>
.card-spice, .card-herb, .card-blend { color: #FFFFFF !important }
.card-spice { background-color:#44403A !important }
.card-herb { background-color:#34503A !important }
.card-blend { background-color:#50343A !important }
.blendCard .spice-col, .spiceCard .blend-col { display: none }
.species { float: right; font-style: italic }
</style>
</head>
<body class="bg-dark text-white">
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<div class="navbar-brand col-sm-3 col-md-2 mr-0">
<a href="#" onClick="javascript:GetSpices();location.hash='';return false;"><i class="emoji e1F957"></i> Spiceapedia</a>
<button id="hammeOfBurge" class="btn btn-secondary sm-only">Search</button>
</div>
<input id="searchbox" class="form-control form-control-dark w-100 hide-sm" type="text" placeholder="Search and Filter" aria-label="Search">
<ul class="navbar-nav px-3 hide-sm">
<li class="nav-item text-nowrap">
<a class="copyrightLink" href="#copyright">© 2020 Sean Finch / Haunted Bees Productions</a>
</li>
</ul>
<div id="moreInfo" class="navbar-brand col-sm-12 sm-only" style="display:none">
<input id="searchboxmobile" class="form-control form-control-dark" type="text" placeholder="Search and Filter" aria-label="Search">
<div id="filterPane" class="searchPane">
<h5 class="d-flex justify-content-between align-items-center px-3 mt-2 mb-1">Filter by...</h5>
<div class="row">
<div id="filterL" class="col-6"></div>
<div id="filterR" class="col-6"></div>
</div>
</div>
<div id="filterPane2" class="searchPane" style="display:none">
<h5 class="d-flex justify-content-between align-items-center px-3 mt-2 mb-1">
<span id="filterInner">Garfield is a cat</span>
<button id="filterBack" class="btn btn-secondary">Back</button>
</h5>
<div class="row">
<div id="filter2" class="col-12"></div>
</div>
<div class="row">
<div id="filter2L" class="col-6"></div>
<div id="filter2R" class="col-6"></div>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block sidebar">
<div class="sidebar-sticky">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-white-50">
<a id="viewAll" href="#all">View All</a>
</h6>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-white-50">
<span>Herbs</span>
</h6>
<ul id="herbs" class="nav flex-column"></ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-white-50">
<span>Spices</span>
</h6>
<ul id="spices" class="nav flex-column"></ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-white-50">
<span>Spice Blends</span>
</h6>
<ul id="blends" class="nav flex-column"></ul>
</div>
</nav>
<main id="main" role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"></main>
</div>
<footer class="footer fixed-bottom sm-only">
<a class="copyrightLink" href="#copyright">© 2020 Sean Finch / Haunted Bees Productions</a>
</footer>
</div>
<div id="textTemplates" style="display:none">
<div id="welcomeMessage">
<h4 class="px-3 mt-4 mb-1">Spiceapedia v1.0</h4>
<hr>
<p class="px-4">Hey hi welcome. This is a website where you can learn about <span id="spiceCount"></span> spices, herbs, and spice blends (and counting!). You can find what seasonings go best with different foods and what dishes they're most commonly used in. It's a hoot.</p>
<p class="px-4 sm-only">
Tap that hamburgle menu item up top to bring down the search bar and filter options. If you know what spice you want to see, type its name in the search bar. Alternatively, you can filter by various criteria to find spices that pair well with certain foods or from certain regions.
</p>
<p class="px-4 hide-sm">
Click one of the spices on the left panel to see more information about that spice, or start typing into that search bar up there to find spices!
</p>
<p class="px-4">You can automatically filter by some things by <span class="hide-sm">clicking</span><span class="sm-only">tapping</span> on highlighted words in information cards, such as region names, foods, and flavors. You can also do some advanced searching by typing things like <code>foods:potato</code> or <code>dishes:marinade</code> in the search bar!</p>
<p class="px-4">If you have any suggestions, corrections, additions, or comments, you can contact me via <a href="mailto:fench@hauntedbees.com">email</a> or <a href="https://www.twitter.com/hauntedbees">twitter</a>! Have fun!</p>
</div>
<div id="copyrightInfo">
<h4 class="px-3 mt-4 mb-1">Spiceapedia Legal Deets</h4>
<hr>
<p class="px-4">Spiceapedia is © 2018-2020 <a href="mailto:fench@hauntedbees.com">Sean Finch</a> and <a href="https://www.hauntedbees.com">Haunted Bees Productions</a>. All source code is licensed under the <a href="https://www.gnu.org/licenses/agpl-3.0.en.html" target="_blank">GNU AGPLv3</a> license. All photographs are copyright their respective owners, and their license information is listed on the bottom of the cards they appear on. Emoji display is handled by <a href="https://github.com/twitter/twemoji" target="_blank">Twemoji</a>, which is used under the <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a> license. All recipes linked to belong to their respective owners.</p>
<p class="px-4">All data and text is licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a> license, so you are free to download and copy the <a href="js/spice_data.json" target="_blank">the file containing all of it</a> and do whatever you want to it, as long as any modifications you make to it are also redistributed under the same license. Although, if you're improving the data, it'd be cool if you sent it back to me so I could incorporate the changes into this site. The data file was created with <a href="http://castledb.org/" target="_blank">CastleDB</a>, so if you're going to make some changes it's probably best to use that.</p>
<p class="px-4">Haunted Bees Productions is not affiliated with any of the websites linked to on this page, any of the photographers whose works are shown here, or CastleDB's developers.</p>
<p class="px-4">We use a self-hosted <a href="https://awstats.sourceforge.io/" target="_blank">AWStats</a> installation for webpage analytics. Your data will never leave Haunted Bees' servers or shared with anybody else. We just want to know where people are coming from in the event this page gets popular or something, you know what I mean? Like, do we thank some blogger? A Facebook post? Reddit? Only one way to find out and that's analytics, baby!</p>
</div>
<div id="noResults">
<h4 class="px-3 mt-4 mb-1">No Results Found :(</h4>
<hr>
<p class="px-4">Try searching for a spice by name by typing something like <a class="spice" href="#coriander" data-spice="coriander"><code>coriander</code></a>, searching by region with <a class="spiceattr" href="#origin%3AMediterranean" data-column="origin" data-value="Mediterranean"><code>origin:Mediterranean</code></a> or by accompanying foods with <a class="spiceattr" href="#foods%3Abell_pepper" data-column="foods" data-value="bell_pepper"><code>foods:Bell Pepper</code></a>.</p>
</div>
</div>
<div id="template" style="display:none">
<div class="card card-{type} {blendOrSpice}">
<div class="card-header"><i class="{emoji}"></i> <strong class="spiceHeader" data-id="{img}">{name}</strong> <span class="species">{species}</span></div>
<div class="card-body">
<div class="row">
<div class="col-md-2 col-5">
<img class="cardimg" src="img_spice/{img}.jpg" alt="{imgtext}" title="{imgtext}">
</div>
<div class="col-md-10 col-7">
{synonyms}
<p class="sm-only"><strong>Origin:</strong> <a class="spiceattr" href="#origin%3A{origin}" data-column="origin" data-value="{origin}">{origin}</a></p>
<p class="sm-only"><strong>Flavors:</strong> {flavor}</p>
<p class="card-text hide-sm">{desc}</p>
<p class="blend-col card-text hide-sm"><strong>Common Components:</strong> {components}</p>
<p class="spice-col card-text hide-sm"><strong>Recipes:</strong> {recipes}</p>
</div>
</div>
</div>
<div class="row hide-sm">
<div class="col-4">
<ul class="list-group list-group-flush">
<li class="list-group-item"><strong>Origin:</strong> <a class="spiceattr" href="#origin%3A{origin}" data-column="origin" data-value="{origin}">{origin}</a></li>
<li class="list-group-item"><strong>Flavors:</strong> {flavor}</li>
{related}
</ul>
</div>
<div class="col-8">
<ul class="list-group list-group-flush">
<li class="list-group-item"><strong>Serve On:</strong> {serves}</li>
<li class="list-group-item"><strong>Use In:</strong> {use}</li>
<li class="list-group-item spice-col"><strong>Pairs With:</strong> {pairs}</li>
</ul>
</div>
</div>
<div class="sm-only">
<div>
<ul class="list-group list-group-flush">
<li class="list-group-item">{desc}</li>
<li class="list-group-item"><strong>Serve On:</strong> {serves}</li>
<li class="list-group-item"><strong>Use In:</strong> {use}</li>
<li class="list-group-item spice-col"><strong>Pairs With:</strong> {pairs}</li>
<li class="list-group-item spice-col"><strong>Recipes:</strong> {recipes}</li>
{related}
<li class="list-group-item blend-col"><strong>Common Components:</strong> {components}</li>
</ul>
</div>
</div>
<ul class="list-group list-group-flush list-group-sm">
<li class="list-group-item imgLicense">{license}</li>
</ul>
</div>
</div>
<script src="js/twemoji.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/spice_data.js" type="text/javascript"></script>
<script src="js/spice.js" type="text/javascript"></script>
</body>
</html>