cellar/cs-design
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

settings page prep, user profile, submission, bio, info page

Browse Source
This commit is contained in:
free ko 2025-04-26 00:26:01 +03:00
parent e584572ae5
commit 49da3e557d
9 changed files with 1541 additions and 378 deletions

146
assets/js/componentLoader.js

@ -17,7 +17,7 @@
</a>
</div>
<div class="flex flex-row gap-[10px] cursor-pointer relative">
<button class="px-[15] py-[3px] text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Login</button>
<button popupAction="openRoles" class="px-[15] py-[3px] text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Login</button>
</div>
</div>
</div>
@ -38,12 +38,6 @@
<div class="h-[2px] w-full bg-btnMain"></div>
</div>
</a>
<a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px] transition-all ease duration-[0.3s] group-hover:text-textMain">Coffee</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-btnMain"></div>
</div>
</a>
<a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px] transition-all ease duration-[0.3s] group-hover:text-textMain">Spirits & Liqueurs</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
@ -71,7 +65,6 @@
<div class="w-full hidden flex-col bg-bgMain2 text-bgMain border-t-[1px] border-white/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-textMain2 font-bold border-b-[1px] border-white/10 whitespace-nowrap">
<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>
@ -81,7 +74,7 @@
<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]">
<div class="w-full flex flex-row gap-[10px] overflow-auto hide-scrollbar">
<a href="index.html" class="grow-[1] flex flex-col gap-[2px] text-textMain2 justify-center items-center text-sm p-[10px]">
<i class="bx bxs-home text-2xl"></i>
</a>
@ -94,7 +87,7 @@
<a href="search.html" class="grow-[1] flex flex-col gap-[2px] text-textMain2 justify-center items-center text-sm p-[10px]">
<i class="bx bx-search text-2xl"></i>
</a>
<button href="search.html" class="grow-[1] flex flex-col gap-[2px] text-textMain2 justify-center items-center text-sm p-[10px]">
<button popupAction="openRoles" href="search.html" class="grow-[1] flex flex-col gap-[2px] text-textMain2 justify-center items-center text-sm p-[10px]">
<i class="bx bx-user text-2xl"></i>
</button>
<button popupAction="openMobileNav" class="grow-[1] flex flex-col gap-[2px] text-textMain2 justify-center items-center text-sm p-[10px]">
@ -117,6 +110,11 @@
</div>
<div class="grow-[1] flex flex-row gap-[50px] justify-end">
<div class="flex flex-row grow-[1] gap-[10px] text-base font-bold justify-end items-center max-lg:hidden">
<div class="flex flex-row h-full justify-center items-center gap-[10px] cursor-pointer relative">
<a href="submit.html" class="px-[12px] py-[6px] flex flex-row h-full justify-center items-center text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-plus"></i>
</a>
</div>
<div class="flex flex-row h-full justify-center items-center gap-[10px] cursor-pointer relative">
<a href="search.html" class="px-[12px] py-[6px] flex flex-row h-full justify-center items-center text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-search"></i>
@ -124,12 +122,12 @@
</div>
<div class="relative inline-block">
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[200px] relative group">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-[30px] h-[30px] object-cover bg-black/50"></img>
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-[30px] min-w-[30px] h-[30px] object-cover bg-black/50"></img>
<p class="overflow-hidden whitespace-nowrap text-ellipsis px-[15] py-[3px] transition-all ease duration-[0.3s] group-hover:bg-btnMain group-hover:text-textMain">Username</p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain flex flex-col gap-[5px] w-full text-textMain2 text-sm z-[1] shadow-lg hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain flex flex-col gap-[5px] w-full text-textMain2 text-sm z-[5] shadow-lg hidden">
<a href="profile.html" class="flex flex-row px-[10px] py-[5px] text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Profile</a>
<a href="#" class="flex flex-row px-[10px] py-[5px] text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Settings</a>
<a href="settings.html" class="flex flex-row px-[10px] py-[5px] text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Settings</a>
<a href="#" class="flex flex-row px-[10px] py-[5px] text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Logout</a>
</div>
</div>
@ -152,12 +150,6 @@
<div class="h-[2px] w-full bg-btnMain"></div>
</div>
</a>
<a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px] transition-all ease duration-[0.3s] group-hover:text-textMain">Coffee</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-btnMain"></div>
</div>
</a>
<a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px] transition-all ease duration-[0.3s] group-hover:text-textMain">Spirits & Liqueurs</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
@ -185,7 +177,6 @@
<div class="w-full hidden flex-col bg-bgMain2 text-bgMain border-t-[1px] border-white/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-textMain2 font-bold border-b-[1px] border-white/10 whitespace-nowrap">
<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>
@ -195,7 +186,7 @@
<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]">
<div class="w-full flex flex-row gap-[10px] overflow-auto hide-scrollbar">
<a href="index.html" class="grow-[1] flex flex-col gap-[2px] text-textMain2 justify-center items-center text-sm p-[10px]">
<i class="bx bxs-home text-2xl"></i>
</a>
@ -208,8 +199,11 @@
<a href="search.html" class="grow-[1] flex flex-col gap-[2px] text-textMain2 justify-center items-center text-sm p-[10px]">
<i class="bx bx-search text-2xl"></i>
</a>
<a href="submit.html" class="grow-[1] flex flex-col gap-[2px] text-textMain2 justify-center items-center text-sm p-[10px]">
<i class="bx bx-plus text-2xl"></i>
</a>
<button popupAction="openProfileMobile" class="grow-[1] flex flex-col gap-[2px] text-textMain2 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">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-[30px] min-w-[30px] h-[30px] object-cover bg-black/50">
</button>
<button popupAction="openMobileNav" class="grow-[1] flex flex-col gap-[2px] text-textMain2 justify-center items-center text-sm p-[10px]">
<i class="bx bx-menu text-2xl"></i>
@ -240,10 +234,6 @@
<div class="py-[5px]"><p class="px-[15px]">Spirits</p></div>
<div class="py-[5px] text-textMain absolute inset-[0] bg-btnMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Spirits</p></div>
</a>
<a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
<div class="py-[5px]"><p class="px-[15px]">Coffee</p></div>
<div class="py-[5px] text-textMain absolute inset-[0] bg-btnMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Coffee</p></div>
</a>
<a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
<div class="py-[5px]"><p class="px-[15px]">Misc</p></div>
<div class="py-[5px] text-textMain absolute inset-[0] bg-btnMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Misc</p></div>
@ -257,7 +247,7 @@
<div class="py-[5px]"><p class="px-[15px]">Events</p></div>
<div class="py-[5px] text-textMain absolute inset-[0] bg-btnMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Events</p></div>
</a>
<a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
<a href="info.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
<div class="py-[5px]"><p class="px-[15px]">About</p></div>
<div class="py-[5px] text-textMain absolute inset-[0] bg-btnMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">About</p></div>
</a>
@ -266,11 +256,11 @@
<div class="flex flex-col gap-[15px] justify-start items-start">
<p class="">Legal</p>
<div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
<a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
<a href="info.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
<div class="py-[5px]"><p class="px-[15px]">Terms of Service</p></div>
<div class="py-[5px] text-textMain absolute inset-[0] bg-btnMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Terms of Service</p></div>
</a>
<a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
<a href="info.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
<div class="py-[5px]"><p class="px-[15px]">Privacy Policy</p></div>
<div class="py-[5px] text-textMain absolute inset-[0] bg-btnMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Privacy Policy</p></div>
</a>
@ -304,15 +294,15 @@
<p class="text-sm text-white text-center">Exceptional</p>
</div>
<div class="w-full border-t-[2px] border-white/25 pt-[15px] text-base font-bold grid grid-cols-2 gap-[10px] flex-wrap">
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Textural / Light Aromatic</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">White</p>
</div>
</div>
</div>
</div>
@ -339,15 +329,15 @@
<p class="text-sm text-black text-center">Outstanding</p>
</div>
<div class="w-full border-t-[2px] border-white/25 pt-[15px] text-base font-bold grid grid-cols-2 gap-[10px] flex-wrap">
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Textural / Light Aromatic</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">White</p>
</div>
</div>
</div>
</div>
@ -374,15 +364,15 @@
<p class="text-sm text-white text-center">Excellent</p>
</div>
<div class="w-full border-t-[2px] border-white/25 pt-[15px] text-base font-bold grid grid-cols-2 gap-[10px] flex-wrap">
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Textural / Light Aromatic</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">White</p>
</div>
</div>
</div>
</div>
@ -409,15 +399,15 @@
<p class="text-sm text-white text-center">Very Good</p>
</div>
<div class="w-full border-t-[2px] border-white/25 pt-[15px] text-base font-bold grid grid-cols-2 gap-[10px] flex-wrap">
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Textural / Light Aromatic</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">White</p>
</div>
</div>
</div>
</div>
@ -444,15 +434,15 @@
<p class="text-sm text-black text-center">Good</p>
</div>
<div class="w-full border-t-[2px] border-white/25 pt-[15px] text-base font-bold grid grid-cols-2 gap-[10px] flex-wrap">
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Textural / Light Aromatic</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">White</p>
</div>
</div>
</div>
</div>
@ -479,15 +469,15 @@
<p class="text-sm text-black text-center">Poor</p>
</div>
<div class="w-full border-t-[2px] border-white/25 pt-[15px] text-base font-bold grid grid-cols-2 gap-[10px] flex-wrap">
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Textural / Light Aromatic</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">White</p>
</div>
</div>
</div>
</div>
@ -514,15 +504,15 @@
<p class="text-sm text-white text-center">No Score</p>
</div>
<div class="w-full border-t-[2px] border-white/25 pt-[15px] text-base font-bold grid grid-cols-2 gap-[10px] flex-wrap">
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 last:col-span-2">
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Textural / Light Aromatic</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">Wine</p>
</div>
<div class="w-full flex flex-col bg-bgMain2 border-[1px] border-white/10 first:col-span-2">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain2 text-textMain2 text-sm overflow-hidden whitespace-nowrap text-ellipsis">White</p>
</div>
</div>
</div>
</div>

