Skip to content

2
2023-24-088
Commit ea449fbb authored by IT20613686's avatar IT20613686
Browse files
Options

Login & Register UI created

parent ff63cbe2
Show whitespace changes
Inline Side-by-side
Showing with 286 additions and 0 deletions
frontend/.gitignore 0 → 100644
View file @ ea449fbb
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
frontend/public/robots.txt 0 → 100644
View file @ ea449fbb
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
frontend/src/Component/Login/Login.css 0 → 100644
View file @ ea449fbb
.login-bg {
background: linear-gradient(to bottom, #001061, #049cfbd4);
height: 100vh;
}
.login-card {
background: linear-gradient(to right, purple, #1F3D88);
color: white;
width: 55%;
border-radius: 20px;
}
.login-card-body {
margin: 10px 80px 60px 80px;
}
.login-container {
background-color: white;
color: black;
border-radius: 10px;
margin-top: 23%;
}
.login-form {
margin: 40px 20px 40px 20px;
width: 330px;
}
.login-btn {
float: right;
background-color: #192FA2;
color: white;
}
.logo-container {
width: 250px;
margin-right: 50px;
}
.login-form-label {
color: #696969;
}
.login-form-input {
color: #B8B8B8;
}
.create-account {
background-color: #192FA2;
color: white;
}
.register-container {
background-color: white;
color: black;
border-radius: 10px;
margin-top: 16%;
}
\ No newline at end of file
frontend/src/Component/Login/Login.js 0 → 100644
View file @ ea449fbb
import React from 'react'
import './Login.css'
function Login() {
return (
<div className="login-bg">
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh" }}
>
<div className="card login-card">
<div className="card-body login-card-body">
<div className="d-flex">
<div className="logo-container">
<div>
<img
src="/Images/Logo-no-background.png"
alt="Logo"
className="img-fluid"
style={{ width: "150px" }}
/>
</div>
<h4
className="card-title mt-5"
style={{ width: "150px", fontFamily: "serif", fontWeight: "bold" }}
>
Login into your account
</h4>
<div
className="card-text mt-1"
style={{ fontSize: "17px", fontFamily: "serif" }}
>
Let us make your life easier!
</div>
</div>
<div className="login-container">
<form className="login-form">
<div className="mb-1">
<label
htmlFor="email"
className="form-label login-form-label"
>
Email
</label>
<input
type="email"
className="form-control login-form-input"
id="email"
placeholder="name@example.com"
/>
</div>
<div className="mb-1">
<label
htmlFor="password"
className="form-label login-form-label"
>
Password
</label>
<input
type="password"
className="form-control login-form-input"
id="password"
placeholder="Your password"
/>
</div>
<div className="d-flex mt-4">
<div className="mt-1">
<p style={{ color: "#3c3c3c" }}>
Don't have an account?
<a
style={{
color: "#000000",
fontWeight: "400",
textDecoration: "none",
}}
href="/register"
>
Sign up
</a>
</p>
</div>
<div className="col-md-4">
<button type="submit" className="btn login-btn">
Login
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default Login
\ No newline at end of file
frontend/src/Component/Register/Register.js 0 → 100644
View file @ ea449fbb
import React from 'react'
import '../Login/Login.css'
function Register() {
return (
<div className="login-bg">
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh" }}
>
<div className="card login-card">
<div className="card-body login-card-body">
<div className="d-flex">
<div className="logo-container">
<div>
<img
src="/Images/Logo-no-background.png"
alt="Logo"
className="img-fluid"
style={{ width: "150px" }}
/>
</div>
<h4
className="card-title mt-5"
style={{
width: "150px",
fontFamily: "serif",
fontWeight: "bold",
}}
>
Create an account here
</h4>
<div
className="card-text mt-1"
style={{ fontSize: "17px", fontFamily: "serif" }}
>
Let's make it happen together!
</div>
</div>
<div className="register-container">
<form className="login-form">
<div className="mb-1">
<label
htmlFor="First Name"
className="form-label login-form-label"
>
First Name
</label>
<input
type="text"
className="form-control login-form-input"
id="fname"
placeholder="Your first name"
/>
</div>
<div className="mb-1">
<label
htmlFor="lname"
className="form-label login-form-label"
>
Last Name
</label>
<input
type="text"
className="form-control login-form-input"
id="lname"
placeholder="Your last name"
/>
</div>
<div className="mb-1">
<label
htmlFor="email"
className="form-label login-form-label"
>
Email
</label>
<input
type="email"
className="form-control login-form-input"
id="email"
placeholder="name@example.com"
/>
</div>
<div className="mb-1">
<label
htmlFor="password"
className="form-label login-form-label"
>
Password
</label>
<input
type="password"
className="form-control login-form-input"
id="password"
placeholder="Your password"
/>
</div>
<div className='mt-4' style={{textAlign: "center"}}>
<button type="submit" className="btn create-account">
Create Account
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default Register
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment