Skip to content
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

Jump to bottom

Want to improve the design of Signup & Login page (#36) #138

Closed
wants to merge 2 commits into from
+175 −182
Closed

Want to improve the design of Signup & Login page (#36) #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3514514
Login page updated
rishu6263 Oct 3, 2024
79c0c18
Merge branch 'Anjaliavv51:main' into main
rishu6263 Oct 3, 2024
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
355 changes: 174 additions & 181 deletions Html-files/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,207 +9,200 @@
<link rel="stylesheet" href="../Css-files/login1.css">
<title>Retro</title>
<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=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

<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=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap" rel="stylesheet">

<style>

.circle{
z-index: 998;
width: 20px;
height: 20px;
border-radius: 50%;
pointer-events: none;
animation: colors 5s infinite;
position: fixed;
transform: translate(-50%,-50%);
}
.circle::before {
content: "";
position: fixed;
width: 50px;
height: 50px;
opacity: 0.2;
transform: translate(-30%,-30%);
border-radius: 50%;
}
</style>
<style>
.container {
width: 350px;
height: 500px;
perspective: 800px;
}

.container:hover > .card {
cursor: pointer;
transform: rotateY(180deg);
}

.card {
height: 100%;
width: 100%;
position: relative;
transition: transform 1500ms;
transform-style: preserve-3d;
border-radius: 40px;
}

.front,
.back {
height: 100%;
width: 100%;
border-radius: 2rem;
box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
position: absolute;
backface-visibility: hidden;
}

.front {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.back {
background-color: #3a3a3a;
transform: rotateY(180deg);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5rem;
}
:root{
--ff-philosopher: "Philosopher", sans-serif;
--ff-poppins: "Poppins", sans-serif;
}
</style>
.textfield {
position: relative;
margin-bottom: 20px;
display: flex;
flex-direction: column;
}

.textfield input {
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
outline: none;
font-family: var(--ff-poppins);
font-size: 16px;
}

.textfield label {
margin-bottom: 5px;
color: black;
font-family: var(--ff-poppins);
font-size: 14px;
}

.show-btn {
position: absolute;
top: 52%;
right: 10px;
transform: translateY(-50%);
background-color: transparent;
border: none;
font-size: 14px;
font-family: var(--ff-poppins);
cursor: pointer;
color: #333;
}

.remember-me {
display: flex;
align-items: center;
margin-bottom: 20px;
}

.remember-me input[type="checkbox"] {
margin-right: 10px;
}

.remember-me label {
font-family: var(--ff-poppins);
color: black;
font-size: 14px;
}

.btn-login, #google-login, .back-btn, .signup-btn {
background-color: transparent;
padding: 10px 0;
border-radius: 5px;
border: 1px solid black;
width: 100%;
font-family: var(--ff-poppins);
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

.btn-login:hover, #google-login:hover, .back-btn:hover, .signup-btn:hover {
background-color: rgba(0, 0, 0, 0.1);
}

.forgot-password {
text-align: center;
font-size: 14px;
margin-bottom: 20px;
}
</style>

</head>
<body>
<div class="circle-container">
<div class="circle" style="background-color: rgb(255, 181, 107) !important; left: 504px; top: 59px; scale: 1;"></div>
<div class="circle" style="background-color: rgb(253, 175, 105) !important; left: 504px; top: 59px; scale: 0.95;"></div>
<div class="circle" style="background-color: rgb(248, 157, 99) !important; left: 504px; top: 59px; scale: 0.9;"></div>
<div class="circle" style="background-color: rgb(245, 151, 97) !important; left: 504px; top: 59px; scale: 0.85;"></div>
<div class="circle" style="background-color: rgb(239, 134, 94) !important; left: 504px; top: 59px; scale: 0.8;"></div>
<div class="circle" style="background-color: rgb(236, 128, 93) !important; left: 504px; top: 59px; scale: 0.75;"></div>
<div class="circle" style="background-color: rgb(227, 110, 92) !important; left: 504px; top: 59px; scale: 0.7;"></div>
<div class="circle" style="background-color: rgb(223, 104, 92) !important; left: 504px; top: 59px; scale: 0.65;"></div>
<div class="circle" style="background-color: rgb(213, 88, 92) !important; left: 504px; top: 59px; scale: 0.6;"></div>
<div class="circle" style="background-color: rgb(209, 82, 92) !important; left: 504px; top: 59px; scale: 0.55;"></div>
<div class="circle" style="background-color: rgb(197, 65, 93) !important; left: 504px; top: 59px; scale: 0.5;"></div>
<div class="circle" style="background-color: rgb(192, 59, 93) !important; left: 504px; top: 59px; scale: 0.45;"></div>
<div class="circle" style="background-color: rgb(178, 44, 94) !important; left: 504px; top: 59px; scale: 0.4;"></div>
<div class="circle" style="background-color: rgb(172, 38, 94) !important; left: 504px; top: 59px; scale: 0.35;"></div>
<div class="circle" style="background-color: rgb(156, 21, 95) !important; left: 504px; top: 59px; scale: 0.3;"></div>
<div class="circle" style="background-color: rgb(149, 15, 95) !important; left: 504px; top: 59px; scale: 0.25;"></div>
<div class="circle" style="background-color: rgb(131, 0, 96) !important; left: 504px; top: 59px; scale: 0.2;"></div>
<div class="circle" style="background-color: rgb(124, 0, 96) !important; left: 504px; top: 59px; scale: 0.15;"></div>
<div class="circle" style="background-color: rgb(104, 0, 96) !important; left: 504px; top: 59px; scale: 0.1;"></div>
<div class="circle" style="background-color: rgb(96, 0, 95) !important; left: 504px; top: 59px; scale: 0.05;"></div>
<!-- Circle animation (left unchanged) -->
</div>

<div class="main-login">
<div class="left-login" style="background-color: transparent;">
<div class="container">
<div class="card">
<div class="front" style="align-content: center;font-family: var(--ff-philosopher);">
<b style="transform: rotate(270deg);font-size: 30px;color: hsl(203, 30%,26%);"> Login to Save your Data!</b>
<b style="transform: rotate(270deg);font-size: 30px;color: hsl(203, 30%,26%);">Login to Save your Data!</b>
</div>
<div class="back" style="align-content: center;font-family: var(--ff-philosopher);background-color: transparent;color: hsl(203, 30%,26%);">
<b style="font-size: 40px;">Login Here</b> <br> Vinatge Collection is<br> waiting for You
<b style="font-size: 40px;">Login Here</b> <br> Vintage Collection is<br> waiting for You
</div>
</div>
</div>
</div>
<form action="">
<div class="right-login">
<div class="card-login">
<h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">LOGIN</h1>
<div class="textfield">
<label for="usuario" style="color: black;font-family:var(--ff-poppins);">Email / User Name</label>
<input required type="text" name="email" placeholder="Enter Email / UserName" style="font-family:var(--ff-poppins);">
</div>
<div class="textfield">
<label required for="password" style="color: black;font-family:var(--ff-poppins);">Password</label>
<input required type="password" name="password" placeholder="Enter Password" style="font-family:var(--ff-poppins);">
</div>
<button class="btn-login" style="color: black;font-family:var(--ff-poppins);"><a style="text-decoration: none;color: black;" href="logged.html">Login</a></button>
<button id="google-login" style="color: black;font-family:var(--ff-poppins);">Login with google</button>
</div>
</div>
</form>

<script>

const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

const colors = [
"#ffb56b",
"#fdaf69",
"#f89d63",
"#f59761",
"#ef865e",
"#ec805d",
"#e36e5c",
"#df685c",
"#d5585c",
"#d1525c",
"#c5415d",
"#c03b5d",
"#b22c5e",
"#ac265e",
"#9c155f",
"#950f5f",
"#830060",
"#7c0060",
"#680060",
"#60005f",
"#48005f",
"#3d005e"
];

circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});

