Skip to content

v8.2login1.html #57

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
Sumit01997 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

v8.2login1.html #57

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
181 changes: 83 additions & 98 deletions login1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Preload critical assets -->
<link rel="preload" href="../images/logo2-removebg-preview.png" as="image" fetchpriority="high">
<link rel="preload" href="../images/Taj Mahal Hero Image.png" as="image">

<link rel="preload" href="" as="image" fetchpriority="high">
<link rel="preload" href="../Map_my_Heritage/WhatsApp Image 2025-04-18 at 10.38.54_53a3599c.jpg" as="image">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<title>Login | Map My Heritage</title>
Expand All @@ -18,7 +17,6 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand d-flex align-items-center animate_animated animate_fadeIn" href="index.html">
<img src="../images/logo2-removebg-preview.png" alt="Map my Heritage Logo" height="40" class="mr-0">
Expand All @@ -35,44 +33,39 @@
<li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
<div class="navbar-nav">
<!-- Changed button to show active state since we're on the login page -->
<a class="btn btn-secondary" href="#" style="margin-right: 10px; background-color: #138808; color: #fff;">
<i class="fas fa-user-circle mr-1"></i> Login / Sign Up <span class="badge badge-light ml-1">Active</span>
</a>
</div>
</div>
</nav>

<!-- Login Container -->
<div class="login-container">
<div class="row no-gutters w-100 h-100">
<!-- Left side - Heritage image -->
<div class="col-md-6 d-none d-md-block">
<div class="login-image">
<!-- Photo overlay with tricolor gradient -->
<div class="login-overlay"></div>
<div class="login-quotes">
<div class="quote-box animate_animated animate_fadeIn">
<p class="quote-text">"India is the cradle of the human race, the birthplace of human speech, the mother of history, the grandmother of legend, and the great-grandmother of tradition."</p>
<p class="quote-author">- Mark Twain</p>
<img src="https://images4.alphacoders.com/762/762210.jpg" alt="Taj Mahal" style="width:100%; height:auto;">
</div>
</div>
</div>
</div>

<!-- Right side - Login form -->

<div class="col-md-6">
<div class="login-form-container">
<div class="login-tabs animate_animated animate_fadeIn">
<button class="tab-button active" id="login-tab">Login</button>
<button class="tab-button" id="register-tab">Register</button>
</div>

<!-- Login Form -->
<div id="login-form" class="animate_animated animate_fadeIn">

<div id="login-form" class="animate_animated animate_fadeIn">
<h2>Welcome Back</h2>
<p class="text-muted mb-4">Sign in to continue your heritage journey</p>

<form action="index.html" method="GET">
<div class="form-group">
<label for="email">Email</label>
Expand All @@ -83,7 +76,7 @@ <h2>Welcome Back</h2>
<input type="email" class="form-control" id="email" placeholder="Your email address" required>
</div>
</div>

<div class="form-group">
<label for="password">Password</label>
<div class="input-group">
Expand All @@ -98,19 +91,19 @@ <h2>Welcome Back</h2>
</div>
</div>
</div>

<div class="form-group d-flex justify-content-between align-items-center">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="remember-me">
<label class="form-check-label" for="remember-me">Remember me</label>
</div>
<a href="#" class="forgot-link">Forgot Password?</a>
</div>

<button type="submit" class="btn btn-primary btn-block login-btn">
<i class="fas fa-sign-in-alt mr-2"></i> Login
</button>

<div class="social-login">
<p class="text-center mt-4 mb-3">Or sign in with</p>
<div class="social-buttons">
Expand All @@ -127,12 +120,11 @@ <h2>Welcome Back</h2>
</div>
</form>
</div>

<!-- Register Form (initially hidden) -->

<div id="register-form" class="d-none animate__animated">
<h2>Create Account</h2>
<p class="text-muted mb-4">Join us to explore India's rich heritage</p>

<form action="index.html" method="GET">
<div class="form-group">
<label for="full-name">Full Name</label>
Expand All @@ -143,7 +135,7 @@ <h2>Create Account</h2>
<input type="text" class="form-control" id="full-name" placeholder="Your full name" required>
</div>
</div>

<div class="form-group">
<label for="register-email">Email</label>
<div class="input-group">
Expand All @@ -153,7 +145,7 @@ <h2>Create Account</h2>
<input type="email" class="form-control" id="register-email" placeholder="Your email address" required>
</div>
</div>

<div class="form-group">
<label for="register-password">Password</label>
<div class="input-group">
Expand All @@ -169,7 +161,7 @@ <h2>Create Account</h2>
</div>
<small class="form-text text-muted">Password must be at least 8 characters long</small>
</div>

<div class="form-group">
<label for="confirm-password">Confirm Password</label>
<div class="input-group">
Expand All @@ -179,18 +171,18 @@ <h2>Create Account</h2>
<input type="password" class="form-control" id="confirm-password" placeholder="Confirm your password" required>
</div>
</div>

<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="terms" required>
<label class="form-check-label" for="terms">I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a></label>
</div>
</div>

<button type="submit" class="btn btn-primary btn-block register-btn">
<i class="fas fa-user-plus mr-2"></i> Register
</button>

<div class="social-login">
<p class="text-center mt-4 mb-3">Or register with</p>
<div class="social-buttons">
Expand All @@ -212,78 +204,77 @@ <h2>Create Account</h2>
</div>
</div>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" defer></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" defer></script>

