Skip to content

Commit

Permalink
Merge pull request #851 from DeekshaVarshney123/func_change
Browse files Browse the repository at this point in the history 
Sign up and sign in buttons are now in working.
  • Loading branch information
@vimistify
vimistify authored Oct 17, 2024
2 parents 18189d5 + cb3165e commit 5701d57
Showing 1 changed file with 267 additions and 43 deletions.
310 changes: 267 additions & 43 deletions up.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand All @@ -16,7 +16,7 @@
<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
<body>
<!-- preloader -->
preloader
<div id="preloader">
<div class="wrapper">
<div class="box-wrap">
Expand Down Expand Up @@ -51,45 +51,47 @@
<div class="circle"></div>
<div class="circle"></div>
<div class="container">
<div class="forms-container">
<div class="signin-signup">
<form action="#" class="sign-in-form">
<h2 class="title">Sign in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" />
</div>
<div class="input-field">
<i class="fas fa-lock" id="toggle-password"></i>
<input
type="password"
placeholder="Password"
id="password-input"
/>
</div>
<input type="submit" value="Login" class="btn solid" />
<p class="social-text">Or Sign in with social platforms</p>
<div class="social-media">
<a
href="https://www.google.com"
target="_blank"
class="social-icon"
>
<i
class="fab fa-google"
style="font-size: 24px; color: #4285f4"
></i>
</a>
<a
href="https://facebook.com/YourPage"
target="_blank"
class="social-icon"
>
<i
class="fab fa-facebook-f"
style="font-size: 24px; color: #4267b2"
></i>
</a>
<div class="forms-container">
<div class="signin-signup">
<form action="#" class="sign-in-form">
<h2 class="title">Sign in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" />
</div>
<div class="input-field">
<i class="fas fa-lock" id="toggle-password"></i>
<input
type="password"
placeholder="Password"
id="password-input"
/>
</div>
<input type="submit" value="Login" class="btn solid" />
<p class="social-text">Or Sign in with social platforms</p>
<div class="social-media">
<a
href="https://www.google.com"
target="_blank"
class="social-icon"
>
<i
class="fab fa-google"
style="font-size: 24px; color: #4285f4"
>
</i>
</a>
<a
href="https://facebook.com/YourPage"
target="_blank"
class="social-icon"
>
<i
class="fab fa-facebook-f"
style="font-size: 24px; color: #4267b2"
>
</i>
</a>
<a
href="https://github.com/YourGitHubProfile"
target="_blank"
Expand All @@ -100,8 +102,8 @@ <h2 class="title">Sign in</h2>
style="font-size: 24px; color: #333"
></i>
</a>
</div>
</form>
</div>
</form>
<form action="#" class="sign-up-form">
<h2 class="title">Sign up</h2>
<div class="input-field">
Expand Down Expand Up @@ -211,6 +213,7 @@ <h3>One of us ?</h3>
</div>
</div>
<script src="preloader.js"></script>
<script>
const sign_in_btn = document.querySelector("#sign-in-btn");
Expand Down Expand Up @@ -552,4 +555,225 @@ <h3>One of us ?</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
</body>
</html> -->





<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Register & Login</title>
<link rel="stylesheet" href="preloaderStyle.css">
<link rel="stylesheet" href="src/css/up.css" />
<link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>

<!-- Preloader -->
<div id="preloader">
<div class="wrapper">
<div class="box-wrap">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
<div class="box six"></div>
</div>
</div>
</div>

<div class="container">
<div class="forms-container">
<div class="signin-signup">
<!-- Sign In Form -->
<form action="#" class="sign-in-form">
<h2 class="title">Sign in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" required />
</div>
<div class="input-field">
<i class="fas fa-lock" id="toggle-password"></i>
<input type="password" placeholder="Password" id="password-input" required />
</div>
<input type="submit" value="Login" class="btn solid" />
<p class="social-text">Or Sign in with social platforms</p>
<div class="social-media">
<a href="https://www.google.com" target="_blank" class="social-icon"><i class="fab fa-google" style="font-size: 24px; color: #4285f4"></i></a>
<a href="https://facebook.com/YourPage" target="_blank" class="social-icon"><i class="fab fa-facebook-f" style="font-size: 24px; color: #4267b2"></i></a>
<a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon"><i class="fab fa-github" style="font-size: 24px; color: #333"></i></a>
</div>
</form>

<!-- Sign Up Form -->
<form action="#" class="sign-up-form">
<h2 class="title">Sign up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" required />
</div>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" placeholder="Email" required />
</div>
<div class="input-field">
<i class="fas fa-lock" id="toggle-password-signup"></i>
<input type="password" placeholder="Password" id="password-input-signup" required />
</div>
<input type="submit" class="btn" value="Sign up" />
</form>
</div>
</div>

<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>New here ?</h3>
<p>Discover new experiences with AmbuFlow! <br />Get access to exclusive content and features. <br />Create your account.</p>
<button class="btn transparent" id="sign-up-btn">Sign up</button>
</div>
</div>
<div class="panel right-panel">
<div class="content">
<h3>One of us ?</h3>
<p>Welcome to our community</p>
<button class="btn transparent" id="sign-in-btn">Sign in</button>
</div>
</div>
</div>
</div>

<script src="preloader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js">

</script>
<script>
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");

// Toggle between sign up and sign in
sign_up_btn.addEventListener("click", () => {
container.classList.add("sign-up-mode");
});

sign_in_btn.addEventListener("click", () => {
container.classList.remove("sign-up-mode");
});

// Sign in form submission
document.querySelector(".sign-in-form").addEventListener('submit', function(event) {
event.preventDefault();

const username = document.querySelector(".sign-in-form input[type='text']").value;
const password = document.querySelector(".sign-in-form input[type='password']").value;

// Retrieve stored credentials
const storedUsername = localStorage.getItem('username');
const storedPassword = localStorage.getItem('password');

console.log(`Stored Username: ${storedUsername}, Input Username: ${username}`);
console.log(`Stored Password: ${storedPassword}, Input Password: ${password}`);

// Validate input against stored credentials
if (username === storedUsername && password === storedPassword) {
alert('Login successful!');
window.location.href = 'index.html';
} else {
alert('Invalid username or password');
}
});

// Sign up form submission
document.querySelector(".sign-up-form").addEventListener('submit', function(event) {
event.preventDefault();

const username = document.querySelector(".sign-up-form input[type='text']").value;
const email = document.querySelector(".sign-up-form input[type='email']").value;
const password = document.querySelector(".sign-up-form input[type='password']").value;

if (username === '' || email === '' || password === '') {
alert('Please fill in all fields');
return;
}

// Store the username and password in localStorage
localStorage.setItem('username', username);
localStorage.setItem('password', password); // Ensure you're storing the password

alert('Your account is created successfully. Please login to access the website.');
container.classList.remove("sign-up-mode"); // Optionally switch to sign in mode
});


// Toggle password visibility
function togglePassword(fieldId, icon) {
const field = document.getElementById(fieldId);
field.type = field.type === 'password' ? 'text' : 'password';
icon.classList.toggle('fa-lock-open');
icon.classList.toggle('fa-lock');
}

document.getElementById("toggle-password").addEventListener("click", function() {
togglePassword("password-input", this);
});

document.getElementById("toggle-password-signup").addEventListener("click", function() {
togglePassword("password-input-signup", this);
});

// Circle animation
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";
circle.style.scale = (circles.length - index) / circles.length;

circle.x = x;
circle.y = y;

const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});

requestAnimationFrame(animateCircles);
}

animateCircles();
</script>
</body>
</html>

0 comments on commit 5701d57

Please sign in to comment.