window.addEventListener("mousemove", function (e) {
coords.x = e.clientX;
coords.y = e.clientY;

});

function animateCircles() {

let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
circle.style.left = x - 12 + "px";
circle.style.top = y - 12 + "px";
<!-- Enhanced Login Form -->
<form id="loginForm" action="logged.html" method="post" onsubmit="return handleLogin(event)">
<div class="right-login">
<div class="card-login">
<h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">LOGIN</h1>

<div class="textfield">
<label for="usuario" style="color: black;font-family:var(--ff-poppins);">Email / User Name</label>
<input required type="text" id="email" name="email" placeholder="Enter Email / UserName" style="font-family:var(--ff-poppins);">
<small id="emailError" style="color: red; display: none;">Please enter a valid email.</small>
</div>

circle.style.scale = (circles.length - index) / circles.length;
<div class="textfield">
<label for="password" style="color: black;font-family:var(--ff-poppins);">Password</label>
<input required type="password" id="password" name="password" placeholder="Enter Password" style="font-family:var(--ff-poppins);">
<button type="button" onclick="togglePasswordVisibility()">Show</button>
<small id="passwordError" style="color: red; display: none;">Password must be at least 6 characters.</small>
</div>

circle.x = x;
circle.y = y;
<div class="textfield">
<label>
<input type="checkbox" id="rememberMe"> Remember Me
</label>
</div>

const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});
<button type="submit" class="btn-login" style="color: black;font-family:var(--ff-poppins);">
Login
<div class="loading-spinner"></div>
</button>

<button id="google-login" style="color: black;font-family:var(--ff-poppins);">Login with Google</button>

<a href="forgot-password.html" style="text-decoration: none; color: blue; display: block; margin-top: 10px;">Forgot Password?</a>

<!-- Signup and Back Buttons -->
<div>don't have an account? </div>
<button class="btn-signup" style="color: black;font-family:var(--ff-poppins); margin-top: 10px;">
<a style="text-decoration: none;color: black;" href="signup.html">Sign Up</a>
</button>

<button class="btn-back" style="color: black;font-family:var(--ff-poppins); margin-top: 10px;">
<a style="text-decoration: none;color: black;" href="/Retro/">Back</a>
</button>
</div>
</div>
</form>

<script>
// Toggle password visibility
function togglePasswordVisibility() {
const passwordInput = document.getElementById('password');
const type = passwordInput.type === 'password' ? 'text' : 'password';
passwordInput.type = type;
}

// Form validation and submission handler
function handleLogin(event) {
event.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const emailError = document.getElementById('emailError');
const passwordError = document.getElementById('passwordError');

// Email validation
if (!validateEmail(email)) {
emailError.style.display = 'block';
return false;
} else {
emailError.style.display = 'none';
}

requestAnimationFrame(animateCircles);
}
// Password validation
if (password.length < 6) {
passwordError.style.display = 'block';
return false;
} else {
passwordError.style.display = 'none';
}

animateCircles();
</script>
// Show spinner
document.querySelector('.loading-spinner').style.display = 'block';

// Simulate login action with timeout
setTimeout(() => {
document.getElementById('loginForm').submit();
}, 2000);
}

// Email validation function
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(String(email).toLowerCase());
}
</script>
</div>
</body>
</html>
</html>
2 changes: 1 addition & 1 deletion Html-files/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,4 +305,4 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">SIGN U
animateCircles();
</script>
</body>
</html>
</html>