From b86f7f6ea0392751c886b302c079c667a2af5998 Mon Sep 17 00:00:00 2001 From: bronku Date: Sun, 8 Nov 2026 15:40:41 +0100 Subject: [PATCH] rudimentary form --- css/swieta.css | 73 ++++++++++++++++++++++++++++++++++++++++++++++- data/swieta.go | 20 ++++++------- html/layout.templ | 1 + html/swieta.templ | 34 ++++++++++++++-------- js/order.js | 14 +++++++++ main.go | 1 + types/product.go | 1 + 7 files changed, 121 insertions(+), 23 deletions(-) create mode 100644 js/order.js diff --git a/css/swieta.css b/css/swieta.css index 4e9ef42..d0bf781 100644 --- a/css/swieta.css +++ b/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); + } + } +} diff --git a/data/swieta.go b/data/swieta.go index 6aa79aa..1a47165 100644 --- a/data/swieta.go +++ b/data/swieta.go @@ -3,14 +3,14 @@ package data import "piekarnikgosipl/types" var Swieta = []types.Product{ - {Name: "Malinowa Chmurka", Image: "", Price: "150", Description: ""}, - {Name: "Makosernik", Image: "", Price: "150", Description: ""}, - {Name: "Rolada Makowa", Image: "", Price: "100", Description: ""}, - {Name: "Wieniec Bezowy", Image: "", Price: "150", Description: "⌀ 25cm"}, - {Name: "Torcik Piernikowy z kremem Cynamonowym", Image: "", Price: "120", Description: "⌀ 18cm"}, - {Name: "Sernik Ulubiony", Image: "", Price: "75", Description: "⌀ 21cm"}, - {Name: "Sernik Lotus", Image: "", Price: "100", Description: "⌀ 22cm"}, - {Name: "Sernik Mango-Jogurt", Image: "", Price: "120", Description: "⌀ 22cm"}, - {Name: "Mini Pavlova", Image: "", Price: "12", Description: ""}, - {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: "Malinowa Chmurka", Image: "", Price: "150", Description: "", Id: "001"}, + {Name: "Makosernik", Image: "", Price: "150", Description: "", Id: "002"}, + {Name: "Rolada Makowa", Image: "", Price: "100", Description: "", Id: "003"}, + {Name: "Wieniec Bezowy", Image: "", Price: "150", Description: "⌀ 25cm", Id: "004"}, + {Name: "Torcik Piernikowy z kremem Cynamonowym", Image: "", Price: "120", Description: "⌀ 18cm", Id: "005"}, + {Name: "Sernik Ulubiony", Image: "", Price: "75", Description: "⌀ 21cm", Id: "006"}, + {Name: "Sernik Lotus", Image: "", Price: "100", Description: "⌀ 22cm", Id: "007"}, + {Name: "Sernik Mango-Jogurt", Image: "", Price: "120", Description: "⌀ 22cm", Id: "008"}, + {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", Id: "010"}, } diff --git a/html/layout.templ b/html/layout.templ index 63cde69..29c93eb 100644 --- a/html/layout.templ +++ b/html/layout.templ @@ -16,6 +16,7 @@ templ layout(activePage string) { + Przejdź do treści diff --git a/html/swieta.templ b/html/swieta.templ index 7fec6cc..cb577be 100644 --- a/html/swieta.templ +++ b/html/swieta.templ @@ -2,18 +2,14 @@ package html import "piekarnikgosipl/types" -// templ card-swieta(product types.Product) { -//
-//
-// @AvifImage("wyroby/"+product.Image+".avif", product.Name, true) -//
-//
-//

{ product.Name }

-// { product.Price }zł -//

{ product.Description }

-//
-//
-// } +templ product_form(product types.Product) { +
+ {product.Name} · {product.Price} zł + + + +
+} templ Swieta(products []types.Product) {
@@ -47,5 +43,19 @@ templ Swieta(products []types.Product) {

Zamówienia można złożyć telefonicznie 690 214 515
lub osobiście w kawiarnii

+
+

Złóż zamówienie

+

Odbiór wszystkich zamówień: 24 grudnia. Zamówienia przyjmujemy do 25 grudnia. Potwierdzimy zamówienie telefonicznie.

+
+
+ for _, product := range products { + @product_form(product) + } +
+ + + +
+
} diff --git a/js/order.js b/js/order.js new file mode 100644 index 0000000..69a2aee --- /dev/null +++ b/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) +} diff --git a/main.go b/main.go index 85bd8df..d1659f4 100644 --- a/main.go +++ b/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") diff --git a/types/product.go b/types/product.go index abb7d20..4e7edf4 100644 --- a/types/product.go +++ b/types/product.go @@ -5,4 +5,5 @@ type Product struct { Image string Price string Description string + Id string }