rudimentary form
This commit is contained in:
bronku
parent
eab2134685
commit
b86f7f6ea0
7 changed files with 121 additions and 23 deletions
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,14 @@ package html
|
|||
|
||||
import "piekarnikgosipl/types"
|
||||
|
||||
// templ card-swieta(product types.Product) {
|
||||
// <div class="card">
|
||||
// <div>
|
||||
// @AvifImage("wyroby/"+product.Image+".avif", product.Name, true)
|
||||
// </div>
|
||||
// <div>
|
||||
// <h3>{ product.Name }</h3>
|
||||
// <span>{ product.Price }zł</span>
|
||||
// <p>{ product.Description }</p>
|
||||
// </div>
|
||||
// </div>
|
||||
// }
|
||||
templ product_form(product types.Product) {
|
||||
<div>
|
||||
<span>{product.Name} <span> · {product.Price} zł</span></span>
|
||||
<button type="button" onClick={templ.JSFuncCall("decrease", product.Id)}> - </button>
|
||||
<input id={product.Id} value="0" type="number" min="0" max="100"/>
|
||||
<button type="button" onClick={templ.JSFuncCall("increase", product.Id)}> + </button>
|
||||
</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>
|
||||
}
|
||||
|
|
|
|||
14
js/order.js
Normal file
14
js/order.js
Normal file
|
|
@ -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)
|
||||
}
|
||||
1
main.go
1
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")
|
||||
|
|
|
|||
|
|
@ -5,4 +5,5 @@ type Product struct {
|
|||
Image string
|
||||
Price string
|
||||
Description string
|
||||
Id string
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue