feat: Begins a generic htmx form context and template, integrates user form, begins views for vendor and purchase orders.

Public/css/main.css

@@ -84,6 +84,19 @@ form input {
   margin-bottom: 15px;
 }
 
+.user-form, .employee-form {
+  padding: 80px;
+  width: 100%;
+}
+
+.user-form input {
+  width: 100%;
+}
+
+.employee-form input {
+  width: 100%;
+}
+
 table {
   width: 100%;
 }
@@ -97,27 +110,22 @@ td, th {
   padding: 5px 15px;
 }
 
-.employee-form {
-  margin: 20px auto;
-  width: 50%;
-  background-color: #aeb6bf;
-  padding: 20px;
-  border-radius: 25px;
-}
-
-.employee-form label {
-  color: #555;
-  font-weight: bold;
-}
-
 input[type=submit] {
   padding: 5px 20px;
 }
 
-input[type=text], input[type=password] {
+input[type=text], input[type=password], input[type=email] {
+  background-color: inherit;
+  color: inherit;
+  border: none;
+  border-bottom: 2px solid #555;
   padding: 5px;
 }
 
+input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
+  outline: none;
+}
+
 .btn {
   cursor: pointer;
 }
@@ -153,3 +161,46 @@ input[type=text], input[type=password] {
 .toggle img:hover {
   background-color: #555;
 }
+
+.dropbtn {
+  background-color: #3498DB;
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
+}
+
+.dropbtn:hover, .dropbtn:focus {
+  background-color: #2980B9;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  min-width: 160px;
+  overflow: auto;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown a:hover {
+  background-color: #ddd;
+}
+
+.show {
+  display: block;
+}