172
index.html

@ -96,15 +96,6 @@
<p class="font-bold text-xl text-textMain2 px-[10px] overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[1.2s] group-hover:text-textMain">Spirit</p>
</div>
</a>
<a href="search.html" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="4000" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
<div class="w-full h-full max-h-[75%] flex flex-col relative overflow-hidden bg-bgMain transition-all ease duration-[0.75s] group-hover:max-h-[90%]">
<img src="./assets/images/bg bb.png" class="w-full h-full absolute inset-[0] object-cover grayscale opacity-[0.02] transition-all ease duration-[1s] group-hover:grayscale-[0] group-hover:opacity-[0.05]"></img>
</div>
<img src="https://image.nostr.build/87f0684fa7cc907fd6f4f8328b161c07ef56a2ae497858032a07a2c87b86bca4.png" class="h-full z-[1] object-cover absolute bottom-[-100px] transition-all ease duration-[1.25s] group-hover:bottom-[-25px] group-hover:scale-[1.05]"></img>
<div class="w-full absolute bottom-[0] flex flex-row justify-center items-center bg-bgMain2 py-[10px] z-[1] transition-all ease duration-[0.5s] group-hover:bg-btnMain">
<p class="font-bold text-xl text-textMain2 px-[10px] overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[1.2s] group-hover:text-textMain">Coffee</p>
</div>
</a>
</div>
</div>
</div>
@ -188,10 +179,6 @@
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Spirits</label></div>
</div>
<div class="relative bg-bgMain2 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Coffee</label></div>
</div>
<div class="relative bg-bgMain2 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Misc</label></div>
@ -369,15 +356,93 @@
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Spirits</label></div>
</div>
<div class="relative bg-bgMain2 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Coffee</label></div>
</div>
<div class="relative bg-bgMain2 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Misc</label></div>
</div>
</div>
<div class="w-full flex flex-row pt-[10px] border-t-[1px] border-bgMain2/25">
<div class="w-full flex flex-row pt-[10px] border-t-[1px] border-white/10">
<buttons class="w-full flex flex-col justify-center items-center bg-btnMain text-textMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
Set Filter
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</buttons>
</div>
</div>
<!-- popup x end -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div popupID="FilterSearchAlt" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
<div class="w-full flex flex-col justify-start items-center">
<div class="w-full max-w-[500px] justify-start items-center">
<div class="w-full bg-bgMain2 p-[15px] shadow-lg gap-[5px]">
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/10">
<p class="font-bold text-lg">Location Filter</p>
<button popupAction="closeFilterSearchAlt" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-x text-xl"></i>
</button>
</div>
<div class="w-full flex flex-col pt-[10px]">
<!-- popup x start -->
<div class="w-full flex flex-col gap-[15px]">
<div class="w-full max-w-[500px] flex flex-row">
<div class="w-full flex flex-row">
<input type="text" placeholder="Search..." class="w-full bg-black/10 py-[5px] px-[10px] border-[1px] border-white/10 placeholder:text-white/25 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15">
</div>
</div>
<div class="w-full flex flex-col gap-[15px] p-[10px] border-[2px] border-white/10 items-start">
<div class="flex flex-row justify-center items-center mt-[-25px] bg-bgMain2 px-[15px] py-[2px] text-textMain2 font-bold">
<p class="text-sm">Search for</p>
</div>
<div class="w-full flex flex-row gap-[10px] flex-wrap overflow-auto max-h-[500px]">
<div class="relative bg-black/5 grow-[1] group">
<input type="checkbox" name="location" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="w-full text-center">Country</label></div>
</div>
<div class="relative bg-black/5 grow-[1] group">
<input type="checkbox" name="location" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="w-full text-center">State/Province</label></div>
</div>
<div class="relative bg-black/5 grow-[1] group">
<input type="checkbox" name="location" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="w-full text-center">Region</label></div>
</div>
<div class="relative bg-black/5 grow-[1] group">
<input type="checkbox" name="location" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="w-full text-center">Village</label></div>
</div>
</div>
</div>
<div class="w-full flex flex-col">
<div class="w-full flex flex-col gap-[10px] bg-bgMain2/25 p-[10px] border-[1px] border-b-[0px] border-white/10 flex-wrap overflow-auto max-h-[300px]">
<div class="relative bg-black/5 group">
<input type="radio" name="locationSelection" checked class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">ContinentName, RegionName, CountryName, State/ProvinceName, City/Town/VillageName</label></div>
</div>
<!-- <p class="text-bgMain2/25 text-base text-center w-full">Nothing selected</p> -->
</div>
<div class="w-full flex flex-col gap-[10px] bg-bgMain2/25 p-[10px] border-[1px] border-white/10 flex-wrap overflow-auto max-h-[500px]">
<div class="relative bg-black/5 group">
<input type="radio" name="location" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">ContinentName, RegionName, CountryName, State/ProvinceName, City/Town/VillageName</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="radio" name="location" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">ContinentName, RegionName, CountryName, State/ProvinceName, City/Town/VillageName</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="radio" name="location" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">ContinentName, RegionName, CountryName, State/ProvinceName, City/Town/VillageName</label></div>
</div>
</div>
</div>
<div class="w-full flex flex-row pt-[10px] border-t-[1px] border-white/10">
<buttons class="w-full flex flex-col justify-center items-center bg-btnMain text-textMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
Set Filter
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
@ -392,74 +457,41 @@
</div>
</div>
<div popupID="FilterSearchAlt" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
<div popupID="Roles" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
<div class="w-full flex flex-col justify-start items-center">
<div class="w-full max-w-[500px] justify-start items-center">
<div class="w-full bg-bgMain2 p-[15px] shadow-lg gap-[5px]">
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-bgMain2/25">
<p class="font-bold text-lg">Location Filter</p>
<button popupAction="closeFilterSearchAlt" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-bgMain2 hover:text-bgMain">
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/10">
<p class="font-bold text-lg">Role Select</p>
<button popupAction="closeRoles" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-x text-xl"></i>
</button>
</div>
<div class="w-full flex flex-col pt-[10px]">
<!-- popup x start -->
<div class="w-full flex flex-col gap-[15px]">
<div class="w-full max-w-[500px] flex flex-row">
<div class="w-full flex flex-row">
<input type="text" placeholder="Search..." class="w-full bg-black/10 py-[5px] px-[10px] border-b-[1px] border-bgMain2/25 placeholder:text-black/50 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15">
</div>
</div>
<div class="w-full flex flex-col gap-[15px] p-[10px] border-[2px] border-bgMain2 items-start">
<div class="flex flex-row justify-center items-center mt-[-25px] bg-bgMain px-[15px] py-[2px] text-bgMain2 font-bold">
<p class="text-sm">Search for</p>
</div>
<div class="w-full flex flex-row gap-[10px] flex-wrap overflow-auto max-h-[500px]">
<div class="relative bg-black/5 grow-[1] group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10 text-base"><label class="w-full text-center">Country</label></div>
</div>
<div class="relative bg-black/5 grow-[1] group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10 text-base"><label class="w-full text-center">State/Province</label></div>
</div>
<div class="relative bg-black/5 grow-[1] group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10 text-base"><label class="w-full text-center">Region</label></div>
</div>
<div class="relative bg-black/5 grow-[1] group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10 text-base"><label class="w-full text-center">Village</label></div>
</div>
<p class="text-base">It looks like you're a new user. Welcome! Please go ahead and select what kind of user are you so we can assign you a role.</p>
<div class="w-full flex flex-row gap-[15px] flex-wrap">
<div class="relative bg-bgMain2 grow-[1] group">
<input type="radio" name="roleSelect" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
<div class="text-textMain2 flex flex-col justify-center items-center transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[10px] px-[25px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain">
<i class="bx bxs-wine text-3xl"></i>
<label class="">Drinker</label>
</div>
</div>
<div class="w-full flex flex-col">
<div class="w-full flex flex-col gap-[10px] bg-bgMain2/25 p-[10px] border-[1px] border-b-[0px] border-bgMain2/25 flex-wrap overflow-auto max-h-[300px]">
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" checked class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">ContinentName, RegionName, CountryName, State/ProvinceName, City/Town/VillageName</label></div>
</div>
<!-- <p class="text-bgMain2/25 text-base text-center w-full">Nothing selected</p> -->
</div>
<div class="w-full flex flex-col gap-[10px] bg-bgMain2/25 p-[10px] border-[1px] border-bgMain2/25 flex-wrap overflow-auto max-h-[500px]">
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">ContinentName, RegionName, CountryName, State/ProvinceName, City/Town/VillageName</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">ContinentName, RegionName, CountryName, State/ProvinceName, City/Town/VillageName</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">ContinentName, RegionName, CountryName, State/ProvinceName, City/Town/VillageName</label></div>
<div class="relative bg-bgMain2 grow-[1] group">
<input type="radio" name="roleSelect" class="opacity-[0] absolute inset-[0] peer cursor-pointer"></input>
<div class="text-textMain2 flex flex-col justify-center items-center transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[10px] px-[25px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain">
<i class="bx bxs-store text-3xl"></i>
<label class="">Producer</label>
</div>
</div>
</div>
<div class="w-full flex flex-row pt-[10px] border-t-[1px] border-bgMain2/25">
<buttons class="w-full flex flex-col justify-center items-center bg-bgMain2 text-bgMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
Set Filter
<div class="w-full flex flex-row pt-[10px] border-t-[1px] border-white/10">
<buttons class="w-full flex flex-col justify-center items-center bg-btnMain text-textMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
Complete Registration
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</buttons>
</div>

