Implement user login and registration; update database connection management to be per use not a singleton by adjusting service lifetimes in DI.

2026-02-26 18:45:15 -08:00
parent 6172d1c373
commit 79ee297e61
6 changed files with 194 additions and 90 deletions
@@ -1,25 +1,62 @@
-.card-holder {
-    display: flex;
-    float: left;
-    flex-direction: column;
-    background-color: red;
-    width: 300px;
-    height: calc(100vh - 3.5rem);
-}
-
-.card {
-    background-color: blue;
-    margin: 5px;
-    height: 45px;
-    color: white;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
 .main-area {
-    float: left;
-    background-color: aqua;
-    height: calc(100vh - 3.5rem);
-    width: calc(100vw - 300px);
+    display: grid;
+    gap: 20px;
+    padding: 20px;
+    grid-auto-columns: auto;
+    grid-auto-flow: column;
+    grid-template-columns: max-content;
+    overflow: scroll;
+}
+
+.gridFrame {
+    background: #eee;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: 0.5s ease-in-out;
+    height: fit-content;
+    display: grid;
+    grid-row-gap: 10px;
+    border: 1px solid black;
+}
+
+.gridFrame h2 {
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+.gridFrame:hover {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.loginRow {
+    width: 300px;
+    height: 40px;
+    padding-bottom: 10px;
+}
+
+.loginRow input {
+    width: calc(100% - 6px);
+    border: 1px solid black;
+    padding: 1px 2px;
+}
+
+    .loginRow input:focus {
+        border-color: brown;
+    }
+
+.loginRow button {
+    width: calc(50% - 15px);
+    background-color: darkblue;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    color: white;
+    height: 30px;
+}
+
+.loginRow button:last-of-type{
+    float: right;
 }