feat: Working on views

Sources/ViewControllerLive/Live.swift

@@ -7,7 +7,7 @@ extension ViewController: DependencyKey {
   public static var liveValue: ViewController {
     .init(view: { _ in
       MainPage {
-        h1(.class("text-sky-500")) { "It works!" }
+        MoldRiskForm()
       }
     })
   }

Sources/ViewControllerLive/Views/MainPage.swift

@@ -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")) {
+        // div(.class("container")) {
-          inner()
+        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.wind
-          <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>
-          """)
         }
       }
     }

Sources/ViewControllerLive/Views/MoldRisk.swift

@@ -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")) {}
+      }
+    }
+  }
+}

Sources/ViewControllerLive/Views/SVG.swift

@@ -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>
+  """)
+}

Sources/ViewControllerLive/Views/Styleguide.swift

@@ -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"
+}