153
info.html Normal file

@ -0,0 +1,153 @@
<html class="bg-bgMain min-h-screen flex flex-col scroll-smooth font-merriweather">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Cellar Social</title>
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=libre-baskerville:400,400i,700,700i|merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet" />
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script src="tailwind-config.js" defer></script>
<link rel="stylesheet" href="./assets/css/custom.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.css" />
</head>
<body class="bg-transparent flex flex-col items-center flex-grow min-h-screen relative tracking-wide text-lg leading-[1.5] break-words text-textMain">
<!-- main navbar start -->
<div id="nav2-component"></div>
<!-- main navbar end -->
<!-- main middle start -->
<div class="w-full flex flex-col grow-[1] pt-[100px]">
<!-- info start -->
<div class="w-full flex flex-col justify-center items-center">
<div class="max-w-[1400px] w-full grow-[1] flex flex-col justify-center items-center px-[10px] relative">
<div class="w-full flex flex-col bg-bgMain2 shadow-lg p-[25px] gap-[25px] my-[25px]">
<h1 class="text-3xl text-center font-bold border-b-[1px] border-white/10 pb-[15px]">Terms of Service</h1>
<div class="w-full flex flex-col text-textMain text-base">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
<!-- info end -->
</div>
<!-- main middle end -->
<!-- main footer start -->
<div id="footer-component"></div>
<!-- main footer end -->
<!-- popups start -->
<div popupID="Bio" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
<div class="w-full flex flex-col justify-start items-center">
<div class="w-full max-w-[1000px] justify-start items-center">
<div class="w-full bg-bgMain2 p-[15px] shadow-lg gap-[5px]">
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/15">
<p class="font-bold text-lg">User bio</p>
<button popupaction="closeBio" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-x text-xl"></i>
</button>
</div>
<div class="w-full flex flex-col pt-[10px]">
<!-- popup x start -->
<div class="w-full flex flex-col gap-[20px]">
<p class="text-base line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!-- popup x end -->
</div>
</div>
</div>
</div>
</div>
</div>
<div popupID="Report" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
<div class="w-full flex flex-col justify-start items-center">
<div class="w-full max-w-[500px] justify-start items-center">
<div class="w-full bg-bgMain2 p-[15px] shadow-lg gap-[5px]">
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/15">
<p class="font-bold text-lg">Report</p>
<button popupaction="closeReport" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-x text-xl"></i>
</button>
</div>
<div class="w-full flex flex-col pt-[10px]">
<!-- popup x start -->
<div class="w-full flex flex-col gap-[20px]">
<p class="text-base">What's wrong with this profile?</p>
<div class="w-full flex flex-col gap-[10px] flex-wrap overflow-auto max-h-[500px]">
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're a spammer</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're a scammer</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're an illegal poster</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're publishing unrelated Products</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Other</label></div>
</div>
</div>
<textarea type="text" placeholder="Optional note/message..." class="col-span-7 w-full min-h-[125px] px-[15px] py-[10px] bg-black/10 placeholder:text-white/25 border-[1px] border-white/10 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain"></textarea>
<div class="w-full flex flex-row pt-[10px] border-t-[1px] border-white/10">
<buttons class="w-full flex flex-col justify-center items-center bg-btnMain text-textMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
Send report
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</buttons>
</div>
</div>
<!-- popup x end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- popups end -->
<!-- SCRIPTS START-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.js"></script>
<script src="./assets/js/dropdown.js"></script>
<script src="./assets/js/popups.js"></script>
<script src="./assets/js/tabSys.js"></script>
<script src="./assets/js/componentLoader.js"></script>
<script>AOS.init();</script>
<!-- SCRIPTS END-->
<!--
reusables: sec and container
<div class="w-full flex flex-col gap-[25px] py-[50px] items-center">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative"></div>
</div>
-->
</body>
</html>

191
product.html

@ -31,6 +31,12 @@
<div class="max-w-[1400px] w-full grow-[1] flex flex-col justify-center items-center px-[10px] relative">
<div class="w-full flex flex-col gap-[100px] py-[100px] items-center">
<!-- Page marked start -->
<div class="w-full bg-red-400 p-[15px] mb-[-75px] text-black/65 flex flex-col font-bold items-center shadow-lg text-center max-lg:text-base">
<p class="">This product post has been marked as: SPAM</p>
</div>
<!-- Page marked end -->
<div class="w-full grid grid-cols-5 gap-[50px] items-start max-lg:grid-cols-1">
<div class="col-span-2 w-full flex flex-col gap-[15px] items-center max-lg:col-span-1">
<div class="w-full flex flex-col items-center relative overflow-hidden cursor-pointer group">
@ -58,7 +64,20 @@
</div>
<div class="col-span-3 w-full flex flex-col gap-[25px] items-center max-lg:col-span-1">
<div class="w-full flex flex-col gap-[25px]">
<h2 class="text-3xl font-bold">Product Title</h2>
<div class="w-full flex flex-row gap-[15px] justify-between">
<h2 class="text-3xl font-bold ">Product Title</h2>
<div class="relative inline-block">
<button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] text-textMain2 transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-textMain relative group">
<i class="bx bx-dots-vertical"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Hide</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Block</p>
</div>
</div>
</div>
<div class="w-full flex flex-col gap-[10px] items-end">
<p class="text-lg line-clamp-5 text-textMain2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
@ -171,7 +190,7 @@
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Clarity: *</p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Clear</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Hazy</p>
@ -184,7 +203,7 @@
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Colour: Red</p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Red</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Blue</p>
@ -198,7 +217,7 @@
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Bubbles: Slight Fizz</p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Still</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Slight Fizz</p>
@ -219,7 +238,7 @@
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Intensity: *</p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Weak</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Moderate</p>
@ -332,7 +351,7 @@
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Sweetness: *</p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Dry</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Off-dry</p>
@ -346,7 +365,7 @@
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Acidity: Low</p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Low</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Medium</p>
@ -359,7 +378,7 @@
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Alcohol: Prominent</p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Integrated</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Noticeable warmth</p>
@ -372,7 +391,7 @@
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Body: *</p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Light</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Medium</p>
@ -385,7 +404,7 @@
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Finish: *</p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Short</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Medium</p>
@ -406,7 +425,7 @@
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Harmony: *</p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Harmonious</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not harmonious</p>
@ -418,7 +437,7 @@
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Complexity: Complex</p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Complex</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not Complex</p>
@ -492,8 +511,8 @@
<i class="bx bx-dots-vertical"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Block</p>
</div>
</div>
@ -547,32 +566,29 @@
<div class="w-full flex flex-row gap-[10px] bg-bgMain2 p-[10px] flex-wrap border-[1px] border-white/10">
<div class="relative inline-block">
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/15 text-textMain2 relative group">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Moderation Level: Site & User</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/10 text-sm text-textMain2 pl-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap ">Moderation Level: <span class="bg-black/15 h-full w-full px-[8px] py-[5px] flex flex-row items-center">Site &amp; User</span></p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site & User</p>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site &amp; User</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">None</p>
</div>
</div>
<div class="relative inline-block">
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/15 text-textMain2 relative group">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Show: Latest</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/10 text-sm text-textMain2 pl-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap ">Show: <span class="bg-black/15 h-full w-full px-[8px] py-[5px] flex flex-row items-center">Latest</span></p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Latest</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Oldest</p>
</div>
</div>
<div class="relative inline-block">
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/15 text-textMain2 relative group">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Score: Highest</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/10 text-sm text-textMain2 pl-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap ">Score: <span class="bg-black/15 h-full w-full px-[8px] py-[5px] flex flex-row items-center">Highest</span></p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Highest</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Lowest</p>
</div>
@ -601,8 +617,8 @@
<i class="bx bx-dots-vertical"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Block</p>
</div>
</div>
@ -682,7 +698,7 @@
</div>
</div>
<div class="w-full hidden flex-col gap-[10px] hidden">
<div class="w-full hidden flex-col gap-[10px]">
<div class="w-full flex flex-col gap-[25px]">
<div class="w-full flex flex-col gap-[25px]">
<div class="w-full flex flex-col gap-[15px]">
@ -703,22 +719,20 @@
</div>
<div class="w-full flex flex-row gap-[10px] bg-bgMain2 p-[10px] flex-wrap border-[1px] border-white/10">
<div class="relative inline-block">
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/15 text-textMain2 relative group">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Moderation Level: Site & User</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/10 text-sm text-textMain2 pl-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap ">Moderation Level: <span class="bg-black/15 h-full w-full px-[8px] py-[5px] flex flex-row items-center">Site &amp; User</span></p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site & User</p>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site &amp; User</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">None</p>
</div>
</div>
<div class="relative inline-block">
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/15 text-textMain2 relative group">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Show: Latest</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/10 text-sm text-textMain2 pl-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap ">Show: <span class="bg-black/15 h-full w-full px-[8px] py-[5px] flex flex-row items-center">Latest</span></p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Latest</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Oldest</p>
</div>
@ -748,8 +762,8 @@
<i class="bx bx-dots-vertical"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Block</p>
</div>
</div>
@ -815,8 +829,8 @@
<i class="bx bx-dots-vertical"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Block</p>
</div>
</div>
@ -897,6 +911,13 @@
<!-- tabs content end-->
</div>
<!-- Page blocked start -->
<div class="w-full flex flex-col gap-[25px] p-[25px] justify-center items-center border-[1px] border-white/10 font-bold text-textMain2">
<p class="">This page has been blocked for the following reason: REASON</p>
<a href="index.html" class="bg-btnMain text-textMain text-base px-[25px] py-[10px] text-center relative">Go back<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></a>
</div>
<!-- Page blocked end -->
</div>
</div>
</div>
@ -954,8 +975,8 @@
<i class="bx bx-dots-vertical"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Block</p>
</div>
</div>
@ -1021,22 +1042,20 @@
<div class="w-full flex flex-row gap-[10px] bg-bgMain2 p-[10px] flex-wrap border-[1px] border-white/10">
<div class="relative inline-block">
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/15 text-textMain2 relative group">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Moderation Level: Site &amp; User</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/10 text-sm text-textMain2 pl-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap ">Moderation Level: <span class="bg-black/15 h-full w-full px-[8px] py-[5px] flex flex-row items-center">Site &amp; User</span></p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site &amp; User</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">None</p>
</div>
</div>
<div class="relative inline-block">
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/15 text-textMain2 relative group">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Show: Latest</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/10 text-sm text-textMain2 pl-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap ">Show: <span class="bg-black/15 h-full w-full px-[8px] py-[5px] flex flex-row items-center">Latest</span></p>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Latest</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Oldest</p>
</div>
@ -1064,8 +1083,8 @@
<i class="bx bx-dots-vertical"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Block</p>
</div>
</div>
@ -1131,8 +1150,8 @@
<i class="bx bx-dots-vertical"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Block</p>
</div>
</div>
@ -1322,6 +1341,64 @@
</div>
</div>
</div>
<div popupID="Report" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
<div class="w-full flex flex-col justify-start items-center">
<div class="w-full max-w-[500px] justify-start items-center">
<div class="w-full bg-bgMain2 p-[15px] shadow-lg gap-[5px]">
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/15">
<p class="font-bold text-lg">Report</p>
<button popupaction="closeReport" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-x text-xl"></i>
</button>
</div>
<div class="w-full flex flex-col pt-[10px]">
<!-- popup x start -->
<div class="w-full flex flex-col gap-[20px]">
<p class="text-base">What's wrong with this product post?</p>
<div class="w-full flex flex-col gap-[10px] flex-wrap overflow-auto max-h-[500px]">
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">It's spam</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">It's a scam</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">It's illegal</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">It's an unrelated Product</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Other</label></div>
</div>
</div>
<textarea type="text" placeholder="Optional note/message..." class="col-span-7 w-full min-h-[125px] px-[15px] py-[10px] bg-black/10 placeholder:text-white/25 border-[1px] border-white/10 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain"></textarea>
<div class="w-full flex flex-row pt-[10px] border-t-[1px] border-white/10">
<buttons class="w-full flex flex-col justify-center items-center bg-btnMain text-textMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
Send report
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</buttons>
</div>
</div>
<!-- popup x end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- popups end -->
<!-- SCRIPTS START-->