<script>
// Tab switching functionality
document.addEventListener('DOMContentLoaded', function() {
const loginTab = document.getElementById('login-tab');
const registerTab = document.getElementById('register-tab');
const loginForm = document.getElementById('login-form');
const registerForm = document.getElementById('register-form');

// Completely reset form classes before applying new ones
function resetFormClasses() {
// Reset all animation classes that might cause conflicts
loginForm.classList.remove(
'd-none',
'd-none',
'animate__fadeOutRight',
'animate__fadeOutLeft',
'animate__fadeOutLeft',
'animate__fadeInLeft',
'animate__fadeInRight'
);

registerForm.classList.remove(
'd-none',
'd-none',
'animate__fadeOutRight',
'animate__fadeOutLeft',
'animate__fadeOutLeft',
'animate__fadeInLeft',
'animate__fadeInRight'
);
}

loginTab.addEventListener('click', function() {
loginTab.classList.add('active');
registerTab.classList.remove('active');

// Reset all animation classes first
resetFormClasses();

// Show login form with animation
loginForm.classList.remove('d-none');

// Force a browser reflow to ensure animations work properly
void loginForm.offsetWidth;

// Apply new animation class
loginForm.classList.add('animate__fadeInLeft');

// Hide register form
registerForm.classList.add('animate__fadeOutRight');
setTimeout(() => {
registerForm.classList.add('d-none');
}, 500);
});

registerTab.addEventListener('click', function() {
registerTab.classList.add('active');
loginTab.classList.remove('active');

// Reset all animation classes first
resetFormClasses();

// Show register form
registerForm.classList.remove('d-none');

// Force a browser reflow to ensure animations work properly
void registerForm.offsetWidth;

// Apply new animation class
registerForm.classList.add('animate__fadeInRight');

// Hide login form
loginForm.classList.add('animate__fadeOutLeft');
setTimeout(() => {
Expand All @@ -296,7 +287,7 @@ <h2>Create Account</h2>
toggle.addEventListener('click', function() {
const passwordInput = this.parentElement.previousElementSibling;
const passwordIcon = this.querySelector('i');

if (passwordInput.type === 'password') {
passwordInput.type = 'text';
passwordIcon.classList.remove('fa-eye');
Expand All @@ -310,52 +301,46 @@ <h2>Create Account</h2>
});
// Dynamic quote cycling
const quotes = [
{
text: "India is the cradle of the human race, the birthplace of human speech, the mother of history, the grandmother of legend, and the great-grandmother of tradition.",
author: "Mark Twain"
},
{
text: "We owe a lot to the Indians, who taught us how to count, without which no worthwhile scientific discovery could have been made.",
author: "Albert Einstein"
},
{
text: "India has two million gods and worships them all. In religion all other countries are paupers; India is the only millionaire.",
author: "Mark Twain"
},
{
text: "India conquered and dominated China culturally for 20 centuries without ever having to send a single soldier across her border.",
author: "Hu Shih"
}
];
let currentQuote = 0;
const quoteText = document.querySelector('.quote-text');
const quoteAuthor = document.querySelector('.quote-author');

function changeQuote() {
const quoteBox = document.querySelector('.quote-box');
quoteBox.classList.add('animate__fadeOut');

setTimeout(() => {
currentQuote = (currentQuote + 1) % quotes.length;
quoteText.textContent = "${quotes[currentQuote].text}";
quoteAuthor.textContent = - ${quotes[currentQuote].author};

quoteBox.classList.remove('animate__fadeOut');
quoteBox.classList.add('animate__fadeIn');

setTimeout(() => {
quoteBox.classList.remove('animate__fadeIn');
}, 1000);
}, 500);
}
// Change quote every 10 seconds
setInterval(changeQuote, 10000);

// Fix any height issues on load
window.addEventListener('load', function() {
document.querySelector('.login-container').style.minHeight = 'calc(100vh - 76px)';
});
});
</script>
</body>
</html>
{
text: "India is the cradle of the human race, the birthplace of human speech, the mother of history, the grandmother of legend, and the great-grandmother of tradition.",
author: "Mark Twain"
},
{
text: "We owe a lot to the Indians, who taught us how to count, without which no worthwhile scientific discovery could have been made.",
author: "Albert Einstein"
},
{
text: "India has two million gods and worships them all. In religion all other countries are paupers; India is the only millionaire.",
author: "Mark Twain"
},
{
text: "India conquered and dominated China culturally for 20 centuries without ever having to send a single soldier across her border.",
author: "Hu Shih"
}
];
let currentQuote = 0;
const quoteText = document.querySelector('.quote-text');
const quoteAuthor = document.querySelector('.quote-author');

function changeQuote() {
const quoteBox = document.querySelector('.quote-box');
quoteBox.classList.add('animate__fadeOut');

setTimeout(() => {
currentQuote = (currentQuote + 1) % quotes.length;
quoteText.textContent = `"${quotes[currentQuote].text}"`;
quoteAuthor.textContent = `- ${quotes[currentQuote].author}`;

quoteBox.classList.remove('animate__fadeOut');
quoteBox.classList.add('animate__fadeIn');

setTimeout(() => {
quoteBox.classList.remove('animate__fadeIn');
}, 1000);
}
// Change quote every 10 seconds
setInterval(changeQuote, 10000);

// Fix any height issues on load
window.addEventListener('load', function() {
document.querySelector('.login