Add recipe submission form
This commit is contained in:
parent
168e00a87f
commit
b40041ae04
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue