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.

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

Added signup page #648

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
18 changes: 17 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
{
"liveServer.settings.port": 5503
"liveServer.settings.port": 5503,
"cSpell.words": [
"assests",
"authorsname",
"backspeed",
"Blogzen",
"boxauthor",
"boxauthorsname",
"boxdiv",
"boxtext",
"darktheme",
"datestyle",
"namestyle",
"navs",
"signup",
"themechangebtn"
]
}
5 changes: 0 additions & 5 deletions css/navbar.css
Original file line number Diff line number Diff line change
Expand Up @@ -126,11 +126,6 @@ body{
color: #2a95f6;
}
#loginButton:hover{
border: 1px solid #f6f8f9;
background-color:#208FF4 ;
color: white;
}
#signup:hover{
border: 1px solid #208FF4;
background-color: transparent;
color: #2a95f6;
Expand Down
5 changes: 3 additions & 2 deletions css/sec3.css
Original file line number Diff line number Diff line change
Expand Up @@ -143,9 +143,10 @@
}

@media(max-width: 620px) {
#signup {

/* #signup {
display: none;
}
} */

#loginButton {
display: none;
Expand Down
7 changes: 3 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,8 @@
<div class="navs2">
<!-- <img src="img/final logo 1.png" alt="" /> -->
<img src="assests/moon.png" alt="image" id="themeImg">
<button id="loginButton" class="button_nav txtColor hello" ><a href="login.html">
LogIn</a></button>
<button id="signup" class="button_nav txtColor">Sign Up</button>
<button id="loginButton" class="button_nav txtColor" ><a href="login.html">
Get Started</a></button>
<button onclick="click" id="Calender" class="button_nav txtColor1 hello">Calendar</button>
</div>
</div>
Expand Down Expand Up @@ -207,7 +206,7 @@ <h3 class="chatbox__title">Blogzen 24/7</h3>
<ul class="chatbot__box">
<li class="chatbot__chat incoming">
<span class="material-symbols-outlined">smart_toy</span>
<p>Welcome !</p>
<p>Welcome!</p>
</li>
<li class="chatbot__chat outgoing">
<!-- <p>...</p> -->
Expand Down
100 changes: 57 additions & 43 deletions login.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-database-compat.js"></script>
<link rel="stylesheet" href="login1.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
Expand All @@ -34,10 +33,10 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="../Css-files/scroll-top-button.css">
<link rel="stylesheet" href="../Css-files/content.css">
<script src="../hamburger.js"></script>

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

<link rel="stylesheet" href="login1.css">
<title>Login</title>
</head>

Expand All @@ -52,49 +51,47 @@
<div class="navs2">
<!-- <img src="img/final logo 1.png" alt="" /> -->
<img src="assests/moon.png" alt="image" id="themeImg">
<button id="loginButton" class="button_nav txtColor hello" ><a href="login.html">
LogIn</a></button>
<button id="signup" class="button_nav txtColor">Sign Up</button>
<button id="loginButton" class="button_nav txtColor" ><a href="login.html">
Get Started</a></button>
<button onclick="click" id="Calender" class="button_nav txtColor1 hello">Calendar</button>
</div>
</div>

<section>
<div class="main-login">
<div class="left-login" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
<h1><b>Login Here</b></h1>
<img src="1.png" class="left-login-image" alt="food">
</div>
<div class="right-login">
<div class="card-login" data-aos="zoom-out-right" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
<button class="close-btn">&times;</button>
<h1>LOGIN</h1>
<br>
<div class="textfield">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Enter Email">
</div>
<div class="textfield">
<label for="username">Username</label>
<input type="text" name="Username" id="username" placeholder="Username">
</div>
<div class="textfield">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter Password">
<span id="login-hide">
<i class='icon bx bxs-hide' style="font-size: 27px;"></i>
</span>
<div class="main-login">
<div class="left-login" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
<!-- <h1><b>Login Here</b></h1> -->
<img src="1.png" class="left-login-image" alt="food">
</div>
<div class="right-login">
<div class="card-login" data-aos="zoom-out-right" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
<button class="close-btn">&times;</button>
<h1>LOGIN</h1>
<br>
<div class="textfield">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Enter Email">
</div>
<div class="textfield">
<label for="username">Username</label>
<input type="text" name="Username" id="username" placeholder="Username">
</div>
<div class="textfield">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter Password">
<span id="login-hide">
<i class='icon bx bxs-hide' style="font-size: 27px;"></i>
</span>
</div>
<button class="btn-login" onclick="validateLogin()">Login</button>
<h3>
<center>Don't have account?<a href="signup.html" id="signup">SIGNUP</a></center>
</h3>
</div>
<button class="btn-login" onclick="validateLogin()">Login</button>
<h3>
<center>OR</center>
</h3>
<button id="google-login">Login with Google</button>
</div>
</div>
</div>
</section>
<div class="footer">
</section>
<div class="footer">
<div class="socials">
<div class="footer_titles">Follow us on our socials</div>
<div class="icons">
Expand Down Expand Up @@ -178,8 +175,25 @@ <h3>
});
}
}
// Google Sign-In
document.getElementById('google-login').addEventListener('click', () => {

// Redirect to signup page
// JavaScript to handle the tab switching
document.getElementById('signupLink').addEventListener('click', function(event) {
event.preventDefault(); // Prevent default anchor behavior

// Hide all tabs
var tabContents = document.querySelectorAll('.tab-content');
tabContents.forEach(function(tab) {
tab.style.display = 'none';
});

// Display the signup tab
document.getElementById('signupTab').style.display = 'block';
});

/*
// Google Sign-In
document.getElementById('google-login').addEventListener('click', () => {
const provider = new firebase.auth.GoogleAuthProvider();
auth.signInWithPopup(provider)
.then((result) => {
Expand All @@ -201,8 +215,8 @@ <h3>
.catch((error) => {
console.error('Error logging in with Google:', error);
alert(error.message);
});
});
});
}); */
</script>
</body>

Expand Down
34 changes: 21 additions & 13 deletions login1.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");

body {
margin: 0;
font-family: 'Noto Sans', sans-serif;
font-family: "Noto Sans", sans-serif;
}

body * {
Expand Down Expand Up @@ -30,7 +30,7 @@ body * {
flex-direction: column;
}

.left-login>h1 {
.left-login > h1 {
color: white;
font-size: 2.5vw;
}
Expand Down Expand Up @@ -59,7 +59,7 @@ body * {
background-color: white;
}

.card-login>h1 {
.card-login > h1 {
/* color: #8A2525; */
color: rgb(84, 50, 208);
font-weight: 800;
Expand All @@ -82,26 +82,26 @@ body * {
left: 84.9%;
}

.textfield>input {
.textfield > input {
width: 100%;
border: none;
border-radius: 10px;
padding: 15px;
background: #E6E6FA;
background: #e6e6fa;
color: #030707de;
font-size: 12pt;
box-shadow: 0px 3px 10px #00000056;
outline: none;
box-sizing: border-box;
}

.textfield>label {
.textfield > label {
color: black;
margin-bottom: 10px;
font-weight: bold;
}

.textfield>input::placeholder {
.textfield > input::placeholder {
color: #000000;
}

Expand All @@ -124,7 +124,7 @@ body * {
.btn-login:hover {
background: rgba(111, 50, 208, 0.9);
}

/*
#google-login {
width: 100%;
padding: 16px 0;
Expand All @@ -142,8 +142,9 @@ body * {
}

#google-login:hover {
background: rgba(111, 50, 208, 0.9);
background: hsla(263, 63%, 51%, 0.9);
}
*/

.close-btn {
background-color: transparent;
Expand All @@ -156,8 +157,15 @@ body * {
color: white;
}



h3 {
color: hsla(263, 63%, 51%, 0.9);
font-size: 12px;
font-weight: 800;
}
h3 .a {
color: rgb(0, 0, 0);
font-weight: 800;
}

@media only screen and (max-width: 950px) {
.card-login {
Expand All @@ -170,7 +178,7 @@ body * {
flex-direction: column;
}

.left-login>h1 {
.left-login > h1 {
display: none;
}

Expand Down
Loading