Skip to content

Commit

Permalink
Merge pull request #1698 from shivam8112005/new
Browse files Browse the repository at this point in the history 
Added js for profile icon, login, signup and hamburger menu in responsive mode
  • Loading branch information
@ANSHIKA-26
ANSHIKA-26 authored Nov 6, 2024
2 parents f498d0e + 9e4a691 commit e7bb7dc
Showing 1 changed file with 106 additions and 9 deletions.
115 changes: 106 additions & 9 deletions bookmarks.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,12 @@ <h2>WordWise</h2>
</a>
</div>

<div class="hamburger" id="hamburger">
<div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
<span></span>
<span></span>
<span></span>
</div>
<div class="nav-links1">
<div class="nav-links1" id="navLinks">
<a href= "index.html">Home</a>
<a href= "blog.html">Leading Blog</a>
<a href= "start_writing.html">Start Writing</a>
Expand All @@ -109,19 +109,96 @@ <h2>WordWise</h2>

<div class="dropdown">
<!-- Profile Icon -->
<a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
<i class="fas fa-user-circle"></i>
</a>
<a href="javascript:void(0);" class="profile-link" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
<img src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Icon" style="width: 50px; height: 50px; border-radius: 50%; margin-top: -17px;">
</a>

<!-- Dropdown Menu -->
<ul class="dropdown-menu" id="dropdownMenu">
<ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
<li><a href="./profile.html">My Profile</a></li>
<li><a href="#login" onclick="openForm('login')">Login</a></li>
<li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
</ul>
</ul>
</div>

<script src="signup.js"></script> <!-- Link to your JavaScript file -->


<!-- loginform -->
<div class="form-popup" id="loginForm">
<form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
<span class="close-icon" onclick="closeForm('login')">&times;</span>
<h2 class="text-center">Login</h2>
<div class="form-group">
<label for="loginEmail"><b>Email</b></label>
<input type="email" class="form-control" id="loginEmail" placeholder="Enter Email" name="email" required>
</div>
<div class="form-group position-relative">
<label for="loginPsw"><b>Password</b></label>
<input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
<i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
</div>
<div class="forgot">
<a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
</div>
<button type="submit" class="btn btn-secondary w-100 mb-3">LOGIN</button>
<style>
.btn:hover {
transition: 0.5s ease;
}
</style>
<!-- Google Login Button -->
<button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
<img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
Sign in with Google</button>
<button type="button" class="btn btn-secondary w-100" onclick="closeForm('login')">CLOSE</button>
<!-- Link to Signup Page -->
<div class="new">
<p>Don't have an account? <a href="javascript:void(0);" onclick="openForm('signup')">Sign up
here</a></p>
</div>
</form>
</div>

<!-- Signup Form -->
<div class="form-popup" id="signupForm">
<form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
<span class="close-icon" onclick="closeForm('signup')">&times;</span>
<h2 class="text-center">Signup</h2>
<div class="form-group">
<label for="name"><b>Full Name</b></label>
<input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name" required>
</div>
<div class="form-group">
<label for="signupEmail"><b>Email</b></label>
<input type="email" class="form-control" id="signupEmail" placeholder="Enter Email" name="email" required>
</div>
<div class="form-group position-relative">
<label for="signupPsw"><b>Password</b></label>
<input type="password" class="form-control" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
<i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
</div>
<div class="form-group position-relative">
<label for="confirmPsw"><b>Confirm Password</b></label>
<input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password" name="confirmPsw" required minlength="6">
<i class="bi bi-eye eye-icon" id="toggleConfirmPassword" onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
</div>
<button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</button>
<!-- Google Sign-In Button -->
<button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
<img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
Sign in with Google</button>
<button type="button" class="btn btn-secondary w-100" onclick="closeForm('signup')">CLOSE</button>
<!-- Link to Login Page -->
<div class="new">
<p>Already have an account? <a href="javascript:void(0);" onclick="openForm('login')">Login
here</a></p>
</div>
</form>
</div>



<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
Expand All @@ -137,6 +214,26 @@ <h2>WordWise</h2>
</div>
</nav>
<script>

// profile icon toggle menu
function toggleMenu() {
const menu = document.getElementById('profileMenu');
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
const menu = document.getElementById('profileMenu');
if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
menu.style.display = 'none';
}
}






const checkbox = document.getElementById('checkbox');

checkbox.addEventListener('change', () => {
Expand Down Expand Up @@ -367,7 +464,7 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
});
});
</script>


<script src="script.js"></script>
<script src="main.js"></script>
</body>
</html>

1 comment on commit e7bb7dc

@vercel
Copy link

@vercel vercel bot commented on e7bb7dc Nov 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

word-wise – ./

word-wise-anshikas-projects-45924011.vercel.app
word-wise-git-main-anshikas-projects-45924011.vercel.app
word-wise-pi.vercel.app

Please sign in to comment.