Design a Register Page UI

Trisha-tech commented 1 year ago

The project requires a Register page.

Design a Register page UI which contains the following fields:

Name
Email Address
Contact Number
Password
Confirm Password
Address
Profile Picture

For more details, refer to following: https://github.com/Trisha-tech/OnlineBookSales/blob/master/controllers/customerController.js

sadvika05 commented 6 months ago

Hi there! I'd like to take on this task. I'll design a Register page UI with the required fields: Name, Email Address, Contact Number, Password, Confirm Password, Address, and Profile Picture.

I'll also refer to the customerController.js file for any additional context needed. I'll start working on it and update here once I have a draft ready for review.

sadvika05 commented 6 months ago

Hi there! I've created a basic HTML form for the Register page UI design based on the requirements mentioned. You can find the code below:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <style>
        /* Basic styling for demonstration purposes */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
        }
        .container {
            max-width: 400px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            font-weight: bold;
        }
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="tel"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Register</h2>
        <form id="registerForm" action="/register" method="POST">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="phone">Contact Number</label>
                <input type="tel" id="phone" name="phone">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <label for="confirmPassword">Confirm Password</label>
                <input type="password" id="confirmPassword" name="confirmPassword" required>
            </div>
            <div class="form-group">
                <label for="address">Address</label>
                <textarea id="address" name="address" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label for="profilePicture">Profile Picture</label>
                <input type="file" id="profilePicture" name="profilePicture">
            </div>
            <div class="form-group">
                <input type="submit" value="Register">
            </div>
        </form>
    </div>
</body>
</html>

Could you please assign this task to me? I'm excited to work on implementing this UI design. Looking forward to contributing to the project!

Trisha-tech commented 6 months ago

Hello @sadvika05 , Go for it. All the Best

Vivek-yadav01 commented 6 months ago

mam above mentioned code is in basic HTML , I can go for tailwind and reactjs , can u assign this to me please

rawani123 commented 6 months ago

can you assign this to i can make the above changes in react and integrqate it with the backend

McoderTanmay commented 6 months ago

Hello @Trisha-tech Ma'am can Assign this issue to me i will be using React and it will be interactive and Responsive

gayathrik23 commented 6 months ago

@Trisha-tech can you assign this issue to me under Gssoc'24

MehtabAsHellic commented 6 months ago

Hi Admin,

I'm interested in contributing to your project as part of GSSoC. I've been following your work and believe my skills align well. You can find my portfolio here: (https://sites.google.com/view/uibymehtab) and LinkedIn (https://www.linkedin.com/in/mehtabarkhan/)

Thanks, Mehtab

dhruv8433 commented 6 months ago

@Trisha-tech i would like to work on this issue and i am intrested to design register page for user here is example of register page

in this registration i can add

Name
.Email Address
Contact Number
Password
Confirm Password
Address
Profile Picture

as mentioned

Aman0413 commented 6 months ago

I can design register page using tailwind css with responsivness. Register page will look like this. Could you please assign to me ?

drick-infinity commented 6 months ago

can you assign this issue to me I will create a register page with better ui using tailwind css in react can you assign this issue to me so i worked on it assign this issue to me GSSOC'24

Rajneeshkarya commented 6 months ago

Hi @Trisha-tech, I am contributor to GSSOC'24 and also worked as assistant developer could you please assign this issue to me?

sadvika05 commented 6 months ago

@Trisha-tech is this issue got closed? because I can see login and signup pages are already present right now did they get added or now i made it should i make a pull request my committing??

Trisha-tech / OnlineBookSales

Design a Register Page UI #2