From 7c756e87c1934fd6ffa285b29bcff90b63076b62 Mon Sep 17 00:00:00 2001 From: bronku Date: Wed, 10 Jun 2026 20:42:06 +0200 Subject: [PATCH] style rewrite --- auth/templates/login.html | 48 +- server/get.go | 1 + server/static/style.css | 818 ++++++++++++++++++-------- server/templates/cake.gohtml | 44 +- server/templates/cakes.gohtml | 50 +- server/templates/layout/layout.gohtml | 3 + server/templates/order.gohtml | 130 ++-- server/templates/orders.gohtml | 19 +- 8 files changed, 737 insertions(+), 376 deletions(-) diff --git a/auth/templates/login.html b/auth/templates/login.html index b92c576..ed7fca8 100644 --- a/auth/templates/login.html +++ b/auth/templates/login.html @@ -1,16 +1,32 @@ -
-

Login

-
-
-
- - - - - -
-
+ + + + + Login + + + + + + + + +
+ +

Zaloguj si臋

+
+ + + +
+
+ + diff --git a/server/get.go b/server/get.go index 8e6f60c..ff3d3f3 100644 --- a/server/get.go +++ b/server/get.go @@ -86,6 +86,7 @@ func (h *Server) order(r *http.Request) (any, int, error) { url := strings.Split(r.URL.String(), "/") if len(url) < 3 || url[2] == "" { + data.Order.Date = time.Now() return data, http.StatusOK, nil } diff --git a/server/static/style.css b/server/static/style.css index be820bc..87ef09f 100644 --- a/server/static/style.css +++ b/server/static/style.css @@ -1,368 +1,706 @@ :root { - --primary-color: #ff6b6b; - --primary-light: #ffeded; - --primary-dark: #e64c4c; - --text-color: #333333; - --text-light: #666666; - --background-color: #f8f9fa; - --white: #ffffff; - --border-color: #e4e9ec; - --hover-color: #f5f5f5; - --shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - --bottom-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1); - --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - --transition: 0.2s ease; - --radius: 6px; + --surface: #fff8f0; + --surface-container-low: #faf3e7; + --surface-container-highest: #eae2d2; + --primary: #8c4d50; + --primary-container: #fcacaf; + --primary-hover: #7a3f42; + --on-background: #363227; + --on-surface: #363227; + --on-surface-variant: #645f52; + --outline-variant: #b9b1a3; + --secondary-container: #e0f5cb; + --on-secondary-container: #4c5e3e; + --nav-height: 4rem; + --border-radius: 48px; + --small-radius: 24px; + --small-border-radius: 8px; + --max-content-width: 80rem; + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); + --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); + --transition: 0.2s ease; + --transition-slow: 0.3s ease; } * { - box-sizing: border-box; - margin: 0; - padding: 0; + box-sizing: border-box; + margin: 0; + padding: 0; } body { - font-family: var(--font-main); - color: var(--text-color); - background-color: var(--background-color); - display: flex; - width: 100%; - line-height: 1.6; + font-family: "Plus Jakarta Sans", sans-serif; + color: var(--on-background); + background-color: var(--surface); + display: flex; + width: 100%; + line-height: 1.6; +} + +@keyframes fadeInUp { + from { opacity: 0; transform: translateY(8px); } + to { opacity: 1; transform: translateY(0); } +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes slideDown { + from { opacity: 0; max-height: 0; } + to { opacity: 1; max-height: 500px; } } -/* Sidebar */ aside { - min-width: 4.5rem; - max-width: 4.5rem; - background-color: var(--primary-color); - height: 100vh; - position: fixed; - left: 0; - top: 0; - border-right: 1px solid var(--border-color); - box-shadow: var(--shadow); - z-index: 10; + min-width: 5rem; + max-width: 5rem; + background-color: var(--surface-container-low); + height: 100vh; + position: fixed; + left: 0; + top: 0; + box-shadow: var(--shadow-md); + z-index: 10; + border-radius: 0 var(--small-radius) var(--small-radius) 0; + border-right: 1px solid var(--outline-variant); + animation: fadeIn 0.3s ease; } nav { - display: flex; - flex-direction: column; - align-items: center; - padding-top: 2rem; - gap: 1.5rem; - height: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 2rem; + gap: 0.5rem; + height: 100%; } -nav>a { - color: var(--white); - text-decoration: none; - font-size: 1.5rem; - width: 3rem; - height: 3rem; - display: flex; - justify-content: center; - align-items: center; - border-radius: 50%; - transition: background-color var(--transition); - position: relative; +nav > a { + color: var(--on-surface-variant); + text-decoration: none; + font-size: 1.3rem; + width: 3rem; + height: 3rem; + display: flex; + justify-content: center; + align-items: center; + border-radius: var(--small-border-radius); + transition: all var(--transition); + position: relative; } -nav>a:hover { - background-color: var(--primary-dark); +nav > a:hover { + background-color: var(--primary-container); + color: var(--primary); + transform: scale(1.1); } -nav>a:last-child { - margin-top: auto; - margin-bottom: 2rem; +nav > a:active { + transform: scale(0.95); } -nav>a>i { - text-decoration: none; - color: var(--white); +nav > a:last-child { + margin-top: auto; + margin-bottom: 2rem; } -/* Tooltip for sidebar icons */ -nav>a::after { - content: attr(data-title); - position: absolute; - left: 120%; - top: 50%; - transform: translateY(-50%); - background-color: var(--text-color); - color: var(--white); - padding: 0.3rem 0.8rem; - border-radius: var(--radius); - font-size: 0.8rem; - white-space: nowrap; - opacity: 0; - pointer-events: none; - transition: opacity var(--transition); - z-index: 1; +nav > a > i { + text-decoration: none; + color: inherit; } -nav>a:hover::after { - opacity: 1; +nav > a::after { + content: attr(data-title); + position: absolute; + left: 120%; + top: 50%; + transform: translateY(-50%); + background-color: var(--on-background); + color: var(--surface); + padding: 0.4rem 0.8rem; + border-radius: var(--small-border-radius); + font-size: 0.8rem; + font-weight: 500; + white-space: nowrap; + opacity: 0; + pointer-events: none; + transition: all var(--transition-slow); + z-index: 1; + box-shadow: var(--shadow-sm); +} + +nav > a:hover::after { + opacity: 1; + left: 130%; } -/* Main content area */ .app-body { - flex: 1; - margin-left: 4.5rem; - padding: 0; - display: flex; - flex-direction: column; - height: 100dvh; - overflow-x: hidden; + flex: 1; + margin-left: 5rem; + padding: 0; + display: flex; + flex-direction: column; + height: 100dvh; + overflow-x: hidden; + animation: fadeInUp 0.35s ease; } header { - background-color: var(--white); - border-bottom: 1px solid var(--border-color); - padding: 1rem 2rem; - display: flex; - align-items: center; - justify-content: space-between; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); - position: sticky; - top: 0; - z-index: 5; + background-color: var(--surface); + border-bottom: 1px solid var(--outline-variant); + padding: 1rem 2rem; + display: flex; + align-items: center; + justify-content: space-between; + position: sticky; + top: 0; + z-index: 5; + transition: box-shadow var(--transition); } -h1 { - font-size: 1.8rem; - font-weight: 600; - color: var(--primary-color); +header h1 { + font-family: "Plus Jakarta Sans", sans-serif; + font-size: 1.5rem; + font-weight: 700; + color: var(--on-background); + letter-spacing: -0.02em; } main { - flex: 1; - padding: 2rem; - display: flex; - flex-direction: column; - height: 100%; - gap: 1.5rem; - overflow: hidden; + flex: 1; + padding: 1.5rem 2rem; + display: flex; + flex-direction: column; + gap: 0.75rem; + overflow-y: auto; + min-height: 0; + max-width: var(--max-content-width); + width: 100%; + margin: 0 auto; +} + +.toolbar { + display: flex; + gap: 0.75rem; + align-items: center; + flex-wrap: wrap; } -/* Search form */ .search-container { - background-color: var(--white); - border-radius: var(--radius); - padding: 1.25rem; - display: flex; - flex-wrap: wrap; - gap: 1rem; - align-items: flex-end; - box-shadow: var(--shadow); + background-color: var(--surface); + border: 1px solid var(--outline-variant); + border-radius: var(--small-radius); + padding: 1rem 1.25rem; + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + align-items: flex-end; + box-shadow: var(--shadow-sm); + transition: box-shadow var(--transition); +} + +.search-container:hover { + box-shadow: var(--shadow-md); } .search-box { - flex: 1; - min-width: 250px; - position: relative; + flex: 1; + min-width: 200px; + position: relative; } .search-box input { - width: 100%; - padding: 0.75rem 1rem 0.75rem 2.5rem; - border: 1px solid var(--border-color); - border-radius: var(--radius); - font-size: 1rem; - transition: border-color var(--transition); + width: 100%; + padding: 0.5rem 1rem 0.5rem 2.5rem; + border: 1px solid var(--outline-variant); + border-radius: var(--small-border-radius); + font-size: 0.85rem; + font-family: inherit; + background-color: var(--surface); + color: var(--on-surface); + transition: all var(--transition); +} + +.search-box input:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(140, 77, 80, 0.12); } .search-box::before { - content: "馃攳"; - position: absolute; - left: 1rem; - top: 50%; - transform: translateY(-50%); - color: var(--text-light); + content: "\f002"; + font-family: "Font Awesome 6 Free"; + font-weight: 900; + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%); + color: var(--on-surface-variant); + font-size: 0.8rem; + pointer-events: none; } .search-container label:not(.search-box) { - display: flex; - flex-direction: column; - gap: 0.5rem; - font-size: 0.9rem; - color: var(--text-light); + display: flex; + flex-direction: column; + gap: 0.3rem; + font-size: 0.75rem; + font-weight: 600; + color: var(--on-surface-variant); } .search-container input[type="date"] { - padding: 0.75rem; - border: 1px solid var(--border-color); - border-radius: var(--radius); - min-width: 160px; + padding: 0.5rem 0.75rem; + border: 1px solid var(--outline-variant); + border-radius: var(--small-border-radius); + min-width: 140px; + font-family: inherit; + font-size: 0.8rem; + background-color: var(--surface); + color: var(--on-surface); + transition: all var(--transition); } -.search-container input:focus { - outline: none; - border-color: var(--primary-color); - box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1); +.search-container input[type="date"]:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(140, 77, 80, 0.12); +} + +.btn-primary { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.55rem 1.3rem; + background-color: var(--primary); + color: #fff; + border: none; + border-radius: var(--border-radius); + font-size: 0.85rem; + font-weight: 600; + font-family: inherit; + cursor: pointer; + text-decoration: none; + transition: all var(--transition); + white-space: nowrap; +} + +.btn-primary:hover { + background-color: var(--primary-hover); + color: #fff; + transform: scale(1.02); +} + +.btn-primary:active { + transform: scale(0.97); } -/* Table styling */ #results-table { - background-color: var(--white); - border-radius: var(--radius); - box-shadow: var(--shadow); - /* overflow: hidden; */ - margin-top: 1rem; + background-color: var(--surface); + border: 1px solid var(--outline-variant); + border-radius: var(--small-radius); + box-shadow: var(--shadow-sm); + overflow: hidden; + transition: box-shadow var(--transition); +} + +#results-table:hover { + box-shadow: var(--shadow-md); } table { - width: 100%; - border-collapse: collapse; - border-spacing: 0; - font-size: 0.95rem; + width: 100%; + border-collapse: collapse; + border-spacing: 0; + font-size: 0.85rem; } thead { - border-bottom: 1px solid var(--border-color); - background-color: var(--white); - position: sticky; - top: 0; - z-index: 1; - box-shadow: 0 2px 0 var(--border-color); -} - -tbody th { - font-weight: 300; - color: var(--text-color); + border-bottom: 2px solid var(--outline-variant); + background-color: var(--surface-container-low); + position: sticky; + top: 0; + z-index: 1; } thead th { - color: var(--text-light); - font-weight: 100; - font-size: rem; - font-size: 0.8rem; - /* box-shadow: var(--bottom-shadow); */ + color: var(--on-surface-variant); + font-weight: 600; + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.05em; + padding: 0.75rem 1rem; } +tbody th { + font-weight: 400; + color: var(--on-surface); +} th { - text-align: left; - padding: 1rem; - /* color: var(--primary-dark); */ + text-align: left; + padding: 0.75rem 1rem; } td { - padding: 1rem; + padding: 0.75rem 1rem; } th:first-child, td:first-child { - padding-left: 1.5rem; + padding-left: 1.25rem; } th:last-child, td:last-child { - padding-right: 1.5rem; + padding-right: 1.25rem; +} + +tr { + transition: background-color var(--transition); } tr.clickable { - cursor: pointer; - transition: background-color var(--transition); + cursor: pointer; } tr.clickable:hover { - background-color: var(--hover-color); + background-color: var(--surface-container-low); } tr.active { - background-color: var(--primary-light); + background-color: var(--primary-container); +} + +tr:not(:last-child) { + border-bottom: 1px solid var(--outline-variant); +} + +.status-badge { + display: inline-block; + padding: 0.15rem 0.55rem; + border-radius: 999px; + font-size: 0.7rem; + font-weight: 600; + letter-spacing: 0.02em; +} + +.status-accepted { + background-color: #fff3e0; + color: #e65100; +} + +.status-done { + background-color: #e8f5e9; + color: #2e7d32; } -/* Order details */ .details-content { - background-color: var(--hover-color); - padding: 0 !important; + background-color: var(--surface-container-low); + padding: 0 !important; } .details-content table { - margin: 0; - box-shadow: none; + margin: 0; + box-shadow: none; } .details-content th { - background-color: transparent; - font-weight: normal; + background-color: transparent; + font-weight: 500; } -/* Links */ a { - text-decoration: none; - color: var(--text-light); + text-decoration: none; + color: var(--on-surface-variant); + transition: color var(--transition); +} + +a:hover { + color: var(--primary); } tr a { - text-decoration: underline; - color: var(--primary-color); + text-decoration: none; + font-weight: 600; + color: var(--primary); +} + +tr a:hover { + text-decoration: underline; } .order { - flex-grow: 1; - display: flex; - flex-direction: row; - width: 100%; - padding: 1.5rem; - background-color: var(--white); - border-radius: var(--radius); - box-shadow: var(--shadow); - height: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.75rem; + width: 100%; + align-content: start; } -.order div { - flex-grow: 1; - display: flex; - flex-direction: column; +.order > div { + display: flex; + flex-direction: column; + gap: 0.65rem; + background-color: var(--surface); + border: 1px solid var(--outline-variant); + border-radius: var(--small-border-radius); + padding: 1rem 1.25rem; + transition: box-shadow var(--transition); } -.order>div { - flex-basis: 0; - flex-shrink: 0; +.order > div:hover { + box-shadow: var(--shadow-sm); } -.order-contents>*:first-child, -.order-contents>*:last-child { - flex-grow: 0; +.order > div:last-child:nth-child(odd) { + grid-column: 1 / -1; } .order label { - display: flex; - justify-content: space-between; - flex-direction: row; - align-items: center; + display: flex; + flex-direction: column; + gap: 0.2rem; + font-size: 0.75rem; + font-weight: 600; + color: var(--on-surface-variant); +} + +input, select { + padding: 0.45rem 0.7rem; + border: 1px solid var(--outline-variant); + border-radius: var(--small-border-radius); + font-size: 0.85rem; + font-family: inherit; + background-color: var(--surface); + color: var(--on-surface); + transition: all var(--transition); +} + +input:focus, select:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(140, 77, 80, 0.12); +} + +button[type="submit"] { + padding: 0.5rem 1.5rem; + background-color: var(--primary); + color: #fff; + border: none; + border-radius: var(--border-radius); + font-size: 0.85rem; + font-weight: 600; + font-family: inherit; + cursor: pointer; + transition: all var(--transition); + align-self: flex-start; +} + +button[type="submit"]:hover { + background-color: var(--primary-hover); + transform: scale(1.02); +} + +button[type="submit"]:active { + transform: scale(0.97); +} + +.order h2 { + font-size: 1rem; + font-weight: 700; + color: var(--on-background); + letter-spacing: -0.01em; } .scrollable { - overflow-y: auto; - min-height: 0; + overflow-y: auto; + min-height: 0; } -/* Responsive adjustments */ -@media (max-width: 768px) { - .search-container { - flex-direction: column; - align-items: stretch; - } +#basket_table button, .order table button { + padding: 0.3rem 0.5rem; + background-color: var(--primary-container); + color: var(--primary); + border: none; + border-radius: var(--small-border-radius); + cursor: pointer; + font-size: 0.75rem; + transition: all var(--transition); +} - .search-container>* { - width: 100%; - } +#basket_table button:hover, .order table button:hover { + background-color: var(--primary); + color: #fff; + transform: scale(1.05); +} - aside { - min-width: 3.5rem; - max-width: 3.5rem; - } +#basket_table button:active, .order table button:active { + transform: scale(0.95); +} - .app-body { - margin-left: 3.5rem; - } - - nav a { - width: 2.5rem; - height: 2.5rem; +#total-price { font-size: 1.2rem; - } -} \ No newline at end of file + font-weight: 700; + color: var(--primary); +} + +.order table { + font-size: 0.8rem; +} + +.order table th { + padding: 0.35rem 0.5rem; +} + +.htmx-request { + opacity: 0.7; + pointer-events: none; + transition: opacity var(--transition); +} + +.login-page { + display: flex; + justify-content: center; + align-items: center; + min-height: 100dvh; + background-color: var(--surface-container-low); +} + +.login-card { + background-color: var(--surface); + border: 1px solid var(--outline-variant); + border-radius: var(--small-radius); + padding: 2.5rem; + box-shadow: var(--shadow-lg); + width: 100%; + max-width: 26rem; + position: relative; + overflow: hidden; +} + +.login-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, var(--primary), var(--primary-container)); +} + +.login-icon { + display: flex; + justify-content: center; + margin-bottom: 1.5rem; + font-size: 2.5rem; + color: var(--primary); +} + +.login-card h1 { + font-family: "Plus Jakarta Sans", sans-serif; + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 1.5rem; + color: var(--on-background); + text-align: center; + letter-spacing: -0.02em; +} + +.login-card form { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.login-card label { + display: flex; + flex-direction: column; + gap: 0.35rem; + font-size: 0.85rem; + font-weight: 600; + color: var(--on-surface-variant); +} + +.login-card button { + padding: 0.75rem 2rem; + background-color: var(--primary); + color: #fff; + border: none; + border-radius: var(--border-radius); + font-size: 1rem; + font-weight: 600; + font-family: inherit; + cursor: pointer; + transition: all var(--transition); + margin-top: 0.5rem; +} + +.login-card button:hover { + background-color: var(--primary-hover); + transform: scale(1.02); +} + +.login-card button:active { + transform: scale(0.97); +} + +@media (max-width: 1024px) { + .order { + grid-template-columns: 1fr; + } + + .order > div:last-child:nth-child(odd) { + grid-column: 1; + } +} + +@media (max-width: 768px) { + .toolbar { + flex-direction: column; + align-items: stretch; + } + + .search-container { + flex-direction: column; + align-items: stretch; + } + + .search-container > * { + width: 100%; + } + + aside { + min-width: 3.5rem; + max-width: 3.5rem; + border-radius: 0 var(--small-border-radius) var(--small-border-radius) 0; + } + + .app-body { + margin-left: 3.5rem; + } + + nav a { + width: 2.5rem; + height: 2.5rem; + font-size: 1.1rem; + } + + main { + padding: 1rem; + } + + header { + padding: 0.75rem 1rem; + } + + header h1 { + font-size: 1.15rem; + } + + .order > div { + padding: 0.85rem 1rem; + } +} diff --git a/server/templates/cake.gohtml b/server/templates/cake.gohtml index 95c4719..77db7aa 100644 --- a/server/templates/cake.gohtml +++ b/server/templates/cake.gohtml @@ -1,36 +1,34 @@ {{define "title"}} -Cake {{.ID}} +Ciasto {{if .ID}}#{{.ID}}{{else}}nowe{{end}} {{end}} {{define "main"}}
-
+
-

Info

- - -
-
{{end}} diff --git a/server/templates/cakes.gohtml b/server/templates/cakes.gohtml index 0e898c6..e544b43 100644 --- a/server/templates/cakes.gohtml +++ b/server/templates/cakes.gohtml @@ -1,25 +1,37 @@ {{define "title"}} -Cakes +Ciasta {{end}} {{define "main"}}
- - - - - - - - - {{range .}} - - - - - - - - {{end}} -
NamePriceCategoryAvailability
edit{{.Name}}{{.Price}}{{.Category}}{{.Availability}}
+
+ + + Nowe ciasto + +
+
+ + + + + + + + + + + + {{range .}} + + + + + + + + {{end}} + +
NazwaCenaKategoriaDost臋pno艣膰
Edytuj{{.Name}}{{.Price}} PLN{{.Category}}{{.Availability}}
+
{{end}} diff --git a/server/templates/layout/layout.gohtml b/server/templates/layout/layout.gohtml index 3acca5b..9320a4b 100644 --- a/server/templates/layout/layout.gohtml +++ b/server/templates/layout/layout.gohtml @@ -5,6 +5,9 @@ {{template "title" .}} + + + diff --git a/server/templates/order.gohtml b/server/templates/order.gohtml index ec2fc5f..13d36b8 100644 --- a/server/templates/order.gohtml +++ b/server/templates/order.gohtml @@ -9,78 +9,74 @@
{{with .Order}} -
-
-

Dane zam贸wienia

- - - - - - - - -
-
-

Dodane Ciasta

-
- -
-
-
    -
-
- -
- - +
+

Dane zam贸wienia

+ + + + + + + + +
+
+

Dodane ciasta

+
+ +
+
    +
+
+
+

Podsumowanie

+ +
{{end}} {{with .Catalogue}} -
-

Katalog

-
- - {{range .}} - - - - - - {{end}} -
{{.Name}}
{{.Category}} (#{{.ID}})		{{.Price}}PLN - -
-
+
+

Katalog

+
+ + {{range .}} + + + + + + {{end}} +
{{.Name}}
{{.Category}} (#{{.ID}})		{{.Price}} PLN + +
+
{{end}}
diff --git a/server/templates/orders.gohtml b/server/templates/orders.gohtml index 6a8bddc..96bf0e8 100644 --- a/server/templates/orders.gohtml +++ b/server/templates/orders.gohtml @@ -3,6 +3,12 @@ Zam贸wienia {{end}} {{define "main"}}
+
+ + + Nowe zam贸wienie + +
- {{end}} {{define "orders-table"}} @@ -46,9 +43,9 @@ Zam贸wienia - + - +
{{.Location}} {{.Date.Format "2006-01-02"}} {{.Total}} PLN{{.Status}}{{.Status}}