Skip to content

Enhanced UI of Sign Up page #1306

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+362 −12
Open

Enhanced UI of Sign Up page #1306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
680b36b
Create new_index.html
ruchagosavi May 20, 2023
699606c
Enhanced UI Of SignUp page
ruchagosavi Jun 4, 2023
6c65964
Merge branch 'main' into new_branch
ruchagosavi Jun 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions new_index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<!-- Add your existing head content here -->
<!-- ... -->

<!-- Add a link to the external CSS file -->
<link rel="stylesheet" href="style.css" />

<!-- Add a link to the Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">

<!-- Add a link to Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<title>SIGN UP - AEC Library</title>
</head>

<body>
<!-- Move the existing code within the body tag into a wrapper div -->
<div class="wrapper">
<h1 id="err"></h1>
<div class="section">
<div class="header">
AEC Library - Sign Up
</div>
<form class="signUp-form" id="form">
<!-- Move the form content into separate divs for layout -->
<div class="form-box">
<div class="form-group">
<!-- Update the icon class to use "fa-address-card-o" instead of "fa-address-book-o" -->
<i class="fa fa-address-card-o"></i>
<input type="text" name="" id="fullName" placeholder="Name" />
</div>
<div class="form-group">
<i class="fa fa-envelope"></i>
<input type="email" name="" id="email" placeholder="Email" />
</div>
<div class="form-group">
<i class="fa fa-lock"></i>
<input type="password" name="" id="password" placeholder="Password" />
</div>
<div class="form-group no-border">
<input type="radio" name="gender" id="male" value="MALE" />
<label for="male">Male</label>

<input type="radio" name="gender" id="female" value="FEMALE" />
<label for="female">Female</label>
</div>
<div class="button-container">
<button type="submit">Submit</button>
</div>
</div>
</form>
<div class="redirect">
Already have an account?
<button>
<a href="/Login_page/login_page.html" style="color: rosybrown">Login</a>
</button>
</div>
</div>

<div class="quiz-exit">
<a href="/index.html">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: #635147;">
<path d="M21 11H6.414l5.293-5.293-1.414-1.414L2.586 12l7.707 7.707 1.414-1.414L6.414 13H21z"></path>
</svg>
</a>
</div>
</div>

<!-- Move the script tags to the end of the body tag -->
<script src="https://unpkg.com/@supabase/supabase-js"></script>
<script src="index.js"></script>
</body>

</html>
83 changes: 80 additions & 3 deletions sign-up-page/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!-- <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
Expand Down Expand Up @@ -70,10 +70,10 @@ <h1 id="err"></h1>
</div>

</div>
<!-- <div class="logged_in" style="display: block">
<div class="logged_in" style="display: block">
<span id="username">You Are Already Logged In</span>
<button id="logged_out">Log Out</button>
</div> -->
</div>

<div class="quiz-exit">
<a href="/index.html"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: #635147;">
Expand All @@ -95,4 +95,81 @@ <h1 id="err"></h1>
<script src="index.js"></script>
</body>

</html> -->

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>

<link rel="stylesheet" href="style.css" />


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<title>SIGN UP - AEC Library</title>
</head>

<body>

<div class="wrapper">
<h1 id="err"></h1>
<div class="section">
<div class="header">
AEC Library - Sign Up
</div>
<form class="signUp-form" id="form">

<div class="form-box">
<div class="form-group">

<i class="fa fa-address-card-o"></i>
<input type="text" name="" id="fullName" placeholder="Name" />
</div>
<div class="form-group">
<i class="fa fa-envelope"></i>
<input type="email" name="" id="email" placeholder="Email" />
</div>
<div class="form-group">
<i class="fa fa-lock"></i>
<input type="password" name="" id="password" placeholder="Password" />
</div>
<div class="form-group no-border">
<input type="radio" name="gender" id="male" value="MALE" />
<label for="male">Male</label>

<input type="radio" name="gender" id="female" value="FEMALE" />
<label for="female">Female</label>
</div>
<div class="button-container">
<button type="submit">Submit</button>
</div>
</div>
</form>
<div class="redirect">
Already have an account?
<button>
<a href="/Login_page/login_page.html" style="color: rosybrown">Login</a>
</button>
</div>
</div>

<div class="quiz-exit">
<a href="/index.html">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: #635147;">
<path d="M21 11H6.414l5.293-5.293-1.414-1.414L2.586 12l7.707 7.707 1.414-1.414L6.414 13H21z"></path>
</svg>
</a>
</div>
</div>

<script src="https://unpkg.com/@supabase/supabase-js"></script>
<script src="index.js"></script>
</body>

</html>
36 changes: 35 additions & 1 deletion sign-up-page/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const form = document.getElementById("form");
/*const form = document.getElementById("form");
const fullName = document.getElementById("firstName");
const username = document.getElementById("username");
const email = document.getElementById("email");
Expand Down Expand Up @@ -73,3 +73,37 @@ logged_out.addEventListener("click", (e) => {
const { error } = _supabase.auth.signOut();
location.reload();
});
*/
form.addEventListener("submit", (e) => {
e.preventDefault();
const fullName = document.getElementById("fullName").value;
const email = document.getElementById("email").value;
// You can add additional form field values as needed

// Perform any necessary validation here

// Simulate successful sign-up
displaySuccessMessage(fullName, email);
});

function displaySuccessMessage(fullName, email) {
const successMessage = `Congratulations, ${fullName}! You have successfully signed up with email ${email}.`;
alert(successMessage);
}

document.addEventListener('DOMContentLoaded', function() {
// Get the form element
var form = document.getElementById('form');

// Attach an event listener for form submission
form.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting

// Get the input values
var fullName = document.getElementById('fullName').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var gender = document.querySelector('input[name="gender"]:checked').value;
window.location.href = '/success.html';
});
});
Loading