Video-20-Signin-Screen-UI (basir#20)

Author: basir

frontend/src/index.js

@@ -3,12 +3,14 @@ import ProductScreen from './srceens/ProductScreen';
 import { parseRequestUrl } from './utils';
 import Error404Screen from './srceens/Error404Screen';
 import CartScreen from './srceens/CartScreen';
+import SigninScreen from './srceens/SigninScreen';
 
 const routes = {
  '/': HomeScreen,
  '/product/:id': ProductScreen,
  '/cart/:id': CartScreen,
  '/cart': CartScreen,
+ '/signin': SigninScreen,
 };
 const router = async () => {
  const request = parseRequestUrl();

frontend/src/srceens/SigninScreen.js

@@ -0,0 +1,34 @@
+const SigninScreen = {
+ after_render: () => {},
+ render: () => {
+ return `
+ <div class="form-container">
+ <form id="signin-form">
+ <ul class="form-items">
+ <li>
+ <h1>Sign-In</h1>
+ </li>
+ <li>
+ <label for="email">Email</label>
+ <input type="email" name="email" id="email" />
+ </li>
+ <li>
+ <label for="password">Password</label>
+ <input type="password" name="password" id="password" />
+ </li>
+ <li>
+ <button type="submit" class="primary">Signin</button>
+ </li>
+ <li>
+ <div>
+ New User?
+ <a href="/#/register">Create your account </a>
+ </div>
+ </li>
+ </ul>
+ </form>
+ </div>
+ `;
+ },
+};
+export default SigninScreen;

frontend/style.css

@@ -16,13 +16,17 @@ a {
 a:hover {
  color: #f08040;
 }
+button {
+ cursor: pointer;
+}
+input,
 button {
  font: 1.6rem helvetica;
  padding: 1rem;
  border: 0.1rem #808080 solid;
  border-radius: 0.5rem;
- cursor: pointer;
 }
+input:hover,
 button:hover {
  border: 0.1rem #404040 solid;
 }
@@ -220,3 +224,28 @@ footer {
  font-size: 1.3rem;
  padding: 0.5rem;
 }
+/* Form */
+.form-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+}
+.form-items {
+ display: flex;
+ flex-direction: column;
+ width: 32rem;
+ padding: 2rem;
+ border: 0.1rem #c0c0c0 solid;
+ border-radius: 0.5rem;
+ list-style-type: none;
+}
+.form-items li {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 1rem;
+ margin-top: 1rem;
+}
+.form-container h1 {
+ font-size: 2.5rem;
+}