First almost fully functioning MVP.

Lacking:
- Seasons cannot be added/edited
- image upload
- layout recipe/adding

src/lib/components/ActionButton.svelte

@@ -1,6 +1,7 @@
 <script lang='ts'>
 export let href
 import "$lib/components/nordtheme.css"
+import "$lib/css/action_button.css"
 </script>
 
 <style>
@@ -8,14 +9,13 @@ import "$lib/components/nordtheme.css"
 position: fixed;
 bottom:0;
 right:0;
-width: 2rem;
+width: 1rem;
-height: 2rem;
+height: 1rem;
 padding: 2rem;
 border-radius: 1000px;
 margin: 2rem;
 transition: 200ms;
 background-color: var(--red);
-box-shadow: 0em 0em 0.2em 0.2em rgba(0,0,0,0.2);
 display: grid;
 justify-content: center;
 align-content: center;
@@ -24,7 +24,7 @@ align-content: center;
 :global(.icon_svg){
 width: 2rem;
 height: 2rem;
-fill: var(--nord4);
+fill: white;
 }
 
 :root{
@@ -33,7 +33,7 @@ fill: var(--nord4);
 .container:hover,
 .container:focus-within
 {
-	background-color: var(--nord3);
+	background-color: var(--nord0);
 box-shadow: 0em 0em 0.5em 0.5em rgba(0,0,0,0.2);
 	/*transform: scale(1.2,1.2);*/
 	animation: shake 0.5s;
@@ -73,6 +73,6 @@ box-shadow: 0em 0em 0.5em 0.5em rgba(0,0,0,0.2);
     }
   }
 </style>
-<a class=container {href}>
+<a class="container action_button" {href}>
 	<slot></slot>
 </a>

src/lib/components/Card.svelte

@@ -2,6 +2,7 @@
 export let recipe
 export let current_month
 export let icon_override = false;
+export let search = "search_me"
 
 if(icon_override){
 	current_month = recipe.season[0]
@@ -29,9 +30,9 @@ if(icon_override){
 	display: flex;
 	flex-direction: column;
 	justify-content: end;
-	transition: 200ms;
 	background-color:  var(--blue);
 	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
+	transition: 200ms;
 }
 .card .icon{
 	text-decoration: unset;
@@ -45,17 +46,24 @@ if(icon_override){
 	border-radius:1000px;
 	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6);
 }
+.card:hover,
+.card:focus-within{
+	transform: scale(1.02,1.02);
+	background-color: var(--red);
+	box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3);
+}
+.card:active{
+	scale: 0.95 0.95;
+}
 .card .icon:hover,
 .card .icon:focus-visible
 {
 	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
 	transform:scale(1.2, 1.2)
 }
-.card:hover,
+.icon:active{
-.card:focus-within{
+	scale: 0.8 0.8;
-	transform: scale(1.02,1.02);
+	rotate: 30deg;
-	background-color: var(--red);
-	box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3);
 }
 
 .card img{
@@ -116,7 +124,10 @@ if(icon_override){
 	background-color: var(--orange);
 	box-shadow: 0.2em 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.3);
 }
