rudimentary form

css/swieta.css

@@ -1,6 +1,8 @@
 :root {
     --swieta-green: oklch(40% .08 155);
     --swieta-gold: oklch(75% .12 80);
+    --swieta-red: oklch(45% .15 25);
+    --border-color: color-mix(in oklab, var(--swieta-green) 25%, transparent);
 }
 
 #swieta {
@@ -71,7 +73,7 @@
                 }
 
                 &:not(:last-child) {
-                    border-bottom: 1px solid var(--on-surface);
+                    border-bottom: 1px solid var(--border-color);
                 }
             }
         }
@@ -138,3 +140,72 @@
         }
     }
 }
+
+
+#order-form {
+    border-radius: var(--border-radius);
+    background-color: var(--secondary-container);
+    & > p, & > h2{
+        text-align: center;
+    }
+
+    & > form {
+
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto auto auto;
+        & > fieldset {
+            grid-column: -1 / 1;
+            & > div {
+                display: grid;
+                grid-template-columns: 1fr auto auto auto;
+
+                & > span > span{
+                    color: var(--swieta-red);
+                }
+                & > input {
+                    background-color: transparent;
+                    border: none;
+                    text-align: center;
+                    width: 2rem;
+                    appearance: textfield;
+                    -moz-appearance: textfield;
+                    &::-webkit-inner-spin-button,
+                    &::-webkit-outer-spin-button {
+                        -webkit-appearance: none;
+                        margin: 0;
+                    }
+                }
+                & > button {
+                    display: grid;
+                    place-items: center;
+                    margin: 0.5rem;
+                    width: 2rem;
+                    height: 2rem;
+                    padding: 0.5rem;
+                    border-radius: var(--border-radius);
+                    border: none;
+                    font-family: monospace;
+                }
+
+            }
+        }
+        & > input, & > fieldset {
+            background-color: var(--surface);
+        }
+        & input:focus{
+            outline: none;
+        }
+        & > * {
+            padding: 1rem;
+            border-radius: var(--small-radius);
+            border: 1px solid var(--border-color);
+        }
+        & > button {
+            grid-column: -1 / 1;
+            background-color: var(--swieta-red);
+            color: var(--surface);
+        }
+    }
+}

data/swieta.go

@@ -3,14 +3,14 @@ package data
 import "piekarnikgosipl/types"
 
 var Swieta = []types.Product{
-	{Name: "Malinowa Chmurka", Image: "", Price: "150", Description: ""},
+	{Name: "Malinowa Chmurka", Image: "", Price: "150", Description: "", Id: "001"},
-	{Name: "Makosernik", Image: "", Price: "150", Description: ""},
+	{Name: "Makosernik", Image: "", Price: "150", Description: "", Id: "002"},
-	{Name: "Rolada Makowa", Image: "", Price: "100", Description: ""},
+	{Name: "Rolada Makowa", Image: "", Price: "100", Description: "", Id: "003"},
-	{Name: "Wieniec Bezowy", Image: "", Price: "150", Description: "⌀ 25cm"},
+	{Name: "Wieniec Bezowy", Image: "", Price: "150", Description: "⌀ 25cm", Id: "004"},
-	{Name: "Torcik Piernikowy z kremem Cynamonowym", Image: "", Price: "120", Description: "⌀ 18cm"},
+	{Name: "Torcik Piernikowy z kremem Cynamonowym", Image: "", Price: "120", Description: "⌀ 18cm", Id: "005"},
-	{Name: "Sernik Ulubiony", Image: "", Price: "75", Description: "⌀ 21cm"},
+	{Name: "Sernik Ulubiony", Image: "", Price: "75", Description: "⌀ 21cm", Id: "006"},
-	{Name: "Sernik Lotus", Image: "", Price: "100", Description: "⌀ 22cm"},
+	{Name: "Sernik Lotus", Image: "", Price: "100", Description: "⌀ 22cm", Id: "007"},
-	{Name: "Sernik Mango-Jogurt", Image: "", Price: "120", Description: "⌀ 22cm"},
+	{Name: "Sernik Mango-Jogurt", Image: "", Price: "120", Description: "⌀ 22cm", Id: "008"},
-	{Name: "Mini Pavlova", Image: "", Price: "12", Description: ""},
+	{Name: "Mini Pavlova", Image: "", Price: "12", Description: "", Id: "009"},
-	{Name: "Box Świąteczny", Image: "", Price: "150", Description: "¼ Sernik Cynamonowy\n¼ Sernik Nowojorski\n¼ Kostka Piernikowa z kremem Malaga i Powidłami\n¼ Kostka Świętego Mikołaja"},
+	{Name: "Box Świąteczny", Image: "", Price: "150", Description: "¼ Sernik Cynamonowy\n¼ Sernik Nowojorski\n¼ Kostka Piernikowa z kremem Malaga i Powidłami\n¼ Kostka Świętego Mikołaja", Id: "010"},
 }

