Merge branch 'main' of https://github.com/WebmasterCamp/ywc19-hackath…

…on-e
WebmasterCamp · Jul 16, 2023 · 35a2091 · 35a2091
2 parents 075bd98 + 53a2a76
commit 35a2091
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 25 deletions.
diff --git a/src/app.html b/src/app.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width" />
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500&display=swap"
+		rel="stylesheet">
+	%sveltekit.head%
+</head>
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+</html>
diff --git a/src/lib/components/ItemBoxEdit.svelte b/src/lib/components/ItemBoxEdit.svelte
@@ -21,6 +21,9 @@
     />
     <div class="flex flex-col pl-4">
       <h1 class="text-black text-base font-normal">{name}</h1>
+      <div class="text-black text-xs font-normal">
+        Expired in {exp} days
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/lib/components/ItemMenu.svelte b/src/lib/components/ItemMenu.svelte
@@ -7,7 +7,7 @@
     imgID = "/Image.svg";
 </script>
 
-<div class="w-full justify-start items-center my-1 inline-flex flex items-center">
+<div class="w-full justify-start my-1 flex items-center">
   <div class="w-full h-16 flex">
     <img
       src={imgID}
@@ -16,11 +16,13 @@
       class="relative flex-col justify-start items-start flex w-16 h-16"
     />
     <div class="flex flex-col pl-4">
-      <h1 class="text-black text-base font-normal">{name}</h1>
-      <div class="text-black text-xs font-normal">
+      <h1 class="text-black text-base font-semibold">{name}</h1>
+      <div class="text-black text-xs font-normal flex">
+        <Icon icon="fluent:food-carrot-20-filled" />
         Expired in {ingredient} days
       </div>
-      <div class="text-neutral-600 text-xs font-normal">
+      <div class="text-neutral-600 text-xs font-normal flex">
+        <Icon icon="mdi:clock" />
         Amount : {timeCook} unit
       </div>
     </div>

diff --git a/src/routes/fridge/+page.svelte b/src/routes/fridge/+page.svelte
@@ -135,18 +135,17 @@
   class="rounded-t-2xl p-4 shadow-top"
 >
   <div class="flex-col h-1/2">
-    <h1>Prepare Ingredients (3)</h1>
+    <h1 class="font-bold">Prepare Ingredients (3)</h1>
     {#each $ingredients as item}
       <ItemBoxEdit
         isWantCheck={false}
         name={item.name}
         exp={item.exp}
-        amount={item.amount}
         image={item.imgID}
       />
     {/each}
   </div>
-  <button class="w-full bg-black text-white my-1 py-2 rounded-lg">
+  <button class="w-full bg-main text-white my-1 py-2 rounded-lg">
     <a href="/menulist">Let's Cook</a>
   </button>
 </Drawer>
diff --git a/src/routes/menulist/+page.svelte b/src/routes/menulist/+page.svelte
@@ -2,6 +2,7 @@
   import Icon from "@iconify/svelte";
   import type { PageData } from "./$types";
   import { ingredients } from "$lib/store/ingredient";
+  import ItemMenu from "$lib/components/ItemMenu.svelte";
 
   $ingredients = []
 
@@ -13,13 +14,24 @@
     <a href="/fridge">
       <Icon icon="ic:round-arrow-back-ios" />
     </a>
-    <h1>Cook Book</h1>
+    <h1 class="font-[500] text-[24px] text-main">Cook Book</h1>
+
   </div>
-  <div class="menu" />
-  <div class="flex flex-col">
-    <div class="item" />
-    <div class="item" />
-    <div class="item" />
-    <div class="item" />
+  <div class="flex space-x-3 p-4 ">
+    <button class="w-[10%] bg-main rounded-sm">All</button>
+    <button class="w-[30%] text-end pr-2 rounded-sm bg-drop">Meat</button>
+    <button class="w-[40%] text-end pr-2 rounded-sm bg-drop">Vegetable</button>
+    <button class="w-[30%] text-end pr-2 rounded-sm bg-drop">Dairy</button>
+  </div>
+  <div class="flex flex-col px-4">
+    <ItemMenu imgID='./image/menu/menu0.png'/>
+    <ItemMenu imgID='./image/menu/menu1.png'/>
+    <ItemMenu imgID='./image/menu/menu2.png'/>
+    <ItemMenu imgID='./image/menu/menu3.png'/>
+    <ItemMenu imgID='./image/menu/menu4.png'/>
+    <ItemMenu imgID='./image/menu/menu5.png'/>
+    <ItemMenu imgID='./image/menu/menu6.png'/>
+    <ItemMenu imgID='./image/menu/menu7.png'/>
+    <ItemMenu imgID='./image/menu/menu8.png'/>
   </div>
 </div>
diff --git a/static/image/menu/menu0.png b/static/image/menu/menu0.png
diff --git a/static/image/menu/menu1.png b/static/image/menu/menu1.png
diff --git a/static/image/menu/menu2.png b/static/image/menu/menu2.png
diff --git a/static/image/menu/menu3.png b/static/image/menu/menu3.png
diff --git a/static/image/menu/menu4.png b/static/image/menu/menu4.png
diff --git a/static/image/menu/menu5.png b/static/image/menu/menu5.png
diff --git a/static/image/menu/menu6.png b/static/image/menu/menu6.png
diff --git a/static/image/menu/menu7.png b/static/image/menu/menu7.png
diff --git a/static/image/menu/menu8.png b/static/image/menu/menu8.png