-
+.card .tag:active{
+	transition: 100ms;
+	scale: 0.8 0.8;
+}
 .card .title .category{
 	position: absolute;
 	box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
@@ -138,6 +149,10 @@ if(icon_override){
 	background-color: var(--nord3);
 	transform: scale(1.05, 1.05)
 }
+.card .category:active{
+	scale: 0.9 0.9;
+}
+
 .card:hover .icon,
 .card:focus-visible .icon
 {
@@ -174,7 +189,7 @@ if(icon_override){
   }
 
 </style>
-<a class=card href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]>
+<a class="card {search}" href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]>
 {#if icon_override || recipe.season.includes(current_month)}
 	<a class=icon href="/rezepte/season/{current_month}">{recipe.icon}</a>
 {/if}

src/lib/components/CardAdd.svelte

@@ -2,9 +2,15 @@
 
 import Cross from '$lib/assets/icons/Cross.svelte'
 
-export let tags:string[] = []
+// all data shared with rest of page in card_data
-let new_tag
+export let card_data
 
+if(!card_data.tags){
+	card_data.tags = []
+}
+
+//locals
+let new_tag
 let image_preview_url
 
 // Winter: ❄️
@@ -13,7 +19,6 @@ let image_preview_url
 // Fastenzeit: ✝️
 // Herbst: 🍂
 // Sommer: ☀️
-import upload_src from "$lib/assets/icons/upload.svg"
 
 
 export function show_local_image(){
@@ -38,15 +43,15 @@ export function remove_selected_images(){
 
 export function add_to_tags(){
 	if(new_tag){
-		if(! tags.includes(new_tag)){
+		if(! card_data.tags.includes(new_tag)){
-			tags.push(new_tag)
+			card_data.tags.push(new_tag)
-			tags = tags;
+			card_data.tags = card_data.tags;
 		}
 	}
 	new_tag = ""
 }
 export function remove_from_tags(tag){
-	tags = tags.filter(item => item !== tag)
+	card_data.tags = card_data.tags.filter(item => item !== tag)
 }
 export function add_on_enter(event){
 	if(event.key === 'Enter'){
@@ -55,14 +60,14 @@ export function add_on_enter(event){
 }
 export function remove_on_enter(event, tag){
 	if(event.key === 'Enter'){
-		tags = tags.filter(item => item !== tag)
+		card_data.tags = card_data.tags.filter(item => item !== tag)
 	}
 }
 </script>
 <style>
 .card{
 	position: relative;
-	margin-left: 100px;
+	margin-inline: auto;
 	--card-width: 300px;
 	text-decoration: none;
 	position: relative;
@@ -127,11 +132,6 @@ export function remove_on_enter(event, tag){
 	z-index: 4;
 	transition:200ms;
 }
-.delete svg{
-	width: 2rem;
-	height: 2rem;
-	fill: white;
-}
 .delete:hover{
 	transform: scale(1.2, 1.2);
 }
@@ -333,7 +333,7 @@ input::placeholder{
 
 <div class=card href="" >
 
-	<input class=icon placeholder=😀/>
+	<input class=icon placeholder=😀 bind:value={card_data.icon}/>
 	{#if image_preview_url}
 		<img src={image_preview_url} class=img_preview width=300px height=300px />
 	{/if}
@@ -351,13 +351,13 @@ input::placeholder{
 	</div>
 	<input type="file" id=img_picker accept="image/webp image/jpeg" on:change={show_local_image}>
 	<div class=title>
-		<input class=category placeholder=Kategorie.../>
+		<input class=category placeholder=Kategorie... bind:value={card_data.category}/>
 		<div>
-			<input class=name placeholder=Name.../>
+			<input class=name placeholder=Name... bind:value={card_data.name}/>
-			<input class=description placeholder=Kurzbeschreibung.../>
+			<input class=description placeholder=Kurzbeschreibung... bind:value={card_data.description}/>
 		</div>
 		<div class=tags>
-			{#each tags as tag}
+			{#each card_data.tags as tag}
 				<div class="tag" tabindex="0" on:keypress={remove_on_enter(event ,tag)} on:click='{remove_from_tags(tag)}'>{tag}</div>
 			{/each}
         	<div class="tag input_wrapper"><span class=input>+</span><input class="tag_input" type="text" on:keypress={add_on_enter} on:focusout={add_to_tags} size="1" bind:value={new_tag} placeholder=Stichwort...></div>

src/lib/components/CreateIngredientList.svelte

@@ -5,11 +5,11 @@ import Cross from '$lib/assets/icons/Cross.svelte'
 import Plus from '$lib/assets/icons/Plus.svelte'
 import Check from '$lib/assets/icons/Check.svelte'
 
-let ingredients_lists = [
+import "$lib/css/action_button.css"
-	{name: "",
+
-	ingredients: [],
+import { do_on_key } from '$lib/components/do_on_key.js'
-	}
+
-]
+export let ingredients
 
 let new_ingredient = {
 	amount: "",
@@ -22,6 +22,7 @@ let edit_ingredient = {
 	amount: "",
 	unit: "",
 	name: "",
+	sublist: "",
 	list_index: "",
 	ingredient_index: "",
 }
@@ -40,112 +41,345 @@ function get_sublist_index(sublist_name, list){
 	return -1
 }
 export function show_modal_edit_subheading_ingredient(list_index){
-	edit_heading.name = ingredients_lists[list_index].name
+	edit_heading.name = ingredients[list_index].name
 	edit_heading.list_index = list_index
 	const el = document.querySelector('#edit_subheading_ingredient_modal')
 	el.showModal()
 }
 export function edit_subheading_and_close_modal(){
-	ingredients_lists[edit_heading.list_index].name = edit_heading.name
+	ingredients[edit_heading.list_index].name = edit_heading.name
 	const el = document.querySelector('#edit_subheading_ingredient_modal')
 	el.close()
 }
 
 export function add_new_ingredient(){
-	let list_index = get_sublist_index(new_ingredient.sublist, ingredients_lists)
+	if(!new_ingredient.name){
-	if(list_index == -1){
+		return
-		ingredients_lists.push({
-			name: new_ingredient.sublist,
-			ingredients: [],
-		})
-		list_index = ingredients_lists.length - 1
 	}
-	ingredients_lists[list_index].ingredients.push({ ...new_ingredient})
+	let list_index = get_sublist_index(new_ingredient.sublist, ingredients)
-	ingredients_lists = ingredients_lists //tells svelte to update dom
+	if(list_index == -1){
+		ingredients.push({
+			name: new_ingredient.sublist,
+			list: [],
+		})
+		list_index = ingredients.length - 1
+	}
+	ingredients[list_index].list.push({ ...new_ingredient})
+	ingredients = ingredients //tells svelte to update dom
 }
 export function remove_list(list_index){
-	ingredients_lists.splice(list_index, 1);
+	if(ingredients[list_index].list.length > 1){
-	ingredients_lists = ingredients_lists //tells svelte to update dom
+		const response = confirm("Bist du dir sicher, dass du diese Liste löschen möchtest? Alle Zutaten der Liste werden hiermit auch gelöscht.");
+		if(!response){
+			return
+		}
+	}
+	ingredients.splice(list_index, 1);
+	ingredients = ingredients //tells svelte to update dom
 }
 export function remove_ingredient(list_index, ingredient_index){
-	ingredients_lists[list_index].ingredients.splice(ingredient_index, 1)
+	ingredients[list_index].list.splice(ingredient_index, 1)
-	ingredients_lists = ingredients_lists //tells svelte to update dom
+	ingredients = ingredients //tells svelte to update dom
 }
 
 export function show_modal_edit_ingredient(list_index, ingredient_index){
-	edit_ingredient = {...ingredients_lists[list_index].ingredients[ingredient_index]}
+	edit_ingredient = {...ingredients[list_index].list[ingredient_index]}
 	edit_ingredient.list_index = list_index
 	edit_ingredient.ingredient_index = ingredient_index
+	edit_ingredient.sublist = ingredients[list_index].name
 	const modal_el = document.querySelector("#edit_ingredient_modal");
 	modal_el.showModal();
 }
 export function edit_ingredient_and_close_modal(){
-	ingredients_lists[edit_ingredient.list_index].ingredients[edit_ingredient.ingredient_index] = {
+	ingredients[edit_ingredient.list_index].list[edit_ingredient.ingredient_index] = {
 	amount: edit_ingredient.amount,
 	unit: edit_ingredient.unit,
 	name: edit_ingredient.name,
 	}
+	ingredients[edit_ingredient.list_index].name = edit_ingredient.sublist
 	const modal_el = document.querySelector("#edit_ingredient_modal");
 	modal_el.close();
 }
 
+export function show_keys(event){
+	console.log(event.ctrlKey, event.key)
+}
 </script>
 
 <style>
+
+input::placeholder{
+	all:unset;
+}
+input{
+	all:unset;
+}
+
+input.heading{
+	all: unset;
+	background-color: var(--nord0);
+	padding: 1rem;
+	padding-inline: 2rem;
+	font-size: 1.5rem;
+	width: 100%;
+	border-radius: 1000px;
+	color: white;
+	justify-content: center;
+	align-items: center;
+	transition: 200ms;
+}
+input.heading:hover{
+	background-color: var(--nord1);
+}
+
+.heading_wrapper{
+	position: relative;
+	width: 300px;
+	margin-inline: auto;
+	transition: 200ms;
+}
+.heading_wrapper:hover
+{
+	transform:scale(1.1,1.1);
+}
+
+.heading_wrapper button{
+	position: absolute;
+	bottom: -1.5rem;
+	right: -5rem;
+}
+.adder{
+	margin-inline: auto;
+	position: relative;
+	margin-block: 3rem;
+	width: 400px;
+	border-radius: 20px;
+	transition: 200ms;
+}
+.shadow{
+	box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
+}
+.shadow:hover{
+	box-shadow: 0 0 1em 0.4em rgba(0,0,0,0.3);
+}
+.adder button{
+	position: absolute;
+	right: -1.5rem;
+	bottom: -1.5rem;
+}
+.category{
+	all: unset;
+	position: absolute;
+	--font_size: 1.5rem;
+	top: -1em;
+	left: -1em;
+	font-family: sans-serif;
+	font-size: 1.5rem;
+	background-color: var(--nord0);
+	color: var(--nord4);
+	border-radius: 1000000px;
+	width: 23ch;
+	padding: 0.5em 1em;
+	transition: 100ms;
+	box-shadow: 0.5em 0.5em 1em 0.4em rgba(0,0,0,0.3);
+}
+.category:hover{
+	background-color: var(--nord1);
+	transform: scale(1.05,1.05);
+}
+.adder:hover,
+.adder:focus-within
+{
+	transform: scale(1.05, 1.05);
+}
+
+.add_ingredient{
+	font-family: sans-serif;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	font-size: 1.2rem;
+	padding: 2rem;
+	padding-top: 2.5rem;
+	border-radius: 20px;
+	background-color: var(--blue);
+	color: #bbb;
+	transition: 200ms;
+	gap: 0.5rem;
+}
+.add_ingredient input{
+	border: 2px solid var(--nord4);
+	color: var(--nord4);
+	border-radius: 1000px;
+	padding: 0.5em 1em;
+	transition: 100ms;
+}
+.add_ingredient input:hover,
+.add_ingredient input:focus-visible
+{
+	border-color: white;
+	color: white;
+	transform: scale(1.02, 1.02);
+
+}
+.add_ingredient input:nth-of-type(1){
+	max-width: 8ch;
+}
+.add_ingredient input:nth-of-type(2){
+	max-width: 8ch;
+}
+.add_ingredient input:nth-of-type(3){
+	max-width: 30ch;
+}
+
+dialog{
+	box-sizing: content-box;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255,255,255, 0.001);
+	border: unset;
+	margin: 0;
+	transition: 500ms;
+}
+dialog[open]{
+    animation: show 200ms ease forwards;
+}
+@keyframes show{
+    from {
+	backdrop-filter: blur(0px);
+    }
+    to {
+	backdrop-filter: blur(10px);
+    }
+}
+dialog .adder{
+	margin-top: 5rem;
+}
+dialog h2{
+	font-size: 3rem;
+	font-family: sans-serif;
+	color: white;
+	text-align: center;
+	margin-top: 30vh;
+	margin-top: 30dvh;
+	filter: drop-shadow(0 0 0.4em black)
+		drop-shadow(0 0 1em black)
+		;
+}
+ul{
+	width: fit-content;
+	margin-inline: auto;
+}
+li{
+	font-size: 1.2rem;
+	max-width: 1000px;
+	align-items: center;
+}
+.li_wrapper{
+	display: flex;
+	justify-content: space-between;
+}
+.mod_icons{
+	display: flex;
+	flex-direction: row;
+	margin-left: 2rem;
+}
+li:nth-child(2n){
+	background-color: var(--nord4);
+
+}
+li:nth-child(2n+1){
+	background-color: var(--nord6);
+}
+
+.button_subtle{
+	padding: 0em;
+	animation: unset;
+	margin: 0.2em 0.1em;
+	background-color: transparent;
+	box-shadow: unset;
+}
+.button_subtle:hover{
+	scale: 1.2 1.2;
+}
+h3{
+	margin-inline: auto;
+	width: fit-content;
+	display: flex;
+	flex-direction: row;
+	max-width: 1000px;
+	justify-content: space-between;
+}
 </style>
 
 
-{#each ingredients_lists as list, list_index}
+{#each ingredients as list, list_index}
 	<h3>
+	<div>
 	{#if list.name }
 		{list.name}
 	{:else}
 		Leer
 	{/if}
-	<button class=edit on:click="{() => show_modal_edit_subheading_ingredient(list_index)}">
+	</div>
-			<Pen></Pen>	</button>
+	<div class=mod_icons>
-		<button class=remove on:click="{() => remove_list(list_index)}">
+	<button class="action_button button_subtle" on:click="{() => show_modal_edit_subheading_ingredient(list_index)}">
-				<Cross></Cross>
+			<Pen fill=var(--nord1)></Pen>	</button>
+		<button class="action_button button_subtle" on:click="{() => remove_list(list_index)}">
+				<Cross fill=var(--nord1)></Cross>
 		</button>
+	</div>
 	</h3>
 	<ul>
-	{#each list.ingredients as ingredient, ingredient_index}
+	{#each list.list as ingredient, ingredient_index}
-		<li>{ingredient.amount} {ingredient.unit} {ingredient.name}
+		<li><div class=li_wrapper><div>{ingredient.amount} {ingredient.unit} {ingredient.name}</div>
-		<button class=edit on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)}>
+		<div class=mod_icons><button class="action_button button_subtle" on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)}>
-		<Pen></Pen>
+		<Pen fill=var(--nord1) height=1em width=1em></Pen>
-		</button>
-		<button class=remove on:click="{() => remove_ingredient(list_index, ingredient_index)}">
-			<Cross></Cross>
 		</button>
+		<button class="action_button button_subtle" on:click="{() => remove_ingredient(list_index, ingredient_index)}">
+			<Cross fill=var(--nord1) height=1em width=1em></Cross>
+		</button></div></div>
 	</li>
 	{/each}
 	</ul>
 {/each}
 
-<input type="text" bind:value={new_ingredient.sublist} placeholder="Unterkategorie (optional)">
+<div class="adder shadow">
-<div class=ingredient>
+	<input class=category type="text" bind:value={new_ingredient.sublist} placeholder="Kategorie (optional)" on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
-	<input type="text" id=amount placeholder="250..." bind:value={new_ingredient.amount}>
+	<div class=add_ingredient>
-	<input type="text" id=unit placeholder="mL..." bind:value={new_ingredient.unit}>
+		<input type="text"  placeholder="250..." bind:value={new_ingredient.amount} on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
-	<input type="text" id=name placeholder="Milch..." bind:value={new_ingredient.name}>
+		<input type="text" placeholder="mL..." bind:value={new_ingredient.unit} on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
-	<button on:click={() => add_new_ingredient()}>
+		<input type="text" placeholder="Milch..." bind:value={new_ingredient.name} on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
-		<Plus></Plus>
+		<button on:click={() => add_new_ingredient()} class=action_button>
+			<Plus fill=white style="width: 2rem; height: 2rem;"></Plus>
 		</button>
-
+	</div>
 </div>
 
-<dialog class=ingredient id=edit_ingredient_modal>
+<dialog id=edit_ingredient_modal>
-	<input type="text" id=amount placeholder="250..." bind:value={edit_ingredient.amount}>
+	<h2>Zutat verändern</h2>
-	<input type="text" id=unit placeholder="mL..." bind:value={edit_ingredient.unit}>
+	<div class=adder>
-	<input type="text" id=name placeholder="Milch..." bind:value={edit_ingredient.name}>
+	<input class=category type="text" bind:value={edit_ingredient.sublist} placeholder="Kategorie (optional)">
-	<button on:click={edit_ingredient_and_close_modal}>
+	<div class=add_ingredient on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
-	<Check></Check>
+	<input type="text" placeholder="250..." bind:value={edit_ingredient.amount} on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
+	<input type="text" placeholder="mL..." bind:value={edit_ingredient.unit} on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
+	<input type="text" placeholder="Milch..." bind:value={edit_ingredient.name} on:keypress={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
+	<button class=action_button on:click={edit_ingredient_and_close_modal}>
+		<Check fill=white style="width: 2rem; height: 2rem;"></Check>
 		</button>
-
+	</div>
+	</div>
 </dialog>
 
 <dialog id=edit_subheading_ingredient_modal>
-	<input type="text" bind:value={edit_heading.name}>
+	<h2>Kategorie umbenennen</h2>
-	<button on:click={edit_subheading_and_close_modal}>
+	<div class=heading_wrapper>
-	<Check></Check>
+		<input class=heading type="text" bind:value={edit_heading.name} on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
+		<button class=action_button on:click={edit_subheading_and_close_modal}>
+		<Check fill=white style="width:2rem; height:2rem;"></Check>
 		</button>
+	</div>
 </dialog>

src/lib/components/CreateStepList.svelte

@@ -6,16 +6,16 @@ import Plus from '$lib/assets/icons/Plus.svelte'
 import Check from '$lib/assets/icons/Check.svelte'
 
 import '$lib/components/nordtheme.css'
+import "$lib/css/action_button.css"
+
+import { do_on_key } from '$lib/components/do_on_key.js'
 
 const step_placeholder = "Kartoffeln schälen..."
-let instructions = [{
+export let instructions
-	name: "",
-	steps: [],
-}]
 
 let new_step = {
 	name: "",
-	step: "Kartoffeln schälen..."
+	step: step_placeholder
 	}
 
 let edit_heading = {
@@ -37,6 +37,9 @@ export function remove_list(list_index){
 }
 
 export function add_new_step(){
+	if(new_step.step == step_placeholder){
+		return
+	}
 	let list_index = get_sublist_index(new_step.name, instructions)
 	if(list_index == -1){
 		instructions.push({
@@ -51,9 +54,6 @@ export function add_new_step(){
 	const el = document.querySelector("#step")
 	el.innerHTML = step_placeholder
 	instructions = instructions //tells svelte to update dom
-
-	new_step.step = ""
-	add_placeholder()
 }
 
 export function remove_step(list_index, step_index){
@@ -107,7 +107,7 @@ export function clear_step(){
 export function add_placeholder(){
 	const el = document.querySelector("#step")
 	if(el.innerHTML == ""){
-		el.innerHTML = "Kartoffeln schälen..."
+		el.innerHTML = step_placeholder
 	}
 }
 </script>
@@ -117,6 +117,43 @@ input::placeholder{
 	all:unset;
 }
 
+
+input.heading{
+	all: unset;
+	background-color: var(--nord0);
+	padding: 1rem;
+	padding-inline: 2rem;
+	font-size: 1.5rem;
+	width: 100%;
+	border-radius: 1000px;
+	color: white;
+	justify-content: center;
+	align-items: center;
+	transition: 200ms;
+}
+input.heading:hover,
+input.heading:focus-visible
+{
+	background-color: var(--nord1);
+}
+
+.heading_wrapper{
+	position: relative;
+	width: 300px;
+	margin-inline: auto;
+	transition: 200ms;
+}
+.heading_wrapper:hover,
+.heading_wrapper:focus-visible
+{
+	transform:scale(1.1,1.1);
+}
+
+.heading_wrapper button{
+	position: absolute;
+	bottom: -1.5rem;
+	right: -5rem;
+}
 .adder{
 	margin-inline: auto;
 	position: relative;
@@ -129,24 +166,9 @@ input::placeholder{
 	box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
 }
 .adder button{
-	all:unset;
 	position: absolute;
 	right: -1.5rem;
 	bottom: -1.5rem;
-	cursor: pointer;
-	display:flex;
-	justify-content: center;
-	align-items: center;
-	background-color: var(--red);
-	border-radius:100000px;
-	padding: 1rem;
-	transition: 100ms;
-	box-shadow: 0 0 1em 0.4em rgba(0,0,0,0.3);
-}
-.adder button:hover{
-	background-color: var(--nord0);
-	transform: scale(1.1,1.1);
-	box-shadow: 0 0 1em 0.8em rgba(0,0,0,0.3);
 }
 .category{
 	all: unset;
@@ -164,11 +186,15 @@ input::placeholder{
 	transition: 100ms;
 	box-shadow: 0.5em 0.5em 1em 0.4em rgba(0,0,0,0.3);
 }
-.category:hover{
+.category:hover,
+.category:focus-visible
+{
 	background-color: var(--nord1);
 	transform: scale(1.05,1.05);
 }
-.adder:hover{
+.adder:hover,
+.adder:focus-within
+{
 	transform: scale(1.1, 1.1);
 }
 
@@ -193,9 +219,11 @@ dialog{
 	box-sizing: content-box;
 	width: 100%;
 	height: 100%;
-	background-color: rgba(0, 0, 0, 0.6);
+	background-color: rgba(255,255,255, 0.001);
 	border: unset;
+	backdrop-filter: blur(10px);
 	margin: 0;
+	transition: 200ms;
 }
 dialog .adder{
 	margin-top: 5rem;
@@ -205,35 +233,21 @@ dialog h2{
 	font-family: sans-serif;
 	color: white;
 	text-align: center;
-	margin-top: 30%;
+	margin-top: 30vh;
-}
+	margin-top: 30dvh;
-
+	filter: drop-shadow(0 0 0.4em black)
-@keyframes shake{
+		drop-shadow(0 0 1em black)
-    0%{
-      transform: rotate(0)
-		scale(1,1);
-    }
-    25%{
-    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-      	transform: rotate(30deg)
-      		scale(1.2,1.2)
 		;
 }
-    50%{
+dialog[open]{
-
+    animation: show 200ms ease forwards;
-    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-      	transform: rotate(-30deg)
-      		scale(1.2,1.2);
 }
-    74%{
+@keyframes show{
-
+    from {
-    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+	backdrop-filter: blur(0px);
-  	transform: rotate(30deg)
-  		scale(1.2, 1.2);
     }
-	100%{
+    to {
-      transform: rotate(0)
+	backdrop-filter: blur(10px);
-      	scale(1,1);
     }
 }
 </style>
@@ -269,10 +283,10 @@ dialog h2{
 {/each}
 
 <div class='adder shadow'>
-<input class=category type="text" bind:value={new_step.name} placeholder="Unterkategorie (optional)">
+<input class=category type="text" bind:value={new_step.name} placeholder="Kategorie (optional)"on:keypress={(event) => do_on_key(event, 'Enter', false , add_new_step)} >
 <div class=add_step>
-	<p id=step contenteditable on:focus='{clear_step}' on:blur={add_placeholder} bind:innerHTML={new_step.step}></p>
+	<p id=step contenteditable on:focus='{clear_step}' on:blur={add_placeholder} bind:innerHTML={new_step.step} on:keypress={(event) => do_on_key(event, 'Enter', true , add_new_step)}></p>
-	<button on:click={() => add_new_step()}>
+	<button on:click={() => add_new_step()} class=action_button>
 		<Plus fill=white style="height: 2rem; width: 2rem"></Plus>
 	</button>
 
@@ -281,18 +295,21 @@ dialog h2{
 <dialog id=edit_step_modal>
 	<h2>Schritt verändern</h2>
 	<div class=adder>
-	<input class=category type="text" bind:value={edit_step.name} placeholder="Unterkategorie (optional)">
+	<input class=category type="text" bind:value={edit_step.name} placeholder="Unterkategorie (optional)" on:keypress={(event) => do_on_key(event, 'Enter', false , edit_step_and_close_modal)}>
 	<div class=add_step>
-		<p id=step contenteditable bind:innerHTML={edit_step.step}></p>
+		<p id=step contenteditable bind:innerHTML={edit_step.step} on:keypress={(event) => do_on_key(event, 'Enter', true , edit_step_and_close_modal)}></p>
-	<button on:click="{() => edit_step_and_close_modal()}" >
+	<button class=action_button on:click="{() => edit_step_and_close_modal()}" >
 		<Check fill=white style="height: 2rem; width: 2rem"></Check>
 	</button>
 </div>
 </dialog>
 
 <dialog id=edit_subheading_steps_modal>
-	<input type="text" bind:value={edit_heading.name}>
+	<h2>Kategorie umbenennen</h2>
-	<button on:click={edit_subheading_steps_and_close_modal}>
+	<div class=heading_wrapper>
-	<Check></Check>
+		<input class="heading" type="text" bind:value={edit_heading.name} on:keypress={(event) => do_on_key(event, 'Enter', false, edit_subheading_steps_and_close_modal)}>
+		<button on:click={edit_subheading_steps_and_close_modal} class=action_button>
+		<Check fill=white style="height: 2rem; width: 2rem"></Check>
 		</button>
+	</div>
 </dialog>

src/lib/components/RecipeEditor.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	export let card_data ={
+	}
+	let short_name
+	let password
+	let datecreated = new Date()
+	let datemodified = datecreated
+
+	import CardAdd from '$lib/components/CardAdd.svelte';
+    	import MediaScroller from '$lib/components/MediaScroller.svelte';
+    	import Card from '$lib/components/Card.svelte';
+    	import Search from '$lib/components/Search.svelte';
+
+	export let season = []
+	import SeasonSelect from '$lib/components/SeasonSelect.svelte';
+
+	import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
+	export let ingredients = []
+
+	import CreateStepList from '$lib/components/CreateStepList.svelte';
+	export let instructions = []
+
+	async function doPost () {
+		const res = await fetch('/api/add', {
+			method: 'POST',
+			body: JSON.stringify({
+				recipe: {
+					season: season,
+					...card_data,
+					images: [{
+						mediapath: short_name + '.webp',
+						alt: "",
+						caption: ""
+					}],
+					short_name,
+					datecreated,
+					datemodified,
+					instructions,
+					ingredients,
+				},
+			headers: {
+       				'content-type': 'application/json',
+				bearer: password,
+     				}
+			})
+		})
+
+		const json = await res.json()
+		result = JSON.stringify(json)
+		console.log(result)
+	}
+</script>
+<style>
+input.temp{
+	all: unset;
+	display: block;
+	margin: 1rem auto;
+	padding: 0.2em 1em;
+	border-radius: 1000px;
+	background-color: var(--nord4);
+
+}
+</style>
+
+<CardAdd {card_data}></CardAdd>
+
+<input class=temp bind:value={short_name} placeholder="Kurzname"/>
+
+<SeasonSelect {season}></SeasonSelect>
+<button on:click={() => console.log(season)}>PRINTOUT season</button>
+
+<h2>Zutaten</h2>
+<CreateIngredientList {ingredients}></CreateIngredientList>
+<h2>Zubereitung</h2>
+<CreateStepList {instructions} ></CreateStepList>
+<input class=temp type="password" placeholder=Passwort bind:value={password}>

src/lib/components/Search.svelte

@@ -1,11 +1,10 @@
 <script>
-// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
+    import {onMount} from "svelte";
-document.addEventListener("DOMContentLoaded", () => {
+    import "$lib/css/nordtheme.css";
-	for (e of document.getElementsByClassName("js-only")) {
-		e.classList.remove("js-only");
-	}
 
-	const recipes = document.querySelectorAll(".card");
+
+onMount(() => {
+	const recipes = document.querySelectorAll(".search_me");
 	console.log("######", recipes)
 	const search = document.getElementById("search");
   	const clearSearch = document.getElementById("clear-search");
@@ -21,23 +20,10 @@ document.addEventListener("DOMContentLoaded", () => {
       			const searchString = `${recipe.textContent} ${recipe.dataset.tags}`.toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, "");
       			const isMatch = searchTerms.every(term => searchString.includes(term));
 
-      			recipe.hidden = !isMatch;
+      			recipe.style.display = (isMatch ? 'block' : 'none');
       			recipe.classList.toggle("matched-recipe", hasFilter && isMatch);
     		})
-
-		recipes.forEach(recipe => {
-			if(recipe.hidden == false){
-				recipe.parentElement.previousElementSibling.hidden = false;}
-			})
-		if(click_only_result){
-			let matched_recipes = document.querySelectorAll(".matched-recipe");
-			if(matched_recipes.length == 1 &&
-				matched_recipes[0].parentElement.previousElementSibling != noch_zu_probieren_header){
-				matched_recipes[0].lastElementChild.click();
 		}
-		}
-	}
-
 
 	search.addEventListener("input", () => {
 		do_search();
@@ -46,7 +32,7 @@ document.addEventListener("DOMContentLoaded", () => {
   	clearSearch.addEventListener("click", () => {
     		search.value = "";
     		recipes.forEach(recipe => {
-      			recipe.hidden = false;
+      			recipe.style.display = 'block';
       			recipe.classList.remove("matched-recipe");
     		})
   	})
@@ -61,45 +47,66 @@ document.addEventListener("DOMContentLoaded", () => {
 			do_search(click_only_result=true);
 		}
 	}
-})
+});
+
 // @license-end
 </script>
 <style>
 input#search {
   all: unset;
-  background: #222;
+  font-family: sans-serif;
+  background: var(--nord0);
   color: #fff;
-  padding: 0.7rem 1rem;
+  padding: 0.7rem 2rem;
-  border-radius: 5px;
+  border-radius: 1000px;
   width: 100%;
 }
+input::placeholder{
+  color: var(--nord6);
+}
 
 .search {
-  width: 400px;
+  width: 500px;
   max-width: 85vw;
   position: relative;
   margin: 2.5rem auto 1.2rem;
+  font-size: 1.6rem;
   display: flex;
   align-items: center;
+  transition: 100ms;
+  filter: drop-shadow(0.4em  0.5em 0.4em rgba(0,0,0,0.4))
 }
 
+.search:hover,
+.search:focus-within
+{
+	scale: 1.02 1.02;
+  	filter: drop-shadow(0.4em  0.5em 1em rgba(0,0,0,0.6))
+}
 button#clear-search {
   all: unset;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: absolute;
-  right: 6px;
+  right: 0.5em;
-  height: 30px;
+  width: 1.5em;
-  width: 30px;
+  height: 1.5em;
-  color: #888;
+  color: var(--nord6);
   cursor: pointer;
   transition: color 180ms ease-in-out;
 }
 button#clear-search:hover {
-  color: #eee;
+  color: white;
+  scale: 1.1 1.1;
+}
+button#clear-search:active{
+transition: 50ms;
+scale: 0.8 0.8;
 }
 </style>
 <div class="search js-only">
   <input type="text" id="search" placeholder="Suche nach Stichwörtern...">
   <button id="clear-search">
-	  <svg  xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Sucheintrag löschen</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg>
+	  <svg  xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Sucheintrag löschen</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg></button>
-  </button>
 </div>

src/lib/components/SeasonLayout.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
     import '$lib/components/nordtheme.css';
     import Recipes from '$lib/components/Recipes.svelte';
+    import Search from './Search.svelte';
     let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
     let month : number;
 </script>
+
 <style>
 a.month{
 	text-decoration: unset;
+	font-family: sans-serif;
 	border-radius: 1000px;
 	background-color: var(--blue);
 	color: var(--nord5);
@@ -36,7 +39,9 @@ a.month:hover{
 	<a class=month href="/rezepte/season/{i+1}">{month}</a>
 {/each}
 </div>
-
+<section>
+<Search></Search>
+</section>
 <section>
 <slot name=recipes></slot>
 </section>

src/lib/components/SeasonSelect.svelte

@@ -0,0 +1,80 @@
+<script lang=ts>
+import "$lib/components/nordtheme.css"
+import {onMount} from "svelte";
+let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
+
+export let season : Number[]
+
+export function set_season(){
+	let temp = []
+	const el = document.getElementById("labels");
+	for(var i = 0; i < el.children.length; i++){
+		if(el.children[i].children[0].children[0].checked){
+			temp.push(i+1)
+		}
+	}
+	season = temp
+}
+
+function write_season(season){
+	const el = document.getElementById("labels");
+	for(var i = 0; i < season.length; i++){
+		el.children[i].children[0].children[0].checked = true
+	}
+}
+
+onMount(() => {
+	write_season(season)
+});
+
+</script>
+<style>
+label{
+	background-color: var(--nord0);
+	color: white;
+	padding: 0.25em 1em;
+	border-radius: 1000px;
+	cursor: pointer;
+	position: relative;
+	transition: 100ms;
+}
+
+.checkbox_container{
+	transition: 100ms;
+}
+.checkbox_container:hover{
+	transform: scale(1.1,1.1);
+}
+label:hover{
+	background-color: var(--lightblue);
+}
+
+label:has(input:checked){
+	background-color: var(--blue);
+}
+input[type=checkbox],
+input[type=checkbox]::before,
+input[type=checkbox]::after
+{
+	all: unset;
+}
+
+#labels{
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+	justify-content: center;
+	gap: min(1rem, 1dvh);
+}
+</style>
+
+<div id=labels>
+{#each months as month}
+	<div class=checkbox_container>
+		<label><input type="checkbox" name="checkbox" value="value" on:click={set_season}>{month}</label>
+	</div>
+{/each}
+</div>
+
+
+<button on:click={() => console.log("season", season)}> PRINT SEASON FROM SEASON_SELECT</button>

src/lib/components/do_on_key.js

@@ -0,0 +1,8 @@
+export function do_on_key(event, key, needsctrl, fn){
+	if(event.key == key){
+		if(needsctrl && !event.ctrlKey){
+			return
+		}
+		fn()
+	}
+}

src/lib/css/action_button.css

@@ -0,0 +1,56 @@
+.action_button{
+	all: unset;
+	cursor: pointer;
+	background-color: var(--red);
+	transition: 200ms;
+	box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
+	padding: 1rem;
+	border-radius: 1000px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.action_button:hover,
+.action_button:focus
+{
+	background-color: var(--nord0);
+	transform: scale(1.2,1.2);
+	box-shadow: 0 0 1em 0.4em rgba(0,0,0,0.3);
+	animation: shake 0.5s ease forwards;
+}
+
+.action_button:active{
+	transition: 50ms;
+	scale: 0.8 0.8;
+	rotate: 30deg;
+}
+
+
+@keyframes shake{
+    0%{
+      transform: rotate(0)
+		scale(1,1);
+    }
+    25%{
+    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+      	transform: rotate(15deg)
+      		scale(1.2,1.2)
+      ;
+    }
+    50%{
+
+    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+      	transform: rotate(-15deg)
+      		scale(1.2,1.2);
+    }
+    74%{
+
+    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+  	transform: rotate(15deg)
+  		scale(1.2, 1.2);
+	}
+	100%{
+      transform: rotate(0)
+  		scale(1.2, 1.2);
+    }
+  }

src/lib/css/nordtheme.css

@@ -0,0 +1,25 @@
+:root{
+	--nord0: #2E3440;
+	--nord1: #3B4252;
+	--nord2: #434C5E;
+	--nord3: #4C566A;
+	--nord4: #D8DEE9;
+	--nord5: #E5E9F0;
+	--nord6: #ECEFF4;
+	--nord7: #8FBCBB;
+	--nord8: #88C0D0;
+	--nord9: #81A1C1;
+	--nord10: #5E81AC;
+	--nord11: #BF616A;
+	--nord12: #D08770;
+	--nord13: #EBCB8B;
+	--nord14: #A3BE8C;
+	--nord15: #B48EAD;
+	--lightblue: var(--nord9);
+	--blue: var(--nord10);
+	--red: var(--nord11);
+	--orange: var(--nord12);
+	--yellow: var(--nord13);
+	--green: var(--nord14);
+	--purple: var(--nord15);
+}

src/models/Recipe.ts

@@ -2,7 +2,7 @@ import mongoose from 'mongoose';
 
 const RecipeSchema = new mongoose.Schema(
   {
-    short_name: {type: String, required: true},
+    short_name: {type: String, required: true, unique: true},
     name : {type: String, required: true,},
     category : {type: String, required: true,},
     icon: {type: String, required: true},

src/routes/api/add/+server.ts

@@ -12,12 +12,14 @@ export const POST: RequestHandler = async ({request}) => {
   console.log("RECIPE:", recipe_json)
   console.log("BEARER:", bearer_token)
   if(bearer_token === BEARER_TOKEN){
+	console.log("PASSWORD CORRECT")
   	await dbConnect();
 	await Recipe.create(recipe_json);
   	await dbDisconnect();
-	return {status: 400}
+	return {status: 400} //TODO: cleanup error throwing
   }
   else{
+	console.log("PASSWORD INCORRECT")
 	  return {status: 403}
   }
 };

src/routes/api/edit/+server.ts

@@ -0,0 +1,25 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { Recipe } from '../../../models/Recipe';
+import { dbConnect, dbDisconnect } from '../../../utils/db';
+import type {RecipeModelType} from '../../../types/types';
+import { BEARER_TOKEN } from '$env/static/private'
+// header: use for bearer token for now
+// recipe json in body
+export const POST: RequestHandler = async ({request}) => {
+	console.log("AT EDIT API")
+  let message = await request.json()
+  const recipe_json = message.recipe
+  const bearer_token = message.headers.bearer
+  console.log("RECIPE:", recipe_json)
+  console.log("BEARER:", bearer_token)
+  if(bearer_token === BEARER_TOKEN){
+  	await dbConnect();
+	await Recipe.findOneAndUpdate({short_name: message.old_short_name }, recipe_json);
+  	await dbDisconnect();
+	return {status: 400} //TODO: cleanup error throwing
+  }
+  else{
+	console.log("PASSWORD INCORRECT")
+	  return {status: 403}
+  }
+};

src/routes/rezepte/+page.svelte

@@ -8,30 +8,17 @@
     export let data: PageData;
     export let current_month = new Date().getMonth() + 1
 </script>
-<style>
+
-.accordion{
-	display:flex;
-	background-color: #111111;
-	flex-direction: row;
-	margin-inline: auto;
-	padding-inline: 1rem;
-	padding-block: 3rem;
-	margin-block: 3rem;
-	align-items:center;
-	justify-content: center;
-	gap: 1rem;
-}
-</style>
 <h1>Rezepte</h1>
 <h2>In Saison</h2>
 <section>
 <MediaScroller>
 {#each data.season as recipe}
-	<Card {recipe} {current_month}></Card>
+	<Card {recipe} {current_month} search=""></Card>
 {/each}
 </MediaScroller>
 </section>
-<!--<Search></Search>-->
+<Search></Search>
 <h2>Alle Rezepte</h2>
 <Recipes>
 	{#each data.all_brief as recipe}

src/routes/rezepte/add/+page.svelte

@@ -1,41 +1,43 @@
 <script lang="ts">
-    	let name
+	export let card_data ={
+	}
 	let short_name
-	let category
+	let password
-	let icon
-	let description
 	let datecreated = new Date()
 	let datemodified = datecreated
-	let tags
 
-    	import type { PageData } from './$types';
 	import CardAdd from '$lib/components/CardAdd.svelte';
-    	import MediaScroller from '$lib/components/MediaScroller.svelte';
+
-    	import Card from '$lib/components/Card.svelte';
+	import SeasonSelect from '$lib/components/SeasonSelect.svelte';
-    	import Search from '$lib/components/Search.svelte';
+	export let season = []
+
 	import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
+	export let ingredients = []
+
 	import CreateStepList from '$lib/components/CreateStepList.svelte';
-    	export let data: PageData;
+	export let instructions = []
-    	export let current_month = new Date().getMonth() + 1
+
 	async function doPost () {
 		const res = await fetch('/api/add', {
 			method: 'POST',
 			body: JSON.stringify({
-				bearer: "password1234",
 				recipe: {
+					season: get_season(),
+					...card_data,
+					images: [{
+						mediapath: short_name + '.webp',
+						alt: "",
+						caption: ""
+					}],
 					short_name,
-					name,
-					category,
 					datecreated,
 					datemodified,
-					tags,
+					instructions,
-					description,
+					ingredients,
-					icon
-
 				},
 			headers: {
        				'content-type': 'application/json',
-				bearer: "password1234",
+				bearer: password,
      				}
 			})
 		})
@@ -44,68 +46,31 @@
 		result = JSON.stringify(json)
 		console.log(result)
 	}
-
-
 </script>
 
 <style>
-input{
+input.temp{
 	all: unset;
 	display: block;
-	margin: 1rem;
+	margin: 1rem auto;
 	padding: 0.2em 1em;
 	border-radius: 1000px;
 	background-color: var(--nord4);
 
 }
-.ingredient{
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-wrap: wrap;
-}
-.ingredient > input{
-	display: inline;
-	margin-inline: 0.25em;
-}
-.ingredient>#unit{
-	max-width: 40px;
-}
-.ingredient>#amount{
-	max-width: 100px;
-}
-.ingredient button{
-	all: unset;
-	background-color: var(--red);
-	padding: 0.3em;
-	height: 100%;
-	border-radius: 1000px;
-	display:flex;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
-	transition: 100ms;
-}
-.ingredient button svg{
-	fill: white;
-	width: 1.5rem;
-	height: 1.5rem;
-}
-.ingredient button:hover{
-	background-color: var(--orange);
-	transform: scale(1.1, 1.1);
-}
-.ingredient button:hover svg{
-	transform: scale(1.1, 1.1);
-}
-
 </style>
 <h1>Rezept hinzufügen</h1>
 
-<CardAdd></CardAdd>
+<CardAdd {card_data}></CardAdd>
+
+<input class=temp bind:value={short_name} placeholder="Kurzname"/>
+
+<SeasonSelect {season}></SeasonSelect>
+
 
-<input bind:value={short_name} placeholder="Kurzname"/>
 <h2>Zutaten</h2>
-<CreateIngredientList></CreateIngredientList>
+<CreateIngredientList {ingredients}></CreateIngredientList>
 <h2>Zubereitung</h2>
-<CreateStepList></CreateStepList>
+<CreateStepList {instructions} ></CreateStepList>
+<input class=temp type="password" placeholder=Passwort bind:value={password}>
+<button on:click={doPost}>ADD RECIPE</button>

src/routes/rezepte/category/[category]/+page.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
     import type { PageData } from './$types';
     import Recipes from '$lib/components/Recipes.svelte';
+    import Search from '$lib/components/Search.svelte';
     export let data: PageData;
     export let current_month = new Date().getMonth() + 1;
     import Card from '$lib/components/Card.svelte'
 </script>
 <h1>Rezepte</h1>
 <h2>In Kategorie {data.category}</h2>
+<Search></Search>
 <section>
 <Recipes>
 	{#each data.recipes as recipe}

src/routes/rezepte/edit/.jukit/.jukit_info.json

@@ -0,0 +1 @@
+{"terminal": "nvimterm"}

src/routes/rezepte/edit/[name]/+page.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+    	export let data: PageData;
+	let old_short_name = data.recipe.short_name
+
+	export let card_data ={
+		icon: data.recipe.icon,
+		category: data.recipe.category,
+		name: data.recipe.name,
+		description: data.recipe.description,
+		tags: data.recipe.tags,
+	}
+	let images = data.recipe.images
+	let season = data.recipe.season
+
+	let short_name = data.recipe.short_name
+	let password
+	let datecreated = data.recipe.datecreated
+	let datemodified = new Date()
+
+    	import type { PageData } from './$types';
+	import CardAdd from '$lib/components/CardAdd.svelte';
+    	import MediaScroller from '$lib/components/MediaScroller.svelte';
+    	import Card from '$lib/components/Card.svelte';
+    	import Search from '$lib/components/Search.svelte';
+
+	import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
+	export let ingredients = data.recipe.ingredients
+
+	import CreateStepList from '$lib/components/CreateStepList.svelte';
+	export let instructions = data.recipe.instructions
+
+	function get_season(){
+		let season = []
+		const el = document.getElementById("labels");
+		for(var i = 0; i < el.children.length; i++){
+			if(el.children[i].children[0].children[0].checked){
+				season.push(i+1)
+			}
+		}
+		return season
+	}
+	function write_season(season){
+		const el = document.getElementById("labels");
+		for(var i = 0; i < season.length; i++){
+			el.children[i].children[0].children[0].checked = true
+		}
+	}
+
+	async function doPost () {
+		const res = await fetch('/api/edit', {
+			method: 'POST',
+			body: JSON.stringify({
+				recipe: {
+					...card_data,
+					images, // TODO
+					season: get_season(),
+					short_name,
+					datecreated,
+					datemodified,
+					instructions,
+					ingredients,
+				},
+				old_short_name,
+			headers: {
+       				'content-type': 'application/json',
+				bearer: password,
+     				}
+			})
+		})
+
+		const json = await res.json()
+		result = JSON.stringify(json)
+		console.log(result)
+	}
+
+
+</script>
+
+<style>
+input{
+	all: unset;
+	display: block;
+	margin: 1rem auto;
+	padding: 0.2em 1em;
+	border-radius: 1000px;
+	background-color: var(--nord4);
+
+}
+</style>
+<h1>Rezept hinzufügen</h1>
+
+<CardAdd {card_data}></CardAdd>
+<button on:click={console.log(JSON.stringify(ingredients, null, 4))}>Printout Ingredients</button>
+<button on:click={console.log(JSON.stringify(instructions, null, 4))}>Printout Instructions</button>
+<button on:click={console.log(JSON.stringify(card_data, null, 4))}>Prinout Card Data</button>
+<input bind:value={short_name} placeholder="Kurzname"/>
+<h2>Zutaten</h2>
+<CreateIngredientList {ingredients}></CreateIngredientList>
+<h2>Zubereitung</h2>
+<CreateStepList {instructions} ></CreateStepList>
+<input type="password" placeholder=Passwort bind:value={password}>
+<button on:click={doPost}>EDIT RECIPE</button>

src/routes/rezepte/edit/[name]/+page.ts

@@ -0,0 +1,8 @@
+import type { PageLoad } from "./$types";
+
+export async function load({ fetch, params}) {
+    let current_month = new Date().getMonth() + 1
+    const res = await fetch(`/api/items/${params.name}`);
+    const recipe = await res.json();
+    return {recipe};
+};

src/routes/rezepte/edit/[name]/.jukit/.jukit_info.json

@@ -0,0 +1 @@
+{"terminal": "nvimterm"}

src/routes/rezepte/season/+page.svelte

@@ -11,9 +11,7 @@
 </script>
 
 <SeasonLayout>
-
 <h2 slot=test>Rezepte des Monats </h2>
-
 <Recipes slot=recipes>
 	{#each data.season as recipe}
 		<Card {recipe} {current_month}></Card>

src/routes/rezepte/tag/[tag]/+page.svelte

@@ -4,9 +4,11 @@
     export let data: PageData;
     export let current_month = new Date().getMonth() + 1;
     import Card from '$lib/components/Card.svelte'
+    import Search from '$lib/components/Search.svelte';
 </script>
 <h1>Rezepte</h1>
 <h2>In Tag {data.tag}</h2>
+<Search></Search>
 <section>
 <Recipes>
 	{#each data.recipes as recipe}