Skip to content

Commit 93389ce

Browse files
harikrishnan-githarikrishnan-git
committed
Creating a register page
1 parent 45cef77 commit 93389ce

File tree

5 files changed

+94
-4
lines changed

5 files changed

+94
-4
lines changed

‎frontend/index.html

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Vite + React</title>
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
11+
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
12+
crossorigin="anonymous"
13+
referrerpolicy="no-referrer"
14+
/>
815
</head>
916
<body>
1017
<div id="root"></div>

‎frontend/src/App.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { useState } from "react";
22
import "./App.css";
33
import Login from "./Pages/Login/Login";
4+
import Signup from "./Pages/Signup/Signup";
45

56
function App() {
67
const [count, setCount] = useState(0);
78

89
return (
910
<div className="p-4 h-screen flex items-center justify-center">
10-
<Login />
11+
<Signup />
1112
</div>
1213
);
1314
}

‎frontend/src/Pages/Login/Login.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default function Login() {
4646
<input type="password" className="grow" placeholder="Password" />
4747
</label>
4848
<a
49-
href="#"
49+
href="../Signup/Signup.jsx"
5050
className="text-sm hover:underline hover:text-blue-500 inline-block mt-2"
5151
>
5252
Don't have an account?

‎frontend/src/Pages/Signup/GenderRadio.jsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from "react";
2+
3+
export default function GenderCheckbox() {
4+
return (
5+
<div>
6+
<label htmlFor="Gender" className="label p-2 label-text mt-2">
7+
Choose your Gender
8+
</label>
9+
<div className=" flex items-start">
10+
<label className="label cursor-pointer">
11+
<input
12+
type="radio"
13+
id="Gender"
14+
name="radio-2"
15+
className="radio radio-primary hover:border-blue-300 "
16+
defaultChecked
17+
/>
18+
<span className="label-text ml-1">Male</span>
19+
</label>
20+
<label className="label cursor-pointer">
21+
<input
22+
type="radio"
23+
id="Gender"
24+
name="radio-2"
25+
className="radio radio-primary hover:border-blue-300 ml-6"
26+
/>
27+
<span className="label-text m-1 ml-1">Female</span>
28+
</label>
29+
</div>
30+
</div>
31+
);
32+
}

‎frontend/src/Pages/Signup/Signup.jsx

+51-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,55 @@
11
import React from "react";
2+
import GenderRadio from "./GenderRadio";
23

34
export default function Signup() {
4-
return <div>Signup</div>;
5+
return (
6+
<div className="flex flex-col justify-center items-center minw-96 mx-auto">
7+
<div className="h-full w-full bg-gray-500 rounded-md bg-clip-padding px-16 backdrop-filter backdrop-blur-sm bg-opacity-20 border border-gray-100 p-12">
8+
<h1 className="text-3xl font-semibold text-center text-gray-300">
9+
Sign up
10+
</h1>
11+
<form>
12+
<label htmlFor="Fullname" className="label ">
13+
<span className="text-base label text">FULL NAME</span>
14+
</label>
15+
<label className="w-full h-10 p-2 input-bordered input hover:border-blue-300">
16+
<i class="fa-solid fa-circle-user mr-3"></i>
17+
<input id="Fullname" type="text" placeholder="John Doe" />
18+
</label>
19+
<label htmlFor="Username" className="label pu-2">
20+
<span className="text-base label text">Username</span>
21+
</label>
22+
<label className="w-full h-10 p-2 input-bordered input hover:border-blue-300">
23+
<i class="fa-solid fa-user mr-3"></i>
24+
<input id="Username" type="text" placeholder="John123" />
25+
</label>
26+
<label htmlFor="Password" className="label pu-2">
27+
<span className="text-base label text">Password</span>
28+
</label>
29+
<label className="w-full h-10 p-2 input-bordered input hover:border-blue-300">
30+
<i class="fa-solid fa-circle-user mr-3"></i>
31+
<input id="Password" type="text" placeholder="Enter password" />
32+
</label>
33+
<label htmlFor="confirmPassword" className="label pu-2">
34+
<span className="text-base label text">Confirm Password</span>
35+
</label>
36+
<label className="w-full h-10 p-2 input-bordered input hover:border-blue-300">
37+
<i class="fa-solid fa-circle-user mr-3"></i>
38+
<input
39+
id="confirmPassword"
40+
type="text"
41+
placeholder="Reenter password"
42+
/>
43+
</label>
44+
<GenderRadio />
45+
<a href="#" className="link link-primary">
46+
Already Have An Account?
47+
</a>
48+
<div className="mt-3">
49+
<button className="btn btn-outline btn-primary">SUBMIT</button>
50+
</div>
51+
</form>
52+
</div>
53+
</div>
54+
);
555
}

0 commit comments

Comments
 (0)