html/layout.templ

@@ -16,6 +16,7 @@ templ layout(activePage string) {
 			<script src="/htmx.min.js"></script>
 			<script src="/preload.js"></script>
 			<script defer src="/album.js"></script>
+			<script defer src="/order.js"></script>
 		</head>
 		<body hx-boost="true" hx-ext="preload" preload="mouseover">
 			<a href="#" onclick="document.querySelector('main').focus();return false" class="sr-only">Przejdź do treści</a>

html/swieta.templ

@@ -2,18 +2,14 @@ package html
 
 import "piekarnikgosipl/types"
 
-// templ card-swieta(product types.Product) {
+templ product_form(product types.Product) {
-// 	<div class="card">
+	<div>
-// 		<div>
+		<span>{product.Name} <span> · {product.Price} zł</span></span>
-// 			@AvifImage("wyroby/"+product.Image+".avif", product.Name, true)
+		<button type="button" onClick={templ.JSFuncCall("decrease", product.Id)}> - </button>
-// 		</div>
+		<input id={product.Id} value="0" type="number" min="0" max="100"/>
-// 		<div>
+		<button type="button" onClick={templ.JSFuncCall("increase", product.Id)}> + </button>
-// 			<h3>{ product.Name }</h3>
+	</div>
-// 			<span>{ product.Price }zł</span>
+}
-// 			<p>{ product.Description }</p>
-// 		</div>
-// 	</div>
-// }
 
 templ Swieta(products []types.Product) {
 	<main tabindex="-1" id="swieta">
@@ -47,5 +43,19 @@ templ Swieta(products []types.Product) {
 				<p>Zamówienia można złożyć telefonicznie <a href="tel:+48690214515">690 214 515</a><br>lub osobiście w kawiarnii</p>
 			</div>
 		</section>
+		<section id="order-form">
+			<h2>Złóż zamówienie</h2>
+			<p>Odbiór wszystkich zamówień: <b>24 grudnia</b>. Zamówienia przyjmujemy do <b>25 grudnia</b>. Potwierdzimy zamówienie telefonicznie.</p>
+			<form>
+				<fieldset>
+					for _, product := range products {
+						@product_form(product)
+					}
+				</fieldset>
+				<input type="text" placeholder="Imie i Nazwisko"/>
+				<input type="tel" placeholder="Numer Telefonu"/>
+				<button type="submit">Wyślij zamówienie</button>
+			</form>
+		</section>
 	</main>
 }

js/order.js

@@ -0,0 +1,14 @@
+function min(a, b) {
+  if (a > b) {
+    return a
+  }
+  return b
+}
+function increase(id) {
+  input = document.getElementById(id)
+  input.value= min(parseInt(input.value)+1, 0)
+}
+function decrease(id) {
+  input = document.getElementById(id)
+  input.value= min(parseInt(input.value)-1, 0)
+}

main.go

@@ -198,6 +198,7 @@ func main() {
 	mustCopy("fonts/plus-jakarta-sans-latin-ext.woff2", "www/fonts/plus-jakarta-sans-latin-ext.woff2")
 	mustCopy("img/logo.svg", "www/images/logo.svg")
 	mustCopy("js/album.js", "www/album.js")
+	mustCopy("js/order.js", "www/order.js")
 	minifyFile("www/album.js", "application/javascript")
 	mustCopy("js/htmx.min.js", "www/htmx.min.js")
 	mustCopy("js/preload.js", "www/preload.js")

types/product.go

@@ -5,4 +5,5 @@ type Product struct {
 	Image       string
 	Price       string
 	Description string
+	Id          string
 }