423
profile.html

@ -30,141 +30,224 @@
<div class="w-full flex flex-col justify-center items-center">
<div class="max-w-[1400px] w-full grow-[1] flex flex-col justify-center items-center px-[10px] relative">
<div class="w-full flex flex-col gap-[50px] py-[50px]">
<div class="w-full flex flex-col relative">
<div class="w-full flex flex-col min-h-[300px] max-h-[300px] shadow-xl ">
<img src="https://image.nostr.build/b272ef444c78416d1282833b456720f6aaa98ce4313077181985fe1e44f58c88.jpg" class="object-cover w-full h-full"></img>
</div>
<div class="w-full flex flex-col px-[25px] mt-[-50px]">
<div class="w-full flex flex-row gap-[25px] bg-bgMain2 p-[20px] shadow-xl max-lg:flex-col">
<div class="w-[200px] relative">
<img src="https://images.scalebranding.com/simple-wine-logo-aee1e515-8eed-4af3-9930-4e0f94ef1209.jpg" class="object-cover aspect-square">
<div class="w-full flex flex-row gap-[35px] max-lg:flex-col">
<div class="w-full min-w-[350px] max-w-[350px] flex flex-col gap-[25px] max-lg:max-w-full max-lg:min-w-0">
<div class="w-full flex flex-col gap-[15px] p-[15px] bg-bgMain2 shadow-lg text-base">
<div class="w-full flex flex-col gap-[15px]">
<div class="w-full bg-black/10 flex flex-col justify-start items-end relative h-[90px]">
<img src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg" class="w-full h-full object-cover absolute inset"></img>
<div class="relative inline-block m-[5px]">
<button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] text-textMain2 bg-bgMain2/50 transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-textMain relative group">
<i class="bx bx-dots-vertical"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain hidden flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto">
<p popupaction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Hide</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Block</p>
</div>
</div>
</div>
<div class="w-full flex flex-col justify-center items-start pl-[10px] z-[1] mt-[-50px]">
<img src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg" class="w-full object-cover aspect-square max-w-[75px] shadow-lg border-[4px] border-bgMain2"></img>
</div>
</div>
<div class="w-full flex flex-col gap-[5px] text-sm">
<p class="font-bold">User's Name</p>
<p class="">handle@domain.com</p>
</div>
<div class="w-full flex flex-row gap-[10px] max-sm:flex-col">
<div class="flex flex-row-reverse">
<button class="bg-white/10 px-[10px] text-textMain2 relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain peer">
<i class="bx bxs-copy"></i>
</button>
<input class="overflow-hidden whitespace-nowrap text-ellipsis text-sm text-textMain2 w-full px-[10px] py-[5px] bg-black/10 border-[2px] border-r-[0px] border-white/10 transition-all ease duration-[0.3s] peer-hover:border-btnMain peer-hover:text-textMain" disabled="" value="npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv">
</div>
<div class="flex flex-row-reverse">
<button class="bg-white/10 px-[10px] text-textMain2 relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain peer">
<i class="bx bxs-copy"></i>
</button>
<input class="overflow-hidden whitespace-nowrap text-ellipsis text-sm text-textMain2 w-full px-[10px] py-[5px] bg-black/10 border-[2px] border-r-[0px] border-white/10 transition-all ease duration-[0.3s] peer-hover:border-btnMain peer-hover:text-textMain" disabled="" value="npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv">
</div>
</div>
<div class="w-full flex flex-col gap-[15px]">
<p class="text-xl font-bold">nPub Holder Name</p>
<p class="text-base line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="w-full flex flex-row gap-[10px] justify-between flex-wrap">
<div class="flex flex-row">
<button class="w-full flex flex-col justify-center items-center text-base bg-white/10 text-textMain2 px-[10px] py-[5px] text-base relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
Expand
<p class="w-full line-clamp-5 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<buttons popupAction="openBio" class="w-full flex flex-col justify-center items-center bg-white/10 text-textMain2 text-sm font-bold whitespace-nowrap px-[10px] py-[5px] cursor-pointer relative transition-all ease duration-[0.3s] hover:text-textMain hover:bg-white/15">
Read full
</buttons>
</div>
<div class="w-full flex flex-col gap-[15px]">
<div class="w-full flex flex-row border-[1px] border-white/10">
<a href="#" class="grow-[1] flex flex-row justify-center items-center text-textMain2 px-[15px] py-[5px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-globe"></i>
</a>
<a href="#" class="grow-[1] flex flex-row justify-center items-center text-textMain2 px-[15px] py-[5px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<i class="bx bxs-bolt"></i>
</a>
<a href="#" class="grow-[1] flex flex-row justify-center items-center text-textMain2 px-[15px] py-[5px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<i class="bx bxs-tree-alt"></i>
</a>
</div>
</div>
<div class="w-full flex flex-col gap-[15px]">
<buttons class="w-full flex flex-col justify-center items-center bg-btnMain text-textMain text-sm font-bold whitespace-nowrap px-[10px] py-[8px] cursor-pointer relative group">
Follow
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</buttons>
</div>
</div>
</div>
<div class="w-full flex flex-col gap-[15px]">
<h2 class="text-2xl font-bold">User's Reviews</h2>
<div class="w-full flex flex-col gap-[10px]">
<div class="w-full flex flex-col gap-[25px]">
<div class="w-full flex flex-col gap-[25px]">
<!-- review item start -->
<div class="w-full flex flex-col gap-[15px] pb-[25px] border-b-[1px] border-white/10 last:border-b-[0px] last:pb-[0px]">
<div class="w-full p-[15px] bg-bgMain2 shadow-lg">
<div class="w-full flex flex-col gap-[15px] col-span-7">
<div class="w-full flex flex-row gap-[25px] justify-between border-b-[1px] border-white/10 pb-[10px] max-lg:flex-wrap max-lg:gap-[10px]">
<div class="flex flex-row gap-[5px] flex-wrap font-bold text-base">
<p class="bg-bgMain2/75 text-textMain2 font-bold">Product:</p>
<a href="product.html" class="text-textMain2 overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">ProductName</a>
</div>
<div class="flex flex-col gap-[5px] items-end">
<div class="flex flex-row gap-[15px] flex-wrap text-sm">
<p class="">4/07/2025</p>
<p class="">4:20 PM</p>
</div>
</div>
</div>
<p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="text-sm bg-white/10 text-textMain2 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-btnMain hover:text-textMain">Expand</button>
</div>
</div>
<div class="w-full flex flex-row gap-[10px] justify-end flex-wrap">
<div class="flex flex-row gap-[10px] justify-end flex-wrap grow-[1]">
<button popupaction="openReview" class="flex flex-row bg-bgScore5 text-textMain text-sm items-center relative">
<p class="flex flex-row px-[10px] py-[5px] h-full items-center">User Rating</p>
<p class="flex flex-row px-[10px] py-[5px] h-full items-center bg-black/15">Exceptional</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
<button class="flex flex-row items-center justify-center bg-bgMain2 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
<div class="p-[5px] text-textMain transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
</div>
<p class="text-base px-[10px] py-[5px]">500,000</p>
</button>
<button class="flex flex-row items-center justify-center bg-bgMain2 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
<div class="p-[5px] text-textMain transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
</div>
<p class="text-base px-[10px] py-[5px]">25</p>
</button>
<button class="flex flex-row items-center justify-center bg-bgMain2 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
<div class="p-[5px] text-textMain transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
</div>
<p class="text-base px-[10px] py-[5px]">5</p>
</button>
<button class="flex flex-row items-center justify-center bg-bgMain2 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
<div class="p-[5px] text-textMain transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
</div>
<p class="text-base px-[10px] py-[5px]">32</p>
</button>
</div>
<button popupaction="openReply" class="bg-bgMain2 text-textMain2 px-[25px] py-[5px] text-sm justify-center items-center flex flex-row gap-[5px] relative text-center max-lg:grow-[1] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Reply</button>
</div>
</div>
<!-- review item end-->
<!-- review item start -->
<div class="w-full flex flex-col gap-[15px] pb-[25px] border-b-[1px] border-white/10 last:border-b-[0px] last:pb-[0px]">
<div class="w-full p-[15px] bg-bgMain2 shadow-lg">
<div class="w-full flex flex-col gap-[15px] col-span-7">
<div class="w-full flex flex-row gap-[25px] justify-between border-b-[1px] border-white/10 pb-[10px] max-lg:flex-wrap max-lg:gap-[10px]">
<div class="flex flex-row gap-[5px] flex-wrap font-bold text-base">
<p class="bg-bgMain2/75 text-textMain2 font-bold">Product:</p>
<a href="product.html" class="text-textMain2 overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">ProductName</a>
</div>
<div class="flex flex-col gap-[5px] items-end">
<div class="flex flex-row gap-[15px] flex-wrap text-sm">
<p class="">4/07/2025</p>
<p class="">4:20 PM</p>
</div>
</div>
</div>
<p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="text-sm bg-white/10 text-textMain2 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-btnMain hover:text-textMain">Expand</button>
</div>
</div>
<div class="w-full flex flex-row gap-[10px] justify-end flex-wrap">
<div class="flex flex-row gap-[10px] justify-end flex-wrap grow-[1]">
<button popupaction="openReview" class="flex flex-row bg-bgScore5 text-textMain text-sm items-center relative">
<p class="flex flex-row px-[10px] py-[5px] h-full items-center">User Rating</p>
<p class="flex flex-row px-[10px] py-[5px] h-full items-center bg-black/15">Exceptional</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
<button class="flex flex-row items-center justify-center bg-bgMain2 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
<div class="p-[5px] text-textMain transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
</div>
<p class="text-base px-[10px] py-[5px]">500,000</p>
</button>
<button class="flex flex-row items-center justify-center bg-bgMain2 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
<div class="p-[5px] text-textMain transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
</div>
<p class="text-base px-[10px] py-[5px]">25</p>
</button>
<button class="flex flex-row items-center justify-center bg-bgMain2 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
<div class="p-[5px] text-textMain transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
</div>
<p class="text-base px-[10px] py-[5px]">5</p>
</button>
<button class="flex flex-row items-center justify-center bg-bgMain2 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
<div class="p-[5px] text-textMain transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
</div>
<p class="text-base px-[10px] py-[5px]">32</p>
</button>
</div>
<button popupaction="openReply" class="bg-bgMain2 text-textMain2 px-[25px] py-[5px] text-sm justify-center items-center flex flex-row gap-[5px] relative text-center max-lg:grow-[1] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Reply</button>
</div>
</div>
<!-- review item end-->
</div>
<!-- Pagination start -->
<div class="w-full flex flex-col justify-center items-center">
<div class="max-w-[300px] flex flex-row gap-[15px] justify-center items-center">
<button class="h-full flex flex-col justify-center items-center px-[8px] text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain hover:text-textMain">
<i class="bx bxs-chevron-left text-3xl"></i>
</button>
<div class="grow-[1] flex flex-row gap-[10px] overflow-auto hide-scrollbar">
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center bg-btnMain text-textMain relative">
<p class="text-base">1</p>
</button>
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain/75 hover:text-textMain">
<p class="text-base">2</p>
</button>
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain/75 hover:text-textMain">
<p class="text-base">3</p>
</button>
</div>
<button class="h-full flex flex-col justify-center items-center px-[8px] text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain hover:text-textMain">
<i class="bx bxs-chevron-right text-3xl"></i>
</button>
</div>
<div class="flex flex-row flex-wrap justify-end gap-[10px] grow-[1]">
<div class="flex flex-row gap-[5px] flex-wrap">
<a href="#" class="flex flex-col justify-center items-center bg-white/10 text-textMain2 px-[10px] py-[5px] grow-[1] relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<i class='bx bx-globe'></i>
</a>
</div>
<div class="flex flex-row-reverse">
<button class="bg-white/10 px-[10px] text-textMain2 relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain peer">
<i class="bx bxs-copy"></i>
</button>
<input class="overflow-hidden whitespace-nowrap text-ellipsis text-base text-textMain2 w-full px-[10px] py-[5px] bg-black/10 border-[2px] border-r-[0px] border-white/10 transition-all ease duration-[0.3s] peer-hover:border-btnMain peer-hover:text-textMain" disabled value="npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"></input>
</div>
<div class="flex flex-row gap-[5px] flex-wrap">
<a href="#" class="flex flex-col justify-center text-base items-center bg-btnMain text-textMain font-bold px-[15px] py-[5px] grow-[1] relative">
Follow
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
</div>
</div>
</div>
<!-- Pagination end -->
<div class="w-full flex flex-col gap-[25px] p-[25px] justify-center items-center border-[1px] border-white/10 font-bold text-textMain2">
<p class="">No reviews published yet</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-full flex flex-col gap-[50px] items-center">
<!-- listings list start -->
<div class="w-full flex flex-col gap-[10px]">
<div class="flex flex-row gap-[10px] items-center justify-between">
<p class="font-bold text-xl">Searching: <span class="font-normal">exampleText</p>
<div class="w-full max-w-[500px] flex flex-row">
<div class="w-full flex flex-row">
<input type="text" placeholder="Search..." class="w-full bg-black/10 py-[5px] px-[10px] border-[1px] border-white/10 placeholder:text-white/50 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain">
</div>
<a href="search.html" class="flex flex-col justify-center items-center bg-bgMain2 text-textMain p-[10px] cursor-pointer relative group transition-all ease duration-[0.3s] bg-btnMain">
<i class="bx bx-search "></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
</div>
</div>
<div class="relative flex flex-col items-start">
<p class="font-bold text-base bg-bgMain px-[10px] py-[3px] mb-[-15px] ml-[15px] z-[1]">Filters</p>
<div class="w-full flex flex-row gap-[10px] flex-wrap p-[15px] border-[3px] border-bgMain2">
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Rating: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">Exceptional</span></p>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Product: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">Wine</span></p>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Type: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">White</span></p>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Style: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">Table</span></p>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Characteristic: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">Textural / Light Aromatic</span></p>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Country: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">Armenia</span></p>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Region: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">East-Europe</span></p>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Sub-Region: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">...</span></p>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Village: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">...</span></p>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Vineyard: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">...</span></p>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Producer: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">...</span></p>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Label: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">...</span></p>
</button>
</div>
</div>
</div>
<div class="w-full grid grid-cols-4 gap-[5px] max-lg:grid-cols-3 max-md:grid-cols-2 max-xs:grid-cols-1">
<!-- listing item start -->
<div id="productCard1-component"></div>
<div id="productCard2-component"></div>
<div id="productCard3-component"></div>
<div id="productCard4-component"></div>
<!-- listing item end -->
</div>
<!-- listings list end -->
<!-- Pagination start -->
<div class="w-full flex flex-col justify-center items-center">
<div class="max-w-[300px] flex flex-row gap-[15px] justify-center items-center">
<button class="h-full flex flex-col justify-center items-center px-[8px] text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain hover:text-textMain">
<i class="bx bxs-chevron-left text-3xl"></i>
</button>
<div class="grow-[1] flex flex-row gap-[10px] overflow-auto hide-scrollbar">
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center bg-btnMain text-textMain relative">
<p class="text-base">1</p>
</button>
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain/75 hover:text-textMain">
<p class="text-base">2</p>
</button>
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain/75 hover:text-textMain">
<p class="text-base">3</p>
</button>
</div>
<button class="h-full flex flex-col justify-center items-center px-[8px] text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain hover:text-textMain">
<i class="bx bxs-chevron-right text-3xl"></i>
</button>
</div>
</div>
<!-- Pagination end -->
</div>
</div>
</div>
@ -179,29 +262,81 @@
<!-- 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>
<div popupID="Bio" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
<div class="w-full flex flex-col justify-start items-center">
<div class="w-full max-w-[1000px] justify-start items-center">
<div class="w-full bg-bgMain2 p-[15px] shadow-lg gap-[5px]">
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/15">
<p class="font-bold text-lg">User bio</p>
<button popupaction="closeBio" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-x text-xl"></i>
</button>
</div>
<div class="w-full grow-[1] flex flex-col pt-[10px]">
<div class="w-full 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 class="w-full flex flex-col gap-[20px]">
<p class="text-base line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!-- popup x end -->
</div>
</div>
</div>
</div>
</div>
</div>
<div popupID="Report" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
<div class="w-full flex flex-col justify-start items-center">
<div class="w-full max-w-[500px] justify-start items-center">
<div class="w-full bg-bgMain2 p-[15px] shadow-lg gap-[5px]">
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/15">
<p class="font-bold text-lg">Report</p>
<button popupaction="closeReport" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-x text-xl"></i>
</button>
</div>
<div class="w-full flex flex-col pt-[10px]">
<!-- popup x start -->
<div class="w-full flex flex-col gap-[20px]">
<p class="text-base">What's wrong with this profile?</p>
<div class="w-full flex flex-col gap-[10px] flex-wrap overflow-auto max-h-[500px]">
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're a spammer</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're a scammer</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're an illegal poster</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're publishing unrelated Products</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Other</label></div>
</div>
</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>
<textarea type="text" placeholder="Optional note/message..." class="col-span-7 w-full min-h-[125px] px-[15px] py-[10px] bg-black/10 placeholder:text-white/25 border-[1px] border-white/10 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain"></textarea>
<div class="w-full flex flex-row pt-[10px] border-t-[1px] border-white/10">
<buttons class="w-full flex flex-col justify-center items-center bg-btnMain text-textMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
Send report
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</buttons>
</div>
</div>
<!-- popup x end -->
</div>

