Skip to content

Commit

Permalink
Merge pull request anuragverma108#1055 from kashnx/register
Browse files Browse the repository at this point in the history 
Design and Implement Register Page Frontend with Responsive Navbar and Login Page Enhancements
  • Loading branch information
@anuragverma108
anuragverma108 authored May 30, 2024
2 parents 680dd77 + 7a16a17 commit 5ee4a7a
Show file tree
Hide file tree
Showing 3 changed files with 177 additions and 61 deletions.
60 changes: 48 additions & 12 deletions assets/css/login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -557,6 +557,7 @@ a:active {color: var(--old-rose);}
overflow: hidden;
border-radius: 2%;
box-shadow: 0 0 15px 5px #24004628;

/* margin-bottom: 10rem;
margin-left: 4rem; */
}
Expand Down Expand Up @@ -698,9 +699,11 @@ label {
transition: 0.8s ease-in-out;
margin-bottom: 45px;
padding-bottom: 45px;
height: fit-content;
}
#login{
color: var(--old-rose);

}
#login:hover {
color: white;
Expand Down Expand Up @@ -795,7 +798,7 @@ label {
text-align: center;
}

.forget-password {
.forget-password .loginButton {
font-size: small;
text-align: center;
margin: -20px 0 10px;
Expand Down Expand Up @@ -834,15 +837,18 @@ label {

.main {
width: 100%;
height:420px;

}
.register{
width: 100%;
/* width: 100%;
margin-top: -30px;
margin-left: 0%;
margin-left: 50px;
padding-left: 0%;
margin-bottom: 0px;
padding-bottom: 45px;
padding-bottom: 45px; */
text-align: center;


}
.register .form label{
margin-top:0px;
Expand All @@ -851,10 +857,19 @@ label {
margin-top: 10px;
margin-bottom: 10px;
}
#register{
/* #register{
margin-top: 20px;
margin-bottom: 25px;
}
} */
}
/* .register1{
margin-left: 33%;
} */

.register_link{
text-align: center;
color: rgb(247, 150, 150);
margin-bottom: 10px;
}

.input-box{
Expand Down Expand Up @@ -914,10 +929,18 @@ label {
}
.form {
gap:0;
padding:10px;
}
#register{
margin-top: 1px;
}
.register{
width: 100%;
margin-left: 0%;
padding-left: 0%;
margin-bottom: 0px;
padding-bottom: 45px;
}
.main {
padding: 16px;
}
/* #or{
margin-top: -10px;
} */
Expand All @@ -928,7 +951,7 @@ label {

@media (max-width: 480px) {
.main {
padding: 0px;
padding: 6px;
}
.input,
.form button {
Expand Down Expand Up @@ -1147,4 +1170,17 @@ body.dark-mode {
/* right: -20px; */
bottom: 20px;
/* right: 20px; */
}}
}}

.remember-me-label {
font-size: 14px;
display: inline-flex;
align-items: center;
}

.remember-me-label input {
margin-right: 8px;
/* Adjusted margin */
margin-top: 1px;
/* Added margin-top for better alignment */
}
21 changes: 13 additions & 8 deletions assets/html/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,25 +162,30 @@ <h2>Join us by creating an account or log in if you already have an account.</h2
<img src="../images/eye-close.png" alt="Eye close-image" id="eyeicon-login">
</div>
<button type="submit" name="Login" id="login">Submit</button>
<p class="forget-password">
<div class="forget-password">
Forgot Password?
<a href="forgot-pass.html" id="forgot_password_link">Reset Here</a>
</p>
</div>

<div id="or">Or</div>
<button id="google-sign-in"> Sign In with Google </button>
<div class="register">
<!-- <div class="register1">New to SwapReads?</div> -->
<a href="mylogin.html" class="register_link">Register Here</a>
</div>
</form>
</div>

<div class="register">
<!-- <div class="register">
<form class="form" id="register-form">
<label for="chk" aria-hidden="true">Create Account</label>
<input class="input" type="email" name="email" id="email" placeholder="Email" required />
<div class="input-box">
<input class="input" type="password" name="pswd" id="password" placeholder="Password" required />
<img src="../images/eye-close.png" alt="Eye close-image" id="eyeicon">
</div>
</div> -->

<div>
<!-- <div>
<div class="progress">
<div id="password-strength" class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Expand All @@ -190,11 +195,11 @@ <h2>Join us by creating an account or log in if you already have an account.</h2
<li><span class="one-special-char"><i class="fas fa-circle" aria-hidden="true"></i>&nbsp;Special Character (!@#$%^&*)</span></li>
<li><span class="eight-character"><i class="fas fa-circle" aria-hidden="true"></i>&nbsp;At least 8 Character</span></li>
</ul>
</div>
</div> -->

<button type="submit" name="register" id="register">Register</button>
<!-- <button type="submit" name="register" id="register">Register</button>
<div id="or">Or</div>
<button id="google-signup"> Sign Up with Google </button>
<button id="google-signup"> Sign Up with Google </button> -->
</form>
</div>
</div>
Expand Down
157 changes: 116 additions & 41 deletions assets/html/mylogin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,42 +9,117 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>How to create Firebase login and register?</title>
<link rel="stylesheet" href="../css/login.css" />
<link rel="stylesheet" href="..//css/style.css">

<style>
.remember-me-label {
font-size: 14px;
display: inline-flex;
align-items: center;
}

.remember-me-label input {
margin-right: 8px;
/* Adjusted margin */
margin-top: 1px;
/* Added margin-top for better alignment */
}
</style>
<script src="../js/script.js" defer></script>
<script src="../js/scroll-reveal.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

</head>

<body>
<div class="navbar">
<div class="navbar-header">
<a href="index.html">
<img class="close-icon" src="./assets/images/close.png" alt="Close">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" id="logout" style="display: none">Log Out</a></li>
</ul>
</div>
</div>
<div class="note">
<h1>
Hey !! Welcome to SwapReads. Please get yourself Registered or verify your credentials to get started.
</h1>
</div>
<br />
<header class="header header-anim" data-header>

<div class="container">

<nav class="navbar" data-navbar>
<a href="index.html#home" class="logo" style="display:flex;">
<img src="../images/new_logo_banner_dark.png" alt="" class="logopic" style=" width:0.1px;opacity: 0;" />
</a>

<ul class="navbar-list">
<a href="index.html#home">
<img src="../images/new_logo_banner_dark.png" class="logopic" style=" width: 150px;">

<li class="navbar-item">
<a href="index.html#home" class="navbar-link" data-nav-link><i
class="ri-home-fill"></i> Home</a>
</li>

<li class="navbar-item">
<a href="index.html#benefits" class="navbar-link" data-nav-link><i
class="ri-bar-chart-fill"></i> Benefits</a>
</li>

<li class="navbar-item">
<a href="index.html#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link><i
class="ri-bar-chart-fill"></i> Genre</a>

</li>

<li class="navbar-item">
<a href="index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
class="ri-customer-service-2-fill"></i> Contact</a>
</li>

<li class="navbar-item">
<a href="rate.html" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
</li>
<li class="navbar-item" id="logout-r">
<a href="../html/login.html" class="navbar-link">Logout</a>
</li>


<li class="navbar-item dropdown" id="more-dropdown">
<a href="#" class="navbar-link" id="more-link">More
<svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24"><path fill="currentcolor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z"/></svg></a>
<div class="dropdown-menu" id="dropdown-menu">

<ul class="dropdown-menu-list">
<li class="dropdown-menu-item">
<a href="index.html#chapters" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link><i class="ri-medal-fill"></i> Literary Realms</a>
</li>
<li class="dropdown-menu-item">
<a href="index.html#pricing" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i> Pricing</a>
</li>
<li class="dropdown-menu-item">
<a href="./assets/html/addremovebook.html" class="navbar-link">Booklist for Swapping</a>
</li>
<li class="dropdown-menu-item">
<a href="book_recommend.html" class="navbar-link" data-nav-link>
<i class="ri-customer-service-2-fill"></i> Book Recommendation
</a>
</li>
<li class="dropdown-menu-item">
<a href="#E-books" onclick="lenis.scrollTo('#E-books')" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
</li>
<li class="dropdown-menu-item">
<a href="./assets/html/about.html" class="navbar-link">About</a>
</li>
</ul>
</div>
</li>

<li>

<div class="switch-container">
<input type="checkbox" id="switch" class="switch-checkbox">
<label for="switch" class="switch-label">
<div class="switch-button">
<span class="material-icons sun-icon"></span>
<span class="material-icons moon-icon"></span>
</div>
</label>
</div>

</li>
</ul>
</nav>

<button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
<ion-icon name="menu-outline" aria-hidden="true" class="open"></ion-icon>

<ion-icon name="close-outline" aria-hidden="true" class="close"></ion-icon>
</button>

</div>
</header>
<div class="note">
<h1>Welcome to SwapReads</h1>
<h2>Join us by creating an account or log in if you already have an account.</h2>
</div>
<br />
<div class="container">
<div class="main">
<input type="checkbox" id="chk" aria-hidden="true" />
Expand All @@ -60,13 +135,11 @@ <h1>
</form>
</div>

<div class="login">
<form class="form">
<label for="chk" aria-hidden="true">Login</label>
<input class="input" type="email" name="email" id="email" placeholder="Email" required="" />
<input class="input" type="password" name="pswd" id="password" placeholder="Password" required="" />
<button>Login</button>
</form>
<div class="login form">


<button><a href="login.html">Login here</a></button>

</div>
</div>
</div>
Expand Down Expand Up @@ -164,5 +237,7 @@ <h1>
signOut(auth)
.then(() => {
console.log("Sign-out successful.");
})
})
});
});


0 comments on commit 5ee4a7a

Please sign in to comment.