erin
/
catgirl-cooking
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add recipe submission form

This commit is contained in:
~erin 2022-01-23 19:53:26 -05:00
parent 168e00a87f
commit b40041ae04
No known key found for this signature in database
GPG Key ID: DA70E064A8C70F44
2 changed files with 142 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
static/en/style.css
View File

@ -60,3 +60,84 @@ ul {
ul.recipe {
column-count: 1;
}
form {
/* Center the form on the page */
margin: 0 auto;
width: 500px;
/* Form outline */
padding: 1em;
border-radius: 1em;
}
ul.form {
list-style: none;
padding: 0;
margin: 0;
column-count: 1;
}
form li + li {
margin-top: 1em;
}
label {
/* Uniform size & alignment */
display: inline-block;
width: 90px;
text-align: right;
}
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
}
input,
textarea {
/* Uniform text field size */
width: 300px;
box-sizing: border-box;
/* Match form field borders */
border: 1px solid #999;
color: var(--foreground);
background: var(--background);
}
input:focus,
textarea:focus {
/* Additional highlight for focused elements */
border-color: var(--accent);
}
textarea {
/* Align multiline text fields with their labels */
vertical-align: top;
/* Provide space to type some text */
height: 5em;
}
.button {
/* Align buttons with the text fields */
padding-left: 90px; /* same size as the label elements */
}
button {
/* This extra margin represent roughly the same space as the space
between the labels and their text fields */
margin-left: .5em;
padding : 5px;
border : 2px solid var(--accent);
border-radius: 5px;
background : var(--background);
color: var(--foreground);
cursor : pointer;
}
button:hover,
button:focus {
filter: drop-shadow(0 0 0.25rem var(--accent));
}

61
static/en/submit.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<link href="/favicon.ico" rel="icon">
<link href="/style.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The cutest cooking site on the net :3">
<title>🥘 Catgirl Cooking</title>
</head>
<body>
<h1>Submit a New Recipe</h1>
<hr>
<form action="/api/new-recipe" method="post">
<ul class="form">
<li>
<label for="name">Recipe Name:</label>
<input type="text" id="name" name="recipe_name">
</li>
<li>
<label for="author">Your Name:</label>
<input type="text" id="attribution" name="author_name">
</li>
<li>
<label for="tags">Tags:</label>
<input type="text" id="tags" name="tags" placeholder="breakfast, vegetarian">
</li>
<li>
<label for="prep_time">Preparation Time:</label>
<input type="text" id="prep_time" placeholder="10 minutes">
</li>
<li>
<label for="cooking_time">Cooking Time:</label>
<input type="text" id="cooking_time" placeholder="2 hours">
</li>
<li>
<label for="servings">Servings:</label>
<input type=text" id="servings" placeholder="6">
</li>
<li>
<label for="ingredients">Ingredients:</label>
<textarea id="ingredients" name="ingredients" rows="15" cols="25" placeholder="1 cup flour
3 tablespoon sugar
5 grams salt
12 oz water"></textarea>
</li>
<li>
<label for="directions">Directions:</label>
<textarea id="directions" name="directions" rows="35" placeholder="Combine flour and sugar in a bowl
Slowly mix in water
Stir gently
Add the salt
Bake in the over for 15 minutes"></textarea>
</li>
<li class="button">
<button type="submit">Submit Recipe!</button>
</li>
</form>
</body>
</html>