This repository has been archived by the owner on Sep 20, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
add.liquid
200 lines (176 loc) · 6.79 KB
/
add.liquid
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
---
permalink: "add/"
layout: form.liquid
renderData:
title: "Submit Recipe"
webTitle: "Festa di Famiglia"
webTitleSlug: "Festa-di-Famiglia"
---
<script src="netlify/functions/recipe-upload" defer></script>
<form class="box">
<div class="field">
<label class="label">Title</label>
<div class="control">
<input class="input " type="text" placeholder="Ultimate Chocolate Chip Cookies" required minlength="3" maxlength="50">
</div>
<p class="help">Write Recipe Title here</p>
</div>
<div class="field">
<label class="label">Chef (optional)</label>
<div class="control">
<input class="input " type="text" placeholder="Bob smith or Bobbie or The Anonymous Cat" minlength="2" maxlength="25">
</div>
<p class="help">Please name who made the recipe (if you do not want to disclose name use a reconisable nickname )</p>
</div>
<div class="field">
<label class="label">Difficulty</label>
<div class="select">
<select required>
<option>Easy</option>
<option>Medium</option>
<option>Hard</option>
</select>
</div>
<p class="help">How difficult is it to cook (Easy: a child can cook, Medium: the average adult can cook, Hard: reqiures cooking skill and/or preparation)</p>
</div>
<div class="field">
<label class="label">Image</label>
<div id="js-image" class="file has-name">
<label class="file-label">
<input class="file-input" type="file" name="resume" required accept=".jpg, .jpeg, .png">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
No file uploaded
</span>
</label>
</div>
</div>
<script>
const fileInput = document.querySelector('#js-image input[type=file]');
fileInput.onchange = () => {
if (fileInput.files.length > 0) {
if(fileInput.files[0].size > 200000 && fileInput.files[0].size < 2500000){
const fileName = document.querySelector('#js-image .file-name');
fileName.textContent = fileInput.files[0].name;
}
else {
alert("Please select a a file arround 200kb to 3mb ");
}
}
}
</script>
<div class="field">
<label class="label">Short Description</label>
<div class="control">
<input class="input " type="text" placeholder="Malaysian (spicy!) noodle soup. Based on a rich coconut milk curry, and served with your choice of protein and noodles." required minlength="3" maxlength="50">
</div>
<p class="help">Please write a description describing your recipe</p>
</div>
<div class="field">
<label class="label">Categories</label>
<div class="select is-multiple">
<select multiple size="8" required>
<option value="Vegan">Vegan</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Gluten Free">Gluten Free</option>
<option value="Dairy Free">Dairy Free</option>
<option value="entrée">entrée</option>
<option value="Main">Main</option>
<option value="Snack">Snack</option>
<option value="Dessert">Dessert</option>
<option value="Fast">Fast</option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Pork">Pork</option>
<option value="Baking">Baking</option>
<option value="Spicy">Spicy</option>
<option value="Seafood">Seafood</option>
<option value="Pasta">Pasta</option>
<option value="Soup">Soup</option>
<option value="Traditional Italian">Traditional Italian</option>
<option value="Italian">Italian</option>
<option value="Vietnamese">Vietnamese</option>
<option value="Chinese">Chinese</option>
<option value="Healthy">Healthy</option>
<option value="Simple">Simple</option>
<option value="Celiac">Celiac</option>
<option value="Salicylate">Salicylate</option>
</select>
</div>
<p class="help">Please select all that apply (atleast one), on pc hold Ctrl+click for more then one</p>
</div>
<div class="field">
<label class="label">Servings</label>
<div class="control">
<input class="input " type="number" placeholder="1" min="1" max="1000" required>
</div>
<p class="help">add per person amount or per item amount</p>
</div>
<div class="field">
<label class="label">Prep Time</label>
<div class="control">
<input class="input" type="text" placeholder="20min" minlength="3" maxlength="9" required>
</div>
<p class="help">please write prep time (Ex. 20min, 1.5hr 1day, 1hr 40min)</p>
</div>
<div class="field">
<label class="label">Cooking Time</label>
<div class="control">
<input class="input " type="text" placeholder="1hr" minlength="3" maxlength="9" required>
</div>
<p class="help">please write cooking time (Ex. 20min, 1.5hr 1day, 1hr 40min)</p>
</div>
<div class="field">
<label class="label">Instructions</label>
<div class="control">
<textarea class="textarea has-fixed-size" placeholder="Fixed size textarea" rows="7" required></textarea>
</div>
<p class="help">Please write list of instructions on how to make recipe (After Every Step, pless ENTER/new line)</p>
</div>
<div class="field">
<label class="label">Chef's comments (optional)</label>
<div class="control">
<textarea class="textarea has-fixed-size" placeholder="Fixed size textarea"></textarea>
</div>
<p class="help">(optional) could write recipe alterations or things to watch out for while making or things you could serve with...</p>
</div>
<div class="field">
<label class="label">Recipe Bio (optional)</label>
<div class="control">
<textarea class="textarea has-fixed-size" placeholder="Fixed size textarea"></textarea>
</div>
<p class="help">(optional) If there is a story behind the recipe, feel free to write it here (please do not disclose personal information like names)</p>
</div>
<div class="field">
<div class="field">
<label class="checkbox">
<input type="checkbox">
I agree to publish this recipe publicly
</label>
</div>
<div class="field">
<label class="checkbox">
<input type="checkbox">
I agree this recipie was made/modified by me (not stright taken off the web)
</label>
</div>
<div class="field">
<label class="checkbox">
<input type="checkbox">
I agree that if I uploaded a file that it is my own or a with a copyright that allows use on this website
</label>
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-green is-primary">Submit</button>
</div>
</div>
</form>