Przeglądaj źródła

Style the register page.

Lee Morgan 1 rok temu
rodzic
commit
32f5d8df25
4 zmienionych plików z 100 dodań i 4 usunięć
  1. 1 1
      package.json
  2. 4 0
      views/css/register.css
  3. 50 2
      views/index.css
  4. 45 1
      views/index.html

+ 1 - 1
package.json

@@ -16,7 +16,7 @@
   "main": "app.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "nodemon app.js --ignore views/build/"
+    "dev": "nodemon app.js --ignore views/build/ --ext js,css,html"
   },
   "dependencies": {
     "compression": "^1.8.0",

+ 4 - 0
views/css/register.css

@@ -0,0 +1,4 @@
+#registerPage form{
+    display: flex;
+    flex-direction: column;
+}

+ 50 - 2
views/index.css

@@ -1,9 +1,57 @@
+@import "./css/register.css";
+:root{
+    --primary: #d7263d;
+    --accent: #f46036;
+    --dark: #1a1a1a;
+    --gray: #2e2e2e;
+    --text: #f2f2f2;
+    --success: #4caf50;
+    --warning: #ffc107;
+}
+
 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    color: var(--text);
+}
+
+.page{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+    background: var(--dark);
+}
+
+.standardForm{
+    background: var(--gray);
+    padding: 35px;
+    width: 100%;
+    max-width: 750px;
+}
+
+.standardForm h1{
+    font-size: 35px;
+    text-align: center;
+}
+
+.standardForm label{
+    display: flex;
+    flex-direction: column;
+    font-size: 22px;
+    margin: 10px 0;
+}
+
+.standardForm input{
+    font-size: 22px;
+    color: var(--gray);
 }
 
-body{
-    background: orange;
+.standardForm button{
+    font-size: 26px;
+    background: var(--accent);
+    margin-top: 35px;
+    padding: 10px 0;
 }

+ 45 - 1
views/index.html

@@ -2,11 +2,55 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Workout Tracker</title>
     <link rel="stylesheet" href="/index.css">
 </head>
 <body>
-    <h1>Workout Tracker</h1>
+    <div id="registerPage" class="page">
+        <form class="standardForm">
+            <h1>Create Account</h1>
+
+            <label>Name
+                <input
+                    id="registerName"
+                    type="text"
+                    placeholder="Name"
+                    required
+                >
+            </label>
+
+            <label>Email
+                <input
+                    id="registerEmail"
+                    type="email"
+                    placeholder="Email"
+                    required
+                >
+            </label>
+
+            <label>Password
+                <input
+                    id="registerPass"
+                    type="password"
+                    placeholder="Password"
+                    required
+                >
+            </label>
+
+            <label>Confirm Password
+                <input
+                    id="registerConfirmPass"
+                    type="password"
+                    placeholder="Confirm Password"
+                    required
+                >
+            </label>
+
+            <button>Create</button>
+        </form>
+    </div>
+
     <script src="/index.js"></script>
 </body>
 </html>