diff --git a/assets/js/popups.js b/assets/js/popups.js
index b984d36..6d13e35 100644
--- a/assets/js/popups.js
+++ b/assets/js/popups.js
@@ -6,17 +6,35 @@ document.addEventListener('DOMContentLoaded', function() {
popup.classList.remove('flex');
popup.classList.add('hidden');
});
- document.body.classList.remove('overflow-hidden'); // Remove overflow-hidden class from body
+ // Only remove overflow-hidden if no popups are open
+ if (!isAnyPopupOpen()) {
+ document.body.classList.remove('overflow-hidden'); // Remove overflow-hidden class from body
+ }
}
- // Function to open the popup
+ // Function to check if any popup is currently open
+ function isAnyPopupOpen() {
+ return Array.from(document.querySelectorAll('[popupID]')).some(popup => popup.classList.contains('flex'));
+ }
+
+ // Function to open or toggle the popup
function openPopup(popupID) {
- closeAllPopups(); // Close all other popups first
const popup = document.querySelector(`[popupID="${popupID}"]`);
if (popup) {
- popup.classList.remove('hidden');
- popup.classList.add('flex');
- document.body.classList.add('overflow-hidden'); // Add overflow-hidden class to body
+ if (popup.classList.contains('flex')) {
+ // If the popup is already open, close it
+ closePopup(popupID);
+ } else {
+ // Close all other popups first
+ closeAllPopups();
+ popup.classList.remove('hidden');
+ popup.classList.add('flex');
+
+ // Check if the popup has the popupKeepScroll attribute
+ if (!popup.hasAttribute('popupKeepScroll')) {
+ document.body.classList.add('overflow-hidden'); // Add overflow-hidden class to body
+ }
+ }
}
}
@@ -26,7 +44,14 @@ document.addEventListener('DOMContentLoaded', function() {
if (popup) {
popup.classList.remove('flex');
popup.classList.add('hidden');
- document.body.classList.remove('overflow-hidden'); // Remove overflow-hidden class from body
+
+ // Check if the popup has the popupKeepScroll attribute
+ if (!popup.hasAttribute('popupKeepScroll')) {
+ // Only remove overflow-hidden if no other popups are open
+ if (!isAnyPopupOpen()) {
+ document.body.classList.remove('overflow-hidden'); // Remove overflow-hidden class from body
+ }
+ }
}
}
@@ -38,7 +63,7 @@ document.addEventListener('DOMContentLoaded', function() {
if (match) {
const actionType = match[1]; // 'open' or 'close'
- const popupBaseID = match[2]; // The part after 'open' or 'close'
+ const popupBaseID = match[2].trim(); // The part after 'open' or 'close'
if (actionType === 'open') {
openPopup(popupBaseID);
diff --git a/index.html b/index.html
index 04ebca6..c657c31 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,7 @@
<div class="w-full flex flex-col justify-center items-center relative">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
<div class="w-full flex flex-row gap-[25px] justify-between p-[10px] flex-wrap">
- <div class="max-w-[200px] min-w-[200px]">
+ <div class="max-w-[200px] min-w-[200px] flex flex-row justify-start items-center">
<!-- <img src="./assets/images/logo.png" class=""></img> -->
<a href="index.html" class="font-bold text-2xl transition-all ease duration-[0.3s] hover:text-linkMain">Cellar Social</a>
</div>
@@ -39,18 +39,13 @@
<button class="px-[15] py-[3px] transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Login</button>
</div>
</div>
- <div class="lg:hidden">
- <button class="flex flex-col justify-center items-center">
- <i class="bx bx-menu text-3xl"></i>
- </button>
- </div>
</div>
</div>
</div>
<div class="w-full flex flex-col justify-center items-center border-t-[1px] border-bgMain/10">
<div class="max-w-[1400px] w-full flex flex-col justify-center items-center px-[10px] relative">
<div class="flex flex-row grow-[1] gap-[50px] justify-end items-center py-[10px] max-lg:hidden">
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="events.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Events</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@@ -80,7 +75,7 @@
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="promotions.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Promotions</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@@ -90,11 +85,48 @@
</div>
</div>
</div>
+
+ <!-- mobile bottom nav start -->
+ <div class="w-full hidden flex-col bg-bgMain2 text-bgMain border-t-[1px] border-bgMain/10 fixed bottom-[0px] max-lg:flex">
+ <div popupID="MobileNav" popupKeepScroll class="hide-scrollbar w-full h-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10">
+ <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Sake</a>
+ <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Coffee</a>
+ <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Spirits & Liqueurs</a>
+ <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Wine</a>
+ </div>
+ <div popupID="ProfileMobile" popupKeepScroll class="hide-scrollbar w-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10">
+ <a href="profile.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Profile</a>
+ <a href="settings.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Settings</a>
+ <a href="index.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Logout</a>
+ </div>
+
+ <div class="w-full flex flex-row gap-[10px]">
+ <a href="index.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+ <i class="bx bxs-home text-2xl"></i>
+ </a>
+ <a href="promotions.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+ <i class="bx bx-purchase-tag text-2xl"></i>
+ </a>
+ <a href="events.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+ <i class="bx bx-calendar-event text-2xl"></i>
+ </a>
+ <a href="search.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+ <i class="bx bx-search text-2xl"></i>
+ </a>
+ <button popupAction="openProfileMobile" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+ <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-[30px] h-[30px] object-cover bg-black/50">
+ </button>
+ <d popupAction="openMobileNav" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+ <i class="bx bx-menu text-2xl"></i>
+ </d>
+ </div>
+ </div>
+ <!-- mobile bottom nav end -->
</div>
<!-- main navbar end -->
<!-- main middle start -->
- <div class="w-full flex flex-col grow-[1] pt-[100px]">
+ <div class="w-full flex flex-col grow-[1] pt-[100px] overflow-hidden">
<!-- hero start -->
<div class="w-full flex flex-col gap-[25px] justify-center items-center relative h-[calc(100vh-100px)] relative overflow-hidden border-b-[1px] border-bgMain2/15">
diff --git a/product.html b/product.html
index 4fc4554..da82557 100644
--- a/product.html
+++ b/product.html
@@ -24,7 +24,7 @@
<div class="w-full flex flex-col justify-center items-center relative">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
<div class="w-full flex flex-row gap-[25px] justify-between p-[10px] flex-wrap">
- <div class="max-w-[200px] min-w-[200px]">
+ <div class="max-w-[200px] min-w-[200px] flex flex-row justify-start items-center">
<!-- <img src="./assets/images/logo.png" class=""></img> -->
<a href="index.html" class="font-bold text-2xl transition-all ease duration-[0.3s] hover:text-linkMain">Cellar Social</a>
</div>
@@ -58,7 +58,7 @@
<div class="w-full flex flex-col justify-center items-center border-t-[1px] border-bgMain/10">
<div class="max-w-[1400px] w-full flex flex-col justify-center items-center px-[10px] relative">
<div class="flex flex-row grow-[1] gap-[50px] justify-end items-center py-[10px] max-lg:hidden">
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="events.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Events</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@@ -88,7 +88,7 @@
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="promotions.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Promotions</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@@ -154,7 +154,7 @@
</div>
<div class="w-full flex flex-row gap-[10px] flex-wrap">
<button popupAction="openReviewsSum" class="flex flex-row bg-bgScore5 text-bgMain text-sm relative">
- <p class="px-[10px] py-[5px]">Average score</p>
+ <p class="px-[10px] py-[5px]">cellar.social Rating</p>
<p class="px-[10px] py-[5px] bg-white/25">Exceptional</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
diff --git a/profile.html b/profile.html
index 13dff63..bc970f3 100644
--- a/profile.html
+++ b/profile.html
@@ -24,7 +24,7 @@
<div class="w-full flex flex-col justify-center items-center relative">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
<div class="w-full flex flex-row gap-[25px] justify-between p-[10px] flex-wrap">
- <div class="max-w-[200px] min-w-[200px]">
+ <div class="max-w-[200px] min-w-[200px] flex flex-row justify-start items-center">
<!-- <img src="./assets/images/logo.png" class=""></img> -->
<a href="index.html" class="font-bold text-2xl transition-all ease duration-[0.3s] hover:text-linkMain">Cellar Social</a>
</div>
@@ -47,18 +47,13 @@
</div>
</div>
</div>
- <div class="lg:hidden">
- <button class="flex flex-col justify-center items-center">
- <i class="bx bx-menu text-3xl"></i>
- </button>
- </div>
</div>
</div>
</div>
<div class="w-full flex flex-col justify-center items-center border-t-[1px] border-bgMain/10">
<div class="max-w-[1400px] w-full flex flex-col justify-center items-center px-[10px] relative">
<div class="flex flex-row grow-[1] gap-[50px] justify-end items-center py-[10px] max-lg:hidden">
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="events.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Events</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@@ -88,7 +83,7 @@
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="promotions.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Promotions</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@@ -98,6 +93,44 @@
</div>
</div>
</div>
+
+ <!-- mobile bottom nav start -->
+ <div class="w-full hidden flex-col bg-bgMain2 text-bgMain border-t-[1px] border-bgMain/10 fixed bottom-[0px] max-lg:flex">
+ <div popupID="MobileNav" popupKeepScroll class="hide-scrollbar w-full h-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10">
+ <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Sake</a>
+ <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Coffee</a>
+ <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Spirits & Liqueurs</a>
+ <a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Wine</a>
+ </div>
+ <div popupID="ProfileMobile" popupKeepScroll class="hide-scrollbar w-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10">
+ <a href="profile.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Profile</a>
+ <a href="settings.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Settings</a>
+ <a href="index.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Logout</a>
+ </div>
+
+ <div class="w-full flex flex-row gap-[10px]">
+ <a href="index.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+ <i class="bx bxs-home text-2xl"></i>
+ </a>
+ <a href="promotions.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+ <i class="bx bx-purchase-tag text-2xl"></i>
+ </a>
+ <a href="events.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+ <i class="bx bx-calendar-event text-2xl"></i>
+ </a>
+ <a href="search.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+ <i class="bx bx-search text-2xl"></i>
+ </a>
+ <button popupAction="openProfileMobile" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+ <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-[30px] h-[30px] object-cover bg-black/50">
+ </button>
+ <d popupAction="openMobileNav" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
+ <i class="bx bx-menu text-2xl"></i>
+ </d>
+ </div>
+ </div>
+ <!-- mobile bottom nav end -->
+
</div>
<!-- main navbar end -->
@@ -188,6 +221,37 @@
<!-- main footer end -->
<!-- popups start -->
+ <div popupID="MobileNav" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center">
+ <div class="w-full h-full flex flex-col justify-start items-center relative">
+ <div class="w-full h-full flex flex-col justify-start items-center">
+ <div class="w-full grow-[1] flex flex-col justify-start items-center">
+ <div class="w-full flex flex-col grow-[1] bg-bgMain shadow-lg gap-[5px] px-[10px]">
+ <div class="flex flex-row justify-between items-center gap-[10px] p-[10px] border-b-[1px] border-b-bgMain2/25">
+ <p class="font-bold text-2xl">Cellar Social</p>
+ <button popupAction="closeMobileNav" class="mr-[-10px] transition-all ease duration-[0.3s] px-[10px] hover:bg-bgMain2 hover:text-bgMain">
+ <i class="bx bx-menu text-3xl"></i>
+ </button>
+ </div>
+ <div class="w-full grow-[1] flex flex-col pt-[10px]">
+ <!-- popup x start -->
+ <div class="w-full flex flex-col gap-[15px] grow-[1]">
+ <div class="w-full flex flex-row">
+ <p>s1</p>
+ </div>
+ <div class="w-full flex flex-col gap-[10px] grow-[1] border-y-[1px] border-bgMain2/25 overflow-auto">
+ <p>s2</p>
+ </div>
+ <div class="w-full flex flex-row">
+ <p>s3</p>
+ </div>
+ </div>
+ <!-- popup x end -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
<!-- popups end -->
<!-- SCRIPTS START-->
diff --git a/search.html b/search.html
index fbf2562..d7ace02 100644
--- a/search.html
+++ b/search.html
@@ -24,7 +24,7 @@
<div class="w-full flex flex-col justify-center items-center relative">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
<div class="w-full flex flex-row gap-[25px] justify-between p-[10px] flex-wrap">
- <div class="max-w-[200px] min-w-[200px]">
+ <div class="max-w-[200px] min-w-[200px] flex flex-row justify-start items-center">
<!-- <img src="./assets/images/logo.png" class=""></img> -->
<a href="index.html" class="font-bold text-2xl transition-all ease duration-[0.3s] hover:text-linkMain">Cellar Social</a>
</div>
@@ -58,7 +58,7 @@
<div class="w-full flex flex-col justify-center items-center border-t-[1px] border-bgMain/10">
<div class="max-w-[1400px] w-full flex flex-col justify-center items-center px-[10px] relative">
<div class="flex flex-row grow-[1] gap-[50px] justify-end items-center py-[10px] max-lg:hidden">
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="events.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Events</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@@ -88,7 +88,7 @@
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
- <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <a href="promotions.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Promotions</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>