319
profile2.html Normal file

@ -0,0 +1,319 @@
<html class="bg-bgMain min-h-screen flex flex-col scroll-smooth font-merriweather">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Cellar Social</title>
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=libre-baskerville:400,400i,700,700i|merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet" />
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script src="tailwind-config.js" defer></script>
<link rel="stylesheet" href="./assets/css/custom.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.css" />
</head>
<body class="bg-transparent flex flex-col items-center flex-grow min-h-screen relative tracking-wide text-lg leading-[1.5] break-words text-textMain">
<!-- main navbar start -->
<div id="nav2-component"></div>
<!-- main navbar end -->
<!-- main middle start -->
<div class="w-full flex flex-col grow-[1] pt-[100px]">
<!-- profile start -->
<div class="w-full flex flex-col justify-center items-center">
<div class="max-w-[1400px] w-full grow-[1] flex flex-col justify-center items-center px-[10px] relative">
<div class="w-full flex flex-col gap-[50px] py-[50px]">
<div class="w-full flex flex-col relative">
<div class="w-full flex flex-col min-h-[300px] max-h-[300px] shadow-xl ">
<img src="https://image.nostr.build/b272ef444c78416d1282833b456720f6aaa98ce4313077181985fe1e44f58c88.jpg" class="object-cover w-full h-full"></img>
</div>
<div class="w-full flex flex-col px-[25px] mt-[-50px]">
<div class="w-full flex flex-row gap-[25px] bg-bgMain2 p-[20px] shadow-xl max-lg:flex-col">
<div class="w-[200px] relative">
<img src="https://images.scalebranding.com/simple-wine-logo-aee1e515-8eed-4af3-9930-4e0f94ef1209.jpg" class="object-cover aspect-square">
</div>
<div class="w-full flex flex-col gap-[15px]">
<div class="w-full flex flex-row gap-[15px] justify-between">
<p class="text-xl font-bold">nPub Holder Name</p>
<div class="relative inline-block">
<button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] text-textMain2 transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-textMain relative group">
<i class="bx bx-dots-vertical"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Hide</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Block</p>
</div>
</div>
</div>
<p class="text-base line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="w-full flex flex-row gap-[10px] justify-between flex-wrap">
<div class="flex flex-row">
<button popupAction="openBio" class="w-full flex flex-col justify-center items-center text-base bg-white/10 text-textMain2 px-[10px] py-[5px] text-base relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
Expand
</button>
</div>
<div class="flex flex-row flex-wrap justify-end gap-[10px] grow-[1]">
<div class="flex flex-row gap-[5px] flex-wrap">
<div class="w-full flex flex-row border-[1px] border-white/10">
<a href="#" class="grow-[1] flex flex-row justify-center items-center text-textMain2 px-[15px] py-[5px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-globe"></i>
</a>
<a href="#" class="grow-[1] flex flex-row justify-center items-center text-textMain2 px-[15px] py-[5px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<i class="bx bxs-bolt"></i>
</a>
<a href="#" class="grow-[1] flex flex-row justify-center items-center text-textMain2 px-[15px] py-[5px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
<i class="bx bxs-tree-alt"></i>
</a>
</div>
</div>
<div class="flex flex-row-reverse">
<button class="bg-white/10 px-[10px] text-textMain2 relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain peer">
<i class="bx bxs-copy"></i>
</button>
<input class="overflow-hidden whitespace-nowrap text-ellipsis text-base text-textMain2 w-full px-[10px] py-[5px] bg-black/10 border-[2px] border-r-[0px] border-white/10 transition-all ease duration-[0.3s] peer-hover:border-btnMain peer-hover:text-textMain" disabled value="npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"></input>
</div>
<div class="flex flex-row gap-[5px] flex-wrap">
<a href="#" class="flex flex-col justify-center text-base items-center bg-btnMain text-textMain font-bold px-[15px] py-[5px] grow-[1] relative">
Follow
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full flex flex-col gap-[50px] items-center">
<!-- listings list start -->
<div class="w-full flex flex-col gap-[10px]">
<div class="flex flex-row gap-[10px] items-center justify-between">
<p class="font-bold text-xl">Searching: <span class="font-normal">exampleText</p>
<div class="w-full max-w-[500px] flex flex-row">
<div class="w-full flex flex-row">
<input type="text" placeholder="Search..." class="w-full bg-black/10 py-[5px] px-[10px] border-[1px] border-white/10 placeholder:text-white/50 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain">
</div>
<a href="search.html" class="flex flex-col justify-center items-center bg-bgMain2 text-textMain p-[10px] cursor-pointer relative group transition-all ease duration-[0.3s] bg-btnMain">
<i class="bx bx-search "></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
</div>
</div>
<div class="relative flex flex-col items-start">
<p class="font-bold text-base bg-bgMain px-[10px] py-[3px] mb-[-15px] ml-[15px] z-[1]">Filters</p>
<div class="w-full flex flex-row gap-[10px] flex-wrap p-[15px] border-[3px] border-bgMain2">
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Rating</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Exception</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Product</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Wine</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Type</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">White</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Style</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Table</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Characteristic</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Textural / Light Aromatic</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Country</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Armenia</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Region</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">East-Europe</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Sub-region</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Village</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Vineyard</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Producer</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Label</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
</div>
</div>
</div>
<div class="w-full grid grid-cols-4 gap-[5px] max-lg:grid-cols-3 max-md:grid-cols-2 max-xs:grid-cols-1">
<!-- listing item start -->
<div id="productCard1-component"></div>
<div id="productCard2-component"></div>
<div id="productCard3-component"></div>
<div id="productCard4-component"></div>
<!-- listing item end -->
</div>
<!-- listings list end -->
<!-- Pagination start -->
<div class="w-full flex flex-col justify-center items-center">
<div class="max-w-[300px] flex flex-row gap-[15px] justify-center items-center">
<button class="h-full flex flex-col justify-center items-center px-[8px] text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain hover:text-textMain">
<i class="bx bxs-chevron-left text-3xl"></i>
</button>
<div class="grow-[1] flex flex-row gap-[10px] overflow-auto hide-scrollbar">
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center bg-btnMain text-textMain relative">
<p class="text-base">1</p>
</button>
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain/75 hover:text-textMain">
<p class="text-base">2</p>
</button>
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain/75 hover:text-textMain">
<p class="text-base">3</p>
</button>
</div>
<button class="h-full flex flex-col justify-center items-center px-[8px] text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain hover:text-textMain">
<i class="bx bxs-chevron-right text-3xl"></i>
</button>
</div>
</div>
<!-- Pagination end -->
<div class="w-full flex flex-col gap-[25px] p-[25px] justify-center items-center border-[1px] border-white/10 font-bold text-textMain2">
<p class="">No products yet</p>
</div>
</div>
</div>
</div>
</div>
<!-- profile end -->
</div>
<!-- main middle end -->
<!-- main footer start -->
<div id="footer-component"></div>
<!-- main footer end -->
<!-- popups start -->
<div popupID="Bio" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
<div class="w-full flex flex-col justify-start items-center">
<div class="w-full max-w-[1000px] justify-start items-center">
<div class="w-full bg-bgMain2 p-[15px] shadow-lg gap-[5px]">
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/15">
<p class="font-bold text-lg">User bio</p>
<button popupaction="closeBio" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-x text-xl"></i>
</button>
</div>
<div class="w-full flex flex-col pt-[10px]">
<!-- popup x start -->
<div class="w-full flex flex-col gap-[20px]">
<p class="text-base line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!-- popup x end -->
</div>
</div>
</div>
</div>
</div>
</div>
<div popupID="Report" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
<div class="w-full flex flex-col justify-start items-center">
<div class="w-full max-w-[500px] justify-start items-center">
<div class="w-full bg-bgMain2 p-[15px] shadow-lg gap-[5px]">
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/15">
<p class="font-bold text-lg">Report</p>
<button popupaction="closeReport" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-x text-xl"></i>
</button>
</div>
<div class="w-full flex flex-col pt-[10px]">
<!-- popup x start -->
<div class="w-full flex flex-col gap-[20px]">
<p class="text-base">What's wrong with this profile?</p>
<div class="w-full flex flex-col gap-[10px] flex-wrap overflow-auto max-h-[500px]">
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're a spammer</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're a scammer</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're an illegal poster</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're publishing unrelated Products</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Other</label></div>
</div>
</div>
<textarea type="text" placeholder="Optional note/message..." class="col-span-7 w-full min-h-[125px] px-[15px] py-[10px] bg-black/10 placeholder:text-white/25 border-[1px] border-white/10 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain"></textarea>
<div class="w-full flex flex-row pt-[10px] border-t-[1px] border-white/10">
<buttons class="w-full flex flex-col justify-center items-center bg-btnMain text-textMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
Send report
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</buttons>
</div>
</div>
<!-- popup x end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- popups end -->
<!-- SCRIPTS START-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.js"></script>
<script src="./assets/js/dropdown.js"></script>
<script src="./assets/js/popups.js"></script>
<script src="./assets/js/tabSys.js"></script>
<script src="./assets/js/componentLoader.js"></script>
<script>AOS.init();</script>
<!-- SCRIPTS END-->
<!--
reusables: sec and container
<div class="w-full flex flex-col gap-[25px] py-[50px] items-center">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative"></div>
</div>
-->
</body>
</html>

