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.

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

made signup and calendar button working add signup form to the signup button and a calendar icon to the calendar button text after opening one popup the other popup will be closed #715

Closed
wants to merge 1 commit into from
Closed

made signup and calendar button working add signup form to the signup button and a calendar icon to the calendar button text after opening one popup the other popup will be closed #715

Show file tree
Hide file tree
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
86 changes: 86 additions & 0 deletions css/desktop_9.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -500,3 +500,89 @@ border-bottom: 2px solid rgb(255, 255, 255);
margin-bottom: 10px;
}
}



/* Signup Popup Styles */
.overlay2 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}

.popup2 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: white;
width: 400px;
box-shadow: 0px 0px 10px 0px #000;
border-radius: 10px;
}

.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.popup-header h2 {
margin: 0;
}

.closeBtn {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}

.form-group input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}

button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #AA77FF;
border: none;
border-radius: 5px;
color: white;
font-size: 16px;
cursor: pointer;
}

button[type="submit"]:hover {
background-color: #7D41E2;
}

#signupMessage {
color: green;
text-align: center;
margin-top: 20px;
}

5 changes: 5 additions & 0 deletions css/navbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -385,3 +385,8 @@ body{
}


.button_nav i {
margin-right: 8px; /* Adjust this value as needed */
}


67 changes: 66 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
<link rel="stylesheet" href="css/sec1.css" />
<link rel="stylesheet" href="css/sec2.css" />
<link rel="stylesheet" href="css/sec3.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- <link rel="stylesheet" href="css/sec4.css" /> -->
<!-- material -->
<link rel="stylesheet"
Expand Down Expand Up @@ -46,7 +48,11 @@
<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 onclick="click" id="Calender" class="button_nav txtColor1 hello">Calendar</button>
<button onclick="click" id="Calender" class="button_nav txtColor1 hello">
<i class="fa-solid fa-calendar"></i> Calendar
</button>


</div>
</div>
<!--Calender-->
Expand All @@ -56,10 +62,12 @@
<button class="prevBtn" id="prevBtn">
<i class="fa-solid fa-chevron-left"></i>
</button>

<div class="monthYear" id="monthYear"></div>
<button class="nextBtn" id="nextBtn">
<i class="fa-solid fa-chevron-right"></i>
</button>
<button class="closeBtn" id="closeCalendar"><i class="fa-solid fa-times"></i></button>
</div>
<div class="days">
<div class="day">Mon</div>
Expand All @@ -71,9 +79,44 @@
<div class="day">Sun</div>
</div>
<div class="dates" id="dates"></div>

</div>
</div>

<!-- Signup Popup (Assuming this is how your signup popup would be) -->
<div class="overlay2" id="overlay2">
<div class="popup2">
<!-- Signup content here -->
<!-- Signup content here -->
<div class="popup-header">
<h2>Sign Up</h2>
<button class="closeBtn" id="closeSignup"><i class="fa-solid fa-times"></i></button>
</div>
<form id="signupForm">
<div class="form-group">
<label for="signupUsername">Username</label>
<input type="text" id="signupUsername" name="username" required>
</div>
<div class="form-group">
<label for="signupEmail">Email</label>
<input type="email" id="signupEmail" name="email" required>
</div>
<div class="form-group">
<label for="signupPassword">Password</label>
<input type="password" id="signupPassword" name="password" required>
</div>
<div class="form-group">
<label for="signupConfirmPassword">Confirm Password</label>
<input type="password" id="signupConfirmPassword" name="confirmPassword" required>
</div>
<button type="submit">Sign Up</button>
</form>
<div id="signupMessage" style="display: none;">You have signed up successfully!</div>


</div>
</div>

<!-- <div class="overlay" id="overlay">
<div class="popup">
<div class="option">
Expand Down Expand Up @@ -167,6 +210,28 @@
</div>

<script>

document.getElementById("Calender").addEventListener("click", function() {
document.getElementById("overlay1").style.display = "flex";
document.getElementById("overlay2").style.display = "none";
});

document.getElementById("signup").addEventListener("click", function() {
document.getElementById("overlay2").style.display = "flex";
document.getElementById("overlay1").style.display = "none";
});

document.getElementById("closeCalendar").addEventListener("click", function() {
document.getElementById("overlay1").style.display = "none";
});

document.getElementById("closeSignup").addEventListener("click", function() {
document.getElementById("overlay2").style.display = "none";
});




document.getElementById("subscriptionForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent the form from submitting

Expand Down