feat: Working on views
This commit is contained in:
@@ -33,9 +33,9 @@ struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable {
|
||||
main(.class("bg-white dark:bg-gray-800")) {
|
||||
div(.class("min-h-screen")) {
|
||||
Header()
|
||||
div(.class("container")) {
|
||||
inner()
|
||||
}
|
||||
// div(.class("container")) {
|
||||
inner()
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -50,15 +50,7 @@ struct Header: HTML {
|
||||
img(.src("/favicon-32x32.png"))
|
||||
h2(.class("text-2xl text-white font-extrabold")) { "HVAC-Toolbox" }
|
||||
// img(.class("text-yellow-300"), .src("/images/wind.svg"))
|
||||
HTMLRaw("""
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="w-8 h-8 text-yellow-300">
|
||||
<path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"></path>
|
||||
<path d="M9.6 4.6A2 2 0 1 1 11 8H2"></path>
|
||||
<path d="M12.6 19.4A2 2 0 1 0 14 16H2"></path>
|
||||
</svg>
|
||||
""")
|
||||
SVG.wind
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
57
Sources/ViewControllerLive/Views/MoldRisk.swift
Normal file
57
Sources/ViewControllerLive/Views/MoldRisk.swift
Normal file
@@ -0,0 +1,57 @@
|
||||
import Elementary
|
||||
import Routes
|
||||
|
||||
struct MoldRiskForm: HTML {
|
||||
|
||||
var content: some HTML {
|
||||
div(.class("grid grid-cols-1 lg:grid-cols-12")) {
|
||||
div(.class("col-span-1")) {}
|
||||
div(.class("col-span-10 rounded-xl shadow-lg bg-slate-300 dark:bg-slate-700 p-8")) {
|
||||
div(.class("flex items-center gap-3 mb-6")) {
|
||||
SVG.thermometer
|
||||
h2(.class("text-2xl font-extrabold dark:text-white")) { "Mold Risk Calculator" }
|
||||
}
|
||||
form {
|
||||
div(.class("space-y-6")) {
|
||||
div {
|
||||
label(.for("temperature"), .class("block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2")) {
|
||||
"Indoor Temperature"
|
||||
}
|
||||
input(
|
||||
.type(.number), .id("temperature"), .placeholder("Dry bulb temperature"),
|
||||
.init(name: "step", value: "0.1"),
|
||||
.class("""
|
||||
w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-yellow-800
|
||||
focus:border-yellow-800 text-gray-700 dark:text-white
|
||||
""")
|
||||
)
|
||||
}
|
||||
|
||||
div {
|
||||
label(.for("humidity"), .class("block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2")) {
|
||||
"Indoor Humidity (%)"
|
||||
}
|
||||
input(
|
||||
.type(.number), .id("humidity"), .placeholder("Relative humidity"),
|
||||
.init(name: "step", value: "0.1"),
|
||||
.class("""
|
||||
w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-yellow-800
|
||||
focus:border-yellow-800 text-gray-700 dark:text-white
|
||||
""")
|
||||
)
|
||||
}
|
||||
div {
|
||||
button(.type(.submit), .class("""
|
||||
w-full bg-\(Colors.blue) text-\(Colors.yellow) font-bold py-3 rounded-md hover:bg-blue-600
|
||||
transition-colors
|
||||
""")) {
|
||||
"Calculate Mold Risk"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div(.class("col-span-1")) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
37
Sources/ViewControllerLive/Views/SVG.swift
Normal file
37
Sources/ViewControllerLive/Views/SVG.swift
Normal file
@@ -0,0 +1,37 @@
|
||||
import Elementary
|
||||
|
||||
enum SVG {
|
||||
static let wind = HTMLRaw("""
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="w-8 h-8 text-yellow-300">
|
||||
<path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"></path>
|
||||
<path d="M9.6 4.6A2 2 0 1 1 11 8H2"></path>
|
||||
<path d="M12.6 19.4A2 2 0 1 0 14 16H2"></path>
|
||||
</svg>
|
||||
""")
|
||||
|
||||
static let calculator = HTMLRaw("""
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="w-5 h-5">
|
||||
<rect width="16" height="20" x="4" y="2" rx="2"></rect>
|
||||
<line x1="8" x2="16" y1="6" y2="6"></line>
|
||||
<line x1="16" x2="16" y1="14" y2="18"></line>
|
||||
<path d="M16 10h.01"></path>
|
||||
<path d="M12 10h.01"></path>
|
||||
<path d="M8 10h.01"></path>
|
||||
<path d="M12 14h.01"></path>
|
||||
<path d="M8 14h.01"></path>
|
||||
<path d="M12 18h.01"></path><path d="M8 18h.01"></path>
|
||||
</svg>
|
||||
""")
|
||||
|
||||
static let thermometer = HTMLRaw("""
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="w-8 h-8 text-blue-500">
|
||||
<path d="M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z"></path>
|
||||
</svg>
|
||||
""")
|
||||
}
|
||||
7
Sources/ViewControllerLive/Views/Styleguide.swift
Normal file
7
Sources/ViewControllerLive/Views/Styleguide.swift
Normal file
@@ -0,0 +1,7 @@
|
||||
// NOTE: These don't always work as expected with tailwind they generally
|
||||
// need to be in the class itself, but here for reference of the primary
|
||||
// colors.
|
||||
enum Colors {
|
||||
static let yellow = "yellow-300"
|
||||
static let blue = "blue-500"
|
||||
}
|
||||
Reference in New Issue
Block a user