77
search.html

@ -47,41 +47,64 @@
<div class="relative flex flex-col items-start">
<p class="font-bold text-base bg-bgMain px-[10px] py-[3px] mb-[-15px] ml-[15px] z-[1]">Filters</p>
<div class="w-full flex flex-row gap-[10px] flex-wrap p-[15px] border-[3px] border-bgMain2">
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Rating: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">Exceptional</span></p>
<div class="relative inline-block">
<button class="dropdown-button bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Moderation Level</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Site &amp; User</span>
</button>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site &amp; User</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site</p>
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">None</p>
</div>
</div>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Rating</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Exception</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Product: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">Wine</span></p>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Product</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Wine</span>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Type: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">White</span></p>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Type</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">White</span>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Style: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">Table</span></p>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Style</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Table</span>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Characteristic: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">Textural / Light Aromatic</span></p>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Characteristic</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Textural / Light Aromatic</span>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Country: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">Armenia</span></p>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Country</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Armenia</span>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Region: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">East-Europe</span></p>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Region</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">East-Europe</span>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Sub-Region: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">...</span></p>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Sub-region</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Village: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">...</span></p>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Village</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Vineyard: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">...</span></p>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Vineyard</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Producer: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">...</span></p>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Producer</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
<button class="bg-white/10 text-textMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain">
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Label: <span class="bg-black/15 h-full w-full px-[8px] flex flex-row items-center">...</span></p>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Label</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
</div>
</div>
@ -164,16 +187,12 @@
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Spirit</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Coffee</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Misc</label></div>
</div>
</div>
<div class="w-full flex flex-row pt-[10px] border-t-[1px] border-bgMain2/25">
<div class="w-full flex flex-row pt-[10px] border-t-[1px] border-white/10">
<buttons class="w-full flex flex-col justify-center items-center bg-btnMain text-textMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
Set Filter
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>

