this repo has no description
lustre
frontent
oat-ui
gleam
🚧 add logo to login page
+62
-25
+2
src/client.css
+2
src/client.css
+25
src/client/brand.gleam
+25
src/client/brand.gleam
···
1
+
import client/icon
2
+
import lustre/attribute.{class} as attr
3
+
import lustre/element
4
+
import lustre/element/html
5
+
6
+
pub fn logo(attr: List(attr.Attribute(_))) -> element.Element(_) {
7
+
icon.leaf([
8
+
class("p-2 text-white rounded-lg"),
9
+
class("from-green-500 via-emerald-500 to-teal-600 bg-linear-to-r"),
10
+
..attr
11
+
])
12
+
}
13
+
14
+
pub fn title(attr: List(attr.Attribute(a))) -> element.Element(_) {
15
+
let text = html.text("Vértis Climate")
16
+
html.p(
17
+
[
18
+
class("font-bold"),
19
+
class("text-transparent bg-clip-text"),
20
+
class("from-green-600 to-teal-600 bg-linear-to-r"),
21
+
..attr
22
+
],
23
+
[text],
24
+
)
25
+
}
-10
src/client/logo.gleam
-10
src/client/logo.gleam
+31
-1
src/client/page/login.gleam
+31
-1
src/client/page/login.gleam
···
1
+
import client/brand
1
2
import client/session
2
3
import gleam/json
4
+
import lustre/attribute.{class}
3
5
import lustre/effect
4
6
import lustre/element
5
7
import lustre/element/html
···
78
80
}
79
81
80
82
pub fn view(_session: session.Session, _model: Model) -> element.Element(Msg) {
81
-
html.p([], [html.text("login")])
83
+
// Wrapper
84
+
let wrapper_attr = [
85
+
class("mx-auto max-w-lg h-full"),
86
+
class("flex flex-col gap-2 items-center"),
87
+
]
88
+
89
+
html.div(wrapper_attr, [
90
+
// Logo with Title
91
+
html.section(
92
+
[class("p-4 w-full"), class("flex gap-4 justify-center items-center")],
93
+
[
94
+
brand.logo([class("size-12 drop-shadow-md")]),
95
+
html.div([], [
96
+
brand.title([class("my-0 text-xl text-center")]),
97
+
html.small([class("text-subtext")], [
98
+
html.text("Soluções Climáticas Inteligentes"),
99
+
]),
100
+
]),
101
+
],
102
+
),
103
+
104
+
// Form
105
+
html.section([class("p-4 w-full rounded-lg border border-border")], [
106
+
html.h3([class("my-2 font-bold")], [html.text("Entrar na Plataforma")]),
107
+
html.p([class("text-subtext")], [
108
+
html.text("Acesse sua conta para gerenciar contratos de energia"),
109
+
]),
110
+
]),
111
+
])
82
112
}