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

T12J #90

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

T12J #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d8506e7
FOoter navbar login sign up
TJ456 Oct 7, 2024
8fad0e4
created a responsible navbar signin footer and signup page
TJ456 Oct 7, 2024
4aab6a0
make responsible signup singin navbar footer
TJ456 Oct 7, 2024
996ae9a
make responsibe navbar footer login and signup
TJ456 Oct 7, 2024
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
1 change: 1 addition & 0 deletions Museum345
Open in desktop
Submodule Museum345 added at 5fab2d
Empty file added git
View file
Open in desktop
Empty file.
75 changes: 53 additions & 22 deletions public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,48 +43,79 @@ a.navbar-brand {
}

/*footer*/
.f-info-links a{
.f-info {
text-align: center;
background-color: #ebebeb;
display: flex;
flex-direction: column; /* Stack items vertically */
align-items: center; /* Center items horizontally */
padding: 1rem; /* Add padding for better spacing */
}

.f-info-links,
.f-info-socials,
.f-info-brand {
width: 100%; /* Ensure full width */
margin-bottom: 0.5rem; /* Add space between sections */
}

/* Link styles */
.f-info-links a {
text-decoration: none;
color: #222222;
margin: 0 1rem; /* Space out links */
}
.f-info-links a:hover{

.f-info-links a:hover {
text-decoration: underline !important;
}
.f-info-socials a{

.f-info-socials a {
text-decoration: none;
color: #222222;
}
.f-info-socials a:hover{

.f-info-socials a:hover {
color: #000;
}
.f-info-links,
.f-info-socials,
.f-info-brand{

/* Socials icons */
.f-info-socials {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
justify-content: center; /* Center social links */
flex-wrap: wrap; /* Wrap icons on smaller screens */
}

.f-info-socials i{
.f-info-socials i {
font-size: 1.3rem !important;
margin-right: 1rem !important;
transition: color 0.3s ease, transform 0.3s ease; /* Added smooth transition */
margin: 0 1rem; /* Horizontal spacing between icons */
transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition */
}
.f-info-socials i:hover{

.f-info-socials i:hover {
color: dodgerblue; /* Change icon color on hover */
transform: scale(1.1); /* Slight zoom effect */
}

.f-info{
text-align: center;
height: 5.5rem;
background-color: #ebebeb;
display:flex;
flex-wrap: wrap;
justify-content: center;
align-items: space-evenly;
/* Brand information */
.f-info-brand {
margin-top: 0.5rem; /* Space above brand text */
}

/* Responsive adjustments */
@media (max-width: 576px) {
.f-info-links,
.f-info-socials,
.f-info-brand {
flex-direction: column; /* Stack elements vertically on small screens */
}

.f-info-socials i {
margin-right: 0; /* Remove right margin on smaller screens */
margin-bottom: 0.5rem; /* Add bottom margin for spacing */
}
}

/*cards*/
.listing-card{
border: none !important;
Expand Down
32 changes: 20 additions & 12 deletions views/includes/footer.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
<footer>
<div class="f-info">
<div class="f-info-socials">
<a href="https://www.facebook.com/mscat03?mibextid=kFxxJD"><i class="fa-brands fa-facebook"></i></a>
<a href="https://www.instagram.com/ms_cat_03?igsh=OWk3dzhtMWt2eW9m"><i class="fa-brands fa-instagram"></i></a>
<a href="https://x.com/AnkitaN19599770?t=cUqfRvzHmUaWgSirIWFnFQ&s=08"><i class="fa-brands fa-x-twitter"></i></a>
<a href="https://www.linkedin.com/in/ankita-nath-6ab5a121b?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app"><i class="fa-brands fa-linkedin"></i></a>
</div>
<div class="f-info-brand">&copy; 2024 Indian Museum Kolkata- All Rights Resreved</div>
<div class="f-info-links">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
<footer class="bg-light py-4">
<div class="container">
<div class="row justify-content-center text-center">
<!-- Social Media Icons -->
<div class="col-12 f-info-socials mb-3">
<a href="https://www.facebook.com/mscat03?mibextid=kFxxJD" class="mx-2"><i class="fa-brands fa-facebook"></i></a>
<a href="https://www.instagram.com/ms_cat_03?igsh=OWk3dzhtMWt2eW9m" class="mx-2"><i class="fa-brands fa-instagram"></i></a>
<a href="https://x.com/AnkitaN19599770?t=cUqfRvzHmUaWgSirIWFnFQ&s=08" class="mx-2"><i class="fa-brands fa-x-twitter"></i></a>
<a href="https://www.linkedin.com/in/ankita-nath-6ab5a121b?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app" class="mx-2"><i class="fa-brands fa-linkedin"></i></a>
</div>

<!-- Brand Information -->
<div class="col-12 f-info-brand mb-3">
&copy; 2024 Indian Museum Kolkata - All Rights Reserved
</div>
<!-- Privacy and Terms Links -->
<div class="col-12 f-info-links">
<a href="/privacy" class="mx-2">Privacy</a>
<a href="/terms" class="mx-2">Terms</a>
</div>
</div>
</div>
</footer>
36 changes: 21 additions & 15 deletions views/includes/navbar.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,35 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="/listings"><i class="fa fa-compass" aria-hidden="true"></i></a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
>
<!-- Brand Icon -->
<a class="navbar-brand" href="/listings">
<i class="fa fa-compass" aria-hidden="true"></i>
</a>

<!-- Toggler Button for Collapsing Navbar on Small Screens -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<!-- Collapsible Navbar Links -->
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<!-- Left side nav -->
<div class="navbar-nav">
<a class="nav-link logo" href="/listings">Explore</a>
</div>

<!-- Right side nav (aligned to the right using ms-auto) -->
<div class="navbar-nav ms-auto">
<a class="nav-link" href="/listings/new">Create-New</a>
<% if(!currUser){%>
<a class="nav-link" href="/login"><b id="highlight-text">Log In</b></a>
<a class="nav-link" href="/signup"><b id="highlight-text">Sign Up</b></a>
<%}%>
<% if(currUser){%>
<a class="nav-link" href="/logout"><b id="highlight-text">Log Out</b></a>
<%}%>

<!-- Conditional rendering for Login/Signup or Logout -->
<% if (!currUser) { %>
<a class="nav-link" href="/login"><b id="highlight-text">Log In</b></a>
<a class="nav-link" href="/signup"><b id="highlight-text">Sign Up</b></a>
<% } %>
<% if (currUser) { %>
<a class="nav-link" href="/logout"><b id="highlight-text">Log Out</b></a>
<% } %>
</div>
</div>
</div>
</nav>
</nav>
4 changes: 2 additions & 2 deletions views/users/login.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<% layout("/layouts/boilerplate") -%>
<div class="container">
<div class="row justify-content-center align-items-center min-vh-100">
<div class="col-md-6 col-lg-4">
<div class="col-10 col-sm-8 col-md-6 col-lg-4">
<div class="card shadow-lg">
<div class="card-body p-5">
<h2 class="card-title text-center mb-4">Login</h2>
Expand Down Expand Up @@ -65,4 +65,4 @@
box-shadow: none;
border-color: #ced4da;
}
</style>
</style>
45 changes: 18 additions & 27 deletions views/users/signup.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<% layout("/layouts/boilerplate") -%>
<div class="container">
<div class="row justify-content-center align-items-center min-vh-100">
<div class="col-md-6 col-lg-4">
<div class="col-md-8 col-lg-4">
<div class="card shadow-lg">
<div class="card-body p-5">
<h2 class="card-title text-center mb-4">Sign Up</h2>
Expand All @@ -10,34 +10,26 @@
<label for="username" class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-person-fill"></i></span>
<input name="username" id="username" placeholder="Enter your username" type="text" class="form-control" required>
</div>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Please enter a valid username
<input name="username" id="username" placeholder="Enter your username" type="text" class="form-control" required aria-label="Username">
</div>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Please enter a valid username</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
<input name="email" id="email" placeholder="Enter your email" type="email" class="form-control" required>
</div>
<div class="invalid-feedback">
Please enter a valid email address
<input name="email" id="email" placeholder="Enter your email" type="email" class="form-control" required aria-label="Email">
</div>
<div class="invalid-feedback">Please enter a valid email address</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
<input name="password" id="password" placeholder="Enter your password" type="password" class="form-control" required>
</div>
<div class="invalid-feedback">
Please enter a password
<input name="password" id="password" placeholder="Enter your password" type="password" class="form-control" required aria-label="Password">
</div>
<div class="invalid-feedback">Please enter a password</div>
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
Expand Down Expand Up @@ -94,15 +86,14 @@
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>
</script>