177
settings.html Normal file

@ -0,0 +1,177 @@
<html class="bg-bgMain min-h-screen flex flex-col scroll-smooth font-merriweather">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Cellar Social</title>
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=libre-baskerville:400,400i,700,700i|merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet" />
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script src="tailwind-config.js" defer></script>
<link rel="stylesheet" href="./assets/css/custom.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.css" />
</head>
<body class="bg-transparent flex flex-col items-center flex-grow min-h-screen relative tracking-wide text-lg leading-[1.5] break-words text-textMain">
<!-- main navbar start -->
<div id="nav2-component"></div>
<!-- main navbar end -->
<!-- main middle start -->
<div class="w-full flex flex-col grow-[1] pt-[100px]">
<!-- settings start -->
<div class="w-full flex flex-col justify-center items-center">
<div class="max-w-[1400px] w-full grow-[1] flex flex-col justify-center items-center px-[10px] relative">
<div class="w-full flex flex-col gap-[25px] py-[50px]">
<h1 class="text-3xl font-bold border-b-[1px] border-white/10 pb-[15px]">Settings</h1>
<div tabSys class="w-full grid grid-cols-8 gap-[50px] max-md:grid-cols-1">
<!-- tabs selectors start-->
<div class="w-full col-span-2 relative max-md:col-span-1 p-[15px] bg-bgMain2 shadow-lg">
<div tabSys-Selector class="w-full flex flex-col gap-[10px] sticky top-[10px]">
<button class="w-full px-[15px] py-[5px] bg-btnMain text-textMain transition-all ease duration-[0.4s]">Profile</button>
<button class="w-full px-[15px] py-[5px] text-textMain2 transition-all ease duration-[0.4s] hover:bg-btnMain/75">Moderation</button>
<button class="w-full px-[15px] py-[5px] text-textMain2 transition-all ease duration-[0.4s] hover:bg-btnMain/75">Relays</button>
</div>
</div>
<!-- tabs selectors end-->
<!-- tabs content start-->
<div tabSys-Content class="w-full flex flex-col gap-[10px] col-span-6 max-md:col-span-1">
<div class="w-full flex flex-col gap-[10px]">
p1
</div>
<div class="w-full hidden flex-col gap-[10px]">
p2
</div>
<div class="w-full hidden flex-col gap-[10px]">
p3
</div>
</div>
<!-- tabs content end-->
</div>
</div>
</div>
</div>
</div>
<!-- settings end -->
</div>
<!-- main middle end -->
<!-- main footer start -->
<div id="footer-component"></div>
<!-- main footer end -->
<!-- popups start -->
<div popupID="Bio" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
<div class="w-full flex flex-col justify-start items-center">
<div class="w-full max-w-[1000px] justify-start items-center">
<div class="w-full bg-bgMain2 p-[15px] shadow-lg gap-[5px]">
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/15">
<p class="font-bold text-lg">User bio</p>
<button popupaction="closeBio" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-x text-xl"></i>
</button>
</div>
<div class="w-full flex flex-col pt-[10px]">
<!-- popup x start -->
<div class="w-full flex flex-col gap-[20px]">
<p class="text-base line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!-- popup x end -->
</div>
</div>
</div>
</div>
</div>
</div>
<div popupID="Report" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
<div class="w-full flex flex-col justify-start items-center">
<div class="w-full max-w-[500px] justify-start items-center">
<div class="w-full bg-bgMain2 p-[15px] shadow-lg gap-[5px]">
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/15">
<p class="font-bold text-lg">Report</p>
<button popupaction="closeReport" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-x text-xl"></i>
</button>
</div>
<div class="w-full flex flex-col pt-[10px]">
<!-- popup x start -->
<div class="w-full flex flex-col gap-[20px]">
<p class="text-base">What's wrong with this profile?</p>
<div class="w-full flex flex-col gap-[10px] flex-wrap overflow-auto max-h-[500px]">
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're a spammer</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're a scammer</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're an illegal poster</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">They're publishing unrelated Products</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Other</label></div>
</div>
</div>
<textarea type="text" placeholder="Optional note/message..." class="col-span-7 w-full min-h-[125px] px-[15px] py-[10px] bg-black/10 placeholder:text-white/25 border-[1px] border-white/10 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain"></textarea>
<div class="w-full flex flex-row pt-[10px] border-t-[1px] border-white/10">
<buttons class="w-full flex flex-col justify-center items-center bg-btnMain text-textMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
Send report
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</buttons>
</div>
</div>
<!-- popup x end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- popups end -->
<!-- SCRIPTS START-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.js"></script>
<script src="./assets/js/dropdown.js"></script>
<script src="./assets/js/popups.js"></script>
<script src="./assets/js/tabSys.js"></script>
<script src="./assets/js/componentLoader.js"></script>
<script>AOS.init();</script>
<!-- SCRIPTS END-->
<!--
reusables: sec and container
<div class="w-full flex flex-col gap-[25px] py-[50px] items-center">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative"></div>
</div>
-->
</body>
</html>

