91 lines
4.2 KiB
Django/Jinja
91 lines
4.2 KiB
Django/Jinja
{% extends "base.jinja" %}
|
|
|
|
{% block head %}
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.3/marked.min.js" integrity="sha512-kZ9BCD8vqCw2vJ1XG3EVZN5M5aRNxxMK3+uYuZPWc+TtW2Z1zSgmFlTIVHYHaWH0bH2lp2dUlB/1+M1h+lvfeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<main class="md:col-span-3 flex flex-col gap-4 m-4 w-full">
|
|
{{ TopBar::new(session)|safe }}
|
|
|
|
<header class="flex flex-col gap-2">
|
|
<h2 class="text-gray-600 text-6xl font-semibold text-center">Create recipe</h2>
|
|
</header>
|
|
<div class="flex flex-col gap-8">
|
|
<div class="flex flex-wrap gap-8 justify-center">
|
|
<form action="/create" method="post" class="flex flex-col gap-4 md:w-1/2 md:mb-10">
|
|
<label for="title" class="flex gap-4">
|
|
<span class="w-24 shrink-0">Title:</span>
|
|
<input id="title" name="title" class="input border border-solid border-gray-200 rounded-lg" type="text" value="{{title}}" />
|
|
</label>
|
|
|
|
<label for="summary" class="flex gap-4">
|
|
<span class="w-24 shrink-0">Summary:</span>
|
|
<div class="flex gap-2 w-full">
|
|
<textarea id="summary" name="summary" class="textarea-with-view">{{summary}}</textarea>
|
|
<div class="content w-1/2"></div>
|
|
</div>
|
|
</label>
|
|
|
|
<blockquote class="w-full">
|
|
<p class="text-base font-semibold">Summary supports Markdown</p>
|
|
</blockquote>
|
|
|
|
<label for="ingeredients" class="flex gap-4">
|
|
<span class="w-24 shrink-0">Ingeredients:</span>
|
|
<div class="flex gap-2 w-full">
|
|
<textarea id="ingeredients" name="ingeredients" class="textarea-without-view">{{ingeredients}}</textarea>
|
|
</div>
|
|
</label>
|
|
|
|
<details class="w-full collapse collapse-arrow">
|
|
<summary class="text-base font-semibold collapse-title">Ingeredients should be listed as list of AMOUNT UNIT INGEREDIENT. Example:</summary>
|
|
|
|
<div class="flex flex-col gap-1 font-normal collapse-content">
|
|
<div>1 KG Potato</div>
|
|
<div>200 G Sugar</div>
|
|
<div>3 Bananas</div>
|
|
</div>
|
|
</details>
|
|
|
|
<label for="steps" class="flex gap-4">
|
|
<span class="w-24 shrink-0">Steps:</span>
|
|
<div class="flex gap-2 w-full">
|
|
<textarea id="steps" name="steps" class="textarea-with-view">{{steps}}</textarea>
|
|
<div class="content w-1/2"></div>
|
|
</div>
|
|
</label>
|
|
|
|
<details class="w-full">
|
|
<summary class="text-base font-semibold">Syntax for steps:</summary>
|
|
<div>
|
|
<p class="text-base"><code>*</code> is step</p>
|
|
<p class="text-base"><code>></code> is hint for step</p>
|
|
</div>
|
|
</details>
|
|
|
|
<label for="tags" class="flex gap-4">
|
|
<span class="w-24 shrink-0">Tags:</span>
|
|
<div class="flex gap-2 w-full">
|
|
<textarea id="tags" name="tags" class="textarea-with-view">{{tags}}</textarea>
|
|
<div class="content w-1/2"> </div>
|
|
</div>
|
|
</label>
|
|
<div>
|
|
<input type="submit" class="btn w-full" value="Save" />
|
|
</div>
|
|
</form>
|
|
<script type="module">
|
|
Array.from(document.body.querySelectorAll('textarea')).forEach(el => {
|
|
if (!el.parentElement.querySelector('.content')) return;
|
|
el.parentElement.querySelector('div').innerHTML = marked.parse(el.value);
|
|
el.addEventListener('keyup', () => {
|
|
el.parentElement.querySelector('div').innerHTML = marked.parse(el.value);
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% endblock %}
|