Create the 'create account' page.

src/views/css/addMenu.css

@@ -1,6 +1,10 @@
-.AddMenu{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+#AddMenu{
+    background: var(--surface);
+    border: 5px solid var(--secondary);
+}
+
+#AddMenu .button{
+    width: 100%;
+    max-width: 750px;
+    padding: 15px;
 }

src/views/css/index.css

@@ -1,4 +1,5 @@
 @import "./home.css";
+@import "./addMenu.css";
 
 :root {
     --primary:     #6E4B3A;
@@ -29,6 +30,7 @@ body{
     position: absolute;
     top: 35px;
     left: 35px;
+    z-index: 100;
 }
 
 .page{
@@ -39,6 +41,7 @@ body{
     height: 100%;
     width: 100%;
     position: relative;
+    padding: 15px;
 }
 
 .standardForm{

src/views/js/Elem.js

@@ -38,6 +38,16 @@ export default class Elem {
         return this;
     }
 
+    min(v){
+        this.elem.min = v;
+        return this;
+    }
+
+    step(v){
+        this.elem.step = v;
+        return this;
+    }
+
     required(){
         this.elem.required = true;
         return this;

src/views/js/index.js

@@ -5,6 +5,7 @@ import Login from "./pages/Login.js";
 import Register from "./pages/Register.js";
 import Home from "./pages/Home.js";
 import AddMenu from "./pages/AddMenu.js";
+import CreateAccount from "./pages/CreateAccount.js";
 
 const pages = document.querySelector(".page");
 let currentPage;
@@ -18,6 +19,7 @@ window.changePage = (page, data)=>{
         case "register": currentPage = new Register(); break;
         case "home": currentPage = new Home(); break;
         case "addMenu": currentPage = new AddMenu(); break;
+        case "createAccount": currentPage = new CreateAccount(); break;
     }
     console.timeEnd("change page");
 }

src/views/js/pages/AddMenu.js

@@ -11,6 +11,7 @@ export default class AddMenu extends Page{
     render(){
         new Elem("button")
             .text("New Account")
+            .addClass("button")
             .onclick(()=>{changePage("createAccount")})
             .appendTo(this.container);
     }

src/views/js/pages/CreateAccount.js

@@ -0,0 +1,52 @@
+import Page from "./Page.js";
+import Elem from "../Elem.js";
+
+export default class CreateAccount extends Page{
+    constructor(){
+        super("CreateAccount");
+
+        this.render();
+    }
+
+    submit(event){
+        event.preventDefault();
+        console.log("submit");
+    }
+
+    render(){
+        new Elem("form")
+            .addClass("standardForm")
+            .onsubmit(this.submit.bind())
+            .append(new Elem("h1")
+                .text("Create Account")
+            )
+            .append(new Elem("label")
+                .text("Account Name")
+                .append(new Elem("input")
+                    .type("text")
+                    .placeholder("Account Name")
+                    .required()
+                    .focus()
+                )
+            )
+            .append(new Elem("label")
+                .text("Current Balance")
+                .append(new Elem("input")
+                    .type("number")
+                    .placeholder("Current Balance")
+                    .min("0")
+                    .step("0.01")
+                    .required()
+                )
+            )
+            .append(new Elem("button")
+                .text("Create")
+            )
+            .append(new Elem("button")
+                .text("Cancel")
+                .type("button")
+                .onclick(()=>{changePage("home")})
+            )
+            .appendTo(this.container);
+    }
+}