261
submit.html Normal file

@ -0,0 +1,261 @@
<html class="bg-bgMain min-h-screen flex flex-col scroll-smooth font-merriweather">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Cellar Social</title>
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=libre-baskerville:400,400i,700,700i|merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet" />
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script src="tailwind-config.js" defer></script>
<link rel="stylesheet" href="./assets/css/custom.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.css" />
</head>
<body class="bg-transparent flex flex-col items-center flex-grow min-h-screen relative tracking-wide text-lg leading-[1.5] break-words text-textMain">
<!-- main navbar start -->
<div id="nav2-component"></div>
<!-- main navbar end -->
<!-- main middle start -->
<div class="w-full flex flex-col grow-[1] pt-[100px]">
<!-- submit start -->
<div class="w-full flex flex-col justify-center items-center">
<div class="max-w-[1400px] w-full grow-[1] flex flex-col justify-center items-center px-[10px] relative">
<div class="w-full flex flex-col gap-[15px] py-[50px]">
<h1 class="text-3xl font-bold border-b-[1px] border-white/10 pb-[15px]">Product Submission</h1>
<div class="w-full flex flex-col gap-[25px]">
<div class="w-full flex flex-col gap-[15px] pb-[25px] border-b-[1px] border-white/10 last:pb-[0px] last:border-b-[0px]">
<p class="text-lg font-bold">General Product Details</p>
<div class="flex flex-col gap-[15px] flex-wrap">
<div class="flex flex-col gap-[5px] grow-[1]">
<label class="text-base text-textMain2 font-bold">Product title</label>
<input type="text" placeholder="Product title..." class="w-full bg-black/10 py-[5px] px-[10px] border-[1px] border-white/10 text-base placeholder:text-white/50 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain"></input>
</div>
<div class="flex flex-col gap-[5px] grow-[1]">
<label class="text-base text-textMain2 font-bold">Summary</label>
<textarea type="text" placeholder="Summary..." class="col-span-7 w-full min-h-[125px] px-[15px] py-[10px] bg-black/10 placeholder:text-white/25 border-[1px] border-white/10 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain"></textarea>
</div>
<div class="flex flex-col gap-[5px] grow-[1]">
<label class="text-base text-textMain2 font-bold">Body</label>
<textarea type="text" placeholder="Body..." class="col-span-7 w-full min-h-[125px] px-[15px] py-[10px] bg-black/10 placeholder:text-white/25 border-[1px] border-white/10 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain"></textarea>
</div>
<div class="flex flex-col gap-[5px] grow-[1]">
<label class="text-base text-textMain2 font-bold">Price</label>
<input type="number" placeholder="$00" class="w-full bg-black/10 py-[5px] px-[10px] border-[1px] border-white/10 text-base placeholder:text-white/50 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain"></input>
</div>
<div class="flex flex-row gap-[15px] max-sm:flex-col">
<div class="flex flex-col gap-[5px] grow-[1]">
<label class="text-base text-textMain2 font-bold">Featured product image</label>
<div class="w-full flex flex-row">
<div class="w-full flex flex-row">
<input type="text" placeholder="Search..." class="w-full bg-black/10 py-[5px] px-[10px] border-[1px] border-white/10 placeholder:text-white/50 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain">
</div>
<button class="flex flex-col justify-center items-center bg-bgMain2 text-textMain p-[10px] cursor-pointer relative group transition-all ease duration-[0.3s] bg-btnMain">
<i class="bx bx-upload"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
</div>
</div>
<div class="w-full max-w-[100px] min-w-[100px] relative bg-black/10 overflow-hidden">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="aspect-square w-full absolute inset-0 object-cover max-sm:relative"></img>
</div>
</div>
<div class="w-full flex flex-col gap-[10px]">
<div class="flex flex-row gap-[15px] max-sm:flex-col">
<div class="flex flex-col gap-[5px] grow-[1]">
<label class="text-base text-textMain2 font-bold">Product image 1</label>
<div class="w-full flex flex-row">
<div class="w-full flex flex-row">
<input type="text" placeholder="Search..." class="w-full bg-black/10 py-[5px] px-[10px] border-[1px] border-white/10 placeholder:text-white/50 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain">
</div>
<button class="flex flex-col justify-center items-center bg-bgMain2 text-textMain p-[10px] cursor-pointer relative group transition-all ease duration-[0.3s] bg-btnMain">
<i class="bx bx-upload"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
</div>
</div>
<div class="w-full max-w-[100px] min-w-[100px] relative bg-black/10 overflow-hidden">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="aspect-square w-full absolute inset-0 object-cover max-sm:relative"></img>
</div>
</div>
<div class="flex flex-row gap-[15px] max-sm:flex-col">
<div class="flex flex-col gap-[5px] grow-[1]">
<label class="text-base text-textMain2 font-bold">Product image 2</label>
<div class="w-full flex flex-row">
<div class="w-full flex flex-row">
<input type="text" placeholder="Search..." class="w-full bg-black/10 py-[5px] px-[10px] border-[1px] border-white/10 placeholder:text-white/50 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain">
</div>
<button class="flex flex-col justify-center items-center bg-bgMain2 text-textMain p-[10px] cursor-pointer relative group transition-all ease duration-[0.3s] bg-btnMain">
<i class="bx bx-upload"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
</div>
</div>
<div class="w-full max-w-[100px] min-w-[100px] relative bg-black/10 overflow-hidden">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="aspect-square w-full absolute inset-0 object-cover max-sm:relative"></img>
</div>
</div>
<button class="text-sm bg-white/10 text-textMain2 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-plus"></i>
</button>
</div>
<div class="flex flex-col gap-[5px] grow-[1]">
<label class="text-base text-textMain2 font-bold">Details</label>
<div class="w-full flex flex-row gap-[10px] flex-wrap">
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Product</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Wine</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Type</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">White</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Style</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Table</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Characteristic</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Textural / Light Aromatic</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Country</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">Armenia</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Region</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">East-Europe</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Sub-region</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Village</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Vineyard</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Producer</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
<button popupAction="openFilterSearch" class="bg-white/10 text-textMain2 text-sm flex flex-row items-center relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain max-sm:flex-col">
<p class="grow-[1] flex flex-row items-center gap-[5px] whitespace-nowrap px-[10px] py-[3px]">Label</p>
<span class="bg-black/15 w-full h-full flex flex-row items-center px-[10px] py-[3px]">...</span>
</button>
</div>
</div>
</div>
</div>
<div class="w-full flex flex-col gap-[15px] pb-[25px] border-b-[1px] border-white/10 last:pb-[0px] last:border-b-[0px]">
<p class="text-">Extra Details</p>
<div class="flex flex-col gap-[10px] flex-wrap">
<div class="flex flex-col gap-[5px] grow-[1]">
<label class="text-base text-textMain2 font-bold">Info title</label>
<input type="text" placeholder="Info title..." class="w-full bg-black/10 py-[5px] px-[10px] border-[1px] border-white/10 text-base placeholder:text-white/50 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain"></input>
</div>
</div>
</div>
</div>
<div class="w-full flex flex-row pt-[15px] border-t-[1px] border-white/10">
<buttons class="w-full flex flex-col justify-center items-center bg-btnMain text-textMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
Publish Product
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</buttons>
</div>
</div>
</div>
</div>
</div>
<!-- submit end -->
</div>
<!-- main middle end -->
<!-- main footer start -->
<div id="footer-component"></div>
<!-- main footer end -->
<!-- popups start -->
<div popupID="FilterSearch" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
<div class="w-full flex flex-col justify-start items-center">
<div class="w-full max-w-[500px] justify-start items-center">
<div class="w-full bg-bgMain2 p-[15px] shadow-lg gap-[5px]">
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/15">
<p class="font-bold text-lg">Product Filter</p>
<button popupAction="closeFilterSearch" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-btnMain hover:text-textMain">
<i class="bx bx-x text-xl"></i>
</button>
</div>
<div class="w-full flex flex-col pt-[10px]">
<!-- popup x start -->
<div class="w-full flex flex-col gap-[15px]">
<div class="w-full max-w-[500px] flex flex-row">
<div class="w-full flex flex-row">
<input type="text" placeholder="Search..." class="w-full bg-black/10 py-[5px] px-[10px] border-[1px] border-white/10 placeholder:text-white/25 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15">
</div>
</div>
<div class="w-full flex flex-row gap-[10px] flex-wrap overflow-auto max-h-[500px]">
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Wine</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Sake</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Spirit</label></div>
</div>
<div class="relative bg-black/5 group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Misc</label></div>
</div>
</div>
<div class="w-full flex flex-row pt-[10px] border-t-[1px] border-white/10">
<buttons class="w-full flex flex-col justify-center items-center bg-btnMain text-textMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
Set
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</buttons>
</div>
</div>
<!-- popup x end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- popups end -->
<!-- SCRIPTS START-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.js"></script>
<script src="./assets/js/dropdown.js"></script>
<script src="./assets/js/popups.js"></script>
<script src="./assets/js/tabSys.js"></script>
<script src="./assets/js/componentLoader.js"></script>
<script>AOS.init();</script>
<!-- SCRIPTS END-->
<!--
reusables: sec and container
<div class="w-full flex flex-col gap-[25px] py-[50px] items-center">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative"></div>
</div>
-->
</body>
</html>